/* SANDR iOS prototype: tokens, type, primitives.
   Look: flat and white, ChatGPT-clean. Ink is the accent. One grouped-gray card level. */

:root {
  --tm: 1;
  --e-ui: cubic-bezier(.3, .7, .2, 1);
  --e-sheet: cubic-bezier(.32, .72, 0, 1);
  --e-soft: cubic-bezier(.25, .8, .25, 1);
  --e-pop: cubic-bezier(.3, 1.45, .5, 1);
  --e-kb: cubic-bezier(.17, .59, .4, .77);
  --d-ui-base: 340ms;
  --d-sheet-base: 480ms;
  --d-soft-base: 600ms;
  --d-pop-base: 420ms;
  --d-ui: calc(var(--d-ui-base) * var(--tm));
  --d-sheet: calc(var(--d-sheet-base) * var(--tm));
  --d-soft: calc(var(--d-soft-base) * var(--tm));
  --d-pop: calc(var(--d-pop-base) * var(--tm));
  --d-fast: calc(160ms * var(--tm));
  --d-kb: calc(290ms * var(--tm));
}

.device {
  --bg: #ffffff;
  --card: #f4f4f4;
  --card2: #ececec;
  --ink: #0d0d0d;
  --ink2: #5f5f5f;
  --ink3: #9b9b9b;
  --on-ink: #ffffff;
  --line: rgba(13, 13, 13, .07);
  --line2: rgba(13, 13, 13, .13);
  --fill: rgba(13, 13, 13, .05);
  --fill2: rgba(13, 13, 13, .08);
  --fill3: rgba(13, 13, 13, .13);
  --ok: #1a7f4b;
  --warn: #9a5b00;
  --bad: #c0262d;
  --toggle-on: #34c759;
  --dim: rgba(0, 0, 0, .34);
  --glass: rgba(255, 255, 255, .78);
  --alert-bg: rgba(250, 250, 250, .86);
  --menu-bg: rgba(252, 252, 252, .88);
  --toast-bg: #1c1c1c;
  --toast-fg: #f4f4f4;
  --kb-bg: #d3d5db;
  --kb-key: #ffffff;
  --kb-fn: #adb1bb;
  --kb-ink: #000;
  --kb-line: rgba(0, 0, 0, .16);
  --kb-key-sh: #898a8d;
  --safe-top: 54px;
  --safe-bottom: 34px;
  --dt: 1;
  color-scheme: light;
}
.device[data-mode="dark"] {
  --bg: #1b1b1b;
  --card: #2a2a2a;
  --card2: #333333;
  --ink: #f2f2f2;
  --ink2: #b3b3b3;
  --ink3: #767676;
  --on-ink: #121212;
  --line: rgba(255, 255, 255, .08);
  --line2: rgba(255, 255, 255, .15);
  --fill: rgba(255, 255, 255, .07);
  --fill2: rgba(255, 255, 255, .11);
  --fill3: rgba(255, 255, 255, .17);
  --ok: #5cc28a;
  --warn: #e3a94f;
  --bad: #f0837a;
  --toggle-on: #30d158;
  --dim: rgba(0, 0, 0, .55);
  --glass: rgba(40, 40, 40, .76);
  --alert-bg: rgba(44, 44, 44, .88);
  --menu-bg: rgba(44, 44, 44, .9);
  --toast-bg: #f2f2f2;
  --toast-fg: #141414;
  --kb-bg: #2b2b2d;
  --kb-key: #6a6a6e;
  --kb-fn: #47474b;
  --kb-ink: #fff;
  --kb-line: rgba(255, 255, 255, .18);
  --kb-key-sh: #111;
  color-scheme: dark;
}
.device {
  --fs-lt: calc(34px * var(--dt)); --lh-lt: calc(41px * var(--dt));
  --fs-t1: calc(28px * var(--dt)); --lh-t1: calc(34px * var(--dt));
  --fs-t2: calc(22px * var(--dt)); --lh-t2: calc(28px * var(--dt));
  --fs-t3: calc(20px * var(--dt)); --lh-t3: calc(25px * var(--dt));
  --fs-hd: calc(17px * var(--dt)); --lh-hd: calc(22px * var(--dt));
  --fs-body: calc(17px * var(--dt)); --lh-body: calc(22px * var(--dt));
  --fs-call: calc(16px * var(--dt)); --lh-call: calc(21px * var(--dt));
  --fs-sub: calc(15px * var(--dt)); --lh-sub: calc(20px * var(--dt));
  --fs-foot: calc(13px * var(--dt)); --lh-foot: calc(18px * var(--dt));
  --fs-cap: calc(12px * var(--dt)); --lh-cap: calc(16px * var(--dt));
  --fs-cap2: calc(11px * var(--dt)); --lh-cap2: calc(13px * var(--dt));
}

.device {
  position: relative;
  width: 390px;
  height: 844px;
  overflow: hidden;
  overflow: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
  --kb: 0px;
  --dock-h: 120px;
}
.device *, .device *::before, .device *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:where(.device) button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; touch-action: manipulation; }
:where(.device) button:disabled { cursor: default; }
:where(.device) input, :where(.device) textarea { font: inherit; letter-spacing: inherit; color: inherit; user-select: text; -webkit-user-select: text; }
:where(.device) :is(h1,h2,h3,h4,h5,p) { margin: 0; }
.device :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.device input:focus-visible, .device textarea:focus-visible { outline: none; }
:where(.device) hr { border: 0; height: .5px; background: var(--line2); margin: 0; }
.device .scroll, .device .nscroll, .device .sbody { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.device ::-webkit-scrollbar { display: none; }
.device .ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.device .grape { fill: currentColor; flex: none; }
.device [hidden] { display: none !important; }
.device[data-rm="1"] *, .device[data-rm="1"] *::before, .device[data-rm="1"] *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
.device[data-rm="1"] .spinner i { animation-duration: 1s !important; animation-iteration-count: infinite !important; }
.device .tnum { font-variant-numeric: tabular-nums; }

/* ---------- shell + presentation host ---------- */
.shell {
  position: absolute; inset: 0; background: var(--bg); overflow: hidden; overflow: clip;
  transform: translate3d(calc(var(--px, 0%) + var(--sx, 0px)), 0, 0) scale(var(--sc, 1));
  transform-origin: 50% 0; border-radius: var(--sr, 0px); will-change: transform;
}
.pres { position: absolute; inset: 0; pointer-events: none; }
.pres-item { position: absolute; inset: 0; pointer-events: none; transform: translate3d(var(--px, 0%), 0, 0) scale(var(--sc, 1)); transform-origin: 50% 0; }
.pres-item > * { pointer-events: auto; }

/* sheets */
.sheet-dim { position: absolute; inset: 0; background: var(--dim); opacity: 0; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg); border-radius: 34px 34px 0 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -.5px 0 var(--line), 0 -14px 50px rgba(0, 0, 0, .18); will-change: transform; }
.sheet:not(.cover) { --safe-top: 12px; }
.sheet-grab { position: absolute; top: 0; left: 0; right: 0; height: 24px; display: grid; place-items: center; z-index: 6; touch-action: none; cursor: grab; }
.sheet-grab i { width: 36px; height: 5px; border-radius: 3px; background: var(--fill3); margin-top: -2px; }
[data-sheet-drag] { touch-action: none; }
.shead { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 64px; padding: 16px 14px 6px 16px; flex: none; z-index: 4; background: var(--bg); }
.shead-t { text-align: center; display: flex; flex-direction: column; min-width: 0; max-width: 220px; }
.shead-t strong { font-size: var(--fs-hd); line-height: var(--lh-hd); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shead-t small { font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shead-l { justify-self: start; display: flex; gap: 4px; }
.shead-r { justify-self: end; display: flex; gap: 4px; align-items: center; }
.sbody { flex: 1; min-height: 0; padding: 0 0 calc(var(--hid, 0px) + var(--safe-bottom) + var(--kb, 0px) + 16px); transition: padding-bottom var(--d-kb) var(--e-kb); }

/* layers */
.layer-shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none !important; }
.layer { position: absolute; inset: 0; background: var(--bg); box-shadow: -1px 0 0 var(--line), -18px 0 50px rgba(0, 0, 0, .14); will-change: transform; overflow: hidden; }
.layer-edge { position: absolute; left: 0; top: 0; bottom: 0; width: 22px; z-index: 30; touch-action: none; }

/* drawers */
.drawer-wrap { z-index: 0; }
.drawer-shade { position: absolute; inset: 0; background: var(--dim); opacity: 0; pointer-events: none !important; }
.drawer { position: absolute; top: 0; bottom: 0; background: var(--bg); display: flex; flex-direction: column; will-change: transform; }
.side-left .drawer { left: 0; }
.side-right .drawer { right: 0; }
.drawer-hit { position: absolute; top: 0; bottom: 0; z-index: 3; }

/* alerts, action sheets */
.alert-wrap, .acts-wrap { position: absolute; inset: 0; z-index: 100; pointer-events: none; transform: none !important; }
.alert-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity .25s; pointer-events: auto !important; }
.alert-wrap.open .alert-dim { opacity: 1; }
.alert-pos { position: absolute; inset: 0; display: grid; place-items: center; transform: translateY(calc(var(--kb, 0px) * -.45)); transition: transform var(--d-kb) var(--e-kb); pointer-events: none !important; }
.alert { width: min(280px, calc(100% - 64px)); border-radius: 18px; background: var(--alert-bg); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); overflow: hidden; pointer-events: auto !important; opacity: 0; transform: scale(1.16); transition: transform var(--d-ui) var(--e-ui), opacity .2s; box-shadow: 0 0 0 .5px var(--line); }
.alert-wrap.open .alert { opacity: 1; transform: none; }
.alert-wrap.exit .alert { opacity: 0; transform: scale(.94); transition-duration: .18s; }
.alert-wrap.exit .alert-dim { opacity: 0; }
.alert-body { padding: 20px 16px 16px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.alert-ic { align-self: center; margin-bottom: 6px; color: var(--ink); }
.alert-body h3 { font-size: var(--fs-hd); line-height: var(--lh-hd); font-weight: 600; }
.alert-body p { font-size: var(--fs-foot); line-height: var(--lh-foot); color: var(--ink); opacity: .86; white-space: pre-line; }
.alert-field { margin-top: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; background: var(--fill); font-size: var(--fs-call); line-height: 1.3; text-align: left; border: 0; outline: 0; resize: none; }
.alert-btns { display: flex; border-top: .5px solid var(--line2); }
.alert-btns.stacked { flex-direction: column; }
.alert-btn { flex: 1; min-height: 46px; padding: 0 8px; font-size: var(--fs-hd); color: var(--ink); text-align: center; transition: background-color .3s; }
.alert-btn + .alert-btn { border-left: .5px solid var(--line2); }
.alert-btns.stacked .alert-btn + .alert-btn { border-left: 0; border-top: .5px solid var(--line2); }
.alert-btn.preferred, .alert-btn.default { font-weight: 600; }
.alert-btn.destructive { color: var(--bad); }
.alert-btn:active { background: var(--fill2); transition-duration: 0s; }
.alert-btn:disabled { opacity: .35; }
.acts-dim { position: absolute; inset: 0; background: var(--dim); opacity: 0; transition: opacity .3s; pointer-events: auto !important; }
.acts-wrap.open .acts-dim { opacity: 1; }
.acts { position: absolute; left: 8px; right: 8px; bottom: calc(var(--safe-bottom) - 14px); display: flex; flex-direction: column; gap: 8px; transform: translateY(calc(100% + 60px)); transition: transform var(--d-sheet) var(--e-sheet); pointer-events: auto !important; }
.acts-wrap.open .acts { transform: none; }
.acts-wrap.exit .acts { transform: translateY(calc(100% + 60px)); transition-duration: .25s; }
.acts-wrap.exit .acts-dim { opacity: 0; }
.acts-group, .acts-cancel { background: var(--alert-bg); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 .5px var(--line); }
.acts-head { padding: 16px 20px 12px; text-align: center; display: flex; flex-direction: column; gap: 2px; color: var(--ink2); font-size: var(--fs-foot); line-height: var(--lh-foot); border-bottom: .5px solid var(--line2); }
.acts-head strong { font-weight: 600; color: var(--ink2); }
.acts-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; font-size: var(--fs-hd); transition: background-color .3s; }
.acts-btn + .acts-btn { border-top: .5px solid var(--line2); }
.acts-btn.destructive { color: var(--bad); }
.acts-btn:active, .acts-cancel:active { background: var(--fill2); transition-duration: 0s; }
.acts-cancel { width: 100%; min-height: 56px; font-weight: 600; font-size: var(--fs-hd); }

/* menus */
.menu-wrap { position: absolute; inset: 0; z-index: 90; pointer-events: none; transform: none !important; }
.menu-dim { position: absolute; inset: 0; pointer-events: auto !important; }
.menu { position: absolute; pointer-events: auto !important; background: var(--menu-bg); -webkit-backdrop-filter: blur(34px) saturate(1.8); backdrop-filter: blur(34px) saturate(1.8); border-radius: 20px; box-shadow: 0 14px 44px rgba(0, 0, 0, .22), 0 0 0 .5px var(--line); padding: 6px; opacity: 0; transform: scale(.5); transition: transform var(--d-pop) var(--e-pop), opacity .16s; }
.menu-wrap.open .menu, .ctx-wrap.open .menu { opacity: 1; transform: none; }
.menu-wrap.exit .menu, .ctx-wrap.exit .menu { opacity: 0; transform: scale(.9); transition-duration: .16s; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 14px; font-size: var(--fs-body); transition: background-color .3s; }
.menu-item:active { background: var(--fill2); transition-duration: 0s; }
.menu-item .menu-label { flex: 1; display: flex; flex-direction: column; text-align: left; min-width: 0; }
.menu-item .menu-label small { font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--ink2); }
.menu-item.destructive { color: var(--bad); }
.menu-item.disabled { opacity: .4; }
.menu-check { width: 18px; display: inline-grid; place-items: center; }
.menu-sep { height: .5px; background: var(--line2); margin: 4px 10px; }
.menu-header { padding: 8px 12px 4px; font-size: var(--fs-foot); color: var(--ink2); }
.ctx-wrap { position: absolute; inset: 0; z-index: 95; pointer-events: none; transform: none !important; }
.ctx-dim { position: absolute; inset: 0; border-radius: var(--dev-r, 0px); background: rgba(0, 0, 0, .18); opacity: 0; pointer-events: auto !important; transition: opacity .3s, backdrop-filter .3s, -webkit-backdrop-filter .3s; }
.ctx-wrap.open .ctx-dim { opacity: 1; -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.ctx-lift { position: absolute; pointer-events: none !important; transition: transform var(--d-pop) var(--e-pop), box-shadow .3s; }
.ctx-lift > * { width: 100% !important; height: 100% !important; margin: 0 !important; }
.ctx-wrap.open .ctx-lift { transform: translateY(var(--shift, 0px)) scale(1.035); box-shadow: 0 20px 56px rgba(0, 0, 0, .28); }
.ctx-wrap.exit .ctx-lift { transition-duration: .22s; }

/* toasts */
.toasts { position: absolute; left: 0; right: 0; bottom: calc(var(--dock-h, 120px) + 10px + var(--kb, 0px)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 85; transition: bottom var(--d-kb) var(--e-kb); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 28px); background: var(--toast-bg); color: var(--toast-fg); padding: 10px 10px 10px 16px; border-radius: 999px; font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 500; box-shadow: 0 8px 28px rgba(0, 0, 0, .22); opacity: 0; transform: translateY(18px) scale(.96); transition: transform var(--d-ui) var(--e-ui), opacity .22s; }
.toast:not(:has(.toast-act)) { padding-right: 16px; }
.toast.open { opacity: 1; transform: none; }
.toast.exit { opacity: 0; transform: translateY(8px) scale(.98); transition-duration: .22s; }
.toast-act { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-weight: 600; }
.device[data-mode="dark"] .toast-act { background: rgba(0, 0, 0, .1); }
.toast-ring { width: 16px; height: 16px; transform: rotate(-90deg); }
.toast-ring circle { fill: none; stroke: currentColor; stroke-width: 3; stroke-dasharray: 66; stroke-dashoffset: 0; animation: countdown var(--ms) linear forwards; opacity: .8; }
@keyframes countdown { to { stroke-dashoffset: 66; } }

/* keyboard */
.kb { position: absolute; left: 0; right: 0; bottom: 0; height: 302px; background: var(--kb-bg); z-index: 80; transform: translateY(100%); transition: transform var(--d-kb) var(--e-kb); display: flex; flex-direction: column; touch-action: none; }
.kb.on { transform: none; }
.kb-pred { display: flex; height: 44px; align-items: stretch; flex: none; }
.kb-pred button { flex: 1; font-size: 17px; color: var(--kb-ink); position: relative; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-pred button + button::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: .5px; background: var(--kb-line); }
.kb-pred button:active { background: var(--kb-fn); }
.kb-keys { padding: 0 3px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.kb-row { display: flex; gap: 6px; height: 42px; }
.kb-row.inset { padding: 0 19px; }
.kb-key { flex: 1; min-width: 0; border-radius: 5px; background: var(--kb-key); box-shadow: 0 1px 0 var(--kb-key-sh); color: var(--kb-ink); font-size: 22px; letter-spacing: 0; position: relative; display: grid; place-items: center; }
.kb-key:active { background: var(--kb-fn); }
.kb-key.fn { background: var(--kb-fn); font-size: 16px; }
.kb-key.fn:active { background: var(--kb-key); }
.kb-key.fn.act { background: var(--kb-key); }
.kb-key.wide { flex: 0 0 44px; }
.kb-key.wide2 { flex: 0 0 84px; }
.kb-key.wide3 { flex: 0 0 98px; font-size: 16px; }
.kb-key.space { font-size: 16px; }
.kb-key.ret { background: var(--ink); color: var(--on-ink); font-weight: 600; }
.kb-pop { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 54px; height: 58px; margin-bottom: -4px; background: var(--kb-key); border-radius: 10px; font-size: 32px; display: grid; place-items: center; box-shadow: 0 2px 12px rgba(0, 0, 0, .28); z-index: 5; pointer-events: none; }
.kb-util { display: flex; justify-content: space-between; padding: 8px 22px 0; height: 44px; flex: none; color: var(--kb-ink); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 600; white-space: nowrap; transition: transform var(--d-fast) var(--e-ui), background-color .2s, opacity .2s; }
.btn.l { min-height: 50px; padding: 0 24px; font-size: var(--fs-hd); }
.btn.m { min-height: 44px; padding: 0 20px; font-size: var(--fs-body); }
.btn.s { min-height: 34px; padding: 0 14px; font-size: var(--fs-sub); }
.btn.fill { background: var(--ink); color: var(--on-ink); }
.btn.soft { background: var(--fill); color: var(--ink); }
.btn.soft:active { background: var(--fill2); }
.btn.outline { box-shadow: inset 0 0 0 1px var(--line2); }
.btn.plain { color: var(--ink); padding: 0 10px; }
.btn.danger { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.btn.full { width: 100%; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .35; pointer-events: none; }
.btn.busy { pointer-events: none; }
.btn.fill .spinner i { background: var(--on-ink); }
.ibtn { position: relative; width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--ink); transition: background-color .3s, transform var(--d-fast) var(--e-ui); flex: none; }
.ibtn:active { background: var(--fill2); transition-duration: 0s; transform: scale(.94); }
.ibtn.round { width: 34px; height: 34px; background: var(--fill); }
.ibtn.on { background: var(--ink); color: var(--on-ink); }
.ibtn-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--on-ink); font-style: normal; font-size: 11px; line-height: 18px; font-weight: 600; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: var(--fs-foot); line-height: 1; font-weight: 500; white-space: nowrap; flex: none; }
.pill.mute { background: var(--fill); color: var(--ink2); }
.pill.ink { background: var(--ink); color: var(--on-ink); }
.pill.ok { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); }
.pill.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.pill.bad { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); }
.avatar { display: inline-grid; place-items: center; background: var(--fill2); color: var(--ink); font-weight: 600; flex: none; letter-spacing: 0; }
.spinner { position: relative; display: inline-block; flex: none; }
.spinner i { position: absolute; left: 50%; top: 50%; width: 9%; height: 26%; margin: -13% 0 0 -4.5%; border-radius: 99px; background: var(--ink2); opacity: .15; animation: petal 1s linear infinite; }
@keyframes petal { 0% { opacity: 1; } 100% { opacity: .15; } }
.sk { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--fill) 0%, var(--fill2) 50%, var(--fill) 100%); background-size: 220% 100%; animation: shimmer 1.5s ease-in-out infinite; }
@keyframes shimmer { 0% { background-position: 110% 0; } 100% { background-position: -110% 0; } }
.shimmer-text { background: linear-gradient(90deg, var(--ink2) 30%, var(--ink) 50%, var(--ink2) 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 1.8s linear infinite; }

.tgl { position: relative; width: 51px; height: 31px; border-radius: 16px; background: var(--fill3); flex: none; transition: background-color .25s; }
.tgl i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .28); transition: transform var(--d-pop) var(--e-pop), width .15s; }
.tgl.on { background: var(--toggle-on); }
.tgl.on i { transform: translateX(20px); }
.tgl:active i { width: 33px; }
.tgl.on:active i { transform: translateX(14px); }
.tgl:disabled { opacity: .4; }

.seg { position: relative; display: flex; padding: 3px; border-radius: 999px; background: var(--fill); min-height: 38px; }
.seg button { position: relative; z-index: 1; flex: 1; min-width: 0; padding: 0 8px; font-size: var(--fs-foot); font-weight: 600; border-radius: 999px; color: var(--ink2); white-space: nowrap; transition: color .2s; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.seg button.on { color: var(--ink); }
.seg button em { font-style: normal; font-weight: 500; opacity: .6; font-size: var(--fs-cap); }
.seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 2)); border-radius: 999px; background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); pointer-events: none; transform: translateX(calc(var(--i, 0) * 100%)); transition: transform var(--d-ui) var(--e-ui); }
.device[data-mode="dark"] .seg-thumb { background: var(--card2); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.seg.small { min-height: 32px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px; touch-action: pan-x; }
.chip { flex: none; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--fill); font-size: var(--fs-sub); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background-color .2s, color .2s, transform var(--d-fast) var(--e-ui); }
.chip.on { background: var(--ink); color: var(--on-ink); }
.chip:active { transform: scale(.96); }
.chip em { font-style: normal; opacity: .6; font-size: var(--fs-foot); }
.collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-soft) var(--e-soft); }
.collapse.open { grid-template-rows: 1fr; }
.collapse-in { overflow: hidden; min-height: 0; }
.collapse:not(.open) .collapse-in { visibility: hidden; transition: visibility 0s linear var(--d-soft); }

.chk { flex: none; display: inline-grid; place-items: center; }
.chk svg { width: 100%; height: 100%; overflow: visible; }
.chk-c { fill: transparent; stroke: var(--ink3); stroke-width: 1.7; transition: fill .25s, stroke .25s; }
.chk-t { fill: none; stroke: var(--on-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset .3s var(--e-ui) .06s; }
.chk.on .chk-c { fill: var(--ink); stroke: var(--ink); }
.chk.on .chk-t { stroke-dashoffset: 0; }
.chk.on svg { animation: pop .42s var(--e-pop); }
.chk.wait .chk-c { stroke: var(--warn); stroke-dasharray: 4 3.4; }
@keyframes pop { 0% { transform: scale(.78); } 100% { transform: scale(1); } }
.ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ring svg { position: absolute; inset: 0; }
.ring-t { fill: none; stroke: var(--fill3); }
.ring-v { fill: none; stroke: var(--ink); stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--e-soft); }
.ring.bad .ring-v { stroke: var(--bad); }
.ring.warn .ring-v { stroke: var(--warn); }
.ring.ok .ring-v { stroke: var(--ok); }
.ring.unmeasured .ring-t { stroke-dasharray: 2 4; stroke: var(--ink3); }
.ring b { position: relative; font-size: var(--fs-sub); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* groups + rows */
.grp-wrap { margin: 0 16px 24px; }
.grp-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 16px 7px; }
.grp-title { font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 400; color: var(--ink2); letter-spacing: -.006em; }
.grp { background: var(--card); border-radius: 22px; overflow: hidden; }
.grp-foot { margin: 8px 16px 0; font-size: var(--fs-foot); line-height: var(--lh-foot); color: var(--ink2); }
.row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: calc(var(--lh-body) + 30px); padding: 11px 16px; text-align: left; transition: background-color .35s; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--line2); }
.row:has(> .row-ic) + .row::before, .row:has(> .row-ic)::before { left: 54px; }
.row.tap:active { background: var(--fill2); transition-duration: 0s; }
.row.tall { align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
.row.center { justify-content: center; text-align: center; }
.row.center .row-main { flex: none; }
.row-ic { flex: none; color: var(--ink); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-title { font-size: var(--fs-body); line-height: var(--lh-body); }
.row-sub { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--ink2); }
.row-detail { color: var(--ink2); font-size: var(--fs-body); white-space: nowrap; }
.row-chev { color: var(--ink3); flex: none; }
.row.danger .row-title { color: var(--bad); }
.row.sel .row-title { font-weight: 600; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 32px; color: var(--ink2); }
.empty strong { color: var(--ink); font-size: var(--fs-hd); font-weight: 600; }
.empty p { font-size: var(--fs-sub); line-height: var(--lh-sub); max-width: 260px; }
.empty .btn { margin-top: 10px; }
.sep { }

/* nav pages */
.npage { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
.nbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding-top: var(--safe-top); border-radius: var(--nbar-r, var(--dev-r, 0px)) var(--nbar-r, var(--dev-r, 0px)) 0 0; background: color-mix(in srgb, var(--bg) calc(var(--c, 0) * 90%), transparent); }
.nbar[data-blur="1"] { -webkit-backdrop-filter: blur(calc(var(--c, 0) * 24px)) saturate(1.6); backdrop-filter: blur(calc(var(--c, 0) * 24px)) saturate(1.6); }
.sheet .nbar { --nbar-r: 34px; }
.nbar-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 48px; padding: 0 6px; }
.nbar-l { justify-self: start; display: flex; }
.nbar-r { justify-self: end; display: flex; align-items: center; }
.nbar-title { font-weight: 600; font-size: var(--fs-hd); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: var(--c, 0); transform: translateY(calc((1 - var(--c, 0)) * 7px)); text-align: center; }
.nbar-line { position: absolute; left: 0; right: 0; bottom: 0; height: .5px; background: var(--line2); opacity: var(--c, 0); }
.nbar-back { display: flex; align-items: center; height: 44px; padding: 0 10px 0 4px; font-size: var(--fs-body); border-radius: 22px; transition: background-color .3s; }
.nbar-back:active { background: var(--fill2); transition-duration: 0s; }
.nscroll { flex: 1; min-height: 0; padding-top: calc(var(--safe-top) + 48px); }
.lt-block { padding: 4px 20px 14px; }
.ltitle { font-size: var(--fs-lt); line-height: var(--lh-lt); font-weight: 700; letter-spacing: .012em; }
.lsub { margin-top: 3px; font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--ink2); }
.lkick { display: block; font-size: var(--fs-foot); color: var(--ink2); margin-bottom: 2px; }
.npage-pad { height: calc(var(--safe-bottom) + 28px); }

.nstack { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.nstack-page { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; transition: transform var(--d-sheet) var(--e-sheet), opacity var(--d-sheet) var(--e-sheet); will-change: transform; }
.nstack-page.entering { transform: translateX(100%); }
.nstack-page.top { transform: none; }
.nstack-page.under { transform: translateX(-26%); opacity: .55; pointer-events: none; }
.nstack-page.leaving { transform: translateX(100%); pointer-events: none; }

/* swipe rows */
.swrow { position: relative; overflow: hidden; }
.sw-actions { position: absolute; right: 0; top: 0; bottom: 0; display: flex; flex-direction: row-reverse; opacity: min(1, calc(var(--reveal, 0) * 40)); }
.sw-act { width: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: var(--fs-cap); font-weight: 600; color: #fff; background: #3a3a3a; }
.sw-act.danger { background: var(--bad); }
.sw-act.warn { background: #b0731b; }
.sw-act.ok { background: #2f8f5d; }
.sw-act.mute { background: #7a7a7a; }
.sw-in { position: relative; background: var(--card); will-change: transform; touch-action: pan-y; }
.plain-rows .sw-in { background: var(--bg); }

/* sliders + wheel */
.sslider { display: flex; align-items: center; gap: 10px; }
.ss-end { color: var(--ink2); flex: none; display: inline-grid; place-items: center; }
.ss-track { position: relative; flex: 1; height: 44px; touch-action: none; cursor: pointer; }
.ss-rail { position: absolute; left: 14px; right: 14px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--fill3); }
.ss-fill { position: absolute; left: 14px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--ink); width: 0; }
.ss-marks i { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--ink3); }
.ss-marks i.in { background: var(--on-ink); }
.ss-thumb { position: absolute; left: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .06); }
.wheel { position: relative; display: flex; justify-content: center; align-items: center; height: 180px; gap: 2px; }
.wheel-col { height: 180px; width: 74px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); }
.wheel-it { display: grid; place-items: center; scroll-snap-align: center; font-size: 23px; color: var(--ink2); font-variant-numeric: tabular-nums; cursor: pointer; transition: color .15s; }
.wheel-it.on { color: var(--ink); font-weight: 600; }
.wheel-colon { font-size: 23px; font-weight: 600; }
.wheel-band { position: absolute; left: 6px; right: 6px; top: 72px; height: 36px; border-radius: 10px; background: var(--fill); z-index: 0; pointer-events: none; }
.wheel-col, .wheel-colon { position: relative; z-index: 1; }

.calpop { padding: 8px 6px 4px; }
.calpop-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 8px; font-weight: 600; }
.calpop-head span { display: flex; gap: 2px; }
.calpop-head button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.calpop-head button:active { background: var(--fill2); }
.calpop-dow, .calpop-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.calpop-dow span { font-size: var(--fs-cap); color: var(--ink2); padding: 4px 0; font-weight: 600; }
.calpop-grid button { height: 38px; border-radius: 50%; font-size: var(--fs-sub); font-variant-numeric: tabular-nums; }
.calpop-grid button.out { color: var(--ink3); }
.calpop-grid button.today { font-weight: 700; }
.calpop-grid button.sel { background: var(--ink); color: var(--on-ink); }
.calpop-grid button:disabled { opacity: .3; }
.calpop-foot { display: flex; justify-content: space-between; padding: 6px 10px 8px; }
.calpop-foot button { font-weight: 600; padding: 6px 8px; }

.pull { overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.pull-in { padding-bottom: 10px; color: var(--ink2); }

/* rich text */
.md p { margin: 0 0 12px; }
.md p:last-child { margin-bottom: 0; }
.md ol, .md ul { margin: 0 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.md li::marker { color: var(--ink2); }
.md b { font-weight: 600; }
.md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--fill); padding: 1px 6px; border-radius: 6px; letter-spacing: 0; }
.md h5 { font-size: var(--fs-hd); font-weight: 600; margin: 14px 0 6px; }
.ref { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 7px; background: var(--fill); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--ink); vertical-align: 1px; margin: 0 1px; transition: background-color .2s, transform var(--d-fast) var(--e-ui); }
.ref:active { background: var(--fill3); transform: scale(.95); }

/* ---- brand: grape, wordmark, lockup, cold launch (marks come from js/brand.js) ---- */
.grape { overflow: visible; flex: none; }
.grape .g-d { transform-box: fill-box; transform-origin: center; }
.g-breathe .g-d { animation: g-breathe 4.2s ease-in-out infinite; animation-delay: calc(var(--ph) * -1s); }
.g-think .g-d { animation: g-think 1.15s ease-in-out infinite; animation-delay: calc(var(--ph) * -.45s); }
.g-think .g-live { fill: var(--acc, currentColor); }
@keyframes g-breathe { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(0, calc(var(--tier) * -.4px)) scale(1.06); } }
@keyframes g-think { 0%, 100% { transform: scale(1); } 38% { transform: scale(1.24); } 70% { transform: scale(.84); } }
[data-rm="1"] .g-d { animation: none !important; }
.wordmark { display: block; flex: none; }
.lockup { display: inline-flex; align-items: center; gap: calc(var(--m) * .24); color: inherit; }
.appicon { display: block; flex: none; }

.launch { position: absolute; inset: 0; z-index: 950; display: grid; place-items: center; color: var(--ink); cursor: default; background: var(--bg);
  opacity: 1; transition: opacity calc(200ms * var(--tm, 1)) var(--e-ui); }
.launch.leaving { opacity: 0; pointer-events: none; }
.launch-lockup { --m: clamp(60px, 16vw, 84px); display: inline-flex; align-items: center; gap: calc(var(--m) * .24); }
.launch-grape { height: var(--m); width: auto; aspect-ratio: 72 / 96; overflow: visible; flex: none; }
.launch-word { height: calc(var(--m) * .62); width: auto; aspect-ratio: 1620 / 448; flex: none; opacity: 0; transition: opacity calc(420ms * var(--tm, 1)) var(--e-ui); }
.launch-word.in { opacity: 1; }
[data-rm="1"] .launch, [data-rm="1"] .launch-word { transition: none; }