.account-shell { --account-border:#ffffff12; max-width:1000px; margin:auto; padding:48px 28px 72px; color:#f4f3f2; font-family:Inter,system-ui,sans-serif; }
.account-passkey-sign-in { width:100%; margin:20px 0 0; }
.account-app-consent, .account-passkeys { margin:20px 0; }
.account-app-consent p, .account-passkeys>p { line-height:1.6; color:var(--preview-muted); }
.account-app-consent strong { color:var(--preview-text); overflow-wrap:anywhere; }
.account-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.account-heading h1 { margin:0; font-size:40px; line-height:1.2; letter-spacing:-.035em; font-weight:500; }
.account-heading p { margin:10px 0 0; color:#a4a1a0; font-size:14px; }
.account-demo { color:var(--salmon-light); border:1px solid #fa807244; padding:6px 12px; border-radius:999px; font-size:12px; }
.account-preview-notice { margin:28px 0 24px; color:#a4a1a0; font-size:13px; line-height:1.6; }
.account-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.account-card { padding:26px; border:1px solid var(--account-border); border-radius:16px; background:#171616; min-width:0; display:flex; flex-direction:column; }
.account-card-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.account-card-heading h2 { margin:0; font-size:14px; font-weight:500; color:#a4a1a0; }
.account-status { font-size:11px; color:var(--salmon-light); }
.account-card h3 { margin:30px 0 0; font-size:28px; line-height:1.3; font-weight:500; letter-spacing:-.025em; }
.account-price { display:flex; align-items:baseline; gap:4px; margin:12px 0 0; }
.account-price strong { font-size:38px; line-height:1.2; font-weight:500; letter-spacing:-.03em; }
.account-price span { color:#a4a1a0; font-size:14px; }
.account-plan-summary { margin:14px 0 28px; font-size:14px; line-height:1.6; color:#a4a1a0; }
.account-details { margin:0 0 28px; font-size:12px; line-height:1.5; }
.account-details > div { display:flex; justify-content:space-between; gap:18px; padding:12px 0; border-top:1px solid var(--account-border); }
.account-details dt { color:#a4a1a0; }
.account-details dd { margin:0; text-align:right; }
.account-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:auto; padding-top:10px; font-size:13px; }
.account-shell button { cursor:pointer; }
.account-actions > button,.account-dialog-actions button { border:0; border-radius:7px; min-height:40px; padding:10px 15px; font:500 13px/20px Inter,system-ui,sans-serif; background:var(--salmon); color:var(--salmon-ink); }
.account-actions > .account-link-button { padding-inline:0; background:none; color:#a4a1a0; }
.account-actions > .account-secondary { background:#272424; color:#f4f3f2; }
.account-actions > a { color:#a4a1a0; text-decoration:none; }
.account-actions > a:hover,.account-link-button:hover { color:var(--salmon-light); }
.account-feedback { min-height:22px; margin:20px 0 0; font-size:13px; line-height:1.7; color:var(--salmon-light); }
.account-shell:not(.account-sign-in) > .account-grid { grid-template-columns:1fr; }
.account-preview-switcher { position:relative; width:fit-content; margin:24px auto 0; max-width:100%; padding:10px; border:1px solid #ffffff18; border-radius:15px; background:#1b1818f5; box-shadow:0 12px 50px #0007; backdrop-filter:blur(18px); }
.account-preview-switcher > span { display:block; text-align:center; margin-bottom:8px; color:#a4a1a0; font-size:10px; line-height:1.4; }
.account-preview-switcher [role='tablist'] { display:flex; gap:4px; }
.account-preview-switcher button { white-space:nowrap; min-height:36px; padding:8px 16px; border:0; border-radius:8px; background:none; color:#bcb7b4; font:500 12px/20px Inter,system-ui,sans-serif; }
.account-preview-switcher button[aria-selected='true'] { background:#fa8072; color:#251713; }
.account-shell :is(button,a):focus-visible { outline:2px solid var(--salmon-light); outline-offset:4px; }
.account-dialog { position:fixed; inset:0; width:min(430px,calc(100% - 32px)); padding:28px; margin:auto; max-height:calc(100dvh - 40px); overflow-y:auto; border:1px solid #ffffff20; border-radius:18px; background:#1b1818; color:#f4f3f2; box-shadow:0 28px 120px #0008; }
.account-dialog::backdrop { background:#0009; backdrop-filter:blur(5px); }
.account-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.account-dialog h2 { margin:0; font-size:24px; font-weight:500; letter-spacing:-.025em; }
.account-dialog-heading > button { border:0; background:none; color:#a4a1a0; font-size:26px; line-height:1; padding:8px; }
.account-dialog > p { color:#a4a1a0; font-size:14px; line-height:1.7; margin:18px 0 24px; }
.account-plan-choices { display:grid; gap:10px; }
.account-plan-choices button { display:flex; justify-content:space-between; gap:14px; min-height:54px; padding:15px; border:1px solid #ffffff15; border-radius:9px; background:#252020; color:#f4f3f2; font:500 14px/22px Inter,system-ui,sans-serif; text-align:left; }
.account-plan-choices button:hover { border-color:var(--salmon); }
.account-plan-choices button > span:last-child { color:var(--salmon-light); }
.account-dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.account-dialog-actions button:first-child { background:#302a28; color:#f4f3f2; }
@media(max-width:700px) { .account-shell { padding:40px 20px 64px; } .account-heading h1 { font-size:32px; } .account-grid { grid-template-columns:1fr; } .account-card { padding:23px; } .account-preview-notice { margin-top:24px; } .account-dialog { padding:24px; } }
@media(max-width:359px) { .account-preview-switcher button { padding-inline:11px; font-size:11px; } .account-card { padding:20px; } .account-status { font-size:10px; } }
/* The sign-in screen (/login). */
.account-sign-in { display:grid; place-items:center; min-height:calc(100svh - 200px); padding-top:72px; }
.account-sign-in-card { width:min(420px,100%); padding:32px; gap:0; border-radius:24px; }
.account-sign-in-card h1 { margin:0; font-size:30px; line-height:1.2; letter-spacing:-.03em; font-weight:600; }
.account-sign-in-card > p { margin:10px 0 0; color:var(--preview-muted); font-size:15px; line-height:1.5; }
.account-sign-in-form { display:grid; gap:10px; margin-top:26px; }
.account-sign-in-form label { font-size:13px; font-weight:500; color:var(--preview-muted); }
.account-sign-in-form input { height:44px; padding:0 14px; border:1px solid var(--preview-line); border-radius:12px; background:#ffffffd9; color:var(--preview-text); font:400 15px Inter,system-ui,sans-serif; }
.account-sign-in-form button { height:44px; margin-top:6px; border:0; border-radius:999px; background:#0a0a0a; color:#fff; font:500 15px Inter,system-ui,sans-serif; }
.account-sign-in-form button:hover { background:#262626; }
.account-sign-in-note { margin:20px 0 0 !important; font-size:13px !important; }
.account-sign-in-note a { color:var(--preview-link); }
.account-sign-in-privacy { margin:2px 0 0; color:var(--preview-muted); font-size:12px; line-height:1.5; }
.account-sign-in-privacy a { color:var(--preview-link); }
/* The real License page (/login): its views, the account page, devices. Colors come from theme.css. */
:root[data-account="checking"] .account-view { visibility:hidden; }
.account-shell [hidden] { display:none !important; }
.account-sign-in-card h1:focus, .account-heading h1:focus, .account-card h2:focus, .account-dialog h2:focus { outline:none; }
.account-sign-in-card > p strong { color:var(--preview-text); font-weight:600; overflow-wrap:anywhere; }
.account-notice { margin:20px 0 0; padding:12px 14px; border-radius:12px; background:color-mix(in srgb,var(--salmon) 14%,transparent); color:var(--preview-text); font-size:14px; line-height:1.5; }
.account-notice[hidden] { display:none; }
.account-dashboard > .account-notice { margin:24px 0 0; }
.account-form-error { margin:0; min-height:0; color:var(--preview-link); font-size:13px; line-height:1.5; }
.account-form-error:empty { display:none; }
.account-sign-in-form button:disabled { opacity:.6; cursor:progress; }
.account-view-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.account-primary-button, .account-secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px; border:0; border-radius:999px; font:500 15px/1 Inter,system-ui,sans-serif; text-decoration:none; cursor:pointer; }
.account-primary-button { background:#0a0a0a; color:#fff; }
.account-primary-button:hover { background:#262626; }
.account-secondary-button { background:#d4eaf4; color:var(--preview-text); }
.account-secondary-button:hover { background:#c6e2ee; }
.account-heading .account-secondary-button { min-height:38px; padding:0 18px; font-size:14px; }
.account-inline-button { padding:0; border:0; background:none; color:var(--preview-link); font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px; text-decoration-color:color-mix(in srgb,currentColor 35%,transparent); }
.account-inline-button:hover { text-decoration-color:currentColor; }
.account-inline-button:disabled { opacity:.6; cursor:progress; }
.account-email { overflow-wrap:anywhere; }
.account-dashboard { width:100%; }
/* Heading and Sign out share the first row; the email takes the full width under them, so a long one never squeezes. */
.account-dashboard .account-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:16px; }
.account-dashboard .account-heading > div { display:contents; }
.account-dashboard .account-heading .account-email { grid-area:2 / 1 / 3 / 3; margin:8px 0 0; color:var(--preview-muted); font-size:15px; }
.account-dashboard .account-heading h1 { grid-area:1 / 1; }
.account-dashboard .account-heading .account-secondary-button { grid-area:1 / 2; white-space:nowrap; }
.account-dashboard .account-grid { margin-top:32px; }
.account-dashboard > .account-notice + .account-grid { margin-top:20px; }
.account-actions > .account-primary-link { color:var(--preview-link); font-weight:500; }
.account-actions > button[hidden], .account-actions > a[hidden] { display:none; }
.account-details > div[hidden] { display:none; }
.account-devices { list-style:none; margin:22px 0 0; padding:0; }
.account-device { display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--account-border); }
.account-device:last-child { border-bottom:1px solid var(--account-border); }
.account-device-icon { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:color-mix(in srgb,var(--preview-text) 7%,transparent); }
.account-device-icon svg { width:20px; height:20px; fill:none; stroke:var(--preview-text); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.account-device-text { flex:1; min-width:0; display:grid; gap:3px; }
.account-device-text strong { font-size:15px; font-weight:500; color:var(--preview-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-device-text span { font-size:12px; line-height:1.5; color:var(--preview-muted); }
.account-device .account-inline-button { flex:none; font-size:13px; }
.account-devices-empty { margin:22px 0 28px; color:var(--preview-muted); font-size:14px; line-height:1.6; }
.account-devices-empty[hidden] { display:none; }
.account-devices:not(:empty) + .account-devices-empty + .account-actions, .account-devices:not(:empty) ~ .account-actions { padding-top:24px; }
.account-keep { margin:28px 0 0; color:var(--preview-muted); font-size:13px; line-height:1.6; }
.account-keep a, .account-sign-in-note a { color:var(--preview-link); }
.account-noscript { margin:24px auto 0; max-width:420px; color:var(--preview-muted); font-size:14px; text-align:center; }
@media(max-width:700px) { .account-heading { align-items:flex-start; } .account-view-actions > * { flex:1 1 auto; } }