:root{
  --bg:#F6F5F2; --ink:#26212B; --muted:#837D8C; --card:#fff; --line:#E5E1D9;
  --candy:#E8336D; --sea:#00A6A6; --sun:#FFC53D; --warn:#FFF3D6; --danger:#C62828;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
.top{
  background:var(--ink);color:#fff;padding:10px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  position:sticky;top:0;z-index:40;
}
.top b{font-size:16px;letter-spacing:.3px}
.top .grow{flex:1}
.seg{display:flex;background:rgba(255,255,255,.12);border-radius:10px;overflow:hidden}
.seg button{border:none;background:none;color:#fff;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;opacity:.65}
.seg button.on{background:var(--candy);opacity:1}
input[type=date]{border:none;border-radius:10px;padding:8px 10px;font:inherit;font-weight:600}
.wrap{max-width:1180px;margin:0 auto;padding:18px 20px}
h2{font-size:15px;font-weight:800;margin:18px 0 10px;letter-spacing:.2px}
.grid{display:grid;grid-template-columns:70px repeat(var(--rooms,2),1fr);gap:10px}
.gh{font-weight:800;color:var(--muted);font-size:12.5px;text-transform:uppercase;padding:4px 2px;align-self:end}
.cell{
  background:var(--card);border:1.5px solid var(--line);border-radius:12px;min-height:88px;padding:8px;
  display:flex;flex-direction:column;gap:6px;
}
.cell.closed{background:repeating-linear-gradient(45deg,#fdf1f4,#fdf1f4 8px,#fbe3ea 8px,#fbe3ea 16px)}

/* ── ЗАГРУЗКА: хит-мап месяца + лента двух недель ──────────────────────
   Обе точки показываются ОДНОВРЕМЕННО (решение Антона 16.08.2026):
   оператор один на две точки, и половина смысла обзора — увидеть,
   что на Дериглазова забито, а в Европе-50 пусто. */
.occ-head{display:flex;align-items:center;gap:10px;margin:18px 0 10px}
.occ-head h2{margin:0}
.occ-head .nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.occ-head .nav b{min-width:150px;text-align:center;font-size:14px}
.hm{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.hm .wd{font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;text-align:center;padding-bottom:2px}
.hm-cell{
  border:1.5px solid var(--line);border-radius:10px;padding:6px 6px 7px;min-height:62px;
  background:var(--card);cursor:pointer;display:flex;flex-direction:column;gap:4px;
}
.hm-cell:hover{border-color:var(--candy)}
.hm-cell.empty{visibility:hidden;cursor:default}
.hm-cell.today{outline:2px solid var(--sea);outline-offset:-2px}
/* открытый в сетке день — розовой рамкой, как в календаре /m/ */
.hm-cell.sel{border-color:var(--candy);box-shadow:inset 0 0 0 1.5px var(--candy)}
/* фон клетки — доля занятых слотов за обе точки: «где завал, где пусто» */
.hm-cell.l1{background:#FDF0F4} .hm-cell.l2{background:#FADCE6} .hm-cell.l3{background:#F5C2D5}
.hm-d{font-weight:800;font-size:13px;line-height:1}
.hm-row{display:flex;align-items:center;gap:3px}
.hm-lbl{font-size:10px;font-weight:800;color:var(--muted);width:11px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.10)}
/* margin:0 гасит наследство от легаси-правила .free (ниже по файлу):
   у него margin:auto для заглушек «свободно» внутри .cell, и без сброса
   точки хит-мапа разъезжаются, а клетки ленты «свободно» становятся уже
   остальных — колонки перестают читаться как колонки */
.dot.free{background:#DFF3F2;margin:0}
.dot.part{background:var(--sun)}
.dot.full{background:var(--candy)}
.dot.closed{background:repeating-linear-gradient(45deg,var(--candy),var(--candy) 3px,#fff 3px,#fff 6px)}
.dot.none{background:transparent;border-style:dashed}
/* лента: дни × (точка × слот). Горизонтальная прокрутка только внутри. */
.rib-wrap{overflow-x:auto}
.rib{display:grid;grid-template-columns:104px repeat(6,minmax(74px,1fr));gap:4px;min-width:640px}
.rib .rh{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;text-align:center;padding:2px 0}
.rib .rh.grp{border-bottom:2px solid var(--line);padding-bottom:4px;margin-bottom:2px}
.rib .rd{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px;padding-left:2px;cursor:pointer}
.rib .rd:hover{color:var(--candy)}
.rib .rc{
  border-radius:8px;padding:5px 4px;text-align:center;font-size:11.5px;font-weight:700;
  border:1.5px solid var(--line);background:var(--card);cursor:pointer;margin:0;
}
.rib .rc.free{background:#EFF9F8;border-color:#BCE4E2;color:#00776F}
.rib .rc.part{background:#FFF3D6;border-color:#F1D48A;color:#A66B00}
.rib .rc.full{background:#FDEBEF;border-color:#F3B9CB;color:#B01B4C}
.rib .rc.closed{background:repeating-linear-gradient(45deg,#fdf1f4,#fdf1f4 6px,#fbe3ea 6px,#fbe3ea 12px);border-color:#F3B9CB;color:#B01B4C}
.rib .rc.none{background:#F6F5F3;border-style:dashed;color:var(--muted);cursor:default}
/* класс today висит на самой строке дня, а не на родителе:
   .rib .today .rd не совпадал бы никогда, и сегодня не подсвечивалось */
.rib .rd.today{color:var(--candy)}
.occ-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:11.5px;color:var(--muted)}
.occ-legend span{display:flex;align-items:center;gap:5px}
@media(max-width:760px){
  .hm{gap:3px}
  .hm-cell{min-height:52px;padding:4px}
  .hm-d{font-size:11px}
  .dot{width:7px;height:7px}
}
.slotlbl{font-weight:800;font-size:15px;align-self:center;justify-self:center}
.bk{
  border-radius:10px;padding:7px 9px;cursor:pointer;border:1.5px solid transparent;
  background:#EFF9F8;border-color:#BCE4E2;font-size:12.5px;line-height:1.35;
}
.bk.pend{background:var(--warn);border-color:#F1D48A}
.bk.lead{background:#F1EDFD;border-color:#D4C8F5}
.bk.done{background:#F2F1EE;border-color:var(--line);opacity:.75}
.bk b{font-size:13px;display:block}
.bk .st{font-size:11px;font-weight:700}
.bk .st.paid{color:var(--sea)} .bk .st.wait{color:#A66B00} .bk .st.hero{color:var(--candy)}
.bk .st.nohero{color:#D11A2A;font-weight:800}
/* Комментарий к брони — одной строкой, целиком во всплывающей подсказке
   и в карточке. Ячейка сетки узкая, абзац её раздул бы. */
.bk .cm{display:block;margin-top:3px;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk .kid{font-weight:700}
.bk.cont{background:#F6F6F4;border-style:dashed;color:var(--muted)}
.cmbox{width:100%;font:inherit;border:1.5px solid var(--line);border-radius:10px;padding:8px;resize:vertical}
.free{color:var(--muted);font-size:12.5px;text-align:center;margin:auto}
.badge{display:inline-block;background:var(--candy);color:#fff;font-weight:800;font-size:11.5px;border-radius:999px;padding:2px 9px;margin-left:6px}
.tasks{display:grid;gap:10px}
.task{background:var(--card);border:1.5px solid var(--line);border-left:5px solid var(--candy);border-radius:12px;padding:12px 14px}
.task .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.task .who{font-weight:800}
.task .pri{font-size:13px;margin-top:4px}
.task .call{font-size:12.5px;color:var(--muted);margin-top:2px}
.task .act{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
select,button.small{font:inherit;font-weight:600;border:1.5px solid var(--line);border-radius:9px;padding:7px 10px;background:#fff}
button.small{cursor:pointer}
button.pri1{background:var(--sea);color:#fff;border-color:var(--sea)}
button.ghost{background:none}
button.red{color:var(--danger);border-color:#F3C9C9}
.clash{background:var(--warn);border:1.5px solid var(--sun);border-radius:12px;padding:10px 14px;margin-bottom:12px;font-weight:600}
/* drawer */
.ovl{position:fixed;inset:0;background:rgba(38,33,43,.45);display:none;z-index:60}
.ovl.on{display:block}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:#fff;z-index:61;
  transform:translateX(105%);transition:transform .2s;box-shadow:-8px 0 30px rgba(0,0,0,.15);
  display:flex;flex-direction:column;
}
.drawer.on{transform:none}
.drawer .hd{padding:16px 18px;border-bottom:1.5px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.drawer .bd{padding:16px 18px;overflow:auto;flex:1}
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 10px;font-size:13.5px;margin-bottom:14px}
.kv .k{color:var(--muted);font-weight:600}
.kv .v{font-weight:700}
.paylink{display:flex;gap:8px;align-items:center;background:#EFF9F8;border:1.5px solid #BCE4E2;border-radius:10px;padding:8px 10px;font-size:12px;word-break:break-all}
.sect{border-top:1.5px solid var(--line);margin-top:14px;padding-top:12px}
.sect h3{font-size:13px;font-weight:800;margin-bottom:8px}
.actrow{display:flex;gap:8px;flex-wrap:wrap}
/* Дежурная скидка (0052): строка над задачами. Своё [hidden] — у элемента
   авторский display, и атрибут hidden без правила на нём не работает. */
.duty{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--card);
  border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;font-size:13.5px}
.duty[hidden]{display:none}
.duty small{color:var(--muted);flex-basis:100%}
.duty-code{font-size:30px;font-weight:800;letter-spacing:3px;margin:6px 0 10px}
button.small:disabled{opacity:.5;cursor:not-allowed}
.adrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0}
.log{font-size:12px;color:var(--muted)}
.log div{padding:3px 0}
.toast{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:12px;font-weight:700;
  opacity:0;transition:opacity .2s;z-index:99;pointer-events:none
}
.toast.on{opacity:1}
.gate{max-width:360px;margin:14vh auto;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:26px;text-align:center}
.gate input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px;font:inherit;margin:12px 0}
.gate button{width:100%;background:var(--candy);color:#fff;border:none;border-radius:10px;padding:12px;font:inherit;font-weight:800;cursor:pointer}
@media(max-width:760px){.grid{grid-template-columns:56px repeat(var(--rooms,2),1fr)}.kv{grid-template-columns:100px 1fr}}
.helpq{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;font:700 11px/1 Manrope,system-ui,sans-serif;text-decoration:none;color:#8a93a8;vertical-align:middle;margin-left:6px;opacity:.8}
.helpq:hover{opacity:1;color:#2C4E94}

/* ── Гость игровой (0053) ── */
.vk{margin-top:6px}
.vk button.on{background:var(--sea);border-color:var(--sea);color:#fff}
.vk button.free{border-color:var(--candy,#E8336D);color:var(--candy,#E8336D)}
.vk button.free.on{background:var(--candy,#E8336D);color:#fff}
.vbal{background:var(--bg,#F6F5F2);border-radius:10px;padding:9px 11px;margin-bottom:6px}
.vbal b{display:block;font-size:14px}
.vbal span{display:block;color:var(--candy,#E8336D);font-weight:800;margin-top:3px}
.vclosing{background:#FFF6E5;border:1.5px solid #F2D49B;border-radius:10px;padding:8px 11px;margin:8px 0;font-size:13px}
.vres{background:#EFF9F8;border:1.5px solid #BCE4E2;border-radius:12px;padding:11px 12px;margin-top:12px}
.vres div{font-size:16px;padding:2px 0}
.vres div.free{color:var(--candy,#E8336D);font-weight:800}
.vres small{display:block;color:var(--muted);margin-top:4px}
.vrow{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.vrow > div{flex:1;min-width:0}
.vrow small{display:block;color:var(--muted);font-size:12px}
.vrow.void{opacity:.55;text-decoration:line-through}