:root {
  --bg: #0b0d12; --bg2: #11141b; --card: #161a23; --line: #262b36; --text: #e9ebf1; --muted: #98a1b3;
  --accent: #4f8cff; --accent2: #7cc4ff; --ok: #3ecf8e; --warn: #f5a524; --bad: #ff5d5d; --gold: #ffd479;
  --radius: 14px;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text) }
a { color: var(--accent2); text-decoration: none } a:hover { text-decoration: underline }
h1 { font-size: 30px; line-height: 1.2; margin: 6px 0 18px; letter-spacing: -.01em }
h2 { font-size: 22px; margin: 32px 0 12px } h3 { font-size: 17px; margin: 18px 0 8px }
p { margin: 8px 0 }
.muted { color: var(--muted) } .small { font-size: 14px } .ok { color: var(--ok) } .warn { color: var(--warn) } .bad { color: var(--bad) }
.center { text-align: center }

/* шапка */
header.top { position: sticky; top: 0; z-index: 10; display: flex; gap: 18px; align-items: center; padding: 12px 22px; border-bottom: 1px solid var(--line); background: rgba(11,13,18,.85); backdrop-filter: blur(10px); flex-wrap: wrap }
header .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; margin-right: auto; color: var(--text) }
header nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap }
header nav a { color: var(--muted) } header nav a:hover { color: var(--text); text-decoration: none }
header nav a.user { color: var(--text); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

main { max-width: 1040px; margin: 0 auto; padding: 24px 18px 60px }
main.wide { max-width: 1180px }
footer { border-top: 1px solid var(--line); padding: 24px 22px 40px; max-width: 1040px; margin: 0 auto }
footer .cols { display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px }

/* элементы */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 14px 0 }
.card h2:first-child, .card h3:first-child { margin-top: 0 }
.msg { background: #1d2a44; border: 1px solid #2e4a7a; padding: 10px 14px; border-radius: 10px; margin: 10px 0 }
.err { background: #3a1d1d; border: 1px solid #6b2a2a; padding: 10px 14px; border-radius: 10px; margin: 10px 0 }
form.inline { display: inline }
input, select, textarea { background: #0c0e12; color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font: inherit; max-width: 100% }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent }
label { display: block; margin: 10px 0 4px; color: var(--muted); font-size: 14px }
button, .btn { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; transition: filter .15s, transform .05s }
button:hover, .btn:hover { filter: brightness(1.1); text-decoration: none } button:active, .btn:active { transform: translateY(1px) }
button.secondary, .btn.secondary { background: #262b36 } button.danger { background: #a33 }
button.small, .btn.small { padding: 6px 12px; font-size: 14px }
.btn.big { padding: 14px 26px; font-size: 18px; border-radius: 12px }
table { width: 100%; border-collapse: collapse } th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top }
th { color: var(--muted); font-weight: 500; font-size: 14px }
.code { font: 600 34px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 4px }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px }
.pill { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 13px; background: #262b36 }
.pill.premium { background: #3b2f0e; color: var(--gold) } .pill.blocked { background: #4a1c1c; color: #ff9b9b } .pill.ok { background: #123d2c; color: var(--ok) }
kbd { font: 13px ui-monospace, monospace; background: #262b36; border-radius: 6px; padding: 2px 7px }
.copy { font-size: 13px; padding: 4px 9px; vertical-align: middle }
.mono { font-family: ui-monospace, Consolas, monospace; word-break: break-all }

/* главная */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding: 28px 0 14px }
.hero h1 { font-size: 40px; margin: 0 0 14px }
.hero .lead { font-size: 18px; color: var(--muted); margin-bottom: 22px }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center }
.hero .note { margin-top: 14px; font-size: 14px; color: var(--muted) }
.shot { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6) }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 16/9 }
.gallery { margin: 26px 0 }
.gallery .shot { position: relative }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; background: linear-gradient(transparent, rgba(0,0,0,.85)); color: #fff; font-size: 15px }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px }
.thumbs button { padding: 0; background: none; border: 2px solid transparent; border-radius: 10px; overflow: hidden; opacity: .6; transition: opacity .15s }
.thumbs button img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover }
.thumbs button[aria-current="true"], .thumbs button:hover { opacity: 1; border-color: var(--accent) }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px }
.feature .ico { font-size: 26px; margin-bottom: 8px }
.feature b { display: block; margin-bottom: 4px }
.feature p { margin: 0; color: var(--muted); font-size: 15px }
.sources { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px }

/* тарифы */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: relative }
.plan.premium { border-color: #6a5420; background: linear-gradient(180deg, #1c1810, var(--card)) }
.plan .price { font-size: 28px; font-weight: 700; margin: 4px 0 10px } .plan .price small { font-size: 14px; font-weight: 400; color: var(--muted) }
.plan ul { list-style: none; padding: 0; margin: 10px 0 } .plan li { padding: 5px 0 5px 26px; position: relative }
.plan li::before { content: "✓"; position: absolute; left: 4px; color: var(--ok) } .plan li.no::before { content: "–"; color: var(--muted) } .plan li.no { color: var(--muted) }
.qswitch { display: flex; gap: 6px; background: #0c0e12; border: 1px solid var(--line); border-radius: 99px; padding: 4px; width: max-content; margin: 8px 0 14px }
.qswitch button { background: none; color: var(--muted); padding: 6px 14px; border-radius: 99px; font-weight: 500 }
.qswitch button[aria-pressed="true"] { background: #262b36; color: var(--text) }
.qbars { display: grid; gap: 8px; margin: 10px 0 }
.qbar { display: grid; grid-template-columns: 70px 1fr 90px; gap: 10px; align-items: center; font-size: 14px }
.qbar .bar { height: 10px; border-radius: 99px; background: #262b36; overflow: hidden } .qbar .bar i { display: block; height: 100%; width: var(--w); background: var(--accent); transition: width .4s, background .3s }
.qbar.locked .bar i { background: #3a3f4b } .qbar.locked .st { color: var(--muted) }
.qbar .st { text-align: right }

/* шаги и FAQ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; counter-reset: s }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 18px 58px; position: relative }
.step::before { counter-increment: s; content: counter(s); position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center }
details { border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; margin: 8px 0; background: var(--card) }
details summary { cursor: pointer; padding: 12px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px }
details summary::after { content: "+"; color: var(--muted); font-weight: 400 } details[open] summary::after { content: "–" }
details p { margin: 0 0 12px; color: var(--muted) }

/* загрузка */
.dl { display: grid; grid-template-columns: 1fr 220px; gap: 24px; align-items: start }
.dl .qr { background: #fff; border-radius: 12px; padding: 10px } .dl .qr svg { display: block; width: 100%; height: auto }
.dl .meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 15px; margin: 12px 0 } .dl .meta dt { color: var(--muted) } .dl .meta dd { margin: 0 }
pre.notes { white-space: pre-wrap; font: 14px/1.5 inherit; color: var(--muted); background: #0c0e12; border-radius: 10px; padding: 12px 14px; max-height: 260px; overflow: auto }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #262b36; color: #fff; padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s } .toast.on { opacity: 1 }

/* код ТВ */
input.tvcode { font: 600 30px ui-monospace, monospace; letter-spacing: 4px; width: 11ch; text-transform: uppercase; text-align: center }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr } .hero h1 { font-size: 32px }
  .plans { grid-template-columns: 1fr } .dl { grid-template-columns: 1fr } .dl .qr { width: 200px }
  header nav { gap: 12px; font-size: 15px }
}