/* ============================================================
   Capture & Display — Green energy system
   Light: forest/emerald + white · Dark: near-black + lime
   One-page app shell · mobile-first compact greeting
   Font kept: Plus Jakarta Sans
   ============================================================ */

@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-display:swap;src:url("fonts/PlusJakartaSans-Regular.ttf") format("truetype");}
@font-face{font-family:"Plus Jakarta Sans";font-weight:500;font-display:swap;src:url("fonts/PlusJakartaSans-Medium.ttf") format("truetype");}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-display:swap;src:url("fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-display:swap;src:url("fonts/PlusJakartaSans-Bold.ttf") format("truetype");}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-display:swap;src:url("fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype");}

/* ---------------- TOKENS · base = Klasik, light ---------------- */
:root{
  --page:#EDF1EA; --card:#FFFFFF; --card-2:#F3F7F1;
  --ink:#19251D; --ink-muted:#566057; --ink-subtle:#88928A;
  --brand:#1E7A3C; --brand-strong:#155A2C; --brand-soft:#E3F1E5; --brand-bright:#2E9A50;
  --cta:#1E7A3C; --cta-strong:#155A2C; --cta-fg:#FFFFFF;
  --accent:#1E7A3C; --accent-strong:#14552A; --accent-soft:#E3F1E5;
  --danger:#D8503E; --danger-soft:#F7E2DD;
  --warning:#BC842B; --warning-soft:#F3E8CF;
  --routed:#1E7A3C; --routed-soft:#E3F1E5;
  --pending-fg:#76806F; --pending-soft:#EAEFE7;
  --steel:#6E7A6F;
  --line:#DEE5DB; --line-strong:#CAD3C6;
  --toast-bg:#19251D; --toast-fg:#EAF3EA;
  --focus-ring:color-mix(in srgb,var(--brand) 45%,transparent);

  --shadow-xs:0 1px 2px rgba(18,40,24,.06);
  --shadow-sm:0 4px 16px rgba(18,40,24,.08);
  --shadow-md:0 12px 32px rgba(18,40,24,.12);
  --shadow-lg:0 24px 60px rgba(18,40,24,.20);

  --font:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:130ms; --dur:220ms; --dur-slow:380ms;
  --maxw:1240px;

  /* skin tokens — Klasik (forest hero block, white cards) */
  --hero-bg:#1A5E30; --hero-fg:#EAF3EA; --hero-fg-soft:#A9C6AE;
  --hero-accent:#C9F27E; --hero-mono:.12; --hero-pad:28px;
  --panel-bg:var(--card); --panel-bd:1px solid var(--line);
  --panel-sh:var(--shadow-sm); --panel-r:22px; --panel-pad:6px 10px 12px;
  --phead-bg:transparent;
  --chip-bg:var(--card-2); --chip-bd:1px solid var(--line); --chip-fg:var(--ink-muted);
  --row-div:0px; --greet-size:30px; --greet-weight:800;
  --ring-track:rgba(255,255,255,.20);
}

/* ---------------- Dark (near-black + lime) ---------------- */
:root[data-theme="dark"]{
  --page:#0F100E; --card:#1B1D18; --card-2:#24261F;
  --ink:#ECEFE7; --ink-muted:#9AA396; --ink-subtle:#6E776B;
  --brand:#C6F24E; --brand-strong:#D6FA66; --brand-soft:#222A12; --brand-bright:#C6F24E;
  --cta:#C6F24E; --cta-strong:#D6FA66; --cta-fg:#152410;
  --accent:#C6F24E; --accent-strong:#D6FA66; --accent-soft:#222A12;
  --danger:#E2705F; --danger-soft:#37211C;
  --warning:#D8A94E; --warning-soft:#322915;
  --routed:#9BD24E; --routed-soft:#1F2A12;
  --pending-fg:#8B947F; --pending-soft:#23251F;
  --steel:#828C7D;
  --line:#2A2D25; --line-strong:#3B3F35;
  --toast-bg:#24261F; --toast-fg:#ECEFE7;
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 4px 16px rgba(0,0,0,.45);
  --shadow-md:0 14px 34px rgba(0,0,0,.55);
  --shadow-lg:0 26px 62px rgba(0,0,0,.65);
  --hero-bg:#1A1D16; --hero-fg:#ECEFE7; --hero-fg-soft:#A7B099;
  --hero-accent:#C6F24E; --ring-track:rgba(255,255,255,.12);
}

/* ---------------- Direction: TENANG (airy / minimal) ---------------- */
:root[data-dir="tenang"]{
  --page:#F2F5EF;
  --hero-bg:transparent; --hero-fg:var(--ink); --hero-fg-soft:var(--ink-subtle);
  --hero-accent:#1E7A3C; --hero-mono:.05; --hero-pad:0;
  --panel-bg:transparent; --panel-bd:1px solid transparent;
  --panel-sh:none; --panel-r:18px; --panel-pad:2px 4px 8px;
  --chip-bg:transparent; --chip-bd:1px solid transparent; --chip-fg:var(--ink-subtle);
  --row-div:1px; --greet-size:30px; --greet-weight:700;
  --ring-track:var(--line);
}
:root[data-dir="tenang"][data-theme="dark"]{ --page:#121310; --hero-accent:#C6F24E; }

/* ---------------- Direction: PEKAT (bold editorial) ---------------- */
:root[data-dir="pekat"]{
  --hero-bg:#123F22; --hero-fg:#EAF3EA; --hero-fg-soft:#A9C6AE;
  --hero-accent:#C9F27E; --hero-mono:.14; --hero-pad:30px;
  --panel-bg:var(--card); --panel-bd:1px solid var(--line);
  --panel-sh:var(--shadow-md); --panel-r:26px; --phead-bg:var(--card-2);
  --chip-bg:var(--brand-soft); --chip-bd:1px solid transparent; --chip-fg:var(--brand-strong);
  --greet-size:38px; --greet-weight:800;
}
:root[data-dir="pekat"][data-theme="dark"]{ --hero-bg:#14160F; --hero-accent:#C6F24E; --chip-fg:var(--brand); }

/* ---------------- Reset ---------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{height:100dvh}
html,body{background:var(--page);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5;}
body{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
#root{flex:1;min-height:0;width:100%;display:flex;flex-direction:column}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
::selection{background:var(--brand-soft);color:var(--brand-strong)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:8px}

@media (prefers-reduced-motion:no-preference){
  .anim{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
}

.wrap{max-width:var(--maxw);width:100%;margin:0 auto;padding:0 20px;flex:1;min-height:0;display:flex;flex-direction:column}

/* ---------------- Top bar ---------------- */
.topbar{position:sticky;top:0;z-index:40;flex:none;
  background:color-mix(in srgb,var(--page) 84%,transparent);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent)}
.topbar-inner{max-width:var(--maxw);margin:0 auto;padding:13px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-row{display:flex;align-items:center;gap:12px;min-width:0}
.mark-tile{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:var(--cta);color:var(--cta-fg);box-shadow:var(--shadow-sm)}
.brand-name{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-name .bn-t{font-size:15px;font-weight:800;letter-spacing:-.015em;white-space:nowrap}
.brand-name .bn-s{font-size:11.5px;color:var(--ink-subtle);font-weight:500;letter-spacing:.01em}
.top-actions{display:flex;align-items:center;gap:9px;flex:none}
.iconbtn{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--card);color:var(--ink-muted)}
.iconbtn:hover{color:var(--ink);border-color:var(--line-strong);box-shadow:var(--shadow-xs)}
.iconbtn:active{transform:scale(.94)}
.iconbtn.spin svg{animation:spin .7s var(--ease)}

/* ---------------- Hero / greeting (desktop) ---------------- */
.hero{position:relative;overflow:hidden;border-radius:var(--panel-r);flex:none;
  background-color:var(--hero-bg);color:var(--hero-fg);padding:var(--hero-pad);margin:16px 0 0}
:root[data-dir="klasik"] .hero,:root[data-dir="pekat"] .hero{box-shadow:var(--shadow-md)}
:root[data-dir="klasik"] .hero::before,:root[data-dir="pekat"] .hero::before{
  content:"";position:absolute;left:0;top:0;height:100%;width:4px;
  background:linear-gradient(var(--hero-accent),transparent)}
.hero-mono{position:absolute;right:-18px;bottom:-46px;width:210px;height:210px;
  color:var(--hero-fg);opacity:var(--hero-mono);pointer-events:none}
.hero-mono svg{width:100%;height:100%}
.hero-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding:2px 2px}
:root[data-dir="klasik"] .hero-inner,:root[data-dir="pekat"] .hero-inner{padding:6px 8px}
.greet{min-width:0}
.greet .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--hero-accent);margin-bottom:9px}
.greet .eyebrow svg{width:14px;height:14px}
.greet h1{font-size:var(--greet-size);font-weight:var(--greet-weight);letter-spacing:-.025em;line-height:1.1;color:var(--hero-fg)}
.greet .gsub{margin-top:7px;font-size:13.5px;color:var(--hero-fg-soft);font-weight:500;max-width:48ch}

.pcluster{display:flex;align-items:center;gap:18px;flex:none}
.ring-wrap{position:relative;width:76px;height:76px;flex:none}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-bg{stroke:var(--ring-track)}
.ring-fg{stroke:var(--hero-accent);stroke-linecap:round;transition:stroke-dashoffset .7s var(--ease)}
.ring-label{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1}
.ring-label .rl-n{font-size:18px;font-weight:800;color:var(--hero-fg)}
.ring-label .rl-d{font-size:10px;font-weight:600;color:var(--hero-fg-soft);margin-top:2px;letter-spacing:.02em}
.streak{display:flex;flex-direction:column;gap:3px}
.streak .st-n{display:flex;align-items:center;gap:6px;font-size:20px;font-weight:800;color:var(--hero-fg)}
.streak .st-n svg{width:18px;height:18px;color:var(--hero-accent)}
.streak .st-l{font-size:11.5px;font-weight:600;color:var(--hero-fg-soft);letter-spacing:.01em}

/* ---------------- Mobile compact greeting (.mhead) ---------------- */
.mhead{display:none}

/* ---------------- Capture bar (desktop inline) ---------------- */
.capture{position:relative;margin:14px 0 0;flex:none;display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--panel-r);padding:13px 15px;box-shadow:var(--shadow-sm);overflow:hidden}
.capture.listening{border-color:var(--brand);box-shadow:0 0 0 3px var(--focus-ring),var(--shadow-md)}
.cap-mic{flex:none;width:52px;height:52px;border-radius:16px;background:var(--cta);color:var(--cta-fg);display:grid;place-items:center;position:relative}
.cap-mic:hover{background:var(--cta-strong)}
.cap-mic:active{transform:scale(.95)}
.cap-mic svg{width:22px;height:22px;position:relative;z-index:2}
.cap-mic .pulse{position:absolute;inset:0;border-radius:16px;background:var(--brand);opacity:0}
.capture.listening .cap-mic .pulse{animation:pulse 1.6s var(--ease) infinite}
.cap-body{flex:1;min-width:0}
.cap-typed{font-size:15px;font-weight:600;color:var(--ink);min-height:21px;line-height:1.35}
.cap-typed .caret{display:inline-block;width:2px;height:1em;background:var(--brand);margin-left:1px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
.cap-status{font-size:12px;color:var(--brand);font-weight:700;margin-top:3px;letter-spacing:.01em}
.cap-input{width:100%;border:none;background:transparent;color:var(--ink);font-size:15px;font-weight:600;outline:none}
.cap-input::placeholder{color:var(--ink-subtle);font-weight:500}
.cap-hint{font-size:12.5px;color:var(--ink-subtle);margin-top:3px}
.cap-wave{display:flex;align-items:center;gap:3px;height:24px}
.cap-wave i{width:3px;border-radius:3px;background:var(--brand);height:6px;animation:wave 1s var(--ease) infinite}
.cap-wave i:nth-child(2){animation-delay:.12s}.cap-wave i:nth-child(3){animation-delay:.24s}
.cap-wave i:nth-child(4){animation-delay:.36s}.cap-wave i:nth-child(5){animation-delay:.48s}
.cap-wave i:nth-child(6){animation-delay:.6s}.cap-wave i:nth-child(7){animation-delay:.18s}
.cap-via{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-subtle);font-weight:700;border:1px solid var(--line);border-radius:999px;padding:6px 12px;letter-spacing:.02em}
.cap-via svg{width:12px;height:12px;color:var(--brand)}

/* ---------------- Segmented tabs ---------------- */
.seg{display:none}
.seg-btn{flex:1;font-size:13px;font-weight:700;color:var(--ink-muted);padding:11px 6px;border-radius:14px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;gap:7px}
.seg-btn .ct{font-size:11px;color:var(--ink-subtle);font-weight:800;background:var(--card-2);border-radius:999px;padding:1px 7px;min-width:20px}
.seg-btn[aria-selected="true"]{color:var(--brand-strong);border-color:var(--brand);background:var(--brand-soft)}
:root[data-theme="dark"] .seg-btn[aria-selected="true"]{color:var(--brand)}
.seg-btn[aria-selected="true"] .ct{color:var(--brand-strong);background:color-mix(in srgb,var(--brand) 20%,transparent)}
:root[data-theme="dark"] .seg-btn[aria-selected="true"] .ct{color:var(--brand)}

/* ---------------- Grid + panels — Captured | Today | Open ---------------- */
.grid{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:18px;margin:16px 0 0;align-items:stretch;flex:1;min-height:0;padding-bottom:16px}
@media (max-width:920px){.grid{grid-template-columns:1fr}}

.panel{background:var(--panel-bg);border:var(--panel-bd);border-radius:var(--panel-r);box-shadow:var(--panel-sh);overflow:hidden;display:flex;flex-direction:column;min-height:0}
.panel-head{display:flex;align-items:center;gap:11px;padding:17px 17px 12px;background:var(--phead-bg);flex:none}
.ph-ic{width:33px;height:33px;border-radius:11px;display:grid;place-items:center;flex:none}
.ph-ic svg{width:17px;height:17px}
.ph-today{background:var(--accent-soft);color:var(--accent-strong)}
.ph-cap{background:var(--card-2);color:var(--steel);border:1px solid var(--line)}
.ph-open{background:var(--warning-soft);color:var(--warning)}
.ph-title{font-size:15px;font-weight:800;letter-spacing:-.015em;flex:1}
.ph-count{font-size:12px;font-weight:800;color:var(--ink-muted);background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.panel-sub{padding:0 17px 8px;font-size:12px;color:var(--ink-subtle);font-weight:500;flex:none}
.panel-body{padding:var(--panel-pad);flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.panel-body::-webkit-scrollbar{width:9px}
.panel-body::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:9px;border:2.5px solid transparent;background-clip:content-box}
.panel-body::-webkit-scrollbar-thumb:hover{background:var(--ink-subtle);background-clip:content-box}
.panel-body::-webkit-scrollbar-track{background:transparent}

/* group label */
.group-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-subtle);padding:14px 8px 7px;display:flex;align-items:center;gap:10px}
.group-label .gl-line{flex:1;height:1px;background:var(--line)}
.group-label.danger{color:var(--danger)}
.group-label.today{color:var(--brand-strong)}
:root[data-theme="dark"] .group-label.today{color:var(--brand)}

/* ---------------- Task row ---------------- */
.task{position:relative;display:flex;gap:13px;padding:12px 8px;border-radius:14px;align-items:flex-start}
.task:hover{background:var(--card-2)}
:root[data-dir="tenang"] .panel-body .task{border-radius:0;padding-left:2px;padding-right:2px}
:root[data-dir="tenang"] .task:hover{background:transparent}
:root[data-dir="tenang"] .task + .task{border-top:var(--row-div) solid var(--line)}

.check{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;border:2px solid var(--line-strong);display:grid;place-items:center;background:transparent;position:relative}
.check svg{width:13px;height:13px;opacity:0;color:var(--cta-fg);transform:scale(.5);transition:opacity var(--dur-fast),transform var(--dur-fast) var(--ease)}
.check:hover{border-color:var(--brand)}
.check.p1{border-color:var(--danger)}.check.p2{border-color:var(--brand)}.check.p3{border-color:var(--ink-subtle)}
.task.done .check{background:var(--cta);border-color:var(--cta);animation:pop .34s var(--ease)}
.task.done .check svg{opacity:1;transform:scale(1)}
.task.done .t-title{color:var(--ink-subtle);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.task.done .t-meta{opacity:.5}
.rank{flex:none;width:25px;height:25px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--accent-strong);background:var(--accent-soft);margin-top:0}
:root[data-dir="pekat"] .rank{background:var(--accent);color:var(--cta-fg)}
.t-main{flex:1;min-width:0}
.t-title{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.4;text-wrap:pretty}
.t-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px}
.chip{font-size:11.5px;font-weight:600;color:var(--chip-fg);display:inline-flex;align-items:center;gap:5px;border:var(--chip-bd);border-radius:999px;padding:3px 9px;background:var(--chip-bg)}
.chip svg{width:12px;height:12px}
.chip.proj{padding-left:8px}
.chip.due-over{color:var(--danger);border-color:transparent;background:var(--danger-soft)}
.chip.due-today{color:var(--brand-strong);border-color:transparent;background:var(--brand-soft)}
:root[data-theme="dark"] .chip.due-today{color:var(--brand)}
.dot{width:8px;height:8px;border-radius:50%;flex:none}

/* ---------------- Recently Captured ---------------- */
.cap-item{position:relative;display:flex;gap:12px;padding:13px 8px;border-radius:14px}
.cap-item:hover{background:var(--card-2)}
:root[data-dir="tenang"] .cap-item:hover{background:transparent}
:root[data-dir="tenang"] .cap-item + .cap-item{border-top:var(--row-div) solid var(--line)}
.cap-item.fresh{animation:dropIn .5s var(--ease) both}
.cap-ic{flex:none;width:33px;height:33px;border-radius:11px;display:grid;place-items:center;margin-top:1px}
.cap-ic svg{width:16px;height:16px}
.cap-task{background:var(--brand-soft);color:var(--brand-strong)}
:root[data-theme="dark"] .cap-task{color:var(--brand)}
.cap-note{background:var(--card-2);color:var(--steel);border:1px solid var(--line)}
.cap-main{flex:1;min-width:0}
.cap-text{font-size:14px;font-weight:500;line-height:1.5;text-wrap:pretty}
.cap-foot{display:flex;align-items:center;gap:9px;margin-top:7px;flex-wrap:wrap}
.cap-time{font-size:11.5px;color:var(--ink-subtle);font-weight:600}
.status{font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;display:inline-flex;align-items:center;gap:5px}
.status svg{width:12px;height:12px}
.st-pending{color:var(--pending-fg);background:var(--pending-soft);border:1px solid var(--line)}
.st-routed{color:var(--routed);background:var(--routed-soft)}
.cap-item.routing .status{animation:pop .34s var(--ease)}

/* route-all button (sticky bottom of card) */
.route-bar{display:flex;align-items:center;gap:9px;padding:10px 8px 12px;position:sticky;bottom:0;background:var(--card)}
:root[data-dir="tenang"] .route-bar{background:var(--page)}
.route-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:800;color:var(--cta-fg);background:var(--cta);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-xs);letter-spacing:.01em}
.route-btn:hover{background:var(--cta-strong)}
.route-btn:active{transform:scale(.98)}
.route-btn svg{width:15px;height:15px}
.route-btn.ghost{color:var(--brand-strong);background:var(--brand-soft);box-shadow:none}
:root[data-theme="dark"] .route-btn.ghost{color:var(--brand)}
.route-btn.ghost:hover{background:color-mix(in srgb,var(--brand) 16%,transparent)}

/* ---------------- Empty state ---------------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 22px 32px;gap:4px}
.empty .em-ic{width:66px;height:66px;border-radius:20px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-strong);margin-bottom:11px}
:root[data-theme="dark"] .empty .em-ic{color:var(--brand)}
.empty .em-ic svg{width:30px;height:30px}
.empty h4{font-size:15px;font-weight:700}
.empty p{font-size:13px;color:var(--ink-subtle);max-width:32ch;line-height:1.55}

/* all-done banner */
.alldone{display:flex;align-items:center;gap:13px;margin:8px;padding:15px 17px;border-radius:16px;background:var(--cta);color:var(--cta-fg);animation:fadeUp .45s var(--ease) both;box-shadow:var(--shadow-sm)}
.alldone .ad-ic{flex:none;width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--cta-fg) 16%,transparent);color:var(--cta-fg);display:grid;place-items:center}
.alldone .ad-ic svg{width:20px;height:20px}
.alldone .ad-t{font-size:14px;font-weight:800}
.alldone .ad-s{font-size:12px;font-weight:600;color:color-mix(in srgb,var(--cta-fg) 78%,transparent);margin-top:1px}

/* ---------------- Toast ---------------- */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(28px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:9px;background:var(--toast-bg);color:var(--toast-fg);padding:12px 17px;border-radius:14px;box-shadow:var(--shadow-lg);font-size:13.5px;font-weight:600;animation:toastIn .32s var(--ease) both}
.toast.out{animation:toastOut .3s var(--ease) forwards}
.toast svg{width:16px;height:16px;flex:none;color:var(--brand)}

/* ---------------- Floating capture button (mobile) ---------------- */
.fab{display:none}

.footnote{display:none}

/* burst particles on complete */
.burst{position:absolute;left:11px;top:13px;width:22px;height:22px;pointer-events:none;z-index:5}
.burst i{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:2px;background:var(--brand);opacity:0}
.burst.go i{animation:burst .6s var(--ease) forwards}
.burst i:nth-child(1){--tx:-14px;--ty:-12px;background:var(--brand)}
.burst i:nth-child(2){--tx:13px;--ty:-13px;background:var(--brand-bright)}
.burst i:nth-child(3){--tx:15px;--ty:9px;background:var(--warning)}
.burst i:nth-child(4){--tx:-13px;--ty:11px;background:var(--brand)}
.burst i:nth-child(5){--tx:0px;--ty:-18px;background:var(--brand-bright)}

/* ---------------- Keyframes ---------------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(.6)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes pulse{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
@keyframes blink{50%{opacity:0}}
@keyframes wave{0%,100%{height:6px}50%{height:22px}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes dropIn{0%{opacity:0;transform:translateY(-10px) scale(.98);background:var(--brand-soft)}60%{background:var(--brand-soft)}100%{opacity:1;transform:none;background:transparent}}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes burst{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1)}}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ============================================================
   MOBILE  (<=920px) — compact greeting, tabs + tasks first,
   floating mic bottom-right, listening shown as bottom sheet
   ============================================================ */
@media (max-width:920px){
  .wrap{padding:0 14px}

  /* hide big hero + inline capture, show compact greeting */
  .hero{display:none}
  .mhead{display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 2px}
  .mh-l{min-width:0}
  .mh-hi{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
  .mh-sub{display:block;font-size:12px;color:var(--ink-subtle);font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mh-r{display:flex;align-items:center;gap:8px;flex:none}
  .mh-pill{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;
    padding:7px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
  .mh-pill svg{width:14px;height:14px}
  .mh-streak{color:var(--ink);}
  .mh-streak svg{color:var(--brand)}
  .mh-prog{color:var(--brand-strong);background:var(--brand-soft);border-color:transparent}
  :root[data-theme="dark"] .mh-prog{color:var(--brand)}

  .seg{display:flex;flex:none;gap:7px;margin:10px 0 4px}

  /* inline capture hidden; appears only while listening as a bottom sheet */
  .capture{display:none}
  .capture.listening{display:flex;position:fixed;left:14px;right:14px;
    bottom:calc(20px + env(safe-area-inset-bottom));margin:0;z-index:58;
    box-shadow:0 0 0 3px var(--focus-ring),var(--shadow-lg)}

  .grid{display:flex;flex-direction:column;margin:6px 0 0;padding-bottom:0;min-height:0}
  .panel{display:none}
  .panel.active{display:flex;flex-direction:column;flex:1;min-height:0}
  .panel-body{padding-bottom:96px}

  /* floating circular mic button, bottom-right */
  .fab{display:grid;place-items:center;position:fixed;right:18px;left:auto;
    bottom:calc(20px + env(safe-area-inset-bottom));z-index:55;
    width:62px;height:62px;border-radius:50%;background:var(--cta);color:var(--cta-fg);
    box-shadow:0 12px 30px color-mix(in srgb,var(--brand) 45%,transparent)}
  .fab span{display:none}
  .fab:active{transform:scale(.93)}
  .fab svg{width:24px;height:24px}
  .fab.listening{display:none}

  .toasts{bottom:calc(96px + env(safe-area-inset-bottom))}
}