/* ============================================================
   Auther — shared design system (Stripe-inspired)
   Bind once. Used by every ios-*.html and mac-*.html screen.
   ============================================================ */
:root{
  --bg:#ffffff; --heading:#061b31; --body:#64748d; --label:#273951;
  --accent:#533afd; --accent-hover:#4434d4; --accent-soft:rgba(83,58,253,0.06);
  --accent-soft2:rgba(83,58,253,0.12);
  --border:#e5edf5; --border-strong:#d6dfeb; --dark:#1c1e54;
  --success:#15be53; --success-text:#108c3d; --success-soft:rgba(21,190,83,.14);
  --warn:#e5a50a; --warn-soft:rgba(229,165,10,.1);
  --danger:#df1b41; --danger-soft:rgba(223,27,65,.08); --danger-text:#c0113a;
  --surface:#f7f9fc; --surface-2:#fbfcfe;
  --font:-apple-system,"SF Pro Display",BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,SFMono-Regular,"Source Code Pro",Menlo,monospace;
  --shadow:rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px;
  --shadow-lg:rgba(50,50,93,0.25) 0px 50px 100px -20px, rgba(0,0,0,0.15) 0px 30px 60px -30px;
  --shadow-sm:rgba(23,23,23,0.08) 0px 15px 35px 0px;
  --shadow-card:rgba(50,50,93,.08) 0 6px 16px -6px, rgba(0,0,0,.04) 0 3px 8px -4px;
  /* canonical mac window — locked, shared across all mac screens */
  --win-w:1040px; --win-h:720px;
}
*{margin:0;padding:0;box-sizing:border-box}
svg{ stroke-linecap:round; stroke-linejoin:round; }
html,body{height:100%}
body{ font-family:var(--font); color:var(--heading); -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center; min-height:100dvh; }
body.ios-bg{ background:radial-gradient(120% 90% at 50% -10%, #f4f2ff 0%, #eef1f6 46%, #e7ebf1 100%); padding:24px; }
body.mac-bg{ padding:32px; background:
  radial-gradient(90% 70% at 15% 0%, #efeaff 0%, transparent 55%),
  radial-gradient(80% 70% at 100% 100%, #e6ecfb 0%, transparent 50%),
  linear-gradient(135deg,#e9edf3 0%, #dfe4ec 100%); }

/* ---------- shared type ---------- */
h1{ font-weight:300; letter-spacing:-.8px; line-height:1.1; color:var(--heading); }
.kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:500; }
.lede{ font-size:15px; font-weight:300; line-height:1.5; color:var(--body); }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.brandmark{ border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,#533afd,#665efd); box-shadow:0 10px 22px -8px rgba(83,58,253,.7); }
.brandmark svg{ width:60%; height:60%; }

/* ============================================================
   iPHONE FRAME
   ============================================================ */
.phone{ width:390px; height:844px; background:#000; border-radius:56px; padding:12px;
  box-shadow:var(--shadow), 0 0 0 2px #23252b, 0 0 0 10px #0c0d10; position:relative; flex:none; }
.screen{ width:100%; height:100%; background:var(--bg); border-radius:44px; overflow:hidden;
  position:relative; display:flex; flex-direction:column; }
.island{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:124px; height:36px;
  background:#000; border-radius:20px; z-index:10; }
.statusbar{ height:54px; flex:none; display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 30px 8px; position:relative; z-index:5; }
.statusbar .time{ font-size:15px; font-weight:600; letter-spacing:-.2px; color:var(--heading); }
.statusbar .icons{ display:flex; align-items:center; gap:7px; }
.home-ind{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:134px; height:5px;
  border-radius:3px; background:#061b31; opacity:.85; z-index:20; }
/* ios nav */
.ios-nav{ display:flex; align-items:center; justify-content:space-between; padding:6px 16px 4px; flex:none;
  min-height:44px; }
.ios-nav .title{ font-size:17px; font-weight:600; letter-spacing:-.3px; }
.ios-nav .lg-title{ font-size:32px; font-weight:300; letter-spacing:-1px; padding:2px 20px 6px; }
.ios-nav button, .navbtn{ display:flex; align-items:center; gap:3px; background:none; border:0; font:inherit;
  font-size:16px; color:var(--accent); cursor:pointer; padding:8px 6px; border-radius:6px; min-height:44px; }
.ios-nav button svg, .navbtn svg{ width:18px; height:18px; stroke:var(--accent); stroke-width:2.4; fill:none; }
.iconbtn{ width:40px; height:40px; display:grid; place-items:center; background:none; border:0; cursor:pointer;
  border-radius:8px; }
.iconbtn svg{ width:22px; height:22px; stroke:var(--accent); stroke-width:1.9; fill:none; }
.iconbtn:hover{ background:var(--accent-soft); }
/* ios scroll body */
.ios-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.ios-body::-webkit-scrollbar{ display:none; }
.ios-pad{ padding:8px 20px 20px; }
/* ios bottom tab bar */
.tabbar{ flex:none; display:flex; padding:8px 8px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border); background:rgba(255,255,255,.94); backdrop-filter:blur(12px); }
.tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none;
  color:var(--body); font-size:10px; font-weight:500; letter-spacing:.1px; padding:6px 0; border-radius:8px; }
.tabbar a svg{ width:25px; height:25px; stroke:var(--body); stroke-width:1.8; fill:none; }
.tabbar a.on{ color:var(--accent); }
.tabbar a.on svg{ stroke:var(--accent); }

/* ============================================================
   MAC WINDOW + 3-PANE
   ============================================================ */
.window{ width:var(--win-w); height:var(--win-h); background:var(--bg); border-radius:12px;
  box-shadow:var(--shadow-lg), 0 0 0 .5px rgba(6,27,49,.12); overflow:hidden;
  display:flex; flex-direction:column; position:relative; }
.titlebar{ height:44px; flex:none; display:flex; align-items:center; padding:0 16px;
  border-bottom:1px solid var(--border); background:var(--surface-2); position:relative; gap:16px; }
.lights{ display:flex; gap:8px; }
.lights span{ width:12px; height:12px; border-radius:50%; display:block; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12); }
.lights .r{ background:#ff5f57; } .lights .y{ background:#febc2e; } .lights .g{ background:#28c840; }
.titlebar .tb-title{ position:absolute; left:50%; transform:translateX(-50%); font-size:13px;
  font-weight:500; color:var(--label); letter-spacing:-.1px; display:flex; align-items:center; gap:8px; }
.titlebar .tb-tools{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.toolbtn{ height:28px; padding:0 10px; display:flex; align-items:center; gap:6px; background:#fff;
  border:1px solid var(--border); border-radius:7px; font:inherit; font-size:12.5px; font-weight:500;
  color:var(--label); cursor:pointer; transition:border-color .15s,color .15s; }
.toolbtn svg{ width:15px; height:15px; stroke:currentColor; stroke-width:1.9; fill:none; }
.toolbtn:hover{ border-color:var(--accent); color:var(--accent); }
.toolbtn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.toolbtn.primary:hover{ background:var(--accent-hover); }
/* 3-pane */
.pane3{ flex:1; display:flex; overflow:hidden; }
.sidebar{ width:216px; flex:none; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:12px 10px; overflow-y:auto; }
.sidebar .sb-group{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--body); padding:12px 10px 6px; }
.sidebar a, .sb-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px;
  text-decoration:none; color:var(--label); font-size:13.5px; font-weight:500; cursor:pointer;
  transition:background .12s; margin-bottom:1px; }
.sidebar a svg, .sb-item svg{ width:17px; height:17px; stroke:var(--body); stroke-width:1.9; fill:none; flex:none; }
.sidebar a:hover, .sb-item:hover{ background:var(--accent-soft); }
.sidebar a.on, .sb-item.on{ background:var(--accent-soft2); color:var(--accent); }
.sidebar a.on svg, .sb-item.on svg{ stroke:var(--accent); }
.sidebar a .count{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--body); }
.listpane{ width:300px; flex:none; border-right:1px solid var(--border); display:flex; flex-direction:column;
  overflow:hidden; }
.listpane .lp-head{ padding:14px 16px 10px; border-bottom:1px solid var(--border); }
.listpane .lp-scroll{ flex:1; overflow-y:auto; padding:8px; }
.detailpane{ flex:1; overflow-y:auto; background:var(--bg); }
.mac-empty{ flex:1; display:grid; place-items:center; color:var(--body); }

/* ============================================================
   COMPONENTS (platform-agnostic)
   ============================================================ */
.card{ background:#fff; border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-card);
  padding:16px; }
.card.flat{ box-shadow:none; }
/* item row */
.row{ display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--border);
  border-radius:8px; background:#fff; cursor:pointer; transition:border-color .12s, background .12s;
  text-decoration:none; color:inherit; }
.row:hover{ border-color:var(--border-strong); background:var(--surface-2); }
.row.on{ border-color:var(--accent); background:var(--accent-soft); }
.row .ico{ width:36px; height:36px; border-radius:8px; flex:none; display:grid; place-items:center;
  font-weight:600; font-size:14px; color:#fff; }
.row .meta{ flex:1; min-width:0; }
.row .meta b{ display:block; font-size:13.5px; font-weight:500; color:var(--heading); letter-spacing:-.1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .meta span{ font-size:12px; color:var(--body); }
.row .dots{ font-family:var(--mono); font-size:15px; color:var(--label); letter-spacing:2px; }
.row .chev{ width:16px; height:16px; stroke:#b3c1d1; stroke-width:2.2; fill:none; flex:none; }
/* fields */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:500; color:var(--label); margin-bottom:7px; }
.inputwrap{ position:relative; }
input.txt, .inputwrap input, textarea.txt{ width:100%; font:inherit; font-size:15px; color:var(--heading);
  background:#fff; border:1px solid var(--border); border-radius:8px; padding:13px 14px; transition:border-color .15s, box-shadow .15s; }
input.txt:focus, .inputwrap input:focus, textarea.txt:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); }
.inputwrap input{ padding-right:46px; }
.inputwrap input::placeholder, input.txt::placeholder{ color:#9fb0c4; }
.inputwrap.bad input{ border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft); }
.inputwrap.ok input{ border-color:var(--success); }
.mono-input{ font-family:var(--mono); letter-spacing:.5px; }
.reveal{ position:absolute; top:50%; right:6px; transform:translateY(-50%); width:38px; height:38px;
  display:grid; place-items:center; background:none; border:0; cursor:pointer; border-radius:8px; }
.reveal svg{ width:20px; height:20px; stroke:var(--body); stroke-width:1.8; fill:none; }
.reveal:hover svg{ stroke:var(--accent); }
/* buttons */
.cta{ width:100%; border:0; cursor:pointer; font:inherit; font-size:16px; font-weight:400; color:#fff;
  background:var(--accent); border-radius:8px; padding:14px; letter-spacing:-.1px; min-height:50px;
  transition:background .2s, opacity .2s; }
.cta:hover{ background:var(--accent-hover); }
.cta:disabled{ background:var(--border-strong); color:var(--label); cursor:not-allowed; }
.cta.sm{ min-height:0; padding:11px 22px; width:auto; font-size:14px; font-weight:500; }
.btn-ghost{ border:1px solid var(--border); background:#fff; cursor:pointer; font:inherit; font-size:15px;
  color:var(--label); border-radius:8px; padding:13px; transition:border-color .2s, color .2s; }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-ghost.sm{ padding:10px 18px; font-size:14px; }
.btn-danger{ color:var(--danger-text); border-color:rgba(223,27,65,.3); }
.btn-danger:hover{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }
.link{ color:var(--accent); text-decoration:none; cursor:pointer; font-weight:500; }
.link:hover{ text-decoration:underline; }
/* badges & pills */
.badge{ font-size:10.5px; font-weight:500; padding:2px 8px; border-radius:5px; background:var(--accent-soft2);
  color:var(--accent); font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:4px; }
.badge.green{ background:var(--success-soft); color:var(--success-text); }
.badge.warn{ background:var(--warn-soft); color:#a4750a; }
.badge.danger{ background:var(--danger-soft); color:var(--danger-text); }
.badge.pro{ background:linear-gradient(135deg,#533afd,#7c5cff); color:#fff; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--border);
  border-radius:20px; font-size:12.5px; font-weight:500; color:var(--label); background:#fff; cursor:pointer; }
.chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* search */
.search{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:9px; padding:9px 12px; }
.search svg{ width:17px; height:17px; stroke:var(--body); stroke-width:2; fill:none; flex:none; }
.search input{ flex:1; border:0; background:none; font:inherit; font-size:14px; color:var(--heading); }
.search input:focus{ outline:none; }
.search input::placeholder{ color:#9fb0c4; }
/* section label */
.sec-label{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--body);
  margin:20px 4px 8px; }
/* list group */
.lgroup{ background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.lgroup .li{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-bottom:1px solid var(--border);
  cursor:pointer; transition:background .12s; }
.lgroup .li:last-child{ border-bottom:0; }
.lgroup .li:hover{ background:var(--surface-2); }
.lgroup .li .k{ font-size:14px; font-weight:500; color:var(--heading); flex:1; }
.lgroup .li .v{ font-size:13.5px; color:var(--body); font-family:var(--mono); }
.lgroup .li svg.chev{ width:16px; height:16px; stroke:#b3c1d1; stroke-width:2.2; fill:none; }
/* toggle */
.toggle{ width:46px; height:28px; border-radius:16px; background:var(--border-strong); position:relative;
  cursor:pointer; transition:background .22s; flex:none; border:0; }
.toggle::after{ content:""; position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2); transition:transform .22s; }
.toggle.on{ background:var(--success); }
.toggle.on::after{ transform:translateX(18px); }
/* ---------- TOTP code + ring ---------- */
.code{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500; letter-spacing:5px;
  color:var(--heading); line-height:1; display:inline-flex; gap:12px; }
.ring{ --p:100; width:44px; height:44px; border-radius:50%; flex:none;
  background:conic-gradient(var(--accent) calc(var(--p)*1%), var(--border) 0); display:grid; place-items:center; }
.ring::after{ content:attr(data-t); width:34px; height:34px; border-radius:50%; background:#fff;
  display:grid; place-items:center; font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums;
  color:var(--label); }
.ring.warn{ background:conic-gradient(var(--danger) calc(var(--p)*1%), var(--border) 0); }
/* strength meter */
.meter .bars{ display:flex; gap:5px; }
.meter .bars span{ flex:1; height:5px; border-radius:3px; background:var(--border); transition:background .3s; }
.meter .cap{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.meter .cap b{ font-size:12.5px; font-weight:500; }
.meter .cap small{ font-size:11.5px; color:var(--body); font-family:var(--mono); }
/* checklist */
.checks{ display:grid; grid-template-columns:1fr 1fr; gap:9px 16px; }
.chk{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--body); transition:color .2s; }
.chk .box{ width:17px; height:17px; border-radius:50%; border:1.6px solid var(--border); flex:none;
  display:grid; place-items:center; transition:all .2s; }
.chk .box svg{ width:10px; height:10px; stroke:#fff; stroke-width:3; fill:none; opacity:0; transition:opacity .2s; }
.chk.on{ color:var(--success-text); }
.chk.on .box{ background:var(--success); border-color:var(--success); }
.chk.on .box svg{ opacity:1; }
/* warning banner */
.warn-box{ display:flex; gap:11px; padding:13px 14px; border-radius:8px; background:var(--warn-soft);
  border:1px solid rgba(229,165,10,.3); }
.warn-box svg{ width:20px; height:20px; stroke:var(--warn); stroke-width:1.9; fill:none; flex:none; margin-top:1px; }
.warn-box p{ font-size:12.5px; line-height:1.45; color:var(--label); }
.warn-box p b{ font-weight:600; color:var(--heading); }

/* ---------- iOS sheet (bottom modal) ---------- */
.scrim{ position:absolute; inset:0; background:rgba(6,27,49,.32); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .35s; z-index:30; }
.scrim.show{ opacity:1; pointer-events:auto; }
.sheet{ position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:22px 22px 0 0;
  padding:10px 22px calc(26px + env(safe-area-inset-bottom)); transform:translateY(102%);
  transition:transform .4s cubic-bezier(.32,.72,0,1); z-index:31; max-height:92%; overflow-y:auto;
  box-shadow:0 -20px 50px -20px rgba(50,50,93,.35); }
.sheet.show{ transform:translateY(0); }
.sheet::-webkit-scrollbar{ display:none; }
.grab{ width:38px; height:5px; border-radius:3px; background:var(--border); margin:0 auto 18px; }
.sheet h2{ font-size:22px; font-weight:300; letter-spacing:-.5px; }
.sheet .sub{ font-size:14px; color:var(--body); line-height:1.5; margin-top:8px; font-weight:300; }

/* ---------- Mac dialog (centered modal) ---------- */
.mscrim{ position:absolute; inset:0; background:rgba(6,27,49,.28); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .3s; z-index:30; display:grid; place-items:center; }
.mscrim.show{ opacity:1; pointer-events:auto; }
.dialog{ width:440px; max-width:90%; background:#fff; border-radius:14px; padding:28px 30px;
  box-shadow:var(--shadow-lg); transform:scale(.94); transition:transform .3s cubic-bezier(.32,.72,0,1);
  border:.5px solid rgba(6,27,49,.1); max-height:88%; overflow-y:auto; }
.mscrim.show .dialog{ transform:scale(1); }
.dialog h3{ font-size:19px; font-weight:400; letter-spacing:-.3px; }
.dialog p.sub{ font-size:13.5px; color:var(--body); line-height:1.5; margin-top:8px; font-weight:300; }

/* ---------- biometric icons ---------- */
.bio-ico{ border-radius:20px; display:grid; place-items:center; background:var(--accent-soft);
  border:1px solid var(--border); }
.bio-ico svg{ stroke:var(--accent); stroke-width:1.6; fill:none; }

/* ---------- toast ---------- */
.toast{ position:absolute; left:50%; bottom:110px; transform:translate(-50%,20px); z-index:40;
  background:var(--dark); color:#fff; font-size:13px; padding:11px 18px; border-radius:10px;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:8px; white-space:nowrap; }
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast svg{ width:16px; height:16px; stroke:var(--success); stroke-width:2.5; fill:none; }
.mac-toast{ bottom:26px; }

/* ---------- empty state ---------- */
.empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:40px 30px; }
.empty .ill{ width:96px; height:96px; border-radius:24px; display:grid; place-items:center; margin-bottom:12px;
  background:var(--accent-soft); border:1px solid var(--border); }
.empty .ill svg{ width:48px; height:48px; stroke:var(--accent); stroke-width:1.4; fill:none; }
.empty h2{ font-size:22px; font-weight:300; letter-spacing:-.5px; }
.empty p{ font-size:14px; color:var(--body); line-height:1.5; max-width:280px; font-weight:300; }

/* utilities */
.stack{ display:flex; flex-direction:column; }
.between{ display:flex; align-items:center; justify-content:space-between; }
.center{ display:flex; align-items:center; }
.gap8{ gap:8px } .gap12{ gap:12px } .gap16{ gap:16px }
.mt8{ margin-top:8px } .mt16{ margin-top:16px } .mt24{ margin-top:24px }
.muted{ color:var(--body) } .tnum{ font-variant-numeric:tabular-nums }
.hide{ display:none !important; }