:root {
    --bg: #f3f4f8;
    --card: #ffffff;
    --soft: #f7f8fa;
    --ink: #171921;
    --dim: #6b6f7b;
    --line: #e6e8ef;
    --chip: #f7f8fa;
    --dark: #171921;
    --on-dark: #ffffff;
    --good: #1f9254;
    --good-bg: #eaf7ef;
    --bad: #c23a3a;
    --bad-bg: #fbeeee;
    --home: #1f9254;
    --draw: #9aa0ad;
    --away: #3b63c4;
    --focus: #3b63c4;
    --sel-bg: #ecf4ff; --sel-line: #d7e7fc; --sel-ink: #0161da;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #111216; --card: #1a1c22; --soft: #20232a; --ink: #eceef3; --dim: #9aa0ad;
      --line: #2c2f38; --chip: #20232a; --dark: #eceef3; --on-dark: #111216;
      --good: #4cc584; --good-bg: #16261d; --bad: #ea7a7a; --bad-bg: #2a1a1a;
      --home: #4cc584; --draw: #7c8290; --away: #7ea2f0;
      --sel-bg: #17263d; --sel-line: #25406a; --sel-ink: #7ea2f0;
    }
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
  body { overflow-x: clip; }   /* на iOS широкая полоса/строка внутри прокрутки не должна раздвигать страницу и давать серое поле справа */
  .wrap, main, .view, .panel { min-width: 0; max-width: 100%; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 13px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  }
  button, input, select { font: inherit; color: inherit; }
  .num { font-variant-numeric: tabular-nums; }

  /* шапка */
  /* шапка не прилипает: при прокрутке уезжает вместе со страницей */
  .top { background: var(--card); border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
  .top-in { max-width: 1240px; margin: 0 auto; padding: 0 16px; height: 56px; display: flex; align-items: center; gap: 20px; }
  /* знак F16: угловатые буквы с наклоном, F сложена как разряд молнии */
  /* подложка — параллелограмм: обе боковые грани наклонены так же, как буквы (skewX -12°) */
  .logo { display: inline-flex; align-items: center; text-decoration: none; height: 32px; padding: 0 11px; background: var(--dark); clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
  .logo svg { height: 18px; width: auto; display: block; }
  .foot { max-width: 1240px; margin: 8px auto 0; padding: 16px 16px 32px; color: var(--dim); font-size: 12px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .foot .age { font-weight: 800; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 6px; padding: 0 5px; }
  .nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    border: 0; background: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; text-decoration: none;
    font-weight: 600; color: var(--dim); white-space: nowrap;
  }
  .nav a:hover { color: var(--ink); background: var(--soft); }
  .nav a.on { color: var(--ink); background: var(--soft); }

  .wrap { max-width: 1240px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  .side { display: none; }   /* панель фильтров убрана везде: дата, лига и сортировка есть в самой ленте */
  .wrap.single { grid-template-columns: minmax(0, 1fr); }
  .panel { background: var(--card); border-radius: 12px; padding: 20px 24px; }
  .panel + .panel { margin-top: 12px; }
  h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
  h2 { font-size: 18px; font-weight: 700; margin: 0 0 12px; }
  h3 { font-size: 14px; font-weight: 700; margin: 16px 0 8px; }
  .sub { color: var(--dim); margin: 0 0 16px; }
  .warn { background: var(--bad-bg); color: var(--bad); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-weight: 600; }

  /* чипсы */
  .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
  .chip {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px;
    border-radius: 8px; border: 1px solid var(--line); background: var(--chip);
    font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  .chip:hover { border-color: var(--dim); }
  .chip.on { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
  .chip svg { width: 16px; height: 16px; flex: none; }
  .chip small { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--line); color: var(--dim); }
  .chip.on small { background: rgba(127,127,127,.35); color: inherit; }
  .chips.leagues .chip { height: 32px; font-weight: 500; }

  .listbar { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin: 20px 0 12px; gap: 8px 16px; }
  .listbar h2 { flex: none; min-width: 0; margin-right: 8px; }
  .listbar { justify-content: center; }
  .listbar .mtabs, .listbar .select { align-self: center; }
  .listbar .mtabs button, .listbar .select { height: 36px; font-size: 12px; font-weight: 700; line-height: 1; padding: 0 14px; }
  .listbar .select { padding-right: 8px; }
  @media (max-width: 960px) {   /* телефон: счётчик слева, переключатель и сортировка прижаты вправо */
    .listbar { justify-content: flex-end; }
    .listbar h2 { display: none; }   /* счётчик прогнозов на телефоне убран */
    .listbar .select { margin-left: auto; }
    .listbar .mtabs button { padding: 0 10px; }
  }
  #count { display: flex; gap: 18px; font-size: 13px; }
  #count span { display: flex; flex-direction: column; line-height: 1.15; }
  #count b { font-size: 17px; }
  #count small { font-size: 11px; font-weight: 500; color: var(--dim); }
  #count .hit b { color: var(--good); }
  .listbar h2 { margin: 0; }
  .select {
    height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--card);
    padding: 0 8px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; cursor: pointer;
  }

  .day { font-weight: 700; color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 8px; }

  /* карточка прогноза */
  .card { background: var(--card); border-radius: 12px; margin-bottom: 10px; border: 1px solid transparent; }
  .card.hit { background: var(--good-bg); }
  .card.miss { background: var(--bad-bg); }
  .card-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 0; color: var(--dim); }
  .card-head .lg { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
  .card-head .lg svg { width: 16px; height: 16px; }
  .card-head .time { margin-left: auto; }
  .match {
    display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer;
  }
  .match:hover { border-color: var(--dim); }
  .card.hit .match, .card.miss .match { background: transparent; }
  .av.logo { background: #fff; border: 1px solid var(--line); object-fit: contain; padding: 2px; display: block; }
  .flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex: none; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(127,127,127,.35); }
  .crumbs .flag { margin-right: 2px; }
  .av {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
    font-size: 10px; font-weight: 800; color: #fff; letter-spacing: -.02em;
  }
  .match .teams { font-weight: 700; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .match .kick { margin-left: auto; color: var(--dim); white-space: nowrap; }
  .tip { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px 0; font-size: 14px; }
  .tip + .tip { padding-top: 8px; }
  .rate {
    background: var(--dark); color: var(--on-dark); border-radius: 8px; padding: 2px 8px;
    font-weight: 700; font-size: 14px; flex: none; min-width: 48px; text-align: center;
  }
  .rate.ghost { background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
  .tip b { font-weight: 800; text-transform: uppercase; }
  .tip .why { color: var(--ink); }
  .tip .why .dim { color: var(--dim); }
  .bars { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 6px; padding: 12px 16px 0; }
  .bars div { font-size: 11px; color: var(--dim); }
  .bars b { color: var(--ink); font-size: 12px; margin-left: 4px; }
  .bars i { display: block; height: 4px; border-radius: 2px; margin-top: 4px; background: var(--line); overflow: hidden; }
  .bars i span { display: block; height: 100%; border-radius: 2px; }
  .card-foot { display: flex; align-items: center; gap: 4px; padding: 10px 10px 10px; margin-top: 10px; border-top: 1px solid var(--line); }
  .card.hit .card-foot, .card.miss .card-foot { border-top-color: rgba(127,127,127,.18); }
  .ghost-btn {
    display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer;
    padding: 6px 8px; border-radius: 8px; font-weight: 600; color: var(--dim);
  }
  .ghost-btn:hover { background: var(--soft); color: var(--ink); }
  .ghost-btn svg { width: 16px; height: 16px; }
  .status { margin-left: auto; font-weight: 700; padding: 4px 10px; }
  .status.hit { color: var(--good); }
  .status.miss { color: var(--bad); }

  /* все рынки */
  .markets { display: none; padding: 4px 16px 14px; }
  .markets.open { display: block; }
  .mk { margin-top: 12px; }
  .mk h4 { margin: 0 0 6px; font-size: 11px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
  .mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
  .mk-item { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; align-items: center; background: var(--card); }
  .mk-item .l { font-weight: 700; }
  .mk-item .p { color: var(--dim); text-align: right; }
  .scores { color: var(--dim); margin-top: 10px; }

  /* матчи: расписание по дням */
  .star { width: 16px; height: 16px; flex: none; }
  .star path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
  .chip.on .star path, .fav.on .star path { fill: currentColor; }
  .mbar { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 14px; }
  .mbar .chips { margin-bottom: 0; }
  .mrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
  .mtabs { display: flex; gap: 6px; }
  .mtabs button {
    height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--dim);
    padding: 0 10px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; cursor: pointer;
  }
  .mtabs button.on, .day-btn.on { background: var(--sel-bg); border-color: var(--sel-line); color: var(--sel-ink); }
  .days { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; justify-content: flex-end; }
  .strip { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; position: relative; max-width: 100%; }
  .strip::-webkit-scrollbar { display: none; }
  .day-btn {
    flex: none; min-width: 38px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--card);
    color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
  }
  .day-btn span { font-size: 9px; text-transform: uppercase; color: var(--dim); }
  .day-btn.on span { color: inherit; }
  .day-btn b { font-size: 13px; }
  .day-btn.today b::after { content: ''; display: block; height: 2px; border-radius: 1px; background: currentColor; margin-top: 1px; }
  .dnav { width: 28px; height: 40px; border: 0; background: none; font-size: 20px; color: var(--dim); cursor: pointer; border-radius: 8px; }
  .dnav:hover:not(:disabled) { background: var(--card); color: var(--ink); }
  .dnav:disabled { opacity: .3; cursor: default; }
  .thead { display: flex; align-items: center; gap: 14px; }
  .thead .av { width: 56px; height: 56px; font-size: 18px; }
  .thead h1 { margin: 0; }
  .thead .sub { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; }
  .thead .flag, .thead .sub svg { width: 18px; height: 13px; }
  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
  .tile { background: var(--card); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
  .tile span { color: var(--dim); font-size: 12px; }
  .tile b { font-size: 20px; }
  .kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
  .kv:first-of-type { border-top: 0; }
  .tile small { color: var(--dim); font-size: 11px; }
  a.tlink, a.tname { color: inherit; text-decoration: none; }
  a.tlink:hover, a.tname:hover { text-decoration: underline; }
  .foot a { color: inherit; }
  .leagues-nav { max-width: 1240px; margin: 24px auto 0; padding: 0 16px; font-size: 12px; color: var(--dim); }
  .leagues-nav .ln-row { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
  .leagues-nav a { color: var(--dim); text-decoration: none; }
  .leagues-nav a:hover { color: var(--ink); text-decoration: underline; }
  .hitstat { margin: 4px 0 14px; }
  .hitstat .tabs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
  .hitstat th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
  .hitstat th.sortable:hover { color: var(--dark); }
  .hitstat th.sorted::after { content: ' ▲'; font-size: 10px; }
  .hitstat th.sorted.desc::after { content: ' ▼'; }
  .hitstat td.pct-hi { color: var(--ok, #1a7f3c); font-weight: 700; }
  .hitstat td.pct-lo { color: var(--bad, #c0392b); font-weight: 700; }
  .rescal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
  .rescal input[type=date] { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit; }
  .rescal .btn { padding: 7px 12px; }
  .rescal .btn[disabled] { opacity: .4; cursor: default; }
  .fdays { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .fdays .strip { flex: 1; min-width: 0; }
  .fdays .day-btn { height: 46px; min-width: 42px; }
  .fdays .day-btn.wide { padding: 0 12px; font-weight: 700; font-size: 12px; }
  .fdays .day-btn small { font-size: 9px; color: var(--dim); min-height: 10px; }
  .fdays .day-btn.on small { color: inherit; }
  .fdays .day-btn.quiet:not(.on) { opacity: .5; }
  .fdays .cal { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--dim); cursor: pointer; }
  .fdays .cal:hover, .fdays .cal:focus-within { color: var(--ink); }
  .fdays .cal input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .mg { background: var(--soft); border-radius: 10px; padding: 0 8px 8px; margin-bottom: 12px; }
  .mg-h { display: flex; align-items: center; gap: 8px; padding: 10px 4px; font-weight: 700; }
  .mg-h .flag, .mg-h svg { width: 18px; height: 13px; }
  .mg-h small { margin-left: auto; color: var(--dim); font-weight: 600; }
  .pl-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 4px 12px; }
  .pl-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: inherit; text-decoration: none; font-weight: 600; }
  a.pl-chip:hover { border-color: var(--dark); }
  .pl-chip small { color: var(--dim); font-weight: 500; }
  .mg-b { background: var(--card); border-radius: 8px; overflow: hidden; }
  .mr { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px 6px 4px; color: inherit; text-decoration: none; border-top: 1px solid var(--line); }
  .mr:first-child { border-top: 0; }
  .mr:hover { background: var(--soft); }
  .mr .fav { border: 0; background: none; color: var(--dim); cursor: pointer; padding: 6px; border-radius: 8px; display: grid; place-items: center; }
  .mr .fav:hover { color: var(--ink); }
  .mr .fav.on { color: #e0a800; }
  .mr .when { display: flex; flex-direction: column; min-width: 42px; line-height: 1.25; }
  .mr .when b { font-size: 13px; }
  .mr .when span { color: var(--dim); font-size: 11px; }
  .mr .tm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .mr .tm div { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
  .mr .tm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mr .av { width: 20px; height: 20px; font-size: 8px; }
  .mr .res { display: flex; align-items: center; gap: 8px; flex: none; }
  .mr .pp { display: grid; grid-template-columns: repeat(3, 40px); text-align: center; }
  .mr .pp.two { grid-template-columns: repeat(2, 40px); }
  .mr .pp .n span { display: block; font-size: 10px; color: var(--dim); }
  .mr .pp .n b { font-size: 13px; }
  .mr .pp .best b { color: var(--good); }
  .mr .sc { font-weight: 800; font-size: 15px; white-space: nowrap; min-width: 62px; text-align: right; }
  .mr .sc small { font-weight: 600; color: var(--dim); font-size: 11px; margin-left: 4px; }
  .mr .mdl { font-size: 12px; font-weight: 800; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; }
  .mr .mdl.none { visibility: hidden; }
  .mr .st { min-width: 120px; text-align: right; }
  .mr .mdl.hit { background: var(--good-bg); color: var(--good); }
  .mr .mdl.miss { background: var(--bad-bg); color: var(--bad); }
  .mr .st { color: var(--dim); font-size: 12px; white-space: nowrap; }
  .fr { min-height: 64px; }
  .rowcomp { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--dim); }
  .rowcomp .flag, .rowcomp svg { width: 14px; height: 10px; flex: none; }
  .mr.hit { background: var(--good-bg); box-shadow: inset 3px 0 0 var(--good); }
  .mr.miss { background: var(--bad-bg); box-shadow: inset 3px 0 0 var(--bad); }
  .mr.hit:hover { background: var(--good-bg); }
  .mr.miss:hover { background: var(--bad-bg); }
  /* очки — справа в строке каждой команды, столбиком */
  .fr.played .tm .gs { margin-left: auto; padding-left: 10px; min-width: 24px; text-align: right; font-size: 15px; font-weight: 800; flex: none; }
  .fr.played .tm { padding-right: 8px; }
  .fr .pp.odds { display: grid; grid-template-columns: repeat(3, 62px); align-self: stretch; margin: -6px 0; }
  .fr .pp.odds.two { grid-template-columns: repeat(2, 62px); }
  .fr .pp.odds .n { display: flex; flex-direction: column; justify-content: center; }
  .fr .pp.odds .n b { font-size: 14px; }
  .fr .tipchip { flex: none; min-width: 44px; text-align: center; font-weight: 700; font-size: 13px; padding: 4px 6px; border-radius: 6px; background: var(--soft); }
  .fr .plus { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 20px; font-weight: 600; background: var(--soft); color: var(--ink); }
  .fr:hover .plus { background: var(--ink); color: var(--card); }
  @media (max-width: 600px) {
    .fr .pp.odds { display: grid; grid-template-columns: repeat(3, 40px); }
    .fr .pp.odds.two { grid-template-columns: repeat(2, 40px); }
    .fr .pp.odds .n:not(.best) { display: flex; }
    .fr .pp.odds .n.best span, .fr .pp.odds .n.best b { display: block; margin: 0; }
    .fr .pp.odds .n.best b::after { content: none; }
    .fr .pp.odds .n b { font-size: 12px; }
    .fr .tipchip { display: none; }
    .fr .plus { display: none; }
  }
  @media (max-width: 600px) {
    .mr { gap: 8px; padding-right: 8px; }
    .mr .pp { display: block; min-width: 54px; text-align: right; }
    .mr .sc { min-width: 46px; }
    .mr .st { min-width: 54px; }
    .mr .pp .n:not(.best) { display: none; }
    .mr .pp .n.best span, .mr .pp .n.best b { display: inline; font-size: 12px; margin-right: 3px; }
    .mr .pp .n.best b::after { content: '%'; }
    .days { justify-content: flex-start; flex-basis: 100%; }
  }

  /* результаты */
  .res-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
  .res-row:hover { background: var(--soft); }
  .res-row .t { color: var(--dim); min-width: 42px; font-size: 12px; }
  .res-row .teams { flex: 1; min-width: 0; font-weight: 600; }
  .res-row .teams small { display: block; color: var(--dim); font-weight: 400; font-size: 11px; }
  .res-row .sc { font-weight: 800; font-size: 15px; white-space: nowrap; }
  .res-row .sc small { font-weight: 600; color: var(--dim); font-size: 11px; margin-left: 4px; }
  .res-row .mdl { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 8px; white-space: nowrap; min-width: 92px; text-align: center; }
  .res-row .mdl.hit { background: var(--good-bg); color: var(--good); }
  .res-row .mdl.miss { background: var(--bad-bg); color: var(--bad); }
  .res-row .mdl.none { color: var(--dim); font-weight: 500; }
  @media (max-width: 600px) { .res-row .mdl { min-width: 0; } .res-row .mdl span { display: none; } }

  /* страница матча */
  .crumbs { color: var(--dim); font-size: 12px; margin-bottom: 10px; }
  .crumbs svg { width: 14px; height: 14px; vertical-align: -2px; }
  .crumbs a { color: var(--dim); text-decoration: none; }
  .crumbs a:hover { color: var(--ink); text-decoration: underline; }
  .mhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .mhead .side-team { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 100px; text-align: center; }
  .mhead .av { width: 44px; height: 44px; font-size: 16px; }
  .mhead .tname { font-weight: 700; font-size: 15px; }
  .mhead .mid { text-align: center; color: var(--dim); font-size: 12px; min-width: 80px; }
  .mhead .score { font-size: 26px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
  .m-tip { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); }
  .m-tip .rate { min-width: 56px; font-size: 16px; }
  .m-tip .why b { text-transform: uppercase; }
  .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media (max-width: 640px) { .cols2 { grid-template-columns: 1fr; } }
  .form-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; }
  .form-row .opp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
  .form-row .dim { color: var(--dim); }
  .pill { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; font-size: 11px; font-weight: 800; color: #fff; flex: none; }
  .pill.W { background: var(--home); }
  .pill.D { background: var(--draw); }
  .pill.L { background: var(--bad); }
  .pills { display: flex; gap: 4px; }
  .story p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; }
  .story p:last-child { margin-bottom: 0; }

  /* «Как прошёл матч»: события, статистика, составы */
  .evs { padding: 12px 16px; }
  .evh { font-weight: 700; font-size: 13px; color: var(--dim); margin-bottom: 4px; }
  .ev { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; border-top: 1px solid var(--line); }
  .ev .evt { color: var(--dim); min-width: 84px; font-size: 13px; }
  .ev .evw { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .ev .av { width: 20px; height: 20px; font-size: 9px; flex: none; }
  .ev.away { color: var(--ink); }
  .card { width: 9px; height: 13px; border-radius: 2px; display: inline-block; flex: none; }
  .card.yel { background: #f4c20d; }
  .card.red { background: #e5484d; }
  .sbar { display: grid; grid-template-columns: 44px 1fr 44px; gap: 2px 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
  .sbar:first-child { border-top: 0; }
  .sbar span { text-align: center; color: var(--dim); }
  .sbar b:last-of-type { text-align: right; }
  .sbar i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 4px; background: var(--away); overflow: hidden; }
  .sbar i span { display: block; height: 100%; background: var(--home); }
  .lineup { margin-top: 6px; }
  .lineup > div { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; border-top: 1px solid var(--line); }
  .lineup > div:first-child { border-top: 0; }
  .lineup i { color: var(--dim); font-style: normal; font-size: 11px; }
  .lnote { color: var(--dim); font-size: 12px; margin-top: 4px; }

  tbody tr.me { background: var(--soft); font-weight: 700; }

  /* все клубы: турнир — заголовок, команды — плитками */
  .clubs-league h2 { display: flex; align-items: center; gap: 8px; }
  .clubs-league h2 .flag { width: 18px; height: 13px; flex: none; }
  .clubs-league h2 svg { width: 18px; height: 18px; flex: none; }   /* у турнира без флага — значок вида спорта */
  .clubs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 12px; margin-top: 6px; }
  .club { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14px; }
  .club:hover { background: var(--soft); }
  .club .av { width: 22px; height: 22px; font-size: 9px; flex: none; }
  .chip .cnt { margin-left: 6px; font-size: 11px; color: var(--dim); font-weight: 700; }

  .h2h-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; border-top: 1px solid var(--line); }
  .h2h-row:first-child { border-top: 0; }
  .h2h-row .d { color: var(--dim); min-width: 76px; white-space: nowrap; }
  .h2h-row .s { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
  .trend { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; }
  .trend .tdot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }

  /* фильтры справа */
  .side { position: sticky; top: 72px; }
  .side .panel { padding: 0; overflow: hidden; }
  .side-head { display: none; }
  .sec { border-top: 1px solid var(--line); }
  .sec-h { display: flex; align-items: center; gap: 8px; padding: 12px 20px; font-weight: 700; cursor: pointer; user-select: none; }
  .sec-h svg { width: 16px; height: 16px; margin-left: auto; transition: transform .15s; }
  .sec.closed .sec-h svg { transform: rotate(-90deg); }
  .sec-b { padding: 0 20px 14px; }
  .sec.closed .sec-b { display: none; }
  .seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .seg .chip { justify-content: center; height: 32px; }
  .check { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; }
  .check input { width: 16px; height: 16px; accent-color: var(--dark); }
  .range { width: 100%; accent-color: var(--dark); }
  .near { max-height: 260px; overflow: auto; margin: 0 -8px; }
  .near button {
    display: flex; width: 100%; gap: 8px; align-items: center; text-align: left; border: 0; background: none;
    padding: 6px 8px; border-radius: 8px; cursor: pointer;
  }
  .near button:hover { background: var(--soft); }
  .near .t { color: var(--dim); font-size: 11px; white-space: nowrap; }
  .near .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-foot { padding: 12px 20px 16px; border-top: 1px solid var(--line); }
  .btn { height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--soft); font-weight: 700; cursor: pointer; padding: 0 14px; }
  .btn.dark { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
  .btn:hover { filter: brightness(.97); }
  .filters-toggle { display: none; }

  /* таблицы */
  table { width: 100%; border-collapse: collapse; }
  th, td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
  th:first-child, td:first-child, th.l, td.l { text-align: left; }
  th { color: var(--dim); font-weight: 600; font-size: 12px; }
  tbody tr:hover { background: var(--soft); }
  .scroll { overflow-x: auto; }
  .tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--soft); border: 1px solid var(--line); color: var(--dim); margin-left: 6px; }
  .win { color: var(--good); font-weight: 700; }
  .lose { color: var(--bad); font-weight: 700; }
  .wait { color: var(--dim); }
  .stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .stat { background: var(--soft); border-radius: 10px; padding: 10px 14px; min-width: 110px; }
  .stat b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
  .stat span { color: var(--dim); font-size: 12px; }
  .empty { padding: 40px 20px; text-align: center; color: var(--dim); }
  .empty code { display: block; margin: 8px auto; font-size: 13px; color: var(--ink); }
  .note { color: var(--dim); margin: 8px 0; }
  .advice li { margin: 4px 0; }
  .view { display: none; }
  .view.on { display: block; }

  @media (max-width: 960px) {
    .wrap { grid-template-columns: minmax(0, 1fr); }
    .side { display: none; }   /* на планшете и телефоне панель фильтров убрана: дата, лига и сортировка есть в самой ленте */
    .side .panel.collapsed .sec, .side .panel.collapsed .side-foot { display: none; }
    .filters-toggle { display: inline-flex; }
  }
  /* поиск матчей в шапке: подсказки — над содержимым страницы */
  .search { position: relative; flex: none; width: 250px; margin-left: auto; }
  .search input {
    width: 100%; height: 34px; padding: 0 10px 0 32px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--soft); color: var(--ink); font: inherit; font-size: 13px;
  }
  .search input::placeholder { color: var(--dim); }
  .search input:focus { outline: none; border-color: var(--sel-line); background: var(--card); }
  .search input::-webkit-search-cancel-button { cursor: pointer; }
  .search .si { position: absolute; left: 9px; top: 9px; width: 16px; height: 16px; color: var(--dim); pointer-events: none; }
  .sres {
    position: absolute; top: 40px; left: 0; right: 0; z-index: 9; max-height: 70vh; overflow-y: auto;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 28px rgba(0, 0, 0, .14);
  }
  .sres a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; text-decoration: none; color: var(--ink); border-top: 1px solid var(--line); }
  .sres a:first-child { border-top: 0; }
  .sres a.on, .sres a:hover { background: var(--soft); }
  .sres .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sres .sub { display: block; font-weight: 400; font-size: 11px; color: var(--dim); }
  .sres .sc { font-weight: 800; font-size: 13px; }
  .sres .none { padding: 10px; font-size: 13px; color: var(--dim); }

  .burger { display: none; }
  @media (max-width: 600px) {
    .top-in { gap: 10px; }
    .nav { flex: 1; min-width: 0; }
    .nav a { display: none; }   /* на телефоне в шапке — знак, поиск и гамбургер; пункты меню внутри гамбургера */
    .search { width: auto; flex: 1 1 auto; min-width: 0; margin-left: 0; }
    .top.open .nav a { display: block; }
    .burger { display: grid; place-items: center; flex: none; margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
    .burger:hover, .top.open .burger { background: none; }
    /* на телефоне шапка без белой плашки: знак и меню лежат прямо на фоне страницы */
    .top { background: transparent; border-bottom: 0; }
    .top.open .nav { position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 12px 12px; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(0, 0, 0, .12); }
    .top.open .nav a { display: block; padding: 12px; font-size: 15px; }
    .logo { padding: 0 10px; }
    .panel { padding: 16px; }
    /* списки матчей — во всю ширину экрана, без боковых полей */
    .mg { margin-left: -16px; margin-right: -16px; padding: 0 0 8px; border-radius: 0; }
    .mg-h { padding: 10px 16px; }
    .mg-b { border-radius: 0; }
    h1 { font-size: 20px; }
    .match .kick { display: none; }
    .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
    .chips::-webkit-scrollbar { display: none; }
  }