:root { color-scheme: dark; --bg:#0c1422; --panel:#152337; --line:#ffffff15; --ink:#f4f8ff; --muted:#a9b8cc; --mint:#71e5c4; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:radial-gradient(ellipse at 12% 12%,#153d4129,transparent 50%),var(--bg); color:var(--ink); font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.shell { width:min(1120px,100%); margin-inline:auto; padding-inline:max(24px,env(safe-area-inset-left),env(safe-area-inset-right)); }
.header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:calc(23px + env(safe-area-inset-top)); padding-bottom:23px; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; font-size:22px; font-weight:600; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.brand strong { color:var(--mint); }.brand-mark { display:inline-grid; place-items:center; width:35px; height:35px; border:1px solid #71e5c466; border-radius:11px; margin-right:9px; color:var(--mint); font-size:23px; background:linear-gradient(145deg,#265d5b,#142b3b); box-shadow:0 5px 16px #0004; }
.header-actions { display:flex; align-items:center; gap:14px; }.test-badge { display:inline-block; color:#c0d6e9; background:#22394c; padding:6px 10px; border-radius:7px; font-size:10px; letter-spacing:.7px; font-weight:750; }
.entry { display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:center; padding-block:65px 80px; }.intro { max-width:520px; }
.eyebrow { font-size:11px; letter-spacing:2px; color:var(--mint); font-weight:700; margin:0 0 14px; }
h1 { font-size:clamp(36px,4.5vw,56px); line-height:1.13; letter-spacing:-2px; margin:0 0 24px; }h1 span { color:var(--mint); }h2 { font-size:24px; letter-spacing:-.6px; line-height:1.3; margin:0 0 12px; }
p { color:var(--muted); margin:12px 0; }.lead { font-size:17px; max-width:460px; margin-bottom:30px; }.fine { font-size:13px; }.fine strong { color:#d8e8f8; }
.benefit { display:flex; align-items:center; gap:17px; margin-block:20px; }.benefit > span { flex:0 0 43px; height:43px; display:grid; place-items:center; border:1px solid #71e5c433; border-radius:14px; color:var(--mint); font:700 17px/1 ui-monospace,monospace; }.benefit p { font-size:14px; margin:0; }.benefit strong { color:var(--ink); }
.card { background:linear-gradient(150deg,#1b2b40,#142133); border:1px solid var(--line); border-radius:24px; padding:30px; box-shadow:0 15px 40px #0002, inset 0 1px #ffffff05; }
.auth-card { padding:36px; }.auth-card > p:not(.eyebrow) { font-size:14px; }.auth-card h2 { font-size:27px; }
label { display:block; margin:22px 0 8px; font-size:14px; font-weight:600; }input { width:100%; min-width:0; min-height:50px; padding:13px 15px; background:#0d192a; border:1px solid #3b4b60; border-radius:12px; color:var(--ink); font:inherit; }
button { font:inherit; font-size:14px; font-weight:600; line-height:1.45; color:var(--ink); border:1px solid #435870; border-radius:12px; min-height:48px; padding:13px 18px; cursor:pointer; background:#22374d; }button:disabled { opacity:.47; cursor:not-allowed; }button:not(:disabled):hover { filter:brightness(1.1); }button:active:not(:disabled) { transform:translateY(1px); }.wide { width:100%; }.primary { background:var(--mint); color:#0a302e; border-color:transparent; font-weight:750; }.quiet { background:#ffffff06; }.text-button { background:none; border:none; color:var(--mint); margin-top:10px; }form .primary { margin-top:14px; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid var(--mint); outline-offset:3px; }.secure-note { color:var(--muted); font-size:12px; line-height:1.7; border-top:1px solid var(--line); padding-top:19px; margin-top:20px; }.notice { border:1px solid #71e5c444; border-left:3px solid var(--mint); background:#173336; padding:17px 20px; border-radius:12px; color:#e0fff5; margin-top:26px; overflow-wrap:anywhere; }
.dashboard-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:40px 30px; }.dashboard-heading h1 { margin-bottom:12px; font-size:42px; }.email { overflow-wrap:anywhere; margin:0; }.summary-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:20px; }.plan-card { position:relative; background:radial-gradient(ellipse at 95% 0,#2c706941,transparent 70%),linear-gradient(135deg,#193549,#132337); }.plan-card h2 { max-width:360px; font-size:30px; margin-top:24px; }.chip { display:inline-block; font-size:12px; color:var(--mint); background:#71e5c410; border:1px solid #71e5c427; padding:7px 11px; border-radius:20px; margin-top:17px; }.metric { font-size:clamp(33px,5vw,49px); line-height:1.2; font-weight:700; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }.divider { height:1px; background:var(--line); margin:19px 0; }
.billing-card { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-top:24px; padding:38px; }.billing-intro { padding-top:8px; }.billing-intro h2 { font-size:29px; }.purchase { border-left:1px solid var(--line); padding-left:38px; }.price { font-size:40px; font-weight:750; line-height:1.3; color:var(--ink); margin:0 0 14px; letter-spacing:-1px; }.price span { font-size:16px; color:var(--muted); font-weight:400; letter-spacing:0; }.purchase p:not(.price) { font-size:13px; }.manage-card { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-block:24px 50px; }.manage-card p { font-size:14px; max-width:650px; }.manage-card button { flex-shrink:0; max-width:290px; }
.footer { border-top:1px solid var(--line); padding-block:24px calc(26px + env(safe-area-inset-bottom)); display:flex; justify-content:space-between; gap:20px; color:#8192a9; font-size:12px; }.footer nav { display:flex; flex-wrap:wrap; gap:20px; }.footer a { color:#afc8db; text-underline-offset:4px; }
.delete-account { margin-block:30px 45px; padding:22px 25px; border:1px solid var(--line); border-radius:18px; color:var(--muted); font-size:13px; }.delete-account summary { cursor:pointer; min-height:35px; color:#d6a6a6; }.delete-account form { max-width:480px; }.check-label { display:flex; align-items:center; gap:12px; }.check-label input { width:20px; height:20px; min-height:20px; flex:0 0 20px; accent-color:var(--mint); }.danger { border-color:#b65f6977; background:#722a3433; color:#f1bec5; }
@media(max-width:850px) { .entry { gap:30px; padding-block:40px; }.auth-card { padding:27px; }.billing-card { gap:25px; padding:28px; }.purchase { padding-left:25px; }.manage-card { align-items:flex-start; flex-direction:column; }.manage-card button { max-width:none; } }
@media(max-width:650px) { .shell { padding-inline:max(19px,env(safe-area-inset-left),env(safe-area-inset-right)); }.header { gap:12px; flex-wrap:wrap; }.brand { font-size:20px; }.header-actions { gap:10px; flex-wrap:wrap; }.header .test-badge { font-size:9px; }.entry { display:flex; flex-direction:column; align-items:stretch; gap:30px; }.intro h1 { font-size:40px; }.intro .benefit { display:none; }.lead { margin-bottom:12px; }.auth-card { padding:27px 23px; }.dashboard-heading { align-items:flex-start; flex-direction:column; gap:10px; }.dashboard-heading h1 { font-size:36px; }.summary-grid { grid-template-columns:1fr; }.card { padding:25px; }.billing-card { grid-template-columns:1fr; gap:18px; }.purchase { border-left:0; border-top:1px solid var(--line); padding:22px 0 0; }.footer { flex-direction:column; }.metric { font-size:43px; } }
@media(prefers-reduced-motion:reduce) { button:active:not(:disabled) { transform:none; } }
select { width:100%; min-height:50px; border:1px solid #435870; border-radius:12px; padding:12px; background:#0d192a; color:var(--ink); font:inherit; }
#securityPanel { margin-block:24px; }#securityPanel form { max-width:480px; }#securityPanel summary { cursor:pointer; min-height:44px; }
#enrollmentSecret,#recoveryCodes { display:block; overflow-wrap:anywhere; white-space:pre-wrap; user-select:all; padding:15px; background:#0d192a; border-radius:12px; font-size:16px; }
#resetPanel { margin-block:32px; max-width:640px; }
.computer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:18px; margin:0 0 24px; }
.computer-card { display:flex; flex-direction:column; align-items:stretch; gap:10px; background:radial-gradient(ellipse at top left,#29544255,transparent 75%),#14252a; }
.computer-card h2 { overflow-wrap:anywhere; margin:0; }.computer-card .chip { align-self:flex-start; margin:0 0 12px; }.computer-icon { color:var(--mint); font-size:46px; line-height:1; }.computer-card .quiet { font-size:12px; }
.empty-state { padding:24px; border:1px dashed #71e5c455; border-radius:20px; text-align:center; }.upgrade-banner { display:flex; align-items:center; gap:24px; margin-bottom:24px; }.upgrade-banner strong { color:#dffff3; }.upgrade-banner p { margin:5px 0 0; font-size:14px; }.upgrade-banner button { flex-shrink:0; }
#addComputerPanel { margin-bottom:24px; }#addComputerForm { max-width:600px; }#billingBox { scroll-margin-top:24px; }
@media(max-width:650px) { .upgrade-banner { flex-direction:column; align-items:stretch; }.dashboard-heading .header-actions { width:100%; }.dashboard-heading .header-actions .primary { flex:1; } }

.account-links a { display:inline-block; color:var(--mint); padding-block:10px; font-size:14px; text-underline-offset:4px; }
.account-facts { display:grid; gap:17px; margin:24px 0 0; }.account-facts div { min-width:0; }.account-facts dt { color:var(--muted); font-size:12px; }.account-facts dd { margin:3px 0 0; font-size:14px; overflow-wrap:anywhere; }.purchase-consent { align-items:flex-start; font-size:13px; margin-block:18px; padding:14px; border:1px solid #71e5c444; border-radius:12px; }.purchase-consent input { margin-top:3px; }.dashboard-heading>div:first-child { min-width:0; }