/* e-Tempahan PKG — gaya utama. Warna sebagai token; mod gelap ikut tetapan peranti. */
:root{
  --bg:#f2f5f9; --surface:#ffffff; --surface-2:#e8edf5; --ink:#131b2d; --muted:#556079; --line:#d5dce8;
  --accent:#1b4fa0; --accent-ink:#ffffff; --accent-soft:#dde7f7; --flag:#c41e3a;
  --ok:#14774a; --warn:#9a5d00; --bad:#b3281e; --off:#687084;
  --tv-bg:#0b1220; --tv-panel:#131d31; --tv-line:#24324f; --tv-ink:#eef2fa; --tv-muted:#93a1bf;
  --tv-kosong:#2fbf71; --tv-guna:#4c8dff; --tv-mula:#f2b336; --tv-tutup:#7d879b;
  --font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --font-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#0d1320; --surface:#151d2e; --surface-2:#1c2740; --ink:#e6ebf5; --muted:#9ba7c1; --line:#2a354e;
  --accent:#86abff; --accent-ink:#0d1320; --accent-soft:#1e2c4d; --flag:#ff6f82;
  --ok:#4cc38a; --warn:#f0b44c; --bad:#ff7d70; --off:#8e97ab; color-scheme:dark }}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.5}
img{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;line-height:1.15}
h1{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:750;letter-spacing:-.01em}
h2{font-size:1.25rem;font-weight:700}
h3{font-size:1.05rem;font-weight:700}
p{margin:0}
a{color:var(--accent)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.eyebrow{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* header */
.hdr-in,.wrap,.foot{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.hdr{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-block:10px}
.adminbar{background:var(--surface-2);border-top:1px solid var(--line)}
.adminbar .hdr-in{padding-block:4px;gap:4px 14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
/* Jata dipotong daripada logo penuh (2000×940): kawasan jata x 615–1390, y 35–645. --h = tinggi paparan. */
.jata{--h:44px;display:inline-block;flex:none;height:var(--h);width:calc(var(--h) * 775 / 610);
  background:url("img/logo-ppdjb.webp") no-repeat;background-size:calc(var(--h) * 2000 / 610) auto;
  background-position:calc(var(--h) * -615 / 610) calc(var(--h) * -35 / 610)}
.logo-penuh{display:block;width:100%;max-width:320px;height:auto}
.brand-t{font-family:var(--font-display);font-weight:750;font-size:1.05rem;line-height:1.1}
.brand-s{font-size:.75rem;color:var(--muted)}
.nav{display:flex;flex-wrap:wrap;gap:2px;flex:1}
.nav a{padding:7px 11px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:700;font-size:.9rem;display:flex;gap:6px;align-items:center}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.adminbar .nav a:hover{background:var(--surface)}
.nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.badge{font-family:var(--font-mono);font-size:.7rem;background:var(--warn);color:var(--surface);border-radius:999px;padding:0 6px;line-height:1.5}
.who{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.who a.small{color:var(--ink);text-decoration:none}
.who form{margin:0}

/* common */
.wrap{padding-block:24px 48px;display:flex;flex-direction:column;gap:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.narrow{max-width:620px;width:100%;margin-inline:auto}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:12px}
.tight{gap:4px}
.btn{font:inherit;font-weight:700;font-size:.9rem;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:9px 14px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;justify-content:center;text-decoration:none;min-height:40px}
.btn:hover{border-color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.btn.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.btn.bad.armed{background:var(--bad);color:var(--surface)}
.btn.sm{padding:5px 10px;min-height:32px;font-size:.82rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:.88rem;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:6px 13px;cursor:pointer;text-decoration:none}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s-Lulus,.s-aktif{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.s-Menunggu,.s-belum_sah{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)}
.s-Ditolak,.s-digantung{color:var(--bad);background:color-mix(in srgb,var(--bad) 13%,transparent)}
.s-Dibatalkan{color:var(--off);background:color-mix(in srgb,var(--off) 15%,transparent)}
.tag{font-size:.75rem;border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--muted);white-space:nowrap}
.tag.ok{color:var(--ok)}
.note{font-size:.85rem;color:var(--muted);border-left:3px solid var(--line);padding:2px 0 2px 10px}
.err{color:var(--bad);font-size:.88rem;font-weight:700}
.warnbox,.flash-amaran,.flash-ralat{background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);border-radius:8px;padding:10px 12px;font-size:.9rem}
.flash-ralat{background:color-mix(in srgb,var(--bad) 10%,transparent);border-color:color-mix(in srgb,var(--bad) 40%,transparent);color:var(--ink)}
.okbox,.flash-berjaya{background:color-mix(in srgb,var(--ok) 12%,transparent);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);border-radius:8px;padding:10px 12px;font-size:.9rem}
.flash-info{background:var(--accent-soft);border-radius:8px;padding:10px 12px;font-size:.9rem}
.empty{text-align:center;padding:30px 16px;color:var(--muted)}

/* forms */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f.full{grid-column:1/-1}
.f>span{font-size:.82rem;font-weight:700;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=date],input[type=time],input[type=file],select,textarea{font:inherit;font-size:16px;width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);min-height:42px}
textarea{min-height:76px;resize:vertical}
.checks{display:flex;flex-wrap:wrap;gap:8px 16px}
.checks label{display:flex;gap:7px;align-items:center;font-size:.92rem}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--accent)}
.inline{display:inline}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:start}
.hero-t{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.lead{font-size:1.05rem;color:var(--muted);max-width:56ch}
.facts{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.85rem;color:var(--muted)}
.facts b{color:var(--ink);font-family:var(--font-mono)}
@media (max-width:820px){.hero{grid-template-columns:1fr}}

/* room cards */
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.room{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.room.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.room.dim{opacity:.6}
.thumb{aspect-ratio:16/7;max-width:100%;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,transparent) 0 10px,transparent 10px 20px),var(--accent-soft);display:flex;align-items:flex-end;justify-content:space-between;padding:10px 12px;color:var(--accent)}
.thumb.img{padding:0;background:var(--surface-2)}
.thumb.img img{width:100%;height:100%;object-fit:cover;display:block}
.thumb b{font-family:var(--font-display);font-size:1.6rem;line-height:1}
.thumb span{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.room-b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.room-b .row{gap:6px}
.room-f{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:4px}
.avail{font-size:.85rem;font-weight:700}
.avail.ya{color:var(--ok)} .avail.tidak{color:var(--bad)} .avail.tutup{color:var(--off)}

/* calendar */
.calbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.datenav{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.datelabel{font-family:var(--font-display);font-weight:700;font-size:1.1rem}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tl{min-width:900px}
.tl-row{display:grid;grid-template-columns:170px 1fr;border-bottom:1px solid var(--line)}
.tl-row:last-child{border-bottom:0}
.tl-room{padding:9px 12px;border-right:1px solid var(--line);font-size:.86rem;font-weight:700;line-height:1.25}
.tl-room small{display:block;font-weight:400;color:var(--muted)}
.tl-hours{display:grid;grid-template-columns:repeat(var(--h),1fr);font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
.tl-hours span{padding:6px 4px;border-left:1px solid var(--line)}
.tl-track{position:relative;min-height:56px;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:calc(100% / var(--s)) 100%}
.tl-track[data-tempah]{cursor:copy}
.ev{position:absolute;top:6px;bottom:6px;border-radius:6px;padding:4px 7px;line-height:1.2;overflow:hidden;text-align:left;font:inherit;font-size:.74rem;border:1px solid transparent;text-decoration:none}
.ev b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev span{font-family:var(--font-mono);font-size:.68rem;opacity:.85}
.ev.Lulus{background:var(--accent);color:var(--accent-ink)}
.ev.Menunggu{background:color-mix(in srgb,var(--warn) 18%,var(--surface));color:var(--ink);border:1px dashed var(--warn)}
.ev.mine{box-shadow:inset 0 0 0 2px var(--flag)}
.closed{position:absolute;inset:0;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--off) 20%,transparent) 0 8px,transparent 8px 16px);display:flex;align-items:center;padding-left:12px;font-size:.8rem;font-weight:700;color:var(--off)}
.now{position:absolute;top:0;bottom:0;width:2px;background:var(--flag);pointer-events:none}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--muted);align-items:center}
.sw{display:inline-block;width:14px;height:10px;border-radius:3px;vertical-align:middle;margin-right:5px}
table.wk{border-collapse:collapse;width:100%;min-width:820px;font-size:.84rem}
.wk th,.wk td{border-bottom:1px solid var(--line);border-left:1px solid var(--line);padding:8px;vertical-align:top;text-align:left}
.wk th{font-size:.78rem;color:var(--muted);background:var(--surface-2)}
.wk td:first-child,.wk th:first-child{border-left:0;font-weight:700;width:150px}
.wk .today{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.wchip{display:block;text-align:left;font-size:.76rem;border-radius:5px;padding:3px 6px;margin-bottom:4px;text-decoration:none;color:var(--ink)}
.wchip.Lulus{background:var(--accent-soft)}
.wchip.Menunggu{background:color-mix(in srgb,var(--warn) 16%,transparent)}
.wchip .mono{font-size:.7rem;color:var(--muted);display:block}
.add{display:block;font-size:.75rem;color:var(--accent);border:1px dashed var(--line);border-radius:5px;padding:3px;text-align:center;text-decoration:none}
.month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.month .dh{font-size:.75rem;font-weight:700;color:var(--muted);text-align:center}
.md{background:var(--surface);border:1px solid var(--line);border-radius:8px;min-height:74px;padding:6px 8px;display:flex;flex-direction:column;gap:4px;color:var(--ink);text-decoration:none;min-width:0}
.md.out{opacity:.35}
.md.we{background:var(--surface-2)}
.md.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.md .n{font-family:var(--font-mono);font-weight:600;font-size:.85rem}
.md .c{font-size:.72rem;color:var(--muted)}
.meter{height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:auto}
.meter i{display:block;height:100%;background:var(--accent)}

/* wizard */
.steps{display:flex;gap:6px;flex-wrap:wrap}
.step{display:flex;gap:8px;align-items:center;font-weight:700;font-size:.88rem;color:var(--muted);padding:6px 12px 6px 6px;border-radius:999px;background:var(--surface-2)}
.step i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface);font-family:var(--font-mono);font-size:.8rem}
.step.on{background:var(--accent);color:var(--accent-ink)}
.step.on i{color:var(--accent)}
.step.done i{background:var(--ok);color:var(--surface)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.slot{font-family:var(--font-mono);font-size:.85rem;padding:10px 4px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.slot:hover{border-color:var(--accent)}
.slot.in{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.slot[disabled]{background:repeating-linear-gradient(45deg,var(--surface-2) 0 6px,transparent 6px 12px);color:var(--muted);text-decoration:line-through;cursor:not-allowed}
.profile{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px 16px;background:var(--surface-2);border-radius:8px;padding:12px 14px;font-size:.88rem}
.profile div span{display:block;font-size:.74rem;color:var(--muted);font-weight:700}
.series{display:flex;flex-direction:column;gap:4px;font-size:.88rem}
.series>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;border-bottom:1px dashed var(--line);padding:4px 0}
.done-hero{display:flex;gap:16px;align-items:flex-start}
.tick{width:52px;height:52px;flex:none;border-radius:50%;background:var(--ok);color:var(--surface);display:grid;place-items:center;font-size:1.6rem;font-weight:700}

/* lists */
.blist{display:flex;flex-direction:column;gap:10px}
.bk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;align-items:center}
.bk-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.bk-m{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.85rem;color:var(--muted)}
.bk-a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.bk-a form{margin:0}
.adm{font-size:.85rem;background:var(--surface-2);border-radius:6px;padding:6px 10px}
@media (max-width:640px){.bk{grid-template-columns:1fr}.bk-a{justify-content:flex-start}}
.appr{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
@media (max-width:760px){.appr{grid-template-columns:1fr}}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:.88rem}
dl.kv dt{color:var(--muted)} dl.kv dd{margin:0;min-width:0}
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line)}
.tabs a{font-weight:700;border-bottom:3px solid transparent;padding:8px 12px;color:var(--muted);text-decoration:none}
.tabs a[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.pager{display:flex;gap:6px;align-items:center;justify-content:center}

/* tables */
table.tb{border-collapse:collapse;width:100%;font-size:.88rem;min-width:640px}
.tb th,.tb td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tb th{font-size:.76rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;background:var(--surface-2)}
.tb tr:last-child td{border-bottom:0}
.tb select,.tb input{min-height:34px;padding:4px 8px;font-size:.88rem}
.tb form{margin:0}
.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* reports */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.kpi b{display:block;font-family:var(--font-display);font-size:1.9rem;font-weight:750;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi span{font-size:.82rem;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:9px}
.barrow{display:grid;grid-template-columns:minmax(110px,190px) minmax(0,1fr) 54px;gap:10px;align-items:center;font-size:.86rem}
.track{height:12px;background:var(--surface-2);border-radius:4px;overflow:hidden;display:block}
.track i{display:block;height:100%;background:var(--accent);border-radius:4px}
.track i.alt{background:var(--ok)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
@media (max-width:420px){.two{grid-template-columns:1fr}.barrow{grid-template-columns:minmax(90px,120px) minmax(0,1fr) 46px}}

/* slip */
.slip{border:1px dashed var(--line);border-radius:10px;padding:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;background:var(--surface)}
.qr{width:110px;height:110px;background:#fff;padding:6px;border-radius:6px}
.qr img,.qr canvas{width:100%!important;height:100%!important}

/* TV */
.tv-page{background:var(--tv-bg);min-height:100vh;margin:0}
.tv{container-type:inline-size;background:var(--tv-bg);color:var(--tv-ink);padding:2.2cqw 2.4cqw;display:flex;flex-direction:column;gap:1.8cqw;min-height:100vh;font-size:max(11px,1.25cqw)}
.tv-head{display:flex;justify-content:space-between;align-items:center;gap:2cqw;border-bottom:1px solid var(--tv-line);padding-bottom:1.4cqw}
.tv-brand{display:flex;gap:1.4cqw;align-items:center}
.tv-logo{background:#fff;border-radius:1cqw;padding:.5cqw .7cqw;display:grid;place-items:center}
.tv-logo .jata{--h:max(40px,5cqw)}
.tv-name{font-family:var(--font-display);font-weight:750;font-size:max(18px,2.8cqw);line-height:1}
.tv-sub{color:var(--tv-muted);font-size:max(11px,1.15cqw);margin-top:.4cqw}
.tv-clock{text-align:right}
.tv-clock b{display:block;font-family:var(--font-mono);font-size:max(22px,3.6cqw);line-height:1;font-weight:600}
.tv-clock span{color:var(--tv-muted);font-size:max(11px,1.2cqw)}
.tv-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1.8cqw;flex:1;min-height:0}
.tv-h{font-size:max(10px,1cqw);letter-spacing:.12em;text-transform:uppercase;color:var(--tv-muted);font-weight:700;margin-bottom:.9cqw}
.tv-rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1cqw;align-content:start}
.tvr{background:var(--tv-panel);border-radius:.9cqw;padding:1cqw 1.2cqw;border-top:.45cqw solid var(--c);display:flex;flex-direction:column;gap:.35cqw;min-width:0}
.tvr .st{color:var(--c);font-weight:700;font-size:max(10px,1.05cqw);text-transform:uppercase;letter-spacing:.06em}
.tvr .nm{font-family:var(--font-display);font-weight:700;font-size:max(13px,1.6cqw);line-height:1.1}
.tvr .in{font-size:max(10px,1.05cqw);color:var(--tv-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-kosong{--c:var(--tv-kosong)} .k-guna{--c:var(--tv-guna)} .k-mula{--c:var(--tv-mula)} .k-tutup{--c:var(--tv-tutup)}
.tv-side{background:var(--tv-panel);border-radius:.9cqw;padding:1.2cqw 1.4cqw;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.tvs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2cqw 1.2cqw;padding:.8cqw 0;border-bottom:1px solid var(--tv-line)}
.tvs .t{font-family:var(--font-mono);font-size:max(10px,1.1cqw);grid-row:span 2}
.tvs .p{font-weight:700;font-size:max(11px,1.2cqw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvs .o{color:var(--tv-muted);font-size:max(10px,1cqw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvs.past{opacity:.45}
.tvs.live .t{color:var(--tv-guna)}
.tv-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.8cqw;align-items:end}
.tv-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.8cqw}
.tvd{background:var(--tv-panel);border-radius:.7cqw;padding:.8cqw 1cqw}
.tvd span{display:block;color:var(--tv-muted);font-size:max(9px,.95cqw)}
.tvd b{font-family:var(--font-mono);font-size:max(14px,1.9cqw);font-weight:600}
.tv-qr{display:flex;gap:1cqw;align-items:center;background:var(--tv-ink);color:var(--tv-bg);border-radius:.8cqw;padding:.7cqw 1cqw;font-size:max(9px,1cqw);font-weight:700;max-width:24cqw;line-height:1.25}
.tv-qr .qr{width:7cqw;height:7cqw;min-width:56px;min-height:56px;padding:0}
.tv-legend{display:flex;flex-wrap:wrap;gap:1.6cqw;color:var(--tv-muted);font-size:max(9px,.95cqw)}
.tv-legend i{display:inline-block;width:.9cqw;height:.9cqw;min-width:8px;min-height:8px;border-radius:50%;background:var(--c);margin-right:.4cqw;vertical-align:middle}
@container (max-width:700px){
  .tv-body{grid-template-columns:1fr}
  .tv-rooms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tv-foot{grid-template-columns:1fr}
  .tv-week{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tv-qr{max-width:none}
}

.foot{padding-block:18px 28px;font-size:.8rem;color:var(--muted);border-top:1px solid var(--line)}

@media print{
  .hdr,.foot,.noprint,.btn{display:none!important}
  body{background:#fff;color:#000}
  .card,.kpi,.slip{border-color:#999}
  .scroll{overflow:visible;border:0}
  table.tb,table.wk,.tl{min-width:0}
}