:root{
    /* snowfox winter palette */
    --bg:#eef2fb; --bg2:#f4eefb; --panel:#fff; --panel-soft:#f6f8ff;
    --line:#e4e6f5; --line-2:#dde0f1; --ink:#3a3550; --ink-soft:#6a6488; --muted:#9b96b6;
    --peri:#758ac6; --peri-deep:#5f74b4; --sakura:#ff9ed8; --sakura-deep:#ec74bf;
    --lav:#a98fe0; --lav-deep:#8d6fd1; --mint:#6fc3ab; --ice:#9fc3e8; --peach:#f3a978;
    --shadow:0 6px 22px rgba(120,130,200,.14); --shadow-sm:0 2px 8px rgba(120,130,200,.10);
    --r:18px; --sans:"Quicksand",ui-rounded,"SF Pro Rounded",system-ui,sans-serif; --display:"Fredoka",var(--sans);
  }
  *{box-sizing:border-box;} html,body{margin:0;padding:0;}
  /* page-width clamp: one stray wide element otherwise makes the whole page scroll sideways
     and "everything sits slightly left" on iPad portrait — wide things scroll INSIDE their panels.
     ⚠️ NEVER put overflow-x on html/body: it silently forces overflow-y to auto and KILLS vertical
     scroll in standalone/PWA + iOS. Clip on the wrapper (main) only — clip doesn't drag the y-axis along. */
  html,body{width:100%;max-width:100%;}
  main{overflow-x:clip;}
  /* native-app feel */
  html{-webkit-text-size-adjust:100%;}
  *{-webkit-tap-highlight-color:transparent;}            /* no gray iOS tap flash */
  body{overscroll-behavior-y:none;}                      /* no whole-page rubber-band */
  nav{overscroll-behavior-x:contain;}                    /* tab-strip swipes don't yank the page */
  body{background:var(--bg);background-image:radial-gradient(80% 50% at 100% 0%,#f7e0f3 0%,transparent 60%),radial-gradient(70% 50% at 0% 0%,#e2e9fb 0%,transparent 55%);background-attachment:fixed;color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;font-weight:500;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;}
  h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;}
  /* cleaner default heading scale — keeps card titles in the 15–17px range (inline sizes still win) */
  h2{font-size:17px;} h3{font-size:14.5px;}
  .muted{color:var(--muted);} .soft{color:var(--ink-soft);} .peri{color:var(--peri-deep);} .sak{color:var(--sakura-deep);} .lav{color:var(--lav-deep);} .mint{color:#3a9d83;}
  .num{font-variant-numeric:tabular-nums;} a{color:var(--lav-deep);}
  button{font-family:inherit;cursor:pointer;font-weight:600;color:inherit;} input,textarea,select{font-family:inherit;font-weight:500;}
  .label{font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);font-weight:700;}
  .card-head>.label{font-size:13px;letter-spacing:.06em;color:var(--lav-deep);}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:20px;}
  .inp{background:#fff;border:1.5px solid var(--line-2);border-radius:12px;padding:9px 12px;color:var(--ink);font-size:13px;width:100%;outline:none;}
  .inp:focus{border-color:var(--peri);box-shadow:0 0 0 3px rgba(117,138,198,.14);}
  textarea.inp{resize:vertical;}
  .btn{background:#fff;border:1.5px solid var(--line-2);border-radius:12px;color:var(--ink-soft);font-size:12px;padding:7px 14px;}
  .btn:hover{border-color:var(--peri);color:var(--peri-deep);}
  .btn-grad{background:linear-gradient(135deg,var(--peri),var(--sakura));color:#fff;border:none;box-shadow:var(--shadow-sm);}
  .btn-grad:hover{filter:brightness(1.05);color:#fff;}
  .pill{font-size:10px;font-weight:700;padding:2px 9px;border-radius:999px;letter-spacing:.03em;display:inline-block;}
  .pill-peri{background:#e6ecfb;color:var(--peri-deep);} .pill-sak{background:#fde2f2;color:var(--sakura-deep);}
  .pill-lav{background:#ece2fb;color:var(--lav-deep);} .pill-mint{background:#dcf3eb;color:#2f9d79;}
  .pill-ice{background:#e2f0fb;color:#3c7bb0;} .pill-gray{background:#f0eef6;color:var(--muted);}
  ::-webkit-scrollbar{width:9px;height:9px;} ::-webkit-scrollbar-thumb{background:#ddd9ef;border-radius:9px;}
  /* hide the main PAGE scrollbar only (2026-08-06) — inner scrollable panels (kanban, sidebar
     nav, journal asset rail, Kiko drawer body, etc.) keep the thin styled bar above; this is
     scoped to html so it doesn't touch overflow/scroll behavior anywhere, just the visible bar. */
  html{scrollbar-width:none;-ms-overflow-style:none;}
  html::-webkit-scrollbar{display:none;}
  #rail{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;position:sticky;top:0;z-index:20;background:rgba(255,255,255,.80);backdrop-filter:blur(12px);border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#9fc3e8,#758ac6,#a98fe0,#ff9ed8) 1;flex-wrap:wrap;gap:8px;}
  .brand{font-family:var(--display);font-size:18px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;}
  .brand-logo{height:30px;width:auto;display:block;flex:0 0 auto;filter:drop-shadow(0 1px 3px rgba(141,111,209,.3));}
  .brand-name{background:linear-gradient(120deg,#5f74b4,#8d6fd1 50%,#ec74bf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700;letter-spacing:.02em;font-size:17px;}
  nav{display:flex;gap:4px;flex-wrap:wrap;}
  .tab{font-size:13px;padding:6px 13px;border-radius:999px;color:var(--ink-soft);border:none;background:none;}
  .tab.active{background:linear-gradient(135deg,#e6ecfb,#fde2f2);color:var(--sakura-deep);} .tab:hover{color:var(--sakura-deep);}
  #rail .right{display:flex;align-items:center;gap:9px;}
  .chip{font-size:11px;padding:4px 10px;border-radius:999px;border:1.5px solid var(--line-2);color:var(--muted);background:#fff;}
  .chip.on{color:#3a9d83;border-color:#bfe9d8;background:#f0fbf6;} .chip.demo{color:var(--lav-deep);border-color:#ddcdf6;background:#f6f0ff;}
  .avatar{width:34px;height:34px;border-radius:999px;background:linear-gradient(135deg,var(--peri),var(--sakura));display:grid;place-items:center;color:#fff;font-weight:700;overflow:hidden;}
  .avatar img{width:100%;height:100%;object-fit:cover;object-position:center;}
  main{padding:18px;max-width:1320px;margin:0 auto;}
  .grid-home{display:grid;grid-template-columns:320px minmax(0,1fr) 320px;gap:16px;}
  .col{display:flex;flex-direction:column;gap:16px;}
  @media(max-width:1040px){.grid-home{grid-template-columns:1fr;}}
  .card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:8px;flex-wrap:wrap;}
  .soft-card{background:var(--panel-soft);border:1px solid var(--line);border-radius:14px;padding:14px;}
  .seg{display:inline-flex;background:#eef0fa;border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap;}
  .seg button{border:none;background:none;border-radius:999px;padding:5px 11px;font-size:12px;color:var(--ink-soft);}
  .seg button.on{background:#fff;color:var(--sakura-deep);box-shadow:var(--shadow-sm);}
  /* ===== 🎮 Gachas Content/Personal scope selector (2026-08-30 follow-up) — compact segmented
     control, replacing an earlier full-width bar. Target ~360px wide, ~46px tall, roomy tap
     targets. Compound `.seg.gg-scope-seg` selector on purpose: same specificity trick as noted
     above `gachaScopeSwitchHTML` — it must outrank the later mobile `.seg button{padding:8px 13px}`
     rule regardless of where that rule sits in the file. */
  .gg-scope-wrap{display:flex;justify-content:center;margin:0 0 14px;}
  .seg.gg-scope-seg{width:min(360px,100%);padding:4px;flex-wrap:nowrap;}
  .seg.gg-scope-seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 14px;font-size:14.5px;font-weight:700;white-space:nowrap;}
  .gg-scope-ic{font-size:16px;line-height:1;}
  /* Active-state glow (2026-08-30 tiny follow-up) — makes the selected Content/Personal segment
     clearly stand out at a glance. Compound `.seg.gg-scope-seg button.on` outranks the shared
     plain-white `.seg button.on` rule above without touching every other .seg control on the page
     (Games Tracker filters, etc.) — same scoped-compound-selector pattern already used for sizing. */
  .seg.gg-scope-seg button.on{background:linear-gradient(135deg,var(--peri),var(--sakura));color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 2px 10px rgba(120,130,200,.22),0 0 16px rgba(255,158,216,.45);}
  .seg.gg-scope-seg button:not(.on){color:var(--ink-soft);}
  .seg.gg-scope-seg button:not(.on):hover{color:var(--sakura-deep);}
  .bar{height:6px;border-radius:999px;background:#ede9f6;overflow:hidden;} .bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--peri),var(--sakura));}
  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:60;background:linear-gradient(135deg,var(--peri),var(--sakura));color:#fff;padding:10px 20px;border-radius:999px;font-weight:700;font-size:13px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;}
  .toast.show{opacity:1;}
  .toast.toast-success{animation:toastGlow .8s ease-out;}
  @keyframes toastGlow{0%{box-shadow:0 0 20px rgba(255,158,216,.8),0 0 40px rgba(117,138,198,.4);}100%{box-shadow:0 0 8px rgba(255,158,216,.3),0 0 16px rgba(117,138,198,.1);}}
  .hidden{display:none!important;} .grow{flex:1;}
  .listrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);} .listrow:first-child{border-top:none;}
  .x{cursor:pointer;color:var(--muted);border:none;background:none;font-size:15px;} .x:hover{color:var(--sakura-deep);}
  .disc{display:flex;gap:8px;align-items:flex-start;background:linear-gradient(90deg,#eef2ff,#fdf0fb);border:1px dashed var(--lav);border-radius:14px;padding:10px 12px;font-size:11.5px;color:var(--ink-soft);margin-top:14px;}
  .disc b{color:var(--peri-deep);}
  .slip{background:linear-gradient(120deg,#e9eefb,#fdeaf6);border:1px solid var(--line);border-radius:16px;padding:13px 16px;text-align:center;font-family:var(--display);font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:10px;}
  .slip img.deco{height:22px;width:auto;opacity:.92;flex:0 0 auto;}
  .slip .slip-txt{min-width:0;}
  /* ---- accessibility ---- */
  @media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important;} }
  body.calm *{animation:none!important;transition:none!important;}
  body.calm{background-image:none;background:#f2f3f8;--peri:#8b9bcf;--peri-deep:#7485bb;--sakura:#e6b6da;--sakura-deep:#bd86ad;--lav:#aea0d2;--lav-deep:#8b7cb8;--mint:#86c2af;}
  body.text-lg{font-size:16px;} body.text-lg .label{font-size:11.5px;} body.text-lg .pill{font-size:12px;}
  /* scales + chip toggles */
  .scale{display:flex;gap:4px;flex-wrap:wrap;}
  .scale button{min-width:34px;height:34px;border:1.5px solid var(--line-2);border-radius:9px;background:#fff;color:var(--ink-soft);font-size:12px;}
  .scale button.on{background:linear-gradient(135deg,var(--peri),var(--sakura));border-color:var(--peri);color:#fff;}
  .scale-ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:3px;}
  .field{margin:12px 0;} .field>.label{margin-bottom:6px;}
  .chiptog{border:1.5px solid var(--line-2);border-radius:999px;padding:7px 13px;background:#fff;color:var(--ink-soft);font-size:12.5px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0;}
  .chiptog.on{background:#fde2f2;border-color:var(--sakura);color:var(--sakura-deep);}
  .chiprow{display:flex;flex-wrap:wrap;gap:7px;}
  .sitebtn{border:1.5px solid var(--line-2);border-radius:11px;padding:7px 11px;background:#fff;color:var(--ink-soft);font-size:12px;}
  .sitebtn.on{background:linear-gradient(135deg,var(--peri),var(--sakura));border-color:var(--peri);color:#fff;}
  /* entrance / transition animations (viewFade/panelIn/softPop are redefined later — iPHONE-MINIMAL MOTION section — those win; not redeclared here to avoid dead duplicate code) */
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  /* Page transition — animate ONLY #view and its DIRECT children (one gentle slide-fade, no scale).
     Never animate nested descendants too: a parent and its child both transforming at once is what
     caused the stutter. Single clean layer = smooth. (Mirrors the smooth Eggie-OS approach.) */
  #view.anim{animation:viewFade .4s cubic-bezier(.22,.61,.36,1) both;}
  #view.anim>*{animation:panelIn .44s cubic-bezier(.22,.61,.36,1) both;}
  #view.anim>*:nth-child(2){animation-delay:.06s}
  #view.anim>*:nth-child(3){animation-delay:.12s}
  #view.anim>*:nth-child(4){animation-delay:.18s}
  #view.anim>*:nth-child(n+5){animation-delay:.22s}
  /* modal + pet chat scale-in */
  .modal-bg{animation:fadeIn .18s ease;}
  .modal{animation:softPop .26s cubic-bezier(.2,.8,.3,1);}
  #kikoChat:not(.hidden){animation:softPop .24s cubic-bezier(.2,.8,.3,1);}
  .tab{transition:background var(--dur-2,.16s) var(--ease,ease),color var(--dur-2,.16s) var(--ease,ease),transform var(--dur-1,.12s) var(--ease,ease);}
  .tab:active{transform:scale(.95);}
  .btn,.btn-grad,.chip{transition:transform var(--dur-1,.12s) var(--ease,ease),filter var(--dur-2,.15s) var(--ease,ease),border-color var(--dur-2,.15s) var(--ease,ease),color var(--dur-2,.15s) var(--ease,ease),background var(--dur-2,.15s) var(--ease,ease);}
  .btn:active,.btn-grad:active{transform:scale(.96);}
  .pill{transition:transform var(--dur-1,.12s) var(--ease,ease);}
  .scale button,.chiptog,.sitebtn,.tog{transition:transform var(--dur-1,.12s) var(--ease,ease),background var(--dur-2,.15s) var(--ease,ease),border-color var(--dur-2,.15s) var(--ease,ease),color var(--dur-2,.15s) var(--ease,ease);}
  .scale button:active,.chiptog:active,.sitebtn:active{transform:scale(.93);}
  /* sparkline bars */
  .spark{display:flex;align-items:flex-end;gap:2px;height:40px;}
  .spark span{flex:1;background:linear-gradient(180deg,var(--sakura),var(--peri));border-radius:3px 3px 0 0;min-height:2px;opacity:.9;}
  .spark span.gap{background:#e9e6f2;opacity:.5;min-height:2px;}
  .sparkrow{display:flex;align-items:center;gap:10px;margin:9px 0;}
  .sparkrow .lab{width:118px;font-size:12px;} .sparkrow .now{width:38px;text-align:right;font-weight:700;font-size:13px;font-family:var(--display);}
  /* bignum / stepper */
  .bignum{font-family:var(--display);font-size:26px;color:var(--ink);}
  .hcount{display:flex;align-items:center;gap:10px;} .hcount>span{min-width:34px;text-align:center;font-size:20px;font-family:var(--display);color:var(--ink);}
  .step{width:34px;height:34px;border-radius:11px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink-soft);font-size:17px;display:grid;place-items:center;}
  /* accordion */
  details.acc{border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow-sm);margin-bottom:12px;overflow:hidden;}
  details.acc>summary{list-style:none;cursor:pointer;padding:13px 16px;font-family:var(--display);font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:8px;}
  details.acc>summary::-webkit-details-marker{display:none;}
  details.acc>summary::after{content:"▸";color:var(--muted);transition:transform .2s;}
  details.acc[open]>summary::after{transform:rotate(90deg);}
  details.acc>.acc-body{padding:2px 16px 16px;}
  /* care: breathing bubble */
  .breath-wrap{position:relative;height:230px;display:grid;place-items:center;}
  .breath-bubble{width:108px;height:108px;border-radius:999px;background:radial-gradient(circle at 35% 30%,#fff,var(--sakura) 56%,var(--peri));box-shadow:0 0 42px rgba(141,111,209,.45);transform:scale(.72);}
  .breath-label{position:absolute;font-family:var(--display);font-size:17px;color:#fff;text-shadow:0 1px 7px rgba(95,116,180,.7);pointer-events:none;}
  /* care: flip cards */
  .deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;}
  /* planner board */
  .kanban{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:10px;align-items:start;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
  .kcol{background:rgba(255,255,255,.45);border:1px solid var(--line);border-radius:14px;padding:8px;min-height:90px;display:flex;flex-direction:column;gap:6px;transition:background .15s,border-color .15s;}
  .kcol.kover{background:#f3eefc;border-color:var(--lav);}
  .citem{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 10px;box-shadow:var(--shadow-sm);cursor:grab;}
  .citem:active{cursor:grabbing;}
  @media (max-width:640px){ .kanban{grid-template-columns:1fr;} }   /* phone: columns stack — ◀ ▶ move cards */
  .flip{perspective:1100px;min-height:198px;cursor:pointer;}
  .flip-inner{position:relative;width:100%;min-height:198px;transition:transform .6s;transform-style:preserve-3d;}
  .flip.open .flip-inner{transform:rotateY(180deg);}
  .flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;}
  .flip-back{background:#fff;transform:rotateY(180deg);overflow:auto;font-size:12px;color:var(--ink-soft);}
  .flip-back li{margin:6px 0;}
  /* care: 3-up row (breathing · check-in · joy jar) */
  .care-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch;}
  .care-cols>.panel{margin:0;}
  @media(max-width:860px){ .care-cols{grid-template-columns:1fr;} }
  /* health: PCOS (left) + Mounjaro (right) */
  .health-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;}
  .health-col{display:flex;flex-direction:column;gap:16px;min-width:0;}
  .health-col>section{margin:0;}
  @media(max-width:860px){ .health-cols{grid-template-columns:1fr;} }
  /* care: joy jar */
  .jar-stage{display:flex;flex-direction:column;align-items:center;gap:2px;}
  .jar-bub{animation:jarfloat 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
  @keyframes jarfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  .joy-pick{min-height:26px;font-family:var(--display);font-size:16px;color:var(--lav-deep);margin-top:8px;text-align:center;}
  .joy-pick.pop{animation:joypop .5s ease;} @keyframes joypop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.13)}100%{transform:scale(1);opacity:1}}
  /* sticky notes */
  /* modular layout — drag-reorder · resize · minimize/remove · masonry */
  /* masonry via CSS multi-column: each column flows independently so cards stack
     tightly at their own heights — no row-snapping, no gaps. span2 = full width. */
  /* two real flex columns — tight packing, no Safari multicol bugs, no CSS Grid row gaps */
  .grid-modular{display:flex;flex-wrap:wrap;gap:var(--gap,16px);align-items:flex-start;}
  .grid-col{display:flex;flex-direction:column;gap:var(--gap,16px);flex:1;min-width:0;}
  .home-widget{position:relative;transition:transform .24s cubic-bezier(.2,.8,.25,1);width:100%;}
  .home-widget.span2{flex-basis:100%;}
  @media(max-width:760px){.grid-modular{flex-direction:column;} .grid-col{flex:none;width:100%;}}
  /* 2026-08-09 Home redesign — same-page-action principle: a brief highlight after a Start
     Here/FYI row scrolls to a section, so the click visibly "did something" even when nothing
     else on the page changes. Purely a border/glow pulse — no new decorative asset. */
  .home-widget.home-section-focus{outline:2px solid var(--sakura-deep,#e88bb8);outline-offset:3px;border-radius:18px;transition:outline-color .3s ease;}
  .home-widget.resizing{transition:none;outline:2px dashed var(--sakura);outline-offset:3px;border-radius:18px;}
  .home-widget.reordering{outline:2px dashed var(--lav);outline-offset:3px;border-radius:18px;}
  .home-widget.dragsrc{display:none!important;}
  #nav .tab.dragsrc{visibility:hidden;}
  .home-widget.min>.panel,.home-widget.min>section{max-height:54px;overflow:hidden;}
  #nav .tab{touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}   /* pan-y: finger/Pencil can still scroll the page from a tab; sideways drag reorders */
  .drag-placeholder{border:2.5px dashed rgba(155,110,190,.7);border-radius:18px;background:rgba(155,110,190,.13);pointer-events:none;transition:min-height .1s;box-shadow:inset 0 0 0 1px rgba(200,164,240,.18);}
  .drag-thumb{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;background:linear-gradient(135deg,#c8a4f0,#e8b4d0);color:#fff;border-radius:12px;padding:7px 16px;font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(120,80,120,.38);white-space:nowrap;will-change:transform;}
  .home-tools{position:absolute;top:8px;left:8px;right:8px;z-index:6;display:flex;justify-content:space-between;gap:3px;}
  .home-tools button{border:none;background:rgba(255,255,255,.72);border-radius:8px;font-size:13px;line-height:1;color:#9b8fae;cursor:pointer;padding:5px 7px;opacity:.45;touch-action:none;user-select:none;-webkit-user-select:none;}
  .home-tools .home-grip{cursor:grab;}
  .home-widget:hover .home-tools button,.home-tools button:hover{opacity:.95;}
  .home-resize{position:absolute;right:4px;bottom:4px;z-index:6;border:none;background:rgba(255,255,255,.72);border-radius:8px;font-size:14px;line-height:1;color:#9b8fae;cursor:nwse-resize;padding:4px 6px;opacity:.45;touch-action:none;user-select:none;-webkit-user-select:none;}
  .home-widget:hover .home-resize,.home-resize:hover{opacity:.95;}
  .home-add{border:2px dashed var(--line);border-radius:16px;background:rgba(255,255,255,.4);color:var(--lav-deep);font-size:13px;cursor:pointer;min-height:80px;flex-basis:100%;margin-top:4px;}
  body.locked .home-tools,body.locked .home-resize,body.locked .home-add{display:none!important;}
  #lockChip.on{background:#fde2f2;color:var(--sakura-deep);}
  @media (hover:none){ .home-tools button,.home-resize{opacity:.92;} .home-tools button{padding:7px 9px;font-size:14px;} .home-resize{padding:6px 9px;font-size:15px;} .sticky-tools button{width:24px;height:24px;font-size:13px;} .sticky-head{height:32px;} }
  /* iPad portrait & narrower: tighter rail + readable calendar */
  @media (max-width:900px){
    .tab{padding:6px 10px;font-size:12px;}
    .cal-cell{min-height:74px;padding:3px 4px;}
    .cal-ev,.cal-stream,.cal-bday{font-size:9.5px;padding:1px 4px;}
    .cal-daynum{font-size:10px;}
  }
  /* PWA / notch safe areas (installed on iPhone/iPad) */
  #rail{padding-left:calc(20px + env(safe-area-inset-left,0px));padding-right:calc(20px + env(safe-area-inset-right,0px));}
  #addStickyBtn{bottom:calc(16px + env(safe-area-inset-bottom,0px));right:80px;}
  #restBtn{bottom:calc(16px + env(safe-area-inset-bottom,0px));}
  .sticky{max-width:calc(100vw - 16px);}   /* a sticky can never poke off-screen on a small device */
  /* instant, native-feeling taps — drag handles (grips, sticky head/corner, Kiko, tabs) keep their own touch-action */
  .btn,.chip,.chiptog,.sitebtn,.kiko-skill,.x,.pill,.scale button,.seg>button,.tog,.cal-swatch{touch-action:manipulation;}
  .btn:active,.sitebtn:active,.kiko-skill:active,.seg>button:active{transform:scale(.96);transition:transform .06s ease;}
  .btn,.chiptog,.kiko-skill{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
  @media (display-mode:standalone){ #rail{padding-top:calc(8px + env(safe-area-inset-top,0px));} }   /* installed app clears the notch/status bar */
  @media (pointer:coarse){ .btn{padding:9px 15px;} #rail{backdrop-filter:blur(8px);} }   /* fatter targets; lighter blur scrolls smoother */
  /* ===== phones (and the installed Home-Screen app) ≤640px ===== */
  @media (max-width:640px){
    #rail{padding:8px calc(10px + env(safe-area-inset-right,0px)) 6px calc(10px + env(safe-area-inset-left,0px));}
    .brand-logo{height:24px;} .brand-name{display:none;}   /* logo only on phones */
    .chip{font-size:10px;padding:3px 8px;} .avatar{width:28px;height:28px;}
    main{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important;}   /* content clears the floating buttons + pet */
    .toast{bottom:calc(78px + env(safe-area-inset-bottom,0px));}
    /* tab bar becomes one swipeable strip instead of wrapping into 3 rows */
    nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;width:100%;order:3;scrollbar-width:none;}
    nav::-webkit-scrollbar{display:none;}
    #nav .tab{flex:0 0 auto;touch-action:pan-x pan-y;font-size:12.5px;padding:8px 12px;}
    main{padding:10px 8px;}
    .panel{padding:13px;border-radius:14px;}
    .bignum{font-size:22px;}
    h2{font-size:16px !important;}
    /* iOS zooms the page when a focused field's font is under 16px — keep fields at 16 */
    .inp,select.inp,textarea.inp,.sticky-body{font-size:16px;}
    /* calendar: a real month view that fits a phone */
    .cal-grid{gap:3px;}
    .cal-cell{min-height:52px;padding:2px 3px;border-radius:8px;gap:2px;}
    .cal-dow{font-size:9.5px;}
    .cal-daynum{font-size:9.5px;}
    .cal-ev,.cal-stream,.cal-bday{font-size:8px;padding:1px 3px;border-radius:5px;border-left-width:2px;}
    /* modals become true iOS bottom sheets on phones — slide up from the edge you'd swipe */
    .modal-bg{padding:0;align-items:flex-end;}
    .modal{width:100%;max-width:100% !important;padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0;max-height:88vh;max-height:88dvh;animation:sheetIn .32s var(--ease-spring,cubic-bezier(.2,.8,.3,1)) both;}
    .modal.closing{animation:sheetOut .22s var(--ease,cubic-bezier(.22,.61,.36,1)) both !important;}
    .modal::before{content:"";display:block;width:36px;height:5px;border-radius:99px;background:rgba(58,53,80,.16);margin:0 auto 10px;flex:0 0 auto;}
    /* Kiko chat becomes a bottom sheet */
    #kikoChat{left:8px;right:8px;width:auto;max-width:none;bottom:calc(8px + env(safe-area-inset-bottom,0px));height:62vh;height:62dvh;max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);}
    #addStickyBtn,#restBtn{width:44px;height:44px;font-size:16px;}
    #addStickyBtn{right:62px;}
    .kiko-skill{font-size:12px;}
    .care-cols{grid-template-columns:1fr;}
    /* five-across input rows wrap to three on a phone */
    [style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:repeat(3,1fr) !important;}
  }
  #stickyLayer{position:fixed;inset:0;z-index:80;pointer-events:none;}
  .sticky{position:absolute;width:200px;height:150px;min-width:140px;min-height:110px;border-radius:12px;box-shadow:0 8px 22px rgba(110,100,150,.24);pointer-events:auto;display:flex;flex-direction:column;transform:rotate(-1deg);overflow:hidden;}
  .sticky-head{height:26px;display:flex;align-items:center;gap:2px;padding:0 4px 0 8px;cursor:grab;border-radius:12px 12px 0 0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
  .sticky-head:active{cursor:grabbing;}
  .sticky-tools{display:flex;gap:1px;flex:1;flex-wrap:nowrap;overflow:hidden;}
  .sticky-tools button{border:none;background:rgba(255,255,255,.45);border-radius:5px;width:18px;height:18px;font-size:11px;line-height:1;color:#4a3a55;cursor:pointer;padding:0;}
  .sticky-tools button:hover{background:#fff;}
  .sticky-x{border:none;background:none;font-size:15px;line-height:1;color:rgba(58,53,80,.5);cursor:pointer;flex:0 0 auto;}
  .sticky-body{flex:1;border:none;background:transparent;outline:none;font-family:var(--sans);font-size:12.5px;color:#3a3550;padding:2px 10px 10px;overflow:auto;}
  .sticky-body:empty:before{content:attr(data-ph);color:rgba(58,53,80,.35);}
  .sticky-resize{position:absolute;right:0;bottom:0;width:22px;height:22px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,rgba(58,53,80,.28) 50%);border-radius:0 0 12px 0;touch-action:none;-webkit-touch-callout:none;}
  .sticky-color{border:none;background:rgba(255,255,255,.45);border-radius:5px;width:18px;height:18px;font-size:10px;line-height:1;cursor:pointer;padding:0;flex:0 0 auto;}
  .sticky-color:hover{background:#fff;}
  .sticky-swatches{position:absolute;top:27px;right:6px;display:flex;gap:5px;padding:6px 7px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 18px rgba(80,60,110,.22);z-index:6;}
  .sticky-swatches.hidden{display:none;}
  .sticky-swatches button{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.1);cursor:pointer;padding:0;}
  .sticky-swatches button:hover{transform:scale(1.15);}
  /* universal voice capture — biggest, easiest target, true bottom-right corner (wrist-friendly) */
  #voiceFab{position:fixed;right:16px;bottom:16px;z-index:84;border:none;border-radius:999px;width:56px;height:56px;font-size:24px;background:linear-gradient(135deg,var(--peri),var(--sakura));color:#fff;box-shadow:0 8px 22px rgba(150,120,190,.4);cursor:pointer;touch-action:manipulation;transition:transform var(--dur-2,.2s) var(--ease-spring,cubic-bezier(.2,.8,.3,1)),box-shadow var(--dur-2,.2s) var(--ease,ease);}
  #voiceFab:hover{transform:scale(1.07);}
  #voiceFab:active{transform:scale(.90);box-shadow:0 4px 14px rgba(150,120,190,.4);}
  #voiceFab.listening{animation:voicePulse 1.1s ease-in-out infinite;}
  @keyframes voicePulse{0%,100%{box-shadow:0 8px 22px rgba(150,120,190,.4);}50%{box-shadow:0 8px 30px rgba(255,158,216,.75);transform:scale(1.05);}}
  /* notepad + timer bumped up one row so they clear the voice button */
  #addStickyBtn{position:fixed;right:80px;bottom:16px;z-index:83;border:none;border-radius:999px;width:46px;height:46px;font-size:18px;background:linear-gradient(135deg,var(--peri),var(--sakura));color:#fff;box-shadow:var(--shadow);cursor:pointer;touch-action:manipulation;transition:transform var(--dur-2,.2s) var(--ease-spring,cubic-bezier(.2,.8,.3,1)),box-shadow var(--dur-2,.2s) var(--ease,ease);}
  #addStickyBtn:hover{transform:scale(1.07);}
  #addStickyBtn:active{transform:scale(.90);}
  /* floating timer (rest + pomodoro focus) */
  #restBtn{position:fixed;right:16px;bottom:80px;z-index:83;border:1.5px solid var(--line-2);border-radius:999px;width:46px;height:46px;font-size:18px;background:#fff;box-shadow:var(--shadow);cursor:pointer;touch-action:manipulation;transition:transform var(--dur-2,.2s) var(--ease-spring,cubic-bezier(.2,.8,.3,1)),box-shadow var(--dur-2,.2s) var(--ease,ease);}
  #restBtn:hover{transform:scale(1.07);}
  #restBtn:active{transform:scale(.90);}
  #restWidget{position:fixed;right:16px;bottom:134px;z-index:82;width:236px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 32px rgba(120,110,160,.26);padding:12px;transform-origin:bottom right;}
  #restWidget.hidden{display:none;}
  #restWidget:not(.hidden){animation:softPop .2s var(--ease,cubic-bezier(.22,.61,.36,1));}
  .ring-time{font-family:var(--display);font-size:26px;color:var(--ink);text-align:center;}
  .timer-ic{border:none;background:none;color:var(--ink-soft);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:7px;}
  .timer-ic:hover{background:#f3eef6;color:var(--sakura-deep);}
  /* calendar */
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
  .cal-dow{font-size:11px;text-align:center;color:var(--lav-deep);font-weight:600;padding:2px 0;}
  .cal-grid{min-width:0;}
  .cal-cell{min-width:0;min-height:94px;border:1px solid var(--line);border-radius:12px;padding:5px 6px;background:rgba(255,255,255,.5);display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background .15s,border-color .15s,transform .12s;}
  .cal-cell:hover{border-color:var(--lav);}
  .cal-cell.other{opacity:.4;}
  .cal-cell.today{border-color:var(--peri);box-shadow:inset 0 0 0 2px rgba(117,138,198,.25);}
  .cal-cell.drag-over{background:rgba(169,143,224,.18);border-color:var(--lav-deep);transform:scale(1.03);}
  .cal-daynum{font-size:11.5px;color:#8a7d92;align-self:flex-end;line-height:1;}
  .cal-cell.today .cal-daynum{color:var(--peri-deep);font-weight:700;}
  .cal-ev{font-size:11px;line-height:1.45;padding:2px 7px;border-radius:8px;color:#3a3550;cursor:grab;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .12s,opacity .12s,box-shadow .12s;}
  .cal-ev:hover{box-shadow:0 2px 8px rgba(120,110,160,.28);}
  .cal-ev:active{cursor:grabbing;} .cal-ev.dragging{opacity:.45;transform:scale(.95);}
  .cal-stream{font-size:10.5px;line-height:1.4;padding:2px 7px;border-radius:8px;background:rgba(255,158,216,.16);color:var(--sakura-deep);border-left:3px solid var(--sakura);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s;}
  .cal-stream:hover{background:rgba(255,158,216,.30);}
  .cal-bday{font-size:10.5px;line-height:1.4;padding:2px 7px;border-radius:8px;background:rgba(201,184,240,.20);color:#6a52a6;border-left:3px solid var(--lav);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s;}
  .cal-bday:hover{background:rgba(201,184,240,.36);}
  /* week view — horizontal list (date left, events right) */
  .cal-wk-list{display:flex;flex-direction:column;}
  .cal-wk-row{display:flex;gap:16px;align-items:flex-start;padding:12px 6px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:10px;transition:background .12s;}
  .cal-wk-row:hover{background:rgba(169,143,224,.07);}
  .cal-wk-row:last-child{border-bottom:none;}
  .cal-wk-row.today{background:rgba(117,138,198,.07);}
  .cal-wk-label{flex:0 0 68px;text-align:center;padding-top:2px;}
  .cal-wk-dn{font-size:10px;font-weight:700;color:var(--lav-deep);text-transform:uppercase;letter-spacing:.06em;display:block;}
  .cal-wk-row.today .cal-wk-dn{color:var(--sakura-deep);}
  .cal-wk-dd{font-size:28px;font-weight:700;color:var(--ink);display:block;line-height:1;margin:2px 0;}
  .cal-wk-row.today .cal-wk-dd{color:var(--peri-deep);}
  .cal-wk-mo{font-size:10px;color:var(--ink-soft);display:block;}
  .cal-wk-events{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;min-height:36px;justify-content:center;}
  .cal-wk-ev{font-size:13px;line-height:1.45;padding:6px 12px;border-radius:8px;color:#3a3550;white-space:normal;word-break:break-word;cursor:pointer;transition:filter .12s;}
  .cal-wk-ev:hover{filter:brightness(.93);}
  .cal-wk-stream{font-size:13px;line-height:1.45;padding:6px 12px;border-radius:8px;background:rgba(255,158,216,.2);color:var(--sakura-deep);border-left:3px solid var(--sakura);white-space:normal;word-break:break-word;cursor:pointer;}
  .cal-wk-bday{font-size:13px;line-height:1.45;padding:6px 12px;border-radius:8px;background:rgba(201,184,240,.22);color:#6a52a6;border-left:3px solid var(--lav);white-space:normal;word-break:break-word;cursor:pointer;}
  .cal-wk-time{font-size:10.5px;font-weight:600;opacity:.7;margin-right:5px;}
  .cal-wk-empty{font-size:11px;color:var(--muted);padding:2px 0;}
  /* agenda / reminders */
  .agenda-row{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line);font-size:13px;}
  .agenda-row:last-child{border-bottom:none;}
  .agenda-when{flex:0 0 auto;min-width:92px;font-size:11.5px;color:var(--ink-soft);}
  .agenda-when b{color:var(--sakura-deep);font-size:12px;}
  .agenda-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
  @media(max-width:600px){ .agenda-cols{grid-template-columns:1fr!important;} }
  /* multi-day continuous bar */
  .cal-span{font-size:11px;line-height:18px;height:18px;padding:0 7px;color:#3a3550;cursor:grab;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 -12px;border-radius:0;transition:opacity .12s,box-shadow .12s;}
  .cal-span:hover{box-shadow:0 2px 8px rgba(120,110,160,.28);}
  .cal-span.lcap{margin-left:-6px;border-top-left-radius:8px;border-bottom-left-radius:8px;}
  .cal-span.rcap{margin-right:-6px;border-top-right-radius:8px;border-bottom-right-radius:8px;}
  .cal-span.dragging{opacity:.45;}
  .cal-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;}
  /* glowing petal cursor trail */
  .petal{position:fixed;pointer-events:none;z-index:9000;border-radius:150% 0 150% 0;will-change:transform,opacity;opacity:0;}
  @keyframes petalFloat{ 0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.55);} 18%{opacity:var(--o,.7);} 100%{opacity:0;transform:translate(var(--dx,12px),var(--dy,60px)) rotate(var(--dr,200deg)) scale(1);} }
  /* falling-snow background (interactive canvas) — behind every panel, on the blue gradient */
  #snowCanvas{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block;}
  body.calm #snowCanvas{display:none;}
  @media (prefers-reduced-motion:reduce){ #snowCanvas{display:none;} }
  /* trends chart */
  .trchart{width:100%;height:auto;display:block;}
  .tr-line{stroke-dashoffset:0;} .tr-area{opacity:1;} .tr-bar,.tr-stem,.tr-dot{transform:none;}
  .tr-frame{background:linear-gradient(180deg,#f6f2fc,#f3eefb);border:1px solid var(--line);border-radius:16px;padding:14px 14px 10px;}
  .tr-frame-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;flex-wrap:wrap;}
  .tr-title{font-family:var(--display);font-size:12.5px;letter-spacing:.08em;color:#9b96b6;text-transform:uppercase;display:flex;align-items:center;gap:6px;}
  .tr-legend{display:flex;flex-wrap:wrap;gap:5px 12px;}
  .tr-leg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-soft);}
  .tr-leg .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
  .tr-stat{text-align:center;font-size:12.5px;color:#8b86a6;margin-top:6px;}
  .tr-range{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;}
  .tr-range button{border:none;background:#fff;color:var(--ink-soft);font-size:12px;padding:5px 12px;cursor:pointer;}
  .tr-range button.on{background:#fde2f2;color:var(--sakura-deep);font-weight:700;}
  /* kiko AI pet */
  #kiko{position:fixed;bottom:14px;left:90px;z-index:81;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;filter:drop-shadow(0 5px 7px rgba(120,110,160,.4));}
  #kiko:active{cursor:grabbing;}
  #kiko .kiko-sprite{image-rendering:pixelated;pointer-events:none;}
  #kikoBubble{position:fixed;left:90px;bottom:92px;z-index:81;max-width:200px;background:#fff;border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:4px;padding:8px 12px;font-size:12.5px;color:var(--ink);box-shadow:var(--shadow);cursor:pointer;}
  #kikoChat{position:fixed;right:18px;bottom:18px;z-index:84;width:310px;max-width:calc(100vw - 36px);height:440px;max-height:74vh;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 42px rgba(120,110,160,.32);display:flex;flex-direction:column;overflow:hidden;}
  #kikoChat.hidden,#kikoBubble.hidden,#kiko.hidden{display:none!important;}
  .kiko-head{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,#eef2fb,#fdeaf6);}
  .kiko-av{width:36px;height:36px;border-radius:999px;background:#eef2fb center/cover no-repeat url("Kiko%20Sit.png");border:1px solid var(--line);flex:0 0 auto;}
  .kiko-log{flex:1;overflow:auto;overscroll-behavior:contain;padding:12px;display:flex;flex-direction:column;gap:8px;}
  .kiko-msg{font-size:12.5px;line-height:1.45;padding:8px 11px;border-radius:14px;max-width:86%;white-space:pre-wrap;word-break:break-word;}
  .kiko-msg.me{align-self:flex-end;background:linear-gradient(135deg,var(--peri),var(--sakura));color:#fff;border-bottom-right-radius:4px;}
  .kiko-msg.pet{align-self:flex-start;background:var(--panel-soft);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px;}
  .kiko-input{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line);align-items:flex-end;}
  /* Ask Kiko tab */
  .kiko-skills{display:flex;flex-wrap:wrap;gap:8px;}
  .kiko-skill{border:1.5px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink-soft);font-size:13px;padding:8px 13px;cursor:pointer;transition:transform .12s,background .15s,border-color .15s,color .15s;}
  .kiko-skill:hover{background:#fde2f2;border-color:var(--sakura);color:var(--sakura-deep);}
  .kiko-skill:active{transform:scale(.95);}
  .kiko-tabchat{display:flex;flex-direction:column;}
  .kiko-tabchat .kiko-log{max-height:none;height:50vh;min-height:300px;}
  .kiko-tabchat .kiko-input{border-top:1px solid var(--line);border-radius:0 0 12px 12px;}
  /* modal */
  .modal-bg{position:fixed;inset:0;background:rgba(70,66,100,.30);z-index:90;display:flex;align-items:flex-start;justify-content:center;padding:30px 16px;overflow:auto;}
  .modal{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 50px rgba(90,80,140,.3);width:100%;max-width:min(92vw,560px);padding:20px;}
  /* modal safety net: no input row can ever poke past the panel edge (iOS date/time inputs refuse to shrink) */
  .modal div[style*="display:flex"]{flex-wrap:wrap;}
  /* iOS HARD fix: date/time inputs have a NATIVE min width that ignores min/max-width & flex —
     stripping the appearance makes them size like text inputs (pickers still open on tap) */
  input[type="date"],input[type="time"]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;background:#fff;}
  select.inp{max-width:100%;}
  .modal .inp{min-width:0;}
  .modal .card-head>.btn{font-size:18px;padding:6px 8px;}
  /* ===== v4: images in chat · resizable chat · dual-mode swap · art vault · toolbox ===== */
  .kimg-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
  .kimg{max-width:160px;max-height:120px;border-radius:10px;border:1px solid var(--line);object-fit:cover;cursor:zoom-in;}
  #kikoChatGrip{position:absolute;left:6px;top:6px;cursor:nwse-resize;font-size:13px;color:var(--muted);padding:4px;user-select:none;touch-action:none;z-index:2;}
  #kikoChatGrip:hover{color:var(--peri-deep);}
  #kikoChat .kiko-log{height:var(--kchat-h,300px);max-height:72vh;}
  #view.mode-anim{animation:modeSwap .45s cubic-bezier(.22,.61,.36,1) both;}   /* overridden below (iPHONE-MINIMAL MOTION redefines modeSwap + this selector) */
  .brand{cursor:pointer;} .brand:active .brand-logo{transform:rotate(-12deg) scale(.92);} .brand-logo{transition:transform .25s;}
  .mode-pill{font-size:9px;font-weight:800;letter-spacing:.06em;padding:2px 8px;border-radius:999px;vertical-align:middle;margin-left:6px;}
  .mode-creator{background:#fde2f2;color:var(--sakura-deep);} .mode-health{background:#e6ecfb;color:var(--peri-deep);}
  .vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
  .vault-item{border:1px solid var(--line);border-radius:12px;background:var(--panel-soft);padding:8px;position:relative;font-size:12px;display:flex;flex-direction:column;gap:6px;min-height:64px;}
  .vault-item img{width:100%;height:110px;object-fit:cover;border-radius:8px;}
  .vault-item.picked{outline:3px solid var(--sakura);box-shadow:0 0 18px rgba(255,158,216,.45);}
  .vault-item .x{position:absolute;top:4px;right:4px;background:rgba(255,255,255,.85);border-radius:50%;width:20px;height:20px;font-size:11px;line-height:1;padding:0;border:1px solid var(--line);}
  .tb-steps .listrow{align-items:flex-start;}
  /* === 🏠 dual-mode home (hero clock · check-ins · glance) — Mifu's 2026-06 spec === */
  .home-fixed{display:flex;flex-direction:column;gap:14px;margin-bottom:14px;}
  .hero-card{padding:20px;}
  .hero-top{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
  .hero-ava{width:84px;height:84px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#fde2f2,#e6ecfb);flex:none;}
  .hero-title h1{font-family:var(--display);font-size:26px;line-height:1.15;}
  .hero-clockwrap{margin-left:auto;text-align:right;}
  .hero-clock{font-family:var(--display);font-size:54px;font-weight:700;letter-spacing:.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
  .hero-date{color:var(--lav-deep);font-size:14px;margin-top:4px;font-weight:600;}
  .ci-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;}
  .ci-btn{border:1.5px solid var(--line-2);border-radius:14px;background:#fff;padding:12px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:11.5px;color:var(--ink-soft);transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);min-height:74px;text-align:center;line-height:1.3;}
  .ci-btn .ci-ic{font-size:20px;}
  .ci-btn:hover{border-color:var(--sakura);}
  .ci-btn.on{background:linear-gradient(135deg,#fde2f2,#f3ecfb);border-color:var(--sakura);color:var(--sakura-deep);box-shadow:0 2px 10px rgba(255,158,216,.25);}
  .glance-head{display:flex;gap:12px;align-items:center;margin-bottom:14px;}
  .glance-fox{font-size:28px;}
  .glance-head h2{font-family:var(--display);font-size:20px;}
  .glance-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:stretch;}   /* Focus gets more room than Notices — it's the answer, not a peer list (2026-07-30) */
  @media(max-width:860px){ .glance-cols{grid-template-columns:1fr;} .hero-clockwrap{margin-left:0;text-align:left;width:100%;} }
  .gcard-hero{border:1.5px solid rgba(255,158,216,.45);background:linear-gradient(160deg,#fff,#fff6fb);box-shadow:0 4px 16px rgba(236,116,191,.12);}
  .gcard-hero>.gh-label{font-size:11px;font-weight:800;color:var(--sakura-deep);}
  .gcard-quiet{opacity:.88;}
  .gcard-quiet>.gh-label{font-size:9.5px;}
  .gcard{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff;min-width:0;}
  /* section labels recede in soft muted tone instead of shouting bright pink (less colour noise) */
  .sec-label{font-weight:700;letter-spacing:.08em;color:var(--muted);margin-bottom:8px;font-size:10.5px;text-transform:uppercase;}
  .kn-row{display:flex;gap:9px;align-items:center;padding:5px 0;font-size:12.5px;}
  .kn-dot{width:7px;height:7px;border-radius:50%;background:var(--sakura);flex:none;}
  .focus-row{display:flex;gap:10px;align-items:center;width:100%;background:#fdf0fb;border:1px solid #f8dcef;border-radius:12px;padding:10px 12px;font-size:12.5px;color:var(--ink);margin-top:8px;transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);cursor:pointer;}
  .focus-row:hover{border-color:var(--sakura);}
  .fr-chev{color:var(--muted);font-size:16px;flex:none;}
  .got-this{text-align:center;font-family:var(--display);font-size:14px;color:var(--sakura-deep);margin:14px 0 0;}
  .hs-row{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px;}
  .hs-row:last-of-type{border-bottom:none;}
  .hs-l{min-width:92px;color:var(--ink-soft);}
  .hs-v{font-weight:700;min-width:80px;}
  .hs-bar{flex:1;height:7px;border-radius:999px;background:#eef0fa;overflow:hidden;}
  .hs-bar>span{display:block;height:100%;border-radius:999px;}
  @media(max-width:640px){ .hero-clock{font-size:40px;} .hero-title h1{font-size:21px;} .ci-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));} }
  /* event tier chips — sakura proximity system (red ONLY for genuinely urgent) */
  .tier-today{background:#fde9f5;color:#c95d9e;}
  .tier-tmrw{background:var(--sakura);color:#fff;}
  .tier-week{background:#dceefb;color:#3e7fb8;}
  .tier-month{background:#ece2fb;color:var(--lav-deep);}
  .tier-later{background:#eceef5;color:#8b8fa8;}
  .tier-urgent{background:#fde4e4;color:#c0566a;}
  /* === 🎨 art studio (ported from Eggie OS, snowfox palette) === */
  .art-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;}
  .art-cols>*{min-width:0;}
  .art-span2{grid-column:1/-1;}
  @media(max-width:860px){ .art-cols{grid-template-columns:1fr;} }
  /* Toolbox 2-column grid */
  .tb-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .tb-grid>*{min-width:0;}
  .tb-span2{grid-column:1/-1;}
  @media(max-width:720px){.tb-grid{grid-template-columns:1fr;}}
  .hbtn{text-align:left;border:1.5px solid var(--line-2);border-radius:13px;padding:9px 11px;background:#fff;transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);}
  .hbtn.done{border-color:#bfe9d8;background:#f1fbf6;} .hbtn:hover{border-color:var(--peri);}
  .check{width:18px;height:18px;border-radius:7px;border:2px solid var(--line-2);background:#fff;flex:none;} .check.on{background:var(--mint);border-color:var(--mint);}
  .art-sw{display:flex;border-radius:12px;overflow:hidden;border:1px solid var(--line);height:62px;}
  .art-sw>button{flex:1;border:none;cursor:pointer;position:relative;transition:transform var(--dur-2) var(--ease);color:#fff;font:inherit;font-size:10px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;text-shadow:0 1px 2px rgba(0,0,0,.45);}
  .art-sw>button:hover{flex:1.4;}
  .art-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel-soft);border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12px;}
  .art-tim{font-family:var(--display);font-size:48px;text-align:center;letter-spacing:.02em;color:var(--ink);}
  .art-prompt{background:linear-gradient(135deg,#fdf0fb,#eef2fb);border:1px solid var(--line);border-radius:14px;padding:16px;font-family:var(--display);font-size:18px;line-height:1.5;color:var(--sakura-deep);text-align:center;}
  .art-grid-wrap{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
  .idea-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
  .idea-card{position:relative;border-radius:4px 14px 14px 14px;padding:12px 12px 32px;font-size:12.5px;line-height:1.5;min-height:86px;box-shadow:0 3px 10px rgba(90,100,150,.14);word-break:break-word;color:#4a4f6a;}
  .idea-card .ic-tools{position:absolute;bottom:5px;right:6px;display:flex;gap:2px;opacity:.7;}
  .ft-ic{border:none;background:none;cursor:pointer;font-size:13px;padding:2px;color:var(--muted);} .ft-ic:hover{color:var(--sakura-deep);}
  .inspo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
  .inspo-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:0 3px 10px rgba(90,100,150,.10);}
  .inspo-card.done{opacity:.55;}
  .inspo-thumb{height:104px;background:#eef2fb center/cover no-repeat;display:grid;place-items:center;}
  .inspo-body{padding:9px 11px;display:flex;flex-direction:column;gap:4px;flex:1;}
  .mb-board{position:relative;background:#f6f8ff;border:1px solid var(--line);border-radius:14px;overflow:hidden;height:520px;background-image:radial-gradient(#dfe5f4 1px,transparent 1px);background-size:22px 22px;}
  .mb-board.max{height:auto;flex:1;width:100%;border-radius:12px;}
  .mb-full{position:fixed;inset:0;z-index:9993;background:var(--bg);padding:12px;display:flex;flex-direction:column;gap:10px;}
  .mb-card{position:absolute;border-radius:12px;box-shadow:0 4px 14px rgba(90,100,150,.18);border:1px solid var(--line);background:#fff;touch-action:none;cursor:grab;overflow:hidden;}
  .mb-card:active{cursor:grabbing;}
  .mb-card.img{background-size:cover;background-position:center;}
  .mb-card.note{background:#fff7da;border-color:#f0e3a8;}
  .mb-card.note textarea{width:100%;height:100%;border:none;background:none;resize:none;outline:none;padding:9px;font:inherit;font-size:12.5px;color:#5a5230;cursor:text;}
  .mb-card.swatch{display:flex;align-items:flex-end;justify-content:center;}
  .mb-card .mb-x{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.5);color:#fff;border:none;border-radius:7px;width:20px;height:20px;cursor:pointer;font-size:11px;line-height:1;opacity:0;transition:opacity .12s;}
  .mb-card:hover .mb-x{opacity:1;}
  .mb-card .mb-rz{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;color:#9aa5c8;font-size:11px;display:grid;place-items:center;}
  .mb-card .mb-hex{background:rgba(0,0,0,.4);color:#fff;font-size:10px;padding:2px 6px;border-radius:6px;margin-bottom:5px;}
  .res-grip{cursor:grab;touch-action:none;color:var(--muted);font-size:14px;padding:0 2px;user-select:none;}
  .res-grip:active{cursor:grabbing;}
  @media(max-width:640px){ .art-tim{font-size:38px;} .mb-board{height:420px;} .idea-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));} .inspo-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));} }
  .spice{display:flex;gap:3px;align-items:center;}
  .spice button{border:none;background:none;font-size:16px;opacity:.35;cursor:pointer;padding:2px;} .spice button.on{opacity:1;}
  .jr-cell{min-width:0;min-height:72px;border:1px solid var(--line);border-radius:10px;padding:4px 6px;display:flex;flex-direction:column;gap:2px;transition:transform .12s,border-color .15s;}
  .jr-cell:hover{border-color:var(--lav);transform:scale(1.02);}
  .jr-cell.today{border-color:var(--peri);box-shadow:inset 0 0 0 2px rgba(117,138,198,.25);}
  .jr-meta{font-size:9px;color:var(--ink-soft);line-height:1.3;display:flex;gap:4px;flex-wrap:wrap;}
  .jr-dot{display:inline-block;width:9px;height:9px;border-radius:3px;vertical-align:middle;margin-right:3px;}
  @media(max-width:640px){ .jr-cell{min-height:54px;padding:3px 4px;} .jr-meta{font-size:8px;} }
  /* ============================================================
     UI FOUNDATION 2.0 — additive layer: motion · focus · loading · polish · responsive.
     Enhances existing classes, preserves the snowfox aesthetic. All motion auto-disables
     under prefers-reduced-motion and body.calm (global rules above). 2026-06-14.
     ============================================================ */
  :root{
    --dur-1:.12s; --dur-2:.2s; --dur-3:.34s;
    --ease:cubic-bezier(.22,.61,.36,1);          /* gentle ease-out */
    --ease-spring:cubic-bezier(.2,.8,.3,1);      /* soft overshoot */
    --elev-1:0 4px 14px rgba(120,130,200,.14);
    --elev-2:0 12px 30px rgba(120,130,200,.20);
  }
  /* ---- SPACING SYSTEM — one even gap token across every page; tighter on tablet/phone ---- */
  :root{ --gap:22px; }
  @media (max-width:1040px){ :root{ --gap:16px; } }
  @media (max-width:560px){ :root{ --gap:13px; } }
  .page{ max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:var(--gap); }
  .page.narrow{ max-width:1100px; } .page.tight{ max-width:1100px; }
  /* Uniform page width: a few pages (Food/Care/Gachas/Script/Studio/Bunny) don’t use the .page wrapper
     and would otherwise fill the whole #view (1180) while .page pages sit at 1100 — so tabs jumped width.
     Cap every page child to the same 1100. No !important, so the deliberately-narrow Focus + Art views
     keep their own inline width; the full-screen mood board (.mb-full) is excluded. */
  main#view > *:not(.mb-full){ max-width:1100px!important; margin-left:auto!important; margin-right:auto!important; }
  /* Settings: two side-by-side columns of "bubbles" (like the homepage). Stacks on narrow screens. */
  .set-cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start; }
  .set-col{ display:flex; flex-direction:column; gap:var(--gap); min-width:0; }
  .set-head-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin:0 2px 10px; }
  .set-h{ font-family:var(--display); font-size:16px; color:var(--lav-deep); margin:0; letter-spacing:.2px; }
  @media (max-width:760px){ .set-cols{ grid-template-columns:1fr; } .set-head-row{ display:none; } }
  .col, .health-col{ gap:var(--gap) !important; }
  .grid-home, .health-cols, .care-cols, .glance-cols, .deck{ gap:var(--gap) !important; }
  .home-fixed{ gap:var(--gap) !important; margin-bottom:var(--gap) !important; }
  .grid-modular{ gap:var(--gap) !important; }
  .disc{ margin-top:var(--gap); }
  /* even gap between the direct children of every page — covers pages that render bare panels
     (planner, calendar, health, money…) the same as the .page-wrapped ones. Block margins collapse,
     so this never doubles up with a wrapper's own gap. */
  #view > * + *{ margin-top:var(--gap); }
  /* ---- A11Y: visible keyboard focus on EVERY interactive element (was inputs-only) ---- */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
  select:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible,
  .tab:focus-visible, .chip:focus-visible, .btn:focus-visible, .btn-grad:focus-visible,
  .chiptog:focus-visible, .sitebtn:focus-visible, .scale button:focus-visible, .seg button:focus-visible,
  .focus-row:focus-visible, .ci-btn:focus-visible, .x:focus-visible{
    outline:2.5px solid var(--peri-deep); outline-offset:2px;
  }
  :focus:not(:focus-visible){ outline:none; }            /* no ring on mouse/touch, only keyboard */
  .inp:focus-visible{ outline:none; }                    /* inputs keep their own soft ring */
  .sr-only{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
  /* ---- TACTILE POLISH — whisper-subtle elevation on hover (iOS-minimal, no sheen) ---- */
  @media (hover:hover) and (pointer:fine){
    .btn:hover{ box-shadow:var(--elev-1); }
    .btn-grad:hover{ box-shadow:0 3px 10px rgba(150,120,200,.18); }
    .panel.interactive:hover, .soft-card.interactive:hover, .focus-row:hover{ box-shadow:var(--elev-1); }
    .focus-row:hover{ background:#fdf6fb; }
  }
  .panel.interactive, .soft-card.interactive, .focus-row{ transition:box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
  /* toast: small, smooth slide-up + fade — no spring/overshoot */
  .toast{ transform:translateX(-50%) translateY(6px); transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
  .toast.show{ transform:translateX(-50%) translateY(0); }
  /* ---- LOADING STATES ---- */
  .skeleton{ position:relative; overflow:hidden; background:#eceaf4; border-radius:10px; }
  .skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:skshimmer 1.25s ease-in-out infinite; }
  @keyframes skshimmer{ 100%{ transform:translateX(100%);} }
  .sk-line{ height:12px; margin:9px 0; border-radius:7px; }
  .sk-title{ height:16px; width:55%; margin:0 0 14px; border-radius:8px; }
  .sk-card{ padding:16px; }
  .spinner{ display:inline-block; width:18px; height:18px; border-radius:50%;
    border:2.5px solid rgba(117,138,198,.28); border-top-color:var(--peri-deep);
    animation:spin .7s linear infinite; vertical-align:-3px; }
  .spinner.lg{ width:30px; height:30px; border-width:3px; }
  @keyframes spin{ to{ transform:rotate(360deg);} }
  .loading-row{ display:inline-flex; align-items:center; gap:9px; color:var(--ink-soft); font-size:13px; }
  /* keep a usable, non-"frozen-mid-spin" cue when motion is off — a uniform faint ring */
  @media (prefers-reduced-motion:reduce){ .skeleton{ background:#e7e4f0; } .spinner{ border-color:rgba(117,138,198,.5); opacity:.75; } }
  body.calm .skeleton{ background:#e7e4f0; }
  body.calm .spinner{ border-color:rgba(117,138,198,.5); }
  /* ---- EMPTY STATE ---- */
  .empty{ text-align:center; padding:28px 18px; color:var(--ink-soft); }
  .empty .empty-emoji{ font-size:30px; display:block; margin-bottom:8px; opacity:.92; }
  .empty .empty-title{ font-family:var(--display); font-size:15px; color:var(--ink); margin-bottom:4px; }
  .empty .empty-msg{ font-size:12.5px; max-width:34ch; margin:0 auto 12px; line-height:1.55; }
  .boot-sk{ max-width:1320px; margin:0 auto; padding:18px; display:flex; flex-direction:column; gap:16px; }
  /* ---- PROGRESS (accessible target meters) ---- */
  .progress{ display:block; }
  .progress-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
  .progress-label{ font-size:12.5px; color:var(--ink-soft); font-weight:600; }
  .progress-val{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .progress-val b{ color:var(--ink); font-weight:700; }
  .progress-track{ position:relative; height:9px; border-radius:99px; background:var(--line); overflow:hidden; }
  .progress-fill{ position:absolute; top:0; bottom:0; left:0; border-radius:99px;
    background:linear-gradient(90deg,var(--peri),var(--peri-deep)); transition:width var(--dur-3) var(--ease); }
  .progress.tone-mint .progress-fill{ background:linear-gradient(90deg,var(--mint),#4fae93); }
  .progress.tone-sak  .progress-fill{ background:linear-gradient(90deg,var(--sakura),var(--sakura-deep)); }
  .progress.tone-lav  .progress-fill{ background:linear-gradient(90deg,var(--lav),var(--lav-deep)); }
  .progress.tone-peach .progress-fill{ background:linear-gradient(90deg,#f7c39a,var(--peach)); }
  .progress.is-complete .progress-fill{ background:linear-gradient(90deg,var(--mint),#4fae93); }
  .progress.is-over .progress-track{ box-shadow:inset 0 0 0 1.5px var(--peach); }
  .progress.is-over .progress-fill{ background:linear-gradient(90deg,var(--peach),#e0824f); }
  .progress.is-indeterminate .progress-fill{ width:35%!important; left:0; animation:progslide 1.15s ease-in-out infinite; }
  @keyframes progslide{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(320%); } }
  @media (prefers-reduced-motion:reduce){ .progress.is-indeterminate .progress-fill{ animation:none; left:0; } }
  body.calm .progress.is-indeterminate .progress-fill{ animation:none; left:0; }
  /* ---- STAT (metric card body) ---- */
  .stat{ display:flex; flex-direction:column; gap:2px; }
  .stat-label{ display:flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.03em;
    text-transform:uppercase; color:var(--muted); font-weight:700; }
  .stat-main{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
  .stat-value{ font-family:var(--display); font-size:clamp(22px,4.5vw,28px); line-height:1.05;
    color:var(--ink); font-variant-numeric:tabular-nums; }
  .stat-unit{ font-size:13px; color:var(--ink-soft); font-weight:600; }
  .stat-delta{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700;
    padding:2px 8px; border-radius:99px; background:var(--panel-soft); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .stat-delta.is-good{ background:rgba(111,195,171,.16); color:#3f9e83; }
  .stat-delta.is-bad{ background:rgba(243,169,120,.20); color:#cf7637; }
  .stat-delta.is-flat{ background:var(--line); color:var(--muted); }
  .stat-hint{ font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.4; }
  /* ---- SWITCH (accessible toggle) ---- */
  .switch-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
  .switch-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  .switch-label{ font-size:13.5px; color:var(--ink); font-weight:600; }
  .switch-hint{ font-size:11.5px; color:var(--muted); line-height:1.4; }
  .switch{ position:relative; flex:0 0 auto; width:46px; height:27px; border-radius:99px; border:none;
    cursor:pointer; padding:0; background:var(--line); transition:background var(--dur-2) var(--ease);
    -webkit-tap-highlight-color:transparent; }
  .switch::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%;
    background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--dur-2) var(--ease-spring); }
  .switch[aria-checked="true"]{ background:linear-gradient(90deg,var(--peri),var(--peri-deep)); }
  .switch[aria-checked="true"]::after{ transform:translateX(19px); }
  .switch[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }
  /* ---- RESPONSIVE REFINEMENTS (mobile · tablet · desktop) ---- */
  .hero-title h1{ font-size:clamp(20px,5vw,30px); }
  @media (min-width:641px) and (max-width:1040px){ main{ padding:14px; } .panel{ padding:14px; } }   /* tablet: trim empty space, even it out */
  @media (max-width:560px){
    /* phone tab bar scrolls sideways instead of stacking into several rows */
    #nav{ width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; scroll-snap-type:x proximity; }
    #nav::-webkit-scrollbar{ display:none; }
    #nav .tab{ flex:0 0 auto; scroll-snap-align:start; }
    #rail{ padding:8px 14px; } main{ padding:14px; } .panel{ padding:14px; }
  }
  @media (pointer:coarse){   /* generous touch targets for small controls */
    .tab{ padding:8px 14px; }
    .chip{ min-height:34px; display:inline-flex; align-items:center; }
    .x{ min-width:34px; min-height:34px; display:inline-flex; align-items:center; justify-content:center; }
    .seg button{ padding:8px 13px; }
    .scale button{ min-width:44px; min-height:44px; }   /* mood/energy ratings — a primary health flow was 34px */
    .step{ min-width:44px; min-height:44px; }   /* hcount +/- steppers — was 34px, 2026-07-30 */
    .pln-qbar-more{ min-width:44px; min-height:44px; }   /* planner quick-add "more" toggle — was 38x34px, 2026-07-30 */
  }
  /* ---- iPHONE-MINIMAL MOTION (overrides the bolder entrance/press animations above):
     small distances, quick, smooth ease-out — no overshoot, no big stagger. Redefining
     these keyframes by name replaces the earlier versions globally. ---- */
  @keyframes viewFade{ from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
  @keyframes panelIn{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
  @keyframes softPop{ from{opacity:0;transform:translateY(3px) scale(.99)} to{opacity:1;transform:none} }
  #view.anim{ animation:viewFade .24s var(--ease) both; }
  #view.anim>*{ animation:panelIn .26s var(--ease) both; }
  #view.anim>*:nth-child(2){ animation-delay:.02s }
  #view.anim>*:nth-child(3){ animation-delay:.04s }
  #view.anim>*:nth-child(4){ animation-delay:.05s }
  #view.anim>*:nth-child(n+5){ animation-delay:.06s }
  .modal{ animation:softPop .2s var(--ease); }
  #kikoChat:not(.hidden){ animation:softPop .2s var(--ease); }
  .modal-bg{ animation:fadeIn .14s ease; }
  /* animated close — closeModal() adds .closing, waits for this, then removes the node (was an instant snap) */
  @keyframes fadeOut{ from{opacity:1} to{opacity:0} }
  @keyframes modalPopOut{ from{opacity:1;transform:none} to{opacity:0;transform:translateY(6px) scale(.97)} }
  @keyframes sheetIn{ from{transform:translateY(100%)} to{transform:translateY(0)} }
  @keyframes sheetOut{ from{transform:translateY(0)} to{transform:translateY(100%)} }
  .modal-bg.closing{ animation:fadeOut .16s ease both; }
  .modal.closing{ animation:modalPopOut .16s var(--ease) both; }
  /* gentler, quicker press feedback (was scale .95–.96) */
  .btn:active,.btn-grad:active{ transform:scale(.98); }
  .tab:active{ transform:scale(.97); }
  .scale button:active,.chiptog:active,.sitebtn:active{ transform:scale(.97); }
  .pill{ transition:transform var(--dur-1) var(--ease); }
  /* mode swap: smaller, quicker fade (was a 10px slide + scale over .45s) */
  @keyframes modeSwap{ from{opacity:0;transform:translateY(5px);} to{opacity:1;transform:none;} }
  #view.mode-anim{ animation:modeSwap .26s var(--ease) both; }
  /* ---- iOS VIEW TRANSITIONS: real old→new cross-fade on tab change (compositor, never through blank).
     Fast + subtle because tab-switching is high-frequency. JS gates it off under calm/reduced-motion. ---- */
  @supports (view-transition-name:v){ #view{ view-transition-name:mifu-view; } }
  /* The UA blends the old/new snapshots with mix-blend-mode:plus-lighter (additive). That only resolves
     back to a solid image while old.opacity + new.opacity === 1 on EVERY frame. Fading out over .14s on
     one curve while fading in over .3s on another broke that invariant — the sum dipped to 0.81, so the
     view went ~19% translucent for the whole swap and washed out toward the page background.
     Fix: opacity cross-fades linear over one shared duration (complementary by construction); the slide
     keeps its own longer, springier curve. Separate properties, separate animations, same snapshot. */
  :root{ --vt-fade:.18s; }
  ::view-transition-old(mifu-view){ animation:mifuVtFadeOut var(--vt-fade) linear both, vtOut .14s var(--ease) both; }
  ::view-transition-new(mifu-view){ animation:mifuVtFadeIn var(--vt-fade) linear both, vtIn .3s var(--ease-spring) both; }
  ::view-transition-old(root),::view-transition-new(root){ animation-duration:.14s; animation-timing-function:linear; }
  @keyframes vtOut{ to{transform:translateY(-6px);} }
  @keyframes vtIn{ from{transform:translateY(8px);} }
  @keyframes mifuVtFadeOut{ to{opacity:0;} }
  @keyframes mifuVtFadeIn{ from{opacity:0;} }
  /* ---- Kiko chat: free corner resize, sticky-note style (desktop/iPad — mobile is a bottom sheet) ---- */
  #kikoChat .kiko-log{ height:auto; max-height:none; }   /* let the log flex so the window's real height is the size */
  @media (min-width:641px){ #kikoChat{ max-height:none; } }   /* desktop/iPad: the inline free-resized height controls the size (mobile keeps its sheet cap) */
  .kchat-grip{ position:absolute; left:0; top:0; width:30px; height:30px; z-index:6; cursor:nwse-resize;
    touch-action:none; -webkit-touch-callout:none; border-radius:18px 0 0 0;
    background:linear-gradient(135deg, rgba(95,116,180,.34) 46%, transparent 46%); }
  .kchat-grip::after{ content:"⤡"; position:absolute; left:5px; top:3px; font-size:11px; color:#fff; opacity:.95; }
  @media (hover:hover){ .kchat-grip:hover{ background:linear-gradient(135deg, rgba(95,116,180,.58) 46%, transparent 46%); } }
  @media (max-width:640px){ .kchat-grip{ display:none; } }
  /* ---- Media library (Memories tab) ---- */
  .md-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .md-tile{ position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel-soft); }
  .md-tile>img{ width:100%; height:120px; object-fit:cover; display:block; cursor:zoom-in; }
  .md-tools{ position:absolute; top:4px; right:4px; display:flex; gap:4px; }
  .md-tools .x{ background:rgba(255,255,255,.88); border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:12px; box-shadow:var(--shadow-sm); }
  .md-cap{ font-size:11px; padding:5px 8px; border:none; border-top:1px solid var(--line); border-radius:0; width:100%; background:#fff; }
  .md-cap:focus{ box-shadow:none; outline:2px solid var(--peri); outline-offset:-2px; }
  .md-people{ display:flex; flex-wrap:wrap; gap:3px; padding:5px; }
  .md-pchip{ font-size:9.5px; padding:2px 7px; border-radius:999px; border:1.5px solid var(--line-2); background:#fff; color:var(--muted); }
  .md-pchip.on{ background:#fde2f2; border-color:var(--sakura); color:var(--sakura-deep); }
  /* ---- Digital Hobonichi daily page ---- */
  .jr-page{ border-top:4px solid var(--jr-accent,#8AB1CA); background:linear-gradient(180deg,#fffdf9,#fff); }
  .jr-page-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
  .jr-page-wd{ font-family:var(--display); font-size:13px; color:var(--jr-ink,#638AA4); letter-spacing:.05em; text-transform:uppercase; }
  .jr-page-date{ font-family:var(--display); font-size:19px; color:var(--ink); line-height:1.1; }
  .jr-page-day{ font-size:30px; font-weight:700; color:var(--jr-accent,#8AB1CA); }
  .jr-page-wk{ font-size:11px; color:var(--muted); margin-top:3px; }
  .jr-glance{ background:var(--panel-soft); border:1px solid var(--line); border-left:3px solid var(--jr-accent,#8AB1CA); border-radius:10px; padding:10px 12px; margin-bottom:12px; }
  .jr-glance-h{ font-size:11px; font-weight:700; color:var(--jr-ink,#638AA4); letter-spacing:.04em; margin-bottom:4px; }
  .jr-glance ul{ margin:0; padding-left:18px; font-size:12.5px; line-height:1.6; }
  .jr-glance-empty{ font-size:12px; color:var(--ink-soft); }
  .jr-paper{ background-color:#fffef9; background-image:repeating-linear-gradient(transparent,transparent 27px,#eceef4 27px,#eceef4 28px); border:1px solid var(--line); border-radius:12px; padding:6px 14px; }
  .jr-pagetext{ width:100%; min-height:300px; border:none; background:transparent; resize:vertical; font-family:var(--sans); font-size:14px; line-height:28px; color:var(--jr-ink,#3a3550); outline:none; display:block; }
  .jr-page-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap; }
  .jr-cell.jr-sel{ outline:2.5px solid var(--jr-accent,#8AB1CA); outline-offset:-2px; }
  .jr-toolbar{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; padding:8px 10px; background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:8px; }
  .jr-tb-select{ font-size:12px; padding:4px 6px; border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--ink); cursor:pointer; max-width:110px; }
  .jr-tb-size{ max-width:56px; }
  .jr-tb-btn{ background:none; border:1px solid transparent; border-radius:6px; padding:4px 7px; font-size:13px; cursor:pointer; color:var(--ink); line-height:1; transition:background .12s,border-color .12s; }
  .jr-tb-btn:hover,.jr-tb-btn.active{ background:var(--peri-soft,#ede9fb); border-color:var(--lav-deep); }
  .jr-tb-div{ width:1px; height:18px; background:var(--line); margin:0 2px; flex-shrink:0; }
  .jr-color-swatches{ display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
  .jr-swatch{ width:18px; height:18px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; transition:transform .12s,border-color .12s; }
  .jr-swatch:hover{ transform:scale(1.2); border-color:var(--ink); }
  .jr-pagetext[contenteditable]{ outline:none; min-height:300px; }
  .jr-pagetext[contenteditable]:empty::before{ content:attr(data-placeholder); color:var(--muted); pointer-events:none; }
  @media (max-width:640px){ .jr-pagetext{ min-height:240px; } .jr-page-day{ font-size:26px; } .jr-toolbar{ gap:4px; } }

  /* ===== 📚 Journal asset panel ===== */
  .jr-layout{ display:flex; gap:16px; align-items:flex-start; }
  .jr-layout .page-main{ flex:1; min-width:0; }
  .jr-asset-panel{ width:240px; flex-shrink:0; display:flex; flex-direction:column; gap:12px; position:sticky; top:70px; max-height:calc(100vh - 90px); max-height:calc(100dvh - 90px); overflow-y:auto; overscroll-behavior:contain; padding-bottom:20px; }
  .jr-asset-card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px; }
  .jr-asset-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .jr-asset-card-title{ font-size:14px; font-weight:700; color:var(--ink); }
  .jr-asset-card-see{ font-size:11px; color:var(--lav-deep); cursor:pointer; text-decoration:none; }
  .jr-asset-month{ width:100%; margin-bottom:10px; font-size:11px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); }
  .jr-asset-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px; }
  .jr-asset-thumb{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--line); cursor:grab; transition:transform .12s,box-shadow .12s; background:#f5f3fb; }
  .jr-asset-thumb:hover{ transform:scale(1.07); box-shadow:0 4px 12px rgba(120,110,160,.28); }
  .jr-asset-placeholder{ width:100%; aspect-ratio:1; border-radius:10px; border:1.5px dashed var(--line); background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:16px; opacity:.45; }
  .jr-asset-strip{ width:100%; height:38px; object-fit:cover; border-radius:8px; border:1px solid var(--line); cursor:grab; display:block; margin-bottom:5px; transition:transform .12s; }
  .jr-asset-strip:hover{ transform:scaleY(1.06); box-shadow:0 3px 8px rgba(120,110,160,.2); }
  .jr-asset-strip-ph{ width:100%; height:38px; border-radius:8px; border:1.5px dashed var(--line); background:var(--bg); margin-bottom:5px; display:flex; align-items:center; justify-content:center; font-size:13px; opacity:.4; }
  .jr-add-btn{ width:100%; padding:8px; border:1.5px dashed var(--lav-deep); border-radius:10px; background:transparent; color:var(--lav-deep); font-size:12px; cursor:pointer; margin-top:2px; transition:background .15s; }
  .jr-add-btn:hover{ background:var(--peri-soft,#ede9fb); }
  @media(max-width:760px){ .jr-layout{ flex-direction:column-reverse; } .jr-asset-panel{ width:100%; position:static; max-height:none; } }
  /* ===== 🎮 Gacha tracker + checklist rows (shared with Daily habits/goals) ===== */
  .gt-sec{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); margin:2px 0 7px; }
  .gt-div{ height:1px; margin:14px 0; background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent); }
  .gt-list{ display:flex; flex-direction:column; }
  /* one checklist row — used by gacha "today", daily habits, daily goals */
  .gt-row, .ck-row{ display:flex; align-items:center; gap:11px; width:100%; min-height:46px; padding:6px 10px;
    border:none; background:none; text-align:left; border-radius:11px; cursor:pointer; transition:background .14s var(--ease,ease); }
  .gt-row:hover, .ck-row:hover{ background:var(--panel-soft); }
  .gt-row + .gt-row, .ck-row + .ck-row{ border-top:1px solid var(--line); }
  .gt-box, .ck-box{ flex:0 0 auto; width:21px; height:21px; border-radius:7px; border:2px solid var(--line-2);
    display:inline-flex; align-items:center; justify-content:center; font-size:12px; color:#fff; background:#fff; transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease); }
  .gt-box.on, .ck-box.on{ background:var(--mint,#6fc3ab); border-color:var(--mint,#6fc3ab); }
  .gt-name, .ck-name{ flex:1; min-width:0; font-size:13.5px; color:var(--ink); word-break:break-word; }
  .gt-donetxt, .ck-donetxt{ color:var(--muted); text-decoration:line-through; }
  .gt-del, .ck-del{ flex:0 0 auto; color:var(--muted); font-size:13px; padding:2px 6px; border-radius:6px; }
  .gt-del:hover, .ck-del:hover{ color:var(--sakura-deep); }
  .gt-icon, .ck-icon{ flex:0 0 auto; font-size:15px; line-height:1; }
  .gt-complete{ font-size:11.5px; color:var(--muted); font-weight:600; margin:8px 0 2px; }
  /* ===== 🎮 icon-only daily grid (2026-08-16): just the game's app art, tap to toggle — no
     name/checkbox/row lines. Used by Gacha & Games' Today + This-week and the Games page. ===== */
  .ga-grid{ display:flex; flex-wrap:wrap; gap:12px; padding:2px 0 4px; }
  .ga-wrap{ position:relative; flex:0 0 auto; }
  .ga-tile{ position:relative; display:block; width:52px; height:52px; padding:0; border:none; border-radius:15px; background:var(--panel-soft);
    cursor:pointer; overflow:hidden; transition:transform var(--dur-1,.12s) var(--ease,ease),box-shadow .15s ease,filter .15s ease; }
  .ga-tile:active{ transform:scale(.92); }
  /* NOTE (2026-08-16 fix): these MUST target the dedicated .ga-art class, not a bare "img/span"
     child selector — a generic ".ga-tile > span" selector has higher specificity than the single-
     class ".ga-overlay"/".ga-check" rules below and was silently forcing them to opacity:1 and
     display:block, which is exactly why the done-wash looked solid and the ✓ looked off-center. */
  .ga-tile .ga-art{ width:100%; height:100%; border-radius:15px; display:block; object-fit:cover; transition:opacity .15s ease; }
  .ga-off .ga-art{ opacity:.8; }   /* undone: just a touch dimmer, still full color+legible — no grayscale (was washing pale art to near-white) */
  .ga-on{ box-shadow:0 0 0 2px var(--mint,#6fc3ab),0 4px 10px rgba(0,0,0,.14); }
  .ga-on .ga-art{ opacity:1; }
  /* done wash — a translucent green tint OVER the art (not replacing it) so the game is still readable */
  .ga-overlay{ position:absolute; inset:0; background:var(--mint,#6fc3ab); opacity:.38; pointer-events:none; }
  /* big centered checkmark, near tile-size, soft dark shadow so it reads over any art color */
  .ga-check{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:30px; line-height:1;
    font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45),0 0 7px rgba(0,0,0,.3); pointer-events:none; }
  .ga-mini{ position:absolute; width:19px; height:19px; border-radius:50%; border:none; background:rgba(20,14,26,.72); color:#fff;
    font-size:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; line-height:1; padding:0; z-index:2; }
  .ga-mini-del{ top:-6px; right:-6px; }
  .ga-mini-move{ bottom:-6px; left:-6px; background:var(--sakura,#ff93c6); }
  .ga-mini:hover{ filter:brightness(1.12); }
  /* tracker header row: dailies + weeklies tiles with Refresh alongside, wrapping under when narrow */
  .gt-stats{ display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; margin:0 0 6px; }
  .gt-stats .gg-stat{ flex:1 1 84px; padding:9px 10px; }
  .gt-refresh{ flex:1 1 130px; min-height:52px; white-space:nowrap; }
  .gt-refresh-msg{ font-size:11px; color:var(--muted); margin:0 0 10px; }
  /* creator spark idea box */
  .spark-idea{ background:linear-gradient(135deg,#eef2fb,#fdeaf6); border:1px solid var(--line); border-radius:14px; padding:13px 15px; font-family:var(--display); font-size:14.5px; line-height:1.5; color:var(--ink); }
  /* checklist progress bar (Daily habits / goals) */
  .ck-prog{ height:7px; border-radius:999px; background:#eef0fa; overflow:hidden; margin:2px 0 2px; }
  .ck-prog>span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--peri),var(--sakura)); transition:width .3s var(--ease,ease); }
  .gt-add{ display:flex; gap:6px; margin-top:8px; }
  .gt-today{ gap:8px; }   /* a touch more room between game chips */
  /* gacha chips: soft rounded-squares rather than full pills */
  .gt-today .chiptog, .gt-wk .chiptog{ border-radius:11px; }
  /* compact streak chips — name + 🔥count, wrap inline instead of stretching across the bar */
  .gt-streaks{ display:flex; flex-wrap:wrap; gap:7px; }
  .gt-schip{ font-size:12px; background:var(--panel-soft); border:1px solid var(--line); border-radius:999px; padding:4px 11px; color:var(--ink-soft); }
  .gt-schip b{ color:var(--sakura-deep); font-variant-numeric:tabular-nums; font-weight:700; }
  /* last-7-days grid */
  .gt-grid-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
  .gt-nav{ display:inline-flex; align-items:center; gap:4px; }
  .gt-nav .btn{ padding:3px 9px; font-size:13px; }
  .gt-wklabel{ font-size:11px; color:var(--ink-soft); min-width:78px; text-align:center; }
  .gt-grid{ display:flex; flex-direction:column; gap:3px; overflow-x:auto; }
  .gt-grow{ display:grid; grid-template-columns:64px repeat(7,1fr); align-items:center; gap:2px; min-width:220px; }
  .gt-glabel{ font-size:11.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:4px; }
  .gt-cell{ text-align:center; font-size:11px; height:24px; line-height:24px; border-radius:6px; }
  .gt-ghead .gt-cell{ color:var(--muted); font-weight:700; }
  .gt-cell.ok{ background:#e4f6ee; color:#2f9d79; }
  .gt-cell.no{ background:#fde4e4; color:#d6798a; }                 /* genuinely missed past day */
  .gt-cell.pend{ background:#f0f1f6; color:#8783a3; }               /* not happened yet / today not ticked — neutral gray box + ○ (2026-07-30: darkened for readable contrast) */

  /* ===== GACHAS PAGE ===== */
  .gg-strip{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
  .gg-stat{background:#fff;border-radius:14px;border:1.5px solid var(--line);padding:10px 14px;flex:1;min-width:70px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;}
  .gg-stat-n{font-size:20px;font-weight:800;color:var(--lav-deep);line-height:1;}
  .gg-stat-n.ok{color:var(--mint);}
  .gg-stat-n.warn{color:#e07030;}
  .gg-stat-l{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
  .gg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:16px;}
  .gg-card{background:#fff;border-radius:18px;padding:16px;border:1.5px solid var(--line);display:flex;flex-direction:column;}
  .gg-card.gg-done{border-color:rgba(111,195,171,.5);background:rgba(111,195,171,.04);}
  .gg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .gg-name{font-size:14px;font-weight:700;color:var(--text);}
  .gg-streak{font-size:11px;font-weight:700;color:#e07030;background:rgba(224,112,48,.1);border-radius:999px;padding:2px 8px;}
  .gg-refresh-btn{font-size:12px;line-height:1;border:1px solid var(--line);background:var(--card,#fff);color:var(--lav-deep);border-radius:999px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s,transform .15s;flex:none;}
  .gg-refresh-btn:hover{background:rgba(180,150,220,.12);}
  .gg-refresh-btn:disabled{opacity:.6;cursor:default;}
  .gg-refresh-btn.spin{animation:gg-spin .8s linear infinite;}
  @keyframes gg-spin{to{transform:rotate(360deg);}}
  .gg-spark{background:rgba(180,150,220,.09);border-radius:10px;padding:8px 10px;margin-top:10px;}
  .gg-spark-label{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
  /* ending vs starting banners — these have to read at a glance, so they get colour + weight, not 9px grey */
  .gg-sec{display:flex;align-items:center;gap:6px;margin:14px 0 6px;padding:6px 10px;border-radius:0 10px 10px 0;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.15;}
  .gg-sec-em{font-size:13px;line-height:1;}
  .gg-sec-n{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:0;background:#fff;border-radius:999px;padding:2px 7px;line-height:1;}
  .gg-sec-end{color:#b84a15;background:rgba(224,112,48,.14);border-left:4px solid #e07030;}
  .gg-sec-end .gg-sec-n{color:#b84a15;}
  .gg-sec-soon{color:var(--peri-deep);background:rgba(117,138,198,.13);border-left:4px solid var(--peri);}
  .gg-sec-soon .gg-sec-n{color:var(--peri-deep);}
  .gg-tsec{display:flex;align-items:center;gap:5px;margin:8px 0 2px;}
  .gg-tsec-t{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;}
  .gg-tsec-line{flex:1;height:1px;background:var(--line);}
  /* gems still to collect, in the Ending soon banner */
  .gg-sec-gems{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:0;color:#b84a15;background:#fff;border-radius:999px;padding:2px 7px;line-height:1;white-space:nowrap;}
  .gg-sec-gems + .gg-sec-n{margin-left:5px;}
  /* per-event collect tick */
  .gg-chk{position:relative;flex:none;width:17px;height:17px;margin-top:2px;padding:0;border-radius:50%;border:1.5px solid rgba(224,112,48,.55);background:#fff;color:#fff;font-size:10px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease,border-color .15s ease,transform .12s ease;}
  /* the visible dot stays small; the tap target does not */
  .gg-chk::after{content:"";position:absolute;top:-7px;left:-7px;right:-7px;bottom:-7px;}
  .gg-chk:hover{border-color:#e07030;transform:scale(1.08);}
  .gg-chk.on{background:#e07030;border-color:#e07030;}
  .gg-chk:focus-visible{outline:2px solid var(--peri-deep);outline-offset:2px;}
  .gg-ev-done .gg-ev-t{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(224,112,48,.5);}
  .gg-ev-done{opacity:.62;}
  .gg-gem{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.01em;color:#8a6300;background:rgba(240,200,90,.28);border:1px solid rgba(190,150,20,.28);border-radius:999px;padding:0 6px;line-height:1.5;white-space:nowrap;vertical-align:1px;}
  .gg-gem-sep{color:var(--muted);opacity:.6;}
  /* typical per-cycle payout rather than a looked-up one — dashed edge backs up the ~ */
  .gg-gem-approx{border-style:dashed;background:rgba(240,200,90,.16);}
  .gg-ev-done .gg-gem{filter:grayscale(1);opacity:.7;}
  .gg-sec-gems-none{color:var(--muted);font-weight:700;background:rgba(255,255,255,.7);}
  /* ===== 🚨 Ends today — full-width alert above the gacha grid ===== */
  .gg-today{background:rgba(220,80,60,.07);border:1.5px solid rgba(220,80,60,.26);border-radius:14px;padding:11px 13px 4px;margin:0 0 16px;}
  .gg-today-head{display:flex;align-items:center;gap:7px;}
  .gg-today-t{font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:-.01em;color:#d94f30;}
  .gg-today-n{font-size:10px;font-weight:800;color:#fff;background:#d94f30;border-radius:999px;padding:1px 7px;line-height:1.5;}
  .gg-today .gg-sec-gems{color:#d94f30;}
  .gg-today-sub{font-size:11px;color:var(--muted);margin:2px 0 4px;line-height:1.4;}
  .gg-today-g{margin-bottom:6px;}
  .gg-today-gn{display:flex;align-items:center;gap:6px;margin:9px 0 0;font-family:var(--display);font-size:12.5px;font-weight:800;color:#a83c22;}
  .gg-today-gl{flex:1;height:1px;background:rgba(220,80,60,.22);}
  .gg-today .gg-tsec{margin:5px 0 1px;}
  .gg-today .gg-tsec-line{background:rgba(220,80,60,.13);}
  .gg-today .kn-row{border-bottom-color:rgba(220,80,60,.13);}
  .gg-chk-hot{border-color:rgba(220,80,60,.5);}
  .gg-chk-hot:hover{border-color:#d94f30;}
  .gg-chk-hot.on{background:#d94f30;border-color:#d94f30;}
  @media(max-width:600px){.gg-grid{grid-template-columns:1fr;}.gg-strip{gap:7px;}.gg-sec{font-size:12.5px;padding:7px 10px;}.gg-chk{width:19px;height:19px;}
    .gg-today{padding:10px 11px 4px;}.gg-today-t{font-size:14px;}.gg-today .gg-sec-gems{margin-left:0;}.gg-today-head{flex-wrap:wrap;row-gap:4px;}}

  /* 📺 Livestream codes bubble — violet, sits right under the red "Ends today!" alarm */
  .gg-ls{background:rgba(124,92,214,.07);border:1.5px solid rgba(124,92,214,.28);border-radius:14px;padding:11px 13px 8px;margin:0 0 16px;}
  .gg-ls-t{font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:-.01em;color:#6a45c8;}
  .gg-ls-n{font-size:10px;font-weight:800;color:#fff;background:#7c5cd6;border-radius:999px;padding:1px 7px;line-height:1.5;}
  .gg-ls-gn{display:flex;align-items:center;gap:6px;margin:9px 0 2px;font-family:var(--display);font-size:12.5px;font-weight:800;color:#5a37b0;}
  .gg-ls-gl{flex:1;height:1px;background:rgba(124,92,214,.20);}
  .gg-ls .kn-row{border-bottom-color:rgba(124,92,214,.12);}
  .gg-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#5a37b0;background:rgba(124,92,214,.12);border:1px solid rgba(124,92,214,.30);border-radius:7px;padding:3px 9px;cursor:pointer;flex:none;transition:background .15s,transform .1s;}
  .gg-code:hover{background:rgba(124,92,214,.22);}
  .gg-code:active{transform:scale(.96);}
  .gg-ls-rw{font-size:11.5px;color:var(--muted);line-height:1.35;}
  .gg-ls-how{font-size:10.5px;color:var(--muted);margin:3px 0 2px;line-height:1.4;}
  .gg-chk-ls{border-color:rgba(124,92,214,.5);}
  .gg-chk-ls:hover{border-color:#7c5cd6;}
  .gg-chk-ls.on{background:#7c5cd6;border-color:#7c5cd6;}
  @media(max-width:600px){.gg-ls{padding:10px 11px 6px;}.gg-ls-t{font-size:14px;}.gg-code{font-size:12px;padding:3px 7px;}}

  /* inline per-row game label used by the compact Ends-soon (inside the tracker) + Free-codes
     rows — a flattened row-list reads better once each row already names its own game inline
     than a repeated per-game divider header would. */
  .gg-today-gname{flex:none;font-size:10.5px;font-weight:800;color:var(--muted);white-space:nowrap;max-width:78px;overflow:hidden;text-overflow:ellipsis;}
  .gg-more-btn{font-size:11px;background:none;border:none;cursor:pointer;padding:4px 0 2px;display:block;color:var(--muted);}
  .gg-more-btn:hover{color:var(--ink);}

  /* ===== SIDEBAR LAYOUT (replaces top-tab navigation) ===== */
  #app-shell{ display:flex; min-height:100vh; min-height:100dvh; align-items:stretch; }
  #sidebar{
    width:220px; flex:0 0 220px;
    display:flex; flex-direction:column;
    /* Mifu's gradient — purply-blue at the top flowing into pink at the bottom (her palette) */
    background:linear-gradient(180deg, rgba(224,232,251,.94) 0%, rgba(231,223,250,.93) 42%, rgba(244,214,238,.95) 78%, rgba(253,210,235,.96) 100%);
    backdrop-filter:blur(14px);
    border-right:1.5px solid #e9def1;
    position:sticky; top:0; height:100vh; height:100dvh;
    overflow-y:auto; overflow-x:hidden;
    z-index:25;
    transition:width .22s cubic-bezier(.22,.61,.36,1),flex-basis .22s cubic-bezier(.22,.61,.36,1);
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
    padding-left:env(safe-area-inset-left,0px);
    scrollbar-width:none;
  }
  #sidebar::-webkit-scrollbar{ display:none; }
  /* lighter backdrop-blur on touch (iPad/phone) — a tall sticky blur is the heaviest scroll cost (matches #rail) */
  @media (pointer:coarse){ #sidebar{ backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } }
  #sidebar.sb-collapsed{ width:72px; flex-basis:72px; box-shadow:2px 0 12px rgba(160,130,200,.13); }
  #main-col{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
  /* desktop rail: just a thin gradient line, no tabs */
  #rail{
    display:flex; align-items:center; padding:8px 16px; gap:8px;
    position:sticky; top:0; z-index:20;
    background:rgba(255,255,255,.80); backdrop-filter:blur(12px);
    border-bottom:2px solid transparent;
    border-image:linear-gradient(90deg,#9fc3e8,#758ac6,#a98fe0,#ff9ed8) 1;
    padding-left:calc(16px + env(safe-area-inset-left,0px));
    padding-right:calc(16px + env(safe-area-inset-right,0px));
    min-height:0;
  }
  #sb-open-btn{
    border:none; background:none; cursor:pointer;
    font-size:20px; color:var(--ink-soft); padding:4px 6px; border-radius:8px;
    transition:background .15s,color .15s; line-height:1;
  }
  #sb-open-btn:hover{ background:var(--panel-soft); color:var(--peri-deep); }
  /* hide hamburger on desktop (sidebar always visible); hide on mobile (sidebar = bottom bar) */
  @media (min-width:901px){ #sb-open-btn{ display:none; } }
  @media (max-width:640px){ #sb-open-btn{ display:none!important; } }
  /* desktop: rail is invisible (just shows gradient border line) */
  @media (min-width:901px){ #rail{ display:none; } }   /* desktop: sidebar holds everything, so hide the empty top rail (and its leftover gradient line) */
  /* sidebar header — centered logo, with the collapse arrow tucked to the right edge */
  #sb-header{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    padding:18px 14px 12px; flex-shrink:0;
  }
  #sb-header .brand{ display:flex; align-items:center; }
  #sb-header .brand-logo{ height:48px; width:auto; }
  #sb-collapse{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    border:none; background:none; cursor:pointer;
    color:var(--muted); font-size:14px; border-radius:8px;
    padding:5px 7px; transition:background .15s,color .15s;
    line-height:1;
  }
  #sb-collapse:hover{ background:var(--panel-soft); color:var(--peri-deep); }
  /* expand button = Mifu's profile pic; only appears when the sidebar is collapsed */
  #sb-expand{ display:none; border:none; background:none; cursor:pointer; padding:0; border-radius:50%; line-height:0; flex:0 0 auto; }
  #sb-expand img{ width:40px; height:40px; border-radius:50%; object-fit:cover; box-shadow:0 2px 8px rgba(120,130,200,.28); transition:transform .15s var(--ease); display:block; }
  #sb-expand:hover img{ transform:scale(1.08); }
  /* collapsed: hide logo + arrow, show the profile-pic expand button centered (this is how you re-open) */
  #sidebar.sb-collapsed .brand, #sidebar.sb-collapsed #sb-collapse{ display:none; }
  #sidebar.sb-collapsed #sb-expand{ display:block; }
  #sidebar.sb-collapsed .brand-name, #sidebar.sb-collapsed .mode-pill{ display:none; }
  #sidebar.sb-collapsed #sb-header{ justify-content:center; padding:14px 8px 10px; }
  /* sidebar mode switcher */
  #sb-mode{
    margin:0 10px 4px; display:flex;
    border-radius:999px; background:#eef0fa; padding:3px; gap:2px; flex-shrink:0;
  }
  #sidebar.sb-collapsed #sb-mode{ display:none; }
  #sb-mode button{
    flex:1; border:none; background:none; border-radius:999px;
    padding:5px 8px; font-size:11px; color:var(--ink-soft);
    font-family:inherit; font-weight:600; cursor:pointer;
    transition:background .15s,color .15s; white-space:nowrap;
  }
  #sb-mode button.on{ background:#fff; color:var(--sakura-deep); box-shadow:var(--shadow-sm); }
  /* sidebar nav — vertical */
  #sidebar nav#nav{ flex:1; padding:4px 10px; display:flex; flex-direction:column; gap:2px; }
  #sidebar .tab{
    position:relative;
    border-radius:11px; text-align:left; padding:8px 11px;
    font-size:13px; display:flex; align-items:center; gap:10px;
    white-space:nowrap; overflow:hidden; border:none; background:none;
    color:var(--ink-soft); font-weight:500; width:100%;
    transition:background var(--dur-2,.16s) var(--ease), color var(--dur-2,.16s) var(--ease), transform .10s;
  }
  /* icon chip — emojis sit in tidy rounded squares so the column lines up */
  .tab-emoji{
    font-size:15px; flex:0 0 auto; line-height:1;
    width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:9px; background:var(--panel-soft);
    transition:background var(--dur-2,.16s) var(--ease), transform var(--dur-2,.16s) var(--ease);
  }
  .tab-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #sidebar .tab:hover:not(.active){ background:var(--panel-soft); color:var(--ink); }
  #sidebar .tab:hover:not(.active) .tab-emoji{ background:#fff; transform:scale(1.06); }
  /* active item — soft tinted pill + a left accent bar (the polished-sidebar hallmark) */
  #sidebar .tab.active{
    background:linear-gradient(135deg,#eaf0fc,#fdeaf5);
    color:var(--sakura-deep); font-weight:600;
  }
  #sidebar .tab.active::before{
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:3px; height:20px; border-radius:0 3px 3px 0;
    background:linear-gradient(180deg,var(--peri),var(--sakura));
  }
  #sidebar .tab.active .tab-emoji{
    background:#fff; box-shadow:0 1px 5px rgba(236,116,191,.22);
  }
  #sidebar.sb-collapsed .tab{ padding:10px; justify-content:center; gap:0; }
  #sidebar.sb-collapsed .tab-emoji{ width:36px; height:36px; font-size:18px; }
  #sidebar.sb-collapsed .tab-label{ display:none; }
  #sidebar.sb-collapsed .tab.active::before{ display:none; }
  /* sidebar group labels + dividers */
  .sb-group{ margin-top:10px; position:relative; }
  .sb-group::before{
    content:""; display:block; height:1px; margin:0 12px 8px;
    background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line) 70%,transparent);
  }
  .sb-group-label{
    font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
    color:var(--muted); font-weight:700; padding:0 14px 4px; display:block;
  }
  #sidebar.sb-collapsed .sb-group-label{ display:none; }
  #sidebar.sb-collapsed .sb-group::before{ margin:4px 14px; }
  .sb-unlock-banner{ font-size:10px; color:var(--lav-deep); text-align:center; padding:5px 10px 8px; letter-spacing:.04em; opacity:.8; }
  .tab-drag-wrap{ display:flex; align-items:center; gap:2px; position:relative; }
  .tab-drag-wrap .tab{ flex:1; }
  .drag-grip{ font-size:15px; color:var(--muted); cursor:grab; padding:8px 8px; margin:-8px 0; opacity:.5; flex-shrink:0; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none; }
  .tab-drag-wrap.dragging{ opacity:.4; }
  .tab-drag-wrap.drag-over .tab{ background:var(--peri-soft,#ede9fb); outline:2px dashed var(--lav-deep); outline-offset:-2px; }
  /* sidebar footer */
  #sb-footer{
    padding:10px; display:flex; flex-direction:column; gap:6px;
    border-top:1px solid var(--line); flex-shrink:0;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  }
  #sb-footer .right{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center; }
  #sidebar.sb-collapsed #sb-footer{ align-items:center; }
  #sidebar.sb-collapsed #sb-footer .right{ flex-direction:column; }
  #sidebar.sb-collapsed #sb-footer .chip-label{ display:none; }
  /* main view — comfortable centered column so content sits together next to the sidebar */
  main#view{ flex:1; padding:22px 22px 28px; max-width:1180px; width:100%; margin:0 auto; }
  main{ padding:0; max-width:none; margin:0; }
  @media (min-width:641px) and (max-width:1040px){ main#view{ padding:16px; } }
  /* ---- Tablet 641-900px: icon-only sidebar, hamburger to expand ---- */
  @media (min-width:641px) and (max-width:900px){
    #sidebar:not(.sb-user-expanded){ width:64px; flex-basis:64px; }
    #sidebar:not(.sb-user-expanded) .brand-name,
    #sidebar:not(.sb-user-expanded) .mode-pill,
    #sidebar:not(.sb-user-expanded) .sb-group-label,
    #sidebar:not(.sb-user-expanded) #sb-mode,
    #sidebar:not(.sb-user-expanded) .tab-label{ display:none; }
    #sidebar:not(.sb-user-expanded) .tab{ padding:9px; justify-content:center; }
    #sidebar:not(.sb-user-expanded) #sb-header{ justify-content:center; padding:14px 8px 8px; }
    #sidebar:not(.sb-user-expanded) #sb-collapse{ display:none; }
    #sidebar:not(.sb-user-expanded) .brand{ display:none; }
    #sidebar:not(.sb-user-expanded) #sb-expand{ display:block; }
    #sb-open-btn{ display:flex; align-items:center; }
    #rail{ padding-top:8px; padding-bottom:8px; }
  }
  /* ---- Mobile ≤640px: sidebar = fixed bottom tab bar ---- */
  @media (max-width:640px){
    #app-shell{ flex-direction:column; }
    #sidebar{
      width:100%!important; flex-basis:auto!important; height:auto;
      position:fixed; bottom:0; left:0; right:0; top:auto;
      flex-direction:row;
      border-right:none; border-top:1.5px solid var(--line);
      padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
      z-index:25; overflow-x:auto; overflow-y:hidden;
    }
    #sb-header, #sb-mode, #sb-footer, .sb-group{ display:none!important; }
    #sidebar nav#nav{
      flex-direction:row; padding:4px;
      overflow-x:auto; overflow-y:hidden;
      scrollbar-width:none; width:100%;
    }
    #sidebar nav#nav::-webkit-scrollbar{ display:none; }
    #sidebar .tab{
      flex-direction:column; gap:2px; padding:6px 10px;
      font-size:9.5px; border-radius:10px; flex:0 0 auto;
      min-width:52px; align-items:center; justify-content:center;
    }
    #sidebar .tab-label{ display:block!important; font-size:9px; margin-top:1px; }
    /* on the bottom bar, drop the chip square — just show the emoji */
    #sidebar .tab-emoji{ font-size:19px; width:auto; height:auto; background:none!important; box-shadow:none!important; }
    #sidebar .tab.active{ background:none; }
    #sidebar .tab.active::before{ display:none; }   /* mobile uses color, not the left bar */
    #main-col{ padding-bottom:calc(60px + env(safe-area-inset-bottom,0px)); }
    main#view{ padding:10px 8px; }
    /* rail shows brand + controls on mobile */
    #rail{ padding:8px 10px; }
    #rail>*{ display:flex; }
    .rail-brand{ display:flex!important; }
    .rail-right{ display:flex!important; align-items:center; gap:9px; margin-left:auto; }
    /* floating buttons shift up to clear the bottom bar */
    #voiceFab{ bottom:calc(68px + env(safe-area-inset-bottom,0px)); }
    #addStickyBtn{ bottom:calc(16px + env(safe-area-inset-bottom,0px)); right:calc(80px + env(safe-area-inset-right,0px)); }
    #restBtn{ bottom:calc(132px + env(safe-area-inset-bottom,0px)); }
    #restWidget{ bottom:calc(186px + env(safe-area-inset-bottom,0px)); }
    .toast{ bottom:calc(76px + env(safe-area-inset-bottom,0px)); }
    #kikoChat{ bottom:calc(68px + env(safe-area-inset-bottom,0px)); }
  }
  /* PWA standalone: clear notch on sidebar top */
  @media (display-mode:standalone){
    #sidebar{ padding-top:calc(0px + env(safe-area-inset-top,0px)); }
    #rail{ padding-top:calc(8px + env(safe-area-inset-top,0px)); }
  }
  /* desktop: offset left-anchored floating elements (Kiko) to clear the sidebar */
  @media (min-width:641px){
    #kiko{ left:calc(220px + 60px); }
    #kikoBubble{ left:calc(220px + 60px); }
  }
  /* old top-nav rules that could conflict — neutralize for sidebar context */
  @media (max-width:560px){
    #sidebar nav#nav{ width:auto; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; }
  }
  /* twemoji: keep images inline and text-sized so they don't blow up into giant icons */
  img.emoji{ height:1em; width:1em; margin:0 .05em 0 .1em; vertical-align:-0.1em; display:inline !important; }
  .tab-emoji img.emoji{ height:20px; width:20px; margin:0; vertical-align:middle; }
  .card-head img.emoji, h2 img.emoji, h3 img.emoji{ height:1.2em; width:1.2em; vertical-align:-0.15em; }
  /* ===== GLOBAL HEADER ===== */
  #global-header{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:40;flex-wrap:wrap;}
  .gh-ava{width:52px;height:52px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#fde2f2,#e6ecfb);flex:none;}
  .gh-title{flex:1;min-width:130px;}   /* 2026-08-09: floor so "Mifu's Creator OS" can never squash to near-nothing — #global-header's own flex-wrap:wrap takes over once things genuinely don't fit, instead of stealing the title's width */
  .gh-title-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted);}
  .gh-title-name{font-family:var(--display);font-size:18px;font-weight:700;line-height:1.2;color:var(--ink);}
  .gh-title-sub{font-size:11.5px;color:var(--ink-soft);}
  .gh-right{display:flex;align-items:center;gap:14px;margin-left:auto;flex-shrink:0;}
  /* 2026-08-09 Home redesign — reminder chip. Wide: full pill with the top reminder's text.
     Narrow (see media query below): collapses to a round icon-only button, same tap target. */
  .gh-kiko{display:flex;align-items:center;gap:7px;max-width:300px;background:linear-gradient(135deg,#f4ecff,#ffeef6);border:1.5px solid #d9c7f2;border-radius:999px;padding:5px 12px 5px 8px;cursor:pointer;font-family:inherit;text-align:left;flex-shrink:1;min-width:0;}
  .gh-kiko.urgent{border-color:#e88bb8;}
  .gh-kiko-ic{font-size:15px;flex-shrink:0;}
  .gh-kiko-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:700;}
  .gh-kiko-badge{flex-shrink:0;font-size:9.5px;font-weight:800;background:#b48ae0;color:#fff;border-radius:999px;padding:1px 6px;}
  /* 2026-08-09: raised from 760px — real testing showed the FULL chip still squashed the title at
     both 1000px and 820px (narrow-desktop/tablet, doc's own "Narrow desktop/tablet: reminder chip
     collapses" case, not just phone). 1024px covers both real-tested widths while wide desktop
     (1280px+, where it was verified to render correctly) is unaffected. */
  @media(max-width:1024px){
    .gh-kiko{max-width:none;padding:6px;border-radius:50%;gap:0;}
    .gh-kiko-label,.gh-kiko-badge{display:none;}
  }
  .gh-clockwrap{text-align:right;}
  .gh-clock{font-family:var(--display);font-size:32px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1;}
  .gh-date-str{font-size:11px;color:var(--sakura-deep);font-weight:600;}
  .gh-wallet{position:relative;display:flex;align-items:center;gap:5px;border:1.5px solid var(--sakura);background:linear-gradient(135deg,#fff,#fff2fa);border-radius:12px;padding:6px 12px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--sakura-deep);line-height:1;white-space:nowrap;box-shadow:var(--shadow-sm);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease);cursor:pointer;}
  .gh-wallet:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(236,116,191,.18);}
  .gh-wallet-amt{font-variant-numeric:tabular-nums;letter-spacing:.01em;}
  @media(max-width:640px){.gh-wallet{font-size:12px;padding:5px 9px;}}
  /* 🔴 top-bar stream-schedule widget (2026-08-15) — beside the 💗 Mifu Wallet: status + today
     toggle + 7 day bubbles + 🗓 week editor. Faithful port of Eggie OS's schedule chip. */
  /* no box — sits bare in the header (Eggie's is boxless too) */
  .gh-sched{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0;}
  .gh-sched-txt{background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;padding:0;color:inherit;display:flex;flex-direction:column;line-height:1.14;}
  .gh-sched-top{font-size:12px;font-weight:800;color:var(--peri-deep);white-space:nowrap;}
  .gh-sched.is-live .gh-sched-top{color:var(--sakura-deep);}
  .gh-sched-sub{font-size:9.5px;color:var(--muted);white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;}
  .gh-sched-bubbles{display:flex;gap:4px;align-items:center;}
  .gh-sched .switch{width:38px;height:22px;}
  .gh-sched .switch::after{width:16px;height:16px;}
  .gh-sched .switch[aria-checked="true"]::after{transform:translateX(16px);}
  @media(max-width:1024px){ .gh-sched-sub{display:none;} }
  @media(max-width:720px){ .gh-sched-bubbles,.gh-sched-cal{display:none;} }
  @media(max-width:640px){ .gh-sched{gap:7px;padding:5px 8px;} .gh-sched-top{font-size:11px;} }
  /* 🗓️ Stream Workshop — Phase 14B compact layout pass (2026-08-17), built directly from her
     written design note. Replaces the Phase 14A icon-circle tap-card + inline-expand pair with:
     a fixed 3-col idea grid of ONE-card-per-idea (.sched-idea-card, consistent height, actions
     pinned to the bottom via margin-top:auto), a shared 2-col settings grid reused by both Game
     Suggestions and Content Destinations, and compact grid ROWS for Other Content Ideas. Details
     never lives inline anymore — it opens the app's existing modal (schedIdeaDetailsModalHTML in
     view-home.js), so none of this needs to account for a card growing taller when tapped. */
  .sched-ideas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:2px;}
  @media(max-width:720px){ .sched-ideas{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media(max-width:460px){ .sched-ideas{grid-template-columns:1fr;} }
  .sched-idea-card{display:flex;flex-direction:column;min-height:148px;padding:11px 12px;background:linear-gradient(135deg,#fff,#faf8ff);border:1.5px solid var(--line);border-radius:13px;}
  [data-theme="dark"] .sched-idea-card{background:var(--panel-soft);}
  .sched-idea-card-top{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-height:16px;}
  .sched-idea-card-title{margin-top:7px;font-size:12.5px;font-weight:700;line-height:1.32;color:var(--ink);overflow-wrap:anywhere;}
  .sched-idea-card-one-line{margin-top:4px;font-size:10.5px;line-height:1.35;color:var(--muted);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .sched-idea-card-actions{margin-top:auto;padding-top:9px;display:flex;gap:6px;flex-wrap:wrap;}
  /* the small "Details" button next to a primary action, everywhere it appears (grid cards, the
     Continue list, routed rows) — one quiet look, not a second loud call-to-action. */
  .sched-idea-toggle{opacity:.72;}
  .sched-idea-toggle:hover{opacity:1;}
  .sched-idea-details{font-size:11px;}
  .sched-idea-modal .card-head{align-items:flex-start;}
  /* 🔬 Phase 14C — the research record (game/content/version/dates/verified/source link) inside a
     card's Details modal. Compact label+value rows, not paragraphs — her rule 15 ask. */
  .sched-research{margin-top:2px;padding-top:6px;border-top:1px dashed var(--line);}
  .sched-research-row{display:flex;gap:6px;font-size:10.5px;padding:1px 0;}
  .sched-research-k{flex:0 0 auto;min-width:92px;color:var(--muted);font-weight:700;}
  .sched-research-v{color:var(--ink);overflow-wrap:anywhere;}
  .sched-research a.btn{text-decoration:none;}
  /* 🎮/🗂️ compact settings grid — Game Suggestions + Content Destinations both use this, instead
     of one full-width ~60-80px row per item. */
  .sched-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;padding-top:2px;}
  @media(max-width:520px){ .sched-settings-grid{grid-template-columns:1fr;} }
  .sched-setting-item{display:grid;grid-template-columns:minmax(0,1fr) 128px;align-items:center;gap:8px;min-height:38px;}
  .sched-setting-item select{font-size:11.5px;padding:4px 6px;}
  @media(max-width:380px){ .sched-setting-item{grid-template-columns:1fr;} }
  /* 🗂️ Other content ideas — compact rows, not stacked cards. */
  .sched-routed-list{display:grid;gap:6px;margin-bottom:8px;}
  .sched-routed-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;}
  .sched-routed-text{font-size:12px;color:var(--ink);overflow-wrap:anywhere;}
  /* 📝 Text to schedule — Kiko's two buttons sit directly under Send now (rule 1), no separate
     "Or, open-ended ideas" heading/gap above them. */
  .sched-text-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
  /* Part 2D: tiny reward feedback next to the wallet bubble (§9) — small, calm, fades, never a modal */
  .gh-wallet.is-paid{border-color:var(--mint,#6fc3ab);box-shadow:0 0 0 3px rgba(111,195,171,.16);}
  .gh-wallet.is-undone{border-color:var(--sakura);box-shadow:0 0 0 3px rgba(236,116,191,.14);}
  /* 💛 2026-08-05 — wallet paused: soft yellow instead of pink, so it's obvious at a glance without opening the menu */
  .gh-wallet.paused{border-color:#dba829;background:linear-gradient(135deg,#fff,#fff9e8);color:#8a6a12;box-shadow:0 0 0 3px rgba(219,168,41,.16);}
  /* feedback sits BELOW the bubble (was above → drifted off the top of the page) */
  .gh-wallet-fx{position:absolute;left:50%;top:calc(100% + 6px);transform:translate(-50%,0);white-space:nowrap;
    font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--mint-deep,#2f9d79);
    background:linear-gradient(135deg,#fff,#effaf5);border:1.5px solid var(--mint,#6fc3ab);border-radius:11px;
    padding:3px 9px;box-shadow:var(--shadow-sm);pointer-events:none;z-index:5;}
  .gh-wallet-fx.is-undo{color:var(--sakura-deep);background:linear-gradient(135deg,#fff,#fff2fa);border-color:var(--sakura);}
  @media(prefers-reduced-motion:no-preference){ .gh-wallet-fx{animation:ghWalletFx 3.2s var(--ease) both;} }
  body.calm .gh-wallet-fx{animation:none;}
  /* Part 2G-A — Weekly Bonuses panel (opened from the wallet bubble) */
  .wb-bal{font-size:13px;color:var(--ink-soft,#8a7f8c);margin:2px 2px 12px;}
  .wb-bal b{font-family:var(--display);font-size:19px;color:var(--sakura-deep);font-variant-numeric:tabular-nums;margin-left:4px;}
  .wb-sec{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--ink,#5b5160);margin:2px 2px 8px;}
  .wb-list{display:flex;flex-direction:column;gap:8px;}
  .wb-row{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:13px;background:linear-gradient(135deg,#fff,#faf6ff);border:1.5px solid var(--line,#efe6f3);box-shadow:var(--shadow-sm);}
  .wb-row.is-earned{border-color:var(--mint,#6fc3ab);background:linear-gradient(135deg,#fff,#f2fbf7);}
  .wb-name{flex:1;font-weight:600;font-size:13px;color:var(--ink,#5b5160);}
  .wb-mid{flex:0 0 auto;font-size:12px;}
  .wb-progress{color:var(--sakura-deep);font-variant-numeric:tabular-nums;font-weight:600;}
  .wb-earned{color:var(--mint-deep,#3a9c82);font-weight:700;}
  .wb-na{color:var(--ink-soft,#a99fae);}
  .wb-rew{flex:0 0 auto;min-width:46px;text-align:right;font-family:var(--display);font-weight:700;font-size:13px;color:var(--sakura-deep);font-variant-numeric:tabular-nums;}
  .wb-row.is-earned .wb-rew{color:var(--mint-deep,#3a9c82);}
  .wb-foot{font-size:11.5px;margin:12px 2px 2px;text-align:center;}
  /* 2H-A wallet spending */
  .wb-spend-open{width:100%;justify-content:center;margin:0 0 14px;border:1.5px dashed var(--sakura);color:var(--sakura-deep);background:linear-gradient(135deg,#fff,#fff2fa);border-radius:13px;padding:9px 12px;font-weight:600;font-size:13px;}
  .wb-spend-open:hover{background:linear-gradient(135deg,#fff,#ffe9f6);}
  .wb-spend{margin:0 0 14px;padding:12px;border-radius:14px;border:1.5px solid var(--line,#efe6f3);background:linear-gradient(135deg,#fff,#faf6ff);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px;}
  .wb-sp-lab{font-size:12px;font-weight:600;color:var(--ink-soft,#8a7f8c);margin:2px 2px 0;}
  .wb-sp-in{width:100%;border:1.5px solid var(--line,#efe6f3);border-radius:11px;padding:9px 11px;font-size:14px;background:#fff;color:var(--ink,#5b5160);font-family:inherit;}
  .wb-sp-in:focus{outline:none;border-color:var(--sakura);box-shadow:0 0 0 3px rgba(236,116,191,.12);}
  .wb-sp-amt{display:flex;align-items:center;gap:8px;}
  .wb-sp-amt>span{font-family:var(--display);font-weight:700;font-size:16px;color:var(--sakura-deep);}
  .wb-sp-amt .wb-sp-in{font-variant-numeric:tabular-nums;}
  .wb-sp-note{margin:2px 0 0;}
  .wb-sp-note>summary{font-size:12px;color:var(--ink-soft,#8a7f8c);cursor:pointer;list-style:none;padding:2px 2px;}
  .wb-sp-note>summary::-webkit-details-marker{display:none;}
  .wb-sp-note[open]>summary{margin-bottom:6px;}
  .wb-sp-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:6px;}
  .wb-sp-btns .btn-grad{font-weight:600;}
  .wb-openpage{width:100%;justify-content:center;margin:2px 0 12px;border:1.5px solid var(--sakura);color:var(--sakura-deep);background:linear-gradient(135deg,#fff,#fff2fa);border-radius:13px;padding:9px 12px;font-weight:600;font-size:13px;}
  .wb-openpage:hover{background:linear-gradient(135deg,#fff,#ffe9f6);transform:translateY(-1px);}
  /* Part 2H-B — Mifu Wallet page */
  .wallet-page{max-width:640px;margin:0 auto;padding:2px 2px 40px;}
  .wal-head{display:flex;align-items:flex-start;gap:12px;margin:4px 2px 16px;}
  .wal-back{flex:0 0 auto;border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:7px 11px;font-size:12.5px;color:var(--ink,#5b5160);align-self:center;}
  .wal-back:hover{border-color:var(--sakura);color:var(--sakura-deep);}
  .wal-title-wrap h2{font-family:var(--display);font-weight:800;font-size:21px;color:var(--sakura-deep);margin:0;line-height:1.1;}
  .wal-title-wrap p{font-size:12.5px;margin:3px 0 0;}
  .wal-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 2px 18px;}
  .wal-card{background:linear-gradient(150deg,#fff,#fff5fb);border:1.5px solid var(--line);border-radius:18px;padding:14px 12px;text-align:center;box-shadow:var(--shadow-sm);}
  .wal-card-earn{background:linear-gradient(150deg,#fff,#f3fbf7);}
  .wal-card-spent{background:linear-gradient(150deg,#fff,#f6f3fc);}
  .wal-c-lab{font-size:11.5px;color:var(--soft,#8a7f92);font-weight:600;letter-spacing:.02em;}
  .wal-c-val{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink,#5b5160);margin-top:5px;font-variant-numeric:tabular-nums;}
  .wal-card-earn .wal-c-val{color:var(--mint-deep,#3a9d84);}
  .wal-card-spent .wal-c-val{color:#8f7bb8;}
  .wal-spendbar{margin:0 2px 16px;}
  .wal-spendbar .wb-spend-open{margin:0;}
  .wal-sec{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink,#5b5160);margin:8px 2px 10px;}
  .wal-filters{display:flex;gap:7px;flex-wrap:wrap;margin:0 2px 12px;}
  .wal-filt{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--soft,#8a7f92);transition:all var(--dur-1) var(--ease);}
  .wal-filt:hover{border-color:var(--sakura);color:var(--sakura-deep);}
  .wal-filt.on{background:linear-gradient(135deg,var(--sakura),var(--sakura-deep));color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(236,116,191,.22);}
  .wal-list{display:flex;flex-direction:column;gap:2px;}
  .wal-row{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);}
  .wal-row:hover{border-color:var(--sakura);background:#fffafd;}
  .wal-row.is-open{border-color:var(--sakura);border-bottom-left-radius:0;border-bottom-right-radius:0;background:#fffafd;}
  .wal-ico{flex:0 0 auto;font-size:18px;width:24px;text-align:center;}
  .wal-main{flex:1 1 auto;min-width:0;}
  .wal-title{font-weight:600;font-size:13.5px;color:var(--ink,#5b5160);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .wal-sub{font-size:11.5px;color:var(--soft,#8a7f92);margin-top:1px;}
  .wal-amt{flex:0 0 auto;font-family:var(--display);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;}
  .wal-amt-pos{color:var(--mint-deep,#3a9d84);}
  .wal-amt-neg{color:#a88;}
  .wal-exp{flex:0 0 auto;color:var(--soft,#c3b7cc);font-size:12px;width:12px;text-align:center;}
  .wal-detail{border:1.5px solid var(--sakura);border-top:none;border-radius:0 0 14px 14px;background:#fffafd;padding:10px 14px 12px;margin-bottom:2px;}
  .wal-d-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:3px 0;color:var(--soft,#8a7f92);}
  .wal-d-row b{color:var(--ink,#5b5160);font-weight:600;text-align:right;}
  .wal-more-wrap{text-align:center;margin-top:12px;}
  .wal-more{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:8px 18px;font-size:12.5px;color:var(--sakura-deep);font-weight:600;}
  .wal-more:hover{border-color:var(--sakura);background:#fffafd;}
  .wal-empty{text-align:center;padding:34px 18px;color:var(--sakura-deep);font-family:var(--display);font-weight:700;font-size:15px;display:flex;flex-direction:column;gap:6px;}
  .wal-empty span{font-family:var(--body);font-weight:400;font-size:12.5px;color:var(--soft,#8a7f92);}
  /* Part 2H-C — Wallet Activity: renamed section + day-grouped collapsible headers */
  .wal-actsec{display:flex;flex-direction:column;gap:1px;margin:8px 2px 12px;}
  .wal-actsec-t{font-family:var(--display);font-weight:800;font-size:15px;color:var(--sakura-deep);}
  .wal-actsec-s{font-size:11.5px;color:var(--soft,#8a7f92);}
  .wal-day{margin-bottom:10px;}
  .wal-day-head{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:1.5px solid var(--line);border-radius:14px;background:linear-gradient(150deg,#fff,#faf7fd);cursor:pointer;transition:border-color var(--dur-1) var(--ease);}
  .wal-day-head:hover{border-color:var(--sakura);}
  .wal-day.is-open .wal-day-head{margin-bottom:6px;}
  .wal-day-lab{flex:1 1 auto;text-align:left;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.03em;color:var(--ink,#5b5160);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .wal-day-count{flex:0 0 auto;font-size:11px;color:var(--soft,#8a7f92);}
  .wal-day-tot{flex:0 0 auto;font-family:var(--display);font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums;}
  .wal-day-pos{color:var(--mint-deep,#3a9d84);}
  .wal-day-neg{color:#b98a9e;}
  .wal-day-zero{color:var(--soft,#a99fb2);}
  .wal-day-arw{flex:0 0 auto;color:var(--soft,#c3b7cc);font-size:13px;width:12px;text-align:center;}
  /* Part 2I-A — monthly glance (read-only, calm; no charts/bars) */
  .wal-month{background:linear-gradient(150deg,#fff,#fff6fb);border:1.5px solid var(--line);border-radius:18px;padding:13px 14px 14px;margin:0 2px 16px;box-shadow:var(--shadow-sm);}
  .wal-month-head{display:flex;flex-direction:column;gap:1px;margin-bottom:10px;}
  .wal-month-t{font-family:var(--display);font-weight:800;font-size:14.5px;color:var(--sakura-deep);}
  .wal-month-s{font-size:11.5px;color:var(--soft,#8a7f92);}
  .wal-month-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .wal-mo-card{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:11px 10px;text-align:center;}
  .wal-mo-lab{font-size:11px;color:var(--soft,#8a7f92);font-weight:600;letter-spacing:.02em;}
  .wal-mo-val{font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink,#5b5160);margin-top:4px;font-variant-numeric:tabular-nums;}
  .wal-mo-earn{color:var(--mint-deep,#3a9d84);}
  .wal-mo-spent{color:#8f7bb8;}
  .wal-mo-pos{color:var(--mint-deep,#3a9d84);}
  .wal-mo-neg{color:#b98a9e;}
  .wal-mo-zero{color:var(--soft,#a99fb2);}
  /* Part 2I-B — monthly source breakdown ("Where it came from") */
  .wal-src-sec{margin-top:12px;}
  .wal-src-div{height:1.5px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:0 2px 11px;}
  .wal-src-head{display:flex;flex-direction:column;gap:1px;margin-bottom:9px;}
  .wal-src-t{font-family:var(--display);font-weight:800;font-size:13px;color:var(--sakura-deep);}
  .wal-src-s{font-size:11px;color:var(--soft,#8a7f92);}
  .wal-src-grid{display:flex;flex-wrap:wrap;gap:8px;}   /* 2I-D §1 — flow in one clean horizontal row where space allows; wrap naturally on narrow screens */
  .wal-src{flex:1 1 138px;min-width:0;display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:9px 11px;}
  .wal-src-l{font-size:12.5px;font-weight:600;color:var(--ink,#5b5160);}
  .wal-src-a{font-family:var(--display);font-weight:800;font-size:13.5px;color:var(--mint-deep,#3a9d84);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .wal-src-neg{background:#fff6f8;border-color:#f0d7e0;}
  .wal-src-neg .wal-src-a{color:#b98a9e;}
  .wal-src-empty{font-size:12.5px;color:var(--soft,#8a7f92);text-align:center;padding:8px 4px 4px;}
  .wal-treat-sec{margin-top:12px;}
  .wal-treat-head{display:flex;flex-direction:column;gap:1px;margin-bottom:9px;}
  .wal-treat-list{display:flex;flex-direction:column;gap:8px;}
  .wal-treat{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:9px 11px;}
  .wal-treat-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .wal-treat-n{font-size:12.5px;font-weight:600;color:var(--ink,#5b5160);}
  .wal-treat-note{font-size:11px;color:var(--soft,#8a7f92);line-height:1.35;}
  .wal-treat-a{font-family:var(--display);font-weight:800;font-size:13.5px;color:#8f7bb8;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .wal-treat-more{margin-top:9px;width:100%;background:#fff6fb;border:1.5px solid var(--line);border-radius:11px;padding:8px;font-size:12px;font-weight:600;color:var(--sakura-deep);cursor:pointer;}
  .wal-treat-empty{font-size:12.5px;color:var(--soft,#8a7f92);text-align:center;padding:8px 4px 4px;display:flex;flex-direction:column;gap:3px;}
  .wal-treat-empty span{font-size:11px;}
  /* 2I-D §2 — Wallet Activity range tabs (This Week / This Month / All History) */
  .wal-ranges{display:flex;gap:7px;flex-wrap:wrap;margin:0 2px 9px;}
  .wal-range{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:12px;font-weight:700;color:var(--soft,#8a7f92);transition:all var(--dur-1) var(--ease);cursor:pointer;}
  .wal-range:hover{border-color:var(--sakura);color:var(--sakura-deep);}
  .wal-range.on{background:linear-gradient(135deg,#fff,#fff2f9);border-color:var(--sakura);color:var(--sakura-deep);box-shadow:0 2px 8px rgba(236,116,191,.14);}
  /* 2I-D §6-10 — Past Mifu Months archive */
  .wal-pastsec{margin-top:22px;}
  .wal-pm{margin-bottom:9px;}
  .wal-pm-head{display:flex;align-items:center;gap:10px;width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:15px;background:linear-gradient(150deg,#fff,#fff6fb);cursor:pointer;transition:border-color var(--dur-1) var(--ease);text-align:left;}
  .wal-pm-head:hover{border-color:var(--sakura);}
  .wal-pm.is-open .wal-pm-head{margin-bottom:8px;border-color:var(--sakura);}
  .wal-pm-name{flex:0 0 auto;font-family:var(--display);font-weight:800;font-size:13.5px;color:var(--sakura-deep);}
  .wal-pm-nums{flex:1 1 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 12px;font-size:12px;font-weight:600;color:var(--soft,#8a7f92);font-variant-numeric:tabular-nums;}
  .wal-pm-nums .wal-pm-n{font-weight:800;}
  .wal-pm-arw{flex:0 0 auto;color:var(--soft,#c3b7cc);font-size:14px;width:12px;text-align:center;}
  .wal-pm-body{padding:2px 2px 6px;}
  .wal-pm-sub{margin-top:12px;}
  .wal-pm-sub:first-child{margin-top:4px;}
  .wal-pm-subt{font-family:var(--display);font-weight:800;font-size:12.5px;color:var(--sakura-deep);margin-bottom:8px;}
  .wal-wk-list{display:flex;flex-direction:column;gap:7px;}
  .wal-wk{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:8px 11px;flex-wrap:wrap;}
  .wal-wk-lab{font-size:12.5px;font-weight:700;color:var(--ink,#5b5160);font-variant-numeric:tabular-nums;}
  .wal-wk-nums{display:flex;flex-wrap:wrap;gap:3px 11px;font-size:11.5px;font-weight:600;color:var(--soft,#8a7f92);font-variant-numeric:tabular-nums;margin-left:auto;}
  @media(max-width:560px){ .wal-pm-name{flex-basis:100%;} .wal-pm-nums{justify-content:flex-start;} }
  @media(max-width:560px){ .wal-sum{grid-template-columns:1fr;gap:9px;} .wal-card{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:12px 15px;} .wal-c-val{margin-top:0;} .wal-month-cards{gap:7px;} .wal-mo-card{padding:10px 6px;} .wal-mo-val{font-size:16px;} .wal-src{flex-basis:100%;} }
  @keyframes ghWalletFx{ 0%{opacity:0;transform:translate(-50%,-6px) scale(.9);} 14%{opacity:1;transform:translate(-50%,0) scale(1);} 78%{opacity:1;transform:translate(-50%,3px) scale(1);} 100%{opacity:0;transform:translate(-50%,11px) scale(.98);} }
  /* streamer mode: keep a GENERIC sparkle (walletFxLabel() drops the amount) instead of hiding it (§10) */
  /* Part 2F-A — checklist reward config (edit-mode only) + row wrapper */
  .ck-wrap{display:block;}
  .gt-list .ck-wrap + .ck-wrap{border-top:1px solid var(--line);}
  /* Part 2F-B — health check-in reward config panel (edit mode) */
  .hc-rew-list{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:2px;}
  .hc-rew-row{display:flex;flex-direction:column;gap:1px;padding:4px 0;border-bottom:1px solid #fbeef6;}
  .hc-rew-row:last-of-type{border-bottom:none;}
  .hc-rew-name{font-size:12.5px;font-weight:600;color:var(--ink);padding-left:4px;}
  .hc-rew-row .chk-rew{padding:2px 4px 4px 4px;}
  .chk-rew{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:3px 10px 8px 40px;}
  .chk-rew.off{opacity:.5;}
  .chk-rew-on{background:none;border:none;cursor:pointer;font-size:13px;padding:2px;line-height:1;}
  .chk-rew-cur{font-size:12px;color:var(--sakura-deep);font-weight:600;}
  .chk-rew-in{width:56px;padding:3px 5px;font-size:12px;border:1.5px solid var(--line);border-radius:8px;font-variant-numeric:tabular-nums;background:#fff;}
  .chk-rew-in:disabled{opacity:.5;}
  .chk-rew-pills{display:flex;gap:3px;flex-wrap:wrap;}
  .chk-rew-pill{font-size:10.5px;padding:2px 6px;border-radius:999px;border:1px solid var(--line);background:#fff7fc;color:var(--sakura-deep);cursor:pointer;line-height:1.3;}
  .chk-rew-pill:hover{background:#ffeef8;border-color:var(--sakura);}
  .chk-rew-def{background:none;border:none;cursor:pointer;font-size:12px;color:var(--lav-deep);padding:2px;}
  .chk-rew-list{margin:8px 0 2px;padding:8px 10px;border:1px dashed var(--line-2);border-radius:12px;background:#fbfbff;}
  .chk-rew-hd{font-size:11px;font-weight:700;color:var(--sakura-deep);margin-bottom:4px;text-transform:uppercase;letter-spacing:.03em;}
  .chk-rew-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:3px 0;}
  .chk-rew-row + .chk-rew-row{border-top:1px solid var(--line);}
  .chk-rew-lbl{font-size:12px;font-weight:600;color:var(--ink);min-width:78px;flex:0 0 auto;}
  .chk-rew-row .chk-rew{padding:0;flex:1;}
  .pln-rsum-paid{border-color:var(--mint,#6fc3ab);background:linear-gradient(135deg,#fff,#f2fbf7);}
  .pln-rsum-paid .pln-rsum-final .pln-rsum-val{color:var(--mint-deep,#2f9d79);}
  .gh-energy{display:flex;gap:4px;}
  .gh-energy-btn{border:1.5px solid var(--line);background:rgba(255,255,255,.7);border-radius:10px;padding:5px 10px;font-size:16px;cursor:pointer;transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);line-height:1;touch-action:manipulation;}
  .gh-energy-btn.on.energy-low{background:#dde8fb;border-color:var(--peri-deep);}
  .gh-energy-btn.on.energy-medium{background:#fffaed;border-color:#c9a93a;}
  .gh-energy-btn.on.energy-high{background:#fdf0fb;border-color:var(--sakura-deep);}
  /* Part 2F-C §15 — unselected energy for the new Mifu Day: soft red/pink glow, gentle pulse (auto-stilled under reduced-motion/calm via the global guard). No button shows selected. */
  .gh-energy.gh-energy-unset{border-radius:13px;padding:2px;animation:ghEnergyGlow 1.9s ease-in-out infinite;box-shadow:0 0 0 2px rgba(232,96,124,.5),0 0 12px 2px rgba(232,96,124,.4);}
  .gh-energy.gh-energy-unset .gh-energy-btn{border-color:rgba(232,96,124,.45);}
  @keyframes ghEnergyGlow{0%,100%{box-shadow:0 0 0 2px rgba(232,96,124,.42),0 0 8px 1px rgba(232,96,124,.3);}50%{box-shadow:0 0 0 2px rgba(232,96,124,.72),0 0 16px 4px rgba(232,96,124,.55);}}
  /* Part 2F-C §20 — Health-page ♡ rewards config rows/chips */
  .hrew-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid var(--line);}
  .hrew-row:last-of-type{border-bottom:none;}
  .hrew-lbl{font-size:12.5px;font-weight:600;color:var(--ink);}
  .hrew-list{display:flex;flex-wrap:wrap;gap:6px;}
  .hrew-chip{font-size:11.5px;background:#fff5fb;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--ink);}
  .hrew-chip.off{opacity:.5;text-decoration:line-through;}
  @media(max-width:640px){.gh-clock{font-size:24px;}.gh-title-name{font-size:15px;}.gh-ava{width:40px;height:40px;}}
  /* ===== PLANNER REDESIGN ===== */
  .pln-grid{display:flex;gap:14px;align-items:flex-start;}
  .pln-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;}
  @media(max-width:680px){.pln-grid{flex-direction:column;}}
  .pln-sec{background:#fff;border-radius:14px;border:1px solid var(--line);padding:12px 14px;}
  .pln-sec.s-overdue{border-color:rgba(192,86,106,.5);background:rgba(253,228,228,.45);}
  .pln-sec.s-today{border-color:rgba(180,118,74,.4);background:rgba(253,235,215,.4);}
  .pln-sec.s-urgent{border-color:rgba(204,100,60,.35);background:rgba(255,242,232,.35);}
  .pln-sec.s-energy{border-color:rgba(169,143,224,.3);background:rgba(240,236,255,.2);}
  .pln-sh{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
  .pln-sh-ttl{font-size:11px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.07em;margin:0;}
  .pln-sec.s-overdue .pln-sh-ttl{color:#b84060;}
  .pln-sec.s-today .pln-sh-ttl{color:#9e6030;}
  .pln-sec.s-urgent .pln-sh-ttl{color:#b05020;}
  .pln-cnt{font-size:11px;color:var(--ink-soft);background:rgba(169,143,224,.13);padding:1px 7px;border-radius:99px;margin-left:auto;}
  .pln-row{display:flex;align-items:flex-start;gap:7px;padding:5px 0;border-bottom:1px solid var(--line);}
  .pln-row:last-child{border-bottom:none;}
  .pln-row-body{flex:1;min-width:0;}
  .pln-rt{font-size:13px;line-height:1.35;color:var(--ink);word-break:break-word;}
  .pln-rt.done-text{text-decoration:line-through;opacity:.5;}
  .pln-rm{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px;align-items:center;}
  .pln-badge{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:99px;letter-spacing:.03em;white-space:nowrap;}
  .pln-badge.pri-urgent{background:#fde2e4;color:#c33a4d;box-shadow:inset 0 0 0 1px rgba(195,58,77,.25);}   /* 🔴 flashlight: red */
  .pln-badge.pri-high{background:#fdeedb;color:#c67d2a;box-shadow:inset 0 0 0 1px rgba(198,125,42,.25);}     /* 🟠 orange */
  .pln-badge.pri-med{background:#e3f5ea;color:#2f9d6b;box-shadow:inset 0 0 0 1px rgba(47,157,107,.22);}       /* 🟢 green */
  .pln-badge.pri-low{background:#e3ecfe;color:#4f74c9;box-shadow:inset 0 0 0 1px rgba(79,116,201,.22);}       /* 🔵 blue */
  .pln-badge.en-low{background:#dde8fb;color:var(--peri-deep);}
  .pln-badge.en-medium{background:#fffaed;color:#8a6a10;}
  .pln-badge.en-high{background:#fdf0fb;color:var(--sakura-deep);}
  .pln-badge.cat-pill{background:rgba(169,143,224,.1);color:var(--lav-deep);}
  .pln-empty-sm{font-size:11.5px;color:var(--ink-soft);text-align:center;padding:5px 0;}
  .pln-stats{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px;}
  .pln-stat{display:flex;flex-direction:column;align-items:center;padding:6px 10px;background:rgba(169,143,224,.08);border-radius:10px;min-width:52px;}
  .pln-stat-n{font-size:17px;font-weight:700;color:var(--ink);line-height:1;}
  .pln-stat-l{font-size:9px;color:var(--ink-soft);text-align:center;text-transform:uppercase;letter-spacing:.05em;margin-top:2px;}
  .pln-stat.has-alert .pln-stat-n{color:#b84060;}
  .pln-add-bar{display:flex;gap:8px;align-items:center;}
  .pln-add-bar .inp{flex:1;min-width:0;}
  .pln-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);}
  .pln-rem-preview{background:#fff;border-radius:14px;border:1px solid var(--line);padding:10px 14px;}
  .pln-rem-row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-soft);padding:2px 0;}

  /* ===== Planner v2 (2026-07-14) — soft overview with Eggie / Manfu / Mifu lanes ===== */
  .pln-cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 14px;}
  @media(max-width:520px){.pln-cards4{grid-template-columns:repeat(2,1fr);}}
  .pln-c4{background:linear-gradient(160deg,#fbf7ff,#f2f5ff);border:1px solid var(--line);border-radius:16px;padding:12px 8px;text-align:center;box-shadow:var(--shadow-sm);}
  .pln-c4-n{font-size:24px;font-weight:800;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;}
  .pln-c4-l{font-size:10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-top:5px;font-weight:700;}
  .pln-c4.alert{background:linear-gradient(160deg,#fff1f2,#ffe7ec);border-color:rgba(192,86,106,.35);}
  .pln-c4.alert .pln-c4-n{color:#c0566a;}
  .pln-c4.good{background:linear-gradient(160deg,#f1fbf6,#e9fbf3);border-color:rgba(111,195,171,.4);}
  .pln-c4.good .pln-c4-n{color:#2f9d79;}

  /* quick-add bar (overview) — one-line fast add */
  .pln-qbar{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:7px 8px 7px 14px;box-shadow:var(--shadow-sm);}
  .pln-qbar-ic{font-size:16px;color:var(--muted);flex-shrink:0;}
  .pln-qbar-in{flex:1;min-width:0;border:none!important;padding:6px 2px;font-size:14px;box-shadow:none!important;}
  .pln-qbar-add{white-space:nowrap;flex-shrink:0;}
  .pln-qbar-more{flex-shrink:0;background:#fff;border:1px solid var(--line);border-radius:11px;width:38px;height:34px;font-size:16px;color:var(--ink-soft);cursor:pointer;}
  .pln-qbar-more:hover{border-color:var(--peri);color:var(--peri-deep);}
  @media(max-width:520px){.pln-qbar{flex-wrap:wrap;} .pln-qbar-in{flex:1 1 100%;order:-1;}}

  /* Create-new-task card — everything out in the open */
  .pln-create{margin-top:14px;}
  .pln-create-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:15px;}
  .pln-create-sub{font-size:12px;color:var(--ink-soft);}
  .pln-create-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
  @media(max-width:760px){.pln-create-grid{grid-template-columns:1fr;gap:14px;}}
  .pln-create-col{display:flex;flex-direction:column;gap:13px;}
  .pln-ff{display:flex;flex-direction:column;gap:6px;}
  .pln-ff-l{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800;}
  .pln-opt{text-transform:none;letter-spacing:0;color:var(--muted);font-weight:500;font-size:9.5px;}
  .pln-create-acts{display:flex;gap:8px;margin-top:4px;}
  .pln-addbig{flex:1;font-size:13px;padding:11px;}
  /* Part 2C — base reward input + preset pills (soft, compact, doesn't dominate the form) */
  .pln-reward{display:flex;flex-direction:column;gap:8px;}
  .pln-reward-in{display:flex;align-items:center;gap:6px;background:linear-gradient(160deg,#fff6fb,#fdeff8);border:1px solid rgba(236,116,191,.28);border-radius:12px;padding:0 12px;max-width:150px;box-shadow:var(--shadow-sm);}
  .pln-reward-cur{font-size:14px;color:var(--sakura-deep);font-weight:800;}
  .pln-reward-in .inp{border:none;background:transparent;box-shadow:none;padding:9px 0;font-weight:700;color:var(--ink);}
  .pln-reward-in .inp:focus{outline:none;box-shadow:none;}
  .pln-reward-in:focus-within{box-shadow:0 0 0 3px rgba(236,116,191,.22);}
  .pln-reward-presets{display:flex;flex-wrap:wrap;gap:6px;}
  .pln-reward-pill{border:1px solid rgba(236,116,191,.25);background:#fff;color:var(--sakura-deep);font:inherit;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;cursor:pointer;transition:transform .12s,background .12s,box-shadow .12s;}
  .pln-reward-pill:hover{background:#fde2f2;transform:translateY(-1px);box-shadow:var(--shadow-sm);}
  .pln-reward-help{font-size:11px;color:var(--ink-soft);}
  /* Part 2E — ✨ Ask Kiko suggestion (lavender/snowfox accent so it reads as Kiko, not the pink reward chips) */
  .pln-reward-pill.kiko-ask{border-color:rgba(156,138,232,.4);background:linear-gradient(150deg,#f4f0ff,#efe9fe);color:#6a58c4;}
  .pln-reward-pill.kiko-ask:hover{background:#e9e1fc;}
  .kiko-sug{margin-top:9px;padding:11px 12px;background:linear-gradient(160deg,#f7f3ff,#fdf2fb);border:1px solid rgba(156,138,232,.28);border-radius:14px;display:flex;flex-direction:column;gap:8px;animation:kikoPop .22s ease;}
  @keyframes kikoPop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .kiko-sug-head{font-size:12.5px;font-weight:800;color:#6a58c4;display:flex;align-items:center;gap:6px;}
  .kiko-sug-amt{color:var(--sakura-deep);font-weight:800;}
  .kiko-sug-why{display:flex;flex-wrap:wrap;gap:5px;}
  .kiko-chip{font-size:10.5px;font-weight:700;color:#6a58c4;background:rgba(156,138,232,.14);border:1px solid rgba(156,138,232,.22);padding:3px 9px;border-radius:999px;}
  .kiko-sug-low .kiko-sug-why{font-size:11.5px;color:var(--ink-soft);font-weight:600;}
  .kiko-sug-acts{display:flex;flex-wrap:wrap;gap:7px;}
  .kiko-sug-use{font-size:12px;padding:6px 14px;}
  .kiko-sug-x{font-size:11.5px;padding:6px 12px;}
  .pln-rsum-kiko{margin-top:4px;padding-top:8px;border-top:1px dashed rgba(236,116,191,.18);}
  @media (prefers-reduced-motion:reduce){ .kiko-sug{animation:none;} }
  /* Part 2C — quiet reward preview inside the expanded task detail (secondary, never in the rows) */
  .pln-rsum{margin:2px 0 10px;padding:11px 13px;background:rgba(236,116,191,.06);border:1px solid rgba(236,116,191,.16);border-radius:14px;display:flex;flex-direction:column;gap:5px;}
  .pln-rsum-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;}
  .pln-rsum-lbl{color:var(--ink-soft);}
  .pln-rsum-en{color:var(--ink);font-weight:600;}
  .pln-rsum-val{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;}
  .pln-rsum-final{border-top:1px dashed rgba(236,116,191,.22);padding-top:6px;margin-top:1px;}
  .pln-rsum-final .pln-rsum-lbl{color:var(--sakura-deep);font-weight:700;}
  .pln-rsum-final .pln-rsum-val{color:var(--sakura-deep);font-size:13.5px;}

  /* segmented always-visible buttons (source / priority / energy) */
  .pln-seg{display:flex;gap:7px;flex-wrap:wrap;}
  .pln-seg-btn{flex:1 1 auto;min-width:0;font-size:12px;font-weight:700;padding:8px 9px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:.14s;text-align:center;}
  .pln-seg-btn:hover{border-color:var(--peri);}
  .pln-seg-btn.seg-src-mifu{color:var(--sakura-deep);border-color:#f7cbe6;}
  .pln-seg-btn.seg-src-mifu.on{background:#fde2f2;box-shadow:inset 0 0 0 1.5px var(--sakura);}
  .pln-seg-btn.seg-src-eggie{color:#12897b;border-color:#a9e6df;}
  .pln-seg-btn.seg-src-eggie.on{background:#d6f3ef;box-shadow:inset 0 0 0 1.5px #3cc3b3;}
  .pln-seg-btn.seg-src-manfu{color:#6b5bc4;border-color:#d3c9f4;}
  .pln-seg-btn.seg-src-manfu.on{background:#ebe6fb;box-shadow:inset 0 0 0 1.5px #9a89e0;}
  .pln-seg-btn.seg-pri-low{color:#4f74c9;border-color:#c9d8fb;}
  .pln-seg-btn.seg-pri-low.on{background:#e3ecfe;box-shadow:inset 0 0 0 1.5px #7f9ee0;}
  .pln-seg-btn.seg-pri-medium{color:#2f9d6b;border-color:#bfe9d3;}
  .pln-seg-btn.seg-pri-medium.on{background:#e3f5ea;box-shadow:inset 0 0 0 1.5px #5cc192;}
  .pln-seg-btn.seg-pri-high{color:#c67d2a;border-color:#f4dcb8;}
  .pln-seg-btn.seg-pri-high.on{background:#fdeedb;box-shadow:inset 0 0 0 1.5px #e0a557;}
  .pln-seg-btn.seg-pri-urgent{color:#c33a4d;border-color:#f6c8ce;}
  .pln-seg-btn.seg-pri-urgent.on{background:#fde2e4;box-shadow:inset 0 0 0 1.5px #e0808f;}
  .pln-seg-btn.seg-en-low.on{background:#dde8fb;color:var(--peri-deep);box-shadow:inset 0 0 0 1.5px var(--peri);}
  .pln-seg-btn.seg-en-medium.on{background:#f4eefc;color:var(--lav-deep);box-shadow:inset 0 0 0 1.5px var(--lav);}
  .pln-seg-btn.seg-en-high.on{background:#fdf0fb;color:var(--sakura-deep);box-shadow:inset 0 0 0 1.5px var(--sakura);}

  /* tags */
  .pln-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
  .pln-tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;background:#f4eefc;color:var(--lav-deep);border:1px solid #ddcdf6;border-radius:99px;padding:3px 5px 3px 11px;}
  .pln-tag-x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:11px;line-height:1;padding:0 2px;}
  .pln-tag-x:hover{color:#c0566a;}
  .pln-tag-add{display:inline-flex;align-items:center;gap:3px;}
  .pln-tag-in{border:1.5px dashed var(--line-2);border-radius:99px;padding:4px 11px;font-size:11.5px;width:92px;outline:none;background:#fff;color:var(--ink);}
  .pln-tag-in:focus{border-color:var(--peri);}
  .pln-tag-addbtn{border:none;background:rgba(169,143,224,.14);color:var(--lav-deep);border-radius:99px;width:24px;height:24px;font-size:14px;line-height:1;cursor:pointer;font-weight:700;}

  /* links & contacts */
  .pln-links{display:flex;flex-direction:column;gap:7px;}
  .pln-linkrow{display:flex;align-items:center;gap:7px;}
  .pln-link-ic{font-size:14px;flex-shrink:0;}
  .pln-link-in{flex:1;min-width:0;}
  .pln-linkadd{align-self:flex-start;font-size:11.5px;font-weight:700;color:var(--lav-deep);background:rgba(169,143,224,.1);border:1px solid rgba(169,143,224,.28);border-radius:99px;padding:5px 12px;cursor:pointer;}
  .pln-linkadd:hover{background:rgba(169,143,224,.18);}

  /* definition of done + subtasks */
  .pln-dod-box{width:100%;min-height:52px;resize:vertical;line-height:1.45;font-size:12.5px;}
  .pln-step-sub{font-size:11.5px;color:var(--muted);margin:-2px 0 7px;}
  .pln-dsubs{display:flex;flex-direction:column;gap:5px;}
  .pln-dsub{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink);background:#faf8ff;border:1px solid var(--line);border-radius:9px;padding:4px 8px;}
  .pln-step-chk{border:none;background:none;cursor:pointer;font-size:14px;line-height:1;padding:0 2px;flex:none;}
  .pln-step-in{flex:1;min-width:0;border:1px solid transparent;background:transparent;font-size:12.5px;padding:3px 6px;border-radius:7px;color:var(--ink);}
  .pln-step-in:focus{border-color:var(--peri);background:#fff;outline:none;}
  .pln-step-in.pln-step-done{text-decoration:line-through;color:var(--muted);}
  .pln-step-mv{display:inline-flex;flex-direction:column;gap:1px;flex:none;}
  .pln-step-mv button{border:none;background:none;color:var(--muted);cursor:pointer;font-size:9px;line-height:1;padding:1px 3px;}
  .pln-step-mv button:hover:not(:disabled){color:var(--lav-deep);}
  .pln-step-mv button:disabled{opacity:.28;cursor:default;}
  .pln-dsub-empty{font-size:11.5px;color:var(--muted);font-style:italic;}
  .pln-subadd{display:flex;gap:6px;}
  .pln-subadd .inp{flex:1;}

  /* soft footer info strip */
  .pln-create-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;padding:10px 14px;background:rgba(169,143,224,.07);border-radius:12px;font-size:12px;color:var(--ink-soft);}
  .pln-reward-btn{font-size:11.5px;font-weight:700;padding:6px 13px;border-radius:99px;border:1px dashed var(--line-2);background:#fff;color:var(--muted);cursor:not-allowed;opacity:.75;}

  /* ── right side: one cohesive soft "Task Details" card ── */
  .pln-details{display:flex;flex-direction:column;gap:14px;background:linear-gradient(160deg,#fbf9ff,#f6f2fd);border:1px solid rgba(169,143,224,.18);border-radius:22px;padding:20px 20px 22px;box-shadow:0 6px 20px rgba(150,120,210,.09);}
  .pln-details-head{display:flex;flex-direction:column;gap:3px;}
  .pln-details-t{font-size:15px;font-weight:800;color:var(--ink);}
  .pln-details-sub{font-size:12px;color:var(--ink-soft);}
  .pln-pillrow{display:flex;flex-wrap:wrap;gap:9px;}
  .pln-pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid rgba(169,143,224,.3);border-radius:99px;padding:8px 15px;font-size:12.5px;font-weight:700;color:var(--lav-deep);cursor:pointer;box-shadow:0 2px 7px rgba(150,120,210,.08);transition:transform .12s ease,background .12s ease,box-shadow .12s ease;}
  .pln-pill:hover{background:#faf7ff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(150,120,210,.14);}
  .pln-pill:active{transform:translateY(0);}
  .pln-steps{display:flex;flex-direction:column;gap:8px;padding-top:6px;border-top:1px solid rgba(169,143,224,.13);}
  .pln-steps-head{display:flex;align-items:center;gap:8px;}
  .pln-steps-t{font-size:13.5px;font-weight:800;color:var(--ink);}
  .pln-steps-badge{font-size:9.5px;font-weight:700;color:var(--lav-deep);background:rgba(169,143,224,.14);border-radius:99px;padding:2px 8px;letter-spacing:.02em;}
  .pln-steps-sub{font-size:11.5px;color:var(--muted);margin-top:-4px;}
  .pln-stepadd{align-self:flex-start;font-size:12px;font-weight:700;color:var(--lav-deep);background:#fff;border:1px solid rgba(169,143,224,.3);border-radius:99px;padding:7px 15px;cursor:pointer;box-shadow:0 2px 7px rgba(150,120,210,.08);transition:transform .12s ease,background .12s ease;}
  .pln-stepadd:hover{background:#faf7ff;transform:translateY(-1px);}
  .pln-step-ghost{color:var(--muted);font-size:14px;line-height:1;flex:none;padding:0 2px;}
  .pln-subadd-go{padding:6px 12px;}
  /* keep step controls calm until you hover/focus the row */
  .pln-dsub .pln-step-mv,.pln-dsub .pln-tag-x{opacity:0;transition:opacity .12s ease;}
  .pln-dsub:hover .pln-step-mv,.pln-dsub:hover .pln-tag-x,.pln-dsub:focus-within .pln-step-mv,.pln-dsub:focus-within .pln-tag-x{opacity:1;}
  @media(hover:none){.pln-dsub .pln-step-mv,.pln-dsub .pln-tag-x{opacity:1;}}

  /* reused by the notes panel */
  .pln-notes-box{width:100%;min-height:130px;resize:vertical;line-height:1.5;font-size:13px;border-radius:16px;padding:12px 14px;}
  .pln-attach{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;background:rgba(169,143,224,.1);border:1px solid rgba(169,143,224,.28);border-radius:99px;padding:5px 12px;font-size:11.5px;font-weight:700;color:var(--lav-deep);cursor:pointer;}
  .pln-attach:hover{background:rgba(169,143,224,.18);}
  .pln-imgs{display:flex;flex-wrap:wrap;gap:7px;}
  .pln-img{position:relative;display:inline-block;}
  .pln-img img{width:64px;height:64px;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block;}
  .pln-img-x{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;border:none;background:#c0566a;color:#fff;font-size:11px;line-height:1;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.25);}
  .pln-notes-view a,.pln-note a,.pln-tel{color:var(--lav-deep);text-decoration:underline;text-underline-offset:2px;word-break:break-all;}

  .pln-secttl{font-size:13px;font-weight:800;color:var(--lav-deep);margin:16px 2px 8px;letter-spacing:.02em;}
  .pln-reqrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px;}
  @media(max-width:640px){.pln-reqrow{grid-template-columns:1fr;}}
  .pln-reqcard{border-radius:16px;padding:12px 14px;border:1px solid var(--line);box-shadow:var(--shadow-sm);}
  .rc-eggie{background:linear-gradient(155deg,#eefaf7,#dff4f0);border-color:rgba(60,195,179,.32);}
  .rc-manfu{background:linear-gradient(155deg,#f4f1fd,#ece7fb);border-color:rgba(123,107,207,.3);}
  .pln-rc-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
  .pln-rc-ttl{font-size:13px;font-weight:800;color:var(--ink);}
  .rc-eggie .pln-rc-ttl{color:#12897b;} .rc-manfu .pln-rc-ttl{color:#6b5bc4;}
  .pln-rc-count{font-size:10.5px;font-weight:700;background:rgba(255,255,255,.7);border:1px solid var(--line);color:var(--ink-soft);padding:2px 9px;border-radius:99px;}
  .pln-rc-next{font-size:13px;color:var(--ink);line-height:1.35;}
  .pln-rc-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;}
  .pln-rc-sub{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:11.5px;color:var(--ink-soft);margin-top:5px;}
  .pln-rc-note{font-size:11.5px;color:var(--ink-soft);font-style:italic;margin-top:6px;background:rgba(255,255,255,.55);border-radius:10px;padding:6px 9px;}
  .pln-rc-open{margin-top:9px;font-size:11.5px;font-weight:700;color:var(--lav-deep);background:none;border:none;padding:0;cursor:pointer;}
  .pln-rc-open:hover{color:var(--sakura-deep);}
  .pln-rc-empty{font-size:12px;color:var(--ink-soft);}

  .pln-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;}
  .pln-tab{font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:99px;border:1.5px solid transparent;background:rgba(169,143,224,.09);color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
  .pln-tab:hover{color:var(--peri-deep);}
  .pln-tab.on{background:linear-gradient(135deg,var(--peri),var(--sakura));color:#fff;box-shadow:var(--shadow-sm);}
  .pln-tab-b{font-size:9.5px;background:rgba(255,255,255,.35);border-radius:99px;padding:0 5px;min-width:15px;text-align:center;}
  .pln-tab:not(.on) .pln-tab-b{background:#fde4e4;color:#c0566a;}

  .pln-filterbar{margin-bottom:10px;}
  .pln-fbtn{font-size:12px;font-weight:700;padding:6px 12px;border-radius:99px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink-soft);cursor:pointer;}
  .pln-fbtn.on{border-color:var(--peri);color:var(--peri-deep);background:var(--panel-soft);}
  .pln-fclear{font-size:11px;color:var(--muted);background:none;border:none;margin-left:8px;cursor:pointer;text-decoration:underline;}
  .pln-fpanel{margin-top:10px;background:var(--panel-soft);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:9px;}
  .pln-fgrp-l{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:5px;}
  .pln-fchips{display:flex;flex-wrap:wrap;gap:5px;}
  .pln-fchip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink-soft);cursor:pointer;}
  .pln-fchip:hover{border-color:var(--peri);}
  .pln-fchip.on{border-color:var(--lav);background:#f4eefc;color:var(--lav-deep);}

  .pln-list{display:flex;flex-direction:column;gap:14px;}
  /* ===== Planner mini-tables (2026-07-14 rev — aligned DUE / PRIORITY / ENERGY columns) ===== */
  .pln-sechead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:2px 2px 12px;}
  .pln-sechead-ttl{font-size:17px;font-weight:800;color:var(--lav-deep);letter-spacing:.01em;}
  .pln-sechead-sub{font-size:12px;color:var(--ink-soft);}
  .pln-reqsec{background:linear-gradient(180deg,#faf8fe,#fff);}

  /* shared 6-col grid so header labels line up exactly over the row cells:
     check | task | due | priority | energy | arrow */
  .pln-group{--pln-grid:28px minmax(0,1fr) 86px 106px 54px 30px;
    border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);margin-bottom:10px;overflow:hidden;background:#fff;}
  .pln-group.tint-eggie{background:linear-gradient(180deg,#f4fcfa,#fff);border-color:rgba(60,195,179,.24);}
  .pln-group.tint-manfu{background:linear-gradient(180deg,#f7f5fe,#fff);border-color:rgba(123,107,207,.22);}
  .pln-group.tint-mifu{background:linear-gradient(180deg,#fff8fc,#fff);border-color:rgba(236,116,191,.2);}
  .pln-grp-head{display:grid;grid-template-columns:var(--pln-grid);align-items:center;gap:6px;padding:9px 12px 8px;border-bottom:1px solid rgba(228,230,245,.7);}
  .pln-grp-chev,.pln-grp-chev-sp{width:22px;height:22px;font-size:15px;line-height:1;color:var(--muted);transition:transform .18s;justify-self:start;}
  .pln-grp-chev.open{transform:rotate(90deg);}
  .pln-grp-titlewrap{min-width:0;display:flex;flex-direction:column;line-height:1.1;}
  .pln-grp-ttl{font-size:13px;font-weight:800;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pln-grp-tasklbl{font-size:8px;font-weight:700;letter-spacing:.09em;color:var(--muted);margin-top:2px;}
  .pln-cl{font-size:8.5px;font-weight:700;letter-spacing:.07em;color:var(--muted);text-align:center;}
  .pln-grp-cnt{justify-self:end;font-size:10.5px;font-weight:700;color:var(--ink-soft);background:rgba(169,143,224,.14);min-width:20px;text-align:center;padding:1px 6px;border-radius:99px;}

  .pln-cell-lbl{display:none;}   /* per-cell mobile labels, shown only on narrow screens */
  .pln-trow{transition:background .15s;}
  .pln-trow + .pln-trow{border-top:1px solid rgba(228,230,245,.65);}
  .pln-trow:hover{background:rgba(169,143,224,.05);}
  .pln-trow.is-open{background:rgba(169,143,224,.07);}
  .pln-trow-grid{display:grid;grid-template-columns:var(--pln-grid);align-items:center;gap:6px;padding:9px 12px;}
  .pln-tr-check{font-size:18px;justify-self:start;}
  .pln-tr-main{min-width:0;}
  .pln-tr-title{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3;word-break:break-word;padding:0;}
  .pln-tr-title.done-text{text-decoration:line-through;opacity:.5;font-weight:500;}
  .pln-tr-sub{font-size:11px;color:var(--ink-soft);margin-top:2px;line-height:1.3;}
  .pln-tr-src{font-weight:700;}
  .pln-tr-cat{color:var(--ink-soft);}
  .pln-tr-mk{color:var(--muted);white-space:nowrap;}
  .pln-tr-due{font-size:11.5px;font-weight:600;color:var(--ink-soft);text-align:center;white-space:nowrap;}
  .pln-tr-due.due-today{color:var(--sakura-deep);font-weight:700;}
  .pln-tr-due.due-late{color:#c0566a;font-weight:700;}
  .pln-tr-due.due-none,.pln-tr-due.due-done{color:var(--muted);font-weight:500;}
  .pln-tr-pri{justify-self:center;}
  .pln-tr-en{font-size:16px;text-align:center;}
  .pln-tr-arrow{font-size:19px;line-height:1;color:var(--muted);justify-self:center;transition:transform .18s;}
  .pln-tr-arrow.open{transform:rotate(90deg);color:var(--lav-deep);}
  .pln-trow.is-done .pln-tr-title,.pln-trow.is-done .pln-tr-sub,.pln-trow.is-done .pln-tr-due{opacity:.72;}

  .pln-ppill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 9px 3px 8px;border-radius:99px;white-space:nowrap;}
  .pln-ppill .pln-pdot{width:7px;height:7px;border-radius:99px;flex-shrink:0;}
  .pln-ppill.pri-urgent{background:#fde2e4;color:#c33a4d;}  .pln-ppill.pri-urgent .pln-pdot{background:#e0566a;}
  .pln-ppill.pri-high{background:#fdeedb;color:#c67d2a;}    .pln-ppill.pri-high .pln-pdot{background:#ea9a3e;}
  .pln-ppill.pri-med{background:#e3f5ea;color:#2f9d6b;}     .pln-ppill.pri-med .pln-pdot{background:#46b483;}
  .pln-ppill.pri-low{background:#e3ecfe;color:#4f74c9;}     .pln-ppill.pri-low .pln-pdot{background:#6f93de;}

  /* detail panel spans the full row, indented under the task column */
  .pln-trow .pln-detail{margin:0 12px 10px 46px;}

  @media(max-width:640px){
    /* narrow: metadata wraps under the title instead of aligned columns */
    .pln-grp-head{grid-template-columns:24px minmax(0,1fr) auto;}
    .pln-grp-head .pln-cl{display:none;}
    .pln-trow-grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:5px 12px;}
    .pln-tr-check{order:0;}
    .pln-tr-main{order:1;flex:1 1 62%;min-width:0;}
    .pln-tr-arrow{order:2;margin-left:auto;align-self:flex-start;}
    .pln-tr-due,.pln-tr-pri,.pln-tr-en{margin-left:30px;}
    .pln-tr-due{order:4;text-align:left;}
    .pln-tr-pri{order:5;}
    .pln-tr-en{order:6;}
    .pln-cell-lbl{display:inline;font-size:9px;font-weight:700;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;}
    .pln-trow .pln-detail{margin-left:30px;}
  }

  .pln-detail{margin:9px 0 2px 27px;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:12px;}
  .pln-fld{margin-bottom:8px;}
  .pln-fld-l{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:2px;}
  .pln-fld-v{font-size:12.5px;color:var(--ink);line-height:1.45;word-break:break-word;}
  .pln-note{color:var(--ink-soft);font-style:italic;}
  .pln-sub{display:flex;flex-direction:column;gap:3px;}
  .pln-sub-row{display:flex;align-items:center;gap:7px;}
  .pln-detail-meta{font-size:10.5px;color:var(--muted);margin:8px 0 10px;}
  .pln-detail-acts{display:flex;flex-wrap:wrap;gap:6px;}
  .pln-detail-acts .btn{font-size:11px;padding:5px 11px;}
  .pln-empty2{font-size:12.5px;color:var(--ink-soft);text-align:center;padding:16px 10px;}
  .pln-group .pln-empty2{padding:12px;}

  /* ===== 🔔 Reminders v2 — overview + progressive create form ===== */
  .pill-peach{background:rgba(243,169,120,.18);color:#c47a3d;}
  .rc-card{margin-top:14px;}
  .rc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
  .rc-title{font-size:19px;font-weight:800;color:var(--ink);margin:0;}
  .rc-sub{font-size:12.5px;color:var(--ink-soft);margin:3px 0 0;}
  .rc-notif{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line-2);border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:700;color:var(--lav-deep);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s,border-color .12s;}
  .rc-notif:hover{transform:translateY(-1px);border-color:var(--lav);box-shadow:0 4px 14px rgba(141,111,209,.18);}
  .rc-arw{transition:transform .15s;} .rc-notif:hover .rc-arw{transform:translateX(3px);}
  .rc-panels{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .rc-panel{border-radius:20px;padding:16px 16px 14px;border:1.5px solid transparent;}
  .rc-today{background:rgba(255,158,216,.09);border-color:rgba(255,158,216,.34);}
  .rc-soon{background:rgba(169,143,224,.10);border-color:rgba(169,143,224,.30);}
  .rc-phead{display:flex;align-items:center;gap:9px;margin-bottom:11px;}
  .rc-pttl{font-size:15.5px;font-weight:800;}
  .rc-today .rc-pttl{color:var(--sakura-deep);} .rc-soon .rc-pttl{color:var(--lav-deep);}
  .rc-count{font-size:11.5px;font-weight:800;min-width:22px;height:22px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;color:#fff;}
  .rc-today .rc-count{background:var(--sakura);} .rc-soon .rc-count{background:var(--lav);}
  .rc-rows{display:flex;flex-direction:column;gap:9px;}
  .rc-row{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:14px;padding:11px 12px;box-shadow:0 1px 4px rgba(120,110,160,.06);transition:transform .12s,box-shadow .12s;}
  .rc-row:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(120,110,160,.12);}
  .rc-circle{position:relative;flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);background:#fff;cursor:pointer;padding:0;transition:border-color .15s,background .15s;}
  .rc-circle::after{content:"";position:absolute;top:-12px;left:-12px;right:-12px;bottom:-12px;}   /* hit-slop: 20px visual -> 44px tap target, same trick as .gg-chk */
  .rc-circle:focus-visible{outline:2px solid var(--peri-deep);outline-offset:2px;}
  .rc-today .rc-circle:hover{border-color:var(--sakura-deep);background:rgba(255,158,216,.2);}
  .rc-soon .rc-circle:hover{border-color:var(--lav-deep);background:rgba(169,143,224,.2);}
  .rc-rmain{flex:1 1 auto;min-width:0;cursor:pointer;}
  .rc-rtitle{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rc-rmeta{font-size:11.5px;color:var(--ink-soft);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .rc-mic{opacity:.75;} .rc-dot{opacity:.5;}
  .rc-arrow{flex:0 0 auto;background:none;border:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px;transition:transform .12s,color .12s;}
  .rc-row:hover .rc-arrow{color:var(--lav-deep);transform:translateX(2px);}
  .rc-empty{font-size:12px;color:var(--ink-soft);text-align:center;padding:14px 8px;}
  .rc-addwrap{display:flex;justify-content:center;margin-top:16px;}
  .rc-addbtn{border:1.5px dashed rgba(255,158,216,.5);background:rgba(255,158,216,.07);color:var(--sakura-deep);font-weight:800;font-size:14px;border-radius:16px;padding:13px 26px;cursor:pointer;width:100%;max-width:none;transition:background .15s,transform .12s,border-color .15s;}
  .rc-addbtn:hover{background:rgba(255,158,216,.14);border-color:var(--sakura);transform:translateY(-1px);}
  /* open state — create form */
  .rc-form{margin-top:16px;background:linear-gradient(180deg,#fbf9ff 0%,#fff 60%);border:1.5px solid rgba(169,143,224,.28);border-radius:20px;padding:18px 18px 16px;box-shadow:0 6px 22px rgba(141,111,209,.10);}
  .rc-fhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px;}
  .rc-ftitle{font-size:16px;font-weight:800;color:var(--ink);margin:0;}
  .rc-fsub{font-size:12px;color:var(--ink-soft);margin:3px 0 0;}
  .rc-fx{background:none;border:none;font-size:16px;color:var(--muted);cursor:pointer;line-height:1;padding:2px 4px;}
  .rc-fx:hover{color:var(--sakura-deep);}
  .rc-frow{margin-bottom:14px;}
  .rc-flbl{display:block;font-size:11px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;letter-spacing:.02em;}
  .rc-ftext{font-size:14px;padding:11px 13px;}
  .rc-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px;}
  .rc-fgroup{margin-bottom:14px;}
  .rc-fgrid .rc-fgroup{margin-bottom:0;}
  .rc-btns{display:flex;flex-wrap:wrap;gap:7px;}
  .rc-opt{background:#fff;border:1.5px solid var(--line-2);border-radius:12px;padding:8px 13px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:all .13s;}
  .rc-opt:hover{border-color:var(--lav);}
  .rc-opt.on{background:linear-gradient(135deg,var(--sakura) 0%,var(--lav) 100%);border-color:transparent;color:#fff;box-shadow:0 3px 10px rgba(169,143,224,.3);}
  .rc-fmini{max-width:180px;margin-top:9px;}
  .rc-custom{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--ink-soft);flex-wrap:wrap;}
  .rc-fnum{width:72px;text-align:center;} .rc-funit{width:110px;}
  .rc-more{background:rgba(169,143,224,.08);border:1.5px solid rgba(169,143,224,.25);border-radius:12px;padding:8px 15px;font-size:12.5px;font-weight:700;color:var(--lav-deep);cursor:pointer;transition:background .13s;}
  .rc-more:hover{background:rgba(169,143,224,.16);}
  .rc-optional{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:rgba(155,150,182,.14);border-radius:999px;padding:2px 7px;margin-left:5px;}
  .rc-fhint{font-size:11px;color:var(--ink-soft);margin:8px 0 0;}
  .rc-factions{display:flex;align-items:center;gap:9px;margin-top:18px;}
  .rc-spacer{flex:1 1 auto;}
  .rc-del{background:none;border:1.5px solid rgba(236,116,191,.35);color:var(--sakura-deep);border-radius:12px;padding:8px 13px;font-size:12px;font-weight:700;cursor:pointer;}
  .rc-del:hover{background:rgba(255,158,216,.1);}
  .rc-cancel{font-size:13px;} .rc-submit{font-size:13px;}
  .rc-flash{animation:rcFlash 1.5s ease;}
  @keyframes rcFlash{0%,100%{box-shadow:var(--shadow-sm);}30%{box-shadow:0 0 0 3px rgba(255,158,216,.45);}}
  /* Kiko speech-bubble action buttons (due reminders) */
  .kb-acts{display:block;margin-top:6px;}
  .kb-acts button{background:rgba(255,255,255,.85);border:1px solid rgba(169,143,224,.4);border-radius:999px;font-size:11px;font-weight:700;color:var(--lav-deep);padding:3px 10px;margin-right:6px;cursor:pointer;}
  /* Settings → notifications */
  .ns-status{display:flex;flex-direction:column;gap:8px;}
  .ns-row{display:flex;align-items:flex-start;gap:11px;background:#fbf9ff;border:1px solid var(--line);border-radius:13px;padding:10px 12px;}
  .ns-ic{font-size:17px;line-height:1.2;}
  .ns-main{flex:1 1 auto;min-width:0;}
  .ns-name{font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
  .ns-note{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
  .ns-dp{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);font-weight:600;}
  .ns-dp input{width:118px;}

  @media(max-width:640px){
    .rc-panels{grid-template-columns:1fr;}
    .rc-fgrid{grid-template-columns:1fr;gap:14px;}
    .rc-head{flex-direction:column;} .rc-notif{align-self:flex-start;}
  }

/* ===== Weight — exact in-your-face stats (2026-07-14) ===== */
.wd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 2px;}
.wd-stat{background:#fff;border:1px solid var(--line,#efeaf7);border-radius:16px;padding:12px 10px;text-align:center;box-shadow:0 2px 8px rgba(150,130,200,.06);}
.wd-stat .label{margin:0 0 4px;}
.wd-big{font-family:var(--display);font-size:24px;font-weight:800;line-height:1.05;color:var(--ink);letter-spacing:-.5px;}
.wd-big .wd-u{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-soft);margin-left:2px;}
.wd-big.wd-down{color:var(--mint);}   /* lost weight */
.wd-big.wd-up{color:var(--lav-deep);} /* gained — calm, never punishing */
.wd-big.wd-flat{color:var(--ink-soft);}
.wd-sub{font-size:10.5px;color:var(--ink-soft);margin-top:3px;line-height:1.25;}
@media(max-width:520px){ .wd-stats{gap:7px;} .wd-big{font-size:20px;} .wd-stat{padding:10px 6px;} }

/* ===== 🔒 Stream-safe mode — blur money & health numbers for screen-share / streaming =====
   Any element tagged .ss-hide is blurred while <body> has .stream-safe.
   FUTURE: give any pocket-money / wallet / reward number the class "ss-hide" and it's covered automatically. */
body.stream-safe .ss-hide{
  filter: blur(10px) !important;
  -webkit-filter: blur(10px) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: none !important;
  border-radius: 8px;
  transition: filter .18s ease;
}
/* Wallet: a 10px blur erases a 14px number into "empty space" and reads as broken.
   Scoped override so the wallet's hidden state is a clean, obvious mask (€ •••) — money still
   covered for streaming, but never looks empty. Normal (non-stream-safe) mode shows crisp €0.00. */
body.stream-safe .gh-wallet .gh-wallet-amt{ filter:none !important; -webkit-filter:none !important; color:transparent; position:relative; }
body.stream-safe .gh-wallet .gh-wallet-amt::after{ content:"€ •••"; position:absolute; left:0; top:0; color:var(--sakura-deep); letter-spacing:.04em; pointer-events:none; }
/* the quick-toggle chip: soft idle, clear 'hidden' state when on */
.ssChip{ cursor:pointer; }
.ssChip.on{ color:var(--lav-deep); border-color:#ddcdf6; background:#f6f0ff; }

  /* ===== 🗂️ Content Planner (Creator → Planner) ===== */
  .kanban.cp7{grid-template-columns:repeat(7,minmax(150px,1fr));}
  @media (max-width:640px){ .kanban.cp7{grid-template-columns:1fr;} }
  .meter{position:relative;height:10px;border-radius:999px;background:#eef0fa;overflow:hidden;}
  .meter>i{position:absolute;top:0;bottom:0;background:rgba(117,138,198,.18);border-radius:999px;}
  .meter>b{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--peri),var(--sakura));border-radius:999px;transition:width .3s ease;}
  .meter.ok>b{background:linear-gradient(90deg,#57c7a8,#3a9d83);}
  .cp-chip{font-size:10.5px;line-height:1.3;background:#fff;border:1px solid var(--line);border-radius:7px;padding:2px 5px;margin-top:2px;cursor:grab;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
  .cp-chip:active{cursor:grabbing;}
  .cp-tray.drag-over{background:rgba(169,143,224,.14);border-color:var(--lav-deep);}
  /* 📓 notepad rich docs */
  .cnp-bar{display:flex;flex-wrap:wrap;gap:3px;border:1px solid var(--line);border-bottom:none;border-radius:12px 12px 0 0;padding:6px;background:var(--panel-soft);}
  .cnp-bar button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:3px 8px;font-size:11.5px;cursor:pointer;color:var(--ink);}
  .cnp-bar button:active{transform:scale(.95);}
  .cnp-bar .sep{width:1px;background:var(--line);margin:2px 3px;}
  .cnp-doc{font-size:13.5px;line-height:1.65;color:var(--ink);}
  .cnp-doc h1{font-size:22px;margin:14px 0 6px;font-family:var(--display);}
  .cnp-doc h2{font-size:17px;margin:12px 0 5px;font-family:var(--display);}
  .cnp-doc h3{font-size:14.5px;margin:10px 0 4px;font-family:var(--display);}
  .cnp-doc p{margin:6px 0;}
  .cnp-doc ul,.cnp-doc ol{padding-left:22px;margin:6px 0;}
  .cnp-doc img{max-width:100%;border-radius:10px;display:block;margin:8px 0;}
  .cnp-doc table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12.5px;}
  .cnp-doc th,.cnp-doc td{border:1px solid var(--line);padding:5px 8px;text-align:left;min-width:40px;}
  .cnp-doc th{background:var(--panel-soft);font-weight:700;}
  .cnp-doc hr{border:none;border-top:1px solid var(--line);margin:12px 0;}
  .cnp-ed{border:1px solid var(--line);border-radius:0 0 12px 12px;min-height:220px;max-height:52vh;overflow:auto;padding:12px;background:#fff;outline:none;}
  .cnp-ed:empty::before{content:attr(data-ph);color:var(--muted);}
  .cnp-view{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff;max-height:60vh;overflow:auto;}
  /* fluid planner drag (ported from Eggie's OS) — the source card becomes a dashed placeholder
     that previews the landing slot live; the clone chases the pointer (engine in view-creator.js) */
  .citem{transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .15s,box-shadow .15s,opacity .15s;}
  .citem:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
  .citem-src{opacity:.35;outline:2px dashed var(--lav);outline-offset:-2px;}
  .citem-src *{pointer-events:none;}
  .drag-clone{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;border-radius:12px;box-shadow:0 16px 38px rgba(90,80,140,.32);opacity:.97;}
  body.dragging-cplan,body.dragging-cplan *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important;}
  .kcol.drop-hot{background:rgba(169,143,224,.14);border-color:var(--lav);}
  .cp-chip{transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .12s,opacity .12s,box-shadow .12s;}
  .cp-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
  .cp-cell.drop-hot,.cp-tray.drop-hot{background:rgba(169,143,224,.18);border-color:var(--lav-deep);transform:scale(1.02);}
  body.calm .citem:hover,body.calm .cp-chip:hover,body.calm .cp-cell.drop-hot,body.calm .cp-tray.drop-hot{transform:none;}

/* ===== 🗓 irminsul-style gacha calendar (2026-07-27) ===== */
.gc-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;}
.gc-dow{font-size:9.5px;font-weight:800;letter-spacing:.05em;color:var(--muted);text-align:center;padding:2px 0;}
.gc-cell{min-height:72px;border:0.5px solid var(--line);border-radius:8px;padding:2px 2px 3px;overflow:hidden;display:flex;flex-direction:column;gap:2px;background:var(--panel,#fff);}
.gc-cell.gc-pad{background:transparent;border-color:transparent;}
.gc-cell.gc-today{box-shadow:inset 0 0 0 2px var(--lav-deep,#758ac6);}
.gc-dn{font-size:10px;font-weight:700;color:var(--muted);padding-left:2px;}
.gc-today .gc-dn{color:var(--lav-deep,#758ac6);}
.gc-ev{display:flex;align-items:center;gap:3px;font-size:10px;font-weight:700;line-height:1.25;padding:2px 4px;white-space:nowrap;overflow:hidden;min-height:16px;}
.gc-ev-end{font-weight:600;font-style:italic;}
.gc-evt{overflow:hidden;text-overflow:ellipsis;}
.gc-more{font-size:9px;color:var(--muted);padding-left:3px;}
.gc-lg{font-size:11px;display:inline-flex;align-items:center;gap:5px;border-width:1.5px;}
@media(max-width:640px){ .gc-cell{min-height:54px;} .gc-ev .gc-evt{display:none;} .gc-ev{justify-content:center;} }

/* ===== 🦊 Kiko Notes — Part 1.1 (2026-08-06): polish pass on the desk stickies + right drawer =====
   Deliberately NOT a boxed .panel — these should read as little notes Kiko left on the desk,
   not another productivity card. Colors: pink=today/important, cream=catch-up, lavender=upcoming/
   prep, blue=external event (reserved for Part 3 livestream data). */
.kiko-desk-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px 14px;padding:2px 2px 4px;}
.kiko-note{position:relative;width:196px;min-height:126px;border-radius:12px;padding:16px 14px 13px;
  box-shadow:0 8px 18px rgba(120,110,160,.20),0 2px 5px rgba(120,110,160,.12);
  transform:rotate(var(--rot,0deg));transition:transform .18s ease,box-shadow .18s ease,opacity .2s ease;
  cursor:pointer;font-family:var(--sans);}
.kiko-note:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 14px 28px rgba(120,110,160,.30);}
.kiko-note--pink{background:linear-gradient(160deg,#fff2f9,#ffe1f1);}
.kiko-note--cream{background:linear-gradient(160deg,#fff9f0,#fdecd8);}
.kiko-note--lav{background:linear-gradient(160deg,#f8f2ff,#ece0fb);}
.kiko-note--blue{background:linear-gradient(160deg,#f0f6fe,#dfeafb);}
.kiko-note-tape{position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:38px;height:16px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.75);
  border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.08);pointer-events:none;}
.kiko-note-x{position:absolute;top:7px;right:7px;border:none;background:rgba(255,255,255,.55);
  color:var(--ink-soft);width:20px;height:20px;border-radius:50%;font-size:11px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;}
.kiko-note-x:hover{background:#fff;color:var(--ink);}
.kiko-note-title{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink);
  margin:6px 0 5px;line-height:1.28;}
.kiko-note-when{font-size:11.5px;font-weight:800;letter-spacing:.02em;margin:0 0 6px;}
.kiko-note--pink .kiko-note-when{color:var(--sakura-deep);}
.kiko-note--cream .kiko-note-when{color:#c07a2e;}
.kiko-note--lav .kiko-note-when{color:var(--lav-deep);}
.kiko-note--blue .kiko-note-when{color:var(--peri-deep);}
.kiko-note-msg{font-size:12px;color:var(--ink-soft);line-height:1.5;}
.kiko-note--leaving{transform:scale(.93) translateX(16px) rotate(0deg);opacity:0;pointer-events:none;}
@media(max-width:520px){ .kiko-note{width:calc(50% - 7px);min-width:0;} }

/* ── drawer: fuller-context STICKY NOTES pinned to a fridge/memo board (2026-08-06 redesign) —
   deliberately distinct markup from the Home glance stickies (.kiko-dcard, not .kiko-note): title
   + badge, a when-line with a tiny icon, a fuller Kiko sentence, a quiet source footer, and a
   tape/magnet + tiny sticker so it reads as pinned paper, not a boxed app card. Rotation is a
   little more restrained than the Home stickies (denser grid, needs to stay easy to read). */
.kiko-dcard{position:relative;border-radius:6px;padding:13px 13px 11px;font-family:var(--sans);
  transform:rotate(var(--rot,0deg));box-shadow:0 3px 8px rgba(120,90,100,.14),0 1px 2px rgba(120,90,100,.10);}
.kiko-dcard--pink{background:linear-gradient(160deg,#fff2f9,#ffe1ef);}
.kiko-dcard--cream{background:linear-gradient(160deg,#fffaf1,#fdedd9);}
.kiko-dcard--lav{background:linear-gradient(160deg,#f9f3ff,#ece0fb);}
.kiko-dcard--blue{background:linear-gradient(160deg,#f1f7fe,#e0ecfb);}
.kiko-dcard--prominent{box-shadow:0 6px 16px rgba(120,90,100,.20),0 2px 4px rgba(120,90,100,.12);}
.kiko-dcard--focus{outline:2px solid var(--sakura-deep);outline-offset:2px;}
/* empty-board fallback note (2026-08-06, Part 2.1) — same sticky language, deliberately quieter
   than an active note (lighter shadow, softer title weight) so it reads as reassuring, not urgent. */
.kiko-dcard--empty{box-shadow:0 2px 5px rgba(120,90,100,.10);}
.kiko-dcard--empty .kiko-dcard-title{font-weight:600;}
.kiko-dcard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;}
.kiko-dcard-title{font-family:var(--display);font-weight:700;font-size:13px;color:var(--ink);line-height:1.3;}
.kiko-dcard-badge{flex-shrink:0;font-size:9.5px;font-weight:800;letter-spacing:.03em;
  padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.6);}
.kiko-dcard-badge--pink{color:var(--sakura-deep);}
.kiko-dcard-badge--cream{color:#c07a2e;}
.kiko-dcard-badge--lav{color:var(--lav-deep);}
.kiko-dcard-badge--blue{color:var(--peri-deep);}
.kiko-dcard-when{font-size:11px;color:var(--ink-soft);margin-top:5px;display:flex;align-items:center;gap:4px;}
.kiko-dcard-body{font-size:11.5px;color:var(--ink-soft);line-height:1.48;margin-top:6px;}
.kiko-dcard-source{font-size:9px;color:var(--muted);opacity:.75;margin-top:8px;font-style:italic;}
/* 🦊 quiet per-card jump shortcut — sits under the body text, above the source line (ported from Eggie OS's eu-dcard-go .311 polish) */
.kiko-dcard-go{display:inline-flex;align-items:center;gap:3px;margin-top:8px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.5);border-radius:999px;padding:2px 9px;font-family:var(--sans);font-size:10px;font-weight:800;color:var(--ink-soft);cursor:pointer;}
.kiko-dcard-go:hover{background:#fff;color:var(--ink);}

/* ── fridge-board decorations: tape / magnets / tiny stickers, pure CSS + emoji, at most 2 per
   note (1 "attachment" + 1 corner sticker), always positioned at corners so they never sit over
   the title/body text. aria-hidden — purely decorative. ── */
.kiko-deco-tape{position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:42px;height:15px;border-radius:2px;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 4px,rgba(255,255,255,.18) 4px 8px);
  box-shadow:0 2px 3px rgba(0,0,0,.10);}
.kiko-deco-tape--pink{background-color:rgba(255,158,216,.55);}
.kiko-deco-tape--cream{background-color:rgba(243,169,120,.5);}
.kiko-deco-tape--lav{background-color:rgba(169,143,224,.5);}
.kiko-deco-tape--blue{background-color:rgba(159,195,232,.5);}
.kiko-deco-tape--gray{background-color:rgba(190,186,210,.4);}
.kiko-deco-magnet{position:absolute;width:19px;height:19px;border-radius:50%;pointer-events:none;
  display:flex;align-items:center;justify-content:center;font-size:10px;
  box-shadow:0 3px 6px rgba(0,0,0,.16),inset 0 1px 2px rgba(255,255,255,.7);}
.kiko-deco-magnet--tl{top:-8px;left:-6px;} .kiko-deco-magnet--tr{top:-8px;right:-6px;}
.kiko-deco-magnet--pink{background:linear-gradient(160deg,#ffd3ec,#ff9ed8);}
.kiko-deco-magnet--cream{background:linear-gradient(160deg,#ffe3bd,#f3a978);}
.kiko-deco-magnet--lav{background:linear-gradient(160deg,#e3d4fb,#a98fe0);}
.kiko-deco-magnet--blue{background:linear-gradient(160deg,#d6e8fb,#9fc3e8);}
.kiko-deco-sticker{position:absolute;font-size:14px;pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.14));}
.kiko-deco-sticker--br{bottom:-6px;right:-5px;transform:rotate(9deg);}
.kiko-deco-sticker--bl{bottom:-6px;left:-5px;transform:rotate(-9deg);}

/* ── handle + panel now share ONE positioned/animated shell (#kikoDrawer itself) instead of
   being two independent fixed elements (2026-08-06 — that's what let them drift apart / left
   the handle stranded at a fixed screen spot while the panel slid on its own). The shell's
   width is EXACTLY handle-width + panel-width, and a single transform on the shell slides both
   as one unit: closed = shifted right by the panel's width (only the handle's sliver still
   shows, flush against the shell's — and therefore the viewport's — right edge); open = shifted
   to 0 (handle sits flush against the panel's left edge, panel fully in view). */
#kikoDrawer{ --kw:min(320px,88vw); --hw:26px; position:fixed;top:0;right:0;bottom:0;z-index:88;
  width:calc(var(--hw) + var(--kw)); transform:translateX(var(--kw));
  transition:transform .32s cubic-bezier(.16,.84,.44,1); pointer-events:none; }
#kikoDrawer.is-open{ transform:translateX(0); }
#kikoDrawer > *{ pointer-events:auto; }
.kiko-handle{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:2;
  /* width is --hw + 2px (not just --hw): a couple px of deliberate overlap into the panel's
     side, painted over since the handle sits above it (z-index 2 > 1) — sub-pixel rounding on
     an animated calc()+transform seam is a known hairline-gap source, and overlapping is the
     standard fix (cheaper/more reliable than chasing the exact rounding culprit). Doesn't touch
     --hw itself, so the shell's closed-state flush-edge math is unaffected. */
  width:calc(var(--hw) + 2px);height:52px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#fff5fa,#faeafd);color:var(--sakura-deep);
  border:1px solid var(--line);border-right:none;border-radius:14px 0 0 14px;
  font-size:17px;font-weight:700;line-height:1;cursor:pointer;
  box-shadow:-3px 3px 12px rgba(120,110,160,.18);transition:box-shadow .18s ease,filter .18s ease;}
.kiko-handle:hover{box-shadow:-4px 4px 16px rgba(120,110,160,.26);filter:brightness(1.03);}
/* pastel fridge/memo-board surface — kawaii+flat, not a literal metal texture: a warm blush
   base + a soft inset highlight/shadow pair for a little board "depth" instead of a flat card. */
.kiko-panel{position:absolute;right:0;top:0;bottom:0;z-index:1;width:var(--kw);
  background:linear-gradient(175deg,#fff3f8 0%,#fdf1ec 55%,#fbeee8 100%);
  box-shadow:-10px 0 32px rgba(120,110,160,.26),inset 0 0 0 1px rgba(255,255,255,.5),inset 0 1px 14px rgba(210,170,180,.16);
  border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;}
.kiko-drawer-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding:16px 16px 12px;border-bottom:1px solid var(--line);}
.kiko-drawer-title{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);}
.kiko-drawer-sub{font-size:11px;color:var(--muted);margin-top:2px;}
/* tiny "fridge-door overview" line — counts only, no progress bars/task language, and it just
   omits itself if every count is 0 rather than showing an empty "0 · 0 · 0" row. */
.kiko-drawer-summary{font-size:10px;font-weight:700;color:var(--ink-soft);margin-top:6px;letter-spacing:.01em;}
.kiko-drawer-head-deco{font-size:16px;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.12));}
.kiko-drawer-body{flex:1;overflow-y:auto;padding:18px 18px 22px;}
.kiko-drawer-section{margin-bottom:22px;}
/* the "storage area" divider — a little extra air + a faint dashed line so Tucked away reads as
   a separate lower shelf, not another active section on the board. */
.kiko-drawer-section--tucked{margin-top:8px;padding-top:16px;border-top:1px dashed var(--line-2);}
.kiko-drawer-section-label{font-family:var(--display);font-size:12px;font-weight:700;color:var(--ink-soft);
  margin-bottom:12px;}
.kiko-drawer-grid{display:flex;flex-direction:column;gap:20px;}
/* "Kiko noticed" and "Coming up" sit side by side but each keeps its OWN heading directly above
   its own card(s) — .kiko-drawer-col is just a normal flow box (label, then its grid), so on
   mobile when the columns collapse to one, each label stays attached to its own card. */
.kiko-drawer-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:0 12px;align-items:start;}
@media(max-width:480px){ .kiko-drawer-cols{grid-template-columns:1fr;gap:20px;} }
.kiko-drawer-empty{position:relative;font-size:11.5px;color:var(--muted);line-height:1.5;
  border:1.5px dashed var(--line-2);border-radius:8px;padding:16px 12px 12px;margin-top:8px;
  background:rgba(255,255,255,.35);}
@media(max-width:640px){ #kikoDrawer{ --kw:100vw; } .kiko-panel{ border-left:none; } }
/* ============================================================
   🌙 APPEARANCE SYSTEM — dark mode + custom accent theming
   Auto-generated coverage block (2026-08-12). See docs/appearance for the spec.
   ============================================================ */

/* ---- 1. flat #fff component backgrounds -> panel/raised surface ---- */
[data-theme="dark"] .inp,
[data-theme="dark"] .btn,
[data-theme="dark"] .chip,
[data-theme="dark"] .seg button.on,
[data-theme="dark"] .scale button,
[data-theme="dark"] .chiptog,
[data-theme="dark"] .sitebtn,
[data-theme="dark"] .step,
[data-theme="dark"] .citem,
[data-theme="dark"] .flip-back,
[data-theme="dark"] .sticky-tools button:hover,
[data-theme="dark"] .sticky-color:hover,
[data-theme="dark"] .sticky-swatches,
[data-theme="dark"] #restBtn,
[data-theme="dark"] #restWidget,
[data-theme="dark"] .tr-range button,
[data-theme="dark"] #kikoBubble,
[data-theme="dark"] #kikoChat,
[data-theme="dark"] .kiko-skill,
[data-theme="dark"] .ci-btn,
[data-theme="dark"] .gcard,
[data-theme="dark"] .hbtn,
[data-theme="dark"] .check,
[data-theme="dark"] .art-grid-wrap,
[data-theme="dark"] .inspo-card,
[data-theme="dark"] .mb-card,
[data-theme="dark"] .md-cap,
[data-theme="dark"] .md-pchip,
[data-theme="dark"] .gg-stat,
[data-theme="dark"] .gg-card,
[data-theme="dark"] .gg-sec-n,
[data-theme="dark"] .gg-sec-gems,
[data-theme="dark"] .gg-chk,
[data-theme="dark"] #sb-mode button.on,
[data-theme="dark"] #sidebar .tab:hover:not(.active) .tab-emoji,
[data-theme="dark"] .wb-sp-in,
[data-theme="dark"] .wal-back,
[data-theme="dark"] .wal-filt,
[data-theme="dark"] .wal-row,
[data-theme="dark"] .wal-more,
[data-theme="dark"] .wal-mo-card,
[data-theme="dark"] .wal-src,
[data-theme="dark"] .wal-treat,
[data-theme="dark"] .wal-range,
[data-theme="dark"] .wal-wk,
[data-theme="dark"] .chk-rew-in,
[data-theme="dark"] .pln-sec,
[data-theme="dark"] .pln-rem-preview,
[data-theme="dark"] .pln-qbar,
[data-theme="dark"] .pln-qbar-more,
[data-theme="dark"] .pln-reward-pill,
[data-theme="dark"] .pln-seg-btn,
[data-theme="dark"] .pln-tag-in,
[data-theme="dark"] .pln-step-in:focus,
[data-theme="dark"] .pln-reward-btn,
[data-theme="dark"] .pln-pill,
[data-theme="dark"] .pln-stepadd,
[data-theme="dark"] .pln-fbtn,
[data-theme="dark"] .pln-fchip,
[data-theme="dark"] .pln-detail,
[data-theme="dark"] .rc-notif,
[data-theme="dark"] .rc-circle,
[data-theme="dark"] .rc-opt,
[data-theme="dark"] .wd-stat,
[data-theme="dark"] .cp-chip,
[data-theme="dark"] .cnp-bar button,
[data-theme="dark"] .cnp-ed,
[data-theme="dark"] .cnp-view,
[data-theme="dark"] .kiko-note-x:hover{ background:var(--panel); }

/* ---- 2. pastel-tint component backgrounds -> hue-preserving dark tints ---- */
[data-theme="dark"] .pill-peri,
[data-theme="dark"] .mode-health{ background:#20263b; }
[data-theme="dark"] .pill-sak,
[data-theme="dark"] .chiptog.on,
[data-theme="dark"] #lockChip.on,
[data-theme="dark"] .tr-range button.on,
[data-theme="dark"] .kiko-skill:hover,
[data-theme="dark"] .mode-creator,
[data-theme="dark"] .focus-row,
[data-theme="dark"] .tier-today,
[data-theme="dark"] .focus-row:hover,
[data-theme="dark"] .md-pchip.on,
[data-theme="dark"] .wal-row:hover,
[data-theme="dark"] .wal-row.is-open,
[data-theme="dark"] .wal-detail,
[data-theme="dark"] .wal-more:hover,
[data-theme="dark"] .wal-treat-more,
[data-theme="dark"] .chk-rew-pill,
[data-theme="dark"] .chk-rew-pill:hover,
[data-theme="dark"] .gh-energy-btn.on.energy-high,
[data-theme="dark"] .hrew-chip,
[data-theme="dark"] .pln-badge.en-high,
[data-theme="dark"] .pln-reward-pill:hover,
[data-theme="dark"] .pln-seg-btn.seg-src-mifu.on,
[data-theme="dark"] .pln-seg-btn.seg-en-high.on{ background:#2c1b2a; }
[data-theme="dark"] .pill-lav,
[data-theme="dark"] .chip.demo,
[data-theme="dark"] .kcol.kover,
[data-theme="dark"] .tier-month,
[data-theme="dark"] .pln-reward-pill.kiko-ask:hover,
[data-theme="dark"] .pln-seg-btn.seg-src-manfu.on,
[data-theme="dark"] .pln-seg-btn.seg-en-medium.on,
[data-theme="dark"] .pln-tag,
[data-theme="dark"] .pln-fchip.on,
[data-theme="dark"] .ssChip.on{ background:#231b30; }
[data-theme="dark"] .pill-mint,
[data-theme="dark"] .chip.on,
[data-theme="dark"] .hbtn.done,
[data-theme="dark"] .gt-cell.ok,
[data-theme="dark"] .pln-badge.pri-med,
[data-theme="dark"] .pln-seg-btn.seg-pri-medium.on,
[data-theme="dark"] .pln-ppill.pri-med{ background:#182923; }
[data-theme="dark"] .pill-ice,
[data-theme="dark"] .tier-week,
[data-theme="dark"] .gh-energy-btn.on.energy-low,
[data-theme="dark"] .pln-badge.pri-low,
[data-theme="dark"] .pln-badge.en-low,
[data-theme="dark"] .pln-seg-btn.seg-pri-low.on,
[data-theme="dark"] .pln-seg-btn.seg-en-low.on,
[data-theme="dark"] .pln-ppill.pri-low{ background:#1a2635; }
[data-theme="dark"] .pill-gray,
[data-theme="dark"] .bar,
[data-theme="dark"] .spark span.gap,
[data-theme="dark"] .timer-ic:hover,
[data-theme="dark"] .tier-later,
[data-theme="dark"] .skeleton,
[data-theme="dark"] body.calm .skeleton,
[data-theme="dark"] .jr-asset-thumb,
[data-theme="dark"] .gt-cell.pend{ background:#201925; }
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#2c1f37; }
[data-theme="dark"] .seg,
[data-theme="dark"] .kiko-av,
[data-theme="dark"] .hs-bar,
[data-theme="dark"] .inspo-thumb,
[data-theme="dark"] .ck-prog,
[data-theme="dark"] .meter{ background:#201529; }
[data-theme="dark"] .tier-urgent,
[data-theme="dark"] .gt-cell.no,
[data-theme="dark"] .wal-src-neg,
[data-theme="dark"] .pln-badge.pri-urgent,
[data-theme="dark"] .pln-seg-btn.seg-pri-urgent.on,
[data-theme="dark"] .pln-tab:not(.on) .pln-tab-b,
[data-theme="dark"] .pln-ppill.pri-urgent{ background:#2c171d; }
[data-theme="dark"] .mb-board{ background:#160d1f; }
[data-theme="dark"] .mb-card.note,
[data-theme="dark"] .gh-energy-btn.on.energy-medium,
[data-theme="dark"] .pln-badge.en-medium{ background:#291b11; }
[data-theme="dark"] .chk-rew-list,
[data-theme="dark"] .pln-dsub,
[data-theme="dark"] .pln-pill:hover,
[data-theme="dark"] .pln-stepadd:hover,
[data-theme="dark"] .ns-row{ background:#18101f; }
[data-theme="dark"] .pln-badge.pri-high,
[data-theme="dark"] .pln-seg-btn.seg-pri-high.on,
[data-theme="dark"] .pln-ppill.pri-high{ background:#271b12; }
[data-theme="dark"] .pln-seg-btn.seg-src-eggie.on{ background:#0f201f; }

/* coverage: 70 flat-white selectors, 87 pastel selectors (14 tint groups), 9 vivid badges left as-is (already read fine on dark) */

/* ---- 3. two-stop gradient "soft card" backgrounds -> dark plum-tinted gradients ---- */
[data-theme="dark"] .gcard-hero{ background:linear-gradient(160deg,#201529,#2c1b2a); }
[data-theme="dark"] .jr-page{ background:linear-gradient(180deg,#201529,#191020); }
[data-theme="dark"] .gh-wallet,
[data-theme="dark"] .is-undo,
[data-theme="dark"] .wb-spend-open,
[data-theme="dark"] .wb-openpage,
[data-theme="dark"] .wal-range.on{ background:linear-gradient(135deg,#201529,#2c1b2a); }
[data-theme="dark"] .paused{ background:linear-gradient(135deg,#201529,#291b11); }
[data-theme="dark"] .wb-row,
[data-theme="dark"] .wb-spend{ background:linear-gradient(135deg,#201529,#231b30); }
[data-theme="dark"] .is-earned,
[data-theme="dark"] .pln-rsum-paid{ background:linear-gradient(135deg,#201529,#182923); }
[data-theme="dark"] .wal-card,
[data-theme="dark"] .wal-month,
[data-theme="dark"] .wal-pm-head{ background:linear-gradient(150deg,#201529,#2c1b2a); }
[data-theme="dark"] .wal-card-earn{ background:linear-gradient(150deg,#201529,#182923); }
[data-theme="dark"] .wal-card-spent{ background:linear-gradient(150deg,#201529,#231b30); }
[data-theme="dark"] .wal-day-head{ background:linear-gradient(150deg,#201529,#231b30); }
[data-theme="dark"] .pln-c4.alert{ background:linear-gradient(160deg,#2c171d,#301924); }
[data-theme="dark"] .pln-reward-in{ background:linear-gradient(160deg,#2c1b2a,#2c1b2a); }
[data-theme="dark"] .pln-reqsec{ background:linear-gradient(180deg,#231b30,#191020); }
[data-theme="dark"] .pln-group.tint-eggie{ background:linear-gradient(180deg,#0f201f,#191020); }
[data-theme="dark"] .pln-group.tint-manfu{ background:linear-gradient(180deg,#231b30,#191020); }
[data-theme="dark"] .pln-group.tint-mifu{ background:linear-gradient(180deg,#2c1b2a,#191020); }
[data-theme="dark"] .rc-form{ background:linear-gradient(180deg,#18101f 0%,#191020 60%); }
/* brought much closer to the neutral dark surfaces (nested-panel <-> raised-row range) —
   just a whisper of hue per note type instead of a saturated tinted card, so these read as
   part of the same dark palette instead of a disconnected muddy patch. Accent lives in the
   tape/text color, not the card body. */
[data-theme="dark"] .kiko-note--pink,
[data-theme="dark"] .kiko-dcard--pink{ background:linear-gradient(160deg,#332030,#2c1b2a); }
[data-theme="dark"] .kiko-note--cream,
[data-theme="dark"] .kiko-dcard--cream{ background:linear-gradient(160deg,#312720,#291f19); }
[data-theme="dark"] .kiko-note--lav,
[data-theme="dark"] .kiko-dcard--lav{ background:linear-gradient(160deg,#2b2438,#251e30); }
[data-theme="dark"] .kiko-note--blue,
[data-theme="dark"] .kiko-dcard--blue{ background:linear-gradient(160deg,#212636,#1b202e); }
/* titles were full-bright --ink white against these now-darker cards — too stark. Bodies were
   already on --ink-soft (fine, left alone). */
[data-theme="dark"] .kiko-note-title,
[data-theme="dark"] .kiko-dcard-title{ color:var(--ink-soft); }
/* the reminder pill is a <button> with no explicit color, so it was falling back to the browser's
   default button text color (near-black) — invisible once the pill itself went dark. */
[data-theme="dark"] .gh-kiko,
[data-theme="dark"] .gh-kiko-label{ color:var(--ink); }
[data-theme="dark"] .kiko-panel{ background:linear-gradient(175deg,#201529 0%,#201925 55%,#1c131a 100%); }
[data-theme="dark"] .kiko-handle{ background:linear-gradient(160deg,#2c1b2a,#271a31); }
[data-theme="dark"] .kiko-head{ background:linear-gradient(120deg,#20263b,#2c1b2a); }
[data-theme="dark"] .art-prompt{ background:linear-gradient(135deg,#2c1b2a,#20263b); }
[data-theme="dark"] .spark-idea{ background:linear-gradient(135deg,#20263b,#2c1b2a); }
[data-theme="dark"] .mb-full{ background:var(--bg); }

/* ---- 4. root surface/text/border/shadow token overrides + default dark accent ---- */
:root[data-theme="dark"]{
  --bg:#0e0913; --bg2:#110b16; --panel:#191020; --panel-soft:#201529; --panel-raised:#271a31;
  --line:rgba(255,147,198,.14); --line-2:rgba(179,154,242,.16);
  --ink:#F8F2FA; --ink-soft:#C9BDD1; --muted:#91849B;
  --shadow:0 12px 34px rgba(0,0,0,.55),0 0 20px rgba(255,126,182,.05);
  --shadow-sm:0 2px 12px rgba(0,0,0,.4);
  --peri:#8b93e0; --peri-deep:#a5abf0; --sakura:#FF93C6; --sakura-deep:#ffb0d8;
  --lav:#B39AF2; --lav-deep:#c9b6fb; --mint:#7ee2d8; --ice:#93c9f2; --peach:#f7c39a;
}
:root[data-theme="dark"] body{
  background:#0e0913;
  background-image:radial-gradient(80% 50% at 100% 0%,rgba(255,147,198,.10) 0%,transparent 60%),radial-gradient(70% 50% at 0% 0%,rgba(139,147,224,.12) 0%,transparent 55%);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#2c1f37; }
[data-theme="dark"] .skeleton{ background:#201925; }
[data-theme="dark"] .skeleton::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); }
[data-theme="dark"] .modal-bg{ background:rgba(8,4,14,.55); }
[data-theme="dark"] .modal{ background:var(--panel); box-shadow:0 18px 50px rgba(0,0,0,.55); }
[data-theme="dark"] .cal-cell,[data-theme="dark"] .kcol,[data-theme="dark"] .home-add,
[data-theme="dark"] .sticky-tools button,[data-theme="dark"] .sticky-color,
[data-theme="dark"] .home-tools button,[data-theme="dark"] .home-resize,
[data-theme="dark"] .md-tools .x,[data-theme="dark"] .gg-sec-gems-none,
[data-theme="dark"] .rc-row,[data-theme="dark"] .rc-tab-b,[data-theme="dark"] .pln-tab-b,
[data-theme="dark"] .pln-rc-count,[data-theme="dark"] .pln-rc-note,
[data-theme="dark"] .kb-acts button,[data-theme="dark"] .kiko-dcard-badge,
[data-theme="dark"] .kiko-drawer-empty{ background:rgba(255,255,255,.06); }
[data-theme="dark"] .rc-circle{ background:var(--panel-raised); }
[data-theme="dark"] #rail{ background:rgba(19,13,26,.86); }
[data-theme="dark"] .inspo-thumb,[data-theme="dark"] .mb-board{ background-color:#160d1f; }
[data-theme="dark"] input[type="date"],[data-theme="dark"] input[type="time"]{ background:var(--panel-raised); color:var(--ink); }
[data-theme="dark"] .cnp-ed,[data-theme="dark"] .cnp-view{ background:var(--panel-soft); }
[data-theme="dark"] .jr-paper{ background-color:#18101e; background-image:repeating-linear-gradient(transparent,transparent 27px,#2c1f37 27px,#2c1f37 28px); }
[data-theme="dark"] .jr-pagetext{ color:var(--jr-ink,var(--ink)); }

/* ---- 5. sakura petals (dark) replace snowflakes (light); hide the inactive one ---- */
#sakuraCanvas{ position:fixed; inset:0; z-index:-1; pointer-events:none; display:none; }
[data-theme="dark"] #snowCanvas{ display:none; }
[data-theme="dark"] #sakuraCanvas{ display:block; }
body.calm #sakuraCanvas{ display:none; }
@media (prefers-reduced-motion:reduce){ #sakuraCanvas{ display:none; } }

/* ---- 6. sidebar Light / Dark / Auto control — mirrors #sb-mode's segmented style ---- */
#themeSeg{
  margin:0 10px 6px; display:flex;
  border-radius:999px; background:#eef0fa; padding:3px; gap:2px; flex-shrink:0;
}
[data-theme="dark"] #themeSeg{ background:var(--panel-soft); }
#sidebar.sb-collapsed #themeSeg{ display:none; }
#themeSeg button{
  flex:1; border:none; background:none; border-radius:999px;
  padding:5px 6px; font-size:11px; color:var(--ink-soft);
  font-family:inherit; font-weight:600; cursor:pointer;
  transition:background .15s,color .15s; white-space:nowrap;
}
#themeSeg button.on{ background:#fff; color:var(--sakura-deep); box-shadow:var(--shadow-sm); }
[data-theme="dark"] #themeSeg button.on{ background:var(--panel-raised); color:var(--sakura-deep); }
#themeAutoHint{ margin:0 10px 8px; font-size:9.5px; color:var(--muted); text-align:center; line-height:1.35; }
#sidebar.sb-collapsed #themeAutoHint{ display:none; }
#themeAutoHint.hidden{ display:none; }

/* ---- 7. Settings > Appearance page ---- */
.ap-swatchrow{ display:flex; flex-wrap:wrap; gap:8px; }
.ap-swatch{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--line-2);
  cursor:pointer; padding:0; position:relative; flex:0 0 auto;
  transition:transform .12s ease,border-color .12s ease;
}
.ap-swatch:hover{ transform:scale(1.08); }
.ap-swatch.on{ border-color:var(--ink); box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--sakura); }
.ap-swatch.on::after{ content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.ap-colorslot{ display:flex; align-items:center; gap:10px; margin:8px 0; }
.ap-colorslot input[type="color"]{ width:40px; height:34px; border-radius:10px; border:1.5px solid var(--line-2); padding:2px; background:var(--panel); cursor:pointer; }
.ap-colorslot .hex{ font-size:12px; color:var(--ink-soft); font-family:ui-monospace,monospace; min-width:64px; }
.ap-colorslot .x{ margin-left:auto; }
.ap-preview{
  border-radius:16px; border:1px solid var(--line); background:var(--panel-soft);
  padding:16px; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.ap-preview .ap-pbtn{ background:var(--ap-grad,linear-gradient(135deg,var(--peri),var(--sakura))); color:#fff; border:none; border-radius:12px; padding:9px 16px; font-size:13px; font-weight:700; }
.ap-preview .ap-ptab{ background:linear-gradient(135deg,#eaf0fc,#fdeaf5); color:var(--sakura-deep); border-radius:11px; padding:8px 12px; font-size:13px; font-weight:600; }
[data-theme="dark"] .ap-preview .ap-ptab{ background:linear-gradient(135deg,#20263b,#2c1b2a); }
.ap-preview .ap-ppill{ background:var(--ap-grad,linear-gradient(135deg,var(--peri),var(--sakura))); color:#fff; border-radius:999px; padding:5px 13px; font-size:11px; font-weight:700; }
.ap-preview .ap-pfocus{ border:1.5px solid var(--line-2); border-radius:10px; padding:8px 12px; font-size:12px; color:var(--ink-soft); outline:2.5px solid var(--ap-focus,var(--peri-deep)); outline-offset:2px; }
.ap-schedule{ font-size:11.5px; color:var(--ink-soft); background:var(--panel-soft); border-radius:10px; padding:8px 12px; margin-top:6px; }
.ap-modecard{ border:1.5px solid var(--line); border-radius:16px; padding:14px 16px; margin-bottom:14px; }
.ap-modecard.is-active{ border-color:var(--sakura); box-shadow:0 0 0 3px rgba(255,158,216,.14); }
.ap-modecard-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ap-modecard-title{ font-family:var(--display); font-size:14px; font-weight:700; color:var(--ink); }

/* ---- 8. sidebar container + active-tab gradient — found via headless dark-mode QA pass,
   these are rgba multi-stop / two-stop gradients the systematic #hex sweep above couldn't catch ---- */
[data-theme="dark"] #sidebar{
  background:linear-gradient(180deg, #130d1a 0%, #130d1a 60%, #150e1c 100%);
  border-right-color:var(--line);
}
[data-theme="dark"] #global-header{ background:#130d1a; }
[data-theme="dark"] #sidebar .tab.active{ background:linear-gradient(135deg,#201529,#271a31); }
[data-theme="dark"] .gh-ava{ background:linear-gradient(135deg,#271a31,#201529); }

/* ---- 9. safety net for inline style="background:#fff..." in view-*.js template strings
   (a handful of cards build their markup with an inline white bg instead of a CSS class —
   attribute-selector catch-all so dark mode doesn't leave a stray white card behind) ---- */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"]{ background:var(--panel) !important; }

/* ---- 10. second QA pass fixes — real gaps a multi-line-rule blind spot in the original sweep
   missed (checkboxes, energy selector, sidebar mode switcher track, active-tab icon chip, toggle
   knobs, untinted planner groups) + the input[type] comma-scoping bug + softened focus-row text. */
[data-theme="dark"] #sb-mode{ background:var(--panel-soft); }
[data-theme="dark"] .gt-box,
[data-theme="dark"] .ck-box{ background:var(--panel-raised); }
[data-theme="dark"] .gh-energy-btn{ background:rgba(255,255,255,.06); }
[data-theme="dark"] #sidebar .tab.active .tab-emoji{ background:var(--panel-raised); }
[data-theme="dark"] .switch::after{ background:var(--panel-raised); }
[data-theme="dark"] .pln-group{ background:var(--panel); }
[data-theme="dark"] .vault-item .x{ background:rgba(0,0,0,.55); }
[data-theme="dark"] .kiko-note-tape,
[data-theme="dark"] .kiko-dcard-badge,
[data-theme="dark"] .kiko-drawer-empty{ background:rgba(255,255,255,.08); }
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"]{ background:var(--panel-raised); color:var(--ink); }

/* the "start here / FYI / Kiko Content Radar" row text was full-bright --ink white against a
   softly-tinted row — dims it toward the same lavender used in those sections' own headers, so
   the row reads as part of the section instead of glaring against it. */
[data-theme="dark"] .focus-row{ color:var(--ink-soft); border-color:var(--line); background:var(--panel-soft); }
[data-theme="dark"] .focus-row:hover{ background:var(--panel-raised); }

/* border colors hardcoded to a literal light hex (not var(--line)) — my systematic sweep only
   scanned `background:`, these slipped through the same way #sb-mode did. */
[data-theme="dark"] .hc-rew-row{ border-bottom-color:var(--line); }
[data-theme="dark"] .pln-tag{ border-color:var(--line-2); }
[data-theme="dark"] .gh-kiko{ background:linear-gradient(135deg,#201529,#271a31); border-color:var(--line-2); }

/* ---- 11. full-OS audit pass — exhaustive multi-line-aware rescan of style.css found these real
   remaining gaps (confirmed via the "Requests for Mifu" + Planner-overview-cards screenshot).
   .breath-bubble/.drag-thumb/.progress.tone-peach/.gc-cell checked and are fine as-is (intentional
   glow / transient / semantic accent / already var()-driven respectively). ---- */
[data-theme="dark"] .tab.active{ background:linear-gradient(135deg,#2b3350,#3a2438); }
[data-theme="dark"] .disc{ background:linear-gradient(90deg,#201529,#2c1b2a); }
[data-theme="dark"] .slip{ background:linear-gradient(120deg,#1c1830,#2c1b2a); }
[data-theme="dark"] body.calm{ background:var(--bg); background-image:none; }
[data-theme="dark"] .tr-frame{ background:linear-gradient(180deg,#201529,#1e1a29); }
[data-theme="dark"] .hero-ava{ background:linear-gradient(135deg,#2c1b2a,#2b3350); }
[data-theme="dark"] .ci-btn.on{ background:linear-gradient(135deg,#2c1b2a,#2f2440); }
[data-theme="dark"] .gg-refresh-btn{ background:var(--panel-raised); }
[data-theme="dark"] .gh-wallet.paused{ background:linear-gradient(135deg,#2A1D38,#3d2c1a); }
[data-theme="dark"] .gh-wallet-fx{ background:linear-gradient(135deg,#201529,#182923); }
[data-theme="dark"] .gh-wallet-fx.is-undo{ background:linear-gradient(135deg,#201529,#2c1b2a); }
[data-theme="dark"] .wb-row.is-earned{ background:linear-gradient(135deg,#2A1D38,#1f3830); }
[data-theme="dark"] .wb-spend-open:hover,
[data-theme="dark"] .wb-openpage:hover{ background:linear-gradient(135deg,#201529,#2c1b2a); }
[data-theme="dark"] .pln-c4{ background:linear-gradient(160deg,#201529,#191020); }
[data-theme="dark"] .pln-c4.good{ background:linear-gradient(160deg,#1f3830,#191020); }
[data-theme="dark"] .pln-reward-pill.kiko-ask{ background:linear-gradient(150deg,#241c30,#231b30); }
[data-theme="dark"] .kiko-sug{ background:linear-gradient(160deg,#241c30,#2c1b2a); }
[data-theme="dark"] .pln-details{ background:linear-gradient(160deg,#191020,#1e1a29); }
[data-theme="dark"] .kiko-note-x{ background:rgba(255,255,255,.08); }
[data-theme="dark"] .kiko-deco-magnet--pink{ background:linear-gradient(160deg,#3a2438,#2c1b2a); }
[data-theme="dark"] .kiko-deco-magnet--cream{ background:linear-gradient(160deg,#3d2c1a,#291b11); }
[data-theme="dark"] .kiko-deco-magnet--lav{ background:linear-gradient(160deg,#2f2440,#231b30); }
[data-theme="dark"] .kiko-deco-magnet--blue{ background:linear-gradient(160deg,#1a2740,#141c2f); }

/* "Requests for Mifu" cards (From Eggie = teal identity, From Manfu = lavender identity) —
   confirmed still bright light-mode cards in the screenshot. Identity hue kept, just darkened. */
[data-theme="dark"] .rc-eggie{ background:linear-gradient(155deg,#0f201f,#0e1a19); }
[data-theme="dark"] .rc-manfu{ background:linear-gradient(155deg,#231b30,#1e1729); }

/* proper theme token instead of scattering more overrides — .jr-tb-btn:hover/.active,
   .jr-add-btn:hover, and .tab-drag-wrap.drag-over .tab all read var(--peri-soft,#ede9fb); the var
   was never defined so they always fell through to the light fallback. Defining it once here
   fixes all three (and anything else that reaches for it later) at the token layer. */
:root[data-theme="dark"]{ --peri-soft:#2c2440; }

/* ---- 12. inline style="background:..." literals scattered across view-*.js template strings —
   CSS-only fix via attribute-contains selectors (safer than touching render logic in 9 files).
   Case-insensitive since these are hand-authored template strings, not normalized CSSOM values. */
[data-theme="dark"] [style*="background:#fdf0fb" i],
[data-theme="dark"] [style*="background:#eef2fb" i],
[data-theme="dark"] [style*="background:#eef0fa" i],
[data-theme="dark"] [style*="background:#fde4e4" i],
[data-theme="dark"] [style*="background:#e7f7ef" i],
[data-theme="dark"] [style*="background:#fdebd9" i],
[data-theme="dark"] [style*="background:#eeedfe" i],
[data-theme="dark"] [style*="background:#e0f5ea" i],
[data-theme="dark"] [style*="background:#fdf3da" i],
[data-theme="dark"] [style*="background:#fde6e9" i],
[data-theme="dark"] [style*="background:#eef3fa" i],
[data-theme="dark"] [style*="background:#ece2fb" i]{ background:var(--panel-soft) !important; }
[data-theme="dark"] [style*="linear-gradient(135deg,#fdf0fb,#eef2fb)" i]{ background:linear-gradient(135deg,#2c1b2a,#2b3350) !important; }
[data-theme="dark"] [style*="linear-gradient(180deg,#fff,#f7f5fd)" i]{ background:linear-gradient(180deg,#201529,#1e1a29) !important; }
[data-theme="dark"] [style*="linear-gradient(90deg,#7fc8a9,#9fc7f0)" i]{ background:linear-gradient(90deg,#1f3830,#1a2635) !important; }

/* ---- 13. Kiko Research findings cards (core.js kikoResearchPersonalHtml/CreatorHtml) — dark
   text (#333) + light border assumed a white card; both invisible/washed-out once the ambient
   page went dark, since the card itself sets no background of its own. ---- */
[data-theme="dark"] [style*="color:#333"]{ color:var(--ink-soft) !important; }
[data-theme="dark"] [style*="border:1px solid #eee2e8"]{ border-color:var(--line) !important; }


/* ---- collapsible cadence disclosure — kcCadenceHTML "This week's focus" banner (Home).
   CSP-safe: toggled via data-act="cadFold" (no inline handlers). Default folded for a calm Home. ---- */
.cad-toggle{display:inline-flex;align-items:center;gap:7px;margin-top:4px;padding:5px 2px;background:none;border:none;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted);font-family:inherit;-webkit-user-select:none;user-select:none;}
.cad-toggle:hover{color:var(--ink-soft);}
.cad-toggle .cad-chev{display:inline-block;font-size:15px;line-height:1;transition:transform .18s ease;}
.cad-toggle[aria-expanded="true"] .cad-chev{transform:rotate(90deg);}
.cad-pills{display:none;flex-wrap:wrap;gap:8px;margin-top:10px;}
.cad-pills.open{display:flex;animation:cadIn .22s ease;}
@keyframes cadIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---- 14. This Week at a Glance + Needs your eyes — CSS-variable-driven tokens (light defaults
   here; dark overrides in :root[data-theme="dark"]). These previously branched in JS by reading
   data-theme at render time — fragile, since it depends on exactly when the string gets built. A
   CSS var always resolves correctly at PAINT time regardless of render/theme-switch timing, so
   the palette moved here and view-home.js just references var(--glance-*)/var(--note-pink-*). ---- */
:root{
  --glance-bg: linear-gradient(135deg,rgba(233,243,252,.62),rgba(201,224,245,.46) 55%,rgba(223,236,250,.55));
  --glance-border: rgba(255,255,255,.65);
  --glance-shadow: 0 8px 30px rgba(91,155,213,.20),inset 0 1px 0 rgba(255,255,255,.75);
  --glance-snow: #8fb6e0;
  --glance-cell-bg: rgba(255,255,255,.5);
  --glance-cell-bg-today: #fff;
  --glance-cell-border: rgba(255,255,255,.7);
  --glance-cell-shadow-today: 0 10px 20px rgba(0,0,0,.14);
  --glance-ev-bg: rgba(255,255,255,.6);
  --glance-ev-bg-today: #eef4fb;
  --note-pink-bg: #fdeef4;
  --note-pink-border: #f0a9cb;
  --note-pink-text: #c25b8a;
}
:root[data-theme="dark"]{
  --glance-bg: linear-gradient(135deg,rgba(58,36,56,.55),rgba(43,51,80,.42) 55%,rgba(32,21,41,.6));
  --glance-border: rgba(255,147,198,.16);
  --glance-shadow: 0 8px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
  --glance-snow: rgba(139,147,224,.35);
  --glance-cell-bg: rgba(255,255,255,.06);
  --glance-cell-bg-today: rgba(255,255,255,.12);
  --glance-cell-border: rgba(255,255,255,.10);
  --glance-cell-shadow-today: 0 10px 20px rgba(0,0,0,.35);
  --glance-ev-bg: rgba(255,255,255,.08);
  --glance-ev-bg-today: rgba(255,255,255,.16);
  --note-pink-bg: rgba(255,147,198,.10);
  --note-pink-border: rgba(255,147,198,.4);
  --note-pink-text: #ffb0d8;
}