/* tok.re — единая тёмная тема лендинга и личного кабинета.
   Палитра наследована от sub_stub_page (mods/sub.php): тёмный фон, emerald-акцент. */
:root{
  --bg:#0f1226; --bg2:#0b0e20; --card:#1a1f3d; --card2:#141831;
  --line:#262c52; --line2:#38406f;
  --tx:#e8eaf3; --mut:#9aa3cf; --mut2:#5f6691;
  --acc:#22c55e; --acc-d:#06310f; --acc-soft:#13251a;
  --ghost:#232a52; --badge:#2a3160; --badge-tx:#cdd3f7;
  --blue:#6c8cff;
  --radius:16px; --radius-sm:12px;
  --shadow:0 12px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#1a1f3d 0%,var(--bg) 55%) no-repeat,var(--bg);
  color:var(--tx); min-height:100vh; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:560px;margin:0 auto;padding:22px 16px 48px}
.wrap.narrow{max-width:460px}

/* шапка */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 2px 22px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:17px;letter-spacing:-.01em}
.brand img{height:26px;width:auto;border-radius:7px;display:block}
.brand b{color:var(--acc)}
.top .nav{font-size:13.5px;color:var(--mut);text-decoration:none;padding:7px 12px;border:1px solid var(--line2);border-radius:999px}
.top .nav:active{border-color:var(--blue)}

/* hero */
.hero{text-align:center;margin:8px 0 26px}
.hero .kicker{display:inline-block;background:var(--badge);color:var(--badge-tx);border-radius:999px;padding:6px 14px;font-size:12.5px;margin-bottom:16px;letter-spacing:.02em}
.hero h1{font-size:30px;line-height:1.12;margin:0 0 12px;font-weight:800;letter-spacing:-.02em}
.hero h1 .g{color:var(--acc)}
.hero p{font-size:15.5px;color:var(--mut);margin:0 auto;max-width:420px}

/* карточка */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px;box-shadow:var(--shadow);margin:0 0 16px}
.card h2{font-size:18px;margin:0 0 14px;font-weight:700}
.card .sub{font-size:13.5px;color:var(--mut);margin:-6px 0 16px}

/* фичи */
.feats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 6px}
.feat{background:var(--card2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 13px}
.feat .ico{font-size:20px;margin-bottom:6px}
.feat .t{font-size:14px;font-weight:600;margin-bottom:3px}
.feat .d{font-size:12.5px;color:var(--mut)}

/* кнопки */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;text-decoration:none;
  border:0;cursor:pointer;border-radius:13px;padding:15px 16px;font-size:15.5px;font-weight:600;
  margin:9px 0;font-family:inherit;transition:transform .06s ease}
.btn:active{transform:scale(.99)}
.btn.green{background:var(--acc);color:var(--acc-d);box-shadow:0 6px 18px rgba(34,197,94,.28)}
.btn.ghost{background:var(--ghost);color:var(--badge-tx);border:1px solid var(--line2)}
.btn.tg{background:#229ed9;color:#fff;box-shadow:0 6px 18px rgba(34,158,217,.28)}
.btn.block{width:100%}
.btn.lg{padding:17px 16px;font-size:16px}

/* поля ввода */
.field{margin:10px 0}
.field label{display:block;font-size:12.5px;color:var(--mut);margin:0 0 6px}
.input{width:100%;background:var(--card2);border:1px solid var(--line2);border-radius:12px;
  color:var(--tx);font-size:16px;padding:14px 14px;font-family:inherit;outline:none}
.input:focus{border-color:var(--blue)}
.input.code{letter-spacing:.5em;text-align:center;font-size:22px;font-weight:700;padding-left:.5em}

/* разделитель "или" */
.orsep{display:flex;align-items:center;gap:12px;color:var(--mut2);font-size:12px;margin:16px 2px;text-transform:uppercase;letter-spacing:.08em}
.orsep::before,.orsep::after{content:"";flex:1;height:1px;background:var(--line)}

/* тарифы */
.plans{display:flex;flex-direction:column;gap:10px;margin:6px 0}
.plan{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card2);
  border:1px solid var(--line2);border-radius:var(--radius-sm);padding:15px 16px;text-decoration:none;color:var(--tx)}
.plan:active{border-color:var(--acc)}
.plan .pname{font-size:15px;font-weight:600}
.plan .pdesc{font-size:12.5px;color:var(--mut)}
.plan .pprice{font-size:19px;font-weight:800;white-space:nowrap}
.plan .pprice span{font-size:13px;font-weight:600;color:var(--mut)}
.plan.best{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.plan .tag{display:inline-block;background:var(--acc-soft);color:var(--acc);border:1px solid #2f7d4e;border-radius:999px;font-size:10.5px;padding:2px 8px;margin-left:7px;vertical-align:2px}

/* статус подписки */
.status{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.status .dot{width:11px;height:11px;border-radius:50%;flex:none}
.status .dot.ok{background:var(--acc);box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.status .dot.warn{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.18)}
.status .dot.off{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.18)}
.status .big{font-size:20px;font-weight:700}
.status .small{font-size:13px;color:var(--mut)}

/* строки данных */
.rows{margin:12px 0 0}
.row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.row:first-child{border-top:0}
.row .k{color:var(--mut)}
.row .v{font-weight:600;text-align:right;min-width:0;word-break:break-word}

/* QR / ссылка подписки */
.qrbox{display:flex;flex-direction:column;align-items:center;gap:12px;margin:6px 0}
.qrbox canvas,.qrbox img{background:#fff;border-radius:12px;padding:10px;width:200px;height:200px}
.suburl{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:12px;color:var(--mut);word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* список устройств */
.dev{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px}
.dev:first-child{border-top:0}
.dev .dp{display:flex;align-items:center;gap:9px}
.dev .pl{font-size:18px}
.dev .dm{color:var(--mut);font-size:12px}

/* уведомления */
.note{border-radius:12px;padding:12px 14px;font-size:13.5px;margin:10px 0;line-height:1.45}
.note.ok{background:var(--acc-soft);border:1px solid #2f7d4e;color:#9be7b4}
.note.err{background:#2a1418;border:1px solid #7d2f3e;color:#f3a9b6}
.note.info{background:#141a33;border:1px solid var(--line2);color:var(--mut)}

.foot{text-align:center;font-size:12px;color:var(--mut2);margin-top:22px;line-height:1.6}
.foot a{color:var(--mut)}
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.muted{color:var(--mut)}
.tgwidget{display:flex;justify-content:center;min-height:48px;margin:4px 0}

@media (max-width:380px){
  .hero h1{font-size:26px}
  .feats{grid-template-columns:1fr}
}