/* Shared look: tokens, toolbar, controls, grouped lists, dialog. */
:root {
  color-scheme:light;
  --bg:#F5F5F7; --surface:#FFFFFF; --surface2:#F5F5F7; --raised:#FFFFFF;
  --label:#1D1D1F; --label2:rgba(60,60,67,.68); --label3:rgba(60,60,67,.36);
  --sep:rgba(60,60,67,.14); --fill:rgba(118,118,128,.12); --fill2:rgba(118,118,128,.08);
  --accent:#0071E3; --accent-tint:rgba(0,113,227,.1);
  --in:#1E8E3E; --out:#D70015; --out-tint:rgba(255,59,48,.1);
  --bar:rgba(251,251,253,.78);
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
  --pop:0 10px 40px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.08);
  --r:18px; --r-sm:10px;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-d:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --bg:#000000; --surface:#1C1C1E; --surface2:#2C2C2E; --raised:#2C2C2E;
    --label:#F5F5F7; --label2:rgba(235,235,245,.62); --label3:rgba(235,235,245,.3);
    --sep:rgba(84,84,88,.6); --fill:rgba(118,118,128,.24); --fill2:rgba(118,118,128,.16);
    --accent:#0A84FF; --accent-tint:rgba(10,132,255,.18);
    --in:#30D158; --out:#FF453A; --out-tint:rgba(255,69,58,.16);
    --bar:rgba(22,22,23,.72);
    --shadow:none;
    --pop:0 10px 40px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.12);
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#000000; --surface:#1C1C1E; --surface2:#2C2C2E; --raised:#2C2C2E;
  --label:#F5F5F7; --label2:rgba(235,235,245,.62); --label3:rgba(235,235,245,.3);
  --sep:rgba(84,84,88,.6); --fill:rgba(118,118,128,.24); --fill2:rgba(118,118,128,.16);
  --accent:#0A84FF; --accent-tint:rgba(10,132,255,.18);
  --in:#30D158; --out:#FF453A; --out-tint:rgba(255,69,58,.16);
  --bar:rgba(22,22,23,.72);
  --shadow:none;
  --pop:0 10px 40px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.12);
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--label);
  font:15px/1.47 var(--font); letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.num { font-variant-numeric:tabular-nums; }
.pos { color:var(--in); } .neg { color:var(--out); }
.muted { color:var(--label2); font-weight:400; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:1px; border-radius:8px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* Toolbar */
.bar {
  position:sticky; top:0; z-index:20; background:var(--bar);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--sep);
}
.bar-in { max-width:68rem; margin:0 auto; height:52px; padding:0 1.25rem; display:flex; align-items:center; gap:.6rem; }
.brand { display:flex; align-items:center; gap:.55rem; font-weight:600; font-size:15px; letter-spacing:-.01em; margin-right:.5rem; white-space:nowrap; }
.spacer { flex:1; }
.wrap { max-width:68rem; margin:0 auto; padding:0 1.25rem 5rem; }

/* Large title */
.title { padding:2.2rem 0 1.4rem; }
.title h1 { font:700 clamp(28px,4vw,34px)/1.12 var(--font-d); letter-spacing:-.022em; margin:0; }
.title p { margin:.35rem 0 0; color:var(--label2); font-size:14px; }

/* Controls */
button, .btn {
  font:inherit; font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--accent);
  background:var(--accent-tint); border:0; border-radius:980px; padding:.42rem .95rem; cursor:pointer;
  transition:background .15s, opacity .15s, transform .1s; white-space:nowrap;
}
button:hover { background:color-mix(in srgb, var(--accent) 16%, transparent); }
button:active { transform:scale(.97); }
button.primary { background:var(--accent); color:#fff; }
button.primary:hover { background:color-mix(in srgb, var(--accent) 88%, #000); }
button.plain { background:none; padding:.42rem .55rem; }
button.plain:hover { background:var(--fill2); }
button.danger { color:var(--out); background:none; }
button.danger:hover { background:var(--out-tint); }
button.icon { width:30px; height:30px; padding:0; display:inline-grid; place-items:center; color:var(--label2); background:var(--fill); }
button.icon:hover { background:color-mix(in srgb, var(--label) 14%, transparent); }

input[type=text], input[type=password], input:not([type]), select {
  font:inherit; font-size:15px; color:var(--label); background:var(--fill);
  border:0; border-radius:var(--r-sm); padding:.48rem .75rem; outline:none;
  transition:box-shadow .15s, background .15s;
}
input::placeholder { color:var(--label2); }
input:focus, select:focus { box-shadow:0 0 0 3.5px color-mix(in srgb, var(--accent) 35%, transparent); background:var(--surface); }
select {
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M1.5 5 5 1.5 8.5 5M1.5 9 5 12.5 8.5 9' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center;
}

.search { position:relative; }
.search > svg { position:absolute; left:.65rem; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--label2); pointer-events:none; }
.search input { padding-left:2rem; width:100%; }

/* Switch */
.switch { display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; font-size:15px; user-select:none; }
.switch input {
  appearance:none; -webkit-appearance:none; margin:0; flex:none; cursor:pointer;
  width:42px; height:26px; border-radius:13px; background:var(--fill); position:relative; transition:background .2s;
}
.switch input::after {
  content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.04); transition:transform .22s cubic-bezier(.3,.7,.4,1);
}
.switch input:checked { background:#34C759; }
.switch input:checked::after { transform:translateX(16px); }

/* Cards and grouped lists */
.card { background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); }
.section-h { font-size:13px; font-weight:600; color:var(--label2); margin:2.4rem 0 .55rem .2rem; letter-spacing:-.005em; }
.section-f { font-size:13px; color:var(--label2); margin:.55rem 0 0 .2rem; }
.group { background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.group > * + * { box-shadow:inset 0 .5px 0 var(--sep); }

.callout {
  display:flex; gap:.7rem; align-items:center; border-radius:14px; padding:.8rem 1rem; font-size:14px;
  background:var(--accent-tint); color:var(--label);
}
.callout.warn { background:var(--out-tint); }
.callout svg { flex:none; width:20px; height:20px; color:var(--accent); }
.callout.warn svg { color:var(--out); }

.empty { color:var(--label2); padding:3rem 1rem; text-align:center; }

/* Account */
.avatar {
  width:30px; height:30px; padding:0; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:600; letter-spacing:0; color:#fff;
  background:linear-gradient(180deg, #A1A1A6, #7C7C80);
}
.avatar:hover { background:linear-gradient(180deg, #8E8E93, #6C6C70); }

/* Popover and menus */
.pop {
  position:fixed; z-index:50; padding:5px; overflow:auto; max-width:calc(100vw - 16px);
  background:var(--raised); border-radius:12px; box-shadow:var(--pop);
  transform-origin:top center; animation:pop .16s cubic-bezier(.3,.7,.4,1);
}
@supports (backdrop-filter:blur(1px)) {
  .pop { background:color-mix(in srgb, var(--raised) 86%, transparent); -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px); }
}
@keyframes pop { from { opacity:0; transform:scale(.97) translateY(-4px); } }
.menu-list hr { border:0; height:.5px; background:var(--sep); margin:5px 8px; }
.menu-h { padding:.4rem .7rem .35rem; font-size:12px; font-weight:600; color:var(--label2); }
.menu-item {
  display:flex; align-items:center; gap:.45rem; width:100%; text-align:left; cursor:pointer;
  padding:.38rem .7rem .38rem .45rem; border-radius:7px; background:none; color:var(--label);
  font:inherit; font-size:14px; font-weight:400; letter-spacing:-.01em; white-space:nowrap;
}
.menu-item:hover, .menu-item:focus-visible, .menu-item.on { background:var(--accent); color:#fff; text-decoration:none; outline:none; }
.menu-item:active { transform:none; }
.menu-item.danger { color:var(--out); }
.menu-item.danger:hover, .menu-item.danger:focus-visible { background:#FF3B30; color:#fff; }
.menu-item .ck { width:16px; display:grid; place-items:center; flex:none; }
.menu-item.sel { font-weight:600; }
.menu-item.ended { color:var(--label2); }
.menu-item.ended:hover, .menu-item.ended.on { color:#fff; }
.menu-item .code { font-weight:600; font-variant-numeric:tabular-nums; min-width:3.5rem; padding-left:.25rem; }
.menu-item .sub { color:var(--label2); overflow:hidden; text-overflow:ellipsis; }
.menu-item:hover .sub, .menu-item.on .sub { color:rgba(255,255,255,.8); }

/* Sheet */
dialog.sheet {
  width:min(23rem, calc(100vw - 2rem)); padding:1.6rem 1.4rem 1.2rem; border:0; border-radius:16px;
  color:var(--label); background:var(--raised); box-shadow:var(--pop); text-align:center;
  animation:sheet .22s cubic-bezier(.3,.7,.4,1);
}
dialog.sheet::backdrop { background:rgba(0,0,0,.28); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:fade .2s; }
@keyframes sheet { from { opacity:0; transform:scale(1.06); } }
@keyframes fade { from { opacity:0; } }
dialog.sheet h2 { font:600 17px/1.3 var(--font-d); letter-spacing:-.015em; margin:0 0 .35rem; }
dialog.sheet p { margin:0; font-size:13.5px; color:var(--label2); }
.sheet-icon { width:44px; height:44px; margin:0 auto .8rem; border-radius:12px; background:var(--accent-tint) center/22px no-repeat; }
.sheet-icon.warn { background-color:var(--out-tint); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5 2.5 20h19L12 3.5Z' fill='none' stroke='%23FF3B30' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 10v4.5' stroke='%23FF3B30' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.2' r='1.2' fill='%23FF3B30'/%3E%3C/svg%3E"); }
.sheet-icon.key { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A84FF' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 8-8m-3 3 2.5 2.5M14 9l2 2'/%3E%3C/svg%3E"); }
.sheet-body:not(:empty) { margin-top:1.1rem; text-align:left; }
.sheet-btns { display:flex; gap:.6rem; margin-top:1.4rem; }
.sheet-btns button { flex:1; padding:.6rem 1rem; border-radius:10px; font-size:15px; color:var(--label); background:var(--fill); }
.sheet-btns button:hover { background:color-mix(in srgb, var(--label) 14%, transparent); }
.sheet-btns button.primary { background:var(--accent); color:#fff; }
.sheet-btns button.destructive { background:#FF3B30; color:#fff; }

/* Grouped fields */
.field-group { background:var(--fill2); border-radius:12px; overflow:hidden; }
.field-group input { display:block; width:100%; background:none; border-radius:0; padding:.7rem .9rem; }
.field-group input + input { box-shadow:inset 0 .5px 0 var(--sep); }
.field-group input:focus { box-shadow:none; background:var(--accent-tint); }
.field-group input + input:focus { box-shadow:inset 0 .5px 0 var(--sep); }
.field-err { color:var(--out); font-size:13px; margin:.6rem .2rem 0; }

/* Toast */
.toast {
  position:fixed; left:50%; bottom:28px; z-index:60; display:flex; align-items:center; gap:.45rem;
  padding:.6rem 1rem .6rem .85rem; border-radius:980px; font-size:14px; font-weight:500;
  color:var(--label); background:var(--raised); box-shadow:var(--pop);
  transform:translate(-50%, 20px); opacity:0; pointer-events:none; transition:transform .3s cubic-bezier(.3,.7,.4,1), opacity .2s;
}
.toast svg { color:#34C759; }
.toast.on { transform:translate(-50%, 0); opacity:1; }

@media (max-width:40rem) {
  .bar-in, .wrap { padding-left:1rem; padding-right:1rem; }
  .brand span { display:none; }
}