/* ЦПС Динамо — фирменный стиль по брендбуку.
   Цвета: navy #103B8B, blue(ЦПС) #2E86E5, light-blue #6CA0D8, green #9AF693, orange #FF833E.
   Шрифты: Dela Gothic One (заголовки), Raleway (текст). */
:root{
  --navy:#103B8B; --blue:#2E86E5; --blue2:#6CA0D8; --green:#9AF693; --orange:#E8946B;
  --green-ink:#1d9b57; --orange-ink:#C06A3C; --ink:#16181d;
  --bg:#ECEDEF; --panel:#ffffff; --panel2:#f5f6f8; --line:#e1e5ec; --line2:#cfd6e0;
  --txt:#16181d; --dim:#5a6575; --muted:#93a0b2;
  --head:'Dela Gothic One', system-ui, sans-serif;
  --body:'Raleway', -apple-system, Segoe UI, Roboto, system-ui, sans-serif;
  --radius:18px; --shadow:0 14px 34px -20px rgba(16,59,139,.45);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
/* ТВ-браузер (Chrome/WebView на Android) сам «подбустивает» шрифт в узких блоках:
   часть плиток растёт, часть нет, а уменьшение кнопкой А− не даёт эффекта —
   движок возвращает свой размер. Явно запрещаем автоподгонку текста. */
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
.tile,.tile *,.plist,.plist *{-webkit-text-size-adjust:none;text-size-adjust:none;
  max-height:1000000px}   /* max-height — второй, более старый способ отключить font boosting */
body{
  background:var(--bg); color:var(--txt);
  font:15px/1.5 var(--body); letter-spacing:.01em; -webkit-font-smoothing:antialiased; min-height:100%;
}
a{color:var(--blue);text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--head);font-weight:400;letter-spacing:0;text-transform:uppercase;line-height:1.05}
.wrap{position:relative;max-width:1560px;margin:0 auto;padding:clamp(14px,2vw,30px)}

/* фирменный зелёный завиток на фоне */
body::before{
  content:"";position:fixed;right:-12vw;top:-18vh;width:62vw;height:62vw;pointer-events:none;z-index:0;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><path d='M70 300 C 70 140 230 120 250 280 C 265 410 120 470 200 520 C 300 560 360 360 360 240 C 360 120 470 110 520 220' fill='none' stroke='%239AF693' stroke-width='54' stroke-linecap='round' opacity='0.22'/></svg>");
}
.wrap{position:relative;z-index:1}

/* ── шапка / лого ── */
.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.logo{display:flex;align-items:center;gap:12px}
.emblem{width:46px;height:46px;flex:0 0 auto;filter:drop-shadow(0 3px 8px rgba(16,59,139,.25))}
.logo .wm{line-height:1}
.logo .wm .n{font-family:var(--head);font-size:clamp(18px,2vw,26px);color:var(--navy);letter-spacing:.02em}
.logo .wm .s{font-family:var(--head);font-size:11px;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:3px}
.spacer{margin-left:auto}
.clock{font-family:var(--head);font-variant-numeric:tabular-nums;font-size:clamp(20px,2.1vw,30px);color:var(--navy)}
.sub{font-size:13px;color:var(--dim);margin:-8px 0 16px;font-weight:600}
.sub.err{color:var(--orange-ink)}

/* ── контролы ── */
.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.seg{display:inline-flex;background:var(--panel);border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{background:transparent;border:0;color:var(--dim);padding:9px 18px;font-weight:700}
.seg button.on{background:var(--navy);color:#fff}
.btn{background:var(--panel);border:1.5px solid var(--line);color:var(--navy);border-radius:11px;padding:9px 15px;font-weight:700}
.btn:hover{border-color:var(--blue)}
.btn.ghost{color:var(--dim)}
.btn.pri{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.pri:hover{background:#0c2f72}
.datenav{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:4px 6px}
.datenav button{background:transparent;border:0;color:var(--navy);font-size:20px;width:34px;height:34px;border-radius:8px;font-family:var(--head)}
.datenav button:hover{background:var(--panel2)}
.datenav .d{font-weight:800;min-width:150px;text-align:center;text-transform:lowercase}
input[type=date],input[type=text],input[type=password],select{
  background:var(--panel);border:1.5px solid var(--line);color:var(--txt);border-radius:11px;padding:9px 13px;font:inherit;font-weight:600;outline:none}
input:focus,select:focus{border-color:var(--blue)}

/* ── pills / kpi ── */
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{background:var(--panel);border:1.5px solid var(--line);border-radius:999px;padding:6px 15px;font-size:13px;color:var(--dim);font-weight:600}
.pill b{color:var(--navy);font-family:var(--head);font-size:14px;margin-left:5px}
.pill.b b{color:var(--orange-ink)} .pill.f b{color:var(--green-ink)}
.kpis{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));margin-bottom:20px}
.kpi{background:var(--panel);border:1.5px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
.kpi .v{font-family:var(--head);font-size:32px;line-height:1;color:var(--navy)}
.kpi .l{color:var(--dim);font-size:12.5px;margin-top:8px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi.b .v{color:var(--orange-ink)} .kpi.f .v{color:var(--green-ink)} .kpi.a .v{color:var(--blue)}

/* ── сетка кортов ── */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.court{background:var(--panel);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:16px 18px 15px;min-height:142px;position:relative;overflow:hidden;cursor:pointer;
  transition:transform .08s,border-color .12s,box-shadow .12s;box-shadow:0 10px 26px -22px rgba(16,59,139,.5)}
.court:hover{transform:translateY(-3px);border-color:var(--blue2);box-shadow:var(--shadow)}
.court.idle{background:var(--panel2)}
.court.now{border-color:var(--orange);box-shadow:0 0 0 1.5px var(--orange),0 14px 30px -16px rgba(255,131,62,.5)}
.court .bar{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--blue2)}
.court.now .bar{background:var(--orange)} .court.idle .bar{background:var(--green)}
.chead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.chead .n{font-family:var(--head);font-size:clamp(21px,1.9vw,28px);color:var(--navy)}
.chip{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:5px 11px;border-radius:999px;white-space:nowrap}
.chip.now{background:rgba(255,131,62,.16);color:var(--orange-ink)}
.chip.free{background:rgba(154,246,147,.28);color:var(--green-ink)}
.chip.soon{background:rgba(46,134,229,.14);color:var(--blue)}
.sname{font-weight:800;font-size:16px;margin-bottom:4px;color:var(--txt)}
.smeta{color:var(--dim);font-size:13.5px;display:flex;gap:12px;flex-wrap:wrap;font-weight:600}
.time{font-family:var(--head);font-variant-numeric:tabular-nums;font-size:14px;color:var(--navy)}
.occ{margin-top:11px}
.occ .lab{font-size:12.5px;color:var(--dim);display:flex;justify-content:space-between;margin-bottom:6px;font-weight:600}
.track{height:8px;background:#e7ebf1;border-radius:999px;overflow:hidden}
.fill{height:100%;background:linear-gradient(90deg,var(--orange),#ff5d5d);border-radius:999px}
.fill.lo{background:linear-gradient(90deg,#5fd6a0,var(--green))}
.cnext{margin-top:11px;padding-top:10px;border-top:1.5px dashed var(--line);font-size:12.5px;color:var(--dim);font-weight:600}
.cnext b{color:var(--navy)}
.cfoot{margin-top:10px;font-size:11.5px;color:var(--muted);font-weight:600}
.empty-c{color:var(--muted);font-size:14px;margin-top:6px;font-weight:600}

/* ── лента расписания ── */
.sched{display:flex;flex-direction:column;gap:8px}
.srow{display:grid;grid-template-columns:96px 116px 1fr auto;gap:14px;align-items:center;
  background:var(--panel);border:1.5px solid var(--line);border-radius:13px;padding:12px 16px;cursor:pointer;box-shadow:0 8px 22px -22px rgba(16,59,139,.5)}
.srow:hover{border-color:var(--blue2)}
.srow.now{border-color:var(--orange)}
.srow .st{font-family:var(--head);font-variant-numeric:tabular-nums;font-size:14px;color:var(--navy)}
.srow .sc{color:var(--blue);font-weight:800}
.srow .si .tt{font-weight:700}
.srow .si .tr{color:var(--dim);font-size:13px;font-weight:600}
.srow .so{text-align:right;font-size:13px;color:var(--dim);font-weight:700}

/* ── таблица (админка) ── */
.tablewrap{overflow:auto;border:1.5px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--dim);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;background:var(--panel2);cursor:pointer;user-select:none}
tbody tr{cursor:pointer} tbody tr:hover{background:var(--panel2)}
td.tm{font-family:var(--head);font-variant-numeric:tabular-nums;color:var(--navy)} td.crt{color:var(--blue);font-weight:800}
.stnow{color:var(--orange-ink);font-weight:800} .stpast{color:var(--muted)} .stfut{color:var(--blue);font-weight:700}

/* ── модалка ── */
.ov{position:fixed;inset:0;background:rgba(16,59,139,.30);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow:auto}
.ov.show{display:flex}
.modal{background:var(--panel);border:1.5px solid var(--line2);border-radius:20px;max-width:680px;width:100%;padding:24px;box-shadow:0 40px 90px -24px rgba(16,59,139,.55);position:relative}
.modal h2{margin:0 0 4px;font-size:26px;color:var(--navy)}
.mclose{position:absolute;top:18px;right:18px;background:var(--panel2);border:1.5px solid var(--line);color:var(--dim);width:36px;height:36px;border-radius:10px;font-size:16px}
.mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.mhead .ms{color:var(--dim);font-size:13px;font-weight:600}
.sess{border:1.5px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;border-left:5px solid var(--blue2)}
.sess.now{border-left-color:var(--orange);background:rgba(255,131,62,.05)}
.sess.past{opacity:.6} .sess.future{border-left-color:var(--blue)}
.sess .sh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.sess .sh .tt{font-weight:800;font-size:16px}
.sess .sh .tm{font-family:var(--head);font-variant-numeric:tabular-nums;font-size:15px;color:var(--navy)}
.sess .mt{color:var(--dim);font-size:13.5px;margin-top:5px;display:flex;gap:14px;flex-wrap:wrap;font-weight:600}
.sess .ds{color:var(--dim);font-size:13px;margin-top:8px;white-space:pre-line;max-height:0;overflow:hidden;transition:max-height .2s}
.sess.open .ds{max-height:460px}
.sess .more{margin-top:8px;color:var(--blue);font-size:13px;font-weight:700;background:none;border:0;padding:0}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:11.5px;color:var(--navy);background:rgba(46,134,229,.10);border:1px solid rgba(46,134,229,.2);border-radius:999px;padding:3px 10px;font-weight:600}

/* ── login ── */
.login{max-width:390px;margin:13vh auto;background:var(--panel);border:1.5px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow);position:relative;z-index:1}
.login .logo{margin-bottom:18px}
.login h1{margin:0 0 4px;font-size:22px;color:var(--navy)} .login p{color:var(--dim);margin:0 0 18px;font-size:14px;font-weight:600}
.login input{width:100%;margin-bottom:12px} .login .btn{width:100%}
.login .err{color:var(--orange-ink);font-size:13px;min-height:18px;font-weight:600}
.hide{display:none!important}
.skel{color:var(--muted);text-align:center;padding:60px;font-size:17px;font-weight:600}

/* ── drill-down: расписание корта ── */
.courthead{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.courthead h2{margin:0;font-size:clamp(26px,2.4vw,36px);color:var(--navy)}
.courthead .ms{color:var(--dim);font-size:13.5px;margin-top:4px;font-weight:600}
.crow{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;margin-bottom:9px;overflow:hidden;cursor:pointer;transition:border-color .12s;box-shadow:0 8px 22px -22px rgba(16,59,139,.5)}
.crow:hover{border-color:var(--blue2)}
.crow.now{border-color:var(--orange);box-shadow:0 0 0 1.5px var(--orange)}
.crow.past .crow-main{opacity:.55}
.crow-main{display:grid;grid-template-columns:104px 1fr 210px;gap:16px;align-items:center;padding:15px 18px}
.crow-main .st{font-family:var(--head);font-variant-numeric:tabular-nums;font-size:18px;line-height:1.3;color:var(--navy)}
.crow-main .tt{font-weight:800;font-size:16px}
.crow-main .tr{color:var(--dim);font-size:13px;margin-top:3px;font-weight:600}
.crow-main .so{text-align:right}
.crow-main .so .num{font-weight:800;font-variant-numeric:tabular-nums;font-size:14px;color:var(--txt)}
.crow-main .so .track{margin-top:6px}
.crow-main .hint{color:var(--muted);font-size:11px;margin-top:5px;font-weight:600}
.crow-desc{max-height:0;overflow:hidden;transition:max-height .22s;padding:0 18px;color:var(--dim);font-size:13.5px;white-space:pre-line}
.crow.open .crow-desc{max-height:460px;padding:2px 18px 16px}
.statedot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle}
.statedot.now{background:var(--orange)} .statedot.future{background:var(--blue)} .statedot.past{background:var(--muted)}
@media(max-width:560px){.crow-main{grid-template-columns:84px 1fr}.crow-main .so{grid-column:1/-1;text-align:left;margin-top:4px}}

/* ── вкладки Тренировки / Аренда (как в 1С:Фитнес) ── */
.modetabs{display:inline-flex;gap:6px;background:var(--panel);border:1.5px solid var(--line2);border-radius:14px;padding:5px;margin-bottom:16px;box-shadow:var(--shadow)}
.modetabs button{background:transparent;border:0;color:var(--dim);padding:11px 26px;font-family:var(--head);font-size:15px;letter-spacing:.02em;text-transform:uppercase;border-radius:10px;transition:background .14s,color .14s}
.modetabs button.on{background:var(--blue);color:#fff}
.modetabs button:not(.on):hover{color:var(--navy);background:var(--panel2)}

/* ── карточка аренды ── */
.court.rent.idle .bar{background:var(--green)}
.court.rent.now .bar{background:var(--orange)}
.renthead{display:flex;align-items:center;gap:10px;margin:-2px 0 8px}
.rentprice{font-family:var(--head);font-size:20px;color:var(--navy);white-space:nowrap}
.rentprice i{font-family:var(--body);font-style:normal;font-size:12px;color:var(--muted);font-weight:700;margin-left:3px}
.rentbusy{font-size:13.5px;color:var(--orange-ink);font-weight:700;margin-top:2px}
.rentlab{font-size:11.5px;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:12px 0 7px}
.rentslots{display:flex;flex-wrap:wrap;gap:7px}
.rentslots .slot{background:rgba(154,246,147,.28);color:var(--green-ink);font-weight:800;font-variant-numeric:tabular-nums;font-size:13px;padding:6px 11px;border-radius:9px;border:1.5px solid rgba(46,134,229,.10)}
.rentslots .slot.onnow{background:rgba(255,131,62,.16);color:var(--orange-ink)}

/* ── ТВ-табло: плитки всех кортов, ЧТЕНИЕ ПО КОЛОНКАМ СВЕРХУ-ВНИЗ (вертикально) ── */
/* многоколоночная раскладка: заполняет 1-й столбец сверху вниз, потом 2-й и т.д. Адаптивно под ландшафт и портрет. */
.grid.tiles{display:block;-webkit-column-width:230px;column-width:230px;-webkit-column-gap:9px;column-gap:9px}
.grid.tiles .tile{-webkit-column-break-inside:avoid;break-inside:avoid;margin:0 0 9px;display:block;width:100%}
.tile{background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:7px 11px 8px;overflow:hidden;box-shadow:0 8px 18px -20px rgba(16,59,139,.5)}
.tile.on{border-color:var(--orange);box-shadow:0 6px 18px -14px rgba(232,148,107,.5)}
.tile.soon{border-color:var(--blue2)}
.tile.free{background:var(--panel2);border-style:dashed}
.tile .th{display:flex;align-items:center;gap:6px;margin-bottom:3px;line-height:1}
.tile .tn{font-family:var(--head);font-size:clamp(15px,1.35vw,21px);color:var(--navy)}
.tile.on .tn{color:var(--orange-ink)}
.tile .tdot{width:8px;height:8px;border-radius:50%;background:var(--blue2);flex:0 0 auto}
.tile .r{display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:baseline;font-size:13px;padding:2.5px 0;border-top:1px solid var(--line)}
.tile .rt{text-align:right}
.tile .r:first-of-type{border-top:0;padding-top:1px}
.tile .r.now{font-weight:800}
.tile .rt{font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy);white-space:nowrap}
.tile .r.now .rt,.tile .r.now .rl,.tile .r.now .ro{color:var(--orange-ink)}
.tile .rl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)}
.tile .ro{font-variant-numeric:tabular-nums;font-weight:700;color:var(--dim)}
.tile .rm{font-size:11px;color:var(--muted);font-weight:600;margin-top:1px}
/* «сейчас» — идущая бронь. Без метки её путали с будущей: человек видел своё имя
   рядом с чужим временем и думал, что его игра позже. */
/* время ближайшей брони — в строке с номером корта: слева время, справа номер */
.tile .thtime{flex:1 1 auto;min-width:0;font-variant-numeric:tabular-nums;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--orange-ink)}
.tile .tn{margin-left:auto}
.tile.free .thtime{display:none}
.tile .trn-in{font-weight:800;color:var(--navy);margin-left:.5em;white-space:nowrap}
.map.plan .tile .rl{white-space:normal}
/* идущая бронь — просто жирнее, без плашек */
.tile .r.now .rl{font-weight:800}
/* плитка без шапки: люди с самой верхней грани. Номер корта не дублируем — он ясен по месту
   на схеме, а зарезервированный под него отступ сверху (21px) больше не нужен. */
.map.plan .tile.nohead,
.map.plan.compact-courts .tile.nohead,
.map.plan.compact-courts .tile.nohead.compact-number{padding:1.05em 8px 5px}
.tile.nohead .r:first-child,
.tile.nohead .rf:first-child{border-top:0;padding-top:0;margin-top:0}
/* номер корта — мелко в правом верхнем углу, поверх содержимого:
   position:absolute, поэтому арендаторы НЕ съезжают вниз */
.tile.nohead{position:relative}
.tile .cnum{position:absolute;top:2px;right:5px;z-index:1;pointer-events:none;
  font-family:var(--head);font-size:1.5em;line-height:1;color:var(--navy);opacity:1}
.tile.on .cnum{color:var(--orange-ink)}      /* занятый корт — номер в цвет рамки */
.tile .cnum.word{font-size:.85em;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* заголовок плитки с многострочным именем: по центру, расписание под ним */
.map .tile .phd{font-weight:800;text-align:center;white-space:pre-line;line-height:1.15;
  margin:.1em 0 .3em;font-size:1.14em;color:var(--navy)}
.map .tile.named{padding-top:5px}
/* первой строке — воздух справа, чтобы время не заезжало под номер */
.tile.nohead > .r:first-of-type{padding-right:2.4em}
.tile .rf{color:var(--green-ink);font-weight:700;font-size:13px;padding-top:1px}
.tile .r.rent:not(.now) .rt,.tile .r.rent:not(.now) .rl{color:var(--blue)}
.tile .r.rent .rl{font-weight:700}
.tile .r>span{min-width:0}                                   /* даёт ячейкам сжиматься → работает ellipsis */
.tile .r.hastr{grid-template-columns:1fr 1fr auto}          /* клиент и тренер делят строку поровну */
.tile .trn{color:var(--navy);font-weight:800;font-variant-numeric:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* тренер отдельной строкой под клиентом: имя клиента остаётся полным */
.tile .rtr{font-size:.84em;font-weight:800;color:var(--navy);line-height:1.15;padding:0 0 1px 1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .rtr::first-letter{text-transform:none}
.map .tile .rtr{white-space:normal;line-height:1.15}
.tile .r.rent .trn::before{content:"тр. ";font-weight:600;color:var(--muted);font-size:.85em}

/* ── полоса слотов сверху: «какие корты заняты в 10:00–11:30» ── */
.slotbar{display:flex;gap:6px;align-items:stretch;margin:0 0 8px;flex-wrap:nowrap;overflow:hidden}
.slotbar .slot{flex:1 1 0;min-width:0;padding:7px 6px;border:1.5px solid var(--line2);border-radius:11px;
  background:#fff;color:var(--blue);font-family:var(--head);font-size:15px;line-height:1.05;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slotbar .slot i{font-style:normal;font-family:var(--body);font-weight:700;font-size:.78em;color:var(--dim);margin-left:2px}
.slotbar .slot.on{background:var(--navy);border-color:var(--navy);color:#fff}
.slotbar .slot.on i{color:rgba(255,255,255,.72)}
body.tv .slotbar .slot{font-size:16px;padding:8px 6px}

/* блок «кто дальше на кортах»: список аренд по алфавиту, листается сам */
.map.plan .plist{display:flex;flex-direction:column;border:1.5px solid var(--line2);border-radius:12px;
  padding:.4em .3em;overflow:hidden}
.map.plan .plist .plhead{font-family:var(--head);font-size:1.15em;line-height:1.1;margin-bottom:.35em;
  padding-bottom:.28em;border-bottom:1.5px solid rgba(16,59,139,.14);flex:0 0 auto}
/* листают мышкой — полоса прокрутки видна, чтобы было понятно, что блок скроллится */
.map.plan .plist .plbody{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:var(--line2) transparent;overscroll-behavior:contain}
.map.plan .plist .plbody::-webkit-scrollbar{width:7px}
.map.plan .plist .plbody::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.map.plan .plist .plrow{display:grid;grid-template-columns:1fr auto auto;gap:.34em;align-items:baseline;
  padding:.16em .45em;border-top:1px solid rgba(16,59,139,.08);font-size:.92em}
.map.plan .plist .plrow:first-child{border-top:0}
.map.plan .plist .pln{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
/* корты и время сливались в кашу — между ними явная граница и разный цвет */
.map.plan .plist .plc{font-weight:800;white-space:nowrap;color:var(--orange-ink);
  padding-right:.55em;border-right:1.5px solid rgba(16,59,139,.22);text-align:right}
.map.plan .plist .plt{font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap;
  padding-left:.55em;color:var(--navy)}
.map.plan .plist .plempty{opacity:.6;font-size:.92em}

/* ── «Схема» площадки: план на всю ширину экрана (телик 16:9), колонки тянутся ── */
body.tv .map{display:block;width:100%;font-size:14px;line-height:1.1}
/* «Крытые»: кортов мало — растягиваем плитки на весь экран (ряды 1fr), НЕ центрируем */
body.tv .map.covered{display:flex;flex-direction:column;min-height:calc(100vh - 74px)}
.map.covered .mapinner{-webkit-box-flex:1;flex:1 1 auto;display:flex;flex-direction:column;gap:13px}
.map.covered .maprow{margin:0}
.map.covered .maprow.fill{-webkit-box-flex:1;flex:1 1 auto;min-height:0}
.map.covered .maprow.fill>.zone{display:flex;flex-direction:column;min-height:0}
.map.covered .maprow.fill .mgrid{-webkit-box-flex:1;flex:1 1 auto;grid-auto-rows:1fr}
.map .mapinner{display:block;width:100%}
.map .maprow{display:flex;gap:13px;align-items:stretch;width:100%;min-width:0;margin:0 0 13px}
.map .zone{background:var(--panel);border:1.5px solid var(--line2);border-radius:14px;padding:6px 8px 8px;box-shadow:0 16px 32px -26px rgba(16,59,139,.55)}
.map .zone.grow{-webkit-box-flex:1;flex:1 1 auto;min-width:0}
/* ориентиры площадки с рисунка (не корты): правая рельса — трибуна + малый шатёр */
.map .rail{-webkit-box-flex:0;flex:0 0 240px;display:flex;gap:11px;align-items:stretch}
.map .rail.spacer{visibility:hidden}
.map .lm{display:flex;align-items:center;justify-content:center;text-align:center;background:#EEF3FA;border:1.5px dashed var(--line2);border-radius:14px;color:#8695AE;font-family:var(--head);line-height:1.15}
.map .lm.tribuna{-webkit-box-flex:0;flex:0 0 46px;writing-mode:vertical-rl;letter-spacing:.14em;font-size:16px}
.map .lm.maliy{-webkit-box-flex:1;flex:1 1 auto;font-size:17px;padding:12px}
/* ── «Схема» по плану из редактора /plan: свободная раскладка, всё на весь экран ── */
.map.plan .planbox{position:relative;width:100%}
.map.plan .pit{position:absolute;padding:3px}
.map.plan.compact-courts .pit{padding:0}
.map.plan .pit .tile{width:100%;height:100%;min-height:0;margin:0;display:block;overflow:hidden}
.map.plan.compact-courts .tile{position:relative;padding:5px 8px 6px}
.map.plan.compact-courts .tile.compact-number .th{position:absolute;top:6px;right:7px;margin:0;z-index:2}
.map.plan.compact-courts .tile.compact-number .tn{font-size:14px;line-height:1}
.map.plan.compact-courts .tile.compact-number{padding-top:21px}
.map.plan.compact-courts .tile .r{gap:4px;padding-top:1px;padding-bottom:1px}
.map.plan.compact-courts .tile .rf{padding-right:22px}
/* корт с заданным вручную цветом (иначе — обычная раскраска по занятости) */
.map.plan .pit.painted .tile{background:var(--pbg) !important;border-color:var(--pfg) !important}
.map.plan .pit.painted .tile .tn,
.map.plan .pit.painted .tile .rl,
.map.plan .pit.painted .tile .rt,
.map.plan .pit.painted .tile .rf{color:var(--pfg) !important}
.map.plan .plabel{display:flex;align-items:center;justify-content:center;text-align:center;
  border:1.5px dashed var(--line2);border-radius:12px;font-family:var(--head);line-height:1.15;font-size:1.25em}
.map.plan .plabel.vert span{writing-mode:vertical-rl;letter-spacing:.12em}
.map.plan .plabel span{word-break:break-word;padding:2px}

/* «Ресепшн · Вы здесь» — ориентир для смотрящего (по рисунку: правее шатра) */
.map .rcpt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px solid #2E86E5;border-radius:14px;background:#EAF2FC;padding:10px}
.map .rcpt .here{display:flex;align-items:center;gap:7px;font-family:var(--head);font-size:14px;color:#2E86E5;text-transform:uppercase;letter-spacing:.04em}
.map .rcpt .here .dot{width:11px;height:11px;border-radius:50%;background:#2E86E5;box-shadow:0 0 0 5px rgba(46,134,229,.22)}
.map .rcpt .rname{font-family:var(--head);font-size:24px;color:var(--blue);line-height:1}
/* «шатёр» = плитка-корт справа снизу */
.map .tentcell{display:flex;flex-direction:column;gap:4px;border:1.5px dashed var(--line2);border-radius:14px;background:#EEF3FA;padding:6px}
.map .tentcell .tentlab{font-family:var(--head);font-size:13px;color:#8695AE;text-transform:uppercase;letter-spacing:.03em;text-align:center}
.map .tentcell .tile{-webkit-box-flex:1;flex:1 1 auto}
.map .zlab{font-family:var(--head);font-size:13px;color:var(--blue);margin:0 2px 5px;text-transform:uppercase;letter-spacing:.03em;text-align:center}
.map .mgrid{display:grid;gap:5px;align-items:stretch}
.map .mgrid.m5{grid-template-columns:repeat(5,1fr)}   /* тянутся на всю ширину */
.map .mgrid.m6{grid-template-columns:repeat(6,1fr)}
.map .mgrid>*{min-width:0}                             /* колонки ужимаются, длинные имена не распирают */
.map .tile{width:100%;height:auto;min-height:80px;margin:0;display:block;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}
/* На растянутом ТВ имя не делит ширину со временем: время сверху, имя отдельной строкой. */
.map .tile .r{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:6px;row-gap:0;align-items:start;padding:0 0 1px;line-height:1.12}
/* занятость (6/8) — во ВТОРОЙ строке напротив фамилии, не напротив времени:
   в первой строке она попадала под угловой номер корта и сливалась с ним (корт 23).
   Фамилия в своей колонке — на цифры физически наехать не может. */
.map .tile .rl{grid-column:1;grid-row:2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;line-height:1.12}
.map .tile .trn{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;line-height:1.15;margin-top:1px}
.map .tile .rt{grid-column:1/-1;grid-row:1;text-align:left;margin:0;align-self:start}
.map .tile .ro{grid-column:2;grid-row:2;text-align:right;align-self:start}

/* компактно: бронь в ОДНУ строку (время · имя · занятость) — на телике в плитку
   влезает вдвое больше записей, вместо «ещё +2» видно самих людей */
.map.plan.compact-rows .tile .r{grid-template-columns:auto 1fr auto;grid-template-rows:auto;
  row-gap:0;column-gap:7px;align-items:baseline;padding:1.5px 0}
.map.plan.compact-rows .tile .rt{grid-column:1;grid-row:1;text-align:left}
.map.plan.compact-rows .tile .rl{grid-column:2;grid-row:1;-webkit-line-clamp:1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.map.plan.compact-rows .tile .ro{grid-column:3;grid-row:1}
.map.plan.compact-rows .tile .rtr{margin-top:0;line-height:1.1}

/* «скрыть свободные» на схеме: свободный корт гасим, но позиция сохраняется */
.map .tile.dim{min-height:0;opacity:.32;background:var(--panel);border-style:dashed}
.map .tile.dim .th{margin:0}

/* ── настенный режим (Mi TV): все корты на один экран, РОВНАЯ матрица одинаковых плиток ── */
body.tv .wrap{max-width:none;padding:4px 10px 2px}
/* шапку прячем: лого/часы, строку статуса, статистику — но оставляем вкладки и «листалку дня» */
body.tv .top{display:none}
body.tv .sub{display:none}
body.tv .pills,body.tv .bar .spacer{display:none}
/* часы МСК — в правый верхний угол (в той же строке, что вкладки) */
body.tv .clock{margin-left:auto;font-size:clamp(15px,1.15vw,19px);line-height:1}
/* ШАПКА КОМПАКТНО: на телике крупный текст «размазывается» — держим мелко и чётко.
   Экран отдаём кортам, а не кнопкам. */
body.tv .seg button{font-size:13px;padding:6px 12px}
body.tv .bar .btn,body.tv .bar button,body.tv .bar input[type=date]{font-size:12.5px;padding:6px 10px}
body.tv .datenav{font-size:12.5px}
body.tv .datenav .d{font-size:13px;min-width:112px}
body.tv .datenav button{padding:5px 10px;font-size:14px}
.clock i{font-style:normal;font-family:var(--body);font-size:.45em;font-weight:800;
  color:var(--dim);letter-spacing:.08em;margin-left:.4em;vertical-align:.35em}
body.tv .bar{margin-bottom:3px;flex-wrap:nowrap;max-width:100%;overflow:hidden;padding-right:64px}
/* шапка на телике: в одну строку, но элементы ОБЯЗАНЫ сжиматься — иначе она распирала
   страницу шире экрана и всё табло уезжало за границы телика (13.08). */
body.tv .bar>*{flex:0 1 auto;min-width:0}
body.tv .bar .datenav .d{min-width:70px}
body.tv .bar input[type=date]{display:none}     /* дату двигают стрелками и «Сегодня/Завтра» */
/* часы вне потока — перенос/сжатие шапки на них больше не влияет */
body.tv .clock{position:absolute;top:2px;right:4px;margin:0}
/* страховка: горизонтального выезда быть не может ни при каких кнопках */
html,body{max-width:100%;overflow-x:hidden}
/* метка сборки: крошечная, для диагностики по фото телика */
#bld{position:fixed;right:3px;bottom:2px;z-index:9;font-size:10px;font-weight:700;
  color:var(--dim);opacity:.4;pointer-events:none}
/* минимальная шапка: только разделы, «Сегодня» и ▲ (Илья: «всё остальное просто не нужно») */
body.slim .datenav,body.slim #tomorrowBtn,body.slim #dpick,body.slim #hideFreeBtn,
body.slim #rowsBtn,body.slim .fz{display:none}
/* свёрнутая шапка: кнопок нет, табло тянется до самого верха, часы и стрелка остаются */
body.barhidden .bar>*{display:none}
body.barhidden .bar{height:0;min-height:0;margin:0;padding:0;overflow:visible}
body.barhidden .bar>.clock,body.barhidden .bar>#barToggle{display:block}
body.barhidden .top{display:none}
body.barhidden .wrap{padding-top:var(--safe,0)}
/* безопасная зона: телик режет края, поэтому контент отступает внутрь */
body.tv .wrap{padding-left:var(--safe,0);padding-right:var(--safe,0);
  padding-top:calc(var(--safe,0) / 2);padding-bottom:calc(var(--safe,0) / 2)}
#barToggle{padding:6px 9px;line-height:1}
body.barhidden #barToggle{position:absolute;top:2px;left:4px;z-index:5;opacity:.45;
  background:transparent;border-color:transparent}
body.barhidden #barToggle:hover{opacity:1}
.fz{display:inline-flex;gap:4px}
.fz .btn{padding-left:9px;padding-right:9px;font-variant-numeric:tabular-nums}
/* тумблер «Скрыть свободные» — активное состояние */
#hideFreeBtn.on{background:var(--navy);color:#fff;border-color:var(--navy)}
/* inline-block вместо CSS-колонок/grid/flex-gap — совместимо со старым Chromium на телике.
   размеры плитки задаёт JS (fitBoard) через --tilew/--tileh/--gap так, чтобы всё влезло и заполнило экран. */
/* размер шрифта сетки задаёт JS (fitBoard) — ужимает так, чтобы самый загруженный корт влезал целиком;
   вся типографика плитки в em → масштабируется вместе с ним. плитки склеены join('') → без пробелов, зазор не нужен. */
body.tv .grid.tiles{display:block;font-size:15px;line-height:1.12;-webkit-column-width:auto;column-width:auto}
body.tv .grid.tiles .tile{
  display:inline-block;vertical-align:top;-webkit-box-sizing:border-box;box-sizing:border-box;
  overflow:hidden;margin:0 8px 8px 0;padding:.35em .55em .4em}   /* ширину/высоту задаёт JS inline-стилем */
body.tv .tile .th{margin-bottom:.12em}
body.tv .tile .tn{font-size:1.3em}
body.tv .tile .tdot{width:.5em;height:.5em}
body.tv .tile .r{font-size:.85em;padding:.12em 0;gap:.35em}
body.tv .tile .r:first-of-type{padding-top:.05em}
body.tv .tile .rf{font-size:.9em;padding-top:.1em}
body.tv .tile .rm{font-size:.72em}