:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light dark;
  --bg: #fff; --surface: #fff; --text: #1c2025; --muted: #68717a;
  --line: #e6e8eb; --blue: #246da8; --button-text: #fff;
  --danger: #bd2935; --selection: #eaf1f7; --field: #f5f6f8;
  color: var(--text); background: var(--bg); font-size: 16px; line-height: 1.45;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#17212b; --surface:#17212b; --text:#f0f2f4; --muted:#abb5bf; --line:#34414e; --blue:#7abbef; --button-text:#14222d; --danger:#ff999e; --selection:#293d50; --field:#212e3a; }
}
* { box-sizing:border-box; scrollbar-color:var(--muted) var(--bg); scrollbar-width:thin; }
body { margin:0; }
button,input,textarea { font:inherit; -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; border:0; color:inherit; background:none; }
button:disabled { opacity:.5; cursor:wait; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
a { color:var(--blue); text-underline-offset:3px; }
::selection { background:var(--selection); }
input,textarea { caret-color:var(--blue); }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
main { max-width:640px; margin:auto; padding:calc(16px + var(--tg-content-safe-area-inset-top,0px)) 22px calc(28px + env(safe-area-inset-bottom)); }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; gap:12px; }
nav { display:flex; align-items:stretch; gap:24px; border-bottom:1px solid var(--line); flex:1; }
nav button { min-height:44px; padding:8px 0 12px; font-size:18px; font-weight:500; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
nav [aria-selected=true] { color:var(--text); border-bottom-color:var(--text); }
h2 { font-size:13px; font-weight:500; line-height:1.4; margin:26px 0 8px; color:var(--muted); }
p { overflow-wrap:anywhere; }
.icon-button { display:grid; place-items:center; width:44px; height:44px; border-radius:8px; color:var(--muted); }
.toolbar { display:flex; gap:8px; align-items:center; }
.search { display:flex; align-items:center; gap:8px; background:var(--field); border-radius:8px; padding:0 11px; color:var(--muted); flex:1; min-width:0; }
.search input { background:none; border:0; color:var(--text); min-width:0; flex:1; height:44px; font-size:15px; }
.search input:focus-visible { outline-offset:0; border-radius:4px; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
#add { min-height:44px; width:auto; padding:8px 0 8px 8px; background:none; color:var(--blue); font-size:14px; font-weight:500; gap:4px; }
#add svg { width:18px; height:18px; }
.primary { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 16px; border-radius:8px; background:var(--blue); color:var(--button-text); font-weight:500; text-align:center; text-decoration:none; width:100%; }
.secondary { min-height:46px; padding:10px 14px; border-radius:8px; color:var(--blue); background:var(--field); width:100%; font-weight:500; }
.destructive { background:var(--danger); color:var(--bg); }
.segments { display:flex; gap:24px; border-bottom:1px solid var(--line); margin:26px 0 12px; }
.segments button { min-height:44px; padding:8px 0 12px; font-size:14px; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
.segments [aria-pressed=true] { color:var(--text); border-bottom-color:var(--text); font-weight:500; }
.caption { font-size:12px; margin:0 0 8px; color:var(--muted); font-variant-numeric:tabular-nums; }
.group { background:transparent; }
.row { width:100%; min-height:56px; padding:13px 0; display:flex; align-items:center; gap:12px; text-align:left; border-bottom:1px solid var(--line); }
.row>span:first-child { min-width:0; flex:1; }
.row strong { display:block; font-size:15px; font-weight:400; overflow-wrap:anywhere; }
.row small { display:block; color:var(--muted); font-size:12px; margin-top:4px; overflow-wrap:anywhere; }
.row .chevron { color:var(--muted); width:15px; height:15px; }
.row .action-label { color:var(--blue); font-size:13px; flex:none; }
#pending .row { border-top:1px solid var(--line); }
.footnote { font-size:12px; color:var(--muted); margin:24px 0; line-height:1.5; max-width:45ch; }
.empty { text-align:center; padding:36px 12px; }
.empty h2 { color:var(--text); font-size:20px; margin:0 0 8px; }
.empty p { color:var(--muted); font-size:15px; }
.notice { color:var(--danger); border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-size:14px; margin:0 0 16px; }
dialog { color:var(--text); background:var(--bg); border:0; border-radius:14px 14px 0 0; position:fixed; inset:auto 0 0; width:min(100%,640px); max-width:none; max-height:88dvh; margin:0 auto; padding:18px 22px calc(24px + env(safe-area-inset-bottom)); overflow:auto; }
dialog::backdrop { background:#0006; }
.sheet-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.sheet-heading h2 { margin:0; color:var(--text); font-size:20px; font-weight:600; letter-spacing:-.015em; }
.sheet-heading .icon-button { flex:none; }
#sheet-body p { font-size:14px; margin:12px 0; color:var(--muted); }
#sheet-body ul { padding:0; list-style:none; max-height:27vh; overflow:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
#sheet-body li { padding:10px 0; overflow-wrap:anywhere; }
#sheet-body li+li { border-top:1px solid var(--line); }
#sheet-body textarea { width:100%; min-height:136px; resize:vertical; background:var(--field); border:1px solid var(--line); border-radius:8px; color:var(--text); padding:12px; line-height:1.5; }
#sheet-body label { display:block; font-size:14px; margin:12px 0 8px; }
#sheet-actions { display:grid; gap:10px; margin-top:20px; }
#sheet-error { margin-top:16px; }
#sheet-body .links { display:flex; gap:20px; flex-wrap:wrap; }
#sheet-body .status { color:var(--text); font-weight:500; }
#sheet-body .warning { color:var(--danger); }
@media(hover:hover) { .row:hover,.icon-button:hover,nav button:hover { background:var(--selection); } .primary:hover { filter:brightness(.95); } .secondary:hover { background:var(--selection); } }
@media(min-width:700px) { main { padding-top:40px; } dialog { inset:0; margin:auto; border-radius:14px; width:480px; height:fit-content; max-height:85vh; } }
@media(prefers-reduced-motion:no-preference) { dialog[open] { animation:sheet-in .16s cubic-bezier(.16,1,.3,1); } @keyframes sheet-in { from { transform:translateY(12px); } to { transform:translateY(0); } } }