/* --- CREATOR PIN GATE (lock app, but still allow the PIN popup to show) --- */
html.pin-locked body { visibility: visible !important; }

html.pin-locked .app{
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}
/* --- PIN POPUP (modal) --- */
.pinGateOverlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
}

html.pin-locked .pinGateOverlay{ display: flex; }

.pinGateCard{
  width: min(420px, 92vw);
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.92);
  color: #e5e7eb;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

.pinGateTitle{ font-weight: 900; font-size: 18px; margin: 0 0 6px; }
.pinGateSub{ margin: 0 0 12px; color: rgba(229,231,235,.75); font-size: 13px; }

.pinGateRow{ display:flex; gap:10px; align-items:center; }
.pinGateInput{
  flex:1;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
  font-size: 16px;
  letter-spacing: .15em;
}
.pinGateInput:focus{
  border-color: rgba(122,162,255,.65);
  box-shadow: 0 0 0 3px rgba(122,162,255,.18);
}

.pinGateBtn{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(122,162,255,.25);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.pinGateBtn:active{ transform: translateY(1px); }

.pinGateErr{
  margin-top: 10px;
  color: #ffb4b4;
  font-size: 13px;
  min-height: 18px;
}






:root{
  --bg: transparent;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#22c55e;
  --accent-soft:rgba(34,197,94,.12);
  --radius:18px;

  --note-bg: rgba(251,191,36,.18);
  --note-border: rgba(251,191,36,.45);
  --note-text: #fde68a;

  --dice-purple:#5b136b;
  --dice-purple-deep:#2a0731;
  --dice-white:#f4f4f6;
  --dice-white-deep:#d9d9df;

  --custom-note-bg-img: url('./images/iceCaps.jpg');
--custom-note-overlay: rgba(2,6,23,.55);

}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 background: url("./images/iceCaps.jpg") center / cover no-repeat fixed;

  color:var(--text);
  overflow-x:hidden;
}

/* ✅ make space so the fixed dice banner doesn't cover your content */
.app{
   background: rgb(222 213 213 / 21%);
  width: min(1200px, 100%);
  margin: 18px auto;
  padding: 16px;
   
}


/* =========================
   ✅ TOP BAR (Logout)
========================== */
.topBar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin: 2px 0 10px;
}
.logoutPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:800;
  letter-spacing:.02em;
  font-size:14px;
  line-height:1;
  color:#fff;
  background: rgba(64, 4, 205, 0.55);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.logoutPill:hover{
  background: rgba(0,0,0,.72);
}
@media (max-width: 480px){
  .logoutPill{ padding:7px 10px; font-size:13px; }
}

/* ✅ DICE banner (now below calendar and scrolls with page) */


/* =========================
   HEADER LAYOUT (GRID)
========================== */
header{
   background: rgba(220, 194, 194, 0.26);
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items:start;
  
}
@media (min-width: 980px){
  header{
    grid-template-columns: auto 1fr;
    column-gap: 22px;
  }
}

.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px 2px 0;
  min-width: 260px;
  max-width: 100%;
}

/* =========================
   ✅ TITLE (H1) — FITS + SHADOW
========================== */
.brand .title.block3d {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin: 0;
    font-weight: 1000;
    text-transform: uppercase;
    font-size: clamp(1.15rem, 2.6vw, 2.1rem);
    letter-spacing: clamp(0.02em, .6vw, 0.09em);
    line-height: 1.08;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    color: #25b972;
    -webkit-text-stroke: 1.5px rgba(10, 10, 10, .25);
    text-shadow: 0 2px 0 rgba(255, 255, 255, .12), 0 10px 22px rgba(0, 0, 0, .55), 0 18px 84px rgb(23 22 22 / 36%);
    transform: skewX(-4deg);
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55));
}

.brand .title.block3d::before{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: rgba(0,0,0,.34);
  -webkit-text-stroke: 1.5px rgba(0,0,0,.25);
  transform: translate(10px, 10px);
  text-shadow:
    1px 1px 0 rgba(0,0,0,.18),
    2px 2px 0 rgba(0,0,0,.18),
    3px 3px 0 rgba(0,0,0,.18),
    4px 4px 0 rgba(0,0,0,.18),
    5px 5px 0 rgba(0,0,0,.16),
    6px 6px 0 rgba(0,0,0,.14),
    7px 7px 0 rgba(0,0,0,.12),
    8px 8px 0 rgba(0,0,0,.10);
}

.brand .title.block3d::after{
  content:"";
  position:absolute;
  inset:-14px -12px -16px -12px;
  z-index:-2;
  background:
    repeating-conic-gradient(
      from 200deg,
      rgba(0,0,0,.10) 0 8deg,
      rgba(0,0,0,0) 8deg 16deg
    );
  mask-image: radial-gradient(circle at 35% 45%, rgba(0,0,0,1) 0 52%, rgba(0,0,0,0) 72%);
  opacity:.28;
  pointer-events:none;
}

@media (max-width: 900px){
  .brand{ min-width: 0; }
  .brand .title.block3d{
    font-size: clamp(1.05rem, 4.2vw, 1.65rem);
    letter-spacing: clamp(.02em, .8vw, .07em);
    transform: skewX(-3deg);
  }
  .brand .title.block3d::before{ transform: translate(8px,8px); }
}

@media (max-width: 640px){
  .brand .title.block3d{
    font-size: clamp(.98rem, 5.2vw, 1.35rem);
    letter-spacing: .05em;
    transform: skewX(-2deg);
  }
  .brand .title.block3d::before{ transform: translate(7px,7px); }
}

@media (max-width: 420px){
  .brand .title.block3d{
    font-size: clamp(.92rem, 6.2vw, 1.15rem);
    letter-spacing: .04em;
    line-height: 1.12;
  }
}

/* =========================
   DASHBOARD GRID
========================== */
@media (max-width: 700px){
  .header-right{
    grid-template-columns: 1fr;
    grid-template-areas:
      "time"
      "calendar"
      "paypal"
      "actions";
  }
}

.time-wrap{ display: contents; }

@media (max-width: 1100px){
  .header-right{
    grid-template-columns: minmax(280px, 1fr) minmax(240px, 360px);
    grid-template-areas:
      "time actions"
      "paypal actions"
      "calendar calendar";
  }
}

@media (max-width: 700px){
  .header-right{
    grid-template-columns: 1fr;
    grid-template-areas:
      "time"
      "calendar"
      "paypal"
      "actions";
  }
}

/* =========================
   HEADER-RIGHT GRID (TIME BANNER + ROW BELOW)
   time (full width) then: paypal | actions | calendar
========================== */
.header-right{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;
  grid-template-areas:
    "time time time"
    "paypal actions calendar";
}

/* place the header widgets into the grid areas */
.time-panel{ grid-area: time; }
#paypalInlineBox{ grid-area: paypal; }
.quick-actions-out{ grid-area: actions; }
#calendarCard{ grid-area: calendar; }

@media (max-width: 1100px){
  .header-right{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "time time"
      "paypal actions"
      "calendar calendar";
  }
}

@media (max-width: 700px){
  .header-right{
    grid-template-columns: 1fr;
    grid-template-areas:
      "time"
      "paypal"
      "actions"
      "calendar";
  }
}

/* =========================
   CARDS
========================== */
.time-panel, .mini-calendar{
  background: var(--dice-purple-deep);
  border-radius: var(--radius);
  border: 1px solid rgba(148,163,184,0.4);
  padding: 9px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  font-size: 0.78rem;
  min-width: 0;
}

.time-panel{ display:flex; flex-direction:column; gap:6px; }

.time-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}

.time-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.clock-display{ font-variant-numeric:tabular-nums; font-size:1rem; font-weight:700; }
.timer-display{ font-variant-numeric:tabular-nums; font-size:.98rem; font-weight:800; }

.btn{
  border:none;
  cursor:pointer;
  padding:8px 16px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background: radial-gradient(circle at top left, #4ade80, #22c55e);
  color:#022c22;
  transition: transform .08s ease, filter .08s ease;
  user-select:none;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn.secondary{
  background: rgba(15,23,42,0.9);
  color: var(--muted);
  border: 1px solid rgba(148,163,184,0.5);
}
.btn.secondary:hover{ color: var(--text); border-color: var(--accent); }
.small-btn{ padding:6px 12px; font-size:.78rem; }

.timer-mode-row{ display:flex; gap:6px; margin-top:4px; }
.timer-mode-toggle{ flex:1; justify-content:center; }
.timer-mode-toggle.timer-mode-active{
  border-color: var(--accent);
  color:#bbf7d0;
}

.countdown-inputs{ display:flex; gap:6px; margin-top:4px; }
.countdown-inputs input[type="number"]{
  width:100%;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.6);
  background: rgba(15,23,42,0.85);
  color: var(--text);
  font-size: .75rem;
  outline:none;
  min-width: 0;
}
.countdown-inputs input[type="number"]:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.4);
}

.timer-buttons{
  display:flex;
  gap:6px;
  margin-top:4px;
  justify-content:space-between;
}

/* =========================
   QUICK ACTIONS
========================== */
.quick-actions-out{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-self:start;
  min-width: 0;
}
.quick-btn{
  border:1px solid rgba(148,163,184,0.45);
  background: rgba(15,23,42,0.82);
  color: rgba(229,231,235,.88);
  border-radius: 999px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:10px 14px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  line-height:1;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  transition: transform .08s ease, filter .08s ease, border-color .08s ease;
}
.quick-btn:hover{
  border-color: rgba(34,197,94,.65);
  color: #e5e7eb;
  transform: translateY(-1px);
}

@media (max-width: 700px){
  .quick-actions-out{
    flex-direction: row;
    flex-wrap: wrap;
  }
  .quick-btn{
    flex: 1 1 220px;
    text-align:center;
  }
}

/* =========================
   PAYPAL CARD
========================== */
.paypal-inline{
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(2,6,23,.55);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  min-width: 0;
  overflow: visible !important;
}
.paypal-inline .pp-title{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.10em;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 900;
}
#paypalButtonsInline, #paypalButtonsModal{
  width:100%;
  min-width: 0;
  overflow: visible !important;
}
#paypalButtonsInline iframe, #paypalButtonsModal iframe{
  max-width:100% !important;
}

.paywall-note{
  margin-top: 10px;
  font-size: .78rem;
  color: rgba(156,163,175,.9);
}

/* =========================
   MINI CALENDAR + NOTES (your original)
========================== */
.mini-calendar{ position:relative; }

.mini-calendar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-bottom:4px;
}
.mini-cal-title{
  font-size:.78rem;
  font-weight:700;
  text-align:center;
  flex:1;
}
.mini-cal-nav{
  border:1px solid rgba(148,163,184,0.6);
  background: rgba(15,23,42,0.9);
  color: var(--muted);
  border-radius:999px;
  width:22px;
  height:22px;
  font-size:.8rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  user-select:none;
}
.mini-cal-nav:hover{ border-color: var(--accent); color: var(--text); }

.mini-calendar-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:2px;
  font-size:.7rem;
  margin-bottom:4px;
}
.mini-cal-day-name{
  text-align:center;
  color: var(--muted);
  padding:2px 0;
  user-select:none;
}

.mini-cal-day{
  text-align:center;
  padding:3px 0;
  border-radius:6px;
  cursor:pointer;
  border:1px solid transparent;
  font-variant-numeric: tabular-nums;
  background: transparent;
  color: inherit;
  user-select:none;
  position: relative;
  overflow:hidden;
}

.mini-cal-day .day-num{
  position:relative;
  z-index:2;
  display:inline-block;
  line-height:1;
  padding:0 2px;
}

.mini-cal-day.empty{ cursor:default; opacity:.35; }
.mini-cal-day.today{ border-color: rgba(59,130,246,0.9); }
.mini-cal-day.selected{
  background: var(--accent-soft);
  border-color: var(--accent);
  color: #bbf7d0;
}

.mini-cal-day.has-notes::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(251,191,36,.16);
  z-index:0;
}
.mini-cal-day.has-notes::after{
  content:"";
  position:absolute;
  right:-10px;
  top:-10px;
  width:26px;
  height:26px;
  background: rgba(251,191,36,.28);
  border:1px solid rgba(251,191,36,.35);
  transform: rotate(15deg);
  border-radius:8px;
  z-index:1;
}

.mini-calendar-selected{
  font-size:.7rem;
  color: var(--muted);
}

/* Sticky Notes POPOVER */
.notes-popover{
  position:absolute;
  left:12px;
  right:12px;
  top: calc(100% + 10px);
  background: rgba(2,6,23,.96);
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.7);
  padding: 12px;
  display:none;
  z-index:50;
}
.notes-popover.open{ display:block; }

/* PAYWALL (Modal) */
.paywall{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.72);
  z-index: 9999;
  padding: 18px;
}
.paywall.open{ display: grid; }

/* =========================
   ✅ FLOATING DICE BANNER (BACK + BOTTOM)
========================== */
.dice-banner {
    margin: 7px 0 14px;
    padding: 16px -6px 22px;
    border-radius: 24px;
    background: black;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 22px 80px rgba(0, 0, 0, .35);
    overflow: hidden;
}
.dice-stage {
    perspective: 2600px;
    perspective-origin: 50% 35%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: url('https://i.imgur.com/almafi.png');
}
.dice-word{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 18px;
  align-items:flex-end;
  transform-style: preserve-3d;
  padding: 4px 0;
  user-select:none;
  pointer-events:none;
  margin: 10px;
}
.dice-word.row1{ transform: rotateX(16deg) rotateY(-1deg) translateZ(-200px); }
.dice-word.row2{ transform: rotateX(18deg) rotateY(18deg) translateZ(-123px); }
.dice-gap{ width: 28px; height: 96px; }
.cube-wrap{
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--rx) * 1deg))
    rotateY(calc(var(--ry) * 1deg))
    rotateZ(calc(var(--rz) * 1deg));
}
.cube{
  --size: 96px;
  --half: calc(var(--size) / 2);
  width: var(--size);
  height: var(--size);
  position: relative;
  transform-style: preserve-3d;
  animation: cubeBounce 1180ms cubic-bezier(.2,.95,.24,1) infinite;
  animation-delay: calc(var(--i) * 85ms);
  filter:
    drop-shadow(0 34px 24px rgba(0,0,0,.72))
    drop-shadow(0 12px 10px rgba(0,0,0,.42));
}
.cube::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: -26px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(0,0,0,.58), transparent 72%);
  transform: translateZ(-1px);
  filter: blur(1.2px);
  opacity: .9;
  pointer-events:none;
}
.face{
  position:absolute;
  inset:0;
  border-radius: 10px;
  display:grid;
  place-items:center;
  font-weight: 950;
  font-size: 44px;
  letter-spacing: .02em;
  backface-visibility: hidden;
  border: 1px solid rgba(255,255,255,.16);
  text-shadow:
    0 2px 0 rgba(0,0,0,.45),
    0 10px 24px rgba(0,0,0,.25);
  user-select:none;
  overflow:hidden;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 14px 14px 22px rgba(255,255,255,.07),
    inset -16px -18px 26px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,0,0,.18);
}
.cube.purple .face{
  color: #f5f6f8;
  background:
    radial-gradient(circle at 25% 22%, rgba(255,255,255,.26), transparent 40%),
    radial-gradient(circle at 70% 85%, rgba(0,0,0,.38), transparent 58%),
    linear-gradient(145deg, var(--dice-purple), #1a0220);
  border-color: rgba(255,255,255,.12);
}
.cube.white .face{
  color: var(--dice-purple);
  background:
    radial-gradient(circle at 25% 22%, rgba(255,255,255,.98), transparent 45%),
    radial-gradient(circle at 70% 85%, rgba(0,0,0,.16), transparent 58%),
    linear-gradient(145deg, var(--dice-white), var(--dice-white-deep));
  border-color: rgba(0,0,0,.12);
  text-shadow:
    0 1px 0 rgba(255,255,255,.55),
    0 10px 24px rgba(0,0,0,.18);
}
.face::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 22%),
    radial-gradient(circle at 55% 55%, rgba(255,255,255,.06), transparent 24%),
    radial-gradient(circle at 40% 82%, rgba(0,0,0,.12), transparent 30%),
    repeating-radial-gradient(circle at 30% 35%, rgba(255,255,255,.035) 0 1px, transparent 1px 6px),
    linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.12));
  opacity:.95;
  pointer-events:none;
  mix-blend-mode: overlay;
}
.front  { transform: translateZ(var(--half)); }
.back   { transform: rotateY(180deg) translateZ(var(--half)); }
.right  { transform: rotateY(90deg)  translateZ(var(--half)); }
.left   { transform: rotateY(-90deg) translateZ(var(--half)); }
.top    { transform: rotateX(90deg)  translateZ(var(--half)); }
.bottom { transform: rotateX(-90deg) translateZ(var(--half)); }

@keyframes cubeBounce{
  0%   { transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  32%  { transform: translateY(-44px) rotateX(18deg) rotateY(-18deg) rotateZ(6deg); }
  58%  { transform: translateY(0) rotateX(-14deg) rotateY(14deg) rotateZ(-4deg); }
  80%  { transform: translateY(-14px) rotateX(8deg) rotateY(-8deg) rotateZ(3deg); }
  100% { transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
}

@media (max-width: 640px){
  .dice-stage{ flex-direction: row; gap: 14px; perspective-origin: 50% 30%; }
  .dice-word{ flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 0; margin: 8px; }
  .dice-word.row1,.dice-word.row2{ transform:none; }
  .dice-gap{ width:0; height:0; }
  .cube{ --size: 62px; }
  .face{ font-size: 30px; }

  /* keep bottom banner from eating space */
  .app{ padding-bottom: 220px; }
}
/* =========================
   ✅ PRICING + ENCOURAGEMENT (NEW SECTION)
========================== */
.pricing-section{
  margin: 18px 0 34px;
}

.pricing-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 900px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

.pricing-card, .encourage-card{
  background: rgba(2,6,23,.72);
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  padding: 14px;
  min-width: 0;
}

.pricing-badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  border: 1px solid rgba(34,197,94,.45);
  background: rgba(34,197,94,.12);
  color: #bbf7d0;
}

.pricing-title{
  margin: 10px 0 6px;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  letter-spacing: .02em;
}

.pricing-sub{
  color: rgba(229,231,235,.86);
  font-size: .95rem;
  line-height: 1.3;
  margin-bottom: 10px;
}

.pricing-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(229,231,235,.92);
  line-height: 1.45;
}

.pricing-actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.pricing-btn{
  flex: 1 1 220px;
}

.pricing-fineprint{
  margin-top: 10px;
  font-size: .85rem;
  color: rgba(156,163,175,.92);
}

.encourage-title{
  margin: 0 0 8px;
  font-size: 1.1rem;
  letter-spacing: .02em;
}

.encourage-text{
  margin: 0 0 12px;
  color: rgba(229,231,235,.9);
  line-height: 1.45;
}

.encourage-quotes{
  display:grid;
  gap: 8px;
}

.quote{
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15,23,42,.65);
  border: 1px solid rgba(148,163,184,.25);
  color: rgba(229,231,235,.92);
  font-weight: 700;
}

.encourage-footer{
  margin-top: 12px;
  font-size: .85rem;
  color: rgba(156,163,175,.92);
}

/* small status line */
.access-status{
  margin: 8px 0 10px;
  font-size: .82rem;
  color: rgba(229,231,235,.85);
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(148,163,184,.25);
}
/* ===== Rules / Help sections (bottom of Setup + Edit) ===== */
.rulesBox{
  margin-top: 14px;
  text-align: left;
  background: #0000a6;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 14px;
  line-height: 1.35;
}

.rulesTitle{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 900;
  opacity: .98;
}

.rulesList{
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  opacity: .95;
}

.rulesList li{ margin: 6px 0; }

.rulesNote{
  margin: 10px 0 0;
  font-size: 12px;
  opacity: .85;
}
/* ✅ FIX: keep quick button text inside the pill */
.quick-btn{
  white-space: normal !important;       /* allow wrapping */
  overflow-wrap: anywhere !important;   /* break long chunks */
  word-break: break-word !important;
  line-height: 1.2 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  padding: 14px 16px !important;
  height: auto !important;
}
:root{
  --bg: transparent;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#22c55e;
  --accent-soft:rgba(34,197,94,.12);
  --radius:18px;

  --note-bg: rgba(251,191,36,.18);
  --note-border: rgba(251,191,36,.45);
  --note-text: #fde68a;

  --dice-purple:#5b136b;
  --dice-purple-deep:#2a0731;
  --dice-white:#f4f4f6;
  --dice-white-deep:#d9d9df;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 background: url("./images/iceCaps.jpg") center / cover no-repeat fixed;

  color:var(--text);
  overflow-x:hidden;
}

/* ✅ make space so the fixed dice banner doesn't cover your content */
.app{
  width: min(1200px, 100%);
  margin: 18px auto;
  padding: 16px;
}

/* ✅ DICE banner (now below calendar and scrolls with page) */


/* =========================
   HEADER LAYOUT (GRID)
========================== */
header{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items:start;
}
@media (min-width: 980px){
  header{
    grid-template-columns: auto 1fr;
    column-gap: 22px;
  }
}

.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px 2px 0;
  min-width: 260px;
  max-width: 100%;
}

/* =========================
   ✅ TITLE (H1) — FITS + SHADOW
========================== */
.brand .title.block3d {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin: 0;
    font-weight: 1000;
    text-transform: uppercase;
    font-size: clamp(1.15rem, 2.6vw, 2.1rem);
    letter-spacing: clamp(0.02em, .6vw, 0.09em);
    line-height: 1.08;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    color: #25b972;
    -webkit-text-stroke: 1.5px rgba(10, 10, 10, .25);
    text-shadow: 0 2px 0 rgba(255, 255, 255, .12), 0 10px 22px rgba(0, 0, 0, .55), 0 18px 84px rgb(23 22 22 / 36%);
    transform: skewX(-4deg);
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55));
}

.brand .title.block3d::before{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: rgba(0,0,0,.34);
  -webkit-text-stroke: 1.5px rgba(0,0,0,.25);
  transform: translate(10px, 10px);
  text-shadow:
    1px 1px 0 rgba(0,0,0,.18),
    2px 2px 0 rgba(0,0,0,.18),
    3px 3px 0 rgba(0,0,0,.18),
    4px 4px 0 rgba(0,0,0,.18),
    5px 5px 0 rgba(0,0,0,.16),
    6px 6px 0 rgba(0,0,0,.14),
    7px 7px 0 rgba(0,0,0,.12),
    8px 8px 0 rgba(0,0,0,.10);
}

.brand .title.block3d::after{
  content:"";
  position:absolute;
  inset:-14px -12px -16px -12px;
  z-index:-2;
  background:
    repeating-conic-gradient(
      from 200deg,
      rgba(0,0,0,.10) 0 8deg,
      rgba(0,0,0,0) 8deg 16deg
    );
  mask-image: radial-gradient(circle at 35% 45%, rgba(0,0,0,1) 0 52%, rgba(0,0,0,0) 72%);
  opacity:.28;
  pointer-events:none;
}

@media (max-width: 900px){
  .brand{ min-width: 0; }
  .brand .title.block3d{
    font-size: clamp(1.05rem, 4.2vw, 1.65rem);
    letter-spacing: clamp(.02em, .8vw, .07em);
    transform: skewX(-3deg);
  }
  .brand .title.block3d::before{ transform: translate(8px,8px); }
}

@media (max-width: 640px){
  .brand .title.block3d{
    font-size: clamp(.98rem, 5.2vw, 1.35rem);
    letter-spacing: .05em;
    transform: skewX(-2deg);
  }
  .brand .title.block3d::before{ transform: translate(7px,7px); }
}

@media (max-width: 420px){
  .brand .title.block3d{
    font-size: clamp(.92rem, 6.2vw, 1.15rem);
    letter-spacing: .04em;
    line-height: 1.12;
  }
}

/* =========================
   DASHBOARD GRID
========================== */
@media (max-width: 700px){
  .header-right{
    grid-template-columns: 1fr;
    grid-template-areas:
      "time"
      "calendar"
      "paypal"
      "actions";
  }
}

.time-wrap{ display: contents; }

@media (max-width: 1100px){
  .header-right{
    grid-template-columns: minmax(280px, 1fr) minmax(240px, 360px);
    grid-template-areas:
      "time actions"
      "paypal actions"
      "calendar calendar";
  }
}

@media (max-width: 700px){
  .header-right{
    grid-template-columns: 1fr;
    grid-template-areas:
      "time"
      "calendar"
      "paypal"
      "actions";
  }
}

/* =========================
   CARDS
========================== */
.time-panel, .mini-calendar{
  background: var(--dice-purple-deep);
  border-radius: var(--radius);
  border: 1px solid rgba(148,163,184,0.4);
  padding: 9px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  font-size: 0.78rem;
  min-width: 0;
}

.time-panel{ display:flex; flex-direction:column; gap:6px; }

.time-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}

.time-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.clock-display{ font-variant-numeric:tabular-nums; font-size:1rem; font-weight:700; }
.timer-display{ font-variant-numeric:tabular-nums; font-size:.98rem; font-weight:800; }

.btn{
  border:none;
  cursor:pointer;
  padding:8px 16px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background: radial-gradient(circle at top left, #4ade80, #22c55e);
  color:#022c22;
  transition: transform .08s ease, filter .08s ease;
  user-select:none;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn.secondary{
  background: rgba(15,23,42,0.9);
  color: var(--muted);
  border: 1px solid rgba(148,163,184,0.5);
}
.btn.secondary:hover{ color: var(--text); border-color: var(--accent); }
.small-btn{ padding:6px 12px; font-size:.78rem; }

.timer-mode-row{ display:flex; gap:6px; margin-top:4px; }
.timer-mode-toggle{ flex:1; justify-content:center; }
.timer-mode-toggle.timer-mode-active{
  border-color: var(--accent);
  color:#bbf7d0;
}

.countdown-inputs{ display:flex; gap:6px; margin-top:4px; }
.countdown-inputs input[type="number"]{
  width:100%;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.6);
  background: rgba(15,23,42,0.85);
  color: var(--text);
  font-size: .75rem;
  outline:none;
  min-width: 0;
}
.countdown-inputs input[type="number"]:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.4);
}

.timer-buttons{
  display:flex;
  gap:6px;
  margin-top:4px;
  justify-content:space-between;
}

/* =========================
   QUICK ACTIONS
========================== */
.quick-actions-out{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-self:start;
  min-width: 0;
}
.quick-btn{
  border:1px solid rgba(148,163,184,0.45);
  background: rgba(15,23,42,0.82);
  color: rgba(229,231,235,.88);
  border-radius: 999px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:10px 14px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  line-height:1;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  transition: transform .08s ease, filter .08s ease, border-color .08s ease;
}
.quick-btn:hover{
  border-color: rgba(34,197,94,.65);
  color: #e5e7eb;
  transform: translateY(-1px);
}

@media (max-width: 700px){
  .quick-actions-out{
    flex-direction: row;
    flex-wrap: wrap;
  }
  .quick-btn{
    flex: 1 1 220px;
    text-align:center;
  }
}

/* =========================
   PAYPAL CARD
========================== */
.paypal-inline{
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(2,6,23,.55);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  min-width: 0;
  overflow: visible !important;
}
.paypal-inline .pp-title{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.10em;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 900;
}
#paypalButtonsInline, #paypalButtonsModal{
  width:100%;
  min-width: 0;
  overflow: visible !important;
}
#paypalButtonsInline iframe, #paypalButtonsModal iframe{
  max-width:100% !important;
}

.paywall-note{
  margin-top: 10px;
  font-size: .78rem;
  color: rgba(156,163,175,.9);
}

/* =========================
   MINI CALENDAR + NOTES (your original)
========================== */
.mini-calendar{ position:relative; }

.mini-calendar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-bottom:4px;
}
.mini-cal-title{
  font-size:.78rem;
  font-weight:700;
  text-align:center;
  flex:1;
}
.mini-cal-nav{
  border:1px solid rgba(148,163,184,0.6);
  background: rgba(15,23,42,0.9);
  color: var(--muted);
  border-radius:999px;
  width:22px;
  height:22px;
  font-size:.8rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  user-select:none;
}
.mini-cal-nav:hover{ border-color: var(--accent); color: var(--text); }

.mini-calendar-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:2px;
  font-size:.7rem;
  margin-bottom:4px;
}
.mini-cal-day-name{
  text-align:center;
  color: var(--muted);
  padding:2px 0;
  user-select:none;
}

.mini-cal-day{
  text-align:center;
  padding:3px 0;
  border-radius:6px;
  cursor:pointer;
  border:1px solid transparent;
  font-variant-numeric: tabular-nums;
  background: transparent;
  color: inherit;
  user-select:none;
  position: relative;
  overflow:hidden;
}

.mini-cal-day .day-num{
  position:relative;
  z-index:2;
  display:inline-block;
  line-height:1;
  padding:0 2px;
}

.mini-cal-day.empty{ cursor:default; opacity:.35; }
.mini-cal-day.today{ border-color: rgba(59,130,246,0.9); }
.mini-cal-day.selected{
  background: var(--accent-soft);
  border-color: var(--accent);
  color: #bbf7d0;
}

.mini-cal-day.has-notes::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(251,191,36,.16);
  z-index:0;
}
.mini-cal-day.has-notes::after{
  content:"";
  position:absolute;
  right:-10px;
  top:-10px;
  width:26px;
  height:26px;
  background: rgba(251,191,36,.28);
  border:1px solid rgba(251,191,36,.35);
  transform: rotate(15deg);
  border-radius:8px;
  z-index:1;
}

.mini-calendar-selected{
  font-size:.7rem;
  color: var(--muted);
}

/* Sticky Notes POPOVER */
.notes-popover{
  position:absolute;
  left:12px;
  right:12px;
  top: calc(100% + 10px);
  background: rgba(2,6,23,.96);
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.7);
  padding: 12px;
  display:none;
  z-index:50;
}
.notes-popover.open{ display:block; }

/* PAYWALL (Modal) */
.paywall{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.72);
  z-index: 9999;
  padding: 18px;
}
.paywall.open{ display: grid; }

/* =========================
   ✅ FLOATING DICE BANNER (BACK + BOTTOM)
========================== */
.dice-banner {
    margin: 7px 0 14px;
    padding: 16px -6px 22px;
    border-radius: 24px;
    background: #bfb2d7f0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 22px 80px rgba(0, 0, 0, .35);
    overflow: hidden;
}
.dice-stage {
    perspective: 2600px;
    perspective-origin: 50% 35%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #bfb2d7f0;
}
.dice-word{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 18px;
  align-items:flex-end;
  transform-style: preserve-3d;
  padding: 4px 0;
  user-select:none;
  pointer-events:none;
  margin: 10px;
}
.dice-word.row1{ transform: rotateX(16deg) rotateY(-1deg) translateZ(-200px); }
.dice-word.row2{ transform: rotateX(18deg) rotateY(18deg) translateZ(-123px); }
.dice-gap{ width: 28px; height: 96px; }
.cube-wrap{
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--rx) * 1deg))
    rotateY(calc(var(--ry) * 1deg))
    rotateZ(calc(var(--rz) * 1deg));
}
.cube{
  --size: 96px;
  --half: calc(var(--size) / 2);
  width: var(--size);
  height: var(--size);
  position: relative;
  transform-style: preserve-3d;
  animation: cubeBounce 1180ms cubic-bezier(.2,.95,.24,1) infinite;
  animation-delay: calc(var(--i) * 85ms);
  filter:
    drop-shadow(0 34px 24px rgba(0,0,0,.72))
    drop-shadow(0 12px 10px rgba(0,0,0,.42));
}
.cube::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: -26px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(0,0,0,.58), transparent 72%);
  transform: translateZ(-1px);
  filter: blur(1.2px);
  opacity: .9;
  pointer-events:none;
}
.face{
  position:absolute;
  inset:0;
  border-radius: 10px;
  display:grid;
  place-items:center;
  font-weight: 950;
  font-size: 44px;
  letter-spacing: .02em;
  backface-visibility: hidden;
  border: 1px solid rgba(255,255,255,.16);
  text-shadow:
    0 2px 0 rgba(0,0,0,.45),
    0 10px 24px rgba(0,0,0,.25);
  user-select:none;
  overflow:hidden;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 14px 14px 22px rgba(255,255,255,.07),
    inset -16px -18px 26px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,0,0,.18);
}
.cube.purple .face{
  color: #f5f6f8;
  background:
    radial-gradient(circle at 25% 22%, rgba(255,255,255,.26), transparent 40%),
    radial-gradient(circle at 70% 85%, rgba(0,0,0,.38), transparent 58%),
    linear-gradient(145deg, var(--dice-purple), #1a0220);
  border-color: rgba(255,255,255,.12);
}
.cube.white .face{
  color: var(--dice-purple);
  background:
    radial-gradient(circle at 25% 22%, rgba(255,255,255,.98), transparent 45%),
    radial-gradient(circle at 70% 85%, rgba(0,0,0,.16), transparent 58%),
    linear-gradient(145deg, var(--dice-white), var(--dice-white-deep));
  border-color: rgba(0,0,0,.12);
  text-shadow:
    0 1px 0 rgba(255,255,255,.55),
    0 10px 24px rgba(0,0,0,.18);
}
.face::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 22%),
    radial-gradient(circle at 55% 55%, rgba(255,255,255,.06), transparent 24%),
    radial-gradient(circle at 40% 82%, rgba(0,0,0,.12), transparent 30%),
    repeating-radial-gradient(circle at 30% 35%, rgba(255,255,255,.035) 0 1px, transparent 1px 6px),
    linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.12));
  opacity:.95;
  pointer-events:none;
  mix-blend-mode: overlay;
}
.front  { transform: translateZ(var(--half)); }
.back   { transform: rotateY(180deg) translateZ(var(--half)); }
.right  { transform: rotateY(90deg)  translateZ(var(--half)); }
.left   { transform: rotateY(-90deg) translateZ(var(--half)); }
.top    { transform: rotateX(90deg)  translateZ(var(--half)); }
.bottom { transform: rotateX(-90deg) translateZ(var(--half)); }

@keyframes cubeBounce{
  0%   { transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  32%  { transform: translateY(-44px) rotateX(18deg) rotateY(-18deg) rotateZ(6deg); }
  58%  { transform: translateY(0) rotateX(-14deg) rotateY(14deg) rotateZ(-4deg); }
  80%  { transform: translateY(-14px) rotateX(8deg) rotateY(-8deg) rotateZ(3deg); }
  100% { transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
}

@media (max-width: 640px){
  .dice-stage{ flex-direction: row; gap: 14px; perspective-origin: 50% 30%; }
  .dice-word{ flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 0; margin: 8px; }
  .dice-word.row1,.dice-word.row2{ transform:none; }
  .dice-gap{ width:0; height:0; }
  .cube{ --size: 62px; }
  .face{ font-size: 30px; }

  /* keep bottom banner from eating space */
  .app{ padding-bottom: 220px; }
}
/* =========================
   ✅ PRICING + ENCOURAGEMENT (NEW SECTION)
========================== */
.pricing-section{
  margin: 18px 0 34px;
}

.pricing-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 900px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

.pricing-card, .encourage-card{
  background: rgba(2,6,23,.72);
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  padding: 14px;
  min-width: 0;
}

.pricing-badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  border: 1px solid rgba(34,197,94,.45);
  background: rgba(34,197,94,.12);
  color: #bbf7d0;
}

.pricing-title{
  margin: 10px 0 6px;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  letter-spacing: .02em;
}

.pricing-sub{
  color: rgba(229,231,235,.86);
  font-size: .95rem;
  line-height: 1.3;
  margin-bottom: 10px;
}

.pricing-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(229,231,235,.92);
  line-height: 1.45;
}

.pricing-actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.pricing-btn{
  flex: 1 1 220px;
}

.pricing-fineprint{
  margin-top: 10px;
  font-size: .85rem;
  color: rgba(156,163,175,.92);
}

.encourage-title{
  margin: 0 0 8px;
  font-size: 1.1rem;
  letter-spacing: .02em;
}

.encourage-text{
  margin: 0 0 12px;
  color: rgba(229,231,235,.9);
  line-height: 1.45;
}

.encourage-quotes{
  display:grid;
  gap: 8px;
}

.quote{
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15,23,42,.65);
  border: 1px solid rgba(148,163,184,.25);
  color: rgba(229,231,235,.92);
  font-weight: 700;
}

.encourage-footer{
  margin-top: 12px;
  font-size: .85rem;
  color: rgba(156,163,175,.92);
}

/* small status line */
.access-status{
  margin: 8px 0 10px;
  font-size: .82rem;
  color: rgba(229,231,235,.85);
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(148,163,184,.25);
}
/* ===== Rules / Help sections (bottom of Setup + Edit) ===== */
.rulesBox{
  margin-top: 14px;
  text-align: left;
  background: #0000a6;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 14px;
  line-height: 1.35;
}

.rulesTitle{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 900;
  opacity: .98;
}

.rulesList{
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  opacity: .95;
}

.rulesList li{ margin: 6px 0; }

.rulesNote{
  margin: 10px 0 0;
  font-size: 12px;
  opacity: .85;
}
/* ✅ FIX: keep quick button text inside the pill */
.quick-btn{
  white-space: normal !important;       /* allow wrapping */
  overflow-wrap: anywhere !important;   /* break long chunks */
  word-break: break-word !important;
  line-height: 1.2 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  padding: 14px 16px !important;
  height: auto !important;
}


/* =========================
   ✅ CUSTOM NOTE SECTION (editable text + optional background)
   - To add a background image, set:
     --custom-note-bg-img: url('./images/yourImage.jpg');
   - To darken/lighten, change:
     --custom-note-overlay
========================== */
.customNoteSection{
  margin: 0 0 34px;
}

.customNoteInner{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 18px 18px;
  border: 1px solid rgba(255,255,255,.08);

  background: var(--custom-note-bg, rgba(15,23,42,.75));
  background-image: var(--custom-note-bg-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.customNoteInner::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--custom-note-overlay, rgba(2,6,23,.55));
  pointer-events:none;
}

.customNoteInner > *{
  position: relative;
  z-index: 1;
}

.customNoteTitle{
  margin: 0 0 10px;
  font-size: 1.05rem;
  letter-spacing: .02em;
}

.customNoteText{
  margin: 0 0 10px;
  color: rgba(229,231,235,.92);
  line-height: 1.45;
}

:root{
  --bg: transparent;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#22c55e;
  --accent-soft:rgba(34,197,94,.12);
  --radius:18px;

  --note-bg: rgba(251,191,36,.18);
  --note-border: rgba(251,191,36,.45);
  --note-text: #fde68a;

  --dice-purple:#5b136b;
  --dice-purple-deep:#2a0731;
  --dice-white:#f4f4f6;
  --dice-white-deep:#d9d9df;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 background: #000 url("iceCaps.jpg") center / cover no-repeat fixed;

  color:var(--text);
  overflow-x:hidden;
}

/* ✅ make space so the fixed dice banner doesn't cover your content */
.app{
  width: min(1200px, 100%);
  margin: 18px auto;
  padding: 16px;
}

/* ✅ DICE banner (now below calendar and scrolls with page) */


/* =========================
   HEADER LAYOUT (GRID)
========================== */
header{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items:start;
}
@media (min-width: 980px){
  header{
    grid-template-columns: auto 1fr;
    column-gap: 22px;
  }
}

.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px 2px 0;
  min-width: 260px;
  max-width: 100%;
}

/* =========================
   ✅ TITLE (H1) — FITS + SHADOW
========================== */
.brand .title.block3d {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin: 0;
    font-weight: 1000;
    text-transform: uppercase;
    font-size: clamp(1.15rem, 2.6vw, 2.1rem);
    letter-spacing: clamp(0.02em, .6vw, 0.09em);
    line-height: 1.08;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    color: #25b972;
    -webkit-text-stroke: 1.5px rgba(10, 10, 10, .25);
    text-shadow: 0 2px 0 rgba(255, 255, 255, .12), 0 10px 22px rgba(0, 0, 0, .55), 0 18px 84px rgb(23 22 22 / 36%);
    transform: skewX(-4deg);
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55));
}

.brand .title.block3d::before{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: rgba(0,0,0,.34);
  -webkit-text-stroke: 1.5px rgba(0,0,0,.25);
  transform: translate(10px, 10px);
  text-shadow:
    1px 1px 0 rgba(0,0,0,.18),
    2px 2px 0 rgba(0,0,0,.18),
    3px 3px 0 rgba(0,0,0,.18),
    4px 4px 0 rgba(0,0,0,.18),
    5px 5px 0 rgba(0,0,0,.16),
    6px 6px 0 rgba(0,0,0,.14),
    7px 7px 0 rgba(0,0,0,.12),
    8px 8px 0 rgba(0,0,0,.10);
}

.brand .title.block3d::after{
  content:"";
  position:absolute;
  inset:-14px -12px -16px -12px;
  z-index:-2;
  background:
    repeating-conic-gradient(
      from 200deg,
      rgba(0,0,0,.10) 0 8deg,
      rgba(0,0,0,0) 8deg 16deg
    );
  mask-image: radial-gradient(circle at 35% 45%, rgba(0,0,0,1) 0 52%, rgba(0,0,0,0) 72%);
  opacity:.28;
  pointer-events:none;
}

@media (max-width: 900px){
  .brand{ min-width: 0; }
  .brand .title.block3d{
    font-size: clamp(1.05rem, 4.2vw, 1.65rem);
    letter-spacing: clamp(.02em, .8vw, .07em);
    transform: skewX(-3deg);
  }
  .brand .title.block3d::before{ transform: translate(8px,8px); }
}

@media (max-width: 640px){
  .brand .title.block3d{
    font-size: clamp(.98rem, 5.2vw, 1.35rem);
    letter-spacing: .05em;
    transform: skewX(-2deg);
  }
  .brand .title.block3d::before{ transform: translate(7px,7px); }
}

@media (max-width: 420px){
  .brand .title.block3d{
    font-size: clamp(.92rem, 6.2vw, 1.15rem);
    letter-spacing: .04em;
    line-height: 1.12;
  }
}

/* =========================
   DASHBOARD GRID
========================== */
@media (max-width: 700px){
  .header-right{
    grid-template-columns: 1fr;
    grid-template-areas:
      "time"
      "calendar"
      "paypal"
      "actions";
  }
}

.time-wrap{ display: contents; }

@media (max-width: 1100px){
  .header-right{
    grid-template-columns: minmax(280px, 1fr) minmax(240px, 360px);
    grid-template-areas:
      "time actions"
      "paypal actions"
      "calendar calendar";
  }
}

@media (max-width: 700px){
  .header-right{
    grid-template-columns: 1fr;
    grid-template-areas:
      "time"
      "calendar"
      "paypal"
      "actions";
  }
}

/* =========================
   CARDS
========================== */
.time-panel, .mini-calendar{
  background: var(--dice-purple-deep);
  border-radius: var(--radius);
  border: 1px solid rgba(148,163,184,0.4);
  padding: 9px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  font-size: 0.78rem;
  min-width: 0;
}

.time-panel{ display:flex; flex-direction:column; gap:6px; }

.time-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}

.time-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.clock-display{ font-variant-numeric:tabular-nums; font-size:1rem; font-weight:700; }
.timer-display{ font-variant-numeric:tabular-nums; font-size:.98rem; font-weight:800; }

.btn{
  border:none;
  cursor:pointer;
  padding:8px 16px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background: radial-gradient(circle at top left, #4ade80, #22c55e);
  color:#022c22;
  transition: transform .08s ease, filter .08s ease;
  user-select:none;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn.secondary{
  background: rgba(15,23,42,0.9);
  color: var(--muted);
  border: 1px solid rgba(148,163,184,0.5);
}
.btn.secondary:hover{ color: var(--text); border-color: var(--accent); }
.small-btn{ padding:6px 12px; font-size:.78rem; }

.timer-mode-row{ display:flex; gap:6px; margin-top:4px; }
.timer-mode-toggle{ flex:1; justify-content:center; }
.timer-mode-toggle.timer-mode-active{
  border-color: var(--accent);
  color:#bbf7d0;
}

.countdown-inputs{ display:flex; gap:6px; margin-top:4px; }
.countdown-inputs input[type="number"]{
  width:100%;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.6);
  background: rgba(15,23,42,0.85);
  color: var(--text);
  font-size: .75rem;
  outline:none;
  min-width: 0;
}
.countdown-inputs input[type="number"]:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.4);
}

.timer-buttons{
  display:flex;
  gap:6px;
  margin-top:4px;
  justify-content:space-between;
}

/* =========================
   QUICK ACTIONS
========================== */
.quick-actions-out{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-self:start;
  min-width: 0;
}
.quick-btn{
  border:1px solid rgba(148,163,184,0.45);
  background: rgba(15,23,42,0.82);
  color: rgba(229,231,235,.88);
  border-radius: 999px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:10px 14px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  line-height:1;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  transition: transform .08s ease, filter .08s ease, border-color .08s ease;
}
.quick-btn:hover{
  border-color: rgba(34,197,94,.65);
  color: #e5e7eb;
  transform: translateY(-1px);
}

@media (max-width: 700px){
  .quick-actions-out{
    flex-direction: row;
    flex-wrap: wrap;
  }
  .quick-btn{
    flex: 1 1 220px;
    text-align:center;
  }
}

/* =========================
   PAYPAL CARD
========================== */
.paypal-inline{
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(2,6,23,.55);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  min-width: 0;
  overflow: visible !important;
}
.paypal-inline .pp-title{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.10em;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 900;
}
#paypalButtonsInline, #paypalButtonsModal{
  width:100%;
  min-width: 0;
  overflow: visible !important;
}
#paypalButtonsInline iframe, #paypalButtonsModal iframe{
  max-width:100% !important;
}

.paywall-note{
  margin-top: 10px;
  font-size: .78rem;
  color: rgba(156,163,175,.9);
}

/* =========================
   MINI CALENDAR + NOTES (your original)
========================== */
.mini-calendar{ position:relative; }

.mini-calendar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-bottom:4px;
}
.mini-cal-title{
  font-size:.78rem;
  font-weight:700;
  text-align:center;
  flex:1;
}
.mini-cal-nav{
  border:1px solid rgba(148,163,184,0.6);
  background: rgba(15,23,42,0.9);
  color: var(--muted);
  border-radius:999px;
  width:22px;
  height:22px;
  font-size:.8rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  user-select:none;
}
.mini-cal-nav:hover{ border-color: var(--accent); color: var(--text); }

.mini-calendar-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:2px;
  font-size:.7rem;
  margin-bottom:4px;
}
.mini-cal-day-name{
  text-align:center;
  color: var(--muted);
  padding:2px 0;
  user-select:none;
}

.mini-cal-day{
  text-align:center;
  padding:3px 0;
  border-radius:6px;
  cursor:pointer;
  border:1px solid transparent;
  font-variant-numeric: tabular-nums;
  background: transparent;
  color: inherit;
  user-select:none;
  position: relative;
  overflow:hidden;
}

.mini-cal-day .day-num{
  position:relative;
  z-index:2;
  display:inline-block;
  line-height:1;
  padding:0 2px;
}

.mini-cal-day.empty{ cursor:default; opacity:.35; }
.mini-cal-day.today{ border-color: rgba(59,130,246,0.9); }
.mini-cal-day.selected{
  background: var(--accent-soft);
  border-color: var(--accent);
  color: #bbf7d0;
}

.mini-cal-day.has-notes::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(251,191,36,.16);
  z-index:0;
}
.mini-cal-day.has-notes::after{
  content:"";
  position:absolute;
  right:-10px;
  top:-10px;
  width:26px;
  height:26px;
  background: rgba(251,191,36,.28);
  border:1px solid rgba(251,191,36,.35);
  transform: rotate(15deg);
  border-radius:8px;
  z-index:1;
}

.mini-calendar-selected{
  font-size:.7rem;
  color: var(--muted);
}

/* Sticky Notes POPOVER */
.notes-popover{
  position:absolute;
  left:12px;
  right:12px;
  top: calc(100% + 10px);
  background: rgba(2,6,23,.96);
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.7);
  padding: 12px;
  display:none;
  z-index:50;
}
.notes-popover.open{ display:block; }

/* PAYWALL (Modal) */
.paywall{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.72);
  z-index: 9999;
  padding: 18px;
}
.paywall.open{ display: grid; }

/* =========================
   ✅ FLOATING DICE BANNER (BACK + BOTTOM)
========================== */
.dice-banner {
    margin: 7px 0 14px;
    padding: 16px -6px 22px;
    border-radius: 24px;
    background: black;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 22px 80px rgba(0, 0, 0, .35);
    overflow: hidden;
}
.dice-stage {
    perspective: 2600px;
    perspective-origin: 50% 35%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: url("iceCaps.jpg") center / cover no-repeat;
}
.dice-word{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 18px;
  align-items:flex-end;
  transform-style: preserve-3d;
  padding: 4px 0;
  user-select:none;
  pointer-events:none;
  margin: 10px;
}
.dice-word.row1{ transform: rotateX(16deg) rotateY(-1deg) translateZ(-200px); }
.dice-word.row2{ transform: rotateX(18deg) rotateY(18deg) translateZ(-123px); }
.dice-gap{ width: 28px; height: 96px; }
.cube-wrap{
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--rx) * 1deg))
    rotateY(calc(var(--ry) * 1deg))
    rotateZ(calc(var(--rz) * 1deg));
}
.cube{
  --size: 96px;
  --half: calc(var(--size) / 2);
  width: var(--size);
  height: var(--size);
  position: relative;
  transform-style: preserve-3d;
  animation: cubeBounce 1180ms cubic-bezier(.2,.95,.24,1) infinite;
  animation-delay: calc(var(--i) * 85ms);
  filter:
    drop-shadow(0 34px 24px rgba(0,0,0,.72))
    drop-shadow(0 12px 10px rgba(0,0,0,.42));
}
.cube::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: -26px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(0,0,0,.58), transparent 72%);
  transform: translateZ(-1px);
  filter: blur(1.2px);
  opacity: .9;
  pointer-events:none;
}
.face{
  position:absolute;
  inset:0;
  border-radius: 10px;
  display:grid;
  place-items:center;
  font-weight: 950;
  font-size: 44px;
  letter-spacing: .02em;
  backface-visibility: hidden;
  border: 1px solid rgba(255,255,255,.16);
  text-shadow:
    0 2px 0 rgba(0,0,0,.45),
    0 10px 24px rgba(0,0,0,.25);
  user-select:none;
  overflow:hidden;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 14px 14px 22px rgba(255,255,255,.07),
    inset -16px -18px 26px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,0,0,.18);
}
.cube.purple .face{
  color: #f5f6f8;
  background:
    radial-gradient(circle at 25% 22%, rgba(255,255,255,.26), transparent 40%),
    radial-gradient(circle at 70% 85%, rgba(0,0,0,.38), transparent 58%),
    linear-gradient(145deg, var(--dice-purple), #1a0220);
  border-color: rgba(255,255,255,.12);
}
.cube.white .face{
  color: var(--dice-purple);
  background:
    radial-gradient(circle at 25% 22%, rgba(255,255,255,.98), transparent 45%),
    radial-gradient(circle at 70% 85%, rgba(0,0,0,.16), transparent 58%),
    linear-gradient(145deg, var(--dice-white), var(--dice-white-deep));
  border-color: rgba(0,0,0,.12);
  text-shadow:
    0 1px 0 rgba(255,255,255,.55),
    0 10px 24px rgba(0,0,0,.18);
}
.face::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 22%),
    radial-gradient(circle at 55% 55%, rgba(255,255,255,.06), transparent 24%),
    radial-gradient(circle at 40% 82%, rgba(0,0,0,.12), transparent 30%),
    repeating-radial-gradient(circle at 30% 35%, rgba(255,255,255,.035) 0 1px, transparent 1px 6px),
    linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.12));
  opacity:.95;
  pointer-events:none;
  mix-blend-mode: overlay;
}
.front  { transform: translateZ(var(--half)); }
.back   { transform: rotateY(180deg) translateZ(var(--half)); }
.right  { transform: rotateY(90deg)  translateZ(var(--half)); }
.left   { transform: rotateY(-90deg) translateZ(var(--half)); }
.top    { transform: rotateX(90deg)  translateZ(var(--half)); }
.bottom { transform: rotateX(-90deg) translateZ(var(--half)); }

@keyframes cubeBounce{
  0%   { transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  32%  { transform: translateY(-44px) rotateX(18deg) rotateY(-18deg) rotateZ(6deg); }
  58%  { transform: translateY(0) rotateX(-14deg) rotateY(14deg) rotateZ(-4deg); }
  80%  { transform: translateY(-14px) rotateX(8deg) rotateY(-8deg) rotateZ(3deg); }
  100% { transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
}

@media (max-width: 640px){
  .dice-stage{ flex-direction: row; gap: 14px; perspective-origin: 50% 30%; }
  .dice-word{ flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 0; margin: 8px; }
  .dice-word.row1,.dice-word.row2{ transform:none; }
  .dice-gap{ width:0; height:0; }
  .cube{ --size: 62px; }
  .face{ font-size: 30px; }

  /* keep bottom banner from eating space */
  .app{ padding-bottom: 220px; }
}
/* =========================
   ✅ PRICING + ENCOURAGEMENT (NEW SECTION)
========================== */
.pricing-section{
  margin: 18px 0 34px;
}

.pricing-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 900px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

.pricing-card, .encourage-card{
  background: rgba(2,6,23,.72);
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  padding: 14px;
  min-width: 0;
}

.pricing-badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  border: 1px solid rgba(34,197,94,.45);
  background: rgba(34,197,94,.12);
  color: #bbf7d0;
}

.pricing-title{
  margin: 10px 0 6px;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  letter-spacing: .02em;
}

.pricing-sub{
  color: rgba(229,231,235,.86);
  font-size: .95rem;
  line-height: 1.3;
  margin-bottom: 10px;
}

.pricing-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(229,231,235,.92);
  line-height: 1.45;
}

.pricing-actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.pricing-btn{
  flex: 1 1 220px;
}

.pricing-fineprint{
  margin-top: 10px;
  font-size: .85rem;
  color: rgba(156,163,175,.92);
}

.encourage-title{
  margin: 0 0 8px;
  font-size: 1.1rem;
  letter-spacing: .02em;
}

.encourage-text{
  margin: 0 0 12px;
  color: rgba(229,231,235,.9);
  line-height: 1.45;
}

.encourage-quotes{
  display:grid;
  gap: 8px;
}

.quote{
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15,23,42,.65);
  border: 1px solid rgba(148,163,184,.25);
  color: rgba(229,231,235,.92);
  font-weight: 700;
}

.encourage-footer{
  margin-top: 12px;
  font-size: .85rem;
  color: rgba(156,163,175,.92);
}

/* small status line */
.access-status{
  margin: 8px 0 10px;
  font-size: .82rem;
  color: rgba(229,231,235,.85);
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(148,163,184,.25);
}
/* ===== Rules / Help sections (bottom of Setup + Edit) ===== */
.rulesBox{
  margin-top: 14px;
  text-align: left;
  background: #0000a6;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 14px;
  line-height: 1.35;
}

.rulesTitle{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 900;
  opacity: .98;
}

.rulesList{
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  opacity: .95;
}

.rulesList li{ margin: 6px 0; }

.rulesNote{
  margin: 10px 0 0;
  font-size: 12px;
  opacity: .85;
}
/* ✅ FIX: keep quick button text inside the pill */
.quick-btn{
  white-space: normal !important;       /* allow wrapping */
  overflow-wrap: anywhere !important;   /* break long chunks */
  word-break: break-word !important;
  line-height: 1.2 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  padding: 14px 16px !important;
  height: auto !important;
}


/* =========================
   ✅ SITE FOOTER (GLASS)
   Edit links/text in HTML
========================== */
.siteFooter{
  position: relative;
  margin-top: 18px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(1200px 220px at 18% 0%, rgba(34,197,94,.16), transparent 60%),
    radial-gradient(900px 260px at 95% 20%, rgba(91,19,107,.22), transparent 60%),
    rgba(2,6,23,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 26px 90px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

.footerGlow{
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(34,197,94,.0),
      rgba(34,197,94,.35),
      rgba(168,85,247,.25),
      rgba(34,197,94,.0)
    );
  filter: blur(18px);
  opacity:.55;
  mix-blend-mode: screen;
}

.footerInner{
  position: relative;
  z-index: 1;
  padding: 18px 18px 10px;
  display: grid;
  grid-template-columns: 1.1fr 1.9fr;
  gap: 16px;
}

.footerBrand{ min-width: 0; }

.footerLogo{
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 1.05rem;
  color: #e5e7eb;
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.footerTag{
  margin: 10px 0 0;
  color: rgba(229,231,235,.86);
  line-height: 1.35;
  font-size: .95rem;
}

.footerCols{
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 14px;
}

.footerCol h4{
  margin: 0 0 8px;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(229,231,235,.88);
}

.footerCol ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.footerCol a{
  color: rgba(187,247,208,.95);
  text-decoration: none;
  font-weight: 800;
}
.footerCol a:hover{ text-decoration: underline; }

.footerMuted{ color: rgba(156,163,175,.92); }
.footerStrong{ font-weight: 950; }

.footerBottom{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-size: .85rem;
  color: rgba(229,231,235,.86);
}

.footerMini{ display:flex; align-items:center; gap: 8px; }
.footerDot{ opacity:.55; }

@media (max-width: 900px){
  .footerInner{ grid-template-columns: 1fr; }
  .footerCols{ grid-template-columns: 1fr; }
  .footerBottom{ flex-direction: column; align-items:flex-start; }
}



/* =========================
   ✅ AUTO CURRICULUM MODAL
========================== */
.curriculum-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.68);
  z-index: 9999;
}
.curriculum-modal.open{ display:flex; }

.curriculum-card{
  width: min(780px, 96vw);
  max-height: 86vh;
  overflow: auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,16);
  background: rgba(2,6,23,0.92);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  padding: 16px;
}

.curriculum-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.curriculum-title{
  font-weight: 1000;
  letter-spacing: .02em;
}
.curriculum-x{
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  background: rgba(255,255,255,0.10);
  color: rgba(229,231,235,0.95);
}
.curriculum-text{
  font-size: .92rem;
  color: rgba(229,231,235,0.88);
  line-height: 1.35;
  margin-bottom: 12px;
}
.curriculum-form{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 10px;
}
.curriculum-form input{
  flex: 1 1 auto;
  min-width: 180px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.30);
  background: rgba(15,23,42,0.65);
  color: rgba(229,231,235,0.95);
  outline: none;
}
.curriculum-actions{
  display:flex;
  gap: 10px;
  margin: 10px 0 12px;
  flex-wrap: wrap;
}
.curriculum-actions .btn{
  flex: 1 1 220px;
}
.curriculum-output{
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.24);
  background: rgba(15,23,42,0.45);
  padding: 12px 12px;
  min-height: 140px;
}
.curriculum-hint{
  opacity:.8;
  color: rgba(156,163,175,0.95);
  font-size: .85rem;
}
.curriculum-output h4{
  margin: 10px 0 6px;
  font-size: .95rem;
}
.curriculum-output ul{
  margin: 6px 0 10px;
  padding-left: 18px;
}
.curriculum-output li{
  margin: 6px 0;
}
.curriculum-note{
  margin-top: 12px;
  font-size: .82rem;
  color: rgba(156,163,175,0.95);
}

.pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(34,197,94,0.10);
  font-size: .82rem;
  color: rgba(229,231,235,0.92);
}