:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f7f7f8;
  --text: #242529;
  --muted: #696d76;
  --line: #e3e4e8;
  --selected: #eaf4ef;
  --accent: #23765b;
}
:root[data-theme="dark"] { color-scheme: dark; --bg:#1d1e22; --surface:#26272c; --text:#ededf0; --muted:#acafb9; --line:#3b3d45; --selected:#243931; --accent:#9ed6bc; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --bg:#1d1e22; --surface:#26272c; --text:#ededf0; --muted:#acafb9; --line:#3b3d45; --selected:#243931; --accent:#9ed6bc; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family: -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
button,a { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
.page-shell { width:min(1120px,calc(100% - 48px)); margin:auto; padding:0 0 48px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); }
.brand-lockup { display:flex; align-items:center; gap:16px; }
.brand-logo { width:140px; height:auto; padding:9px; background:#1a202a; border-radius:8px; }
.brand-copy { display:flex; flex-direction:column; gap:4px; }
.brand-copy strong { font-size:14px; font-weight:600; }
.brand-copy span { color:var(--muted); font-size:11px; }
.nav-actions,.status-actions { display:flex; flex-wrap:wrap; gap:8px; }
.ghost-btn,.primary-btn { min-height:40px; padding:10px 16px; display:inline-flex; justify-content:center; align-items:center; text-decoration:none; border-radius:999px; font-size:13px; font-weight:550; border:1px solid var(--line); background:transparent; color:var(--text); transition:background 160ms; }
.ghost-btn:hover:not(:disabled) { background:var(--surface); }
.primary-btn { background:var(--text); color:var(--bg); border-color:transparent; }
.primary-btn:hover:not(:disabled) { opacity:.85; }
button:disabled { cursor:default; opacity:.6; }
button:focus-visible,a:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.hero { display:grid; grid-template-columns:1fr; gap:28px; margin:42px 0; }
.hero-panel { text-align:center; padding:0 20px; }
.eyebrow { color:var(--muted); font-size:12px; font-weight:500; margin-bottom:12px; }
h1 { font-size:clamp(28px,4vw,40px); letter-spacing:-.045em; line-height:1.15; font-weight:600; margin:0 0 14px; }
.hero-copy { max-width:540px; margin:auto; color:var(--muted); font-size:14px; line-height:1.7; }
.status-panel { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; padding:22px 24px; border:1px solid var(--line); border-radius:18px; }
.current-plan-badge { display:grid; place-items:center; padding:10px 13px; min-width:52px; border-radius:12px; background:var(--surface); font-size:12px; font-weight:600; }
.status-panel h2 { margin:0 0 5px; font-size:16px; font-weight:550; letter-spacing:-.3px; }
.status-meta { font-size:12px; color:var(--muted); margin:0; overflow-wrap:anywhere; line-height:1.6; }
.status-grid { grid-column:2 / -1; grid-row:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; border-top:1px solid var(--line); padding-top:16px; }
.status-cell .label { display:block; font-size:11px; color:var(--muted); margin-bottom:5px; }
.status-cell strong { font-size:12px; font-weight:500; }
.status-actions { grid-column:3; grid-row:1; }
.notice { display:none; padding:18px 20px; margin-bottom:28px; border-radius:14px; border:1px solid var(--line); background:var(--surface); font-size:13px; line-height:1.6; }
.notice.show { display:block; }
.notice strong { display:block; margin-bottom:4px; font-weight:600; }
.notice div { color:var(--muted); }
.plans-header { display:flex; justify-content:space-between; margin-bottom:20px; }
.plans-header h2 { margin:0 0 6px; font-size:20px; font-weight:550; letter-spacing:-.5px; }
.plans-header p { margin:0; color:var(--muted); font-size:13px; }
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.plan-card { display:flex; flex-direction:column; gap:16px; padding:26px 24px; border:1px solid var(--line); border-radius:20px; background:var(--bg); min-width:0; }
.plan-card.pro { background:var(--surface); }
.plan-card.is-current { border-color:var(--accent); }
.plan-ribbon { align-self:flex-start; font-size:11px; font-weight:500; color:var(--muted); }
.plan-card.pro .plan-ribbon { color:var(--accent); }
.plan-title h3 { margin:0 0 18px; font-size:22px; letter-spacing:-.6px; font-weight:550; }
.plan-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; }
.plan-price strong { font-size:32px; font-weight:600; letter-spacing:-1px; }
.plan-price span { color:var(--muted); font-size:12px; }
.plan-summary { color:var(--muted); font-size:13px; line-height:1.6; margin:0; min-height:62px; }
.feature-list { list-style:none; padding:18px 0 0; margin:0; border-top:1px solid var(--line); display:grid; gap:16px; }
.feature-list li { position:relative; padding-left:22px; color:var(--muted); font-size:12px; line-height:1.6; }
.feature-list li::before { content:'✓'; position:absolute; top:0; left:0; color:var(--text); }
.feature-list strong { display:block; color:var(--text); font-size:13px; font-weight:500; margin-bottom:3px; }
.feature-list a { color:var(--muted); text-underline-offset:3px; }
.plan-actions { margin-top:auto; padding-top:8px; display:grid; gap:12px; }
.plan-actions button { width:100%; }
.plan-note { color:var(--muted); font-size:11px; line-height:1.65; }
.plan-current-note { display:none; color:var(--accent); font-size:11px; line-height:1.5; }
.plan-card.is-current .plan-current-note { display:block; }
.footer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:40px; padding-top:26px; border-top:1px solid var(--line); }
.footer-grid h3 { font-size:13px; font-weight:550; margin:0 0 9px; }
.footer-grid p { color:var(--muted); font-size:12px; line-height:1.8; margin:0; }
@media(max-width:900px) { .status-panel { grid-template-columns:auto minmax(0,1fr); } .status-actions { grid-column:2; grid-row:3; } .status-grid { grid-column:1 / -1; } .plan-card { padding:22px 18px; } .brand-copy span { display:none; } }
@media(max-width:680px) { .page-shell { width:calc(100% - 32px); } .topbar { flex-wrap:wrap; padding:18px 0; gap:16px; } .brand-copy { display:none; } .brand-logo { width:125px; } .nav-actions { gap:6px; } .nav-actions .ghost-btn { font-size:11px; padding:8px 10px; min-height:36px; } .hero { margin:30px 0; } .hero-panel { padding:0; } .status-panel { padding:18px; gap:14px; } .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .status-actions { grid-column:1 / -1; } .plan-grid,.footer-grid { grid-template-columns:1fr; } .plan-card { padding:24px; } .plan-summary { min-height:0; } .footer-grid { gap:24px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none !important; } }