:root { color-scheme: light; --ink:#11110f; --muted:#6e6c64; --paper:#f4f1e8; --line:#d2cdc0; --white:#fffef9; --acid:#d8ff45; --violet:#6b5cff; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); background:linear-gradient(rgba(17,17,15,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,15,.04) 1px,transparent 1px),var(--paper); background-size:24px 24px; }
button,input { font:inherit; }
a { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid var(--violet); outline-offset:2px; }
[hidden] { display:none !important; }
.account-nav { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px clamp(18px,4vw,64px); border-bottom:1px solid rgba(17,17,15,.18); background:rgba(244,241,232,.9); backdrop-filter:blur(14px); }
.account-nav>div { display:flex; align-items:center; gap:10px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:.82rem; font-weight:800; letter-spacing:.16em; }
.brand-mark { width:27px; height:27px; display:block; flex:0 0 auto; }
.text-button { padding:10px 12px; color:var(--muted); text-decoration:none; font-size:.84rem; font-weight:700; }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 17px; border:1px solid transparent; border-radius:8px; color:var(--ink); text-decoration:none; cursor:pointer; font-size:.84rem; font-weight:800; }
.button-dark { color:var(--white); background:var(--ink); }
.button-acid { border-color:rgba(17,17,15,.18); background:var(--acid); }
.button-acid:hover { background:#cbf331; }
.button-quiet { border-color:var(--line); background:var(--white); }
.full { width:100%; }
.account-layout { width:min(1120px,calc(100% - 36px)); min-height:calc(100vh - 72px); display:grid; grid-template-columns:1fr minmax(360px,480px); align-items:center; gap:clamp(48px,8vw,110px); margin:0 auto; padding:72px 0 96px; }
.account-context { max-width:560px; }
.kicker { margin:0 0 10px; color:var(--muted); font-size:.68rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.account-context h1 { margin:0; font:400 clamp(3.4rem,7vw,7rem)/.87 Georgia,serif; letter-spacing:-.065em; }
.account-context h1 em { font-weight:400; color:var(--violet); }
.account-context>p:not(.kicker) { max-width:500px; margin:28px 0; color:var(--muted); font-size:1.08rem; line-height:1.65; }
.trust-note { display:flex; align-items:start; gap:13px; max-width:440px; padding:16px; border:1px solid var(--line); border-radius:10px; background:rgba(255,254,249,.68); }
.trust-note>span { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:var(--white); background:var(--ink); }
.trust-note strong { font-size:.86rem; }
.trust-note p { margin:4px 0 0; color:var(--muted); font-size:.78rem; line-height:1.5; }
.account-card { padding:clamp(24px,4vw,38px); border:1px solid rgba(17,17,15,.24); border-radius:16px; background:var(--white); box-shadow:0 28px 80px rgba(46,40,27,.12); }
.card-heading h2,.profile-head h2,dialog h2 { margin:0; font:400 2.25rem/1.05 Georgia,serif; letter-spacing:-.04em; }
.card-heading>p:last-child { margin:10px 0 24px; color:var(--muted); font-size:.88rem; line-height:1.5; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:22px; padding:4px; border-radius:9px; background:#ece9df; }
.auth-tabs button { min-height:38px; border:0; border-radius:6px; color:var(--muted); background:transparent; cursor:pointer; font-size:.78rem; font-weight:800; }
.auth-tabs button.is-active { color:var(--ink); background:var(--white); box-shadow:0 2px 8px rgba(17,17,15,.08); }
.account-card form { display:grid; gap:16px; }
.account-card label:not(.terms-row),.payment-fields label { display:grid; gap:7px; }
label>span { font-size:.78rem; font-weight:780; }
label small { color:var(--muted); font-size:.7rem; font-weight:500; }
input[type="text"],input[type="email"],input[type="password"] { width:100%; height:47px; padding:0 13px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; }
.error { margin:-5px 0 0; color:#b32318; font-size:.78rem; font-weight:700; }
.profile-head { display:flex; align-items:center; gap:15px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.profile-head .kicker { margin-bottom:4px; }
.profile-head h2 { font-size:1.85rem; }
.profile-head p:last-child { margin:4px 0 0; color:var(--muted); font-size:.78rem; }
.avatar { width:54px; height:54px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:var(--white); background:var(--violet); font-size:1rem; font-weight:850; }
.plan-status { display:flex; align-items:center; justify-content:space-between; margin:24px 0; padding:14px; border:1px solid var(--line); border-radius:9px; background:var(--paper); }
.plan-status div { display:grid; gap:4px; }
.plan-status div span { color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.badge { padding:6px 9px; border-radius:99px; color:#4d4a43; background:#dfdcd3; font-size:.66rem; font-weight:850; text-transform:uppercase; }
.badge.is-pro { color:#2e6719; background:#e0f5c8; }
.device-status { display:grid; gap:10px; margin:-10px 0 24px; padding:14px; border:1px solid var(--line); border-radius:9px; background:#f7f5ee; }
.device-status>div:first-child { display:flex; justify-content:space-between; gap:16px; font-size:.76rem; }
.device-status>div:first-child span { color:var(--muted); font-weight:750; text-transform:uppercase; letter-spacing:.08em; }
.slot-meter { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.slot-meter i { height:6px; border-radius:99px; background:#d8d4c9; }
.slot-meter i.is-used { background:var(--violet); }
.device-status p { margin:0; color:var(--muted); font-size:.72rem; line-height:1.45; }
.device-manager { margin:-10px 0 24px; border:1px solid var(--line); border-radius:9px; background:var(--white); }
.device-manager summary { padding:13px 14px; cursor:pointer; font-size:.78rem; font-weight:800; }
.device-manager[open] summary { border-bottom:1px solid var(--line); }
.device-list { display:grid; padding:0 14px; }
.device-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; border-bottom:1px solid var(--line); }
.device-row div { display:grid; gap:2px; }
.device-row strong { font-size:.78rem; }
.device-row span { color:var(--muted); font-size:.68rem; }
.device-row .device-actions { display:flex; align-items:center; gap:9px; }
.device-row button { border:0; color:var(--violet); background:transparent; cursor:pointer; font-size:.7rem; font-weight:750; }
.device-row button.danger-action { color:#9f2f26; }
.device-manager form { grid-template-columns:1fr auto; align-items:end; gap:8px; padding:14px; }
.device-manager form label { display:grid; gap:6px; }
.device-manager form input { height:42px; }
.device-manager form .button { min-height:42px; }
.device-manager form .device-lock-option { grid-column:1/-1; display:flex; align-items:start; gap:9px; padding:10px 11px; border:1px solid var(--line); border-radius:8px; background:#f6f3eb; cursor:pointer; }
.device-lock-option input { width:16px; height:16px!important; margin-top:2px; accent-color:var(--ink); }
.device-lock-option>span { display:grid; gap:2px; }
.device-lock-option strong { font-size:.74rem; }
.device-lock-option small { color:var(--muted); font-size:.68rem; line-height:1.35; }
.device-manager>.error { margin:0; padding:0 14px 14px; }
.addon-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px; margin:-10px 0 24px; padding:16px; border:1px solid #b7abea; border-radius:10px; background:#f0edff; }
.addon-card>div { display:grid; gap:4px; }
.addon-card span { color:#5b4da1; font-size:.64rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.addon-card h3 { margin:0; font:400 1.25rem/1.1 Georgia,serif; }
.addon-card p { margin:2px 0 0; color:#625d76; font-size:.72rem; line-height:1.45; }
.addon-card .button { white-space:nowrap; }
.profile-copy h3 { margin:0; font:400 1.55rem/1.1 Georgia,serif; }
.profile-copy p { margin:9px 0 23px; color:var(--muted); font-size:.86rem; line-height:1.55; }
.profile-actions { display:grid; gap:9px; }
.sign-out { width:100%; margin-top:19px; padding:8px; border:0; color:var(--muted); background:transparent; cursor:pointer; font-size:.74rem; text-decoration:underline; text-underline-offset:3px; }
dialog { width:min(540px,calc(100vw - 28px)); padding:0; border:1px solid rgba(17,17,15,.35); border-radius:15px; color:var(--ink); background:var(--paper); box-shadow:0 32px 100px rgba(17,17,15,.34); }
dialog::backdrop { background:rgba(17,17,15,.44); backdrop-filter:blur(5px); }
dialog form { display:grid; gap:18px; padding:26px; }
.checkout-heading { display:flex; align-items:start; justify-content:space-between; gap:18px; }
.close-button { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--white); cursor:pointer; font-size:1.35rem; }
.demo-banner { display:grid; gap:4px; padding:13px; border:1px solid #a28fe5; border-radius:8px; background:#eeeaff; }
.demo-banner strong { font-size:.84rem; }
.demo-banner span { color:#57516d; font-size:.74rem; line-height:1.4; }
.billing-options { display:grid; gap:8px; margin:0; padding:0; border:0; }
.billing-options legend { margin-bottom:2px; font-size:.78rem; font-weight:780; }
.billing-options label { min-height:58px; display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--white); cursor:pointer; }
.billing-options label:has(input:checked) { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.billing-options input { width:17px; height:17px; accent-color:var(--ink); }
.billing-options label>span { display:grid; gap:3px; }
.billing-options small { color:var(--muted); font-size:.7rem; font-weight:500; }
.billing-options b { margin-left:auto; padding:5px 7px; border-radius:99px; background:var(--acid); font-size:.62rem; text-transform:uppercase; }
.order-line { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.order-line div { display:grid; gap:4px; }
.order-line div span { color:var(--muted); font-size:.74rem; }
.order-line p { margin:0; font-size:1.35rem; font-weight:850; }
.order-line small { color:var(--muted); font-size:.72rem; font-weight:600; }
.payment-fields { display:grid; gap:13px; }
.payment-fields>div { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.terms-row { display:flex; align-items:start; gap:9px; color:var(--muted); font-size:.74rem; line-height:1.4; }
.terms-row input { margin-top:2px; accent-color:var(--ink); }
.checkout-footnote { margin:-5px 0 0; color:var(--muted); font-size:.68rem; line-height:1.45; }
.success-dialog { width:min(400px,calc(100vw - 28px)); text-align:center; }
.success-mark { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 3px; border-radius:50%; color:var(--ink); background:var(--acid); font-size:1.55rem; font-weight:900; }
.success-dialog p:not(.kicker) { margin:0 0 5px; color:var(--muted); font-size:.86rem; line-height:1.55; }
.privacy-page { width:min(960px,calc(100% - 36px)); margin:0 auto; padding:clamp(64px,9vw,120px) 0 100px; }
.privacy-page>h1 { max-width:760px; margin:0; font:400 clamp(3.2rem,8vw,6.7rem)/.9 Georgia,serif; letter-spacing:-.06em; }
.privacy-lead { max-width:620px; margin:24px 0 46px; color:var(--muted); font-size:1.12rem; line-height:1.6; }
.privacy-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.privacy-grid article { min-height:220px; padding:25px; border:1px solid var(--line); border-radius:12px; background:rgba(255,254,249,.72); }
.privacy-grid article>span { color:var(--violet); font-size:.7rem; font-weight:850; letter-spacing:.12em; }
.privacy-grid h2 { margin:38px 0 10px; font:400 1.6rem/1.1 Georgia,serif; }
.privacy-grid p,.privacy-note p { margin:0; color:var(--muted); font-size:.85rem; line-height:1.6; }
.privacy-note { display:grid; grid-template-columns:180px 1fr; gap:20px; margin:18px 0 28px; padding:22px; border-radius:10px; color:var(--white); background:var(--ink); }
.privacy-note p { color:#bbb7ae; }
@media (max-width:820px) { .account-layout { grid-template-columns:1fr; gap:40px; padding-top:48px; } .account-context { text-align:center; margin:0 auto; } .account-context h1 { font-size:clamp(3.3rem,15vw,5.6rem); } .trust-note { margin:0 auto; text-align:left; } .account-card { width:min(100%,520px); margin:0 auto; } }
@media (max-width:640px) { .privacy-grid { grid-template-columns:1fr; } .privacy-grid article { min-height:180px; } .privacy-note { grid-template-columns:1fr; gap:8px; } }
@media (max-width:520px) { .account-nav { padding:12px 14px; } .account-nav .text-button { display:none; } .account-layout { width:min(100% - 24px,1120px); padding:38px 0 64px; } .account-card { padding:22px 18px; } .addon-card { grid-template-columns:1fr; } dialog form { padding:20px 17px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.001ms !important; animation-duration:.001ms !important; } }