:root { --bg:#f7f7f8; --card:#fff; --text:#16161a; --muted:#5d5d66; --edge:#e4e4e8; --accent:#6366f1; --accent-text:#fff; --ok:#15803d; --bad:#b91c1c; }
@media (prefers-color-scheme: dark) { :root { --bg:#141417; --card:#1f1f24; --text:#f1f1f4; --muted:#a0a0ab; --edge:#2e2e35; --ok:#4ade80; --bad:#f87171; } }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
main { max-width:880px; margin:0 auto; padding:48px 16px 64px; }
main.text { max-width:720px; }
header { display:flex; align-items:center; gap:14px; margin-bottom:40px; }
header img { width:44px; height:44px; }
header strong { font-size:20px; }
header a { color:inherit; text-decoration:none; display:flex; align-items:center; gap:14px; }
h1 { font-size:clamp(30px,6vw,46px); line-height:1.15; margin:0 0 16px; }
main.text h1 { font-size:clamp(26px,5vw,34px); }
.lead { font-size:19px; color:var(--muted); max-width:660px; margin:0 0 32px; }
.downloads { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.button { display:inline-block; padding:12px 20px; border-radius:10px; border:1px solid var(--edge); background:var(--card); color:var(--text); text-decoration:none; font-weight:600; font-size:16px; cursor:pointer; }
.button.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
.button:disabled { opacity:.6; cursor:wait; }
.note { color:var(--muted); font-size:14px; margin:0 0 48px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-bottom:48px; }
.card { background:var(--card); border:1px solid var(--edge); border-radius:12px; padding:20px; }
.card h3 { margin:0 0 6px; font-size:17px; }
.card p { margin:0; color:var(--muted); font-size:15px; }
h2 { font-size:26px; margin:0 0 16px; }
table { width:100%; border-collapse:collapse; font-size:15px; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--edge); vertical-align:top; }
th { font-weight:600; }
.scroll { overflow-x:auto; margin-bottom:48px; }
.card .price { font-size:32px; font-weight:700; margin:0 0 4px; }
.card .price s { color:var(--muted); font-size:20px; font-weight:400; margin-left:8px; }
form.buy { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
form.buy input { flex:1 1 240px; min-width:0; padding:12px 14px; border-radius:10px; border:1px solid var(--edge); background:var(--bg); color:var(--text); font-size:16px; }
.small { color:var(--muted); font-size:13px; margin-top:10px; }
.error { color:var(--bad); }
.key { font:14px/1.4 ui-monospace,Consolas,monospace; word-break:break-all; background:var(--bg); border:1px solid var(--edge); border-radius:10px; padding:14px; margin:12px 0; }
footer { color:var(--muted); font-size:14px; border-top:1px solid var(--edge); padding-top:20px; display:flex; flex-wrap:wrap; gap:16px; }
footer a, main.text a { color:inherit; }
.card.order { margin-bottom:14px; }
.card.order p { color:var(--text); }
