/* VocaLog — ported from the locked prototype (mockups/dotter-iphone.html) */
:root{
    --screen:#F4F5F7; --card:#FFFFFF; --cardline:#ECEEF2;
    --navy:#4F46E5; --navy-hi:#6366F1; --navy-deep:#4338CA; --serif:#0B1437; --ink:#111827;
    --gray:#6B7280; --gray-w:#9CA3AF; --gray-l:#B6BCC6; --slate:#4F46E5; --wave:#D7DAE0;
    --line:#EEF0F3;
    /* brand gradient echoing the logo (cyan → indigo) */
    --grad:linear-gradient(150deg,#2E9BFF,#4F46E5 60%,#4B22D6);
    --disp:'Sora','Inter',-apple-system,system-ui,sans-serif; --ui:'Inter',-apple-system,system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{background:var(--screen);font-family:var(--ui);-webkit-font-smoothing:antialiased;color:var(--ink);
    display:flex;flex-direction:column;min-height:100dvh;overflow:hidden;}
  svg{display:block;}

  /* ===== top header bar (sticky) ===== */
  .appbar{padding-top:env(safe-area-inset-top);background:rgba(255,255,255,.85);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);position:relative;z-index:10;flex-shrink:0;}
  .appbar-row{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;}
  .appbar .brand{display:flex;align-items:center;gap:9px;font-family:var(--ui);font-size:20px;font-weight:800;color:var(--serif);letter-spacing:-.02em;}
  .appbar .brand{gap:11px;}
  .appbar .brand-mark{width:38px;height:38px;flex:none;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(17,24,39,.12);object-fit:contain;padding:2px;}
  .appbar .acts{display:flex;align-items:center;gap:9px;}
  .appbar .ic{width:38px;height:38px;border-radius:11px;background:#EEF0F3;border:1px solid var(--cardline);display:flex;align-items:center;justify-content:center;color:var(--gray);}
  .appbar .ic svg{width:18px;height:18px;}
  .appbar .ic.avatar{border-radius:50%;}

  .scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(104px + env(safe-area-inset-bottom));}
  .scroll::-webkit-scrollbar{display:none;}

  /* page heading (per tab) */
  .phead{padding:22px 22px 4px;}
  .phead .ey{font-size:11px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--gray-w);}
  .phead h1{margin-top:8px;font-family:var(--disp);font-size:28px;font-weight:500;color:var(--serif);letter-spacing:.2px;line-height:1.05;}
  .phead p{margin-top:9px;font-size:13.5px;color:var(--gray);line-height:1.45;}

  /* section row */
  .secrow{display:flex;align-items:center;justify-content:space-between;padding:24px 22px 14px;}
  .secrow .h{font-size:14px;font-weight:700;color:var(--ink);}
  .toggle{display:flex;background:#EEF0F3;border:1px solid var(--cardline);border-radius:11px;padding:3px;gap:2px;}
  .toggle button{width:36px;height:30px;border:0;background:transparent;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--gray-w);cursor:pointer;}
  .toggle button.on{background:var(--card);color:var(--navy);box-shadow:0 1px 3px rgba(40,30,20,.1);}
  .toggle button svg{width:16px;height:16px;}

  /* cards */
  .cards{padding:0 22px;display:flex;flex-direction:column;gap:14px;}
  .card{background:var(--card);border:1px solid var(--cardline);border-radius:20px;padding:18px 18px 16px;box-shadow:0 4px 14px rgba(60,45,22,.045);}
  .c-top{display:flex;align-items:center;justify-content:space-between;}
  .cat{font-size:10px;font-weight:600;color:var(--slate);letter-spacing:1.3px;text-transform:uppercase;}
  .when{font-size:12px;color:var(--gray-w);font-variant-numeric:tabular-nums;}
  .c-title{margin-top:10px;font-family:var(--disp);font-size:20px;font-weight:500;color:var(--serif);letter-spacing:.2px;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .c-desc{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--gray);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  /* playback panel — hidden until play is pressed */
  .player{max-height:0;opacity:0;overflow:hidden;transition:max-height .34s ease,opacity .26s ease,margin-top .34s ease;}
  .card.playing .player{max-height:72px;opacity:1;margin-top:15px;}
  .pwave{display:flex;align-items:center;gap:2px;height:30px;}
  .pwave i{flex:1;min-width:2px;border-radius:2px;background:var(--wave);transition:background .12s;}
  .pwave i.on{background:var(--navy);}
  .ptime{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:11.5px;color:var(--gray-w);font-variant-numeric:tabular-nums;}
  .ptime .pe{color:var(--navy);font-weight:600;}
  .c-foot{margin-top:15px;display:flex;align-items:center;justify-content:space-between;}
  .who{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gray-w);}
  .who svg{width:13px;height:13px;color:var(--gray-l);}
  .c-actions{display:flex;align-items:center;gap:13px;}
  .dur{font-size:12px;color:var(--gray-w);font-variant-numeric:tabular-nums;}
  .card.playing .dur{display:none;}
  /* play button — soft tinted default, fills when playing */
  .play{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;
    background:color-mix(in srgb,var(--navy) 9%,#fff);color:var(--navy);border:1px solid color-mix(in srgb,var(--navy) 16%,transparent);transition:background .15s,color .15s,box-shadow .15s,border-color .15s;}
  .play svg{width:14px;height:14px;margin-left:1px;}
  .card.playing .play{background:linear-gradient(165deg,var(--navy-hi),var(--navy-deep));color:#fff;border-color:transparent;box-shadow:0 5px 12px rgba(26,44,84,.32);}
  .card.playing .play svg{margin-left:0;}
  .card.proc .c-title{color:var(--gray);}
  .proc-dots{display:inline-flex;gap:5px;padding:2px 0;}
  .proc-dots i{width:6px;height:6px;border-radius:50%;background:var(--navy);opacity:.4;animation:pdot 1s ease-in-out infinite;}
  .proc-dots i:nth-child(2){animation-delay:.18s;}.proc-dots i:nth-child(3){animation-delay:.36s;}
  @keyframes pdot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

  /* calendar */
  .calwrap{padding:6px 22px 0;}
  .monthnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
  .monthnav .mn{font-family:var(--disp);font-size:23px;font-weight:500;color:var(--serif);}
  .monthnav .mnav{display:flex;gap:8px;}
  .navb{width:36px;height:36px;border-radius:11px;border:1px solid var(--cardline);background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--gray);}
  .navb svg{width:15px;height:15px;}
  .wk{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:8px;}
  .wk span{text-align:center;font-size:10.5px;font-weight:600;color:var(--gray-w);}
  .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
  .cell{aspect-ratio:1/1.04;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:15px;font-weight:500;color:var(--ink);}
  .cell.mut{color:#C9C0B1;}
  .cell .cd{display:flex;gap:2.5px;height:4px;}
  .cell .cd i{width:4px;height:4px;border-radius:50%;background:var(--navy);opacity:.8;}
  .cell.today{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--navy) 35%,transparent);}
  .cell.sel{background:linear-gradient(165deg,var(--navy-hi),var(--navy-deep));color:#fff;box-shadow:0 6px 14px rgba(26,44,84,.3);}
  .cell.sel .cd i{background:#fff;}
  .selday{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
  .selday .sh{font-family:var(--disp);font-size:18px;font-weight:500;color:var(--serif);}
  .selday .ss{margin-top:3px;font-size:12px;color:var(--gray);margin-bottom:14px;}
  .crow{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--cardline);border-radius:16px;padding:13px 15px;margin-bottom:10px;box-shadow:0 3px 10px rgba(60,45,22,.04);}
  .crow .ct{width:3px;align-self:stretch;border-radius:3px;background:var(--navy);opacity:.5;}
  .crow .cm{flex:1;min-width:0;}
  .crow .cm .t{display:block;font-family:var(--disp);font-size:16px;font-weight:500;color:var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .crow .cm .m{display:block;margin-top:2px;font-size:12px;color:var(--gray);}
  .crow .tm{font-size:12px;color:var(--gray-w);font-variant-numeric:tabular-nums;flex-shrink:0;}

  /* insights — suggested actions + stats */
  .sugg{margin:0 22px 12px;display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--cardline);border-radius:18px;padding:15px 13px 15px 15px;box-shadow:0 4px 14px rgba(60,45,22,.045);}
  .sugg .ico{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--slate) 12%,#FCFAF4);display:flex;align-items:center;justify-content:center;color:var(--slate);flex-shrink:0;}
  .sugg .ico svg{width:19px;height:19px;}
  .sugg .body{flex:1;min-width:0;}
  .sugg .lbl{font-size:10.5px;font-weight:600;color:var(--slate);letter-spacing:1.2px;text-transform:uppercase;}
  .sugg .txt{margin-top:3px;font-size:13px;line-height:1.35;color:var(--ink);}
  .sugg .add{height:32px;padding:0 14px;border-radius:10px;background:linear-gradient(165deg,var(--navy-hi),var(--navy-deep));color:#fff;font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:5px;flex-shrink:0;box-shadow:0 4px 10px rgba(26,44,84,.28);}
  .sugg .add svg{width:13px;height:13px;}
  .stats{padding:8px 22px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .stat{background:var(--card);border:1px solid var(--cardline);border-radius:18px;padding:16px;box-shadow:0 4px 14px rgba(60,45,22,.04);}
  .stat .n{font-family:var(--disp);font-size:30px;font-weight:500;color:var(--serif);}
  .stat .k{margin-top:4px;font-size:12px;color:var(--gray);}

  /* generic list rows (people / settings) */
  .rows{padding:4px 22px 0;display:flex;flex-direction:column;gap:10px;}
  .row{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--cardline);border-radius:16px;padding:14px 15px;box-shadow:0 3px 10px rgba(60,45,22,.04);}
  .row .ava{width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--navy) 12%,#FCFAF4);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0;}
  .row .ava.sq{border-radius:11px;}.row .ava svg{width:18px;height:18px;}
  .row .rt{flex:1;min-width:0;}
  .row .rt .t{font-size:15px;font-weight:500;color:var(--ink);}
  .row .rt .s{margin-top:2px;font-size:12px;color:var(--gray);}
  .row .chev{color:var(--gray-l);}.row .chev svg{width:17px;height:17px;}

  /* view switching */
  .view{display:none;}
  body[data-tab="memories"] .v-mem{display:block;}
  body[data-tab="insights"] .v-ins{display:block;}
  body[data-tab="people"]   .v-ppl{display:block;}
  body[data-tab="settings"] .v-set{display:block;}
  [data-view="list"] .vm-cal{display:none;}
  [data-view="calendar"] .vm-list{display:none;}

  /* recording bar */
  .rec-bar{position:fixed;left:16px;right:16px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:18;height:50px;border-radius:16px;
    background:var(--card);border:1px solid var(--cardline);box-shadow:0 12px 30px rgba(20,16,10,.20),0 4px 10px rgba(20,16,10,.12);
    display:flex;align-items:center;gap:12px;padding:0 10px 0 16px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .22s,transform .22s;}
  body.recording .rec-bar{opacity:1;transform:none;pointer-events:auto;}
  .rec-bar .rd{width:8px;height:8px;border-radius:50%;background:#C0473E;flex-shrink:0;animation:blink 1.4s ease-in-out infinite;}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
  .rec-bar .rt{font-size:12.5px;font-weight:500;color:var(--gray);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:30px;}
  .rec-bar .rw{flex:1;display:flex;align-items:center;gap:2px;height:26px;overflow:hidden;}
  .rec-bar .rw i{width:2.4px;height:22px;border-radius:3px;background:var(--navy);opacity:.78;transform-origin:center;animation:bob 1s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
  .rec-bar .rcancel{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#EEF0F3;border:1px solid var(--cardline);color:var(--gray);}
  .rec-bar .rcancel svg{width:15px;height:15px;}

  /* ===== memory detail (transcript + summary + todos) ===== */
  .detail{position:fixed;inset:0;z-index:40;background:var(--screen);display:flex;flex-direction:column;
    transform:translateX(100%);transition:transform .32s cubic-bezier(.3,.7,.3,1);visibility:hidden;}
  body.detail-open .detail{transform:none;visibility:visible;}
  .pdetail{position:fixed;inset:0;z-index:42;background:var(--screen);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.3,.7,.3,1);visibility:hidden;}
  body.pdetail-open .pdetail{transform:none;visibility:visible;}
  .pempty{padding:40px 6px;text-align:center;color:var(--gray);font-size:14px;line-height:1.5;}
  .dbar{padding-top:env(safe-area-inset-top);background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);}
  .dbar-row{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;}
  .dbtn{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--ink);background:none;border:0;cursor:pointer;}
  .dbtn svg{width:22px;height:22px;}
  .dbar .dt{font-size:15px;font-weight:500;color:var(--ink);}
  .dscroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(150px + env(safe-area-inset-bottom));}
  .dscroll::-webkit-scrollbar{display:none;}
  .dhero{padding:20px 22px 0;}
  .dhero .ey{font-size:10.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--slate);}
  .dhero h2{margin-top:8px;font-family:var(--disp);font-size:26px;font-weight:500;color:var(--serif);letter-spacing:.2px;line-height:1.1;}
  .dhero .meta{margin-top:9px;font-size:12.5px;color:var(--gray);}
  .dseg{margin:20px 22px 6px;display:flex;background:#EEF0F3;border:1px solid var(--cardline);border-radius:12px;padding:3px;}
  .dseg button{flex:1;height:36px;border:0;background:none;border-radius:9px;font-family:var(--ui);font-size:13px;font-weight:500;color:var(--gray);cursor:pointer;}
  .dseg button.on{background:var(--card);color:var(--navy);box-shadow:0 1px 3px rgba(40,30,20,.1);}
  .dsec{padding:16px 22px 0;}
  .dsec h3{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--gray-w);margin-bottom:12px;}
  .bullet{display:flex;gap:11px;font-size:14.5px;line-height:1.5;color:var(--ink);margin-bottom:12px;}
  .bullet .bd{width:6px;height:6px;border-radius:50%;background:var(--navy);margin-top:7px;flex-shrink:0;}
  .todo{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line);cursor:pointer;}
  .todo.first{border-top:0;}
  .todo .box{width:22px;height:22px;border-radius:7px;border:1.6px solid color-mix(in srgb,var(--navy) 38%,transparent);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .15s,border-color .15s;}
  .todo .box svg{width:14px;height:14px;opacity:0;transition:opacity .15s;}
  .todo.done .box{background:var(--navy);border-color:var(--navy);}
  .todo.done .box svg{opacity:1;}
  .todo .tt{flex:1;font-size:14.5px;line-height:1.45;color:var(--ink);}
  .todo.done .tt{color:var(--gray-w);text-decoration:line-through;}
  .todo .cal{font-size:11px;color:var(--slate);font-weight:600;flex-shrink:0;display:flex;align-items:center;gap:4px;padding-top:2px;}
  .todo .cal svg{width:13px;height:13px;}
  /* transcript (Spotify-lyrics style) */
  .tview{padding:10px 22px 0;display:none;}
  body[data-dtab="transcript"] .tview{display:block;}
  body[data-dtab="transcript"] .sview{display:none;}
  .tline{font-size:17px;line-height:1.5;color:#CBC2B3;padding:9px 0;transition:color .25s;cursor:pointer;font-weight:450;letter-spacing:.1px;}
  .tline.past{color:var(--gray);}
  .tline.cur{color:var(--serif);font-weight:600;}
  /* detail player (pinned) */
  .dplayer{position:absolute;left:0;right:0;bottom:0;padding:14px 22px calc(16px + env(safe-area-inset-bottom));
    background:rgba(248,243,235,.96);backdrop-filter:blur(18px);border-top:1px solid var(--line);}
  .dscrub{height:4px;border-radius:3px;background:#E4DCCD;cursor:pointer;}
  .dscrub .fill{height:100%;width:0;background:var(--navy);border-radius:3px;}
  .dptime{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--gray-w);font-variant-numeric:tabular-nums;}
  .dptime .de{color:var(--navy);font-weight:600;}
  .dctrls{margin-top:6px;display:flex;align-items:center;justify-content:center;gap:30px;}
  .dctrls .sk{color:var(--ink);background:none;border:0;cursor:pointer;}.dctrls .sk svg{width:23px;height:23px;}
  .dpp{width:56px;height:56px;border-radius:50%;background:linear-gradient(165deg,var(--navy-hi),var(--navy-deep));display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(26,44,84,.34);border:0;cursor:pointer;}
  .dpp svg{width:24px;height:24px;color:#fff;}

  /* bottom nav */
  .nav{position:fixed;left:0;right:0;bottom:0;background:rgba(248,243,235,.94);backdrop-filter:blur(18px);border-top:1px solid var(--line);
    display:flex;align-items:flex-start;justify-content:space-around;padding:12px 16px calc(8px + env(safe-area-inset-bottom));z-index:15;}
  .tab{display:flex;flex-direction:column;align-items:center;gap:5px;color:#A09889;flex:1;background:none;border:0;cursor:pointer;}
  .tab svg{width:22px;height:22px;}
  .tab span{font-size:10px;font-weight:500;}
  .tab.on{color:var(--navy);}
  .mic-tab{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--gray);background:none;border:0;cursor:pointer;}
  .mic-btn{width:56px;height:56px;border-radius:50%;margin-top:-6px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(165deg,var(--navy-hi),var(--navy-deep));border:3px solid #FAF7F0;box-shadow:0 8px 20px rgba(26,44,84,.36),inset 0 1.5px 0 rgba(255,255,255,.25);transition:background .2s;}
  .mic-btn svg{width:25px;height:25px;color:#fff;}
  body.recording .mic-btn{background:linear-gradient(165deg,#C0473E,#9A352D);box-shadow:0 8px 20px rgba(160,50,40,.4);}
  .mic-tab span{font-size:10px;font-weight:500;}

  /* ===== brand splash ===== */
  .splash{position:fixed;inset:0;z-index:60;background:
    radial-gradient(120% 80% at 50% 12%, color-mix(in srgb,var(--navy) 6%,var(--screen)), var(--screen) 60%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 42px;
    opacity:1;transition:opacity .7s ease;}
  .splash.hide{opacity:0;pointer-events:none;}
  .splash .mark{width:62px;height:62px;border-radius:20px;background:linear-gradient(165deg,var(--navy-hi),var(--navy-deep));
    display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(26,44,84,.34),inset 0 1.5px 0 rgba(255,255,255,.22);margin-bottom:28px;}
  .splash .mark svg{width:30px;height:30px;}
  .splash .wm{font-family:var(--disp);font-size:44px;font-weight:600;color:var(--serif);letter-spacing:.3px;}
  .splash .tl{margin-top:14px;font-size:11px;font-weight:600;letter-spacing:3.2px;text-transform:uppercase;color:var(--slate);}
  .splash .q{margin-top:30px;font-family:var(--disp);font-style:italic;font-size:17.5px;line-height:1.55;color:var(--gray);max-width:300px;}

  /* ===== dark theme (opt-in; light stays default) ===== */
  [data-theme="dark"]{
    --screen:#0F1117; --card:#1A1D27; --cardline:rgba(255,255,255,.08);
    --serif:#F3F4F6; --ink:#E5E7EB; --gray:#9CA3AF; --gray-w:#6B7280; --gray-l:#4B5563;
    --slate:#A5B4FC; --line:rgba(255,255,255,.06); --wave:#3A3F4B;
  }
  [data-theme="dark"] .appbar{background:rgba(15,17,23,.85);}
  [data-theme="dark"] .appbar .ic{background:#22263280;color:var(--gray);}
  [data-theme="dark"] .secrow .h{color:var(--ink);}
  [data-theme="dark"] .toggle,[data-theme="dark"] .dseg,[data-theme="dark"] .rec-bar .rcancel{background:#22263280;}
  [data-theme="dark"] .play{background:color-mix(in srgb,var(--navy) 30%,#1A1D27);border-color:color-mix(in srgb,var(--navy) 42%,transparent);color:#C7D2FE;}
  [data-theme="dark"] .cell.mut{color:#3F4654;}
  [data-theme="dark"] .sugg .ico{background:color-mix(in srgb,var(--slate) 22%,#1A1D27);}
  [data-theme="dark"] .row .ava{background:color-mix(in srgb,var(--navy) 30%,#1A1D27);color:#C7D2FE;}
  [data-theme="dark"] .dbar{background:rgba(15,17,23,.9);}
  [data-theme="dark"] .tline{color:#7A8190;}
  [data-theme="dark"] .dplayer{background:rgba(12,14,20,.96);}
  [data-theme="dark"] .dscrub{background:#2A2F3C;}
  [data-theme="dark"] .nav{background:rgba(12,14,20,.94);}
  [data-theme="dark"] .mic-btn{border-color:#0F1117;}
  /* dark-mode fixes for the reskin components */
  [data-theme="dark"] .appbar .brand-mark{background:#fff;}
  [data-theme="dark"] .ptag{background:color-mix(in srgb,var(--navy) 28%,transparent);color:#C7D2FE;}
  [data-theme="dark"] .ftab{background:#22263280;color:var(--gray);}
  [data-theme="dark"] .ftab.on{background:color-mix(in srgb,var(--navy) 30%,transparent);color:#C7D2FE;}
  [data-theme="dark"] .inbar-t{background:#262B38;}
  [data-theme="dark"] .intile,[data-theme="dark"] .otdcard{background:var(--card);}
  [data-theme="dark"] .field-in{background:#13161F;}
  [data-theme="dark"] .secedit:hover,[data-theme="dark"] .focx:active{background:#22263280;}

  /* ===== accent sheet ===== */
  .sheet{position:fixed;inset:0;z-index:50;display:none;}
  .sheet.on{display:block;}
  .sheet .scrim{position:absolute;inset:0;background:rgba(20,16,10,.42);animation:fadein .2s ease;}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  .sheet .panel{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:26px 26px 0 0;
    padding:10px 22px calc(26px + env(safe-area-inset-bottom));box-shadow:0 -12px 44px rgba(0,0,0,.22);animation:slideup .28s cubic-bezier(.2,.7,.3,1);}
  @keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
  .sheet .grab{width:38px;height:5px;border-radius:3px;background:var(--cardline);margin:0 auto 16px;}
  .sheet h4{font-family:var(--disp);font-size:21px;font-weight:500;color:var(--serif);text-align:center;}
  .sheet .ssub{margin-top:6px;text-align:center;font-size:13px;color:var(--gray);}
  .sheet .swrow{margin-top:24px;display:flex;justify-content:space-between;}
  .ssw{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;flex:1;}
  .ssw .ring{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1.5px transparent;transition:box-shadow .2s;position:relative;}
  .ssw .disc{width:42px;height:42px;border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 10px rgba(40,30,20,.16);transition:width .2s,height .2s;}
  .ssw .ck{position:absolute;color:#fff;opacity:0;transition:opacity .2s;}.ssw .ck svg{width:18px;height:18px;}
  .ssw .nm{font-size:11.5px;color:var(--gray);}
  .ssw.sel .ring{box-shadow:0 0 0 1.5px var(--ssc);}
  .ssw.sel .disc{width:46px;height:46px;}
  .ssw.sel .ck{opacity:1;}
  .ssw.sel .nm{color:var(--ink);font-weight:500;}

/* app root */
#app{display:flex;flex-direction:column;height:100dvh;overflow:hidden;}
#app:empty{display:none;}

/* ===== onboarding ===== */
.ob{height:100dvh;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 22px) 30px calc(env(safe-area-inset-bottom) + 22px);}
.ob-dots{display:flex;gap:6px;justify-content:center;}
.ob-dots i{width:7px;height:7px;border-radius:50%;background:var(--cardline);}
.ob-dots i.on{width:22px;border-radius:3px;background:var(--navy);}
.ob-body{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;align-items:center;}
.ob-body.left{text-align:left;align-items:stretch;justify-content:flex-start;padding-top:24px;}
.ob-mark{width:84px;height:84px;border-radius:26px;background:linear-gradient(165deg,var(--navy-hi),var(--navy-deep));display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px color-mix(in srgb,var(--navy) 34%,transparent);margin-bottom:28px;}
.ob-mark svg{width:40px;height:40px;color:#fff;}
.ob h1{font-family:var(--disp);font-size:34px;font-weight:500;color:var(--serif);line-height:1.05;letter-spacing:.2px;}
.ob p{margin-top:14px;font-size:15px;line-height:1.5;color:var(--gray);max-width:300px;}
.ob-pill{margin-top:16px;font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--slate);}
.ob-field{margin-top:24px;width:100%;height:54px;border-radius:14px;border:1px solid var(--cardline);background:var(--card);padding:0 16px;font-family:var(--ui);font-size:16px;color:var(--ink);}
.ob-field:focus{outline:none;border-color:color-mix(in srgb,var(--navy) 45%,transparent);}
.ob-foot{flex-shrink:0;}
.ob-btn{width:100%;height:54px;border-radius:16px;background:linear-gradient(165deg,var(--navy-hi),var(--navy-deep));color:#fff;font-family:var(--ui);font-size:15.5px;font-weight:600;border:0;cursor:pointer;box-shadow:0 10px 22px color-mix(in srgb,var(--navy) 30%,transparent);}
.ob-sw{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 8px;width:100%;margin-top:26px;justify-items:center;}
.ob-sw .o{display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;}
.ob-sw .o .d{width:52px;height:52px;border-radius:50%;box-shadow:0 0 0 1.5px transparent;display:flex;align-items:center;justify-content:center;transition:box-shadow .2s;}
.ob-sw .o.sel .d{box-shadow:0 0 0 1.5px var(--sc);}
.ob-sw .o .dd{width:40px;height:40px;border-radius:50%;transition:width .15s,height .15s;}
.ob-sw .o.sel .dd{width:44px;height:44px;}
.ob-sw .o .nm{font-size:11px;color:var(--gray);}
.ob-sw .o.sel .nm{color:var(--ink);font-weight:500;}
.ob-choices{margin-top:24px;display:flex;flex-direction:column;gap:11px;width:100%;}
.ob-ch{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--cardline);border-radius:16px;padding:15px;text-align:left;cursor:pointer;}
.ob-ch.sel{border-color:color-mix(in srgb,var(--navy) 45%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--navy) 35%,transparent);}
.ob-ch b{font-size:15px;color:var(--ink);font-weight:600;display:block;}
.ob-ch span{font-size:12.5px;color:var(--gray);}
.ob-ch .ck{margin-left:auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--cardline);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.ob-ch.sel .ck{background:var(--navy);border-color:var(--navy);}
.ob-ch .ck svg{width:14px;height:14px;opacity:0;}.ob-ch.sel .ck svg{opacity:1;}

/* ===== action sheet rows (rename / star / pin / archive / delete) ===== */
.sheet .panel .sheet-ttl{font-family:var(--disp);font-size:18px;font-weight:500;color:var(--serif);text-align:center;margin:2px 0 6px;}
.sheet .panel .sheet-sub{text-align:center;color:var(--gray);font-size:13px;line-height:1.5;margin:2px 6px 14px;}
.sheet .panel .act{display:flex;align-items:center;gap:13px;width:100%;background:transparent;border:0;border-radius:13px;padding:14px 12px;font-family:var(--ui);font-size:15px;color:var(--ink);text-align:left;cursor:pointer;}
.sheet .panel .act:active{background:color-mix(in srgb,var(--navy) 8%,transparent);}
.sheet .panel .act .ai{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--slate);flex:0 0 auto;}
.sheet .panel .act .ai svg{width:20px;height:20px;}
.sheet .panel .act .chev{margin-left:auto;color:var(--gray-w);display:flex;}
.sheet .panel .act .chev svg{width:18px;height:18px;}
.sheet .panel .act.danger{color:#C0473E;}
.sheet .panel .act.danger .ai{color:#C0473E;}
.sheet .panel .opt{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:0;padding:15px 12px;font-size:15px;color:var(--ink);cursor:pointer;border-radius:13px;}
.sheet .panel .opt:active{background:color-mix(in srgb,var(--navy) 8%,transparent);}

/* ===== card pin/star badges + menu ===== */
.c-top-r{display:flex;align-items:center;gap:8px;}
.c-top-r .cbadge{display:inline-flex;align-items:center;color:var(--navy);}
.c-top-r .cbadge svg{width:13px;height:13px;}
.c-top-r .cbadge.star{color:#C8912E;}
.c-top-r .cmenu{background:transparent;border:0;color:var(--gray-w);cursor:pointer;display:flex;align-items:center;padding:2px;margin:-4px -6px -4px 0;}
.c-top-r .cmenu svg{width:18px;height:18px;}

/* ===== archived list rows ===== */
.sheet .panel .arow{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--cardline);}
.sheet .panel .arow:last-child{border-bottom:0;}
.sheet .panel .arow .at{flex:1;min-width:0;}
.sheet .panel .arow .at .t{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sheet .panel .arow .at .m{font-size:11.5px;color:var(--gray);margin-top:2px;}
.sheet .panel .arow .abtn{flex:0 0 auto;width:38px;height:38px;border-radius:11px;border:1px solid var(--cardline);background:var(--card);color:var(--slate);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.sheet .panel .arow .abtn svg{width:18px;height:18px;}
.sheet .panel .arow .abtn.danger{color:#C0473E;}

/* ===== expandable nav: grip + 4 tools + mic ===== */
.nav{flex-direction:column;align-items:stretch;padding:0 16px calc(8px + env(safe-area-inset-bottom));}
.nav-grip{width:100%;display:flex;justify-content:center;align-items:center;background:none;border:0;padding:8px 0 8px;cursor:pointer;}
.nav-grip .gr{width:36px;height:4px;border-radius:2px;background:var(--cardline);transition:background .2s,width .2s;}
.nav-grip:active .gr{background:var(--navy);width:48px;}
.navrow{display:flex;align-items:flex-start;justify-content:space-around;}

/* More drawer */
.sheet .panel.navsheet{max-height:66vh;overflow-y:auto;}
.ndhead{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 16px;}
.ndt{font-family:var(--disp);font-size:18px;font-weight:500;color:var(--serif);}
.ndedit{background:none;border:0;color:var(--navy);font-size:13.5px;font-weight:600;cursor:pointer;}
.ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.ntile{display:flex;flex-direction:column;align-items:center;gap:9px;padding:20px 8px;background:var(--card);border:1px solid var(--cardline);border-radius:18px;color:var(--ink);cursor:pointer;position:relative;}
.ntile .ni{color:var(--navy);display:flex;}.ntile .ni svg{width:24px;height:24px;}
.ntile .nl{font-size:12px;font-weight:500;}
.ntile.pinned{border-color:var(--navy);background:color-mix(in srgb,var(--navy) 8%,var(--card));}
.ntile .npin{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;border:1px solid var(--cardline);display:flex;align-items:center;justify-content:center;color:var(--gray-w);}
.ntile .npin svg{width:13px;height:13px;}
.ntile.pinned .npin{background:var(--navy);border-color:var(--navy);color:#fff;}
.ndhint{text-align:center;color:var(--gray);font-size:12px;margin-top:14px;}

/* ===== Ask (chatbot) ===== */
.askscroll{padding-bottom:calc(200px + env(safe-area-inset-bottom));}
.asugs{display:flex;flex-direction:column;gap:10px;padding:8px 22px 0;}
.asug{text-align:left;background:var(--card);border:1px solid var(--cardline);border-radius:14px;padding:14px 16px;font-size:14px;color:var(--ink);cursor:pointer;}
.asug:active{background:color-mix(in srgb,var(--navy) 6%,var(--card));}
.athread{padding:10px 22px 0;display:flex;flex-direction:column;gap:14px;}
.amsg{display:flex;gap:9px;}
.amsg.user{justify-content:flex-end;}
.amsg.assistant{justify-content:flex-start;}
.abub{padding:12px 15px;font-size:14.5px;line-height:1.5;max-width:78%;}
.amsg.user .abub{background:linear-gradient(165deg,var(--navy-hi),var(--navy-deep));color:#fff;border-radius:18px 18px 5px 18px;}
.amsg.assistant .abub{background:var(--card);border:1px solid var(--cardline);color:var(--ink);border-radius:18px 18px 18px 5px;}
.amsg .aav{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--navy) 12%,var(--card));color:var(--navy);display:flex;align-items:center;justify-content:center;}
.amsg .aav svg{width:16px;height:16px;}
.acompose{position:fixed;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom));z-index:16;padding:10px 18px 12px;background:linear-gradient(to top,var(--screen) 72%,transparent);}
.actl{display:flex;gap:8px;margin-bottom:9px;}
.achip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--cardline);border-radius:20px;padding:7px 13px;font-size:12.5px;color:var(--slate);cursor:pointer;}
.achip svg{width:15px;height:15px;}
.achip.on{color:var(--navy);border-color:var(--navy);background:color-mix(in srgb,var(--navy) 8%,var(--card));}
.achip.model{color:var(--navy);font-weight:600;}
.afield{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--cardline);border-radius:16px;padding:6px 6px 6px 16px;box-shadow:0 4px 16px rgba(60,45,22,.06);}
.afield input{flex:1;border:0;background:none;font-family:var(--ui);font-size:15px;color:var(--ink);outline:none;}
.asend{flex:0 0 auto;width:40px;height:40px;border-radius:12px;border:0;background:linear-gradient(165deg,var(--navy-hi),var(--navy-deep));color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.asend svg{width:18px;height:18px;}
.segwrap{display:flex;gap:8px;}
.segb{flex:1;padding:11px 0;border-radius:12px;border:1px solid var(--cardline);background:var(--card);color:var(--slate);font-size:13px;font-weight:500;cursor:pointer;}
.segb.on{border-color:var(--navy);color:var(--navy);background:color-mix(in srgb,var(--navy) 8%,var(--card));}

/* chat typing indicator */
.abub.typing{display:flex;gap:5px;align-items:center;padding:15px 16px;}
.abub.typing i{width:7px;height:7px;border-radius:50%;background:var(--gray-w);animation:atype 1s infinite ease-in-out;}
.abub.typing i:nth-child(2){animation-delay:.15s;}
.abub.typing i:nth-child(3){animation-delay:.3s;}
@keyframes atype{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ===== weekly recap (Insights) ===== */
.recap{margin:0 22px;background:var(--card);border:1px solid var(--cardline);border-radius:18px;padding:16px 17px;}
.recap-line{font-size:14.5px;color:var(--ink);font-weight:500;}
.recap-ppl{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;}
.recap-ppl .rchip{font-size:12px;color:var(--slate);background:color-mix(in srgb,var(--navy) 8%,var(--card));border:1px solid var(--cardline);border-radius:20px;padding:4px 11px;}
.recap-todos{margin-top:13px;display:flex;flex-direction:column;gap:9px;}
.recap-todos .rtodo{display:flex;align-items:center;gap:10px;}
.recap-todos .rtodo span{flex:1;font-size:13.5px;color:var(--ink);}
.recap-todos .rtodo button{flex:0 0 auto;width:32px;height:32px;border-radius:10px;border:1px solid var(--cardline);background:var(--card);color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.recap-todos .rtodo button svg{width:17px;height:17px;}
.recap-empty{margin-top:10px;font-size:13px;color:var(--gray);}

/* ===== Create (image generation) ===== */
.cmake{display:flex;gap:9px;align-items:center;background:var(--card);border:1px solid var(--cardline);border-radius:16px;padding:6px 6px 6px 16px;box-shadow:0 4px 16px rgba(60,45,22,.06);}
.cmake-in{flex:1;border:0;background:none;font-family:var(--ui);font-size:15px;color:var(--ink);outline:none;}
.cmake-btn{flex:0 0 auto;height:40px;padding:0 18px;border-radius:12px;border:0;background:linear-gradient(165deg,var(--navy-hi),var(--navy-deep));color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;}
.cmake-btn[disabled]{opacity:.6;}
.cgal{padding:16px 22px 0;display:flex;flex-direction:column;gap:16px;}
.cgal-empty{padding:40px 22px;text-align:center;color:var(--gray);font-size:14px;}
.cimg{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--cardline);background:var(--card);box-shadow:0 6px 18px rgba(60,45,22,.07);}
.cimg img{width:100%;display:block;}
.cimg figcaption{padding:11px 14px;font-size:12.5px;color:var(--slate);}
.cimg.loading{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--gray);font-size:13px;}
.cspin{width:30px;height:30px;border-radius:50%;border:3px solid var(--cardline);border-top-color:var(--navy);animation:cspin 0.8s linear infinite;}
@keyframes cspin{to{transform:rotate(360deg)}}

/* ===== turn-into-message sheet ===== */
.rw-load{display:flex;justify-content:center;padding:34px 0;}
.rw-out{width:100%;min-height:210px;border:1px solid var(--cardline);border-radius:14px;background:var(--card);padding:14px 15px;font-family:var(--ui);font-size:14px;line-height:1.55;color:var(--ink);resize:none;outline:none;}
.rw-acts{display:flex;gap:10px;margin-top:12px;}
.rw-acts .ob-btn{flex:1;}
.ob-btn.alt{background:var(--card);border:1px solid var(--cardline);color:var(--ink);}

/* ===== polish: ask header + image save ===== */
.asktop{display:flex;align-items:center;justify-content:space-between;padding:14px 22px 6px;}
.asktop>span{font-family:var(--disp);font-size:20px;font-weight:500;color:var(--serif);}
.asknew{background:var(--card);border:1px solid var(--cardline);border-radius:20px;padding:6px 13px;font-size:12.5px;color:var(--navy);font-weight:600;cursor:pointer;}
.cimg figcaption{display:flex;align-items:center;gap:10px;}
.cimg figcaption>span{flex:1;min-width:0;}
.csave{flex:0 0 auto;width:32px;height:32px;border-radius:10px;border:1px solid var(--cardline);background:var(--card);color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.csave svg{width:16px;height:16px;}

/* reformatted (template) block in detail */
.reformatted{white-space:pre-wrap;font-size:14px;line-height:1.55;color:var(--ink);}

/* collection filter chip */
.filterbar{padding:4px 22px 0;display:flex;gap:8px;}
.fchip{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--navy) 8%,var(--card));border:1px solid var(--navy);border-radius:20px;padding:6px 8px 6px 12px;font-size:12.5px;color:var(--navy);font-weight:600;cursor:pointer;}
.fchip svg{width:14px;height:14px;}

/* ===== app lock screen ===== */
.lock{height:100dvh;display:flex;flex-direction:column;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 60px) 34px calc(env(safe-area-inset-bottom) + 40px);}
.lock-top{display:flex;flex-direction:column;align-items:center;gap:18px;}
.lock-mark{width:60px;height:60px;border-radius:18px;background:linear-gradient(165deg,var(--navy-hi),var(--navy-deep));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(26,44,84,.28);}
.lock-mark svg{width:28px;height:28px;}
.lock-ttl{font-family:var(--disp);font-size:22px;font-weight:500;color:var(--serif);}
.lock-dots{display:flex;gap:16px;margin-top:4px;}
.lock-dots i{width:14px;height:14px;border-radius:50%;border:1.6px solid var(--navy);}
.lock-dots i.on{background:var(--navy);}
.lock-err{height:18px;font-size:13px;color:#C0473E;}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:300px;margin:0 auto;width:100%;}
.kkey{height:72px;border-radius:50%;border:0;background:var(--card);border:1px solid var(--cardline);font-size:26px;font-weight:400;color:var(--ink);font-family:var(--ui);cursor:pointer;}
.kkey:active{background:color-mix(in srgb,var(--navy) 10%,var(--card));}
.kkey.kdel{background:none;border:0;color:var(--slate);display:flex;align-items:center;justify-content:center;}
.kkey.kdel svg{width:26px;height:26px;}
.kspace{}
.keypad .kkey{width:72px;height:72px;justify-self:center;}
.keypad .kkey.kdel{width:72px;height:72px;}

/* ===== person detail (CRM) ===== */
.pdbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 4px;}
.pdbar .dt{font-size:13px;font-weight:600;color:var(--slate);letter-spacing:.4px;}
.pdhero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 22px 18px;}
.pdav{width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--navy) 14%,var(--card));color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;letter-spacing:.5px;}
.pdhero h1{font-family:var(--disp);font-size:26px;font-weight:500;color:var(--serif);margin:12px 0 4px;}
.pdmeta{font-size:13px;color:var(--gray);}

/* ===== Insights cleanup (stats + single to-do card) ===== */
.secrow .hsub{font-size:11.5px;color:var(--gray-w);font-weight:400;text-transform:none;letter-spacing:0;}
.stats{padding:0 22px;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.stat{background:var(--card);border:1px solid var(--cardline);border-radius:18px;padding:16px;}
.statn{font-family:var(--disp);font-size:30px;font-weight:500;color:var(--serif);line-height:1;}
.statk{margin-top:6px;font-size:12px;color:var(--gray);}
.todolist{margin:0 22px;background:var(--card);border:1px solid var(--cardline);border-radius:18px;padding:2px 16px;}
.todoitem{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--cardline);}
.todoitem:last-child{border-bottom:0;}
.tdt{flex:1;font-size:14px;color:var(--ink);line-height:1.4;}
.tdadd{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1px solid var(--cardline);background:var(--screen);color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;}
.tdadd:active{background:color-mix(in srgb,var(--navy) 10%,var(--screen));}
.tdadd svg{width:17px;height:17px;}

/* ===== Settings (grouped) ===== */
.setwrap{padding:4px 22px 0;}
.setgrp{margin-bottom:20px;}
.setlabel{font-size:11px;font-weight:600;color:var(--gray-w);text-transform:uppercase;letter-spacing:1.2px;margin:0 2px 9px;}
.setrow{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--cardline);border-radius:15px;padding:13px 14px;margin-bottom:8px;cursor:pointer;}
.setrow:last-child{margin-bottom:0;}
.setrow:active{background:color-mix(in srgb,var(--navy) 4%,var(--card));}
.seticon{width:36px;height:36px;border-radius:11px;background:color-mix(in srgb,var(--navy) 11%,var(--card));color:var(--navy);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.seticon svg{width:19px;height:19px;}
.setrt{flex:1;min-width:0;}
.sett{font-size:15px;font-weight:500;color:var(--ink);}
.sets{margin-top:2px;font-size:12px;color:var(--gray);}
.setchev{color:var(--gray-w);display:flex;}
.setchev svg{width:18px;height:18px;}
.resetbtn{width:100%;height:46px;border-radius:13px;background:var(--card);border:1px solid var(--cardline);color:#C0473E;font-weight:600;font-size:14px;cursor:pointer;}

/* onboarding: first + last name fields */
.ob-names{display:flex;flex-direction:column;gap:12px;margin-top:22px;}
.ob-names .ob-field{margin-top:0;}

/* ghost "new" row (collections) */
.newrow{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:transparent;border:1.5px dashed var(--cardline);border-radius:15px;padding:14px;color:var(--slate);font-size:14px;font-weight:500;cursor:pointer;margin-top:2px;}
.newrow:active{background:color-mix(in srgb,var(--navy) 4%,var(--screen));}
.newrow svg{width:18px;height:18px;}

/* welcome: wordmark + signature quote */
.ob-wordmark{font-family:var(--disp);font-size:40px;font-weight:500;color:var(--serif);letter-spacing:.3px;margin-top:18px;}
.ob-quote{font-family:var(--disp);font-style:italic;font-size:16px;line-height:1.55;color:var(--slate);max-width:320px;margin-top:16px;}

/* read-aloud + video badge */
.aspeak{flex:0 0 auto;align-self:flex-end;background:none;border:0;color:var(--gray-w);cursor:pointer;padding:4px;}
.aspeak svg{width:15px;height:15px;}
.c-top-r .cbadge.vid{color:var(--navy);}

/* ===== "+" New menu (capture / create hub) ===== */
.menu-label{font-size:11px;font-weight:600;color:var(--gray-w);text-transform:uppercase;letter-spacing:1.2px;margin:16px 4px 4px;}
.sheet .panel .caprow{align-items:center;gap:13px;}
.caprow .capic{width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:color-mix(in srgb,var(--navy) 11%,var(--card));color:var(--navy);display:flex;align-items:center;justify-content:center;}
.caprow .capic svg{width:20px;height:20px;}
.caprow .captx{flex:1;display:flex;flex-direction:column;align-items:flex-start;}
.caprow .captx b{font-weight:500;font-size:15px;color:var(--ink);}
.caprow .captx span{font-size:12px;color:var(--gray);margin-top:1px;}
.caprow .chev{color:var(--gray-w);}.caprow .chev svg{width:18px;height:18px;}

/* nav: row layout with a real "More" button (grip removed) */
.nav{flex-direction:row;align-items:flex-start;justify-content:space-around;padding:11px 10px calc(8px + env(safe-area-inset-bottom));}
.nav-grip{display:none;}

/* time-of-day greeting glyph (sun / sunset / moon) */
.greet-ic{display:inline-flex;vertical-align:baseline;margin-left:8px;position:relative;top:2px;}
.greet-ic svg{width:25px;height:25px;}
.greet-ic.sun{color:#E0A82E;}
.greet-ic.eve{color:#D9772E;}
.greet-ic.moon{color:#8A93C8;}

/* ===== To-dos hub ===== */
.todoitem.hub{align-items:center;gap:11px;}
.tcheck{flex:0 0 auto;width:24px;height:24px;border-radius:7px;border:1.6px solid var(--cardline);background:var(--screen);color:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;}
.tcheck svg{width:15px;height:15px;}
.todoitem.hub.done .tcheck{background:var(--navy);border-color:var(--navy);color:#fff;}
.todoitem.hub .tdt{flex:1;min-width:0;display:flex;flex-direction:column;cursor:pointer;}
.todoitem.hub .tdt .tdtxt{font-size:14px;color:var(--ink);line-height:1.35;}
.todoitem.hub .tdt .tdsrc{font-size:11.5px;color:var(--gray);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.todoitem.hub.done .tdt .tdtxt{text-decoration:line-through;color:var(--gray-w);}
/* detail to-do done state */
.todo.done .box{background:var(--navy);border-color:var(--navy);color:#fff;}
.todo.done .tt{text-decoration:line-through;color:var(--gray-w);}

/* ---------- edit anything (#2) ---------- */
.dsec-h{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.dsec-h h3{margin:0;}
.secedit{flex:none;width:30px;height:30px;display:grid;place-items:center;border:none;background:transparent;color:var(--gray-w);border-radius:9px;cursor:pointer;opacity:.55;transition:opacity .15s,background .15s,color .15s;}
.secedit:hover,.secedit:active{opacity:1;background:var(--card);color:var(--navy);}
.secedit svg{width:15px;height:15px;}
.dsec-add{display:inline-flex;align-items:center;gap:7px;margin-top:6px;padding:9px 13px;border:1px dashed var(--cardline);background:transparent;border-radius:11px;color:var(--gray);font:500 13.5px/1 var(--ui);cursor:pointer;}
.dsec-add:hover{color:var(--navy);border-color:var(--navy);}
.dsec-add svg{width:14px;height:14px;}
.panel.tall{max-height:88dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* ---------- edit form fields ---------- */
.fld-l{display:block;width:100%;font:500 12px/1.3 var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--gray);margin:0 0 7px;}
.field-in{display:block;width:100%;box-sizing:border-box;font:450 15px/1.45 var(--ui);color:var(--ink);background:var(--screen);border:1px solid var(--cardline);border-radius:12px;padding:11px 13px;outline:none;resize:vertical;}
.field-in:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(26,44,84,.10);}
textarea.field-in{line-height:1.5;}
.btn-primary{display:block;width:100%;box-sizing:border-box;font:500 15px/1 var(--ui);color:#fff;background:var(--navy);border:none;border-radius:13px;padding:15px;cursor:pointer;}
.btn-primary:active{background:var(--navy-deep);}
.btn-ghost{display:block;width:100%;box-sizing:border-box;font:500 14px/1 var(--ui);color:var(--gray);background:transparent;border:none;padding:13px;margin-top:4px;cursor:pointer;}
.btn-ghost:active{color:var(--ink);}

/* ---------- Daily review (#3) ---------- */
.revcard{display:flex;align-items:center;gap:13px;width:calc(100% - 44px);margin:2px 22px 16px;padding:15px 16px;background:linear-gradient(135deg,var(--navy),var(--navy-deep));color:#fff;border:none;border-radius:18px;cursor:pointer;text-align:left;box-shadow:0 8px 24px -12px rgba(20,35,70,.55);}
.revcard .revic{flex:none;width:38px;height:38px;display:grid;place-items:center;background:rgba(255,255,255,.14);border-radius:12px;}
.revcard .revic svg{width:20px;height:20px;}
.revcard .revtx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.revcard .revtx b{font:500 15.5px/1.2 var(--ui);}
.revcard .revtx span{font:400 12.5px/1.3 var(--ui);color:rgba(255,255,255,.72);}
.revcard .revchev{flex:none;opacity:.6;}
.revcard .revchev svg{width:18px;height:18px;}
.revtoggle{display:flex;gap:6px;margin:0 22px 16px;background:var(--card);border:1px solid var(--cardline);border-radius:13px;padding:4px;}
.revtoggle button{flex:1;border:none;background:transparent;color:var(--gray);font:500 13.5px/1 var(--ui);padding:9px;border-radius:10px;cursor:pointer;}
.revtoggle button.on{background:var(--navy);color:#fff;}
.revlist{display:flex;flex-direction:column;gap:2px;padding:0 22px;}
.revrow{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--cardline);cursor:pointer;}
.revrow:last-child{border-bottom:none;}
.revrow .revt{flex:none;width:52px;font:500 12px/1 var(--ui);color:var(--gray-w);}
.revrow .revm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.revrow .revm .t{font:450 14.5px/1.3 var(--ui);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.revrow .revm .m{font:400 12px/1 var(--ui);color:var(--gray);}
.revrow .revgo{flex:none;color:var(--gray-w);}
.revrow .revgo svg{width:16px;height:16px;}
.revdoneall,.revempty p{color:var(--gray);}
.revdoneall{padding:10px 22px;font:450 14px/1 var(--ui);color:var(--serif);}
.revempty{text-align:center;padding:40px 30px 0;}
.revempty .revbig{font-family:var(--disp);font-size:22px;color:var(--serif);margin-bottom:8px;}
.revempty p{font:400 14px/1.5 var(--ui);}
.revclose{display:flex;align-items:center;gap:13px;width:calc(100% - 44px);margin:20px 22px 8px;padding:15px 16px;background:var(--card);border:1px solid var(--cardline);border-radius:18px;cursor:pointer;text-align:left;}
.revclose .revcloseic{flex:none;width:38px;height:38px;display:grid;place-items:center;background:var(--navy);color:#fff;border-radius:50%;}
.revclose .revcloseic svg{width:18px;height:18px;}
.revclose b{display:block;font:500 14.5px/1.3 var(--ui);color:var(--ink);}
.revclose span span,.revclose>span>span{font:400 12.5px/1.3 var(--ui);color:var(--gray);}
.rchip[data-action]{cursor:pointer;}

/* ---------- Focus item (#4) ---------- */
.focuscard{margin:2px 22px 14px;padding:16px 18px;background:var(--card);border:1.5px solid var(--navy);border-radius:18px;box-shadow:0 6px 20px -14px rgba(20,35,70,.5);}
.focuscard .fock{font:600 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);margin-bottom:11px;}
.focuscard.done{border-color:var(--cardline);}
.focuscard.done .fock{color:var(--gray);}
.focrow{display:flex;align-items:center;gap:13px;}
.foccheck{flex:none;width:30px;height:30px;border:2px solid var(--navy);border-radius:9px;background:transparent;color:transparent;display:grid;place-items:center;cursor:pointer;transition:all .15s;}
.foccheck svg{width:17px;height:17px;}
.focuscard.done .foccheck{background:var(--navy);border-color:var(--navy);color:#fff;}
.foctx{flex:1;min-width:0;font:500 16px/1.35 var(--disp);color:var(--ink);cursor:pointer;font-family:var(--disp);}
.focuscard.done .foctx{text-decoration:line-through;color:var(--gray-w);}
.focx{flex:none;width:28px;height:28px;display:grid;place-items:center;border:none;background:transparent;color:var(--gray-w);cursor:pointer;border-radius:8px;}
.focx svg{width:15px;height:15px;}
.focx:active{background:var(--screen);}
.focset{display:flex;align-items:center;gap:13px;width:calc(100% - 44px);margin:2px 22px 14px;padding:14px 16px;background:var(--card);border:1px dashed var(--cardline);border-radius:18px;cursor:pointer;text-align:left;}
.focset .focseti{flex:none;width:36px;height:36px;display:grid;place-items:center;background:var(--screen);color:var(--navy);border-radius:11px;}
.focset .focseti svg{width:18px;height:18px;}
.focset .focsett{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.focset .focsett b{font:500 14.5px/1.2 var(--ui);color:var(--ink);}
.focset .focsett span{font:400 12.5px/1.3 var(--ui);color:var(--gray);}

/* ---------- swipe actions (#5) ---------- */
.swipe{position:relative;overflow:hidden;border-radius:20px;box-shadow:0 4px 14px rgba(60,45,22,.045);}
.swipe > .card{position:relative;z-index:2;will-change:transform;touch-action:pan-y;box-shadow:none;}
.swipe-acts{position:absolute;top:0;right:0;bottom:0;width:192px;display:flex;z-index:1;border-radius:20px;overflow:hidden;}
.swa{flex:1;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#fff;font:500 11px/1 var(--ui);cursor:pointer;}
.swa svg{width:19px;height:19px;}
.swa.star{background:#B98A2E;}
.swa.arch{background:#5B6472;}
.swa.del{background:#B5483C;}
.swa:active{filter:brightness(.92);}

/* ---------- motion (#8, refined) — entrance plays ONLY on view change (.enter) ---------- */
@media (prefers-reduced-motion: no-preference){
  @keyframes ssc-rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
  @keyframes ssc-fade{from{opacity:0;}to{opacity:1;}}
  /* whole view eases in on a tab/screen change */
  .scroll.enter{animation:ssc-fade .26s ease both;}
  .scroll.enter > .phead,.scroll.enter > .homehero{animation:ssc-rise .34s cubic-bezier(.22,.9,.3,1) both;}
  .scroll.enter .agcard,.scroll.enter .cards .swipe,.scroll.enter .inhero,.scroll.enter .intiles,.scroll.enter .revcard,.scroll.enter .secrow{animation:ssc-rise .38s cubic-bezier(.22,.9,.3,1) both;}
  .scroll.enter .cards .swipe:nth-child(1){animation-delay:.04s;}
  .scroll.enter .cards .swipe:nth-child(2){animation-delay:.08s;}
  .scroll.enter .cards .swipe:nth-child(3){animation-delay:.12s;}
  .scroll.enter .cards .swipe:nth-child(4){animation-delay:.16s;}
  .scroll.enter .cards .swipe:nth-child(5){animation-delay:.20s;}
  .scroll.enter .cards .swipe:nth-child(n+6){animation-delay:.22s;}
  .scroll.enter .agcard{animation-delay:.05s;}
  /* tactile press on the things you tap most */
  .tab:active,.mic-tab:active,.ob-btn:active,.btn-primary:active,.act:active,.setrow:active,.revcard:active,.foccheck:active,.tcheck:active,.play:active,.cmenu:active,.memrow-main:active,.ag-toggle:active{transform:scale(.97);}
  .tab,.mic-tab,.ob-btn,.btn-primary,.act,.setrow,.revcard,.foccheck,.tcheck,.play,.cmenu{transition:transform .12s ease;}
}

/* ============================================================
   Professional polish pass — type, numerals, elevation, focus
   ============================================================ */
/* tabular, aligned numerals everywhere numbers matter */
.ag-time,.mr-meta,.when,.dur,.tm,.statn,.intile-n,.inbar-c,.ag-count,.cell,.revt,.pdmeta,.meta,.ptime,.dt{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"ss01" 1;}
/* crisper text rendering + selection */
body{text-rendering:optimizeLegibility;}
::selection{background:color-mix(in srgb,var(--navy) 22%,transparent);}
/* accessible, on-brand focus ring (keyboard only) */
button:focus-visible,input:focus-visible,.setrow:focus-visible,.memrow-main:focus-visible,a:focus-visible{outline:2px solid color-mix(in srgb,var(--navy) 55%,transparent);outline-offset:2px;border-radius:10px;}
/* consistent, refined elevation system on white cards */
.card,.memrow,.agcard,.intile,.setrow,.otdcard,.revcard,.focuscard,.crow,.row,.stat{box-shadow:0 1px 2px rgba(17,24,39,.05),0 8px 20px -14px rgba(17,24,39,.12);}
.revcard{box-shadow:0 8px 26px -12px color-mix(in srgb,var(--navy) 55%,transparent);}
.memrow.open{box-shadow:0 10px 26px -12px rgba(17,24,39,.22);}
/* hairline dividers a touch softer */
.memx-acts,.ag-row+.ag-row{border-color:color-mix(in srgb,var(--ink) 7%,transparent);}
/* subtle premium gradient wash behind the home hero bubble */
.homehero{background:linear-gradient(180deg,color-mix(in srgb,var(--navy) 4%,var(--card)),var(--card) 62%);}
[data-theme="dark"] .homehero{background:linear-gradient(180deg,color-mix(in srgb,var(--navy) 14%,var(--card)),var(--card) 60%);}
/* tighten the big display headings for a more designed feel */
.phead h1,.hh-greet h1,.inhero-n,.intile-n,.statn{font-feature-settings:"ss01" 1;}

/* ---------- warm first-run (#9) ---------- */
.frun{padding:6px 22px 30px;}
.frun-hero{text-align:center;padding:8px 6px 22px;}
.frun-mark{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy-deep));color:#fff;margin-bottom:16px;box-shadow:0 12px 30px -12px rgba(20,35,70,.6);}
.frun-mark svg{width:26px;height:26px;}
.frun-ttl{font-family:var(--disp);font-size:25px;line-height:1.2;color:var(--serif);margin-bottom:10px;}
.frun-sub{font:400 14.5px/1.6 var(--ui);color:var(--gray);max-width:320px;margin:0 auto;}
.frun-eg{background:var(--card);border:1px solid var(--cardline);border-radius:18px;padding:16px;margin:6px 0 14px;}
.frun-egl{display:block;font:600 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--gray-w);margin-bottom:12px;}
.frun-ex{display:flex;align-items:center;gap:11px;padding:9px 0;color:var(--serif);font-family:var(--disp);font-size:15.5px;border-bottom:1px solid var(--cardline);}
.frun-ex:last-child{border-bottom:none;}
.frun-ex svg{flex:none;width:15px;height:15px;color:var(--navy);opacity:.55;}
.frun-priv{display:flex;align-items:flex-start;gap:10px;padding:0 4px 20px;color:var(--gray);font:400 12.5px/1.5 var(--ui);}
.frun-priv svg{flex:none;width:15px;height:15px;color:var(--navy);margin-top:1px;}
.frun-priv b{color:var(--ink);font-weight:600;}
.frun-cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;box-sizing:border-box;background:var(--navy);color:#fff;border:none;border-radius:15px;padding:16px;font:500 15.5px/1 var(--ui);cursor:pointer;box-shadow:0 10px 26px -12px rgba(20,35,70,.55);}
.frun-cta svg{width:18px;height:18px;}
.frun-cta:active{transform:scale(.98);}
.frun-alt{display:block;width:100%;background:none;border:none;color:var(--gray);font:500 13.5px/1 var(--ui);padding:14px;margin-top:4px;cursor:pointer;}
.frun-alt:active{color:var(--ink);}

/* ---------- On this day (#10) ---------- */
.otdcard{margin:2px 22px 14px;padding:15px 17px;background:var(--card);border:1px solid var(--cardline);border-left:3px solid var(--navy);border-radius:16px;cursor:pointer;}
.otd-h{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.otd-h .greet-ic{width:18px;height:18px;}
.otd-h .greet-ic svg{width:15px;height:15px;}
.otd-l{font:600 11px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--navy);}
.otd-more{margin-left:auto;font:500 11px/1 var(--ui);color:var(--gray-w);}
.otd-t{font-family:var(--disp);font-size:17px;line-height:1.3;color:var(--ink);}
.otd-m{font:400 12.5px/1 var(--ui);color:var(--gray);margin-top:5px;}
.otdcard:active{transform:scale(.99);}

/* ============================================================
   VocaLogue brand reskin — indigo / cool-gray / bold sans
   ============================================================ */
/* bold sans-serif display weights (Inter replaces the old serif) */
.phead h1{font-weight:800;font-size:27px;letter-spacing:-.022em;line-height:1.14;color:var(--ink);}
.phead h1 .greet-ic{width:20px;height:20px;}
.brand,.c-title,.monthnav .mn,.selday .sh,.crow .cm .t,.otd-t,.foctx,
.frun-ttl,.revempty .revbig,.dhero h2,.pdhero h1,.sheet-ttl,.stat .statn,
.frun-mark+*, .asktop span{font-family:var(--ui)!important;letter-spacing:-.012em;}
.c-title{font-weight:700;}
.monthnav .mn,.selday .sh,.crow .cm .t,.otd-t,.foctx,.frun-ttl,.revempty .revbig,.dhero h2,.pdhero h1{font-weight:700;}
.sheet-ttl{font-weight:700;}
.stat .statn{font-weight:800;}

/* greeting: name in indigo with a period, matching the reference */
.phead h1 .gname{color:var(--navy);}
.greet-ic{vertical-align:middle;}

/* neutral, cool shadows on white cards (was warm brown) */
.card{box-shadow:0 1px 2px rgba(17,24,39,.04),0 6px 16px -10px rgba(17,24,39,.10);}
.swipe{box-shadow:0 1px 2px rgba(17,24,39,.04),0 6px 16px -10px rgba(17,24,39,.10);}
.crow{box-shadow:0 1px 2px rgba(17,24,39,.04);}
.cell.mut{color:#C7CCD4;}

/* person tag pill on cards (light indigo) */
.ptag{display:inline-flex;align-items:center;font:600 11.5px/1 var(--ui);color:var(--navy);background:color-mix(in srgb,var(--navy) 10%,#fff);padding:5px 10px;border-radius:8px;letter-spacing:.01em;}

/* filter pills (All / person…) — pill style from the reference */
.filters,.ftabs{display:flex;gap:8px;padding:8px 22px 2px;overflow-x:auto;}
.filters::-webkit-scrollbar,.ftabs::-webkit-scrollbar{display:none;}
.ftab{flex:none;border:none;background:#EEF0F3;color:var(--gray);font:600 13px/1 var(--ui);padding:9px 15px;border-radius:999px;cursor:pointer;}
.ftab.on{background:color-mix(in srgb,var(--navy) 12%,#fff);color:var(--navy);}

/* big record button + nav tint to indigo gradient */
.mic-btn{background:var(--grad)!important;}

/* ---------- Insights — image #3 layout ---------- */
.inhero{margin:8px 22px 16px;padding:24px 22px;border-radius:22px;background:var(--grad);color:#fff;box-shadow:0 16px 34px -16px rgba(79,70,229,.6);}
.inhero-ey{font:700 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;opacity:.82;}
.inhero-n{margin-top:12px;font:800 34px/1.05 var(--ui);letter-spacing:-.02em;}
.inhero-s{margin-top:8px;font:500 14px/1 var(--ui);opacity:.85;}
.intiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 22px;}
.intile{background:var(--card);border:1px solid var(--cardline);border-radius:18px;padding:18px 10px;text-align:center;box-shadow:0 1px 2px rgba(17,24,39,.04);}
.intile-n{font:800 28px/1 var(--ui);color:var(--ink);letter-spacing:-.02em;}
.intile-k{margin-top:7px;font:500 12.5px/1 var(--ui);color:var(--gray);}
.inbars{padding:2px 22px 0;display:flex;flex-direction:column;gap:14px;}
.inbar{display:flex;align-items:center;gap:12px;}
.inbar-n{flex:none;width:74px;font:700 13.5px/1 var(--ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inbar-t{flex:1;height:10px;border-radius:999px;background:#E7E9EF;overflow:hidden;}
.inbar-f{display:block;height:100%;border-radius:999px;background:var(--grad);}
.inbar-c{flex:none;width:18px;text-align:right;font:600 13px/1 var(--ui);color:var(--gray);}

/* ---------- home hero "bubble" (brand + greeting in one floating card) ---------- */
.scroll.nobar{padding-top:0;}
.homehero{margin:0 0 12px;background:var(--card);border:none;border-bottom:1px solid var(--cardline);
  border-radius:0 0 28px 28px;padding:calc(14px + env(safe-area-inset-top)) 20px 22px;
  box-shadow:0 10px 26px -16px rgba(17,24,39,.20);}
.hh-top{display:flex;align-items:center;justify-content:space-between;}
.hh-brand{display:flex;align-items:center;gap:11px;min-width:0;}
.hh-logo{width:44px;height:44px;flex:none;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 3px 12px rgba(17,24,39,.15);}
.hh-logo img{width:40px;height:40px;object-fit:contain;}
.hh-word{font:800 21px/1 var(--ui);color:var(--serif);letter-spacing:-.025em;}
.hh-acts{display:flex;gap:9px;flex:none;}
.hh-acts .ic{width:38px;height:38px;border-radius:11px;background:#EEF0F3;border:1px solid var(--cardline);display:flex;align-items:center;justify-content:center;color:var(--gray);cursor:pointer;}
.hh-acts .ic svg{width:18px;height:18px;}
.hh-acts .ic.avatar{border-radius:50%;}
.hh-greet{margin-top:18px;}
.hh-greet h1{font:800 25px/1.18 var(--ui);color:var(--ink);letter-spacing:-.035em;}
.hh-greet h1 .gname{color:var(--navy);}
.hh-greet h1 .greet-ic{width:20px;height:20px;vertical-align:middle;}
.hh-greet p{margin-top:10px;font:500 13.5px/1.45 var(--ui);color:var(--gray);}
[data-theme="dark"] .hh-acts .ic{background:#22263280;}
[data-theme="dark"] .hh-logo,[data-theme="dark"] .appbar .brand-mark{background:#fff;}

/* ---------- clean memory rows (dropdown) ---------- */
.cards{gap:9px;}
.memrow{background:var(--card);border:1px solid var(--cardline);border-radius:15px;overflow:hidden;box-shadow:0 1px 2px rgba(17,24,39,.04);transition:box-shadow .16s ease;}
.memrow.open{box-shadow:0 8px 22px -12px rgba(17,24,39,.18);border-color:color-mix(in srgb,var(--navy) 22%,var(--cardline));}
.memrow-main{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;text-align:left;padding:13px 15px;cursor:pointer;}
.mr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.mr-title{font:700 15px/1.25 var(--ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;}
.mr-meta{display:flex;align-items:center;gap:7px;font:500 12px/1 var(--gray-w);}
.mr-flag{display:inline-flex;color:var(--gray-l);}
.mr-flag svg{width:12px;height:12px;}
.mr-chev{flex:none;color:var(--gray-w);display:flex;transform:rotate(90deg);transition:transform .22s ease;}
.mr-chev svg{width:18px;height:18px;}
.memrow.open .mr-chev{transform:rotate(-90deg);color:var(--navy);}
.memx{padding:2px 15px 14px;}
.memx-prev{font:400 13px/1.55 var(--gray);padding:4px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.memx-acts{display:flex;gap:7px;flex-wrap:nowrap;padding-top:11px;border-top:1px solid var(--line);margin-top:10px;}
.mxb{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;background:#EEF0F3;border:none;border-radius:10px;padding:10px 6px;font:600 12px/1 var(--ui);color:var(--ink);cursor:pointer;transition:transform .12s ease;}
.mxb:active{transform:scale(.95);}
.mxb svg{width:14px;height:14px;flex:none;color:var(--navy);}
[data-theme="dark"] .mxb{background:#222632;color:var(--ink);}

/* ---------- Today's agenda card ---------- */
.agcard{margin:2px 22px 12px;background:var(--card);border:1px solid var(--cardline);border-radius:18px;padding:14px 16px;box-shadow:0 1px 2px rgba(17,24,39,.04);}
.ag-head{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.ag-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:9px;background:none;border:none;padding:0;cursor:pointer;}
.ag-toggle .ag-ic{display:flex;color:var(--navy);}
.ag-toggle .ag-ic svg{width:16px;height:16px;}
.ag-h{font:700 13px/1 var(--ui);letter-spacing:.02em;color:var(--ink);}
.ag-count{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;background:color-mix(in srgb,var(--navy) 12%,#fff);color:var(--navy);border-radius:999px;font:700 11px/1 var(--ui);}
.ag-chev{margin-left:auto;display:flex;color:var(--gray-w);transform:rotate(-90deg);transition:transform .22s ease;}
.ag-chev svg{width:17px;height:17px;}
.agcard.collapsed .ag-chev{transform:rotate(90deg);color:var(--ink);}
.agcard.collapsed .ag-head{margin-bottom:0;}
.ag-add{flex:none;width:28px;height:28px;display:grid;place-items:center;border:none;background:#EEF0F3;border-radius:8px;color:var(--gray);cursor:pointer;}
.ag-add svg{width:14px;height:14px;}
[data-theme="dark"] .ag-count{background:color-mix(in srgb,var(--navy) 30%,transparent);color:#C7D2FE;}
.ag-row{display:flex;align-items:flex-start;gap:11px;padding:9px 0;cursor:pointer;}
.ag-row+.ag-row{border-top:1px solid var(--line);}
.ag-time{flex:none;width:66px;white-space:nowrap;font:600 12.5px/1.3 var(--ui);color:var(--navy);font-variant-numeric:tabular-nums;padding-top:1px;}
.ag-line{flex:none;display:flex;align-items:center;padding-top:4px;}
.ag-dot{width:7px;height:7px;border-radius:50%;background:var(--navy);}
.ag-dot.event{background:#0EA5E9;}
.ag-ttl{flex:1;min-width:0;font:500 14px/1.35 var(--ui);color:var(--ink);}
.ag-loc{display:block;font:400 12px/1.3 var(--ui);color:var(--gray);margin-top:2px;}
/* empty / connect state */
.agcard-empty{display:flex;align-items:center;gap:12px;width:calc(100% - 44px);text-align:left;cursor:pointer;}
.agcard-empty .ag-ic{flex:none;width:38px;height:38px;display:grid;place-items:center;background:#EEF0F3;border-radius:11px;color:var(--navy);}
.agcard-empty .ag-ic svg{width:18px;height:18px;}
.agcard-empty .ag-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.agcard-empty .ag-tx b{font:600 14.5px/1.2 var(--ui);color:var(--ink);}
.agcard-empty .ag-tx span{font:400 12.5px/1.35 var(--ui);color:var(--gray);}
.agcard-empty .ag-go{flex:none;color:var(--gray-w);}
.agcard-empty .ag-go svg{width:18px;height:18px;}
[data-theme="dark"] .ag-add,[data-theme="dark"] .agcard-empty .ag-ic{background:#222632;}

/* ---------- Menu / customize-bar ordering ---------- */
.nlabel{font:700 11px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--gray-w);margin:14px 2px 9px;}
.nordlist{display:flex;flex-direction:column;gap:8px;}
.nord{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--cardline);border-radius:13px;padding:10px 12px;}
.nord-n{flex:none;width:22px;height:22px;display:grid;place-items:center;background:color-mix(in srgb,var(--navy) 12%,#fff);color:var(--navy);border-radius:7px;font:700 12px/1 var(--ui);}
.nord-ic{flex:none;display:flex;color:var(--navy);}
.nord-ic svg{width:18px;height:18px;}
.nord-nm{flex:1;min-width:0;font:600 14px/1.2 var(--ui);color:var(--ink);}
.nord-mv{flex:none;display:flex;gap:4px;}
.nmv{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--cardline);background:#EEF0F3;border-radius:8px;color:var(--ink);cursor:pointer;}
.nmv svg{width:15px;height:15px;}
.nmv[data-d="-1"] svg{transform:rotate(-90deg);}
.nmv[data-d="1"] svg{transform:rotate(90deg);}
.nmv:disabled{opacity:.3;cursor:default;}
.nord-rm{flex:none;width:30px;height:30px;display:grid;place-items:center;border:none;background:transparent;color:var(--gray-w);border-radius:8px;cursor:pointer;}
.nord-rm svg{width:15px;height:15px;}
.nord-rm:active{background:#EEF0F3;}
.ntile .npin{position:absolute;top:7px;right:7px;width:18px;height:18px;display:grid;place-items:center;color:var(--navy);}
.ntile .npin svg{width:13px;height:13px;}
[data-theme="dark"] .nmv,[data-theme="dark"] .nord-rm:active{background:#222632;}
[data-theme="dark"] .nord-n{background:color-mix(in srgb,var(--navy) 30%,transparent);color:#C7D2FE;}

/* inline pin-to-bar badge on Menu tiles */
.ntile{position:relative;}
.npin.add{position:absolute;top:6px;right:6px;width:22px;height:22px;display:grid;place-items:center;background:color-mix(in srgb,var(--navy) 12%,#fff);color:var(--navy);border-radius:50%;}
.npin.add svg{width:13px;height:13px;}
.npin.add:active{background:var(--navy);color:#fff;}
[data-theme="dark"] .npin.add{background:color-mix(in srgb,var(--navy) 32%,transparent);color:#C7D2FE;}

/* ---------- bottom-bar chips (drag to reorder, horizontal) ---------- */
.barrow{display:flex;gap:8px;padding:2px 0 4px;}
.barchip{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;
  background:var(--card);border:1px solid var(--cardline);border-radius:14px;padding:13px 6px;
  color:var(--ink);cursor:grab;touch-action:none;user-select:none;
  box-shadow:0 1px 2px rgba(17,24,39,.05);transition:transform .16s cubic-bezier(.3,.8,.4,1),box-shadow .15s;}
.barchip .bc-ic{display:flex;color:var(--navy);}
.barchip .bc-ic svg{width:20px;height:20px;}
.barchip .bc-nm{font:600 12px/1 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.barchip.dragging{cursor:grabbing;z-index:5;transition:none;box-shadow:0 10px 24px -8px rgba(17,24,39,.3);border-color:color-mix(in srgb,var(--navy) 40%,var(--cardline));}
.barhint{font:400 12px/1.4 var(--gray);padding:2px 2px 0;}
/* pinned badge on Menu tiles (check = remove, + = add) */
.npin.on{position:absolute;top:6px;right:6px;width:22px;height:22px;display:grid;place-items:center;background:var(--navy);color:#fff;border-radius:50%;}
.npin.on svg{width:13px;height:13px;}

/* ---------- onboarding: logo, Google button, secondary button ---------- */
.ob-logo{width:88px;height:88px;margin:0 auto 6px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 8px 26px -10px rgba(17,24,39,.28);}
.ob-logo img{width:74px;height:74px;object-fit:contain;}
.ob-btn.gog{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#1f2430;border:1px solid var(--cardline);box-shadow:0 2px 10px -4px rgba(17,24,39,.18);}
.ob-btn.gog .gog-ic{display:flex;}
.ob-btn.gog .gog-ic svg{width:20px;height:20px;}
.ob-btn.alt2{background:transparent;color:var(--navy);border:none;box-shadow:none;margin-top:6px;}
[data-theme="dark"] .ob-btn.gog{background:#1A1D27;color:#E5E7EB;}

/* ---------- Eva's voice manager ---------- */
.vrow{display:flex;align-items:center;gap:14px;padding:8px 2px;}
.vrow .fld-l{width:54px;margin:0;flex:none;}
.vrow input[type="range"]{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:#E7E9EF;outline:none;}
.vrow input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--navy);cursor:pointer;box-shadow:0 1px 4px rgba(17,24,39,.3);}
.vrow input[type="range"]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--navy);cursor:pointer;}
.tgl{flex:none;width:26px;height:26px;display:grid;place-items:center;border:2px solid var(--cardline);border-radius:8px;color:transparent;}
.tgl.on{background:var(--navy);border-color:var(--navy);color:#fff;}
.tgl svg{width:15px;height:15px;}
[data-theme="dark"] .vrow input[type="range"]{background:#2A2F3C;}

/* ---------- distinctive display font (Sora) on the big headings ---------- */
.phead h1,.hh-greet h1,.hh-word,.appbar .brand span,.dhero h2,.pdhero h1,
.inhero-n,.intile-n,.statn,.otd-t,.frun-ttl,.revempty .revbig,.ob-wordmark,
.sheet-ttl,.monthnav .mn,.selday .sh,.mr-title{font-family:var(--disp)!important;letter-spacing:-.02em;}
.phead h1,.hh-greet h1,.ob-wordmark,.dhero h2{font-weight:700;letter-spacing:-.025em;}
.mr-title{letter-spacing:-.015em;}

/* ============================================================
   Editorial detail view — a polished reading layout
   ============================================================ */
.dhero{padding:28px 24px 0;}
.dhero .ey{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);}
.dhero h2{margin-top:12px;font-size:29px;line-height:1.14;letter-spacing:-.028em;color:var(--ink);font-weight:700;}
.dhero .meta{margin-top:14px;padding-bottom:18px;font-size:12.5px;color:var(--gray);border-bottom:1px solid var(--line);}
.dseg{margin:20px 24px 4px;}
.dsec{padding:24px 24px 0;}
.dsec-h{margin-bottom:14px;}
.dsec-h h3,.dsec h3{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-w);}
.bullet{font-size:15.5px;line-height:1.62;gap:13px;margin-bottom:14px;color:var(--ink);}
.bullet .bd{width:6px;height:6px;margin-top:9px;background:var(--navy);opacity:.9;}
.todo .tt{font-size:15px;line-height:1.5;}
.todo{padding:14px 0;}
/* transcript reads like an article (was washed-out gray) */
.tview{padding:16px 24px 0;}
.tline{font-size:17px;line-height:1.66;color:#374151;font-weight:450;letter-spacing:-.006em;padding:6px 0;}
.tline.cur{color:var(--navy);font-weight:600;}
[data-theme="dark"] .tline{color:#C2C8D2;}
.reformatted{font-size:15px;line-height:1.62;}
/* the read-aloud / edit / menu controls a touch more refined */
.dbtn{transition:background .15s,transform .12s;}
.dbtn:active{transform:scale(.92);}

/* ---------- skeleton loading (shimmer) ---------- */
@keyframes skel-shimmer{0%{background-position:-220px 0;}100%{background-position:220px 0;}}
.skel{display:block;border-radius:7px;background:#E9EBF0;background-image:linear-gradient(90deg,#E9EBF0 0,#F4F6FA 50%,#E9EBF0 100%);background-size:220px 100%;background-repeat:no-repeat;animation:skel-shimmer 1.15s ease-in-out infinite;}
[data-theme="dark"] .skel{background:#222632;background-image:linear-gradient(90deg,#222632 0,#2C3140 50%,#222632 100%);}
.skelrow .memrow-main{cursor:default;}
.skel-t{width:62%;height:14px;margin-bottom:9px;}
.skel-m{width:38%;height:10px;}
.skel-ring{width:28px;height:28px;border-radius:50%;flex:none;background:#E9EBF0;animation:skel-shimmer 1.15s ease-in-out infinite;background-image:linear-gradient(90deg,#E9EBF0 0,#F4F6FA 50%,#E9EBF0 100%);background-size:220px 100%;}
[data-theme="dark"] .skel-ring{background:#222632;}
.skel-cap{display:flex;align-items:center;gap:7px;padding:0 16px 13px;font:600 11.5px/1 var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--navy);}
.skel-dots{display:inline-flex;gap:3px;}
.skel-dots i{width:4px;height:4px;border-radius:50%;background:var(--navy);opacity:.4;animation:pdot 1s ease-in-out infinite;}
.skel-dots i:nth-child(2){animation-delay:.18s;}.skel-dots i:nth-child(3){animation-delay:.36s;}

/* ---------- illustrated empty states ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 34px 0;}
.empty-art{width:148px;height:auto;margin-bottom:20px;filter:drop-shadow(0 10px 22px rgba(17,24,39,.10));}
.empty-art svg{width:100%;height:auto;}
.empty-t{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px;}
.empty-s{font:400 13.5px/1.6 var(--ui);color:var(--gray);max-width:280px;}
.empty .ob-btn{margin-top:20px;width:auto;padding:0 22px;height:44px;display:inline-flex;align-items:center;}
[data-theme="dark"] .empty-art svg rect[fill="#fff"]{fill:#1A1D27;}

/* transcription progress bar (long clips) */
.skel-bar{height:5px;border-radius:999px;background:#E7E9EF;margin:0 16px 14px;overflow:hidden;}
.skel-bar span{display:block;height:100%;border-radius:999px;background:var(--grad);transition:width .3s ease;}
[data-theme="dark"] .skel-bar{background:#262B38;}

/* ---------- AI robustness UI (phases, stop, retry, image controls) ---------- */
.abub.phase{display:inline-flex;align-items:center;gap:8px;}
.aphase{font:500 13px/1 var(--ui);color:var(--gray);}
.abub.phase i{width:5px;height:5px;border-radius:50%;background:var(--navy);opacity:.4;animation:pdot 1s ease-in-out infinite;}
.abub.phase i:nth-child(3){animation-delay:.18s;}.abub.phase i:nth-child(4){animation-delay:.36s;}
.abub.err{background:color-mix(in srgb,#E11D48 8%,var(--card));color:var(--ink);border:1px solid color-mix(in srgb,#E11D48 22%,transparent);}
.aretry{display:inline-flex;align-items:center;gap:6px;margin-top:6px;background:none;border:1px solid var(--cardline);border-radius:10px;padding:7px 12px;font:600 12.5px/1 var(--ui);color:var(--navy);cursor:pointer;}
.aretry svg{width:13px;height:13px;}
.asend.stop{background:#E11D48;}
.achip svg{width:14px;height:14px;}
.img-err{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:color-mix(in srgb,#E11D48 7%,var(--card));border:1px solid color-mix(in srgb,#E11D48 20%,transparent);border-radius:14px;padding:13px 15px;font:400 13.5px/1.5 var(--ui);color:var(--ink);}
.cimg.loading{position:relative;}
.imgstop{position:absolute;bottom:12px;right:12px;background:rgba(17,24,39,.6);color:#fff;border:none;border-radius:9px;padding:7px 13px;font:600 12px/1 var(--ui);cursor:pointer;backdrop-filter:blur(4px);}
.cimg.loading span b{font-variant-numeric:tabular-nums;}

/* ---------- resilience UI: crash screen + top bars ---------- */
.crash{min-height:100dvh;display:grid;place-items:center;padding:30px;background:var(--screen);}
.crash-card{max-width:340px;text-align:center;background:var(--card);border:1px solid var(--cardline);border-radius:22px;padding:30px 24px;box-shadow:0 12px 30px -16px rgba(17,24,39,.2);}
.crash-ic{width:52px;height:52px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;background:var(--grad);color:#fff;}
.crash-ic svg{width:24px;height:24px;}
.crash-card h2{font-family:var(--disp);font-size:21px;color:var(--ink);margin-bottom:8px;letter-spacing:-.02em;}
.crash-card p{font:400 14px/1.55 var(--ui);color:var(--gray);margin-bottom:18px;}
.crash-card .btn-ghost{margin-top:4px;}
.crash-card pre{margin-top:14px;text-align:left;font:400 11px/1.5 ui-monospace,monospace;color:var(--gray);background:var(--screen);border-radius:10px;padding:12px;max-height:160px;overflow:auto;white-space:pre-wrap;}
.topbar{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:calc(8px + env(safe-area-inset-top)) 16px 8px;font:600 12.5px/1.3 var(--ui);color:#fff;background:#374151;text-align:center;}
.topbar .dot{width:7px;height:7px;border-radius:50%;background:#F59E0B;flex:none;}
.topbar .dot.up{background:#34D399;}
#updbar{background:var(--navy);}
.topbar button{margin-left:6px;background:rgba(255,255,255,.18);border:none;color:#fff;border-radius:8px;padding:5px 12px;font:600 12px/1 var(--ui);cursor:pointer;}

/* Google button marked clearly "Soon" until backend auth is live */
.ob-btn.gog.soon{position:relative;opacity:.7;}
.ob-btn.gog.soon .soon-tag{position:absolute;top:50%;right:14px;transform:translateY(-50%);font:700 9.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--gray);background:#EEF0F3;border-radius:6px;padding:4px 7px;}

/* ---------------- access gate (owner-only private app) ---------------- */
.gate{min-height:100dvh;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--screen);}
.gate-card{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line,#E7E9EE);border-radius:24px;padding:34px 26px 28px;box-shadow:0 18px 50px rgba(20,24,40,.10);display:flex;flex-direction:column;align-items:center;text-align:center;}
.gate-logo{width:74px;height:74px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(20,24,40,.10);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.gate-logo img{width:46px;height:46px;display:block;}
.gate-card h1{font:700 26px/1.1 var(--disp,var(--ui));color:var(--ink,#101322);margin:2px 0 4px;}
.gate-sub{font:500 13.5px/1.3 var(--ui);color:var(--gray,#6B7180);margin:0 0 20px;}
.gi-in{width:100%;box-sizing:border-box;background:var(--screen);border:1px solid var(--line,#E7E9EE);border-radius:14px;padding:14px 15px;font:500 15px/1.2 var(--ui);color:var(--ink,#101322);margin-bottom:11px;outline:none;transition:border-color .15s,box-shadow .15s;}
.gi-in:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(79,70,229,.14);}
.gi-in::placeholder{color:var(--gray,#9AA0AC);}
.gi-go{width:100%;margin-top:6px;}
.gi-err{width:100%;text-align:left;font:500 12.5px/1.35 var(--ui);color:#D14343;background:#FDECEC;border-radius:10px;padding:9px 12px;margin:2px 0 11px;}
.gate-prod{font:700 16px/1.3 var(--disp,var(--ui));color:var(--ink,#101322);margin:6px 0 8px;}
.gate-msg{font:500 13.5px/1.5 var(--ui);color:var(--gray,#6B7180);margin:0 0 20px;}
.gi-back{margin-top:2px;}