:root {
  --orange: #F26B21; --black: #1A1A1A; --gray: #595959;
  --bg: #FAFAFA; --card: #fff; --line: #E8E8E8;
  --red: #C0392B; --green: #1E8E3E; --yellow: #B7791F;
}
* { box-sizing: border-box; margin: 0; }
body { font-family: 'Montserrat', -apple-system, sans-serif; background: var(--bg); color: var(--black); font-size: 14px; }
a { color: var(--orange); text-decoration: none; }
.topbar { background: var(--black); color: #fff; padding: 14px 28px; display: flex; align-items: center; gap: 14px; border-bottom: 3px solid var(--orange); position: sticky; top: 0; z-index: 50; }
.topbar .right a { padding: 6px 10px; border-radius: 7px; }
.topbar .right a:hover { background: rgba(255,255,255,.08); }
.topbar .right a.active { background: var(--orange); color: #fff; }
.totop { position: fixed; right: 22px; bottom: 22px; width: 42px; height: 42px; border-radius: 50%;
  background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; opacity: 0; transition: opacity .25s; z-index: 60;
  box-shadow: 0 3px 10px rgba(26,26,26,.25); }
.totop:hover { text-decoration: none; filter: brightness(.93); }
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 14px; }
.fbtn { border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 7px 15px;
  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; }
.fbtn.on { background: var(--black); color: #fff; border-color: var(--black); }
.fbtn.on.f-fit { background: var(--green); border-color: var(--green); }
.fbtn.on.f-cond { background: var(--yellow); border-color: var(--yellow); }
.fbtn.on.f-no { background: var(--red); border-color: var(--red); }
.fsearch { flex: 1; min-width: 180px; max-width: 320px; padding: 8px 13px !important; border-radius: 20px !important; }
.logo { font-weight: 800; font-size: 17px; letter-spacing: .5px; }
.logo span { color: var(--orange); }
.topbar .right { margin-left: auto; font-size: 12px; color: #bbb; }
.topbar .right a { color: #fff; margin-left: 14px; }
.wrap { max-width: 1080px; margin: 26px auto; padding: 0 20px; }
h1 { font-size: 22px; margin-bottom: 6px; }
h2 { font-size: 16px; margin: 22px 0 10px; }
.muted { color: var(--gray); font-size: 12.5px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(26,26,26,.04); }
.cand { transition: box-shadow .15s; }
.cand:hover { box-shadow: 0 3px 12px rgba(242,107,33,.12); }
.btn { transition: transform .1s, filter .15s; }
.btn:active { transform: scale(.98); }
a:hover { text-decoration: underline; }
.topbar a:hover, .tbl a:hover { text-decoration: none; }
textarea, input[type=text], input[type=password] { width: 100%; padding: 11px 13px; border: 1px solid #ccc; border-radius: 9px; font: inherit; }
textarea { min-height: 110px; resize: vertical; }
label { font-size: 12px; color: var(--gray); display: block; margin: 12px 0 5px; font-weight: 600; }
.btn { display: inline-block; background: var(--orange); color: #fff; font-weight: 700; border: 0; border-radius: 9px; padding: 11px 22px; cursor: pointer; font: inherit; font-weight: 700; margin-top: 14px; }
.btn:hover { filter: brightness(.93); }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.b-fit { background: #E6F4EA; color: var(--green); }
.b-cond { background: #FDF3E1; color: var(--yellow); }
.b-no { background: #FDECEA; color: var(--red); }
.b-demo { background: #EEE; color: var(--gray); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11.5px; color: #fff; background: var(--orange); padding: 9px 12px; }
.tbl th:first-child { border-radius: 8px 0 0 0; } .tbl th:last-child { border-radius: 0 8px 0 0; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:hover td { background: #FFF7F1; }
.cand { border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: 10px; padding: 18px; margin-bottom: 14px; background: #fff; }
.cand.no { border-left-color: var(--red); }
.cand.cond { border-left-color: var(--yellow); }
.cand h3 { font-size: 15.5px; margin-bottom: 3px; }
.metrics { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.metric { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 13px; min-width: 118px; }
.metric b { display: block; font-size: 15px; color: var(--orange); }
.metric.dark b { color: var(--black); }
.metric small { color: var(--gray); font-size: 10.5px; }
.flag { padding: 7px 11px; border-radius: 8px; margin: 5px 0; font-size: 12.5px; }
.f-red { background: #FDECEA; color: #7c1d12; }
.f-yellow { background: #FDF3E1; color: #6b4a10; }
.f-gray { background: #F1F1F1; color: var(--gray); }
.score { font-size: 26px; font-weight: 800; }
.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--gray); font-weight: 700; margin: 12px 0 4px; }
.login-box { max-width: 360px; margin: 12vh auto; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 20px; padding: 7px 14px; cursor: pointer; background: #fff; font-size: 13px; }
.chip:has(input:checked) { border-color: var(--orange); background: #FFF3EA; font-weight: 600; }
.chip input { accent-color: var(--orange); }
.pl { display:inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; color: #fff; vertical-align: 1px; }
.pl-YouTube { background: #c4302b; } .pl-Telegram { background: #2AABEE; }
.pl-VK { background: #0077FF; } .pl-Twitch { background: #9146FF; } .pl-MAX { background: #7b68ee; }
.scorebar { height: 6px; border-radius: 4px; background: #EEE; overflow: hidden; margin-top: 5px; width: 120px; }
.scorebar i { display: block; height: 100%; background: var(--orange); }
.summary-tbl td, .summary-tbl th { font-size: 12.5px; }
.summary-tbl a { font-weight: 600; color: var(--black); }
.spin { display:inline-block; width:14px; height:14px; border:2px solid var(--orange); border-top-color: transparent; border-radius:50%; animation: r 1s linear infinite; vertical-align: -2px; }
@keyframes r { to { transform: rotate(360deg);} }
@media print { .topbar, .no-print { display: none; } body { background: #fff; } }