.пики-верх{display:flex; justify-content:space-between; gap:10px; font-size:11.5px;
  color:var(--sand-dim); margin-bottom:6px; font-variant-numeric:tabular-nums}
.пики-верх b{font-weight:600; color:var(--sand)}
.пики-холст{display:grid; grid-template-columns:repeat(24, minmax(0, 1fr)); gap:3px;
  height:172px; align-items:end;
  
  background-image:linear-gradient(to bottom, var(--seam) 1px, transparent 1px);
  background-size:100% 50%}
.час{position:relative; display:flex; align-items:flex-end; height:100%; min-width:0;
  padding:0; border:0; border-radius:5px 5px 2px 2px; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.час.ночь{background:var(--inset)}
.час i{display:block; width:100%; border-radius:4px 4px 2px 2px;
  background:color-mix(in oklab, var(--lamp) 34%, transparent);
  transition:height 320ms var(--ease-out), filter 160ms}
.час.наплыв i{background:linear-gradient(180deg, var(--lamp-hi), var(--lamp-lo))}

.час.ноль i{height:3px !important; background:var(--seam-2)}
.час.выбран{box-shadow:inset 0 0 0 1px var(--seam-2)}
.час.выбран i{filter:brightness(1.25)}
@media (hover:hover){ .час:hover i{filter:brightness(1.25)} }
.час.сейчас::after{content:''; position:absolute; left:50%; bottom:-10px; width:6px;
  height:6px; margin-left:-3px; border-radius:50%; background:var(--ore)}
.пики-ось{display:grid; grid-template-columns:repeat(24, minmax(0, 1fr)); gap:3px;
  margin-top:14px; font-size:10.5px; color:var(--sand-dim); text-align:center;
  font-variant-numeric:tabular-nums}
.пики-ось span{white-space:nowrap; overflow:visible}
.пики-ось span.сейчас{color:var(--ore)}
.пики-ключ{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:11px;
  color:var(--sand-dim)}
.пики-ключ span{display:inline-flex; align-items:center; gap:6px}
.пики-ключ i{display:inline-block; width:12px; height:10px; border-radius:3px}
.пики-ключ .к-наплыв{background:linear-gradient(180deg, var(--lamp-hi), var(--lamp-lo))}
.пики-ключ .к-ночь{background:rgba(0,0,0,.4); box-shadow:inset 0 0 0 1px var(--seam-2)}
.пики-ключ .к-сейчас{width:7px; height:7px; border-radius:50%; background:var(--ore)}
.пики-деталь{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  margin-top:10px; padding:10px 12px; border-radius:11px; background:var(--inset);
  border:1px solid var(--seam); font-size:12.5px; color:var(--sand);
  font-variant-numeric:tabular-nums}
.пики-деталь b{font-size:14px; color:var(--cream)}
.пики-деталь u{text-decoration:none; font-size:11.5px; color:var(--sand-dim)}
.когда-пусто{margin:0; padding:22px 10px; text-align:center; font-size:13px;
  color:var(--sand-dim)}


.пики-итог{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:8px; margin-top:12px}
.пики-итог:empty{display:none}
.итог-ч{display:grid; gap:2px; padding:10px 12px; border-radius:12px;
  background:var(--inset); border:1px solid var(--seam)}
.итог-ч span{font-size:11px; color:var(--sand-dim)}
.итог-ч b{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums}
.итог-ч u{text-decoration:none; font-size:11.5px; color:var(--sand)}
.итог-ч.наплыв{border-color:color-mix(in oklab, var(--lamp) 38%, transparent)}
.итог-ч.наплыв b{color:var(--lamp)}
.итог-ч.тихо b{color:var(--sand)}
.когда-мало{grid-column:1 / -1; margin:2px 0 0; font-size:11.5px; color:var(--sand-dim)}


.пульт-v16 .пики-верх{gap:12px;margin-bottom:12px;font-size:14px;color:var(--kb-ink-3)}
.пульт-v16 .пики-верх b{color:var(--kb-ink-2)}
.пульт-v16 .пики-холст{height:220px;gap:4px;border-radius:16px;background-image:linear-gradient(to bottom,var(--kb-line) 1px,transparent 1px)}
.пульт-v16 .час{border-radius:8px 8px 4px 4px}
.пульт-v16 .час.ночь{background:var(--kb-soft)}
.пульт-v16 .час i{border-radius:7px 7px 3px 3px;background:color-mix(in oklab,var(--kb-blue) 30%,transparent)}
.пульт-v16 .час.наплыв i{background:var(--kb-blue)}
.пульт-v16 .час.ноль i{background:var(--kb-line-2)}
.пульт-v16 .час.выбран{box-shadow:inset 0 0 0 2px var(--kb-blue)}
.пульт-v16 .час.сейчас::after{bottom:-12px;width:8px;height:8px;margin-left:-4px;background:var(--kb-lime);box-shadow:0 0 0 3px var(--kb-card)}
.пульт-v16 .пики-ось{gap:4px;margin-top:18px;font-size:13px;color:var(--kb-ink-3)}
.пульт-v16 .пики-ось span.сейчас{color:var(--kb-blue-text);font-weight:600}
.пульт-v16 .пики-ключ{gap:10px 20px;margin-top:16px;font-size:14px;color:var(--kb-ink-2)}
.пульт-v16 .пики-ключ .к-наплыв{background:var(--kb-blue)}
.пульт-v16 .пики-ключ .к-ночь{background:var(--kb-soft);box-shadow:inset 0 0 0 1px var(--kb-line-2)}
.пульт-v16 .пики-ключ .к-сейчас{background:var(--kb-lime)}
.пульт-v16 .пики-деталь{gap:8px 14px;margin-top:14px;padding:14px 16px;border-radius:16px;background:var(--kb-soft);border:1px solid var(--kb-line);font-size:15px;color:var(--kb-ink-2)}
.пульт-v16 .пики-деталь b{font-size:16px;color:var(--kb-ink)}
.пульт-v16 .пики-деталь u{font-size:14px;color:var(--kb-ink-3)}
.пульт-v16 .когда-пусто{padding:30px 12px;font-size:15px;color:var(--kb-ink-3)}
.пульт-v16 .пики-итог{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:16px}
.пульт-v16 .итог-ч{gap:5px;padding:14px 16px;border-radius:16px;background:var(--kb-soft);border:1px solid var(--kb-line)}
.пульт-v16 .итог-ч span{font-size:14px;color:var(--kb-ink-3)}
.пульт-v16 .итог-ч b{font-size:18px;color:var(--kb-ink)}
.пульт-v16 .итог-ч u{font-size:14px;color:var(--kb-ink-2)}
.пульт-v16 .итог-ч.наплыв{border-color:color-mix(in oklab,var(--kb-blue) 28%,var(--kb-line))}
.пульт-v16 .итог-ч.наплыв b{color:var(--kb-blue-text)}
.пульт-v16 .итог-ч.тихо b{color:var(--kb-ink-2)}
.пульт-v16 .когда-мало{font-size:14px;color:var(--kb-ink-3)}
.пульт-v16 .подзаг{font-size:14px;color:var(--kb-ink-2)}
.пульт-v16 .день-имя{font-size:14px;color:var(--kb-ink-2)}
.пульт-v16 .день-числа b{font-size:14px;color:var(--kb-ink)}
.пульт-v16 .день-числа u{font-size:12px;color:var(--kb-ink-3)}
@media(max-width:600px){.пульт-v16 .пики-холст{height:190px;gap:2px}.пульт-v16 .пики-ось{gap:2px;font-size:12px}.пульт-v16 .пики-итог{grid-template-columns:repeat(2,minmax(0,1fr))}}


.дни-недели{display:grid; gap:3px; margin-top:16px}
.дни-недели:empty{display:none}
.подзаг{display:block; font-size:12.5px; font-weight:600; color:var(--sand); margin:0 0 6px}
.день{display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:10px;
  padding:5px 8px; border-radius:9px}
.день:hover{background:var(--stone-2)}
.день-имя{font-size:12.5px; color:var(--sand)}
.день.сегодня .день-имя{color:var(--ore); font-weight:600}
.день-жёлоб{height:12px; border-radius:6px; background:var(--inset); overflow:hidden}
.день-жёлоб i{display:block; height:100%; border-radius:6px;
  background:color-mix(in oklab, var(--lamp) 42%, transparent)}
.день.лучший .день-жёлоб i{background:linear-gradient(90deg, var(--lamp-lo), var(--lamp-hi))}
.день-числа{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;
  min-width:86px}
.день-числа b{font-size:13px; font-weight:600}
.день-числа u{display:block; text-decoration:none; font-size:10.5px; color:var(--sand-dim)}


@media (max-width: 520px){
  .пики-холст,.пики-ось{gap:2px}
  .пики-холст{height:150px}
  .час{border-radius:3px 3px 1px 1px}
  .час i{border-radius:3px 3px 1px 1px}
}

@media (prefers-reduced-motion:reduce){
  .час i{transition:none}
}