:root { color-scheme: dark; --bg:#090e12; --panel:#0e181e; --line:#25353e; --text:#edf4f7; --muted:#a0b1b9; --accent:#39d2e2; --green:#68d8ae; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:var(--bg); color:var(--text); font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.5; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.account-shell { width:min(1180px,calc(100% - 80px)); margin-inline:auto; padding-block:24px 40px; }
.account-footer { margin-top:24px; display:flex; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:14px; }
.account-footer a { display:inline-flex; min-height:44px; align-items:center; }
.account-footer a:hover { color:var(--accent); }
.language-link { border:1px solid var(--line); border-radius:8px; padding:4px 10px; color:var(--muted); font-size:14px; }
.eyebrow { color:var(--accent); font-size:13px; letter-spacing:.13em; font-weight:600; margin:0 0 12px; }
.account-state { padding:12px; border:1px solid var(--line); background:#101b20; border-radius:8px; display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.account-state strong { font-size:15px; font-weight:600; }
.account-state p { margin:2px 0 0 18px; font-size:14px; color:var(--muted); overflow-wrap:anywhere; }
.status-dot { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--muted); margin-right:10px; }
.account-state[data-state="pro"] .status-dot,.account-state[data-state="free"] .status-dot { background:var(--green); }
.account-state[data-state="expired"] .status-dot,.account-state[data-state="error"] .status-dot { background:#f6b679; }
.account-actions { display:flex; flex-wrap:wrap; gap:8px; }
.quiet-button { border:1px solid var(--line); background:transparent; color:var(--text); border-radius:8px; padding:9px 13px; font-size:14px; }
.quiet-button:hover:not(:disabled) { border-color:#5c7785; background:#17252c; }
.purchase-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:32px; align-items:start; }
.plan-left { min-width:0; }
h2 { font-size:19px; line-height:1.4; margin:0; font-weight:600; }
.comparison { border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.comparison-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px 8px; }
.comparison-heading h1 { margin:0; font-size:19px; line-height:1.4; font-weight:600; }
table { width:100%; border-collapse:collapse; table-layout:fixed; text-align:left; font-size:14px; }
th,td { padding:15px 18px; border-bottom:1px solid var(--line); vertical-align:middle; overflow-wrap:break-word; }
th:first-child { width:40%; padding-left:22px; }
thead th { color:var(--muted); font-weight:500; }
thead th:last-child { color:var(--accent); }
tbody th { font-weight:500; }
tbody td { color:var(--muted); }
.not-included { font-size:18px; font-weight:500; }
tbody td:last-child { color:#d6edf0; background:#0d191f; }
.comparison th.pro-column { width:36%; font-size:18px; font-weight:700; color:var(--accent); background:#12323b; box-shadow:inset 0 3px 0 var(--accent); }
.comparison .pro-column { border-inline:1px solid #2b5d68; }
.comparison td.pro-column { background:#10262e; }
.comparison td.pro-exclusive { color:var(--text); font-weight:600; background:#12303a; }
.pro-benefit { display:flex; align-items:baseline; gap:8px; }
.pro-benefit > span:last-child { min-width:0; }
.pro-benefit-check { flex:0 0 auto; color:var(--accent); font-size:16px; font-weight:700; }
tbody tr:last-child>* { border-bottom:0; }
.table-note { padding:14px 22px; margin:0; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.period-section { margin-top:26px; }
.section-label { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:14px; }
.section-label p { margin:0; font-size:13px; color:var(--muted); }
.plan-stack { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.plan-card { display:flex; flex-direction:column; text-align:left; gap:8px; padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:12px; color:var(--text); position:relative; min-width:0; }
.plan-card.is-selected { border-color:var(--accent); background:#102229; }
.plan-duration { font-size:15px; }
.plan-card strong { font-size:28px; font-weight:600; line-height:1.3; white-space:nowrap; }
.plan-card small { font-size:12px; font-weight:400; color:var(--muted); }
.plan-note { font-size:12px; color:var(--muted); }
.plan-check { position:absolute; top:18px; right:15px; color:var(--accent); visibility:hidden; }
.is-selected .plan-check { visibility:visible; }
.checkout-card,.pro-access-card { padding:25px; border:1px solid var(--line); border-radius:14px; background:var(--panel); display:grid; gap:20px; position:sticky; top:24px; }
.checkout-card .eyebrow { margin:0; }
.checkout-summary { border-bottom:1px solid var(--line); padding-bottom:18px; }
.checkout-summary>div { display:flex; justify-content:space-between; gap:12px; font-size:14px; }
.checkout-summary span { color:var(--muted); }
.checkout-summary p { margin:10px 0 0; display:flex; flex-direction:column; }
.checkout-summary b { font-size:32px; line-height:1.4; font-weight:600; }
.checkout-summary em { font-size:13px; color:var(--muted); font-style:normal; }
.checkout-field { display:grid; gap:8px; font-size:14px; color:var(--muted); }
input,select { border:1px solid #38515d; background:#09141a; color:var(--text); border-radius:8px; padding:12px; width:100%; min-width:0; font-size:16px; }
input[readonly] { color:#c4d6df; border-color:var(--line); }
.provider-picker { border:0; padding:0; margin:0; display:grid; gap:10px; min-width:0; }
.provider-picker legend { color:var(--muted); font-size:14px; margin-bottom:8px; }
.provider-box { display:flex; gap:10px; text-align:left; align-items:center; color:var(--text); background:#0a141a; border:1px solid var(--line); border-radius:9px; padding:12px; width:100%; }
.provider-box.is-selected { border-color:#5c9ba7; background:#10272d; }
.provider-mark { width:30px; height:30px; background:#263b45; display:grid; place-items:center; flex-shrink:0; border-radius:6px; }
.provider-box strong { display:block; font-size:14px; font-weight:500; }
.provider-box small { font-size:12px; color:var(--muted); }
.provider-state { font-size:12px; color:var(--green); margin-left:auto; white-space:nowrap; }
.primary-pay { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; border:0; border-radius:9px; color:#07232a; background:var(--accent); font-size:15px; font-weight:600; min-height:50px; }
.checkout-status { font-size:14px; color:var(--muted); margin:0; overflow-wrap:anywhere; }
.is-error { color:#f2a4a4!important; }
.is-success { color:var(--green)!important; }
.checkout-legal { display:flex; flex-wrap:wrap; gap:16px; font-size:13px; color:var(--muted); }
.checkout-legal a:hover { color:var(--text); }
.pro-access-card { border-color:#366859; background:#0f211e; gap:18px; }
.pro-emblem { width:48px; height:48px; border:1px solid #497d6b; border-radius:50%; display:grid; place-items:center; color:var(--green); font-size:25px; }
.pro-access-card h2 { font-size:26px; }
.pro-period { color:var(--green); font-size:16px; font-weight:500; }
.pro-access-card p:not(.eyebrow) { margin:0; font-size:15px; color:var(--muted); }
.pro-unlocks { font-size:15px; padding:18px 0; border-block:1px solid #2a433b; color:#c9e1d9; }
@media(max-width:1000px) { .purchase-layout { gap:20px; grid-template-columns:minmax(0,1fr) 320px; } .account-shell { width:calc(100% - 48px); } .plan-stack { grid-template-columns:1fr; } .plan-card { display:grid; grid-template-columns:1fr 1fr; align-items:center; } .plan-note { grid-column:1/-1; } .plan-check { top:20px; } .plan-card strong { padding-right:22px; text-align:right; } }
@media(max-width:760px) { .purchase-layout { grid-template-columns:1fr; } .checkout-card,.pro-access-card { position:static; } th,td { padding:13px 12px; font-size:14px; } th:first-child { padding-left:16px; width:38%; } .section-label { flex-direction:column; gap:4px; } }
@media(max-width:480px) { .comparison th.pro-column { width:42%; } .comparison th,.comparison td { padding-inline:10px; } .comparison th:first-child { width:36%; padding-left:12px; } .pro-benefit { gap:5px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }