:root{
    --bg1:#A2543F; --bg2:#8E4430; --bg3:#964635;
    --card:#FCF5EE; --card-line:#EBD9CF;
    --salmon:#E6A996; --salmon-deep:#C9806F; --coral:#E6A996;
    --rose:#C08070; --plum:#8A95AB; --dusk:#5A3A44;
    --ink:#3B2E2E; --ink-soft:#9A8478; --gold:#E0B06A;
    --menstrual:#C9806F; --follicular:#9DAE8C; --ovulation:#E0B06A; --luteal:#B08CA0;
    --sage:#9DAE8C; --sage-deep:#6E8063; --sage-leaf:#B8C7A4;
    --shadow:0 10px 30px rgba(90,58,68,.12);
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:"Work Sans","Segoe UI",system-ui,sans-serif;
    color:#FBF1EA;
  }
  h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; letter-spacing:.3px}

  /* ── APP SHELL ── */
  .app-shell{
    position:fixed; inset:0;
    display:flex; flex-direction:column;
    background:
      radial-gradient(115% 70% at 18% 8%, #BB7257 0%, rgba(187,114,87,0) 55%),
      radial-gradient(95% 80% at 88% 22%, #88402A 0%, rgba(136,64,42,0) 50%),
      radial-gradient(130% 95% at 50% 104%, #AC624C 0%, rgba(172,98,76,0) 60%),
      #A2543F;
  }
  .tab-content{ flex:1; overflow:hidden; position:relative; }
  .tab-pane{
    position:absolute; inset:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:22px 16px 32px;
    display:none;
  }
  .tab-pane.active{ display:block; }
  .pane-inner{ max-width:600px; margin:0 auto; }

  /* ── BOTTOM NAV ── */
  .bottom-nav{
    flex-shrink:0;
    background:var(--card);
    border-top:1px solid var(--card-line);
    display:grid; grid-template-columns:repeat(5,1fr);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .nav-btn{
    background:none; border:none;
    padding:9px 4px 10px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    font:inherit; transition:opacity .12s;
  }
  .nav-btn .nicon{ line-height:1; color:var(--ink-soft); display:flex; }
  .nav-btn .nicon svg{ width:22px; height:22px; display:block; }
  .nav-btn .nlabel{
    font-size:10px; font-weight:700; letter-spacing:.5px;
    text-transform:uppercase; color:var(--ink-soft);
  }
  .nav-btn.active .nicon{ color:var(--salmon-deep); }
  .nav-btn.active .nlabel{ color:var(--salmon-deep); }

  /* ── SHARED CARD ── */
  .card{
    background:var(--card); border:1px solid var(--card-line);
    border-radius:22px; padding:22px; box-shadow:var(--shadow);
    color:var(--ink);
  }
  .card h2{margin:0 0 14px; font-size:20px; color:var(--salmon-deep)}
  .muted{color:var(--ink-soft); font-size:13.5px}
  .pane-inner > .muted{ color:#E8CFC4 }

  /* ── TODAY HEADER ── */
  header.top{ text-align:center; margin-bottom:20px }
  header.top h1{ font-size:28px; margin:0 0 4px; color:#FBF1EA }
  .week-subtitle{ font-size:13px; color:#E7C3B5; font-family:"Work Sans",sans-serif; margin:0 0 4px; min-height:1em; }
  header.top .who{ font-size:15px; color:#EBD4CA }
  header.top .who input{
    border:none; background:transparent; font:inherit; color:var(--rose);
    border-bottom:1px dashed var(--card-line); text-align:center; width:160px; padding:2px 4px;
  }
  header.top .who input:focus{ outline:none; border-bottom-color:var(--salmon) }

  /* ── HERO (phase section) ── */
  .hero{ text-align:center; margin-bottom:18px }
  .hero-row{ display:inline-flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center }
  .dayblob{
    width:104px; height:104px; border-radius:50%; flex:0 0 auto;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#fff; box-shadow:inset 0 -10px 22px rgba(0,0,0,.12), var(--shadow);
    background:linear-gradient(135deg,var(--salmon),var(--salmon-deep));
  }
  .dayblob .n{ font-size:38px; font-weight:700; line-height:1 }
  .dayblob .l{ font-size:11px; text-transform:uppercase; letter-spacing:1.5px; opacity:.9 }
  .phasechip{
    display:inline-block; padding:4px 12px; border-radius:30px; color:var(--ink);
    font-size:12.5px; font-weight:600; letter-spacing:.3px;
  }
  .moonline{ font-size:14px; color:var(--dusk); margin-top:4px }
  .moonhero{ display:flex; align-items:center; gap:16px; padding:6px 2px 2px }
  .moonhero > div{ text-align:left; flex:1; order:-1; }
  .moonhero .phase-flower{ order:1; }
  #weekHero .moonhero{ align-items:flex-end; gap:10px; }
  .moondisk{ width:106px; height:106px; flex:0 0 auto; filter:drop-shadow(0 6px 16px rgba(90,58,68,.16)) }
  .moonhero-phase{ font-family:"Cormorant Garamond",Georgia,serif; font-size:25px; font-weight:600; color:#FBF1EA; line-height:1.05; margin-bottom:5px }
  .moonhero-day{ font-family:"Cormorant Garamond",Georgia,serif; font-size:24px; font-weight:600; color:#FBF1EA; display:block; line-height:1.2; }
  .moonhero-day .num{ font-size:34px; font-weight:700; color:#FBF1EA; }
  .moonhero-dayof{ display:flex; align-items:baseline; gap:5px; margin-bottom:4px; }
  .dayof-row{ display:flex; align-items:center; gap:0; margin-bottom:4px; }
  .dayof-stat{ display:flex; flex-direction:column; gap:1px; }
  .dayof-top{ display:flex; align-items:baseline; gap:4px; }
  .dayof-label{ font-size:11px; color:#EAD0C5; font-family:"Work Sans",sans-serif; letter-spacing:.07em; text-transform:uppercase; }
  .dayof-num{ font-family:"Cormorant Garamond",Georgia,serif; font-size:38px; font-weight:600; color:#FBF1EA; line-height:1; }
  .dayof-of{ font-size:13px; color:#C9A898; font-family:"Work Sans",sans-serif; }
  .dayof-caption{ font-size:10.5px; color:#C9A898; font-family:"Work Sans",sans-serif; letter-spacing:.04em; margin-top:1px; }
  .dayof-divider{ width:1px; height:36px; background:rgba(251,241,234,.2); margin:0 14px; }
  .dayof-left{ font-size:11.5px; color:#C9A898; font-family:"Work Sans",sans-serif; margin-bottom:5px; }
  /* Phase flower vessel */
  .phase-flower{ width:80px; height:80px; object-fit:contain; flex:0 0 auto; }
  .phase-micro{ font-size:13px; font-style:italic; color:rgba(244,225,215,.72); margin-top:4px; line-height:1.35; }
  /* Cycle progress strip */
  .cycle-strip-wrap{ margin-top:14px; }
  .strip-track-wrap{ position:relative; padding:4px 0; }
  .strip-track{ display:flex; height:7px; border-radius:4px; overflow:hidden; width:100%; }
  .strip-seg{ height:100%; }
  .seg-menstrual{ background:#C25B56; opacity:.85; }
  .seg-follicular{ background:#7DAB7C; opacity:.85; }
  .seg-ovulation{ background:#E8A87C; opacity:.9; }
  .seg-luteal{ background:#7B5EA7; opacity:.85; }
  .strip-dot{ width:14px; height:14px; background:#FBF1EA; border-radius:50%; border:2px solid rgba(162,84,63,.7); position:absolute; top:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 3px rgba(251,241,234,.2); }
  .strip-labels{ display:flex; justify-content:space-between; margin-top:5px; font-size:9px; color:rgba(244,225,215,.5); letter-spacing:.03em; font-family:"Work Sans",sans-serif; position:relative; }
  #stripOvLabel{ position:absolute; }
  /* Pills in one horizontal row beside the flower */
  .phase-pills{ display:flex; flex-direction:row; gap:6px; flex:1; }
  .ppill{ flex:1; background:rgba(251,241,234,.13); border-radius:10px; padding:8px 5px; text-align:center; }
  .ppill-val{ line-height:1; margin-top:6px; display:flex; align-items:baseline; justify-content:center; gap:3px; }
  .ppill-big{ font-family:"Cormorant Garamond",Georgia,serif; font-size:26px; font-weight:600; color:#FBF1EA; line-height:1; }
  .ppill-unit{ font-size:10px; font-family:"Work Sans",sans-serif; color:#F4E1D7; letter-spacing:.06em; text-transform:uppercase; }
  .ppill-cap{ font-size:10px; font-family:"Work Sans",sans-serif; color:#F4E1D7; letter-spacing:.06em; text-transform:uppercase; }
  .today-im{ padding:4px 4px 8px; margin-bottom:18px }
  .moonhero-sub{ font-size:12.5px; color:#E8CFC4; margin-top:8px; line-height:1.5 }
  .seg{ display:flex; gap:6px; border:1px solid rgba(251,241,234,.42); border-radius:14px; padding:4px; margin:16px 0 14px }
  .seg button{ flex:1; font:inherit; font-size:14px; font-weight:500; border:none; border-radius:11px; padding:9px 0; cursor:pointer; background:transparent; color:#F0D9CE; transition:all .15s }
  .seg button.on{ background:#FBF1EA; color:#A2543F }
  #facetSeg button[data-f="eat"].on{ background:rgba(185,215,155,.6); color:#3A5A2A }
  #facetSeg button[data-f="move"].on{ background:rgba(240,208,138,.6); color:#7B4F08 }
  #facetSeg button[data-f="sleep"].on{ background:rgba(165,200,230,.6); color:#2C4A68 }
  .facet-kick{ font-family:"Work Sans",sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#E7C3B5; margin-bottom:5px }
  .facet-lead{ font-family:"Cormorant Garamond",Georgia,serif; font-size:21px; font-weight:600; color:#FBF1EA; margin-bottom:9px }
  .facet-items{ margin:0; padding:0; list-style:none }
  .facet-items li{ position:relative; padding:0 0 7px 17px; font-size:14px; line-height:1.45; color:#F4E4DB }
  .facet-items li:before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:#F0C4B4 }
  .facet-fast{ font-size:13px; line-height:1.45; color:#FBF1EA; margin:0 0 12px; padding:9px 13px; border:1px solid rgba(251,241,234,.28); border-radius:12px }
  .facet-fast:empty{ display:none }
  .pmoon svg{ vertical-align:-3px }
  .dailyline{ font-size:15.5px; line-height:1.5; color:#FBF1EA; margin:15px 0 2px; }
  .dailyline.hidden{ display:none }
  .facet-fast b{ font-family:"Work Sans",sans-serif; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#F0C4B4; font-weight:600; display:block; margin-bottom:3px }
  .facet-items li.evo-kicker{ padding-left:17px; color:#F4E4DB; font-style:normal; margin-top:7px; line-height:1.45 }
  .facet-items li.evo-kicker:before{ display:block; background:#8BA86A; border:none; top:7px }
  .facet-stack{ display:grid }
  .facet-stack > .facet-pane{ grid-area:1 / 1 / 2 / 2; visibility:hidden }
  .facet-stack > .facet-pane.on{ visibility:visible }
  /* ── WHY THIS WEEK tidbit ── */
  .why-slot{ margin:12px 0 0; padding:10px 14px 10px 16px; border-left:2px solid rgba(251,241,234,.22); cursor:pointer; border-radius:0 8px 8px 0; transition:background .15s }
  .why-slot:hover{ background:rgba(251,241,234,.07) }
  .why-kick{ font-family:"Work Sans",sans-serif; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#E7C3B5; margin-bottom:4px }
  .why-text{ font-size:13.5px; line-height:1.5; color:#F4E4DB }
  .why-cta{ font-size:11px; opacity:.55; margin-left:4px }
  /* ── Learn evolutionary paragraph ── */
  .pgevo{ font-size:13.5px; line-height:1.65; color:var(--ink-soft); border-left:3px solid var(--card-line); padding:8px 0 8px 12px; margin:0 0 14px; font-style:normal }
  /* segmented switcher inside a card */
  .seg-card{ display:flex; gap:6px; border:1px solid var(--card-line); border-radius:14px; padding:4px; margin:0 0 14px }
  .seg-card button{ flex:1; font:inherit; font-size:13.5px; font-weight:500; border:none; border-radius:11px; padding:8px 0; cursor:pointer; background:transparent; color:var(--ink-soft); transition:all .15s }
  .seg-card button.on{ background:var(--sage-deep); color:#fff }
  .log-im{ display:block; width:100%; padding:14px; border-radius:26px; font:inherit; font-size:16px; font-weight:600; color:#A2543F; background:#FBF1EA; border:none; cursor:pointer; margin:18px 0 0; letter-spacing:.2px }
  .log-im:active{ transform:translateY(1px) }
  .prednote-im{ font-size:11.5px; color:#E8CFC4; line-height:1.5; text-align:center; margin:13px 4px 0 }

  /* ── LOG TODAY BUTTON ── */
  .log-today{
    display:block; width:100%; padding:15px;
    border-radius:30px; font:inherit; font-size:16px; font-weight:700;
    color:#fff; background:linear-gradient(135deg,var(--salmon),var(--salmon-deep));
    border:none; cursor:pointer; box-shadow:var(--shadow);
    margin:18px 0 0; letter-spacing:.3px;
  }
  .log-today:active{ transform:translateY(1px) }

  /* ── COUNTDOWN PILLS ── */
  .countdown{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap }
  .countdown .pill{
    flex:1; min-width:110px; background:#fff; border:1px solid var(--card-line);
    border-radius:14px; padding:12px 10px; text-align:center;
  }
  .countdown .pill .big{ font-size:20px; font-weight:700; color:var(--rose) }
  .countdown .pill .cap{ font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.8px }
  .countdown .pill .sub{ font-size:11.5px; color:var(--ink-soft); margin-top:2px }

  /* ── FASTING ACCORDION ── */
  .fasting-acc-head{
    display:flex; justify-content:space-between; align-items:center;
    cursor:pointer;
  }
  .fasting-acc-head .tag{
    font-size:11px; text-transform:uppercase; letter-spacing:1.5px;
    color:var(--salmon-deep); font-weight:700;
  }
  .fasting-acc-body{
    padding-top:12px; margin-top:12px;
    border-top:1px solid var(--card-line);
  }
  .fasting-acc-body p{ margin:0 0 8px; font-size:14px; line-height:1.5 }
  .fasting-acc-body p:last-child{ margin-bottom:0 }

  /* ── WHEEL ── */
  .wheelwrap{ display:flex; justify-content:center }
  .legend{ display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center; margin-top:10px }
  .legend span{ font-size:12.5px; color:var(--ink); display:flex; align-items:center; gap:6px; cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; user-select:none; -webkit-user-select:none }
  .legend i{ width:11px; height:11px; border-radius:50%; display:inline-block }

  /* ── CALENDAR ── */
  .calhead{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
  .calhead h2{ font-size:20px; color:#FBF1EA; margin:0 }
  .navbtn{
    border:1px solid var(--card-line); background:#fff; color:var(--salmon-deep);
    width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:13px;
    display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
  }
  .navbtn:hover{ background:var(--bg1) }
  .cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px }
  .cal .dow{
    font-size:11px; color:#FBF1EA; font-weight:700;
    text-align:center; text-transform:uppercase; letter-spacing:.6px; padding-bottom:4px;
  }
  .cal .cell{
    aspect-ratio:1/1; border-radius:12px; border:1px solid var(--card-line);
    background:#fff; position:relative; padding:5px 6px; overflow:hidden;
  }
  .cal .cell .dt{ position:absolute; top:5px; left:7px; font-size:16px; font-weight:700; line-height:1; color:var(--ink) }
  .cal .cell .mo{ position:absolute; top:5px; right:6px; font-size:14px; line-height:1 }
  .cal .cell.weekend .dt{ color:var(--rose) }
  .cal .cell.today{ box-shadow:0 0 0 2.5px var(--salmon); border-color:transparent }
  .cal .cell .phasebar{ position:absolute; left:0; right:0; bottom:0; height:7px }
  .cal .cell.fullmoon{ box-shadow:inset 0 0 0 2px var(--gold), 0 0 16px rgba(232,184,109,.55); background:linear-gradient(180deg,#fffaf0,#fff) }
  .cal .cell.newmoon{ box-shadow:inset 0 0 0 2px var(--plum); background:linear-gradient(180deg,#f6f1f8,#fff) }
  .cal .cell .moontag{ position:absolute; top:23px; right:5px; font-size:8px; font-weight:800; letter-spacing:.3px; text-transform:uppercase }
  .cal .cell .moontag.full{ color:#c2922b }
  .cal .cell .moontag.new{ color:var(--plum) }
  .cal .cell.empty{ border:none; background:transparent }
  .cal .cell.has{ cursor:pointer; transition:transform .08s }
  .cal .cell.has:hover{ transform:scale(1.04); z-index:2 }
  .cal .cell.past{ opacity:.62 }
  .flowmark{ position:absolute; left:7px; bottom:11px; display:flex; gap:2px }
  .cal .cell .noteflag{ position:absolute; bottom:11px; right:6px; width:6px; height:6px; border-radius:50%; background:var(--plum) }
  @media(max-width:560px){
    .cal{ gap:3px }
    .cal .cell{ padding:3px }
    .cal .cell .dt{ font-size:13px; top:3px; left:4px }
    .cal .cell .mo{ font-size:11px; top:3px; right:4px }
  }
  .flowlegend{ display:flex; flex-wrap:wrap; gap:10px 14px; justify-content:center; margin-top:14px; font-size:12.5px; color:#E8CFC4 }
  .flowlegend span{ display:flex; align-items:center; gap:5px }

  /* ghost drops */
  .flowghost{ position:absolute; left:7px; bottom:11px; display:flex; gap:3px; pointer-events:none; align-items:flex-end }
  /* predicted ovulation */
  .cal .cell.pred-ov{ box-shadow:inset 0 0 0 2px var(--gold); background:linear-gradient(180deg,#fffbf0,#fff) }
  .predov{ position:absolute; top:23px; left:6px; font-size:8px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:#c2922b; line-height:1 }

  /* ── LEARN — PHASE ACCORDIONS ── */
  .phase-acc{
    background:var(--card); border:1px solid var(--card-line);
    border-radius:18px; overflow:hidden; margin-bottom:12px; box-shadow:var(--shadow);
  }
  .phase-acc-head{
    padding:14px 16px; display:flex; align-items:center; gap:12px; cursor:pointer;
  }
  .phase-acc-head:hover{ background:#F3E7DF }
  .phase-acc-head b{ font-size:15px; color:var(--salmon-deep) }
  .phase-arr{ font-size:14px; color:var(--salmon); flex-shrink:0 }
  .pgdot{ width:14px; height:14px; border-radius:50%; flex-shrink:0; display:inline-block }
  .phase-acc-body{
    padding:12px 16px 16px; border-top:1px solid var(--card-line);
  }
  .phase-acc-body p{ margin:0 0 10px; font-size:13.5px; line-height:1.6; color:var(--ink) }
  .phase-acc-body p:last-child{ margin-bottom:0 }
  .pgfood{ font-size:13px; color:var(--dusk) }

  /* ── THE CYCLE · one continuous article ── */
  .cyc-open{ font-size:15px; line-height:1.75; color:var(--ink); margin:0 0 16px }
  .cyc-def{ font-size:12.5px; line-height:1.5; color:var(--ink-soft); margin:0 0 24px; padding-left:12px; border-left:3px solid var(--card-line) }
  .cyc-phase{ margin:0 0 24px }
  .cyc-phase-head{ display:flex; align-items:baseline; gap:9px; margin:0 0 9px; flex-wrap:wrap }
  .cyc-phase-head .pgdot{ width:11px; height:11px; align-self:center }
  .cyc-phase-name{ font-family:"Cormorant Garamond",Georgia,serif; font-size:21px; font-weight:600; color:var(--salmon-deep); line-height:1 }
  .cyc-phase-days{ font-size:12px; color:var(--ink-soft); letter-spacing:.02em }
  .cyc-phase > p{ font-size:14px; line-height:1.7; color:var(--ink); margin:0 0 10px }
  .cyc-phase > p:last-child{ margin-bottom:0 }
  .cyc-sub{ margin:12px 0 0; padding-left:14px; border-left:2px solid var(--card-line) }
  .cyc-sub-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--luteal); margin:0 0 4px; line-height:1.2 }
  .cyc-sub > p:not(.cyc-sub-label){ font-size:14px; line-height:1.7; color:var(--ink); margin:0 }
  .cyc-close{ font-size:14px; line-height:1.7; color:var(--ink); margin:24px 0 0 }

  /* ── BODY BIOLOGY TOGGLE ── */
  .biotoggle{
    width:100%; background:none; border:none; padding:0; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    font:inherit; font-size:17px; font-weight:700; color:var(--salmon-deep);
    font-family:"Cormorant Garamond",Georgia,serif; letter-spacing:.2px;
  }
  .biotoggle:hover{ opacity:.78 }
  .biotoggle .bioarrow{ font-size:15px; transition:transform .22s ease; color:var(--salmon) }
  .biogrid{ display:grid; gap:14px; margin-top:18px }
  @media(min-width:540px){ .biogrid{ grid-template-columns:1fr 1fr } }
  .biocard{ border-radius:18px; overflow:hidden; border:1px solid var(--card-line); box-shadow:0 4px 14px rgba(180,90,70,.07) }
  .biocard-top{ padding:13px 16px 12px; color:#fff }
  .biocard-name{ font-size:17px; font-weight:700; font-family:"Cormorant Garamond",Georgia,serif; margin-bottom:6px }
  .bioetym{ font-size:12px; opacity:.92; line-height:1.55 }
  .bioetym b{ font-style:italic; font-weight:600 }
  .biocard-body{ padding:13px 15px; background:#fff }
  .biocard-body p{ margin:0 0 10px; font-size:13.5px; line-height:1.65; color:var(--ink) }
  .biomiracle{
    font-size:13px; line-height:1.58; color:var(--dusk);
    background:linear-gradient(135deg,#faf4fb,#fff6f2);
    border-left:3px solid var(--salmon); padding:10px 12px;
    border-radius:0 10px 10px 0; font-style:italic; margin-top:4px
  }
  .biocard-body em{ font-style:italic; color:var(--rose) }

  /* ── QUARRY ARTICLES ── */
  .art-body{ margin-top:16px }
  .art-body p{ font-size:14.5px; line-height:1.78; color:var(--ink); margin:0 0 13px }
  .art-body p:last-child{ margin-bottom:0 }
  .art-body em{ font-style:italic; color:var(--rose) }
  .art-body strong{ color:var(--salmon-deep); font-weight:600 }
  .art-sub{ font-family:"Cormorant Garamond",Georgia,serif; font-size:1rem;
    color:var(--ink-soft); font-style:italic; margin:20px 0 4px; letter-spacing:.01em }
  .quarry-label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-soft); margin:24px 0 10px; font-weight:600 }

  /* ── LEARN PILLAR HEADERS ── */
  .pillar-head{ margin:38px 0 14px; }
  .pillar-head:first-of-type{ margin-top:6px }
  .pillar-eyebrow{ font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color:rgba(251,241,234,.55); margin:0 0 3px; font-weight:600 }
  .pillar-head h2{ font-family:"Cormorant Garamond",Georgia,serif; font-size:27px;
    line-height:1.1; color:#FBF1EA; margin:0; letter-spacing:.01em }
  .pillar-intro{ font-size:14px; line-height:1.62; color:rgba(251,241,234,.82);
    font-style:italic; margin:9px 0 4px }
  .pillar-soon{ font-size:13px; line-height:1.6; color:rgba(251,241,234,.6);
    border:1px dashed rgba(251,241,234,.25); border-radius:14px;
    padding:14px 16px; margin:14px 0 4px }

  /* ── PILLAR PILL NAV ── */
  .pillar-pills{
    display:flex; gap:8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin:0 -16px; padding:10px 16px 14px;
    position:sticky; top:-22px; z-index:20;
    background:#A2543F;
  }
  .pillar-pills::-webkit-scrollbar{ display:none }
  .p-pill{
    flex-shrink:0; white-space:nowrap;
    font-size:12px; font-weight:500; letter-spacing:.04em;
    padding:6px 15px; border-radius:20px;
    border:1px solid rgba(251,241,234,.3);
    color:rgba(251,241,234,.6);
    background:transparent; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .p-pill.active{ background:var(--rose); border-color:var(--rose); color:#FBF1EA; }
  .pillar-section{ display:none }
  .pillar-section.ps-active{ display:block }

  /* ── ENERGY LOG ── */
  .energypick{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px }
  .energypick button{
    border:1px solid var(--card-line); background:#fff; border-radius:14px;
    padding:10px 4px; cursor:pointer; font:inherit; font-size:11px;
    color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:6px;
  }
  .energypick button.active{ box-shadow:0 0 0 2px var(--salmon); border-color:transparent; background:#fff6f2 }
  .edot{ width:18px; height:18px; border-radius:50%; display:block; flex-shrink:0 }
  /* thin coloured bar at TOP of each calendar cell that has an energy log */
  .cal .cell .energybar{ position:absolute; top:0; left:0; right:0; height:3px; border-radius:12px 12px 0 0 }

  /* ── MOON SECTION (Learn tab) ── */
  .mooncard{ border-radius:18px; overflow:hidden; border:1px solid var(--card-line); box-shadow:0 4px 14px rgba(100,80,140,.08); margin-bottom:12px }
  .mooncard-top{ padding:13px 16px 12px; background:linear-gradient(135deg,#2d1b4e,#4a2c6e); color:#fff }
  .mooncard-title{ font-size:16px; font-weight:700; font-family:"Cormorant Garamond",Georgia,serif; margin-bottom:5px }
  .mooncard-body{ padding:13px 15px 15px; background:#fff }
  .mooncard-body p{ margin:0 0 10px; font-size:13.5px; line-height:1.65; color:var(--ink) }
  .mooncard-body p:last-child{ margin-bottom:0 }
  .mooncard-body em{ color:var(--plum); font-style:italic }
  .moonfact{ font-size:13px; line-height:1.58; color:#4a2c6e;
    background:linear-gradient(135deg,#f4f0fa,#fdf8ff);
    border-left:3px solid var(--plum); padding:10px 12px;
    border-radius:0 10px 10px 0; font-style:italic; margin:10px 0 }

  /* ── DATA TAB ── */
  .stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
  @media(min-width:420px){ .stats{ grid-template-columns:repeat(4,1fr) } }
  .stat{ background:#fff; border:1px solid var(--card-line); border-radius:14px; padding:12px; text-align:center }
  .stat .v{ font-size:24px; font-weight:700; color:var(--rose) }
  .stat .k{ font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.6px; margin-top:2px }
  .lore{ font-size:13.5px; line-height:1.55; color:var(--dusk); background:linear-gradient(135deg,#faf4fb,#fff); border:1px solid #ecdcef; border-radius:16px; padding:14px 16px }
  table{ width:100%; border-collapse:collapse; font-size:13.5px }
  th,td{ text-align:left; padding:9px 8px; border-bottom:1px solid var(--card-line) }
  th{ color:var(--ink-soft); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.6px }
  td .del{ color:var(--salmon-deep); cursor:pointer; font-size:12px; border:none; background:none }

  /* ── BUTTONS & FORMS ── */
  label{ font-size:13px; color:var(--ink-soft); display:block; margin:0 0 5px }
  input[type=date],input[type=number],select,textarea{
    width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--card-line);
    background:#fff; font:inherit; color:var(--ink);
  }
  input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--salmon); box-shadow:0 0 0 3px rgba(239,147,132,.18) }
  .btn{
    border:none; cursor:pointer; font:inherit; font-weight:600; padding:11px 18px; border-radius:30px;
    color:#fff; background:linear-gradient(135deg,var(--salmon),var(--salmon-deep)); box-shadow:var(--shadow);
    transition:transform .08s ease;
  }
  .btn:active{ transform:translateY(1px) }
  .btn.ghost{ background:#fff; color:var(--salmon-deep); border:1px solid var(--card-line); box-shadow:none }
  .btn.sm{ padding:7px 13px; font-size:13px }
  .btnrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }
  .footnote{ text-align:center; font-size:12px; color:#E8CFC4; margin-top:22px; line-height:1.6 }
  .prednote{ font-size:11.5px; color:var(--ink-soft); line-height:1.5; text-align:center; margin:13px 4px 0 }
  .kicker{ font-family:"Work Sans",sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft) }
  .guidetext{ font-size:14.5px; line-height:1.65; color:var(--ink); margin:0 }
  .guiderow{ display:flex; gap:11px; padding:11px 0; border-top:1px solid var(--card-line) }
  .guiderow:first-child{ border-top:none }
  .guiderow .gpd{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; margin-top:6px }
  .guiderow b{ font-family:"Cormorant Garamond",Georgia,serif; font-size:17px; font-weight:600; color:var(--dusk) }
  .guiderow p{ margin:3px 0 0; font-size:13px; line-height:1.55; color:var(--ink) }

  /* ── DAY MODAL ── */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(90,60,70,.38);
    backdrop-filter:blur(3px); display:none; align-items:center;
    justify-content:center; padding:18px; z-index:100
  }
  .modal-overlay.open{ display:flex }
  .modal{
    background:var(--card); border-radius:24px;
    box-shadow:0 24px 60px rgba(180,90,70,.3);
    width:100%; max-width:420px; padding:26px 24px 22px;
    position:relative; text-align:center;
    max-height:92vh; overflow-y:auto; animation:pop .18s ease
  }
  @keyframes pop{ from{ transform:scale(.94); opacity:0 } to{ transform:scale(1); opacity:1 } }
  .modal-x{ position:absolute; top:12px; right:14px; border:none; background:none; font-size:26px; line-height:1; color:var(--ink-soft); cursor:pointer }
  .modal-moon{ line-height:0; filter:drop-shadow(0 4px 8px rgba(120,90,140,.25)) }
  .modal-moon svg{ width:46px; height:46px }
  .modal h3{ margin:6px 0 2px; font-size:20px; color:var(--salmon-deep) }
  .modal-sub{ font-size:13px; color:var(--ink-soft); margin-bottom:6px; display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap }
  .modal-sub .pchip{ padding:3px 10px; border-radius:20px; color:#fff; font-size:11.5px; font-weight:600 }
  .modal-section{ text-align:left; margin-top:16px }
  .modal-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--salmon-deep); margin-bottom:8px }
  .modal-label .muted{ font-weight:400; text-transform:none; letter-spacing:0 }
  .flowpick{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px }
  .flowpick button{
    border:1px solid var(--card-line); background:#fff; border-radius:14px; padding:10px 4px; cursor:pointer;
    font:inherit; font-size:11.5px; color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:5px
  }
  .flowpick button .sw{ display:inline-flex; gap:2px; min-height:6px }
  .flowpick button .sw i{ width:6px; height:6px; border-radius:50% }
  .flowpick button.active{ box-shadow:0 0 0 2px var(--salmon); border-color:transparent; background:#fff6f2 }
  .sympwrap{ display:flex; flex-wrap:wrap; gap:7px }
  .sympwrap button{ border:1px solid var(--card-line); background:#fff; border-radius:30px; padding:7px 12px; cursor:pointer; font:inherit; font-size:13px; color:var(--ink) }
  .sympwrap button.active{ background:var(--plum); color:#fff; border-color:transparent }
  .livedwrap{ display:flex; flex-wrap:wrap; gap:7px }
  .livedwrap button{ border:1px solid var(--card-line); background:#fff; border-radius:30px; padding:7px 12px; cursor:pointer; font:inherit; font-size:13px; color:var(--ink) }
  .livedwrap button.active{ background:#8BA86A; color:#fff; border-color:transparent }
  .modal textarea{ width:100%; border:1px solid var(--card-line); border-radius:12px; padding:10px; font:inherit; resize:vertical }
  .modal-private{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin:16px 0 0 }
  .modal-actions{ display:flex; gap:10px; margin-top:14px }
  .modal-actions .btn{ flex:1 }

  .hidden{ display:none }

  /* --- M1 Milestone Modal --- */
  #m1Modal{
    position:fixed;inset:0;z-index:220;
    background:rgba(42,22,18,.55);
    display:none;align-items:flex-end;justify-content:center;
  }
  .m1-sheet{
    background:var(--bg1);
    width:100%;max-width:520px;
    max-height:88vh;overflow-y:auto;
    border-radius:20px 20px 0 0;
    padding:32px 24px 44px;
    box-sizing:border-box;
  }
  .m1-label{
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:2rem;line-height:1.15;
    color:#FBF1EA;margin:0 0 20px;
    letter-spacing:.02em;
  }
  .m1-poem p:not(.m1-label){
    color:#FBF1EA;font-size:.94rem;
    line-height:1.8;margin:0 0 13px;
    opacity:.9;
  }
  .m1-stat{
    margin:22px 0 6px!important;
    font-size:.97rem!important;opacity:1!important;
  }
  .m1-stat strong{ color:#F4C9B8;font-size:1.1rem; }
  .m1-tagline{
    opacity:.65!important;
    font-size:.85rem!important;
    font-style:italic;
    line-height:1.6!important;
    margin-bottom:0!important;
  }
  .m1-deep-btn{
    display:block;width:100%;
    margin:22px 0 0;padding:14px 18px;
    background:transparent;
    border:1px solid rgba(251,241,234,.3);
    border-radius:10px;
    color:#FBF1EA;font:inherit;font-size:.9rem;
    text-align:left;cursor:pointer;
  }
  .m1-deep-btn:hover{ border-color:rgba(251,241,234,.6); }
  #m1Deep{ margin-top:28px;border-top:1px solid rgba(251,241,234,.12);padding-top:24px; }
  .m1-section{ margin-bottom:26px; }
  .m1-section h3{
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:1.15rem;color:var(--sage);
    margin:0 0 10px;font-style:italic;
    letter-spacing:.02em;
  }
  .m1-section p{
    color:#FBF1EA;font-size:.88rem;
    line-height:1.78;margin:0 0 10px;
    opacity:.88;
  }
  .m1-close-btn{
    display:block;width:100%;margin-top:28px;
    padding:13px;background:rgba(251,241,234,.1);
    border:none;border-radius:10px;
    color:#FBF1EA;font:inherit;font-size:.9rem;cursor:pointer;
  }
  .m1-close-btn:hover{ background:rgba(251,241,234,.18); }

  /* --- M2 modal --- */
  #m2Modal{
    position:fixed;inset:0;z-index:221;
    background:rgba(42,22,18,.55);
    display:none;align-items:flex-end;justify-content:center;
  }
  .m2-sheet{
    background:var(--bg1);
    width:100%;max-width:520px;
    max-height:88vh;overflow-y:auto;
    border-radius:20px 20px 0 0;
    padding:32px 24px 44px;
    box-sizing:border-box;
  }
  .m2-label{
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:2rem;line-height:1.15;
    color:#FBF1EA;margin:0 0 20px;
    letter-spacing:.02em;
  }
  .m2-poem p:not(.m2-label){
    color:#FBF1EA;font-size:.94rem;
    line-height:1.8;margin:0 0 13px;
    opacity:.9;
  }
  .m2-poem strong{ color:var(--sage);font-size:1.05rem; }
  .m2-interpret{ opacity:1!important;font-style:italic; }
  .m2-tagline{ opacity:.65!important;font-size:.85rem!important;font-style:italic;line-height:1.6!important;margin-bottom:0!important; }
  .m2-deep-btn{ display:block;width:100%;margin:22px 0 0;padding:14px 18px;background:transparent;border:1px solid rgba(251,241,234,.3);border-radius:10px;color:#FBF1EA;font:inherit;font-size:.9rem;text-align:left;cursor:pointer; }
  .m2-deep-btn:hover{ border-color:rgba(251,241,234,.6); }
  #m2Deep{ margin-top:28px;border-top:1px solid rgba(251,241,234,.12);padding-top:24px; }
  .m2-section{ margin-bottom:26px; }
  .m2-section h3{ font-family:"Cormorant Garamond",Georgia,serif;font-size:1.15rem;color:var(--sage);margin:0 0 10px;font-style:italic;letter-spacing:.02em; }
  .m2-section p{ color:#FBF1EA;font-size:.88rem;line-height:1.78;margin:0 0 10px;opacity:.88; }
  .m2-section strong{ color:var(--sage); }
  .m2-interp-line{ font-style:italic;opacity:1!important; }
  .m2-close-btn{ display:block;width:100%;margin-top:28px;padding:13px;background:rgba(251,241,234,.1);border:none;border-radius:10px;color:#FBF1EA;font:inherit;font-size:.9rem;cursor:pointer; }
  .m2-close-btn:hover{ background:rgba(251,241,234,.18); }

  /* --- veil sentences --- */
  /* use .veil on any paragraph that carries the veiled DCG thread.
     Quieter than surrounding copy — opacity + spacing do the surfacing,
     not size or color. Always last in its section. */
  .veil,
  .m1-section p.veil,
  .m2-section p.veil,
  .art-body p.veil {
    font-size:.82rem;
    opacity:.70;
    letter-spacing:.04em;
    margin-top:28px;
    margin-bottom:0;
    line-height:1.9;
  }
  /* VEIL ON HOLD (2026-06-18) — Rahmi: the appended "The body you inhabit." reads
     tacked-on, not earned — it doesn't drive in with the article. Hidden pending a
     rework that weaves the thread into the closing prose. Delete this rule to restore. */
  .veil{ display:none !important; }

  /* --- Onboarding (first launch) + Founder's Note overlay --- */
  #onboard, #noteModal{
    position:fixed; inset:0;
    background:var(--bg1);
    display:none; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  #onboard{ z-index:300; }
  #noteModal{ z-index:310; }            /* sits above onboarding when opened from it */
  #onboard.open, #noteModal.open{ display:block; }
  .ob-wrap{
    min-height:100%; box-sizing:border-box;
    max-width:560px; margin:0 auto;
    padding:58px 28px 44px;
    display:flex; flex-direction:column;
  }
  .ob-word{
    font-family:"Cormorant Garamond",Georgia,serif;
    text-align:center; color:#FBF1EA;
    font-size:2.5rem; letter-spacing:.16em; line-height:1; margin:0;
  }
  .ob-word .sub{
    display:block; font-size:.72rem; letter-spacing:.42em;
    opacity:.66; margin-top:10px; padding-left:.42em;
  }
  .ob-note{ margin-top:34px; }
  .ob-note p{
    color:#FBF1EA; font-size:1.04rem; line-height:1.85;
    margin:0 0 18px; opacity:.94;
  }
  .ob-note p em{ font-style:italic; }
  .ob-note p.ob-last{ opacity:1; }       /* the inhabit launch line, full strength */
  .ob-sig{ font-style:italic; opacity:.7; margin-top:8px; }
  .ob-actions{ margin-top:18px; }
  .ob-begin{
    display:block; width:100%;
    padding:16px; border:none; border-radius:13px;
    background:#FBF1EA; color:var(--bg1);
    font:inherit; font-size:1rem; font-weight:600; letter-spacing:.02em;
    cursor:pointer;
  }
  .ob-begin:hover{ opacity:.92; }
  .ob-more{
    display:block; width:100%; margin-top:16px;
    background:none; border:none; color:#FBF1EA; opacity:.7;
    font:inherit; font-size:.9rem; text-align:center; cursor:pointer;
    text-decoration:underline; text-underline-offset:3px;
  }
  .ob-more:hover{ opacity:1; }
  .ob-close{
    display:block; width:100%; margin-top:30px;
    padding:14px; border:none; border-radius:13px;
    background:rgba(251,241,234,.1); color:#FBF1EA;
    font:inherit; font-size:.95rem; cursor:pointer;
  }
  .ob-close:hover{ background:rgba(251,241,234,.18); }

  /* ── ONBOARDING STEPS ── */
  .ob-step{ display:none; flex-direction:column; flex:1; }
  .ob-step.active{ display:flex; }
  .ob-field-wrap{ margin-top:44px; display:flex; flex-direction:column; }
  .ob-label{ color:#FBF1EA; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; opacity:.7; margin-bottom:10px; font-family:"Work Sans",sans-serif; }
  .ob-hint{ text-transform:none; letter-spacing:0; font-size:.8rem; opacity:.8; }
  .ob-input{ background:rgba(251,241,234,.1); border:1.5px solid rgba(251,241,234,.18); border-radius:12px; color:#FBF1EA; font:inherit; font-size:1.05rem; padding:14px 16px; outline:none; width:100%; box-sizing:border-box; -webkit-appearance:none; }
  .ob-input::placeholder{ color:rgba(251,241,234,.35); }
  .ob-input:focus{ border-color:rgba(251,241,234,.5); background:rgba(251,241,234,.15); }
  .ob-input[type="date"]{ color-scheme:dark; }
  .ob-cycle-row{ display:flex; align-items:center; gap:18px; margin-top:4px; }
  .ob-cycle-btn{ background:rgba(251,241,234,.12); border:1.5px solid rgba(251,241,234,.18); border-radius:10px; color:#FBF1EA; font:inherit; font-size:1.4rem; line-height:1; width:46px; height:46px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .ob-cycle-btn:active{ background:rgba(251,241,234,.22); }
  .ob-cycle-val{ font-family:"Cormorant Garamond",Georgia,serif; font-size:2.6rem; font-weight:600; color:#FBF1EA; min-width:48px; text-align:center; }
  .ob-cycle-unit{ color:rgba(251,241,234,.6); font-size:.9rem; }

  /* ── WEEK TAB · HERO (mirrors today-im / moonhero — no card box) ── */
  .wh-im{ padding:4px 4px 8px; margin-bottom:18px; }
  #weekHero #wheel svg{ width:106px !important; height:106px !important; flex:0 0 auto; }

  /* ── WEEK TAB · GUIDANCE CARDS ── */
  .wg-card{
    background:var(--card); border:1px solid var(--card-line);
    border-radius:20px; padding:20px 22px; margin-bottom:14px; box-shadow:var(--shadow);
  }
  .wg-head{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
  .wg-ico{ font-size:21px; line-height:1; }
  .wg-head h2{ margin:0; font-size:23px; color:var(--salmon-deep); }
  .wg-focus{ margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--stage-accent,var(--luteal)); }
  .wg-items{ margin:0 0 12px; padding:0; list-style:none; }
  .wg-item{ border-bottom:1px solid var(--card-line); cursor:pointer; user-select:none; }
  .wg-item:last-child{ border-bottom:none; }
  .wg-item-top{ display:flex; align-items:center; justify-content:space-between; padding:10px 0 10px 16px; gap:8px; position:relative; }
  .wg-item-top::before{ content:"·"; position:absolute; left:2px; font-size:18px; line-height:1; top:10px; color:var(--stage-accent,var(--luteal)); font-weight:700; }
  .wg-item-label{ font-size:14.5px; font-weight:500; color:var(--ink); line-height:1.4; flex:1; }
  .wg-item-arrow{ font-size:18px; font-weight:300; color:var(--stage-accent,var(--luteal)); line-height:1; flex:0 0 auto; transition:transform .2s; }
  .wg-item.open .wg-item-arrow{ transform:rotate(45deg); }
  .wg-item-detail{ display:none; font-size:13.5px; line-height:1.65; color:var(--ink); opacity:.82; padding:0 0 12px 16px; }
  .wg-item.open .wg-item-detail{ display:block; }
  .wg-why{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink); opacity:.65; border-top:1px solid var(--card-line); padding-top:10px; }
  .wg-fast{ margin:0 0 10px; font-size:13px; line-height:1.5; color:var(--ink); opacity:.78; border-top:1px solid var(--card-line); padding-top:10px; }
  .wg-fast b{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--stage-accent,var(--luteal)); font-weight:700; display:block; margin-bottom:3px; }
  .week-empty{ color:#EBD4CA; font-size:15px; line-height:1.6; margin:0; opacity:.8; }

  /* ── INLINE TODAY LOG ── */
  .today-log{ padding:0 4px 32px; }
  .log-date{ font-size:12px; color:#E8CFC4; text-align:center; margin-bottom:18px; letter-spacing:.04em; }
  .log-section{ margin-bottom:22px; }
  .log-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#E7C3B5; margin-bottom:10px; }
  .log-hint{ font-weight:400; text-transform:none; letter-spacing:0; font-size:11px; opacity:.7; }
  .log-chips{ display:flex; gap:8px; flex-wrap:nowrap; }
  .log-chips.wrap{ flex-wrap:wrap; }
  .log-chip{ flex:1; min-width:0; border:1px solid rgba(251,241,234,.22); background:rgba(251,241,234,.08); border-radius:12px; padding:10px 6px; cursor:pointer; font:inherit; font-size:13px; color:#F4E1D7; text-align:center; line-height:1.3; transition:all .15s; white-space:nowrap; }
  .log-chips.wrap .log-chip{ flex:none; padding:9px 14px; border-radius:30px; }
  .log-chip.active{ background:rgba(251,241,234,.9); color:#A2543F; border-color:transparent; font-weight:600; }
  .log-chip.active-energy{ background:var(--chip-color,#e8c48a); color:#3B2E2E; border-color:transparent; font-weight:600; }
  .log-times{ display:flex; gap:12px; }
  .log-time-group{ display:flex; flex-direction:column; gap:5px; flex:1; }
  .log-time-group span{ font-size:11px; color:#E7C3B5; text-transform:uppercase; letter-spacing:.06em; }
  .log-time-group .time-display{ background:rgba(251,241,234,.1); border:1px solid rgba(251,241,234,.22); border-radius:10px; padding:10px 12px; font:inherit; font-size:15px; color:#FBF1EA; width:100%; box-sizing:border-box; outline:none; cursor:pointer; caret-color:transparent; }
  .log-time-group .time-display:focus{ border-color:rgba(251,241,234,.5); }
  .log-derived{ font-size:13px; color:#E7C3B5; margin-top:8px; min-height:18px; }
  .log-woke-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#E7C3B5; margin:14px 0 10px; }
  .log-private{ font-size:11.5px; color:#C9A898; text-align:center; margin:4px 0 2px; }
  .log-backfill{ font-size:11.5px; color:#C9A898; text-align:center; margin:0 0 8px; }
  /* grouped sub-trackers (inner weather, gut, skin) */
  .log-subrow{ display:flex; align-items:center; gap:12px; margin-bottom:9px; flex-wrap:wrap; }
  .log-subrow:last-child{ margin-bottom:0; }
  .log-sublabel{ font-size:12.5px; color:#7a675e; min-width:84px; flex:0 0 auto; }
  .today-log .log-sublabel{ color:#E7C3B5; }
  .log-subrow .log-chips{ flex:1 1 auto; }
  /* modal-surface chips (light bg) for new trackers */
  .m-chip{ border:1px solid var(--card-line); background:#fff; border-radius:30px; padding:7px 12px; cursor:pointer; font:inherit; font-size:13px; color:var(--ink); }
  .m-chip.active{ background:var(--plum); color:#fff; border-color:transparent; }
  /* synthesis — "Your patterns" plain-language payoff */
  .patterns-body{ display:flex; flex-direction:column; gap:16px; }
  .pattern-block{ display:flex; gap:11px; align-items:flex-start; }
  .pattern-dot{ width:10px; height:10px; border-radius:50%; margin-top:8px; flex:0 0 auto; }
  .pattern-text{ font-family:'Cormorant Garamond', Georgia, serif; font-size:18.5px; line-height:1.5; color:var(--ink); }
  .pattern-n{ display:block; font-family:'Work Sans', system-ui, sans-serif; font-size:11px; color:var(--ink-soft); letter-spacing:.04em; margin-top:4px; }
  /* settings — what you track */
  .tracker-toggles{ display:flex; flex-direction:column; }
  .tracker-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 2px; border-bottom:1px solid var(--card-line); }
  .tracker-row:last-child{ border-bottom:none; }
  .tracker-name{ font-size:14.5px; color:var(--ink); }
  .tracker-toggle{ width:46px; height:27px; border-radius:30px; border:none; background:#D9CBC2; position:relative; cursor:pointer; transition:background .18s; flex:0 0 auto; padding:0; }
  .tracker-toggle .knob{ position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:left .18s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
  .tracker-toggle.on{ background:var(--salmon-deep); }
  .tracker-toggle.on .knob{ left:22px; }
  /* modal time fields */
  .modal-times{ display:flex; gap:10px; }
  .modal-time-group{ display:flex; flex-direction:column; gap:4px; flex:1; }
  .modal-time-group span{ font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }
  .modal-time-group .time-display{ background:#fff; border:1px solid var(--card-line); border-radius:8px; padding:8px 10px; font:inherit; font-size:14px; color:var(--ink); width:100%; box-sizing:border-box; outline:none; cursor:pointer; caret-color:transparent; }
  .modal-time-group .time-display:focus{ border-color:var(--salmon-deep); }

  /* ── TIME PICKER ── */
  .cp-overlay{ position:fixed; inset:0; background:rgba(20,8,4,.6); display:flex; align-items:center; justify-content:center; z-index:9000; opacity:0; pointer-events:none; transition:opacity .18s; }
  .cp-overlay.open{ opacity:1; pointer-events:all; }
  .cp-panel{ background:linear-gradient(160deg,#3D1A0A,#281005); border:1px solid rgba(251,241,234,.1); border-radius:24px; padding:26px 24px 20px; width:288px; box-shadow:0 16px 48px rgba(0,0,0,.55); }
  .cp-label{ font-size:11px; color:#C9A898; text-transform:uppercase; letter-spacing:.1em; margin-bottom:18px; font-family:"Work Sans",sans-serif; }
  .cp-entry-row{ display:flex; align-items:center; gap:6px; margin-bottom:22px; }
  .cp-field-wrap{ display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; }
  .cp-field{ width:100%; text-align:center; font-family:'Cormorant Garamond',serif; font-size:48px; font-weight:600; color:#FBF1EA; background:rgba(251,241,234,.08); border:1.5px solid rgba(251,241,234,.15); border-radius:14px; padding:10px 0; outline:none; -moz-appearance:textfield; }
  .cp-field::-webkit-outer-spin-button,.cp-field::-webkit-inner-spin-button{ -webkit-appearance:none; }
  .cp-field:focus{ border-color:rgba(230,169,150,.7); background:rgba(251,241,234,.13); }
  .cp-field-lbl{ font-size:10px; color:#C9A898; text-transform:uppercase; letter-spacing:.08em; font-family:"Work Sans",sans-serif; }
  .cp-colon{ font-family:'Cormorant Garamond',serif; font-size:48px; color:rgba(251,241,234,.3); padding-bottom:22px; flex-shrink:0; }
  .cp-ampm-col{ display:flex; flex-direction:column; gap:6px; margin-left:4px; }
  .cp-ap{ background:rgba(251,241,234,.07); border:1.5px solid rgba(251,241,234,.15); border-radius:10px; padding:9px 14px; font:inherit; font-size:13px; color:#E8CFC4; cursor:pointer; transition:background .12s,color .12s,border-color .12s; white-space:nowrap; font-family:"Work Sans",sans-serif; }
  .cp-ap.active{ background:linear-gradient(135deg,#C9806F,#A2543F); border-color:transparent; color:#FBF1EA; font-weight:600; }
  .cp-btns{ display:flex; justify-content:flex-end; gap:10px; align-items:center; }
  .cp-btn-cancel{ background:none; border:none; font:inherit; font-size:14px; color:#C9A898; cursor:pointer; padding:8px 12px; border-radius:8px; font-family:"Work Sans",sans-serif; }
  .cp-btn-ok{ background:linear-gradient(135deg,#C9806F,#A2543F); border:none; font:inherit; font-size:14px; color:#FBF1EA; cursor:pointer; padding:8px 22px; border-radius:10px; font-weight:600; font-family:"Work Sans",sans-serif; box-shadow:0 4px 14px rgba(162,84,63,.4); }

  /* ── QUICK NOTE (light card · dark ink) ── */
  .qnote-area{
    width:100%; box-sizing:border-box; min-height:128px;
    background:#fff; border:1px solid var(--card-line);
    border-radius:14px; color:var(--ink); font:inherit; font-size:15px; line-height:1.65;
    padding:14px 16px; resize:vertical; outline:none;
    transition:border-color .15s;
  }
  .qnote-area::placeholder{ color:var(--ink-soft); opacity:.65; }
  .qnote-area:focus{ border-color:var(--salmon-deep); }
  .qnote-status{ font-size:12px; color:var(--ink-soft); text-align:right; margin-top:8px; min-height:16px; }

  /* ── Wave chart (Layer 2) ── */
  .wave-cap{ font-family:'Work Sans',system-ui,sans-serif; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin:20px 0 8px; }
  .wave-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 2px; background:linear-gradient(160deg,#3A2230,#241019); border-radius:16px; padding:6px 0 2px; }
  .wave-wrap svg{ display:block; }
  .wave-clab{ font-family:'Work Sans',system-ui,sans-serif; font-size:10px; letter-spacing:.04em; fill:rgba(255,236,228,0.5); }
  .wave-gaplab{ font-family:'Work Sans',system-ui,sans-serif; font-size:11px; fill:rgba(255,236,228,0.35); }
  .wave-y-label{ font-family:'Work Sans',system-ui,sans-serif; font-size:10px; fill:var(--ink-soft); }
  .wave-phase-label{ font-family:'Work Sans',system-ui,sans-serif; font-size:9px; fill:var(--ink-soft); }
  .wave-controls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px; }
  .wave-chip{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12.5px; color:var(--ink-soft); background:#fff; border:1px solid var(--card-line); border-radius:30px; padding:5px 11px; cursor:pointer; }
  .wave-chip.on{ color:var(--salmon-deep); border-color:var(--salmon); background:#FFF3EE; }
  .wave-chip.static{ background:transparent; border:none; color:var(--ink); cursor:default; padding-left:2px; }
  .wave-chip-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
  .wave-phlab{ font-family:'Work Sans',system-ui,sans-serif; font-size:10px; letter-spacing:.02em; fill:rgba(255,236,228,0.6); }
  .wave-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin-top:10px; }
  .wave-leg{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-soft); }
  .wave-leg-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
  .wave-leg.dim-leg{ opacity:.8; font-style:italic; }
  .wave-readout{ margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--ink); background:#FFF3EE; border:1px solid var(--card-line); border-radius:12px; padding:9px 12px; }
  .wave-readout strong{ color:var(--salmon-deep); font-weight:600; }
  .wave-sep{ border:none; border-top:1px solid var(--card-line); margin:22px 0 18px; }

  /* ── YOU-TAB GEAR ── */
  .card-head-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .card-head-row h2{ margin:0; }
  .settings-btn{ background:var(--card-line); border:1px solid var(--card-line); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft); padding:0; transition:background .15s; flex-shrink:0; }
  .settings-btn:hover{ background:#E0C9BE; }

  /* ── SETTINGS DRAWER ── */
  .settings-overlay{ display:none; position:fixed; inset:0; z-index:300; background:rgba(35,15,20,0.5); }
  .settings-overlay.open{ display:flex; justify-content:flex-end; }
  .settings-drawer{ width:min(320px,92vw); height:100%; background:var(--card); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1); }
  .settings-overlay.open .settings-drawer{ transform:translateX(0); }
  .settings-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 20px 16px; border-bottom:1px solid var(--card-line); flex-shrink:0; }
  .settings-drawer-title{ font-family:"Cormorant Garamond",Georgia,serif; font-size:20px; font-weight:600; color:var(--salmon-deep); }
  .settings-close{ background:none; border:none; font-size:28px; line-height:1; color:var(--ink-soft); cursor:pointer; padding:0; }
  .settings-drawer-body{ padding:22px 20px; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .settings-section{ margin-bottom:28px; }
  .settings-section-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--salmon-deep); margin-bottom:10px; }