/* ========================= ТОКЕНЫ ========================= */
:root{
  --bg:#F4F4F5; --surface:#FFFFFF; --surface-2:#F0EFF0; --surface-3:#E7E5E7;
  --ink:#161517; --ink-2:#565359; --ink-3:#6E6972;
  --line:#E4E2E4; --line-2:#D2CFD2;

  --red:#D5122C; --red-soft:#FDEDEF; --red-ink:#A50E22;
  --blue:#1B54C0; --blue-hover:#16449B; --blue-soft:#EAF0FC; --on-blue:#fff;
  --win:#0E7A50; --win-soft:#E7F4EE;
  --loss:#C0293B; --loss-soft:#FBECEE;
  --wait:#7A7580; --wait-soft:#F0EFF0;

  --sh:0 1px 1px rgba(22,21,23,.04);
  --sh-2:0 1px 2px rgba(22,21,23,.05),0 10px 24px -12px rgba(22,21,23,.16);
  --r:12px; --r-sm:8px;
  --f:"Onest",system-ui,-apple-system,sans-serif;
  --m:"JetBrains Mono",ui-monospace,monospace;
  --rail:238px; --right:312px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111012; --surface:#191819; --surface-2:#211F22; --surface-3:#2A272B;
  --ink:#EFEDF0; --ink-2:#B2ADB6; --ink-3:#8D8791;
  --line:#282629; --line-2:#373438;
  --red:#FF4D63; --red-soft:#2B1216; --red-ink:#FF7D8E;
  --blue:#6E9BF5; --blue-hover:#8DB1F8; --blue-soft:#151C2C; --on-blue:#0A1120;
  --win:#3BC489; --win-soft:#11251C; --loss:#F0616F; --loss-soft:#2A1417;
  --wait:#8E8894; --wait-soft:#211F22;
  --sh:0 1px 1px rgba(0,0,0,.5); --sh-2:0 1px 2px rgba(0,0,0,.5),0 10px 24px -12px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  --bg:#111012; --surface:#191819; --surface-2:#211F22; --surface-3:#2A272B;
  --ink:#EFEDF0; --ink-2:#B2ADB6; --ink-3:#8D8791;
  --line:#282629; --line-2:#373438;
  --red:#FF4D63; --red-soft:#2B1216; --red-ink:#FF7D8E;
  --blue:#6E9BF5; --blue-hover:#8DB1F8; --blue-soft:#151C2C; --on-blue:#0A1120;
  --win:#3BC489; --win-soft:#11251C; --loss:#F0616F; --loss-soft:#2A1417;
  --wait:#8E8894; --wait-soft:#211F22;
  --sh:0 1px 1px rgba(0,0,0,.5); --sh-2:0 1px 2px rgba(0,0,0,.5),0 10px 24px -12px rgba(0,0,0,.8);
}

/* ========================= БАЗА ========================= */
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100dvh}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img,svg{display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.mono{font-family:var(--m);font-variant-numeric:tabular-nums}
h1,h2,h3{letter-spacing:-.021em;line-height:1.16}
.lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* ========================= КАРКАС ========================= */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100dvh}

/* левое меню */
.rail{
  border-right:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;
}
.rail-top{padding:16px 18px 12px;display:flex;align-items:center;gap:9px}
.mark{width:28px;height:28px;border-radius:8px;background:var(--red);display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;flex-shrink:0}
.wordmark{font-weight:800;font-size:17px;letter-spacing:-.03em}
.wordmark i{font-style:normal;font-weight:400;color:var(--ink-2)}
.rail-nav{padding:6px 10px;display:flex;flex-direction:column;gap:1px;overflow-y:auto;flex:1}
.rail-sep{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:16px 10px 6px}
.ri{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--ink-2);font-weight:500;font-size:14.5px;position:relative;transition:background .14s,color .14s;text-align:left;width:100%}
.ri svg{width:19px;height:19px;flex-shrink:0}
.ri:hover{background:var(--surface-2);color:var(--ink)}
.ri.on{background:var(--surface-2);color:var(--ink);font-weight:600}
.ri.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--red)}
.ri .cnt{margin-left:auto;font-family:var(--m);font-size:11px;font-weight:500;color:var(--ink-3)}
.ri .live-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--red);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.rail-foot{padding:10px;border-top:1px solid var(--line)}
.me{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;width:100%;transition:background .14s}
.me:hover{background:var(--surface-2)}
.me .t{text-align:left;min-width:0}
.me b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me small{font-size:11.5px;color:var(--ink-3)}

/* верхняя панель */
.main{display:flex;flex-direction:column;min-width:0}
.top{
  position:sticky;top:0;z-index:50;height:58px;flex-shrink:0;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 22px;
}
.top h2{font-size:17px;font-weight:700}
.search{flex:1;max-width:400px;position:relative;margin-left:8px}
.search input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 12px 8px 34px;font-size:14px;transition:border-color .15s}
.search input:focus{outline:none;border-color:var(--blue)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-3)}
.spacer{flex:1}
.ib{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--ink-2);position:relative;transition:background .14s,color .14s;flex-shrink:0}
.ib:hover{background:var(--surface-2);color:var(--ink)}
.ib svg{width:18px;height:18px}
.ib .badge{position:absolute;top:5px;right:5px;min-width:15px;height:15px;border-radius:8px;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg)}

.page{padding:22px;flex:1}
.screen{display:none}
.screen.on{display:block;animation:in .3s cubic-bezier(.2,.9,.3,1)}
@keyframes in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.cols{display:grid;grid-template-columns:minmax(0,1fr) var(--right);gap:20px;align-items:start}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.rside{position:sticky;top:80px;display:flex;flex-direction:column;gap:16px}

/* ========================= ЭЛЕМЕНТЫ ========================= */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.ch{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.ch h3{font-size:14.5px;font-weight:700;flex:1}
.ch a{font-size:12.5px;font-weight:600;color:var(--blue)}
.pad{padding:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;font-size:14px;padding:9px 17px;border-radius:9px;min-height:38px;transition:all .15s;border:1px solid transparent;white-space:nowrap}
.btn svg{width:16px;height:16px}
.b-pri{background:var(--blue);color:var(--on-blue)}
.b-pri:hover{background:var(--blue-hover)}
.b-sec{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.b-sec:hover{border-color:var(--blue);color:var(--blue)}
.b-soft{background:var(--blue-soft);color:var(--blue)}
.b-sm{padding:6px 12px;min-height:32px;font-size:13px;border-radius:7px}
.btn.done{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}

.av{border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;flex-shrink:0;user-select:none;letter-spacing:-.02em}
.a-xs{width:26px;height:26px;font-size:10px}
.a-s{width:34px;height:34px;font-size:12px}
.a-m{width:42px;height:42px;font-size:14px}
.a-l{width:76px;height:76px;font-size:25px}
.c1{background:linear-gradient(140deg,#C8213A,#8B0F22)}
.c2{background:linear-gradient(140deg,#2B5FC4,#173A82)}
.c3{background:linear-gradient(140deg,#B06216,#7A3F08)}
.c4{background:linear-gradient(140deg,#6B3FA0,#432466)}
.c5{background:linear-gradient(140deg,#12796A,#0A4A41)}
.c6{background:linear-gradient(140deg,#5A6169,#383D43)}

.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.t-red{background:transparent;color:var(--red);padding:0}
.t-live{background:var(--red);color:#fff}
.t-live::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;animation:blink 1.6s infinite}
.t-res{background:var(--red-soft);color:var(--red-ink)}
.t-win{background:var(--win-soft);color:var(--win)}
.t-loss{background:var(--loss-soft);color:var(--loss)}
.t-wait{background:var(--wait-soft);color:var(--wait)}

/* ---- сторис ---- */
.stories{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.st{display:flex;flex-direction:column;align-items:center;gap:6px;width:66px;flex-shrink:0}
.st-ring{width:60px;height:60px;border-radius:50%;padding:2.5px;background:linear-gradient(140deg,var(--red),#FF7A45);position:relative}
.st-ring.seen{background:var(--line-2)}
.st-ring .av{width:100%;height:100%;border:2.5px solid var(--surface);font-size:17px}
.st-live{position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.06em;padding:1.5px 6px;border-radius:4px;border:2px solid var(--surface)}
.st span{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:66px;text-align:center}

/* ---- пост ---- */
.post-h{display:flex;align-items:center;gap:11px;padding:15px 16px 0}
.post-h .w{flex:1;min-width:0}
.post-h b{font-size:14px;font-weight:650;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.post-h small{color:var(--ink-3);font-size:12.5px}
.post-b{padding:11px 16px 0;font-size:14.8px}
.acts{display:flex;gap:2px;padding:9px 10px 11px}
.act{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;color:var(--ink-2);font-weight:600;font-size:13px;transition:all .14s}
.act:hover{background:var(--surface-2);color:var(--ink)}
.act svg{width:16px;height:16px}
.act.liked{color:var(--red)}
.act.liked svg{fill:var(--red)}

/* ---- матч ---- */
.match{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.m-top{display:flex;align-items:center;gap:8px;padding:9px 13px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.m-top .lg{font-size:11.5px;font-weight:600;color:var(--ink-2);flex:1}
.m-body{padding:13px}
.m-row{display:flex;align-items:center;gap:10px;padding:4px 0}
.m-row .kit{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-size:8.5px;font-weight:800;color:#fff;flex-shrink:0}
.m-row .nm{flex:1;font-size:14px;font-weight:550;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-row .sc{font-family:var(--m);font-weight:700;font-size:15px}
.m-row.dim .nm,.m-row.dim .sc{color:var(--ink-3)}
.odds{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px}
.odd{border:1px solid var(--line-2);border-radius:7px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:1px;transition:all .14s;background:var(--surface)}
.odd:hover{border-color:var(--blue)}
.odd small{font-size:10px;font-weight:700;color:var(--ink-3);text-transform:uppercase}
.odd .mono{font-weight:600;font-size:14px}
.odd.pick{border-color:var(--blue);background:var(--blue-soft)}
.odd.pick small,.odd.pick .mono{color:var(--blue)}

/* ---- купон прогноза ---- */
.tick{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.tick-f{display:flex;align-items:center;gap:9px;padding:10px 13px;border-top:1px dashed var(--line-2);background:var(--surface-2);flex-wrap:wrap}
.tick-f .who{display:flex;align-items:center;gap:7px;flex:1;min-width:0;font-size:13px;font-weight:600}
.kf{font-family:var(--m);font-weight:700;font-size:12.5px;background:var(--blue);color:var(--on-blue);padding:3px 9px;border-radius:6px}

/* ---- таблицы ---- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .14s}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .r{text-align:right}
.rank{font-family:var(--m);font-weight:700;font-size:13px;color:var(--ink-3);width:26px}
.rank.top{color:var(--red)}
.bar{display:inline-block;width:56px;height:4px;border-radius:99px;background:var(--surface-3);overflow:hidden;vertical-align:middle;margin-left:8px}
.bar i{display:block;height:100%;background:var(--blue)}
.form{display:inline-flex;gap:3px}
.form i{width:8px;height:8px;border-radius:2px}
.fw{background:var(--win)}.fl{background:var(--loss)}.fd{background:var(--wait)}

/* ---- список в сайдбаре ---- */
.lrow{display:flex;align-items:center;gap:10px;padding:9px 14px;transition:background .14s;border-top:1px solid var(--line)}
.lrow:first-of-type{border-top:none}
.lrow:hover{background:var(--surface-2)}
.lrow .n{flex:1;min-width:0}
.lrow .n b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .n small{font-size:11.5px;color:var(--ink-3)}
.pct{font-family:var(--m);font-weight:700;font-size:13.5px;color:var(--win)}

/* ---- новости ---- */
.ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px}
.ncard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:all .18s;height:100%;display:flex;flex-direction:column}
.ncard:hover{box-shadow:var(--sh-2);border-color:var(--line-2);transform:translateY(-2px)}
.nimg{aspect-ratio:16/9;background:linear-gradient(140deg,var(--surface-3),var(--surface-2));position:relative;overflow:hidden;display:grid;place-items:center;color:var(--ink-3);font-size:11px;font-weight:600}
.nbody{padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.ntitle{font-size:15px;font-weight:650;line-height:1.3}
.nmeta{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:4px}
.nmeta .d{font-family:var(--m);font-size:11.5px;color:var(--ink-3);margin-left:auto}

/* ---- профиль ---- */
.cover{height:132px;border-radius:var(--r) var(--r) 0 0;position:relative;overflow:hidden;
  background:linear-gradient(115deg,#1A1719,#3A1F25 55%,var(--red))}
.cover::after{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(115deg,transparent 0 38px,rgba(255,255,255,.045) 38px 76px)}
.phead{padding:0 22px 18px}
.prow{display:flex;align-items:flex-end;gap:16px;margin-top:-34px;flex-wrap:wrap}
.prow .a-l{border:4px solid var(--surface)}
.pid{flex:1;min-width:200px;padding-bottom:3px}
.pid h1{font-size:23px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pid .sub{color:var(--ink-2);font-size:13.5px;margin-top:2px}
.pacts{display:flex;gap:8px;padding-bottom:4px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));border-top:1px solid var(--line)}
.stat{padding:13px 8px;text-align:center;border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat .v{font-family:var(--m);font-size:19px;font-weight:700}
.stat .v.g{color:var(--win)}
.stat small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);padding:0 16px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tb{padding:11px 14px;font-weight:600;font-size:14px;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .14s}
.tb:hover{color:var(--ink)}
.tb.on{color:var(--ink);border-color:var(--red)}
.tb .c{font-family:var(--m);font-size:11px;color:var(--ink-3);margin-left:5px}

/* ---- стрим ---- */
.stream{aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;position:relative;display:grid;place-items:center;
  background:linear-gradient(150deg,#241E20,#0E0C0D)}
.stream::before{content:"";position:absolute;inset:0;opacity:.18;
  background:radial-gradient(circle at 50% 50%,transparent 52px,rgba(255,255,255,.45) 52px 53px,transparent 54px),
             linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)) 50% 0/1px 100% no-repeat}
.play{width:62px;height:62px;border-radius:50%;background:var(--red);display:grid;place-items:center;color:#fff;z-index:2;transition:transform .18s}
.play:hover{transform:scale(1.07)}
.play svg{width:22px;height:22px;margin-left:3px}
.s-tl{position:absolute;top:11px;left:11px;right:11px;display:flex;justify-content:space-between;z-index:2}
.s-chip{background:rgba(0,0,0,.5);color:#fff;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:6px;backdrop-filter:blur(4px);display:inline-flex;align-items:center;gap:5px}

/* ---- YouTube ---- */
.vthumb{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;
  background:linear-gradient(145deg,#2A2427,#100D0F);
  display:grid;place-items:center;cursor:pointer;
}
.vthumb::before{content:"";position:absolute;inset:0;opacity:.16;
  background-image:repeating-linear-gradient(118deg,transparent 0 26px,rgba(255,255,255,.5) 26px 27px)}
.vthumb .yt{
  width:56px;height:39px;border-radius:11px;background:var(--red);
  display:grid;place-items:center;color:#fff;z-index:2;
  transition:transform .18s;box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.vthumb .yt svg{width:19px;height:19px;margin-left:2px}
.vthumb:hover .yt{transform:scale(1.09)}
.vthumb .dur{
  position:absolute;right:8px;bottom:8px;z-index:2;
  background:rgba(0,0,0,.78);color:#fff;font-family:var(--m);
  font-size:11.5px;font-weight:500;padding:2px 6px;border-radius:4px;
}
.vthumb .ep{
  position:absolute;left:8px;top:8px;z-index:2;
  background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.05em;padding:3px 8px;border-radius:5px;backdrop-filter:blur(4px);
}
.vthumb.lg .yt{width:74px;height:52px;border-radius:14px}
.vthumb.lg .yt svg{width:26px;height:26px}

/* главный выпуск: превью + описание рядом */
.vhero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;padding:16px}
.vhero h2{font-size:22px;font-weight:750;margin-top:9px}
.vhero p{color:var(--ink-2);font-size:14.5px;margin-top:9px}
.vmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--ink-3)}
.vmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.vhero-side{display:flex;flex-direction:column;justify-content:center}

/* сетка выпусков */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.vitem{display:flex;flex-direction:column;gap:9px;cursor:pointer}
.vitem .vt{font-size:14.5px;font-weight:650;line-height:1.32}
.vitem:hover .vt{color:var(--blue)}

/* компактный список выпусков (в ленте справа от главного) */
.vlist{display:flex;flex-direction:column;gap:12px}
.vrow{display:grid;grid-template-columns:132px minmax(0,1fr);gap:11px;cursor:pointer;align-items:start}
.vrow .vthumb{border-radius:6px}
.vrow .vthumb .yt{width:34px;height:24px;border-radius:7px}
.vrow .vthumb .yt svg{width:12px;height:12px}
.vrow .vthumb .dur{right:4px;bottom:4px;font-size:10px;padding:1px 4px}
.vrow b{font-size:13.8px;font-weight:650;line-height:1.32;display:block}
.vrow small{font-size:11.5px;color:var(--ink-3);display:block;margin-top:4px}
.vrow:hover b{color:var(--blue)}

@media (max-width:1180px){.vhero{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.vrow{grid-template-columns:112px minmax(0,1fr)}}

/* ---- чат ---- */
.chat{display:flex;flex-direction:column;max-height:400px}
.chat-b{flex:1;overflow-y:auto;padding:12px 15px;display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.chat-b b{font-weight:650}
.chat-in{display:flex;gap:8px;padding:11px 14px;border-top:1px solid var(--line)}
.chat-in input{flex:1;min-width:0;background:var(--surface-2);border:1px solid transparent;border-radius:999px;padding:8px 14px;font-size:13.5px}
.chat-in input:focus{outline:none;border-color:var(--blue);background:var(--surface)}

/* ---- комментарии ---- */
.cmts{border-top:1px solid var(--line);padding:13px 16px 15px;display:flex;flex-direction:column;gap:12px}
.cmt{display:flex;gap:9px}
.cbub{background:var(--surface-2);border-radius:4px 11px 11px 11px;padding:8px 12px;font-size:13.8px;min-width:0}
.cbub b{font-size:12.5px;display:inline-flex;align-items:center;gap:6px}
.cmeta{display:flex;gap:13px;margin-top:3px;padding-left:12px}
.cmeta button,.cmeta small{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.at{color:var(--blue);font-weight:600}
.cin{display:flex;gap:9px;align-items:center}
.cin input{flex:1;min-width:0;background:var(--surface-2);border:1px solid transparent;border-radius:999px;padding:8px 14px;font-size:13.8px}
.cin input:focus{outline:none;border-color:var(--blue);background:var(--surface)}

/* ---- авторизация ---- */
.auth{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:900px;margin:10px auto;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--sh-2)}
.auth-l{padding:34px 32px;background:linear-gradient(160deg,#1A1719,#2E191E 60%,#4A1520);color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-l::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(115deg,transparent 0 44px,rgba(255,255,255,.04) 44px 88px)}
.auth-l > *{position:relative;z-index:1}
.auth-l h1{font-size:29px;font-weight:800}
.auth-l p{margin-top:9px;font-size:14px;opacity:.75;max-width:30ch}
.tier{display:flex;gap:11px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12)}
.tier b{font-size:13.5px;display:block}
.tier p{font-size:12.5px;opacity:.7;margin-top:1px;max-width:none}
.auth-r{padding:30px 32px}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-2);border-radius:9px;padding:3px;gap:3px;margin-bottom:20px}
.seg button{padding:8px;border-radius:7px;font-weight:600;font-size:14px;color:var(--ink-2);transition:all .15s}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh)}
.fld{margin-bottom:13px}
.fld label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px;color:var(--ink-2)}
.fld input{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:10px 13px;font-size:14.5px;transition:border-color .15s}
.fld input:focus{outline:none;border-color:var(--blue)}
.orr{display:flex;align-items:center;gap:11px;color:var(--ink-3);font-size:12.5px;margin:15px 0}
.orr::before,.orr::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---- сторис модалка ---- */
.smod{position:fixed;inset:0;z-index:300;display:none;place-items:center;background:rgba(10,9,10,.78);backdrop-filter:blur(8px)}
.smod.on{display:grid}
.sfr{width:min(380px,92vw);aspect-ratio:9/16;max-height:85dvh;border-radius:16px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:15px;background:linear-gradient(160deg,#3A1C22,#120E10)}
.sbars{display:flex;gap:4px}
.sbar{flex:1;height:2.5px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden}
.sbar i{display:block;height:100%;width:0;background:#fff}
.sbar.done i{width:100%}
.sbar.run i{animation:sf 5s linear forwards}
@keyframes sf{to{width:100%}}
.shd{display:flex;align-items:center;gap:9px;margin-top:11px;color:#fff}
.sbd{color:#fff;text-align:center}
.sbd h3{font-size:24px;font-weight:800}
.sbd p{opacity:.82;margin-top:8px;font-size:14px}

/* ========================= АДАПТИВ ========================= */
.mob{display:none}
@media (max-width:1180px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .rside{position:static;display:grid;grid-template-columns:1fr 1fr;align-items:start}
}
@media (max-width:900px){
  :root{--rail:0px}
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .page{padding:14px 12px 88px}
  .top{padding:0 14px}
  .search{display:none}
  .rside{grid-template-columns:minmax(0,1fr)}
  .auth{grid-template-columns:1fr}
  .auth-l{min-height:230px}
  .mob{display:block;position:fixed;bottom:0;left:0;right:0;z-index:120;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:5px 6px calc(5px + env(safe-area-inset-bottom))}
  .mob-in{display:grid;grid-template-columns:repeat(5,1fr)}
  .mb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 3px;color:var(--ink-3);font-size:10px;font-weight:600;border-radius:9px}
  .mb svg{width:20px;height:20px}
  .mb.on{color:var(--red)}
  .top h2{font-size:15.5px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .hide-m{display:none}
}

/* ==========================================================================
   Привязка дизайн-системы к реальной вёрстке сайта.
   Ниже — только то, чего нет в прототипе: старые классы Bootstrap-разметки
   и элементы, появляющиеся из базы (логотипы команд, рубрики, редактор).
   ========================================================================== */

/* --- каркас: мобильное меню выезжает поверх --- */
.rail-close,.rail-open{display:none}
.rail-veil{display:none}
@media (max-width:900px){
  .rail{
    display:flex!important;position:fixed;top:0;bottom:0;left:0;width:262px;z-index:200;
    transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.9,.3,1);
  }
  body.rail-open-state .rail{transform:none}
  body.rail-open-state .rail-veil{display:block;position:fixed;inset:0;z-index:199;background:rgba(10,9,10,.45)}
  .rail-close,.rail-open{display:grid}
  .app{grid-template-columns:minmax(0,1fr)}
  .page{padding-bottom:32px}
}
.brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.top-title{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- футер внутри рабочей области --- */
.footer{
  background:var(--surface)!important;border-top:1px solid var(--line);
  color:var(--ink-2)!important;margin-top:auto;padding:28px 22px!important;
}
.footer a{color:var(--ink-2)!important}
.footer a:hover{color:var(--blue)!important}
.copyright-text{color:var(--ink-3)!important;font-size:13px}
.social-icons__icon{
  width:34px!important;height:34px!important;border:1px solid var(--line);
  border-radius:var(--r-sm);display:inline-grid!important;place-items:center;transition:border-color .15s;
}
.social-icons__icon:hover{border-color:var(--blue)}
.footer img[src*="footer-logo"],.footer img[src*="header-logo"]{height:26px;width:auto}

/* --- логотипы команд из API --- */
img.kit{
  width:24px;height:24px;object-fit:contain;background:transparent;
  border-radius:0;display:block;flex-shrink:0;
}
.team{display:inline-flex;align-items:center;gap:7px;min-width:0}
.team img{width:20px;height:20px;object-fit:contain;flex-shrink:0}

/* --- сетка live-матчей --- */
.fb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:12px;padding:16px}
.fb-tabs{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 8px;box-shadow:var(--sh)}
.fb-tabs .tb{border-bottom:2px solid transparent;text-decoration:none}
.fb-tabs .tb.on{color:var(--ink);border-color:var(--red)}
.daybar{
  padding:9px 16px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface-2);border-top:1px solid var(--line);
}

/* --- новости из базы в новом каркасе --- */
.news,.video,.resident-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden;height:100%;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.news:hover,.video:hover,.resident-item:hover{
  border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-2px);
}
.news__image,.video__image-bg{border-radius:0!important;overflow:hidden;background:var(--surface-3)}
.news__image img,.video__image-bg img{width:100%;height:auto;display:block}
.news-info,.video-info{padding:14px 16px 16px}
.news__link,.video__link{
  font-family:var(--f)!important;font-weight:650!important;font-size:15.5px!important;
  line-height:1.3!important;color:var(--ink)!important;display:block;letter-spacing:-.015em;
}
.news__link:hover,.video__link:hover{color:var(--blue)!important}
.news__extract{color:var(--ink-2)!important;font-size:14px!important;line-height:1.5}
.news__date,.video__date{
  font-family:var(--m)!important;font-size:11.5px!important;color:var(--ink-3)!important;
  font-variant-numeric:tabular-nums;
}
.video__digest,span.video__digest,.news__category{
  background:transparent!important;color:var(--red)!important;
  font-family:var(--f)!important;font-weight:700!important;font-size:11px!important;
  letter-spacing:.06em;text-transform:uppercase;padding:0!important;border-radius:0!important;
}
.news__link-more{
  display:inline-flex;align-items:center;gap:6px;font-weight:600!important;
  font-size:13.5px!important;color:var(--blue)!important;text-transform:none;letter-spacing:0;
}
.news__link-more::after{content:"→";transition:transform .18s;display:inline-block}
.news__link-more:hover::after{transform:translateX(3px)}

/* --- заголовки секций --- */
.section-header{
  font-family:var(--f)!important;font-weight:750!important;
  font-size:clamp(18px,2.2vw,23px)!important;letter-spacing:-.022em;text-transform:none!important;
  color:var(--ink)!important;display:flex;align-items:center;gap:11px;
  margin-bottom:16px!important;padding-bottom:11px;border-bottom:1px solid var(--line);
}
.section-header::before{content:"";flex-shrink:0;width:3px;height:1.05em;border-radius:2px;background:var(--red)}

/* --- страница новости --- */
.news-view,.news-last-block,.result-table,.forecast-view,.resident-view,.podcast-view,.page-content{
  background:var(--surface)!important;color:var(--ink)!important;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
}
.news-view{padding:22px}
.news-view h1{font-size:clamp(23px,3vw,31px);margin-bottom:12px}
.news-view p,.news-view li{font-size:16.5px;line-height:1.68;color:var(--ink)}
.news-view a{color:var(--blue);border-bottom:1px solid color-mix(in srgb,var(--blue) 35%,transparent)}
.news-view img{max-width:100%;height:auto;border-radius:var(--r-sm)}
.news-view blockquote{border-left:2px solid var(--red);padding:4px 0 4px 18px;margin:22px 0;background:transparent}
.news-view blockquote,.news-view blockquote p,.news-view blockquote strong{color:var(--ink)!important}
.news__image-caption{color:var(--ink-3)!important;font-size:13px!important}
.author__image{border-radius:50%;object-fit:cover}
.author__name{font-weight:600!important;color:var(--ink)!important}

/* кнопка-ссылка из редактора */
.knop{
  display:inline-block;background:var(--blue)!important;border-radius:var(--r-sm)!important;
  padding:10px 20px!important;margin-left:0!important;box-shadow:none;transition:background .16s;
}
.knop:hover{background:var(--blue-hover)!important}
.knop a{
  color:var(--on-blue)!important;font-weight:600!important;font-size:14px;
  text-transform:none;border:none!important;
}

/* --- наследие старой тёмной вёрстки --- */
.homepage{padding-top:0!important}
.homepage > .container,.section-youtube-digest,.section-fonteam,.news-section{
  background:var(--surface)!important;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:20px!important;margin-bottom:16px;
}
.fonteam-residents,.section-main-desktop__wrapper,.swiper-main{
  background:transparent!important;border:none;box-shadow:none;padding:0!important;
}
.fblic{
  background:var(--surface-2)!important;color:var(--ink-3)!important;
  border-radius:var(--r-sm);padding:13px 15px;font-size:12px;line-height:1.5;
}
.container{max-width:none;padding-left:0;padding-right:0}

/* заголовки поверх фото */
.news__image-bg,.video__image-bg{position:relative;display:block}
.news__image-bg::after,.video__image-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(12,10,11,.86) 0%,rgba(12,10,11,.4) 45%,rgba(12,10,11,0) 78%);
}
.news__image-bg > *,.video__image-bg > *{position:relative;z-index:1}
.news__image-bg .news__link,.video__image-bg .video__link,
.news__image-bg .news__date,.video__image-bg .video__date{color:#fff!important;text-shadow:0 1px 10px rgba(0,0,0,.45)}

/* --- реклама --- */
section.bgmobileadv{text-align:center;margin:0 0 12px}
div[id^="adfox_"]{min-height:1px}
section.bgmobileadv:empty{min-height:0;margin:0}

/* --- прочее --- */
.swiper-slide{height:auto}
.swiper-pagination-bullet{background:var(--line-2)!important;opacity:1!important}
.swiper-pagination-bullet-active{background:var(--red)!important}
.ratio > *,.embed-responsive-item{border-radius:var(--r-sm)}

/* Разделитель между командами. Символ — оставляем в разметке ради копирования,
   но рисуем чертой: em-dash в Onest сидит на базовой линии и читается как подчёркивание. */
.vs{display:inline-block;margin:0 8px;font-size:0;line-height:0;vertical-align:middle}
.vs::before{
  content:"";display:inline-block;width:9px;height:1.5px;border-radius:1px;
  background:var(--ink-3);vertical-align:middle;
}

/* Логотипы команд делают строку выше и сбивают базовую линию, из-за чего
   разделитель уезжал вниз. Выравниваем строку матча флексом, а не базовой линией. */
.lrow .n b{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.lrow .n b .team{align-items:center}
.vs::before{vertical-align:baseline}