/* Сайт Algoth: та же палитра, что у приложения (Theme.swift). */
:root { --bg:#080a0f; --surface:#0d1117; --panel:#121721; --chip:#161c27; --ink:#e1e7f5; --muted:#9aa5be;
        --dim:#7a8599; --bid:#00f59b; --ask:#ff4969; --accent:#6366f1; --rule:rgba(255,255,255,.08); }
* { box-sizing:border-box }
html,body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif }
a { color:var(--accent) }
.wrap { max-width:960px; margin:0 auto; padding:16px }
header.top { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--rule) }
header.top .brand { font-weight:800; font-size:20px; letter-spacing:.02em; color:var(--ink); text-decoration:none }
header.top nav a { margin-left:16px; color:var(--muted); text-decoration:none; font-size:14px }
header.top nav a:hover { color:var(--ink) }
.hero { padding:56px 0 32px }
.hero h1 { font-size:clamp(28px,5vw,44px); line-height:1.15; margin:0 0 12px; max-width:22ch }
.hero p { color:var(--muted); max-width:60ch; font-size:17px; margin:0 0 24px }
.stores { display:flex; gap:12px; flex-wrap:wrap }
.store { display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#0b0d12; border-radius:12px; padding:10px 16px; text-decoration:none; font-weight:600; min-height:48px }
.store.soon { background:var(--chip); color:var(--muted); cursor:default }
.store small { display:block; font-weight:400; font-size:11px; opacity:.75; line-height:1 }
.store svg { width:22px; height:22px }
.panel { background:var(--panel); border:1px solid var(--rule); border-radius:16px; padding:16px; margin:14px 0 }
.panel h2, .panel h3 { margin:0 0 8px; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted) }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.kv { display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:3px 0; border-bottom:1px dashed var(--rule) }
.kv b { font-weight:500; color:var(--muted) }
.mono { font-family:ui-monospace,Menlo,monospace }
.note { color:var(--muted); font-size:13px }
.bad { color:var(--ask) } .good { color:var(--bid) }
.pill { display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; background:var(--chip); color:var(--muted); margin-right:6px }
.pill.live { background:rgba(255,73,105,.15); color:var(--ask) }
.pill.ok { background:rgba(0,245,155,.12); color:var(--bid) }
button, .btn { font:inherit; background:var(--chip); color:var(--ink); border:1px solid var(--rule); border-radius:10px; padding:8px 14px; cursor:pointer }
button.primary { background:var(--accent); border-color:transparent; color:#fff }
button.danger { color:var(--ask) }
button:disabled { opacity:.5; cursor:default }
input, select { font:inherit; background:var(--chip); color:var(--ink); border:1px solid var(--rule); border-radius:10px; padding:8px 12px; width:100%; max-width:420px }
label { display:block; font-size:13px; color:var(--muted); margin:8px 0 4px }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:8px }
.card { background:var(--chip); border-radius:12px; padding:12px; margin:8px 0 }
.msg { padding:10px 12px; border-radius:10px; background:rgba(255,73,105,.12); color:var(--ask); margin:10px 0; white-space:pre-wrap }
.msg.ok { background:rgba(0,245,155,.1); color:var(--bid) }
.apple { display:inline-flex; align-items:center; gap:10px; background:#fff; color:#000; border-radius:10px; padding:10px 18px; font-weight:600; cursor:pointer; border:0; min-height:44px }
.doc h1 { font-size:24px } .doc h2 { font-size:17px; margin-top:22px } .doc table { border-collapse:collapse; font-size:13px } .doc td, .doc th { border:1px solid var(--rule); padding:6px 8px; text-align:left; vertical-align:top }
footer { color:var(--dim); font-size:12px; padding:30px 0; border-top:1px solid var(--rule); margin-top:40px }
footer a { color:var(--dim) }
.hide { display:none }

.deps { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 8px }
.deps button { padding:5px 12px; border-radius:999px; font-size:13px; color:var(--muted) }
.deps button[aria-selected="true"] { background:var(--accent); border-color:transparent; color:#fff }
/* Главная: лучшая стратегия (одна серия — цвет знака итога), плитки, рейтинг */
.featured { padding:20px }
.feat-head { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start }
.feat-title { font-size:22px; font-weight:700; margin-top:2px }
.hero-num { text-align:right } .hero-num span { font:700 36px/1.1 ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums } .hero-num small { display:block; color:var(--muted); font-size:12px }
.chart-wrap { position:relative; margin:14px 0 6px } .chart-wrap svg { width:100%; height:240px; display:block }
.chart-wrap .grid-line { stroke:var(--rule); stroke-width:1 } .chart-wrap .axis-text { fill:var(--dim); font-size:11px; font-family:ui-monospace,Menlo,monospace }
.chart-wrap .line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round } .chart-wrap .area { opacity:.12 }
.chart-wrap .cross { stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3 } .chart-wrap .dot { stroke:var(--bg); stroke-width:2 }
.tip { position:absolute; pointer-events:none; background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:6px 10px; font-size:12px; font-family:ui-monospace,Menlo,monospace; white-space:nowrap; transform:translate(-50%,-110%) }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:12px }
.tile { background:var(--chip); border-radius:12px; padding:10px 12px } .tile b { display:block; font:600 18px/1.2 ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums } .tile small { color:var(--muted); font-size:11px }
.tw { overflow-x:auto } table.rank { width:100%; border-collapse:collapse; font-size:14px } table.rank th, table.rank td { padding:8px 10px; border-bottom:1px solid var(--rule); text-align:left; white-space:nowrap }
table.rank th { color:var(--muted); font-weight:500; font-size:12px } table.rank .num { text-align:right; font-family:ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums }
table.rank tr.top td { background:rgba(99,102,241,.08) }