:root{
  color-scheme:light;
  --ground:#EEF1F5; --card:#FFFFFF; --ink:#15202B; --muted:#5B6875; --line:#D6DDE5;
  --brass:#B97A06; --brass-soft:#FBEFD5; --brass-ink:#5A3A00;
  --alarm:#D23A28; --alarm-soft:#FCE3DF; --ok:#1B8656; --ok-soft:#DDF2E7;
  --overlay:#D23A28;
  --shadow:0 1px 2px rgba(21,32,43,.06),0 6px 20px rgba(21,32,43,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --ground:#0E141A; --card:#17202A; --ink:#E8EEF3; --muted:#9AA7B3; --line:#2A3642;
    --brass:#F2B838; --brass-soft:#3A2C0C; --brass-ink:#FBE3A6;
    --alarm:#FF6A55; --alarm-soft:#40201B; --ok:#4CC98E; --ok-soft:#14352A;
    --overlay:#9E2415;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.5 Chivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  padding-inline:16px;padding-block:calc(20px + env(safe-area-inset-top,0px)) calc(60px + env(safe-area-inset-bottom,0px))}
.wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.stack{display:flex;flex-direction:column;gap:14px}
h1,h2{font-family:"Bricolage Grotesque",Chivo,system-ui,sans-serif;margin:0;text-wrap:balance}
h2{font-size:1.2rem}
.brand{display:flex;align-items:center;gap:14px}
.brand .grow{flex:1;min-width:0}
.bell{width:52px;height:52px;flex:none}
.brand .logo{height:52px;width:auto;display:block;margin-bottom:4px}
@media (prefers-color-scheme: dark){.brand .logo{content:url(/logo-white.svg)}}
.brand h1{font-size:2.4rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.brand p{margin:2px 0 0;color:var(--muted);font-size:.95rem}
.mono{font-family:"Chivo Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer;border:0;border-radius:10px;color:inherit}
button:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:18px}
.lbl{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.field{display:flex;flex-direction:column;gap:6px;flex:1 1 180px;min-width:0}
.field.shrink{flex:0 1 auto;justify-content:flex-end}
.hint{font-size:.85rem;color:var(--muted);margin:0}
.err{color:var(--alarm);margin:0;min-height:1.2em;font-size:.95rem}
textarea,input[type=text],input[type=datetime-local],select{font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
textarea{min-height:84px;resize:vertical;font-size:1.05rem;border-radius:12px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row.tight{gap:8px}
.parsed{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.95rem}
.when-pill{background:var(--brass-soft);color:var(--brass-ink);border-radius:999px;padding:4px 12px;font-weight:700}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--ground);border:1px solid var(--line);padding:7px 12px;font-size:.9rem;border-radius:999px}
.chip[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#1B1300;font-weight:700}
.go{background:var(--ink);color:var(--card);font-weight:700;font-size:1.05rem;padding:14px;border-radius:12px}
.go:disabled{opacity:.45;cursor:not-allowed}
.btn2{background:var(--ground);border:1px solid var(--line);padding:9px 14px}
.btn2.big{padding:13px;font-weight:700}
.linkbtn{background:none;padding:0;color:var(--muted);text-decoration:underline;font-size:inherit}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

.arm{display:flex;align-items:center;gap:12px;background:var(--brass-soft);color:var(--brass-ink);border-radius:14px;padding:12px 14px;flex-wrap:wrap}
.arm p{margin:0;flex:1 1 220px;font-size:.95rem}
.arm button{background:var(--brass);color:#1B1300;font-weight:700;padding:10px 16px}
.sharebox p{margin:0}
.sharein{margin:0;background:var(--ok-soft);color:var(--ok);border-radius:10px;padding:10px 12px;font-size:.95rem}
.brand .btn2{white-space:nowrap}
.sharebox{display:flex;flex-direction:column;gap:10px}
.sharerow{display:flex;gap:8px}
.sharerow input{flex:1;min-width:0;font-size:.85rem}

/* hold-to-record */
.hold{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--alarm);color:#fff;font-weight:700;padding:11px 18px;border-radius:999px;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;white-space:nowrap;width:100%}
.hold.small{width:auto;padding:8px 14px;font-size:.9rem}
.hold .dot{width:12px;height:12px;border-radius:50%;background:#fff;flex:none}
.hold.rec{background:#8E1B10;box-shadow:0 0 0 6px rgba(210,58,40,.25)}
.hold.rec .dot{animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}

.sect{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sect h2{font-size:1.1rem}
.sect small{color:var(--muted)}
.list{display:flex;flex-direction:column;gap:10px}
.item{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:14px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border-left:6px solid var(--line)}
.item.due{border-left-color:var(--alarm)}
.item.soon{border-left-color:var(--brass)}
.item.done{border-left-color:var(--ok);opacity:.75}
.item .txt{font-weight:500;overflow-wrap:anywhere}
.item .meta{font-size:.85rem;color:var(--muted);display:flex;gap:6px 8px;flex-wrap:wrap;align-items:center;margin-top:2px}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;color:#fff;flex:none}
.tag{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:2px 7px}
.tag.due{background:var(--alarm-soft);color:var(--alarm)}
.tag.done{background:var(--ok-soft);color:var(--ok)}
.tag.memo{background:var(--brass-soft);color:var(--brass-ink);text-transform:none;letter-spacing:0}
.tag.def{background:var(--brass);color:#1B1300}
.acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.acts button{background:var(--ground);border:1px solid var(--line);padding:7px 10px;font-size:.85rem}
.acts button.donebtn{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:700}
.vitem{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vitem .vname{font-weight:700;flex:1 1 150px;overflow-wrap:anywhere;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.empty{color:var(--muted);text-align:center;padding:18px;border:1px dashed var(--line);border-radius:14px}
.foot{font-size:.85rem;color:var(--muted)}
.foot b{color:var(--ink)}

.sheet{position:fixed;inset:0;background:rgba(10,15,20,.55);z-index:15;display:flex;align-items:flex-end;justify-content:center;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.sheetin{background:var(--card);border-radius:18px;padding:20px;width:min(520px,100%);max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.meter{display:flex;align-items:center;gap:14px}
.meter .mono{font-size:1.6rem;min-width:3.5ch}
.bars{flex:1;height:44px;display:flex;align-items:center;gap:3px;overflow:hidden}
.bars i{display:block;width:4px;border-radius:2px;background:var(--alarm);flex:none}

.ring{position:fixed;inset:0;background:var(--overlay);color:#fff;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;
  padding:calc(24px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px))}
.ring .bigbell{width:110px;height:110px;animation:swing .5s ease-in-out infinite alternate;transform-origin:50% 8%}
@keyframes swing{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.ring .rtxt{font-family:"Bricolage Grotesque",Chivo,sans-serif;font-size:clamp(1.6rem,6vw,2.6rem);font-weight:800;max-width:22ch;line-height:1.15;overflow-wrap:anywhere}
.ring .rmeta{opacity:.85}
.ring .rbtns{display:flex;flex-direction:column;gap:12px;width:min(360px,100%)}
.ring .rdone{background:#fff;color:#1B8656;font-family:"Bricolage Grotesque",Chivo,sans-serif;font-weight:800;font-size:2rem;padding:18px;border-radius:16px;letter-spacing:.04em}
.ring .rsnz{background:rgba(255,255,255,.16);color:#fff;padding:14px;font-weight:700;border:2px solid rgba(255,255,255,.5)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--card);padding:10px 16px;border-radius:10px;font-size:.95rem;z-index:30;max-width:calc(100% - 32px)}
@media (prefers-reduced-motion:reduce){.ring .bigbell,.hold.rec .dot{animation:none}}
.stack > .field{flex:none}
.notice{margin:0;background:var(--brass-soft);color:var(--brass-ink);border-radius:12px;padding:12px 14px;font-size:.95rem}
.tabs{display:flex;gap:6px;background:var(--ground);border-radius:12px;padding:4px}
.tab{flex:1;background:none;padding:10px;font-weight:700;color:var(--muted);border-radius:9px}
.tab[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
input[type=email],input[type=password]{font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
.showpw{font-size:.85rem;color:var(--muted);display:flex;gap:6px;align-items:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grouprow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.grouprow select{width:auto;max-width:100%;padding:6px 10px;font-weight:700}
.mrow{display:flex;gap:10px;align-items:center;background:var(--ground);border-radius:12px;padding:10px 12px;flex-wrap:wrap}
.mrow .who{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
.mrow .who small{display:block;color:var(--muted)}
.sharebox h2{font-size:1.05rem}
.vwords{flex-basis:100%;font-weight:400;font-size:.85rem;color:var(--muted)}
.vwords input{margin-top:4px}

.sect .hold.small{width:auto;flex:0 0 auto}
.sect{flex-wrap:wrap}