/* PRFL — вторая часть стилей: левая панель, колокольчик, карта трасс, аналитика, предикты,
   новости на весь экран, обложки команд, «Гонщик дня», FIA, кабинет. Подключается после style.css. */

/* =================== левая панель навигации (компьютер) ===================
   На телефоне и планшете меню остаётся сверху, как раньше. */
@media (min-width: 1100px) {
  body[data-page]:not([data-page="admin"]) { --rail-w: 248px; --bar-h: 0px; padding-left: var(--rail-w); }
  body[data-page]:not([data-page="admin"]) .bar { position: fixed; z-index: 120; top: 0; left: 0; bottom: 0; width: var(--rail-w); height: 100vh;
    border: 0; border-right: 1px solid var(--line); background: var(--bg); overflow-y: auto; scrollbar-width: thin; }
  body[data-page]:not([data-page="admin"]) .bar .container { width: 100%; max-width: none; height: auto; min-height: 100%; margin: 0;
    padding: 20px 14px 16px; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 14px; }
  body[data-page]:not([data-page="admin"]) .brand { flex-direction: column; align-items: flex-start; gap: 10px; height: auto; padding: 0 8px 14px;
    border-bottom: 1px solid var(--line); }
  body[data-page]:not([data-page="admin"]) .brand img { height: 72px; }
  body[data-page]:not([data-page="admin"]) .brand .name, body[data-page]:not([data-page="admin"]) .bar.tight .brand .name { display: block; font-size: 11px; }
  body[data-page]:not([data-page="admin"]) .nav { flex-direction: column; align-items: stretch; flex: 1 1 auto; width: auto; height: auto; margin: 0; padding: 0;
    overflow: visible; border: 0; mask-image: none; -webkit-mask-image: none; gap: 2px; }
  body[data-page]:not([data-page="admin"]) .nav a { padding: 11px 14px 11px 16px; font-size: 14px; letter-spacing: .1em; border-radius: 6px; }
  body[data-page]:not([data-page="admin"]) .nav a::after { left: 0; right: auto; top: 9px; bottom: 9px; width: 3px; height: auto; border-radius: 0 3px 3px 0;
    transform: scaleY(0); transform-origin: center; }
  body[data-page]:not([data-page="admin"]) .nav a:hover { background: var(--red-soft); }
  body[data-page]:not([data-page="admin"]) .nav a:hover::after, body[data-page]:not([data-page="admin"]) .nav a.active::after { transform: scaleY(1); }
  body[data-page]:not([data-page="admin"]) .nav a.active { background: var(--red-soft); }
  body[data-page]:not([data-page="admin"]) .bar-right { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
    padding-top: 12px; border-top: 1px solid var(--line); height: auto; }
  body[data-page]:not([data-page="admin"]) .bar-right .userchip, body[data-page]:not([data-page="admin"]) .bar-right > .btn { grid-column: 1 / -1; order: -1; }
  body[data-page]:not([data-page="admin"]) .bar-right .userchip { border-radius: 10px; }
  body[data-page]:not([data-page="admin"]) .bar-right .userchip span { display: block; min-width: 0; }
  body[data-page]:not([data-page="admin"]) .bar-right .userchip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
  body[data-page]:not([data-page="admin"]) .bar-right > .btn span { display: inline; }
  body[data-page]:not([data-page="admin"]) .tower-wrap { top: 16px; }
  /* на широких экранах рядом с левой панелью контент не растягиваем до края */
  body[data-page]:not([data-page="admin"]) .container { width: min(1280px, 100% - 64px); }
}

/* =================== колокольчик =================== */
.bell-slot { display: contents; }
.bell { position: relative; }
.bell-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-strong);
  border-radius: 8px; background: transparent; color: var(--text-2); transition: border-color .2s, color .2s, background .2s; }
.bell-btn:hover, .bell-btn[aria-expanded="true"] { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.bell-btn.has svg { animation: bell-ring 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes bell-ring { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 86% { transform: rotate(8deg); } 92% { transform: rotate(-4deg); } }
.bell-n { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--red); color: #fff; font: 800 11px/19px var(--f-body); text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.bell-panel { position: fixed; z-index: 220; top: 74px; left: 10px; right: 10px; max-width: 420px; margin-left: auto;
  max-height: min(72vh, 560px); display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--surface); box-shadow: 0 24px 60px rgba(0,0,0,.4); overflow: hidden; }
.bell-panel[hidden] { display: none; }
@media (min-width: 1100px) { body[data-page]:not([data-page="admin"]) .bell-panel { top: auto; bottom: 16px; left: calc(var(--rail-w) + 10px); right: auto; width: 400px; margin: 0; } }
.bell-panel header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line); }
.bell-panel header b { font: 800 14px var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.bell-hint { font-size: 11px; color: var(--muted); }
.bell-list { overflow-y: auto; }
.bell-empty { padding: 26px 18px; font-size: 14px; color: var(--muted); }
.bn { position: relative; display: grid; gap: 3px; padding: 12px 18px 12px 20px; border-bottom: 1px solid var(--line); }
.bn:hover { background: var(--red-soft); }
.bn.new { background: var(--red-soft); }
.bn.new::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red); }
.bn b { font: 700 14px/1.3 var(--f-body); text-transform: none; }
.bn-t { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bn time { font-size: 11px; color: var(--muted); }
.bn-k { justify-self: start; padding: 2px 8px; border-radius: 4px; font: 800 10px var(--f-body); letter-spacing: .12em; text-transform: uppercase;
  background: var(--bg-3); color: var(--text-2); }
.bn-k.k-results { background: rgba(47,208,122,.16); color: var(--green); }
.bn-k.k-news { background: rgba(58,141,255,.16); color: #3a8dff; }
.bn-k.k-fia, .bn-k.k-mention { background: var(--red-soft); color: var(--red); }
.bn-k.k-dotd, .bn-k.k-predict { background: rgba(242,183,5,.18); color: var(--gold); }

/* =================== карта трасс =================== */
.tmap { display: grid; gap: 14px; }
.tm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 4px;
  background: transparent; font: 700 12px var(--f-body); color: var(--text-2); transition: border-color .15s, background .15s, color .15s; }
.tm-chip img { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; }
.tm-chip:hover { border-color: var(--red); color: var(--text); }
.tm-chip.active { background: var(--red); border-color: var(--red); color: #fff; }
.tm-head { display: flex; align-items: center; gap: 14px; }
.tm-head .flag { width: 38px; height: 28px; }
.tm-head h3 { font-size: clamp(18px, 2.2vw, 24px); font-weight: 800; font-style: italic; }
.tm-head span { font-size: 13px; color: var(--muted); }
.tm-go { margin-left: auto; font-weight: 700; font-size: 13px; color: var(--red); white-space: nowrap; }
.tm-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .tm-grid { grid-template-columns: minmax(0, 1fr) 290px; } }
.tm-stage { position: relative; border: 1px solid var(--line); border-radius: var(--r); background:
  radial-gradient(circle at 50% 45%, var(--bg-3), transparent 70%), var(--bg-2); padding: 8px; overflow: hidden; }
.tm-svg { display: block; width: 100%; height: auto; max-height: 560px; }
.tm-road { fill: none; stroke: var(--line-strong); stroke-width: 46; stroke-linejoin: round; stroke-linecap: round; }
.tm-road-in { fill: none; stroke: var(--bg); stroke-width: 30; stroke-linejoin: round; stroke-linecap: round; }
.tm-sec-line { fill: none; stroke-width: 17; stroke-linecap: round; opacity: .92; transition: stroke-width .15s, filter .15s; }
.tm-sec-line.on { stroke-width: 26; filter: drop-shadow(0 0 7px currentColor); }
.tm-hit { fill: none; stroke: transparent; stroke-width: 80; stroke-linecap: round; pointer-events: stroke; cursor: pointer; }
.tm-hit-z { stroke-width: 56; }
.tm-aero-line { fill: none; stroke: #fff; stroke-width: 6; stroke-dasharray: 5 20; stroke-linecap: round; opacity: .95;
  animation: tm-run 1.1s linear infinite; pointer-events: none; filter: drop-shadow(0 0 3px rgba(47,208,122,.9)); }
.tm-aero-line.on { stroke: #2fd07a; stroke-width: 10; }
@keyframes tm-run { to { stroke-dashoffset: -50; } }
.tm-aero.off { display: none; }
.tm-lab { pointer-events: none; }
.tm-lab text { fill: #10101a; font: 800 22px var(--f-body); }
.tm-zl { pointer-events: none; }
.tm-zl rect { fill: #10101a; stroke: #2fd07a; stroke-width: 2.5; }
.tm-zl text { fill: #fff; font: 800 20px var(--f-body); }
.tm-sf rect { fill: #fff; stroke: #10101a; stroke-width: 2.5; }
.tm-dir { fill: var(--red); }
.tm-sf-t { fill: var(--text); font: 800 20px var(--f-body); letter-spacing: .08em; }
.tm-tip { position: absolute; left: 0; top: 0; z-index: 4; min-width: 170px; display: grid; gap: 3px; padding: 10px 13px; border-radius: 8px;
  background: #10101a; color: #fff; font-size: 13px; pointer-events: none; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.tm-tip[hidden] { display: none; }
.tm-tip b { font: 800 14px var(--f-body); }
.tm-tip .tip-aero { color: #2fd07a; }
.tm-tip span { color: #cfd0dc; }
.tm-tip span b { color: #fff; font-size: 15px; }
.tip-who em, .tm-sec em { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--t); }
.tm-side { display: grid; gap: 12px; align-content: start; }
.tm-block { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.tm-block h4 { margin-bottom: 10px; font: 800 11px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.tm-ah { display: flex; align-items: center; justify-content: space-between; }
.tm-ah h4 { margin: 0; }
.tm-sec { display: grid; grid-template-columns: 34px 1fr; gap: 0 10px; align-items: center; padding: 8px 8px; margin: 0 -8px; border-radius: 6px; transition: background .15s; }
.tm-sec.on, .tm-sec:hover { background: var(--red-soft); }
.tm-sec i { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c);
  color: #10101a; font: 800 12px var(--f-body); font-style: normal; }
.tm-sec b { font: 800 20px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.tm-sec span { font-size: 12px; color: var(--muted); }
.tm-ideal { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line-strong); font-size: 13px; color: var(--muted); }
.tm-ideal b { font: 800 17px var(--f-display); color: var(--text); font-variant-numeric: tabular-nums; }
.tm-zone { display: grid; grid-template-columns: 26px auto; gap: 0 10px; align-items: center; padding: 6px 6px; margin: 0 -6px; border-radius: 6px; }
.tm-zone:hover { background: rgba(47,208,122,.12); }
.tm-zone i { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 22px; border-radius: 4px; background: #10101a; border: 1px solid #2fd07a;
  color: #fff; font: 800 12px var(--f-body); font-style: normal; }
.tm-zone b { font-size: 14px; }
.tm-zone span { font-size: 11px; color: var(--muted); }
.tm-block .hint { margin-top: 10px; font-size: 12px; }
.tm-note, .tm-none { font-size: 12px; color: var(--muted); }
.tm-block p.muted { font-size: 13px; margin: 0; }
.tm-sw { position: relative; display: inline-block; width: 40px; height: 22px; }
.tm-sw input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tm-sw span { position: absolute; inset: 0; border-radius: 11px; background: var(--line-strong); transition: background .2s; pointer-events: none; }
.tm-sw span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.tm-sw input:checked + span { background: #2fd07a; }
.tm-sw input:checked + span::after { transform: translateX(18px); }

/* =================== аналитика =================== */
.cmp-pick { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 18px 0 20px; }
.cmp-pick .fld { flex: 1 1 220px; max-width: 340px; }
.cmp-top { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-bottom: 18px; }
.cmp-vs { font: 900 22px var(--f-display); font-style: italic; color: var(--muted); }
.cmp-who { display: grid; justify-items: center; gap: 4px; padding: 16px 12px; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: var(--r-sm); background: var(--surface); text-align: center; }
.cmp-who b { font: 800 clamp(16px, 2.2vw, 22px) var(--f-display); font-style: italic; text-transform: uppercase; }
.cmp-who span { font-size: 12px; color: var(--muted); }
.cmp-ava { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--c); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--c); }
.cmp-ava img { width: 100%; height: 100%; object-fit: cover; }
.cmp-ava i { font: 900 30px var(--f-display); font-style: normal; color: #fff; }
.cmp-ava.team { border-radius: 14px; background: #fff; }
.cmp-ava.team img { object-fit: contain; padding: 8px; }
.cmp-ava.team i { color: var(--c); font-size: 24px; }
.cmp-cols { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .cmp-cols { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); } }
.cmp-radar { padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.radar { display: block; width: 100%; height: auto; overflow: visible; }
.rd-ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.rd-ring:nth-of-type(4) { stroke: var(--text-2); opacity: .5; }
.rd-spoke { stroke: var(--line); stroke-width: 1; }
.rd-shape { fill: var(--c); fill-opacity: .22; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; }
.rd-dot { fill: var(--c); stroke: var(--surface); stroke-width: 1.5; }
.rd-lab { fill: var(--text-2); font: 700 11px var(--f-body); }
.cmp { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.cmp-h { padding: 10px 16px; background: var(--ink); color: var(--on-ink); font: 800 11px var(--f-body); letter-spacing: .18em; text-transform: uppercase; }
.cmp-r { display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 10px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.cmp-r:last-child { border-bottom: 0; }
.cmp-r span { font: 800 17px var(--f-display); }
.cmp-r span:first-child { text-align: left; } .cmp-r span:last-child { text-align: right; }
.cmp-r span.win { color: var(--c, var(--red)); }
.cmp-r span.win::before { content: "●"; font-size: 9px; margin-right: 6px; vertical-align: middle; }
.cmp-r span:last-child.win::before { content: none; } .cmp-r span:last-child.win::after { content: "●"; font-size: 9px; margin-left: 6px; vertical-align: middle; }
.cmp-r em { font-style: normal; font-size: 13px; color: var(--text-2); text-align: center; line-height: 1.25; }
.cmp-r em small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.cmp-r .duel { font: 600 12px var(--f-body); line-height: 1.3; display: block; }
.cmp-empty { padding: 24px 0; }
.spark { width: 100%; max-width: 120px; height: 34px; }
.spark polyline { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.od-top { margin-bottom: 18px; display: grid; gap: 6px; }
.od-top p { font-size: 15px; color: var(--text-2); } .od-top .muted { font-size: 13px; }
.od-warn { padding: 10px 14px; border-left: 4px solid var(--gold); border-radius: 0 6px 6px 0; background: rgba(255,197,49,.12); font-size: 14px; }
.od-cols { display: grid; gap: 16px; }
@media (min-width: 1100px) { .od-cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.od-row { display: grid; grid-template-columns: 26px 38px minmax(90px, 1.1fr) minmax(70px, 1.6fr) 52px auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.od-row.team { grid-template-columns: 26px minmax(90px, 1.2fr) minmax(70px, 1.5fr) 52px auto; }
.od-row.sc { grid-template-columns: minmax(90px, 1fr) 56px 64px; }
.od-row:last-child { border-bottom: 0; }
.od-row .pos { font: 800 14px var(--f-display); color: var(--muted); text-align: center; }
.od-ava { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--c); }
.od-ava img { width: 100%; height: 100%; object-fit: cover; } .od-ava i { font: 900 15px var(--f-display); font-style: normal; color: #fff; }
.od-who { min-width: 0; } .od-who b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-who span { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-bar { height: 10px; border-radius: 5px; background: var(--bg-3); overflow: hidden; }
.od-bar i { display: block; height: 100%; border-radius: 5px; background: var(--c); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.od-pct { font: 800 17px var(--f-display); text-align: right; font-variant-numeric: tabular-nums; }
.od-exp { font-size: 12px; color: var(--text-2); white-space: nowrap; } .od-exp small { color: var(--muted); }
.od-st { grid-column: 3 / -1; justify-self: start; margin-top: -2px; padding: 2px 8px; border-radius: 4px; font: 800 10px var(--f-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; background: var(--bg-3); color: var(--text-2); }
.od-st.lead { background: var(--red-soft); color: var(--red); } .od-st.win { background: var(--gold); color: #10101a; }
.od-st.out { opacity: .7; }
.od-d { font: 800 13px var(--f-body); text-align: right; color: var(--muted); } .od-d.up { color: var(--green); } .od-d.down { color: var(--red); }
.od-scen, .od-calc { margin-top: 16px; }
.calc-t { font-size: 15px; line-height: 1.55; color: var(--text-2); } .calc-t b { color: var(--text); }
@media (max-width: 640px) {
  .cmp-top { grid-template-columns: 1fr 1fr; } .cmp-vs { display: none; }
  .od-row { grid-template-columns: 22px 34px minmax(0, 1fr) 46px; } .od-row .od-bar, .od-row .od-exp { grid-column: 3 / -1; }
  .od-row.team { grid-template-columns: 22px minmax(0, 1fr) 46px; } .od-row.team .od-bar, .od-row.team .od-exp { grid-column: 2 / -1; }
  .cmp-r { grid-template-columns: 1fr 1.5fr 1fr; padding: 9px 10px; }
}

/* =================== предикты =================== */
.pr-open { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.pr-open .flag { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.pr-form { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 800px) { .pr-form { grid-template-columns: 1.2fr 1fr auto; } .pr-form .reg-hint { grid-column: 1 / -1; } }
.pr-cols { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1000px) { .pr-cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.pr-scale { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cmp-radar .hint, .pr-rules .hint { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.pr-scale div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--bg-2); }
.pr-scale b { font: 800 20px var(--f-display); color: var(--red); } .pr-scale span { font-size: 12px; color: var(--muted); }
.prt-head, .prt-row { display: grid; grid-template-columns: 34px minmax(80px, 1.4fr) repeat(3, minmax(48px, .8fr)) 52px; gap: 8px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.prt-head { font: 800 10px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.prt-row .pos { font: 800 14px var(--f-display); color: var(--muted); }
.prt-row.top1 .pos { color: var(--gold); } .prt-row.top2 .pos { color: #b6bcc7; } .prt-row.top3 .pos { color: #cd7f32; }
.prt-row .pp { text-align: right; font: 800 16px var(--f-display); color: var(--red); }
.pr-round .prt-head, .pr-round .prt-row { grid-template-columns: 30px minmax(70px, 1.2fr) 70px minmax(70px, .9fr) minmax(60px, .8fr) 46px; }
.pr-round { border-bottom: 1px solid var(--line); } .pr-round:last-child { border-bottom: 0; }
.pr-round summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 2px; cursor: pointer; list-style: none; }
.pr-round summary::-webkit-details-marker { display: none; }
.pr-round summary b { font-size: 15px; } .pr-round summary .muted { font-size: 12px; margin-left: auto; }
.pr-round summary .flag { width: 22px; height: 16px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 4px; background: var(--bg-3); font: 800 12px var(--f-body); letter-spacing: .06em; }
.pchip i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }

/* =================== новости на весь экран =================== */
body[data-page="news"] #site-footer { display: none; }
.newsfs { scroll-snap-type: y proximity; }
.nfs { position: relative; display: flex; align-items: flex-end; min-height: calc(100svh - 136px); background-size: cover; background-position: center; color: #fff; scroll-snap-align: start; overflow: hidden; }
@media (min-width: 1100px) { .nfs { min-height: calc(100svh - 30px); } }
.nfs.no-cover { background: radial-gradient(900px 420px at 85% 20%, rgba(255,255,255,.10), transparent 60%),
  repeating-linear-gradient(-14deg, rgba(255,255,255,.05) 0 2px, transparent 2px 46px), linear-gradient(135deg, var(--ink), var(--red-2)); }
.nfs-in { position: relative; z-index: 1; width: 100%; max-width: 1100px; padding: clamp(24px, 6vw, 84px); padding-bottom: clamp(56px, 8vw, 96px); }
.nfs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; font: 700 12px var(--f-body); letter-spacing: .18em; text-transform: uppercase; }
.nfs-meta time { opacity: .85; }
.nfs-n { padding: 4px 10px; border-radius: 4px; background: var(--red); color: #fff; }
.nfs-tag { padding: 4px 10px; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; }
.nfs h2 { max-width: 16ch; margin-bottom: 26px; font: 900 clamp(34px, 6.4vw, 92px)/1 var(--f-display); font-style: italic; text-transform: uppercase; letter-spacing: -.01em; text-shadow: 0 4px 30px rgba(0,0,0,.45); }
.nfs-next { position: absolute; left: 50%; bottom: 22px; z-index: 1; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; font-size: 20px; color: #fff; animation: nfs-bob 1.8s ease-in-out infinite; }
@keyframes nfs-bob { 50% { transform: translateY(6px); } }
.artmodal { position: fixed; inset: 0; z-index: 150; display: grid; justify-items: center; align-items: start; overflow-y: auto; padding: 24px 16px; background: rgba(0,0,0,.72); backdrop-filter: blur(5px); opacity: 0; transition: opacity .22s; }
.artmodal.on { opacity: 1; }
.art { position: relative; width: min(760px, 100%); margin: auto 0; border-radius: var(--r); background: var(--surface); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.art .pm-x { z-index: 2; background: rgba(0,0,0,.55); color: #fff; }
.art-cover { height: clamp(180px, 34vw, 320px); background-size: cover; background-position: center; }
.art-body { padding: 26px clamp(20px, 5vw, 40px) 36px; }
.art-body time { font: 700 12px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.art-body .tag { margin-left: 10px; padding: 3px 9px; border-radius: 4px; background: var(--text); color: var(--bg); font: 700 11px var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.art-body h2 { margin: 10px 0 18px; font: 900 clamp(24px, 4vw, 38px)/1.1 var(--f-display); font-style: italic; }
.art-body p { margin-bottom: 14px; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.lead.has-cover { padding: 0 0 4px; border-left: 0; }
.lead-cover { display: block; aspect-ratio: 16 / 7; margin-bottom: 14px; border-radius: var(--r-sm); background-size: cover; background-position: center; transition: transform .25s, filter .25s; }
.lead-cover:hover { filter: brightness(1.08); transform: translateY(-2px); }
a.nitem { color: inherit; }

/* =================== обложки команд и пилоты =================== */
.teamblocks { grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr)); gap: 22px; }
.tcover { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: 0 18px 44px -20px rgba(0,0,0,.35); }
.tcv-top { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 22px 24px; color: #fff; overflow: hidden;
  background: var(--c) linear-gradient(110deg, rgba(0,0,0,.62), rgba(0,0,0,.08) 72%); }
.tcv-top::after { content: ""; position: absolute; right: -40px; top: -30%; bottom: -30%; width: 150px; background: rgba(255,255,255,.1); transform: skewX(-14deg); pointer-events: none; }
.tcv-mark { position: absolute; right: 14px; bottom: -22px; font: 900 108px/1 var(--f-display); font-style: italic; opacity: .14; pointer-events: none; }
.tcv-logo { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.3); overflow: hidden; z-index: 1; }
.tcv-logo img { width: 100%; height: 100%; object-fit: contain; padding: 9px; }
.tcv-logo i { font: 900 28px var(--f-display); font-style: normal; color: var(--c); }
.tcv-name { z-index: 1; min-width: 0; }
.tcv-name > span { font: 700 11px var(--f-body); letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.tcv-name h2 { margin: 4px 0 4px; font: 900 clamp(22px, 2.6vw, 30px)/1.05 var(--f-display); font-style: italic; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.tcv-name small { font-size: 12px; opacity: .85; }
.tcv-pts { z-index: 1; text-align: right; } .tcv-pts b { display: block; font: 900 40px/1 var(--f-display); font-style: italic; }
.tcv-pts small { font: 700 10px var(--f-body); letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.tcv-stats { display: flex; gap: 0; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.tcv-stats span { flex: 1; padding: 10px 14px; border-right: 1px solid var(--line); font: 700 10px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tcv-stats span:last-child { border-right: 0; } .tcv-stats b { display: block; font: 900 20px/1.1 var(--f-display); color: var(--text); letter-spacing: 0; }
.tcv-pilots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
@media (max-width: 560px) { .tcv-pilots { grid-template-columns: 1fr; } .tcv-top { grid-template-columns: auto 1fr; } .tcv-pts { grid-column: 1 / -1; text-align: left; } }
.pcrd { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); transition: transform .18s, border-color .18s, box-shadow .18s; }
.pcrd:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 14px 30px -14px var(--c); }
.pc-ava { position: relative; width: 82px; height: 82px; }
.pc-ava img, .pc-ava i { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--c); border: 3px solid var(--c); box-shadow: 0 0 0 3px var(--bg-2); color: #fff; font: 900 32px var(--f-display); font-style: normal; }
.pc-no { position: absolute; right: -6px; bottom: -4px; min-width: 30px; padding: 2px 6px; border-radius: 6px; background: var(--ink); color: #fff; font: 900 13px var(--f-display); font-style: italic; text-align: center; box-shadow: 0 0 0 2px var(--bg-2); }
.pc-info { min-width: 0; display: grid; gap: 2px; }
.pc-code { font: 800 11px var(--f-body); letter-spacing: .22em; color: var(--c); }
.pc-info b { display: flex; align-items: center; gap: 8px; font: 800 17px var(--f-display); font-style: italic; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-info b img { width: 20px; height: 15px; border-radius: 2px; flex: none; }
.pc-p { font-size: 12px; color: var(--muted); }
.pc-st { grid-column: 1 / -1; display: flex; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.pc-st span { flex: 1; font: 700 10px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pc-st b { display: block; font: 900 17px/1.1 var(--f-display); color: var(--text); letter-spacing: 0; }
.tcv-res { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 16px 16px; }
.tcv-res .tc-lbl { font: 800 10px var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.psub { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); }
.psub img, .psub i { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--c); color: #fff; font: 900 13px var(--f-display); font-style: normal; }
.psub b { display: block; font-size: 13px; line-height: 1.1; } .psub em { display: block; font: 600 10px var(--f-body); font-style: normal; color: var(--muted); }
/* карточка пилота: аватар крупнее и «горит» цветом команды */
.pm-card { width: min(600px, 100%); }
.pm-ava { width: 120px; height: 120px; box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--c), 0 0 46px -4px var(--c); }
.pm-stats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) { .pm-stats { grid-template-columns: repeat(3, 1fr); } }
.pm-tlogo { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; background: #fff; }
.pm-foot { padding: 16px 24px 0; }

/* =================== Гонщик дня =================== */
.rtabs button.live::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s infinite; vertical-align: middle; }
.dotd-head h3 { font-size: 20px; font-weight: 900; font-style: italic; }
.dotd-head p { margin: 6px 0 14px; max-width: 640px; font-size: 14px; color: var(--text-2); }
.dotd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; font-size: 13px; }
.dotd-login { margin-bottom: 14px; }
.dcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.dc { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 6px 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: var(--r-sm); background: var(--surface); transition: transform .15s, box-shadow .15s; }
.dc:hover { transform: translateY(-2px); }
.dc.mine { box-shadow: 0 0 0 2px var(--c); }
.dc.win { background: linear-gradient(135deg, var(--surface), var(--red-soft)); box-shadow: 0 0 0 2px var(--gold); }
.dc-crown { position: absolute; top: -10px; right: 12px; padding: 2px 10px; border-radius: 4px; background: var(--gold); color: #10101a; font: 800 10px var(--f-body); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.dc-ava { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--c); }
.dc-ava img { width: 100%; height: 100%; object-fit: cover; } .dc-ava i { font: 900 22px var(--f-display); font-style: normal; color: #fff; }
.dc-who b { display: block; font: 800 16px var(--f-display); font-style: italic; text-transform: uppercase; } .dc-who span { font-size: 12px; color: var(--muted); }
.dc-bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; } .dc-bar i { display: block; height: 100%; background: var(--c); transition: width .6s; }
.dc-n { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; } .dc-n b { font: 900 20px var(--f-display); } .dc-n span { font-size: 12px; color: var(--muted); }
.dc-act { grid-column: 1 / -1; min-height: 24px; display: flex; align-items: center; }
.dotd-mine { font: 800 12px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.dotd-wait { padding: 12px 0; }

/* =================== FIA =================== */
.fia-head { position: relative; padding-top: 30px; border-bottom: 0; }
.fia-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--red) 0 22%, var(--ink) 22% 100%); border-radius: 2px; }
.fia-head .idx { display: inline-grid; place-items: center; padding: 14px 22px 12px; border-radius: 8px; border-left: 8px solid var(--red);
  background: linear-gradient(135deg, #20202c, #0a0a10); color: #fff; font: 900 clamp(44px, 6vw, 70px)/1 var(--f-display); font-style: italic; letter-spacing: .08em; box-shadow: 0 14px 34px -14px rgba(0,0,0,.6); }
.inc { position: relative; padding: 18px 20px 16px 22px; border-left: 5px solid var(--line-strong); background: var(--surface); box-shadow: 0 10px 28px -20px rgba(0,0,0,.5); }
.inc:has(.badge-done) { border-left-color: var(--green); } .inc:has(.badge-next) { border-left-color: var(--red); } .inc:has(.badge-soon) { border-left-color: var(--gold); }
.inc header b { font: 800 15px var(--f-display); font-style: italic; text-transform: uppercase; }
.inc-flash { animation: inc-flash 2.2s ease-out; }
@keyframes inc-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--red), 0 0 40px -6px var(--red); } 100% { box-shadow: 0 10px 28px -20px rgba(0,0,0,.5); } }
.ichat { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: visible; background: var(--bg-2); }
.cform { position: relative; }
.mlist { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 10; max-height: 220px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.mlist[hidden] { display: none; }
.mlist button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; border: 0; background: transparent; text-align: left; font: 600 14px var(--f-body); color: var(--text); }
.mlist button em { margin-left: auto; font: 700 10px var(--f-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mlist button.on, .mlist button:hover { background: var(--red-soft); }
.mlist button i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font: 800 12px var(--f-body); font-style: normal; }
.cmsg .mention { padding: 0 5px; border-radius: 4px; background: var(--red-soft); color: var(--red); font-weight: 800; }
.cmsg .mention.me { background: var(--red); color: #fff; }
.cmsg.ping { box-shadow: inset 4px 0 0 var(--red); }
.cform-hint { margin-top: 6px; font-size: 11px; color: var(--muted); }

/* =================== кабинет =================== */
.cab { display: grid; gap: 16px; }
.cab-top { display: grid; gap: 16px; }
@media (min-width: 900px) { .cab-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.cab-id { display: flex; align-items: center; gap: 16px; }
.cab-ava { width: 88px; height: 88px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--red); box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--c, var(--red)); }
.cab-ava img { width: 100%; height: 100%; object-fit: cover; } .cab-ava i { font: 900 34px var(--f-display); font-style: normal; color: #fff; }
.cab-id h3 { font: 900 24px var(--f-display); font-style: italic; }
.cab-id p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.cab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
@media (max-width: 560px) { .cab-stats { grid-template-columns: repeat(2, 1fr); } }
.cab-stats div { padding: 10px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--bg-2); text-align: center; }
.cab-stats b { display: block; font: 900 22px/1.1 var(--f-display); font-style: italic; }
.cab-stats span { font: 700 9px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cab-team { display: grid; gap: 10px; }
.cab-trow { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cab-trow:last-child { border-bottom: 0; } .cab-trow b { font-weight: 700; } .cab-trow span { color: var(--muted); font-size: 12px; }
.cab-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cab-links a { display: grid; gap: 3px; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); transition: border-color .15s, transform .15s, background .15s; }
.cab-links a:hover { border-color: var(--red); background: var(--red-soft); transform: translateY(-2px); }
.cab-links b { font: 800 14px var(--f-display); font-style: italic; text-transform: uppercase; } .cab-links span { font-size: 12px; color: var(--muted); }
.cab-inc { display: grid; gap: 8px; }
.cab-inc a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--bg-2); font-size: 13px; }
.cab-inc a:hover { border-color: var(--red); } .cab-inc a span:last-child { margin-left: auto; color: var(--muted); font-size: 12px; }

/* =================== админка: обложки, логотипы, секторы =================== */
.upl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.upl-pre { width: 96px; height: 54px; border: 1px dashed var(--line-strong); border-radius: 6px; background: var(--bg-3) center / cover no-repeat; display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.upl-pre.logo { width: 54px; height: 54px; background-size: contain; background-color: #fff; }
.sec-grid { display: grid; gap: 10px; grid-template-columns: 70px 1fr 1.4fr; align-items: center; max-width: 620px; }
.sec-grid > b { font: 800 16px var(--f-display); }

/* карточки FIA на телефоне: элементы сетки и их поля обязаны уметь сжиматься, иначе страница ползёт вбок */
.inc-list > .inc, .inc-list > * { min-width: 0; }
.cform input, .inc-form input, .inc-form select, .ichat-body { min-width: 0; }
.cform { gap: 8px; }
.inc, .ichat, .cmsgs { max-width: 100%; }