.hmb-app{
 --wine:#A84344; --wine-deep:#7E2E30; --wine-dark:#4A1D1E;
 --gold:#E3B93C; --gold-soft:#F6E7B8;
 --parchment:#F6EFE2; --cream:#FFFBF2;
 --ink:#2A1E1C; --muted:#7A6A60;
 --line:#E5D9C6;
 --green:#3E6B3F; --green-soft:#E4F0E1;
 --red:#B42318; --red-soft:#FBEAE6;
 --amber:#9A5B00; --amber-soft:#FAF0D6;
 --shadow:0 10px 30px rgba(74,29,30,.10);
 --head-bg:#4A1D1E; --head-ink:#FBF3E4; --head-sub:#D9BFB0;
 --panel-head:linear-gradient(180deg,#FFF9EC,var(--cream));
 --card:#ffffff; --input-bg:#ffffff; --input-line:#D6C6AC;
 --bub-mine:#F3E2C4; --bub-theirs:#ffffff;
 --font-ui:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial;
 --font-display:Fraunces,Georgia,serif;
}
.hmb-app[data-theme="dark"]{
 --parchment:#04060B; --cream:#0B0F17; --card:#0E1320;
 --ink:#E9EEF7; --muted:#8A93A6; --line:#1D2536;
 --wine:#FF3D6E; --wine-deep:#FF6E92; --wine-dark:#0A0D14;
 --gold:#FFC53D; --gold-soft:#2A2210;
 --green:#22E07F; --green-soft:#0D2A1C;
 --red:#FF5C4D; --red-soft:#2A1210;
 --amber:#FFC53D; --amber-soft:#2A2210;
 --shadow:0 0 0 1px rgba(255,255,255,.02),0 12px 34px rgba(0,0,0,.55);
 --head-bg:#070A10; --head-ink:#E9EEF7; --head-sub:#7C879C;
 --panel-head:linear-gradient(180deg,#111726,#0B0F17);
 --input-bg:#0A0E18; --input-line:#273049;
 --bub-mine:#1C2A22; --bub-theirs:#101828;
 --font-display:"JetBrains Mono",Fraunces,monospace;
}
.hmb-app[data-theme="dark"]{background:radial-gradient(1200px 500px at 50% -10%,#0B1120 0%,#04060B 60%)}
.hmb-app[data-theme="midnight"]{background-color:#070C10;background-image:linear-gradient(rgba(79,216,224,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(79,216,224,.04) 1px,transparent 1px);background-size:44px 44px}
/* ── ROYAL — emerald & antique gold, fancy professional ── */
.hmb-app[data-theme="royal"]{
 --parchment:#F3F1E8; --cream:#FCFBF4; --card:#ffffff;
 --ink:#1A2B22; --muted:#6C7A70; --line:#DDDECE;
 --wine:#0F5132; --wine-deep:#0B3D26; --wine-dark:#0E2A1E;
 --gold:#C9A227; --gold-soft:#F3EAC6;
 --green:#2E7D4F; --green-soft:#E3F0E6;
 --red:#B3261E; --red-soft:#FBEAE8;
 --amber:#8A6D00; --amber-soft:#F6EFD2;
 --shadow:0 10px 30px rgba(14,42,30,.10);
 --head-bg:#0E2A1E; --head-ink:#F4EFDE; --head-sub:#A9BFAD;
 --panel-head:linear-gradient(180deg,#FAF7EA,var(--cream));
 --input-bg:#ffffff; --input-line:#C9CBB6;
 --bub-mine:#E7EFE3; --bub-theirs:#ffffff;
}
.hmb-app[data-theme="royal"] .tv{background:#0B241A;border-color:#1E4634}
.hmb-app[data-theme="royal"] .tvCard{background:#123528;border-color:#23533F}
.hmb-app[data-theme="royal"] .tvFeed{background:#0E2A1F}
.hmb-app[data-theme="royal"] .top{border-bottom-color:var(--gold)}

/* ── PEARL — ivory marble, charcoal & champagne gold, luxe ── */
.hmb-app[data-theme="pearl"]{
 --parchment:#F5F2EB; --cream:#FDFCF8; --card:#ffffff;
 --ink:#26231E; --muted:#7E786C; --line:#E6E1D4;
 --wine:#8A6D2F; --wine-deep:#6E5624; --wine-dark:#1E1C18;
 --gold:#C9A96A; --gold-soft:#F1E8D2;
 --green:#3E6B4F; --green-soft:#E7EFE7;
 --red:#A93B32; --red-soft:#F9ECE9;
 --amber:#8A6D2F; --amber-soft:#F3EBD8;
 --shadow:0 12px 34px rgba(38,32,20,.09);
 --head-bg:#1E1C18; --head-ink:#F2EDE1; --head-sub:#B5AC9A;
 --panel-head:linear-gradient(180deg,#FBF8F0,var(--cream));
 --input-bg:#ffffff; --input-line:#D6CFBE;
 --bub-mine:#F0EAD9; --bub-theirs:#ffffff;
}
.hmb-app[data-theme="pearl"] .tv{background:#191712;border-color:#37311F}
.hmb-app[data-theme="pearl"] .tvCard{background:#262218;border-color:#3B3423}
.hmb-app[data-theme="pearl"] .tvFeed{background:#1E1B14}

/* ── MIDNIGHT — live threat-map / SOC command center ── */
.hmb-app[data-theme="midnight"]{
 --parchment:#070C10; --cream:#0C1318; --card:#101A20;
 --ink:#D7E3E8; --muted:#5F7681; --line:#1C3138;
 --wine:#C42847; --wine-deep:#E0506B; --wine-dark:#04080B;
 --gold:#E8C547; --gold-soft:#2A2410;
 --green:#3FD68C; --green-soft:#0D2A1E;
 --red:#FF4D5E; --red-soft:#2A1014;
 --amber:#E8C547; --amber-soft:#2A2410;
 --shadow:0 0 0 1px rgba(79,216,224,.04),0 14px 34px rgba(0,0,0,.6);
 --head-bg:#04080B; --head-ink:#D7E3E8; --head-sub:#537480;
 --panel-head:linear-gradient(180deg,#0F1B21,#0C1318);
 --input-bg:#081014; --input-line:#24404A;
 --bub-mine:#12242B; --bub-theirs:#0E181E;
 --font-display:"JetBrains Mono",monospace;
}
.hmb-app[data-theme="midnight"] .top{border-bottom:1px solid #16323A;box-shadow:0 1px 0 rgba(79,216,224,.28),0 10px 30px rgba(0,0,0,.55)}
.hmb-app[data-theme="midnight"] .brandName,.hmb-app[data-theme="midnight"] .brandName em{color:#4FD8E0;text-shadow:0 0 14px rgba(79,216,224,.35)}
.hmb-app[data-theme="midnight"] .appId{border-color:#16323A;color:#537480}
.hmb-app[data-theme="midnight"] .liveChip{border-color:rgba(79,216,224,.5);color:#4FD8E0;font-family:"JetBrains Mono",monospace}
.hmb-app[data-theme="midnight"] .liveDot{background:#4FD8E0;box-shadow:0 0 9px #4FD8E0}
.hmb-app[data-theme="midnight"] .tabs button{background:#0C1B22;border:1px solid #16323A;color:#8FAAB4}
.hmb-app[data-theme="midnight"] .tabs button.active{background:#C42847;border-color:#C42847;color:#FFE6EA;box-shadow:0 0 14px rgba(196,40,71,.45)}
.hmb-app[data-theme="midnight"] .iconBtn{border-color:#16323A!important;color:#4FD8E0!important}
.hmb-app[data-theme="midnight"] .bellBadge{background:#C42847;box-shadow:0 0 8px rgba(196,40,71,.7)}
.hmb-app[data-theme="midnight"] .hero h1{color:#D7E3E8;font-size:21px;letter-spacing:1.5px;text-transform:uppercase}
.hmb-app[data-theme="midnight"] .clock{font-family:"JetBrains Mono",monospace;color:#4FD8E0}
.hmb-app[data-theme="midnight"] .panelHead h2,.hmb-app[data-theme="midnight"] .chatHead h2{color:#4FD8E0;font-size:12.5px;letter-spacing:1.8px;text-transform:uppercase}
.hmb-app[data-theme="midnight"] .panel.pn-tasks{border-top:2px solid #3FD68C}
.hmb-app[data-theme="midnight"] .panel.pn-report{border-top:2px solid #E8C547}
.hmb-app[data-theme="midnight"] .panel.pn-msgs{border-top:2px solid #C42847}
.hmb-app[data-theme="midnight"] .panel.pn-pickup{border-top:2px solid #4FD8E0}
.hmb-app[data-theme="midnight"] .badge{border:1px solid currentColor;background:transparent!important;font-family:"JetBrains Mono",monospace}
.hmb-app[data-theme="midnight"] .bad-red{color:#FF4D5E}
.hmb-app[data-theme="midnight"] .bad-green{color:#3FD68C}
.hmb-app[data-theme="midnight"] .bad-amber{color:#E8C547}
.hmb-app[data-theme="midnight"] .bad-blue{color:#4FD8E0}
.hmb-app[data-theme="midnight"] .message p,.hmb-app[data-theme="midnight"] .bub p{color:#B9CCD4}
.hmb-app[data-theme="midnight"] .message .title,.hmb-app[data-theme="midnight"] .bub .name,.hmb-app[data-theme="midnight"] .modal h2,.hmb-app[data-theme="midnight"] .message b,.hmb-app[data-theme="midnight"] .notifItem span{color:var(--ink)}
.hmb-app[data-theme="midnight"] .bub .name{font-family:"JetBrains Mono",monospace;font-size:11px}
.hmb-app[data-theme="midnight"] .stat{border-top:3px solid #E8C547}
.hmb-app[data-theme="midnight"] .stat b{color:var(--ink)}
.hmb-app[data-theme="midnight"] .stat.hot{border-top-color:#FF4D5E}.hmb-app[data-theme="midnight"] .stat.hot b{color:#FF4D5E}
.hmb-app[data-theme="midnight"] .stat.ok{border-top-color:#3FD68C}.hmb-app[data-theme="midnight"] .stat.ok b{color:#3FD68C}
.hmb-app[data-theme="midnight"] .stat.cool{border-top-color:#4FD8E0}
.hmb-app[data-theme="midnight"] .stat span{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:1.2px}
.hmb-app[data-theme="midnight"] .field label{color:#5F7681;font-family:"JetBrains Mono",monospace;letter-spacing:1px}
.hmb-app[data-theme="midnight"] .task{border-left-color:#3FD68C}
.hmb-app[data-theme="midnight"] .task.overdue{animation:pulseMid 2.4s infinite;border-left-color:#FF4D5E}
@keyframes pulseMid{50%{box-shadow:0 0 16px rgba(255,77,94,.35)}}
.hmb-app[data-theme="midnight"] .creator{color:#4FD8E0}
.hmb-app[data-theme="midnight"] .secondary{background:#0C1B22;color:#9FB9C2;border:1px solid #1E3A44}
.hmb-app[data-theme="midnight"] .primary{background:#0E3524;color:#3FD68C;border:1px solid #1E5C40}
.hmb-app[data-theme="midnight"] .blue{background:#3A0F1C;color:#FF8FA0;border:1px solid #7E1626}
.hmb-app[data-theme="midnight"] .cyan{background:#0A2630;color:#4FD8E0;border:1px solid #1B4B5C}
.hmb-app[data-theme="midnight"] .danger{background:#2A1014;color:#FF8B96}
.hmb-app[data-theme="midnight"] .pin button{background:#0C1B22;color:var(--ink);border:1px solid #1E3A44}
.hmb-app[data-theme="midnight"] .choices button:hover{border-color:#4FD8E0;background:#0E2028}
.hmb-app[data-theme="midnight"] .quick button:hover{border-color:#4FD8E0;box-shadow:0 0 12px rgba(79,216,224,.25)}
.hmb-app[data-theme="midnight"] .pkCard{border-left-color:#4FD8E0}
.hmb-app[data-theme="midnight"] .pkCard:hover{border-color:#4FD8E0;box-shadow:0 0 10px rgba(79,216,224,.25)}
.hmb-app[data-theme="midnight"] .tag.staff{background:#0D2A1E;color:#3FD68C}
.hmb-app[data-theme="midnight"] .tag.store{background:#0A2630;color:#4FD8E0}
.hmb-app[data-theme="midnight"] .tag.system{background:#241436;color:#C4A6FF}
.hmb-app[data-theme="midnight"] .message.important,.hmb-app[data-theme="midnight"] .bub.card{border-left-color:#FF4D5E;background:#160D12}
.hmb-app[data-theme="midnight"] .bub.card.pickupMsg{border-left-color:#4FD8E0;background:#0B171E}
.hmb-app[data-theme="midnight"] .bub.card .title{color:#E8C547;font-family:"JetBrains Mono",monospace;letter-spacing:.6px}
.hmb-app[data-theme="midnight"] .bub.card.pickupMsg .title{color:#4FD8E0}
.hmb-app[data-theme="midnight"] .bub.attn{animation:attnMid 1.3s ease-in-out infinite}
@keyframes attnMid{0%,100%{box-shadow:0 0 0 0 rgba(196,40,71,0)}50%{box-shadow:0 0 16px rgba(255,77,94,.55);border-color:#FF4D5E}}
.hmb-app[data-theme="midnight"] .unreadPill{background:#2A1014;color:#FF4D5E}
.hmb-app[data-theme="midnight"] .unreadPill .tinyDot{background:#FF4D5E;box-shadow:0 0 7px #FF4D5E}
.hmb-app[data-theme="midnight"] .dueChip{background:#2A2410;color:#E8C547;border-color:#5C4E1A}
.hmb-app[data-theme="midnight"] .task.overdue .dueChip{background:#2A1014;color:#FF4D5E;border-color:#7E1626}
.hmb-app[data-theme="midnight"] .composer input:focus,.hmb-app[data-theme="midnight"] .field input:focus,.hmb-app[data-theme="midnight"] .field select:focus,.hmb-app[data-theme="midnight"] .field textarea:focus{outline-color:#4FD8E0;border-color:#4FD8E0}
.hmb-app[data-theme="midnight"] .scrolly::-webkit-scrollbar-thumb,.hmb-app[data-theme="midnight"] .chatBody::-webkit-scrollbar-thumb,.hmb-app[data-theme="midnight"] .slideGrid::-webkit-scrollbar-thumb,.hmb-app[data-theme="midnight"] .quick::-webkit-scrollbar-thumb{background:#1C3138}
.hmb-app[data-theme="midnight"] .tv{background-color:#04080B;background-image:linear-gradient(rgba(79,216,224,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(79,216,224,.05) 1px,transparent 1px);background-size:44px 44px;border:1px solid #16323A;color:var(--ink)}
.hmb-app[data-theme="midnight"] .tvTitle{color:#D7E3E8}
.hmb-app[data-theme="midnight"] .tvTitle em{color:#4FD8E0;text-shadow:0 0 18px rgba(79,216,224,.5)}
.hmb-app[data-theme="midnight"] .tvMeta{font-family:"JetBrains Mono",monospace;color:#4FD8E0}
.hmb-app[data-theme="midnight"] .tvBanner{display:block;background:linear-gradient(90deg,#C42847,#7E1626);color:#FFE6EA}
.hmb-app[data-theme="midnight"] .tvCard{background:#0A141A;border:1px solid #16323A;border-top:3px solid var(--tv-accent,#3FD68C);box-shadow:0 0 22px rgba(0,0,0,.55)}
.hmb-app[data-theme="midnight"] .tvCard.c1{--tv-accent:#3FD68C}.hmb-app[data-theme="midnight"] .tvCard.c2{--tv-accent:#C42847}.hmb-app[data-theme="midnight"] .tvCard.c3{--tv-accent:#E8C547}
.hmb-app[data-theme="midnight"] .tvCard h2{color:var(--tv-accent,#4FD8E0);font-family:"JetBrains Mono",monospace;font-size:clamp(15px,1.6vw,20px);letter-spacing:1.8px;text-transform:uppercase}
.hmb-app[data-theme="midnight"] .tvNums span{color:#5F7681;font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:1px;font-size:clamp(9px,.95vw,11px)}
.hmb-app[data-theme="midnight"] .tvNums .ok b{color:#3FD68C}.hmb-app[data-theme="midnight"] .tvNums .pend b{color:#E8C547}.hmb-app[data-theme="midnight"] .tvNums .over b{color:#FF4D5E}
.hmb-app[data-theme="midnight"] .ticker{background:linear-gradient(90deg,#C42847,#7E1626);color:#FFE6EA;font-family:"JetBrains Mono",monospace}
.hmb-app[data-theme="midnight"] .tvAlert{background:#2A0A10;color:#FF4D5E;border:1px solid #FF4D5E;box-shadow:0 0 24px rgba(255,77,94,.4)}
.hmb-app[data-theme="midnight"] .toast{background:#0C1318;color:var(--ink);border:1px solid #24404A;border-left:4px solid #4FD8E0}
.hmb-app[data-theme="midnight"] .modal{border:1px solid #24404A;border-top:3px solid #C42847;box-shadow:0 0 40px rgba(79,216,224,.12),0 30px 80px rgba(0,0,0,.65)}
.hmb-app[data-theme="midnight"] .notifDrop{border-color:#24404A}
.hmb-app[data-theme="midnight"] .notifDrop h3{color:#4FD8E0;font-family:"JetBrains Mono",monospace;letter-spacing:1.5px;text-transform:uppercase}
.hmb-app[data-theme="midnight"] .notifItem:hover{background:#0E2028}
.hmb-app[data-theme="midnight"] .feedItem small{font-family:"JetBrains Mono",monospace;font-size:10.5px}
.hmb-app[data-theme="midnight"] .histNote,.hmb-app[data-theme="midnight"] .scrollHint{color:#5F7681}
.hmb-app[data-theme="dark"] .panelHead .liveChip,.hmb-app[data-theme="midnight"] .panelHead .liveChip{color:var(--gold)!important;background:transparent!important;border-color:var(--gold)!important}
.hmb-app[data-theme="dark"] .panelHead .liveChip .liveDot,.hmb-app[data-theme="midnight"] .panelHead .liveChip .liveDot{background:var(--gold)!important;box-shadow:0 0 8px var(--gold)}

.hmb-app *{box-sizing:border-box}
.hmb-app{margin:0;font-family:var(--font-ui);background:var(--parchment);color:var(--ink);font-size:14px}
.hmb-app button,.hmb-app input,.hmb-app select,.hmb-app textarea{font:inherit}
.hmb-app h1,.hmb-app h2,.hmb-app h3,.hmb-app .brandName,.hmb-app .tvTitle{font-family:var(--font-display)}

/* ── Header ─────────────────────────────── */
.hmb-app .top{background:var(--head-bg);color:var(--head-ink);display:flex;align-items:center;gap:14px;padding:11px 20px;position:sticky;top:0;z-index:20;border-bottom:3px solid var(--gold)}
.hmb-app[data-theme="dark"] .top{border-bottom:1px solid #1C2536;box-shadow:0 1px 0 rgba(255,61,110,.35),0 10px 30px rgba(0,0,0,.5)}
.hmb-app .brandName{font-size:19px;font-weight:900;letter-spacing:.3px;line-height:1.1;color:var(--gold);display:flex;align-items:baseline;gap:8px}
.hmb-app .brandName em{font-style:normal;color:var(--gold)}
.hmb-app .appId{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.8px;color:var(--head-sub);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:2px 7px}
.hmb-app[data-theme="dark"] .appId{border-color:#26314B;color:#8A93A6}
.hmb-app .brandSub{font-size:11px;color:var(--head-sub);margin-top:2px;letter-spacing:.4px}
.hmb-app .liveChip{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(227,185,60,.4);border-radius:999px;padding:5px 11px;font-weight:800;font-size:11px;letter-spacing:.6px}
.hmb-app[data-theme="dark"] .liveChip{border-color:rgba(34,224,127,.5);color:#22E07F;font-family:"JetBrains Mono",monospace}
.hmb-app .liveDot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:blink 1.6s infinite}
.hmb-app[data-theme="dark"] .liveDot{background:#22E07F;box-shadow:0 0 8px #22E07F}
@keyframes blink{50%{opacity:.25}}
.hmb-app .tabs{margin-left:auto;display:flex;gap:7px;align-items:center}
.hmb-app .tabs button{border:0;border-radius:11px;padding:9px 14px;background:rgba(255,255,255,.08);color:var(--head-ink);font-weight:800;cursor:pointer;transition:background .15s;font-size:13px}
.hmb-app .tabs button:hover{background:rgba(255,255,255,.16)}
.hmb-app .tabs button.active{background:var(--gold);color:#2A1E1C}
.hmb-app[data-theme="dark"] .tabs button{background:#131A2A;border:1px solid #1F2A40;color:#B9C3D6}
.hmb-app[data-theme="dark"] .tabs button.active{background:var(--wine);border-color:var(--wine);color:#0A0D14;box-shadow:0 0 14px rgba(255,61,110,.45)}
.hmb-app .themeSel{appearance:none;-webkit-appearance:none;cursor:pointer;font-weight:800;font-size:12px!important;color:var(--head-ink)}
.hmb-app .themeSel option{color:#1A1A1A;background:#fff}
.hmb-app .iconBtn{position:relative;border:1px solid rgba(255,255,255,.25)!important;background:transparent!important;font-size:15px!important;padding:8px 11px!important}
.hmb-app[data-theme="dark"] .iconBtn{border-color:#2A3550!important;color:#FFC53D!important}
.hmb-app .bellBadge{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;font-size:10px;font-weight:800;min-width:17px;height:17px;line-height:17px;text-align:center;border-radius:99px;display:none;animation:blink 1.2s infinite}
.hmb-app[data-theme="dark"] .bellBadge{background:#FF3D6E;box-shadow:0 0 8px rgba(255,61,110,.7)}
.hmb-app .tabs button:focus-visible,.hmb-app .btn:focus-visible,.hmb-app .quick button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Notification dropdown */
.hmb-app .notifDrop{display:none;position:fixed;top:62px;right:16px;width:min(360px,92vw);background:var(--cream);border:1px solid var(--line);border-radius:15px;box-shadow:0 24px 60px rgba(0,0,0,.3);z-index:60;overflow:hidden}
.hmb-app[data-theme="dark"] .notifDrop{border-color:#22304C}
.hmb-app .notifDrop.show{display:block;animation:fadeIn .2s ease}
.hmb-app .notifDrop h3{margin:0;padding:12px 15px;border-bottom:1px solid var(--line);font-size:13px;color:var(--wine-dark)}
.hmb-app[data-theme="dark"] .notifDrop h3{color:var(--ink);font-family:"JetBrains Mono",monospace;letter-spacing:1px;text-transform:uppercase}
.hmb-app .notifList{max-height:340px;overflow:auto}
.hmb-app .notifItem{padding:11px 15px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px}
.hmb-app .notifItem:hover{background:var(--gold-soft)}
.hmb-app[data-theme="dark"] .notifItem:hover{background:#141B2E}
.hmb-app .notifItem b{display:block;font-size:12px;color:var(--wine)}
.hmb-app .notifItem span{color:var(--ink)}
.hmb-app .notifItem small{display:block;color:var(--muted);margin-top:2px}
.hmb-app .notifEmpty{padding:16px;color:var(--muted);font-size:13px;text-align:center}

.hmb-app main{max-width:1560px;margin:auto;padding:18px 20px}
.hmb-app .view{display:none}.hmb-app .view.active{display:block;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Hero ───────────────────────────────── */
.hmb-app .hero{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.hmb-app .hero h1{margin:0;font-size:26px;font-weight:900;color:var(--wine-dark)}
.hmb-app[data-theme="dark"] .hero h1{color:var(--ink);font-size:22px;letter-spacing:.5px}
.hmb-app .sub{color:var(--muted);margin-top:4px;font-size:13px}
.hmb-app .clock{font-weight:800;color:var(--wine);font-variant-numeric:tabular-nums;text-align:right;font-size:13px}
.hmb-app[data-theme="dark"] .clock{font-family:"JetBrains Mono",monospace;color:var(--gold)}
.hmb-app .clock .secs{color:var(--muted);font-weight:600;font-size:12px;display:block}

/* ── Panels ─────────────────────────────── */
.hmb-app .grid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:15px;align-items:start}
.hmb-app .panel{background:var(--cream);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.hmb-app .panelHead{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel-head)}
.hmb-app .panelHead h2{margin:0;font-size:16px;font-weight:700;color:var(--wine-dark)}
.hmb-app[data-theme="dark"] .panelHead h2{color:var(--ink);font-size:13px;letter-spacing:1.4px;text-transform:uppercase}
.hmb-app .body{padding:13px}
.hmb-app[data-theme="dark"] .panel.pn-tasks{border-top:3px solid #22E07F}
.hmb-app[data-theme="dark"] .panel.pn-report{border-top:3px solid #FFC53D}
.hmb-app[data-theme="dark"] .panel.pn-msgs{border-top:3px solid #FF3D6E}
.hmb-app[data-theme="dark"] .panel.pn-pickup{border-top:3px solid #35C7FF}

.hmb-app .scrolly{max-height:440px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.hmb-app .scrolly::-webkit-scrollbar{width:8px}
.hmb-app .scrolly::-webkit-scrollbar-track{background:transparent}
.hmb-app .scrolly::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.hmb-app[data-theme="dark"] .scrolly::-webkit-scrollbar-thumb{background:#243050}
.hmb-app .scrollHint{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:11px;font-weight:700}

/* ── Tasks ──────────────────────────────── */
.hmb-app .task{border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--card)}
.hmb-app[data-theme="dark"] .task{border-left-color:#22E07F}
.hmb-app .task.overdue{border-left-color:var(--red);background:var(--red-soft);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(180,35,24,.07)}}
.hmb-app[data-theme="dark"] .task.overdue{animation:pulseDark 2.4s infinite}
@keyframes pulseDark{50%{box-shadow:0 0 14px rgba(255,92,77,.35)}}
.hmb-app .taskTop{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}
.hmb-app .task h3{margin:0 0 4px;font-size:16px;font-weight:700}
.hmb-app .meta{color:var(--muted);font-size:12px}
.hmb-app .creator{font-weight:800;color:var(--wine-deep)}
.hmb-app .badge{display:inline-block;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.4px;white-space:nowrap}
.hmb-app[data-theme="dark"] .badge{font-family:"JetBrains Mono",monospace;border:1px solid currentColor;background:transparent!important}
.hmb-app .bad-red{background:#F7CFC9;color:#7E1810}
.hmb-app[data-theme="dark"] .bad-red{color:#FF5C4D}
.hmb-app .bad-green{background:var(--green-soft);color:var(--green)}
.hmb-app .bad-amber{background:var(--gold-soft);color:var(--amber)}
.hmb-app .bad-blue{background:#DCEBFA;color:#175CD3}
.hmb-app[data-theme="dark"] .bad-blue{color:#35C7FF}
.hmb-app .actions{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.hmb-app .btn{border:0;border-radius:11px;padding:10px 14px;font-weight:800;cursor:pointer;min-height:42px;transition:filter .15s,transform .1s;font-size:13px}
.hmb-app .btn:hover{filter:brightness(1.06)}.hmb-app .btn:active{transform:scale(.98)}
.hmb-app .btn.sm{min-height:34px;padding:7px 11px;font-size:12px;border-radius:9px}
.hmb-app .primary{background:var(--green);color:#fff}
.hmb-app[data-theme="dark"] .primary{background:#103A25;color:#22E07F;border:1px solid #1E6B44}
.hmb-app .secondary{background:#EFE6D3;color:#5A4636}
.hmb-app[data-theme="dark"] .secondary{background:#131A2A;color:#B9C3D6;border:1px solid #243050}
.hmb-app .blue{background:var(--wine);color:#fff}
.hmb-app[data-theme="dark"] .blue{background:#2A1220;color:#FF6E92;border:1px solid #5A2440}
.hmb-app .cyan{background:#E3F1FB;color:#0E5C8F}
.hmb-app[data-theme="dark"] .cyan{background:#0C2233;color:#35C7FF;border:1px solid #1B4B6B}
.hmb-app .full{width:100%}

/* ── Group chat (messenger style) ───────── */
.hmb-app .chatPanel{display:flex;flex-direction:column;position:sticky;top:74px;height:calc(100vh - 100px);min-height:420px}
.hmb-app .chatHead{padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel-head)}
.hmb-app .chatHeadRow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hmb-app .chatHead h2{margin:0;font-size:15px;font-weight:700;color:var(--wine-dark);display:flex;align-items:center;gap:8px}
.hmb-app[data-theme="dark"] .chatHead h2{color:var(--ink);font-size:12px;letter-spacing:1.4px;text-transform:uppercase}
.hmb-app .unreadPill{display:none;align-items:center;gap:5px;background:var(--red-soft);color:var(--red);border:1px solid currentColor;border-radius:99px;padding:3px 9px;font-size:11px;font-weight:800}
.hmb-app .unreadPill .tinyDot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:blink 1.1s infinite}
.hmb-app[data-theme="dark"] .unreadPill{background:#22101A;color:#FF3D6E}
.hmb-app[data-theme="dark"] .unreadPill .tinyDot{background:#FF3D6E;box-shadow:0 0 7px #FF3D6E}
.hmb-app .meRow{display:flex;gap:7px;align-items:center;margin-top:8px}
.hmb-app .meRow label{font-size:11px;font-weight:800;color:var(--muted);white-space:nowrap}
.hmb-app .meRow select{flex:1;border:1px solid var(--input-line);border-radius:9px;padding:7px 9px;background:var(--input-bg);color:var(--ink);font-size:13px;font-weight:700}
.hmb-app .muteBtn{border:1px solid var(--input-line);background:var(--input-bg);color:var(--ink);border-radius:9px;padding:7px 10px;cursor:pointer;font-size:14px}
.hmb-app .chatBody{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px;overscroll-behavior:contain;scrollbar-width:thin}
.hmb-app .chatBody::-webkit-scrollbar{width:8px}
.hmb-app .chatBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.hmb-app[data-theme="dark"] .chatBody::-webkit-scrollbar-thumb{background:#243050}
.hmb-app .bub{max-width:88%;border:1px solid var(--line);border-radius:14px;padding:9px 12px;background:var(--bub-theirs);font-size:13px;line-height:1.45}
.hmb-app .bub.mine{margin-left:auto;background:var(--bub-mine);border-color:transparent;border-bottom-right-radius:4px}
.hmb-app .bub.theirs{border-bottom-left-radius:4px}
.hmb-app .bub .who{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.hmb-app .bub .name{font-weight:800;font-size:12px;color:var(--wine-deep)}
.hmb-app[data-theme="dark"] .bub .name{color:#C9D2E3}
.hmb-app .tag{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;font-weight:800;letter-spacing:.5px;padding:2px 6px;border-radius:5px;text-transform:uppercase}
.hmb-app .tag.admin{background:var(--gold);color:#3A2A00}
.hmb-app .tag.staff{background:#CFEFDA;color:#14532D}
.hmb-app[data-theme="dark"] .tag.staff{background:#0F3322;color:#22E07F}
.hmb-app .tag.store{background:#D8ECFB;color:#0E5C8F}
.hmb-app[data-theme="dark"] .tag.store{background:#0C2233;color:#35C7FF}
.hmb-app .bub p{margin:0;color:var(--ink)}
.hmb-app .bub small{display:block;color:var(--muted);font-size:10.5px;margin-top:4px;font-variant-numeric:tabular-nums}
.hmb-app .bub .ackLine{margin-top:5px;font-size:11px;font-weight:800;color:var(--green)}
.hmb-app .bub.card{border-left:5px solid var(--red);background:var(--card)}
.hmb-app .bub.card.pickupMsg{border-left-color:#35A0FF}
.hmb-app[data-theme="dark"] .bub.card.pickupMsg{border-left-color:#35C7FF}
.hmb-app .bub.card .title{font-weight:800;font-size:12px;color:var(--wine-dark);letter-spacing:.4px}
.hmb-app[data-theme="dark"] .bub.card .title{color:var(--ink);font-family:"JetBrains Mono",monospace}
.hmb-app .bub.attn{animation:attn 1.3s ease-in-out infinite}
@keyframes attn{0%,100%{box-shadow:0 0 0 0 rgba(180,35,24,0)}50%{box-shadow:0 0 0 4px rgba(180,35,24,.18);border-color:var(--red)}}
.hmb-app[data-theme="dark"] .bub.attn{animation:attnDark 1.3s ease-in-out infinite}
@keyframes attnDark{0%,100%{box-shadow:0 0 0 0 rgba(255,61,110,0)}50%{box-shadow:0 0 14px rgba(255,61,110,.5);border-color:#FF3D6E}}
.hmb-app .bub.flash{animation:flashBg 1.6s ease}
@keyframes flashBg{0%{box-shadow:0 0 0 4px var(--gold)}100%{box-shadow:0 0 0 0 transparent}}
.hmb-app .composer{display:flex;gap:7px;padding:10px 12px;border-top:1px solid var(--line);background:var(--panel-head)}
.hmb-app .composer input{flex:1;border:1px solid var(--input-line);border-radius:11px;padding:10px 12px;background:var(--input-bg);color:var(--ink);font-size:13px}
.hmb-app .composer input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.hmb-app[data-theme="dark"] .composer input:focus{outline-color:var(--wine);border-color:var(--wine)}
.hmb-app .histNote{color:var(--muted);font-size:10.5px;padding:5px 12px 9px;background:var(--panel-head)}

/* ── Quick report ───────────────────────── */
.hmb-app .quick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.hmb-app .quick button{min-height:82px;border:1px solid var(--line);border-radius:13px;background:var(--card);font-weight:800;font-size:12.5px;cursor:pointer;color:var(--ink);transition:transform .12s,border-color .12s;padding:6px}
.hmb-app .quick button:hover{transform:translateY(-2px);border-color:var(--gold)}
.hmb-app[data-theme="dark"] .quick button:hover{border-color:var(--wine);box-shadow:0 0 12px rgba(255,61,110,.25)}
.hmb-app .quick .ico{font-size:17px;display:block;margin-bottom:2px}
.hmb-app .quick button.hot{border-color:#8FC6FF}
.hmb-app[data-theme="dark"] .quick button.hot{border-color:#35C7FF}

/* ── Stats ──────────────────────────────── */
.hmb-app .stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.hmb-app .stat{background:var(--cream);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:13px;padding:12px 13px;box-shadow:var(--shadow)}
.hmb-app .stat b{font-family:var(--font-display);font-size:26px;display:block;color:var(--wine-dark);font-variant-numeric:tabular-nums}
.hmb-app[data-theme="dark"] .stat b{color:var(--ink)}
.hmb-app .stat span{color:var(--muted);font-size:11px;font-weight:700}
.hmb-app[data-theme="dark"] .stat span{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:1px}
.hmb-app .stat.hot{border-top-color:var(--red)}.hmb-app .stat.hot b{color:var(--red)}
.hmb-app .stat.cool{border-top-color:#35A0FF}
.hmb-app[data-theme="dark"] .stat.cool{border-top-color:#35C7FF}
.hmb-app[data-theme="dark"] .stat.ok{border-top-color:#22E07F}.hmb-app[data-theme="dark"] .stat.ok b{color:#22E07F}

/* ── Admin ──────────────────────────────── */
.hmb-app .adminGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 390px;gap:15px;align-items:start}
.hmb-app .adminMain{display:flex;flex-direction:column;gap:15px}
.hmb-app .adminMain .panel{flex:0 0 auto;min-height:fit-content}
.hmb-app .formGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.hmb-app .field label{display:block;font-size:11px;font-weight:800;color:#6C5748;margin:0 0 4px;letter-spacing:.3px}
.hmb-app[data-theme="dark"] .field label{color:#8A93A6;font-family:"JetBrains Mono",monospace;letter-spacing:1px}
.hmb-app .field input,.hmb-app .field select,.hmb-app .field textarea{width:100%;border:1px solid var(--input-line);border-radius:10px;padding:10px;background:var(--input-bg);color:var(--ink);font-size:13px}
.hmb-app .field input:focus,.hmb-app .field select:focus,.hmb-app .field textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.hmb-app[data-theme="dark"] .field input:focus,.hmb-app[data-theme="dark"] .field select:focus,.hmb-app[data-theme="dark"] .field textarea:focus{outline-color:var(--wine);border-color:var(--wine)}
.hmb-app .span2{grid-column:1/-1}
.hmb-app .feed{max-height:400px;overflow:auto}
.hmb-app .feedItem{padding:10px 2px;border-bottom:1px solid var(--line);animation:fadeIn .3s ease;font-size:13px}
.hmb-app .feedItem b{display:block;color:var(--ink)}
.hmb-app .feedItem small{color:var(--muted);font-size:11px}
.hmb-app[data-theme="dark"] .feedItem small{font-family:"JetBrains Mono",monospace;font-size:10.5px}
.hmb-app .message{border:1px solid var(--line);border-radius:12px;padding:11px;margin-bottom:9px;background:var(--card);font-size:13px}
.hmb-app .message b{color:var(--wine-dark)}
.hmb-app[data-theme="dark"] .message b{color:var(--ink)}
.hmb-app .message p{margin:5px 0 0;color:#4E3E34}
.hmb-app[data-theme="dark"] .message p{color:#C9D2E3}

/* ── TV board ───────────────────────────── */
.hmb-app .tv{background:var(--wine-dark);color:#FBF3E4;min-height:calc(100vh - 120px);border-radius:20px;padding:26px 30px;border:1px solid #6A3233;position:relative;overflow:hidden}
.hmb-app[data-theme="dark"] .tv{background:radial-gradient(1400px 600px at 50% -15%,#0D1424 0%,#04060B 60%);border:1px solid #1C2536;color:var(--ink)}
.hmb-app .tvHead{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.hmb-app .tvTitle{font-size:clamp(26px,3.5vw,46px);margin:0;font-weight:900}
.hmb-app .tvTitle em{font-style:normal;color:var(--gold)}
.hmb-app[data-theme="dark"] .tvTitle{font-size:clamp(22px,2.8vw,38px);letter-spacing:.5px}
.hmb-app[data-theme="dark"] .tvTitle em{color:#FF3D6E;text-shadow:0 0 18px rgba(255,61,110,.5)}
.hmb-app .tvMeta{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px;font-size:clamp(12px,1.3vw,16px);color:#E9CE9C}
.hmb-app[data-theme="dark"] .tvMeta{font-family:"JetBrains Mono",monospace;color:#FFC53D}
.hmb-app .tvBanner{display:none;margin-top:16px;border-radius:11px;padding:11px 15px;font-family:"JetBrains Mono",monospace;font-weight:800;font-size:clamp(12px,1.2vw,15px);background:linear-gradient(90deg,#FF3D6E,#FF9046);color:#14060A}
.hmb-app[data-theme="dark"] .tvBanner{display:block}
.hmb-app .tvGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:22px}
.hmb-app .tvCard{background:#5B2526;border:1px solid #7E3B3C;border-top:5px solid var(--gold);border-radius:16px;padding:19px}
.hmb-app[data-theme="dark"] .tvCard{background:#0B111E;border:1px solid #1E2A42;border-top:3px solid var(--tv-accent,#22E07F);box-shadow:0 0 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.03)}
.hmb-app[data-theme="dark"] .tvCard.c1{--tv-accent:#22E07F}.hmb-app[data-theme="dark"] .tvCard.c2{--tv-accent:#FF3D6E}.hmb-app[data-theme="dark"] .tvCard.c3{--tv-accent:#FFC53D}
.hmb-app .tvCard h2{margin:0 0 13px;font-size:clamp(19px,2vw,26px);color:#FBF3E4}
.hmb-app[data-theme="dark"] .tvCard h2{color:var(--tv-accent,#22E07F);font-family:"JetBrains Mono",monospace;font-size:clamp(15px,1.6vw,20px);letter-spacing:1.5px;text-transform:uppercase}
.hmb-app .tvNums{display:flex;justify-content:space-between;gap:8px;text-align:center}
.hmb-app .tvNums b{font-family:var(--font-display);font-size:clamp(23px,2.7vw,38px);display:block;font-variant-numeric:tabular-nums}
.hmb-app .tvNums span{font-size:clamp(11px,1.1vw,14px);color:#E4C9B8;font-weight:700}
.hmb-app[data-theme="dark"] .tvNums span{color:#8A93A6;font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:1px;font-size:clamp(9px,.95vw,11px)}
.hmb-app .tvNums .ok b{color:#9FD8A0}.hmb-app .tvNums .pend b{color:var(--gold)}.hmb-app .tvNums .over b{color:#FF9A8D}
.hmb-app[data-theme="dark"] .tvNums .ok b{color:#22E07F}.hmb-app[data-theme="dark"] .tvNums .pend b{color:#FFC53D}.hmb-app[data-theme="dark"] .tvNums .over b{color:#FF5C4D}
.hmb-app .tvFeed{margin-top:18px;background:#3B1718;border-radius:16px;padding:17px 19px}
.hmb-app[data-theme="dark"] .tvFeed{background:#0A0F1A;border:1px solid #1B2438}
.hmb-app .tvFeed h2{margin:0 0 8px;color:var(--gold);font-size:clamp(16px,1.7vw,21px)}
.hmb-app[data-theme="dark"] .tvFeed h2{font-family:"JetBrains Mono",monospace;letter-spacing:1.5px;text-transform:uppercase;font-size:clamp(13px,1.3vw,16px)}
.hmb-app .tvFeed .feedItem{border-color:#5E2A2B}
.hmb-app[data-theme="dark"] .tvFeed .feedItem{border-color:#17203A}
.hmb-app .tvFeed .feedItem b{color:#FBF3E4;font-size:clamp(13px,1.3vw,16px)}
.hmb-app[data-theme="dark"] .tvFeed .feedItem b{color:#DCE4F2}
.hmb-app .tvFeed .feedItem small{color:#CBA08F}
.hmb-app[data-theme="dark"] .tvFeed .feedItem small{color:#6C7690;font-family:"JetBrains Mono",monospace}
.hmb-app .ticker{margin-top:15px;background:var(--gold);color:var(--wine-dark);border-radius:11px;overflow:hidden;white-space:nowrap;font-weight:800;font-size:clamp(12px,1.3vw,16px)}
.hmb-app[data-theme="dark"] .ticker{background:linear-gradient(90deg,#FF3D6E,#FF9046);color:#14060A;font-family:"JetBrains Mono",monospace}
.hmb-app .ticker>div{display:inline-block;padding:10px 0;animation:scroll 28s linear infinite}
@keyframes scroll{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}

/* ── Modal / toast / confetti ───────────── */
.hmb-app .modalWrap{display:none;position:fixed;inset:0;background:rgba(42,20,18,.6);z-index:70;align-items:center;justify-content:center;padding:16px}
.hmb-app[data-theme="dark"] .modalWrap{background:rgba(2,4,8,.72)}
.hmb-app .modalWrap.show{display:flex}
.hmb-app .modal{background:var(--cream);width:min(520px,100%);border-radius:18px;padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.35);border-top:5px solid var(--gold)}
.hmb-app[data-theme="dark"] .modal{border:1px solid #22304C;border-top:3px solid var(--wine);box-shadow:0 0 40px rgba(255,61,110,.15),0 30px 80px rgba(0,0,0,.6)}
.hmb-app .modal h2{margin-top:0;color:var(--wine-dark);font-size:19px}
.hmb-app[data-theme="dark"] .modal h2{color:var(--ink)}
.hmb-app .choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hmb-app .choices button{padding:13px;border:1px solid var(--line);background:var(--card);border-radius:12px;font-weight:800;cursor:pointer;color:var(--ink);font-size:13px}
.hmb-app .choices button:hover{border-color:var(--gold);background:#FFF8E6}
.hmb-app[data-theme="dark"] .choices button:hover{border-color:var(--wine);background:#171126}
.hmb-app .pin{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.hmb-app .pin button{font-size:18px;padding:13px;border:0;border-radius:11px;background:#EFE6D3;font-weight:800;cursor:pointer}
.hmb-app[data-theme="dark"] .pin button{background:#131A2A;color:var(--ink);border:1px solid #243050}
.hmb-app .pin button:hover{background:var(--gold-soft)}
.hmb-app .pinDisplay{text-align:center;font-size:25px;letter-spacing:8px;padding:12px;border:1px solid var(--line);border-radius:11px;margin-bottom:9px;background:var(--card)}
.hmb-app .bigInput{width:100%;font-size:23px;text-align:center;letter-spacing:4px;padding:14px;border:2px solid var(--gold);border-radius:13px;background:var(--input-bg);color:var(--ink);font-family:"JetBrains Mono",monospace;font-weight:800}
.hmb-app[data-theme="dark"] .bigInput{border-color:#35C7FF}
.hmb-app .toast{position:fixed;right:18px;bottom:18px;background:var(--wine-dark);color:#FBF3E4;padding:12px 17px;border-radius:12px;display:none;z-index:80;font-weight:800;border-left:5px solid var(--gold);box-shadow:0 12px 30px rgba(0,0,0,.3);font-size:13px}
.hmb-app[data-theme="dark"] .toast{background:#0E1524;color:var(--ink);border:1px solid #22304C;border-left:5px solid var(--wine)}
.hmb-app .confetti{position:fixed;width:9px;height:9px;z-index:90;pointer-events:none;border-radius:2px}


/* ── Due chip ── */
.hmb-app .dueChip{display:inline-flex;gap:6px;align-items:center;background:var(--gold-soft);color:var(--amber);border:1px solid var(--gold);border-radius:8px;padding:4px 9px;font-weight:800;font-size:12.5px;margin-top:6px;font-variant-numeric:tabular-nums}
.hmb-app .task.overdue .dueChip{background:var(--red-soft);color:var(--red);border-color:var(--red);animation:blink 1.4s infinite}
.hmb-app .tag.system{background:#EDE3FA;color:#5B21B6}
.hmb-app[data-theme="dark"] .tag.system{background:#221436;color:#C4A6FF}
.hmb-app .remItemRow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13px}
.hmb-app .remX{color:var(--red);font-weight:800;cursor:pointer;text-decoration:none;padding:0 6px}
.hmb-app .checkRow{display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:8px;background:var(--card);font-weight:700;font-size:13px}
/* ── One-page fit (desktop & iPad) ── */
@media(min-width:901px){
 .hmb-app,.hmb-app{height:100%}
 .hmb-app{display:flex;flex-direction:column;overflow:hidden}
 .hmb-app main{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;width:100%;padding:14px 20px}
 .hmb-app .view.active{flex:1;min-height:0;display:flex;flex-direction:column}
 .hmb-app .hero{margin-bottom:10px}
 .hmb-app #store .grid{flex:1;min-height:0;align-items:stretch}
 .hmb-app .colLeft{display:flex;flex-direction:column;gap:13px;min-height:0}
 .hmb-app .pn-tasks{flex:1;min-height:0;display:flex;flex-direction:column}
 .hmb-app .pn-tasks .scrolly{flex:1;max-height:none}
 .hmb-app .pn-report,.hmb-app .pn-pickup{flex:0 0 auto;margin-top:0!important}
 .hmb-app .chatPanel{position:static;top:auto;height:auto;min-height:0}
 .hmb-app #admin .stats{margin-bottom:10px}
 .hmb-app #admin,.hmb-app #timesheet{overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:thin;padding-right:2px}
 .hmb-app #timesheet.active{display:block}
 .hmb-app #admin::-webkit-scrollbar,.hmb-app #timesheet::-webkit-scrollbar{width:8px}
 .hmb-app #admin::-webkit-scrollbar-thumb,.hmb-app #timesheet::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
 .hmb-app #admin .adminGrid{align-items:start;flex:none}
 .hmb-app #admin .chatPanel{position:sticky;top:0;height:calc(100vh - 250px);min-height:440px}
 .hmb-app #tv{overflow:auto}
 .hmb-app .tv{min-height:100%}}

.hmb-app .tvAlert{margin-top:16px;background:var(--red);color:#fff;border-radius:12px;padding:13px 16px;font-weight:800;font-family:"JetBrains Mono",monospace;font-size:clamp(13px,1.4vw,17px);animation:blink 1s infinite}
.hmb-app[data-theme="dark"] .tvAlert{background:#3A0F14;color:#FF5C4D;border:1px solid #FF5C4D;box-shadow:0 0 24px rgba(255,92,77,.4)}
.hmb-app .tvCard.escRed{border-color:var(--red)!important;border-top-color:var(--red)!important}
.hmb-app[data-theme="dark"] .tvCard.escRed{box-shadow:0 0 20px rgba(255,92,77,.35)!important}
.hmb-app .notifItem.escd b{color:var(--red)}

/* ── Slide grids: 2 rows, 4 per view, slide left/right ── */
.hmb-app .slideGrid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);grid-auto-columns:calc(25% - 6px);gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:5px;scrollbar-width:thin}
.hmb-app .slideGrid>*{scroll-snap-align:start}
.hmb-app .slideGrid::-webkit-scrollbar{height:7px}
.hmb-app .slideGrid::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.hmb-app[data-theme="dark"] .slideGrid::-webkit-scrollbar-thumb{background:#243050}
.hmb-app .pkCard{border:1px solid var(--line);border-left:4px solid #35A0FF;border-radius:10px;background:var(--card);padding:7px 9px;cursor:pointer;text-align:left;font-size:12px;min-height:50px;color:var(--ink);transition:transform .1s,border-color .12s}
.hmb-app .pkCard:hover{transform:translateY(-1px);border-color:#35A0FF}
.hmb-app[data-theme="dark"] .pkCard{border-left-color:#35C7FF}
.hmb-app .pkCard b{display:block;font-size:13.5px;line-height:1.2}
.hmb-app .pkCard small{color:var(--muted);font-size:10.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmb-app .pkCard .pkBy{font-size:9.5px;color:var(--muted)}
@media(max-width:900px){.hmb-app .slideGrid{grid-auto-columns:calc(33.4% - 6px)}}
@media(max-width:520px){.hmb-app .slideGrid{grid-auto-columns:calc(50% - 4px)}}

.hmb-app .locChip{display:inline-flex;align-items:center;gap:4px;background:var(--gold-soft);color:var(--amber);border:1px solid var(--gold);border-radius:9px;padding:6px 11px;font-weight:800;font-size:13px}
.hmb-app[data-theme="dark"] .locChip{background:transparent;color:var(--gold);font-family:"JetBrains Mono",monospace}
.hmb-app[data-theme="midnight"] .locChip{background:transparent;color:#4FD8E0;border-color:#4FD8E0;font-family:"JetBrains Mono",monospace}
.hmb-app .tag.loc{background:#E2E9F7;color:#2C4A8A}
.hmb-app[data-theme="dark"] .tag.loc{background:#141E33;color:#8FB0F0}
.hmb-app[data-theme="midnight"] .tag.loc{background:#0A2630;color:#4FD8E0}
.hmb-app[data-theme="royal"] .tag.loc{background:#E4EDE6;color:#1E4D33}
.hmb-app[data-theme="pearl"] .tag.loc{background:#EEE8DA;color:#6E5624}

.hmb-app .lockWrap{position:fixed;inset:0;z-index:200;background:var(--parchment);display:flex;align-items:center;justify-content:center;padding:18px}
.hmb-app[data-theme="dark"] .lockWrap{background:radial-gradient(1200px 500px at 50% -10%,#0B1120 0%,#04060B 60%)}
.hmb-app[data-theme="midnight"] .lockWrap{background-color:#070C10;background-image:linear-gradient(rgba(79,216,224,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(79,216,224,.04) 1px,transparent 1px);background-size:44px 44px}
.hmb-app .lockBox{background:var(--cream);border:1px solid var(--line);border-top:5px solid var(--gold);border-radius:20px;box-shadow:var(--shadow);padding:26px;width:min(360px,100%);text-align:center}
.hmb-app .lockBox h1{font-family:var(--font-display);color:var(--wine-dark);font-size:22px;margin:0 0 2px}
.hmb-app[data-theme="dark"] .lockBox h1,.hmb-app[data-theme="midnight"] .lockBox h1{color:var(--ink)}
.hmb-app .lockBox h1 em{font-style:normal;color:var(--gold)}
.hmb-app .lockBox .sub{margin-bottom:14px}
.hmb-app .lockBox .pinDisplay{margin-top:6px}
.hmb-app .lockHint{color:var(--muted);font-size:11.5px;margin-top:12px}
.hmb-app .sessionName{font-weight:800;font-size:12px;color:var(--head-sub)}

.hmb-app .schedBar{display:inline-flex;align-items:center;gap:7px;margin-top:8px;border:1px solid var(--gold);background:var(--gold-soft);color:var(--amber);border-radius:11px;padding:8px 13px;font-weight:800;font-size:13px;cursor:pointer;transition:transform .1s}
.hmb-app .schedBar:hover{transform:translateY(-1px)}
.hmb-app .schedBar b{color:inherit}
.hmb-app[data-theme="dark"] .schedBar{background:transparent;color:var(--gold);font-family:"JetBrains Mono",monospace}
.hmb-app[data-theme="midnight"] .schedBar{background:transparent;color:#4FD8E0;border-color:#4FD8E0;font-family:"JetBrains Mono",monospace}
.hmb-app .modalWide{width:min(760px,100%)!important;max-height:88vh;overflow-y:auto}
.hmb-app .otsPickupDetails{margin:12px 0;font-size:13px;overflow-wrap:anywhere}
.hmb-app .otsPickupDetails dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:5px 12px}
.hmb-app .otsPickupDetails dt{color:var(--muted)}
.hmb-app .otsPickupDetails dd{margin:0}
.hmb-app .otsPickupDetails table{width:100%;table-layout:fixed;border-collapse:collapse;margin:12px 0}
.hmb-app .otsPickupDetails th,.hmb-app .otsPickupDetails td{text-align:left;padding:7px 5px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.hmb-app .otsPickupDetails th{font-size:11px;white-space:nowrap}
.hmb-app .otsPickupDetails td{font-size:12px}
.hmb-app .otsPickupChat{max-height:42vh;overflow-y:auto;margin:12px 0;overscroll-behavior:contain}
.hmb-app .otsPickupChat article{padding:10px;border-bottom:1px solid var(--line);font-size:13px}
.hmb-app .otsPickupChat article.customer{border-left:3px solid var(--gold)}
.hmb-app .otsPickupChat article.staff{border-left:3px solid #35A0FF}
.hmb-app .otsPickupChat p{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0}
.hmb-app .otsPickupChat small{color:var(--muted)}
.hmb-app #otsReply{width:100%;min-height:84px;resize:vertical;background:var(--input-bg);color:var(--ink);border:1px solid var(--input-line);border-radius:6px;padding:9px}
.hmb-app .dayRow{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:9px;background:var(--card)}
.hmb-app .dayRow.today{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
.hmb-app .dayHead{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:13px;margin-bottom:7px}
.hmb-app .dayHead small{color:var(--muted);font-weight:700}
.hmb-app .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.hmb-app .chipName{display:inline-flex;align-items:center;gap:5px;background:var(--green-soft);color:var(--green);border:1px solid currentColor;border-radius:99px;padding:4px 10px;font-weight:800;font-size:12px}
.hmb-app .chipName a{color:var(--red);text-decoration:none;font-weight:900;padding:0 2px}
.hmb-app .chipName.offday{background:var(--red-soft);color:var(--red);text-decoration:line-through}
.hmb-app .wdays{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}
.hmb-app .wday{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:9px;padding:8px 0;font-weight:800;font-size:12px;cursor:pointer;flex:1;min-width:38px;text-align:center}
.hmb-app .wday.on{background:var(--green-soft);color:var(--green);border-color:currentColor}
.hmb-app .repRow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line);font-size:12.5px}

.hmb-app .calFull{position:fixed;inset:0;z-index:60;background:var(--parchment);overflow-y:auto;padding:16px 18px;display:none}
.hmb-app .calFull.show{display:block;animation:fadeIn .25s ease}
.hmb-app[data-theme="dark"] .calFull{background:radial-gradient(1200px 500px at 50% -10%,#0B1120 0%,#04060B 60%)}
.hmb-app[data-theme="midnight"] .calFull{background-color:#070C10;background-image:linear-gradient(rgba(79,216,224,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(79,216,224,.04) 1px,transparent 1px);background-size:44px 44px}
.hmb-app .calHead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;max-width:1200px;margin-left:auto;margin-right:auto}
.hmb-app .calHead h2{margin:0;font-family:var(--font-display);color:var(--wine-dark);font-size:22px}
.hmb-app[data-theme="dark"] .calHead h2,.hmb-app[data-theme="midnight"] .calHead h2{color:var(--ink)}
.hmb-app .calTabs{display:flex;gap:6px}
.hmb-app .calTabs button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:8px 16px;font-weight:800;cursor:pointer;font-size:13px}
.hmb-app .calTabs button.on{background:var(--gold);color:#2A1E1C;border-color:var(--gold)}
.hmb-app .calBodyWrap{max-width:1200px;margin:auto}
.hmb-app .mGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.hmb-app .mWd{font-weight:800;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;text-align:center;padding:4px 0}
.hmb-app .mCell{border:1px solid var(--line);border-radius:10px;background:var(--card);min-height:88px;padding:6px 7px;font-size:11px;cursor:pointer;overflow:hidden}
.hmb-app .mCell:hover{border-color:var(--gold)}
.hmb-app .mCell.today{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
.hmb-app .mCell.dim{opacity:.35}
.hmb-app .mNum{font-weight:800;font-size:12.5px;margin-bottom:3px}
.hmb-app .mLine{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.hmb-app .mLine.ooo{color:var(--red);font-weight:700}
.hmb-app .mLine.evt{color:var(--wine);font-weight:700}
.hmb-app[data-theme="dark"] .mLine.evt{color:var(--wine-deep)}
.hmb-app .mLine.work{color:var(--green);font-weight:700}
.hmb-app .xClose{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:7px 12px;font-weight:900;cursor:pointer;font-size:15px}
.hmb-app .xClose:hover{border-color:var(--red);color:var(--red)}
.hmb-app .chipName.onClock{background:var(--green);color:#fff;animation:blink 1.8s infinite}
.hmb-app[data-theme="dark"] .chipName.onClock{background:#103A25;color:#22E07F}
.hmb-app .evtRow{display:flex;justify-content:space-between;align-items:center;background:var(--gold-soft);color:var(--amber);border:1px dashed var(--gold);border-radius:9px;padding:5px 9px;font-weight:800;font-size:12px;margin-bottom:5px}
.hmb-app .evtRow a{color:var(--red);text-decoration:none;font-weight:900}

/* Expandable panels (auto-collapse after 1h) */
.hmb-app .panel.expandedP{position:fixed;inset:64px 10px 10px;z-index:55;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.hmb-app .panel.expandedP .body.scrolly{flex:1;max-height:none}
.hmb-app .panel.expandedP .chatBody{flex:1}
.hmb-app #store .chatPanel.expandedP{height:auto}
.hmb-app .expBtn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:9px;padding:5px 9px;font-weight:900;cursor:pointer;font-size:13px}
.hmb-app .expBtn:hover{border-color:var(--gold)}
/* Smaller pickup cards */
.hmb-app .pkCard{padding:5px 8px;min-height:38px;font-size:11px;border-radius:8px}
.hmb-app .pkCard b{font-size:12px}
.hmb-app .pkCard small{font-size:9.5px}
.hmb-app .pkCard .pkBy{display:none}
.hmb-app #boardList.slideGrid{grid-auto-columns:calc(20% - 7px)}
@media(max-width:900px){.hmb-app #boardList.slideGrid{grid-auto-columns:calc(25% - 6px)}}
@media(max-width:520px){.hmb-app #boardList.slideGrid{grid-auto-columns:calc(33.4% - 6px)}}
/* Chat search + type chips */
.hmb-app .chatTools{margin-top:8px}
.hmb-app .chatSearch{width:100%;border:1px solid var(--input-line);border-radius:9px;padding:7px 10px;background:var(--input-bg);color:var(--ink);font-size:12.5px}
.hmb-app .typeChips{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.hmb-app .tChip{border:1px solid currentColor;background:transparent;border-radius:99px;padding:4px 9px;font-weight:800;font-size:10.5px;cursor:pointer;letter-spacing:.3px}
.hmb-app .tChip b{font-size:11px}
.hmb-app .tChip.c-order{color:var(--red)}
.hmb-app .tChip.c-pickup{color:#2C7DB8}
.hmb-app[data-theme="dark"] .tChip.c-pickup,.hmb-app[data-theme="midnight"] .tChip.c-pickup{color:#4FD8E0}
.hmb-app .tChip.c-imp{color:var(--amber)}
.hmb-app .tChip.c-other{color:var(--wine)}
.hmb-app .tChip.on{background:currentColor}
.hmb-app .tChip.on b,.hmb-app .tChip.on span{color:var(--cream)}

/* Centered expand card + backdrop */
.hmb-app #panelBackdrop{display:none;position:fixed;inset:0;background:rgba(20,10,8,.5);z-index:54}
.hmb-app #panelBackdrop.show{display:block}
.hmb-app[data-theme="dark"] #panelBackdrop,.hmb-app[data-theme="midnight"] #panelBackdrop{background:rgba(0,0,0,.65)}
.hmb-app .panel.expandedP{position:fixed;left:50%;top:70px;transform:translateX(-50%);width:min(900px,94vw);height:calc(100vh - 86px);z-index:56;display:flex;flex-direction:column;box-shadow:0 30px 90px rgba(0,0,0,.5);border-radius:18px}
.hmb-app .expTools{display:none;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center;font-size:12px;font-weight:800;color:var(--muted)}
.hmb-app .expandedP .expTools{display:flex}
.hmb-app .expTools input,.hmb-app .expTools select{border:1px solid var(--input-line);border-radius:8px;padding:6px 8px;background:var(--input-bg);color:var(--ink);font-size:12px}
.hmb-app .expTools .zBtn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:5px 10px;font-weight:900;cursor:pointer}
/* Green schedule bar + tomorrow line */
.hmb-app .schedBar{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.hmb-app[data-theme="dark"] .schedBar{background:transparent;color:#22E07F;border-color:#22E07F}
.hmb-app[data-theme="midnight"] .schedBar{background:transparent;color:#3FD68C;border-color:#3FD68C}
.hmb-app .schedTomorrow{display:block;color:var(--muted);font-size:11.5px;margin-top:4px;cursor:pointer;font-weight:700}
/* TV day-off requests */
.hmb-app .tvReq{margin-top:14px;background:rgba(255,255,255,.06);border:1px dashed var(--gold);color:var(--gold);border-radius:11px;padding:10px 14px;font-weight:800;font-size:clamp(12px,1.2vw,15px)}
.hmb-app[data-theme="midnight"] .tvReq{border-color:#E8C547;color:#E8C547;font-family:"JetBrains Mono",monospace}

/* Full timesheet view */
.hmb-app .tsTable{width:100%;border-collapse:collapse;font-size:12.5px}
.hmb-app .tsTable th{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;text-align:left;padding:9px 8px;border-bottom:2px solid var(--line);white-space:nowrap}
.hmb-app .tsTable td{padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.hmb-app .tsTable tr:hover td{background:var(--gold-soft)}
.hmb-app[data-theme="dark"] .tsTable tr:hover td,.hmb-app[data-theme="midnight"] .tsTable tr:hover td{background:rgba(255,255,255,.04)}
.hmb-app .badge.ot{background:var(--amber-soft);color:var(--amber)}
.hmb-app .badge.man{background:#E8E4EF;color:#5B21B6}
.hmb-app[data-theme="dark"] .badge.man,.hmb-app[data-theme="midnight"] .badge.man{background:transparent;color:#C4A6FF;border:1px solid currentColor}
.hmb-app #timesheet .stats{grid-template-columns:repeat(4,1fr)}
.hmb-app .tsFilters{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.hmb-app .tsFilters .field{min-width:130px;flex:1}
.hmb-app .tablewrap{overflow-x:auto}

.hmb-app .payBanner{background:#B3512F;color:#FCEFE4;border-radius:14px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:15px}
.hmb-app .payBanner .k{font-size:10.5px;letter-spacing:1.5px;font-weight:800;opacity:.85;text-transform:uppercase;display:block}
.hmb-app .payBanner b{font-family:var(--font-display);font-size:17px;font-weight:700}
.hmb-app .payBanner .chip{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:8px;padding:7px 12px;font-weight:800;font-size:11.5px;letter-spacing:.8px}
.hmb-app[data-theme="dark"] .payBanner,.hmb-app[data-theme="midnight"] .payBanner{background:#3A1710;border:1px solid #7E3B2C}
.hmb-app .badge.dept{background:#EFEAF7;color:#4C3B8F;border:1px solid #D8CFF0;font-size:10px;letter-spacing:.5px}
.hmb-app[data-theme="dark"] .badge.dept,.hmb-app[data-theme="midnight"] .badge.dept{background:transparent;color:#B9A8F5;border-color:currentColor}

/* ── TV Board: fixed Ops-Board style, ignores themes ── */
.hmb-app .opsTV{background:#05070D;color:#DCE6F5;min-height:calc(100vh - 120px);border-radius:20px;padding:20px 22px;font-family:"JetBrains Mono",ui-monospace,monospace;border:1px solid #141B2B}
.hmb-app .tvxBanner{background:linear-gradient(90deg,#FF3D6E,#FF9046);color:#1A0A10;border-radius:14px;padding:13px 17px;font-weight:800;font-size:clamp(13px,1.4vw,17px);display:flex;gap:12px;align-items:center;line-height:1.45}
.hmb-app .tvxBanner i{width:11px;height:11px;border-radius:50%;background:#7E1626;flex:0 0 auto}
.hmb-app .tvxHead{display:flex;align-items:center;gap:14px;margin:18px 0 14px;flex-wrap:wrap}
.hmb-app .tvxLogo{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#FF3D6E,#B32355);display:flex;align-items:center;justify-content:center;font-family:Fraunces,Georgia,serif;font-weight:900;font-size:26px;color:#fff;flex:0 0 auto}
.hmb-app .tvxTitle{font-family:Fraunces,Georgia,serif;font-size:clamp(20px,2.4vw,30px);color:#F2F6FF;font-weight:900;line-height:1.05}
.hmb-app .tvxSub{color:#35C7FF;letter-spacing:2.5px;font-size:clamp(10px,1vw,13px);font-weight:800;margin-top:3px}
.hmb-app .tvxLive{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid #1E4536;background:#0A1A14;color:#2BE080;border-radius:999px;padding:8px 16px;font-weight:800;letter-spacing:1px;font-size:clamp(12px,1.2vw,15px)}
.hmb-app .tvxLive i{width:10px;height:10px;border-radius:50%;background:#2BE080;box-shadow:0 0 10px #2BE080;animation:blink 1.6s infinite}
.hmb-app .tvxClock{color:#8FA2C0;font-weight:800;font-size:clamp(12px,1.3vw,16px);text-align:right}
.hmb-app .tvxClock .secs{color:#5B6C8C;display:block;font-size:.85em}
.hmb-app .tvxStats{display:flex;gap:clamp(16px,2.5vw,34px);flex-wrap:wrap;border-bottom:1px solid #16203A;padding-bottom:14px;margin-bottom:16px}
.hmb-app .tvxStat b{display:block;font-size:clamp(24px,2.6vw,38px);color:#EAF0FB;font-variant-numeric:tabular-nums;line-height:1.1}
.hmb-app .tvxStat span{color:#8FA2C0;font-size:clamp(9px,.9vw,12px);letter-spacing:1.5px;font-weight:800}
.hmb-app .tvxStat.g b{color:#2BE080}.hmb-app .tvxStat.r b{color:#FF5C6E}.hmb-app .tvxStat.y b{color:#FFC53D}.hmb-app .tvxStat.c b{color:#35C7FF}
.hmb-app .tvxPanel{background:#0A1020;border:1px solid #1A2440;border-radius:16px;padding:15px 17px;margin-bottom:15px}
.hmb-app .tvxPanel h2{margin:0 0 11px;color:#35C7FF;font-size:clamp(13px,1.35vw,17px);letter-spacing:2px;font-weight:800;display:flex;justify-content:space-between;align-items:center;font-family:"JetBrains Mono",monospace}
.hmb-app .tvxPanel h2 .cnt{color:#8FA2C0;font-size:.85em;letter-spacing:.5px}
.hmb-app .tvxAlert{background:#160A10;border:1.5px solid #FF4D6E;animation:pulseMidTv 2.6s infinite}
@keyframes pulseMidTv{50%{box-shadow:0 0 22px rgba(255,77,110,.28)}}
.hmb-app .tvxAlert h2{color:#FF5C7E}
.hmb-app .tvxChips{display:flex;flex-wrap:wrap;gap:9px}
.hmb-app .tvxChip{border:1px solid #FF5C7E;color:#FF8CA3;border-radius:10px;padding:8px 13px;font-weight:800;font-size:clamp(12px,1.2vw,15px);background:rgba(255,77,110,.06)}
.hmb-app .tvxChip.warn{border-color:#FFC53D;color:#FFC53D;background:rgba(255,197,61,.06)}
.hmb-app .tvxOk{color:#2BE080;font-weight:800;font-size:clamp(13px,1.4vw,17px)}
.hmb-app .tvxGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:15px}
.hmb-app .tvxDay{background:#0B1322;border:1.5px solid var(--c);border-radius:14px;overflow:hidden}
.hmb-app .tvxDay .dh{display:flex;justify-content:space-between;align-items:center;padding:10px 13px}
.hmb-app .tvxDay .dh b{color:var(--c);letter-spacing:1.5px;font-size:clamp(12px,1.3vw,16px)}
.hmb-app .tvxDay .pill{border:1.5px solid var(--c);color:var(--c);border-radius:99px;min-width:34px;text-align:center;padding:3px 9px;font-weight:800;font-size:clamp(11px,1.1vw,14px)}
.hmb-app .tvxCols{display:flex;justify-content:space-between;color:#5B6C8C;font-size:clamp(9px,.9vw,11px);letter-spacing:1.5px;padding:2px 13px 4px;border-bottom:1px solid #131C31}
.hmb-app .tvxRows{padding:2px 13px 11px;max-height:236px;overflow:hidden}
.hmb-app .tvxRow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #101a2e;font-size:clamp(12px,1.25vw,15px)}
.hmb-app .tvxRow:last-child{border-bottom:0}
.hmb-app .tvxRow .no{color:var(--c);font-weight:800;min-width:40px}
.hmb-app .tvxRow .nm{flex:1;color:#D7E1F2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.hmb-app .tvxRow .tm{color:#7C8FAE;white-space:nowrap}
.hmb-app .tvxRow.bad .nm,.hmb-app .tvxRow.bad .tm,.hmb-app .tvxRow.bad .no{color:#FF8CA3}
.hmb-app .tvxEmpty{color:#5B6C8C;text-align:center;padding:22px 0;font-size:clamp(12px,1.2vw,14px)}
.hmb-app .tvxSched{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:clamp(12px,1.3vw,16px)}
.hmb-app .tvxName{border:1px solid #26364F;background:#0C1526;color:#AFC2DE;border-radius:99px;padding:6px 13px;font-weight:800}
.hmb-app .tvxName.on{border-color:#1E4536;background:#0A1A14;color:#2BE080;box-shadow:0 0 10px rgba(43,224,128,.25)}
.hmb-app .tvxName.ooo{border-color:#5A2430;background:#170C12;color:#FF8CA3;text-decoration:line-through}
.hmb-app .tvxEvt{border:1px dashed #FFC53D;color:#FFC53D;border-radius:99px;padding:6px 13px;font-weight:800}
.hmb-app .tvxTicker{margin-top:4px;background:linear-gradient(90deg,#FF3D6E,#FF9046);color:#14060A;border-radius:12px;overflow:hidden;white-space:nowrap;font-weight:800;font-size:clamp(12px,1.3vw,16px)}
.hmb-app .tvxTicker>div{display:inline-block;padding:11px 0;animation:scroll 30s linear infinite}
@media(max-width:900px){.hmb-app .tvxGrid{grid-template-columns:1fr}.hmb-app .opsTV{padding:14px}.hmb-app .tvxRows{max-height:none}}

.hmb-app .tvxPanel,.hmb-app .tvxDay{cursor:pointer;transition:box-shadow .15s}
.hmb-app .tvxPanel:hover,.hmb-app .tvxDay:hover{box-shadow:0 0 18px rgba(53,199,255,.18)}
.hmb-app .tvxAppId{border:1px solid #26364F;color:#8FA2C0;border-radius:8px;padding:4px 10px;font-size:clamp(10px,1vw,12px);letter-spacing:1.2px;font-weight:800}
.hmb-app .tvxOverlay{display:none;position:fixed;inset:0;background:rgba(2,4,9,.85);z-index:65;padding:22px;overflow-y:auto}
.hmb-app .tvxOverlay.show{display:flex;align-items:flex-start;justify-content:center}
.hmb-app .tvxDetail{background:#0A1020;border:1.5px solid var(--c,#35C7FF);border-radius:18px;max-width:1020px;width:100%;padding:18px 20px;font-family:"JetBrains Mono",ui-monospace,monospace;color:#DCE6F5;box-shadow:0 0 44px rgba(0,0,0,.65);margin:auto 0}
.hmb-app .tvxDetail h2{color:var(--c,#35C7FF);letter-spacing:2px;display:flex;justify-content:space-between;align-items:center;margin:0 0 4px;font-size:clamp(15px,1.7vw,20px)}
.hmb-app .tvxDetail .sub2{color:#7C8FAE;font-size:clamp(11px,1.1vw,13px);margin-bottom:12px}
.hmb-app .tvxDRow{display:grid;grid-template-columns:minmax(60px,auto) 1fr auto;gap:14px;padding:11px 4px;border-bottom:1px solid #131C31;font-size:clamp(12px,1.3vw,15px);align-items:start}
.hmb-app .tvxDRow:last-child{border-bottom:0}
.hmb-app .tvxDRow .k{color:var(--c,#35C7FF);font-weight:800;white-space:nowrap}
.hmb-app .tvxDRow .v{color:#D7E1F2;font-weight:700}
.hmb-app .tvxDRow .v small{display:block;color:#7C8FAE;font-weight:400;margin-top:3px;font-size:.85em}
.hmb-app .tvxDRow .t{color:#7C8FAE;text-align:right;white-space:nowrap}
.hmb-app .tvxDRow.bad .k,.hmb-app .tvxDRow.bad .v{color:#FF8CA3}
.hmb-app .tvxSec{color:var(--c,#35C7FF);letter-spacing:2px;font-weight:800;margin:14px 0 4px;font-size:clamp(12px,1.2vw,14px)}
.hmb-app .tvxX{border:1px solid #FF5C7E;background:#170C12;color:#FF8CA3;border-radius:10px;padding:7px 14px;font-weight:900;cursor:pointer;font-size:14px;font-family:inherit}

.hmb-app.kiosk .tabs button[data-view]{display:none!important}
.hmb-app.kiosk #bellBtn,.hmb-app.kiosk #installBtn,.hmb-app.kiosk #muteTop,.hmb-app.kiosk #themeSel{display:none!important}

/* TV detail overlays — clean card layout */
.hmb-app .tvxDetail{max-height:92vh;overflow-y:auto;max-width:1080px;padding:22px 24px}
.hmb-app .tvxDetail h2{margin-bottom:10px}
.hmb-app .tvxSum{display:flex;gap:9px;flex-wrap:wrap;margin:2px 0 16px}
.hmb-app .tvxSumChip{border:1px solid #26364F;color:#AFC2DE;border-radius:99px;padding:6px 14px;font-weight:800;font-size:clamp(11px,1.1vw,13px)}
.hmb-app .tvxSumChip.r{border-color:#FF5C7E;color:#FF8CA3}.hmb-app .tvxSumChip.g{border-color:#1E4536;color:#2BE080}.hmb-app .tvxSumChip.y{border-color:#8A6A1F;color:#FFC53D}.hmb-app .tvxSumChip.c{border-color:#1E4A5E;color:#35C7FF}
.hmb-app .tvxSec{font-size:clamp(12px,1.25vw,15px);margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid #16203A;display:flex;justify-content:space-between;align-items:center}
.hmb-app .tvxSec:first-of-type{margin-top:4px}
.hmb-app .tvxCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:10px}
.hmb-app .tvxCards.one{grid-template-columns:1fr}
.hmb-app .tvxCard2{background:#0C1526;border:1px solid #1A2440;border-left:4px solid var(--c,#35C7FF);border-radius:12px;padding:12px 15px}
.hmb-app .tvxCard2 .c2top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.hmb-app .tvxCard2 .c2t{font-weight:800;color:#EAF0FB;font-size:clamp(13px,1.35vw,16px);line-height:1.35}
.hmb-app .tvxCard2 .c2r{color:#7C8FAE;font-weight:800;white-space:nowrap;font-size:clamp(11px,1.1vw,13px)}
.hmb-app .tvxCard2 .c2m{color:#8FA2C0;font-size:clamp(11px,1.1vw,13px);margin-top:6px;line-height:1.55}
.hmb-app .tvxCard2.red{border-left-color:#FF5C7E;background:#130D18}
.hmb-app .tvxCard2.red .c2t,.hmb-app .tvxCard2.red .c2r{color:#FF9EB2}
.hmb-app .tvxCard2.gold{border-left-color:#FFC53D}.hmb-app .tvxCard2.gold .c2t{color:#FFD97A}
.hmb-app .tvxCard2.green{border-left-color:#2BE080}
.hmb-app .tvxCard2.dim{opacity:.62}
/* TV chat — store-board style bubbles, cyber skin */
.hmb-app .tvxChat{display:flex;flex-direction:column;gap:11px;padding:4px 2px}
.hmb-app .tvxBub{max-width:80%;align-self:flex-start;background:#0E1830;border:1px solid #1C2A4A;border-radius:4px 16px 16px 16px;padding:10px 14px}
.hmb-app .tvxBub.admin{align-self:flex-end;border-radius:16px 4px 16px 16px;background:#160E1C;border-color:#4A1C33}
.hmb-app .tvxBub.alert{border-color:#FF5C7E;background:#150C13}
.hmb-app .tvxBub .bh{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:5px}
.hmb-app .tvxBub .bh b{color:#EAF0FB;font-size:clamp(12px,1.25vw,15px)}
.hmb-app .tvxTag{font-size:clamp(9px,.9vw,11px);letter-spacing:1px;border:1px solid;border-radius:6px;padding:2px 8px;font-weight:800}
.hmb-app .tvxTag.admin{color:#FF7EA5;border-color:#FF4D7E}.hmb-app .tvxTag.staff{color:#2BE080;border-color:#1E4536}.hmb-app .tvxTag.store{color:#35C7FF;border-color:#1E4A5E}.hmb-app .tvxTag.system{color:#FFC53D;border-color:#8A6A1F}.hmb-app .tvxTag.type{color:#FF8CA3;border-color:#FF5C7E}
.hmb-app .tvxBub .bt{color:#D7E1F2;font-size:clamp(13px,1.35vw,16px);line-height:1.55;font-weight:600}
.hmb-app .tvxBub img{max-width:100%;border-radius:10px;margin-top:8px}
.hmb-app .tvxBub .bf{display:flex;justify-content:space-between;gap:12px;margin-top:7px;color:#5B6C8C;font-size:clamp(10px,1vw,12px);font-weight:700}
.hmb-app .tvxBub .bf .ok2{color:#2BE080}.hmb-app .tvxBub .bf .wait{color:#FF8CA3;animation:blink 1.6s infinite}

.hmb-app .tvxLocLine{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid #101a2e}
.hmb-app .tvxLocLine:last-child{border-bottom:0}
.hmb-app .tvxLocTag{min-width:120px;color:var(--lc);border:1.5px solid var(--lc);border-radius:8px;padding:4px 10px;font-weight:800;letter-spacing:1.5px;font-size:clamp(10px,1vw,13px);text-align:center}
.hmb-app .tvxName{cursor:pointer}

.hmb-app .tvxStaffRow{display:flex;flex-wrap:wrap;gap:6px;padding:8px 13px;border-bottom:1px solid #131C31;align-items:center}
.hmb-app .tvxStaffRow .lbl{color:#5B6C8C;font-size:clamp(9px,.85vw,11px);letter-spacing:1.5px;font-weight:800;margin-right:2px}
.hmb-app .tvxName.sm{padding:4px 10px;font-size:clamp(10px,1vw,13px)}

/* ── Responsive top ribbon: fits one screen on phone/tablet ── */
.hmb-app .navTabs{display:flex;gap:6px;align-items:center}
@media(max-width:1180px){
 .hmb-app .top{flex-wrap:wrap;row-gap:7px;padding:9px 12px;height:auto}
 .hmb-app .brandSub{display:none}
 .hmb-app .brandName{font-size:19px}
 .hmb-app .brandName .appId{font-size:9px;padding:2px 7px}
 .hmb-app .liveChip{padding:5px 10px;font-size:10px}
 .hmb-app .tabs{order:10;width:100%;display:flex;gap:6px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:1px}
 .hmb-app .tabs::-webkit-scrollbar{display:none}
 .hmb-app .navTabs{flex:0 0 auto}
 .hmb-app .tabs button{flex:0 0 auto;white-space:nowrap}
 .hmb-app .tabs>button,.hmb-app .navTabs button{padding:8px 12px;font-size:12px}
 .hmb-app .iconBtn{padding:8px 10px}
 .hmb-app .sessionName{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
 .hmb-app #themeSel{max-width:104px;font-size:11px;padding:7px 8px}}
@media(max-width:620px){
 .hmb-app .brandName{font-size:16.5px}
 .hmb-app .liveChip{display:none}
 .hmb-app .tabs>button,.hmb-app .navTabs button{padding:7px 10px;font-size:11.5px}
 .hmb-app .sessionName{max-width:70px}}
/* never allow sideways page scroll — wide content scrolls inside its own container */
.hmb-app,.hmb-app{max-width:100vw;overflow-x:hidden}
/* TV board scales on small screens */
@media(max-width:900px){
 .hmb-app .tvxGrid{grid-template-columns:1fr!important}
 .hmb-app .opsTV{padding:12px;border-radius:14px}
 .hmb-app .tvxHead{gap:10px}
 .hmb-app .tvxClock{display:none}
 .hmb-app .tvxAppId{margin-left:auto}
 .hmb-app .tvxStats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px}
 .hmb-app .tvxLocLine .tvxLocTag{min-width:0;flex:0 0 auto;padding:4px 8px}
 .hmb-app .tvxDetail{padding:14px;border-radius:14px}
 .hmb-app .tvxCards{grid-template-columns:1fr}
 .hmb-app .tvxBub{max-width:94%}
 .hmb-app .tvxSum{gap:6px}
 .hmb-app .tvxSumChip{padding:5px 10px}
 .hmb-app .tvxX{padding:6px 10px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.hmb-app *{animation:none!important;transition:none!important}}
/* iPad / tablet */
@media(max-width:1180px){
 .hmb-app .adminGrid{grid-template-columns:1fr 1fr 320px}
 .hmb-app .stats{grid-template-columns:repeat(3,1fr)}}
/* Phone */
@media(max-width:900px){
 .hmb-app .grid,.hmb-app .adminGrid{grid-template-columns:1fr}
 .hmb-app #store .chatPanel{order:-1;height:74vh;min-height:420px}
 .hmb-app #store .colLeft{order:1}
 .hmb-app .panel.expandedP{left:0;top:0;transform:none;width:100vw;height:100vh;border-radius:0;inset:0}
 .hmb-app .panel.expandedP .expBtn{font-size:16px;padding:8px 13px;background:var(--red-soft);color:var(--red);border-color:var(--red)}
 .hmb-app .chatPanel{position:static;height:65vh;min-height:380px}
 .hmb-app .stats{grid-template-columns:repeat(2,1fr)}
 .hmb-app .tvGrid{grid-template-columns:1fr}
 .hmb-app .tabs button{padding:8px 10px;font-size:12px}
 .hmb-app .top{padding:9px 10px;flex-wrap:wrap;gap:8px}
 .hmb-app .brandSub,.hmb-app .liveChip{display:none}
 .hmb-app .hero h1{font-size:21px}
 .hmb-app main{padding:12px}
 .hmb-app .scrolly{max-height:360px}
 .hmb-app .notifDrop{top:56px;right:8px}}

/* ── Timecard (scoped) ── */
.hmb-app .tcx{--bg: #f4f1ea;--bg-card: #fffdf8;--ink: #1a1a1a;--ink-soft: #5a5852;--ink-faint: #908d85;--line: #e0dcd2;--line-strong: #2a2a2a;--accent: #8b1e1e;--accent-soft: #f4dcdc;--good: #4a6b3a;--good-soft: #e1ebd9;--warn: #b8860b;--warn-soft: #f5ead0;--danger: #c8553d;--shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.12)}.hmb-app .tcx *{box-sizing:border-box;margin:0;padding:0}.hmb-app .tcx{font-family:"Inter Tight",-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;min-height:100vh;padding:32px 24px 80px}.hmb-app .tcx .container{max-width:1280px;margin:0 auto}.hmb-app .tcx header{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--line-strong);padding-bottom:24px;margin-bottom:32px;gap:20px;flex-wrap:wrap}.hmb-app .tcx .brand h1{font-family:"Fraunces",serif;font-weight:600;font-size:clamp(30px,4.2vw,48px);letter-spacing:-0.03em;line-height:0.95}.hmb-app .tcx .brand .sub{font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.18em;color:var(--ink-soft);margin-top:6px}.hmb-app .tcx .header-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.hmb-app .tcx .user-pill{display:flex;flex-direction:column;align-items:flex-end;font-size:13px}.hmb-app .tcx .user-pill .role-tag{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint)}.hmb-app .tcx .user-pill .uname{font-weight:600}.hmb-app .tcx .card{background:var(--bg-card);border:1px solid var(--line);padding:28px;box-shadow:var(--shadow)}.hmb-app .tcx .card-label{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px}.hmb-app .tcx .btn{font-family:"Inter Tight",sans-serif;font-size:13px;font-weight:600;padding:12px 16px;border:1px solid var(--ink);background:var(--bg-card);color:var(--ink);cursor:pointer;transition:all 0.15s ease;letter-spacing:0.04em;text-transform:uppercase}.hmb-app .tcx .btn:hover{background:var(--ink);color:var(--bg)}.hmb-app .tcx .btn.primary{background:var(--ink);color:var(--bg)}.hmb-app .tcx .btn.primary:hover{background:var(--accent);border-color:var(--accent)}.hmb-app .tcx .btn:disabled{opacity:0.4;cursor:not-allowed;background:var(--bg-card);color:var(--ink)}.hmb-app .tcx .btn.small{padding:6px 10px;font-size:11px}.hmb-app .tcx .btn.danger{border-color:var(--danger);color:var(--danger)}.hmb-app .tcx .btn.danger:hover{background:var(--danger);color:var(--bg)}.hmb-app .tcx .btn.ghost{border-color:var(--line);color:var(--ink-soft)}.hmb-app .tcx .btn.ghost:hover{border-color:var(--ink);color:var(--ink);background:var(--bg-card)}.hmb-app .tcx input,.hmb-app .tcx select{font-family:"Inter Tight",sans-serif;font-size:14px;color:var(--ink);padding:10px 12px;border:1px solid var(--line);background:var(--bg);width:100%}.hmb-app .tcx input:focus,.hmb-app .tcx select:focus{outline:none;border-color:var(--ink)}.hmb-app .tcx label.field-label{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}.hmb-app .tcx .login-screen{min-height:80vh;display:flex;align-items:center;justify-content:center}.hmb-app .tcx .login-box{width:100%;max-width:420px;background:var(--bg-card);border:1px solid var(--line-strong);padding:40px 36px;box-shadow:var(--shadow)}.hmb-app .tcx .login-box h2{font-family:"Fraunces",serif;font-size:32px;letter-spacing:-0.03em;margin-bottom:4px}.hmb-app .tcx .login-box .tag{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:28px}.hmb-app .tcx .login-field{margin-bottom:16px}.hmb-app .tcx .login-error{background:var(--accent-soft);border-left:3px solid var(--accent);padding:10px 12px;font-size:13px;margin-bottom:16px;display:none}.hmb-app .tcx .login-error.show{display:block}.hmb-app .tcx .login-hint{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft);line-height:1.6}.hmb-app .tcx .login-hint code{font-family:"JetBrains Mono",monospace;background:var(--bg);padding:1px 5px;border:1px solid var(--line)}.hmb-app .tcx .view{display:none}.hmb-app .tcx .view.active{display:block}.hmb-app .tcx .tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid var(--line);flex-wrap:wrap}.hmb-app .tcx .tabs button{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;padding:12px 20px;border:none;background:transparent;cursor:pointer;color:var(--ink-faint);border-bottom:2px solid transparent;margin-bottom:-1px}.hmb-app .tcx .tabs button.active{color:var(--ink);border-bottom-color:var(--accent)}.hmb-app .tcx .tabs button:hover:not(.active){color:var(--ink-soft)}.hmb-app .tcx .clock-panel{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;margin-bottom:24px}.hmb-app .tcx .clock-display{font-family:"Fraunces",serif;font-size:clamp(48px,7vw,84px);font-weight:500;letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums}.hmb-app .tcx .clock-date{font-size:14px;color:var(--ink-soft);margin-top:8px}.hmb-app .tcx .clock-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.hmb-app .tcx .status-line{margin-top:16px;padding:10px 12px;background:var(--accent-soft);border-left:3px solid var(--accent);font-size:13px;display:none}.hmb-app .tcx .status-line.active{display:block}.hmb-app .tcx .status-line.success{background:var(--good-soft);border-color:var(--good)}.hmb-app .tcx .payroll-banner{background:linear-gradient(90deg,var(--ink) 0%,#2a2a2a 100%);color:var(--bg);padding:18px 24px;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.hmb-app .tcx .payroll-banner.urgent{background:var(--accent)}.hmb-app .tcx .payroll-banner.overdue{background:var(--danger)}.hmb-app .tcx .payroll-banner .label{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;opacity:0.7;margin-bottom:4px}.hmb-app .tcx .payroll-banner .deadline{font-family:"Fraunces",serif;font-size:22px;font-weight:500;letter-spacing:-0.02em}.hmb-app .tcx .payroll-banner .countdown{font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:600;padding:6px 12px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25)}.hmb-app .tcx .entry-grid{display:grid;grid-template-columns:1fr 1fr 1fr 0.8fr auto;gap:10px;align-items:end}.hmb-app .tcx .entry-grid.with-emp{grid-template-columns:1.5fr 1fr 1fr 1fr 0.8fr auto}.hmb-app .tcx .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.hmb-app .tcx .stat{background:var(--bg-card);border:1px solid var(--line);padding:20px 22px;position:relative}.hmb-app .tcx .stat::before{content:"";position:absolute;top:0;left:0;width:32px;height:2px;background:var(--ink)}.hmb-app .tcx .stat .label{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}.hmb-app .tcx .stat .value{font-family:"Fraunces",serif;font-size:36px;font-weight:500;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums}.hmb-app .tcx .stat .delta{font-size:12px;color:var(--ink-soft);margin-top:6px}.hmb-app .tcx .filters{background:var(--bg-card);border:1px solid var(--line);padding:18px 22px;margin-bottom:20px;display:grid;grid-template-columns:repeat(5,1fr) auto;gap:12px;align-items:end}.hmb-app .tcx .filters input,.hmb-app .tcx .filters select{padding:8px 10px;font-size:13px}.hmb-app .tcx .filter-actions{display:flex;gap:8px}.hmb-app .tcx .table-wrap{background:var(--bg-card);border:1px solid var(--line);overflow-x:auto}.hmb-app .tcx table{width:100%;border-collapse:collapse;font-size:13px}.hmb-app .tcx thead{background:var(--bg);border-bottom:1px solid var(--line-strong)}.hmb-app .tcx th{text-align:left;padding:14px 16px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;cursor:pointer;user-select:none;white-space:nowrap}.hmb-app .tcx th:hover{color:var(--ink)}.hmb-app .tcx th.sorted::after{content:" ↓";color:var(--accent)}.hmb-app .tcx th.sorted.asc::after{content:" ↑"}.hmb-app .tcx td{padding:14px 16px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;vertical-align:middle}.hmb-app .tcx tbody tr:hover{background:var(--bg)}.hmb-app .tcx tbody tr:last-child td{border-bottom:none}.hmb-app .tcx .name-cell{font-weight:500}.hmb-app .tcx .id-cell{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-soft)}.hmb-app .tcx .dept-tag{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:10px;padding:3px 8px;background:var(--bg);border:1px solid var(--line);text-transform:uppercase;letter-spacing:0.1em}.hmb-app .tcx .badge{display:inline-block;font-size:11px;padding:2px 8px;font-weight:500}.hmb-app .tcx .badge.active{background:var(--good-soft);color:var(--good)}.hmb-app .tcx .badge.done{background:var(--bg);color:var(--ink-soft);border:1px solid var(--line)}.hmb-app .tcx .badge.over{background:var(--warn-soft);color:var(--warn)}.hmb-app .tcx .badge.archived{background:var(--accent-soft);color:var(--accent)}.hmb-app .tcx .badge.manager{background:var(--ink);color:var(--bg)}.hmb-app .tcx .empty-state{padding:60px 20px;text-align:center;color:var(--ink-faint);font-style:italic}.hmb-app .tcx .export-bar{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:8px 0;font-size:12px;color:var(--ink-soft);font-family:"JetBrains Mono",monospace;letter-spacing:0.05em}.hmb-app .tcx .modal-backdrop{display:none;position:fixed;inset:0;background:rgba(26,26,26,0.55);z-index:100;align-items:center;justify-content:center;padding:20px}.hmb-app .tcx .modal-backdrop.show{display:flex}.hmb-app .tcx .modal{background:var(--bg-card);border:1px solid var(--line-strong);padding:32px;width:100%;max-width:480px;box-shadow:var(--shadow)}.hmb-app .tcx .modal h3{font-family:"Fraunces",serif;font-size:24px;letter-spacing:-0.02em;margin-bottom:4px}.hmb-app .tcx .modal .modal-sub{font-size:13px;color:var(--ink-soft);margin-bottom:20px}.hmb-app .tcx .modal-field{margin-bottom:14px}.hmb-app .tcx .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}.hmb-app .tcx .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.hmb-app .tcx .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.hmb-app .tcx .form-row.single{grid-template-columns:1fr}.hmb-app .tcx .info-line{padding:10px 12px;background:var(--bg);border-left:3px solid var(--ink);font-size:13px;margin-bottom:12px}@media (max-width:900px){.hmb-app .tcx .clock-panel,.hmb-app .tcx .settings-grid{grid-template-columns:1fr}.hmb-app .tcx .stats-row{grid-template-columns:repeat(2,1fr)}.hmb-app .tcx .filters{grid-template-columns:1fr 1fr}.hmb-app .tcx .filter-actions{grid-column:1/-1}.hmb-app .tcx .entry-grid,.hmb-app .tcx .entry-grid.with-emp{grid-template-columns:1fr 1fr}}.hmb-app .tcx{padding:18px 4px 40px;min-height:auto}.hmb-app .tcx .container{max-width:1280px}.hmb-app .tcx select,.hmb-app .tcx input{font-family:inherit}
@media(max-width:700px){.hmb-app .tcx{padding:10px 0 30px}.hmb-app .tcx .entry-grid,.hmb-app .tcx .entry-grid.with-emp{grid-template-columns:1fr 1fr}.hmb-app .tcx .filters{grid-template-columns:1fr 1fr}}

/* ── Timecard: HMB brand skin (theme-immune) ── */
.hmb-app .tcx{
 --bg:#F6EFE2; --bg-card:#FFFDF6;
 --ink:#33201B; --ink-soft:#6E5348; --ink-faint:#9C8579;
 --line:#E9DCC4; --line-strong:#4A1D1E;
 --accent:#A84344; --accent-soft:#F5DFDF;
 --good:#3E6B3A; --good-soft:#E4EDD9;
 --warn:#9A6B08; --warn-soft:#F6EACB;
 --danger:#B0402C;
 border-radius:18px;
}
.hmb-app .tcx .brand h1{color:#4A1D1E}
.hmb-app .tcx .brand .sub{color:#A84344}
.hmb-app .tcx header{border-bottom-color:#4A1D1E}
.hmb-app .tcx .payroll-banner{background:linear-gradient(120deg,#4A1D1E 0%,#A84344 100%);color:#F9EBD8;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(227,185,60,.35)}
.hmb-app .tcx .payroll-banner .label{color:#E3B93C}
.hmb-app .tcx .payroll-banner .countdown{background:rgba(227,185,60,.16);border:1px solid #E3B93C;color:#F5D77A;border-radius:9px}
.hmb-app .tcx .payroll-banner.urgent{background:linear-gradient(120deg,#8A2C1F,#C8553D)}
.hmb-app .tcx .payroll-banner.overdue{background:linear-gradient(120deg,#6E1616,#A32020)}
.hmb-app .tcx .tabs button.active{border-bottom-color:#E3B93C;color:#4A1D1E}
.hmb-app .tcx .tabs button:hover{color:#A84344}
.hmb-app .tcx .btn.primary{background:#4A1D1E;color:#F9EBD8}
.hmb-app .tcx .btn.primary:hover{background:#A84344;border-color:#A84344}
.hmb-app .tcx .btn.danger{color:#B0402C;border-color:#B0402C}
.hmb-app .tcx .stat{border-top:3px solid #E3B93C}
.hmb-app .tcx .stat .value{font-family:'Fraunces',serif;color:#4A1D1E}
.hmb-app .tcx .stat .label{color:#A84344}
.hmb-app .tcx .card-label{color:#A84344}
.hmb-app .tcx th{color:#6E5348}
.hmb-app .tcx th.sorted{color:#4A1D1E;border-bottom:2px solid #A84344}
.hmb-app .tcx .dept-tag{background:#FBF3DC;border-color:#E3B93C;color:#7A5A08}
.hmb-app .tcx .badge.over{background:#FBF0D4;color:#9A6B08;border:1px solid #E3B93C}
.hmb-app .tcx .badge.done{background:var(--good-soft);color:var(--good)}
.hmb-app .tcx .badge.archived{background:#EFE3E3;color:#8A3132}
.hmb-app .tcx .id-cell{color:#A84344}
.hmb-app .tcx .role-tag{background:#4A1D1E;color:#E3B93C}
.hmb-app .tcx .info-line{border-left:3px solid #E3B93C;background:#FBF6EA;padding:10px 14px;border-radius:0 10px 10px 0}
.hmb-app .tcx input:focus,.hmb-app .tcx select:focus{border-color:#A84344;outline:none;box-shadow:0 0 0 3px rgba(168,67,68,.12)}
/* ──────────────────────────────────────────────────────────────────────────
   WordPress integration
   Everything above is the original stylesheet, scoped so it cannot reach out
   into a theme. What follows is only what the move onto a WordPress page
   needs: making the container behave the way the document body used to, and
   styling the few controls the conversion added.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Full-screen mode ──
   The original owned the document: html and body were the app, the page never
   scrolled, and each panel scrolled inside itself. A WordPress page has a
   theme, an admin bar and a footer around it, so the same effect is had by
   pinning the board to the viewport and stopping the page behind it from
   scrolling at all. */
html.hmb-so-full-page,
body.hmb-so-full-page{height:100%;margin:0;padding:0;overflow:hidden;background:#F6EFE2}
body.hmb-so-full-page #wpadminbar{display:none!important}
/* A theme may reserve room for an admin bar that is no longer there. */
html.hmb-so-full-page{margin-top:0!important}

.hmb-app-full{position:fixed;inset:0;z-index:2147483000;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--parchment)}
@media(min-width:901px){.hmb-app-full{overflow:hidden;display:flex;flex-direction:column}}

/* The board is opaque and sits above everything, so whatever the theme left on
   the page is already out of sight and out of reach. It is deliberately not
   hidden outright: on a page built by a builder the board may still be nested
   inside one of those wrappers, and hiding the wrapper would take the board
   with it. */

/* ── Embedded mode ──
   The board sits inside the theme's own layout instead, for anyone who would
   rather keep their header and footer. */
.hmb-app-embed{position:relative;min-height:82vh;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
.hmb-app-embed .lockWrap,.hmb-app-embed .calFull,.hmb-app-embed .modalWrap,.hmb-app-embed #panelBackdrop{position:absolute}

/* ── Keeping the theme out ──
   Scoping stops this stylesheet reaching the theme. This is the other half:
   stopping the theme reaching in.

   Standing alone, the app's <body> set only a font family, a size and colours,
   so everything else — line height, letter spacing, weight — came from the
   browser's own defaults, and the app's rules were written expecting exactly
   that. A WordPress theme sets those same properties on <body>, and because
   they are inherited they arrive inside the app uninvited. The original even
   has `button,input,select,textarea{font:inherit}`, so a theme's line height
   reached right into the PIN keypad and made every key taller.

   Restoring the browser defaults here, on the app's own root, puts the whole
   inheritance chain back the way the app was written for. It is deliberately
   done at the root rather than on every element: rules like `.bub{line-height:1.45}`
   are meant to be inherited by the text inside them, and resetting each element
   individually would break that. */
.hmb-app{
	line-height:normal;
	letter-spacing:normal;
	word-spacing:normal;
	font-weight:400;
	font-style:normal;
	font-variant:normal;
	text-transform:none;
	text-indent:0;
	text-shadow:none;
	text-align:start;
	text-decoration:none;
	font-feature-settings:normal;
	-webkit-font-smoothing:auto;
}

/* Themes style bare form controls directly, which inheritance cannot undo. */
.hmb-app button,.hmb-app input,.hmb-app select,.hmb-app textarea{
	font-family:inherit;
	letter-spacing:inherit;
	word-spacing:inherit;
	text-transform:none;
	text-decoration:none;
	box-shadow:none;
	min-height:auto;
	text-indent:0;
}
.hmb-app button{border-radius:0;background-image:none}

/* Likewise for the handful of tags a theme is almost certain to have opinions
   about. Everything here is what the browser would have done unaided. */
.hmb-app :is(p,h1,h2,h3,h4,h5,h6,ul,ol,li,figure,blockquote,table,th,td){
	line-height:inherit;
	letter-spacing:inherit;
	word-spacing:inherit;
	text-transform:none;
	text-indent:0;
	text-shadow:none;
}
.hmb-app a{box-shadow:none;text-decoration:none;letter-spacing:inherit;line-height:inherit}
.hmb-app :is(b,strong){font-weight:bold}
.hmb-app :is(h1,h2,h3,h4,h5,h6){font-weight:bold}

.hmb-app *,.hmb-app *::before,.hmb-app *::after{box-sizing:border-box}
.hmb-app img{max-width:100%;height:auto}

/* Signing in with a username and password instead of the keypad. */
.hmb-app .lockField{width:100%;border:1px solid var(--input-line);border-radius:11px;padding:11px 12px;background:var(--input-bg);color:var(--ink);font-size:14px;font-weight:600;margin-bottom:8px}
.hmb-app .lockSwitch{margin-top:12px;border:0;background:transparent;color:var(--muted);font-weight:800;font-size:12px;cursor:pointer;text-decoration:underline}
.hmb-app .lockSwitch:hover{color:var(--wine)}

/* ── The name at the top of the board ──
   The header is one flex row and nothing in it was allowed to wrap, so when the
   row ran out of space the browser took it out of the widest thing it could
   shrink: the shop's own name. On the manager's page — four tabs, the icons and
   a long user name — "HALAL MEAT BOSTON" broke across two lines and the APP ID
   badge was squeezed to a sliver with its text stacked inside it.

   So: the name and the badge never break, and if the row genuinely will not fit
   the tabs drop to a line of their own instead. */
.hmb-app header.top{flex-wrap:wrap}
.hmb-app header.top>div:first-child{flex:0 0 auto;min-width:0}
.hmb-app .brandName{flex-wrap:nowrap;white-space:nowrap}
.hmb-app .brandName .appId{flex:0 0 auto;white-space:nowrap}
.hmb-app .brandSub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmb-app .tabs{min-width:0}

/* ── Completed tasks, grouped by day ──
   One long column of near-identical rows was hard to read on a busy day, so
   they sit under the day they were finished and each row is a single line. */
.hmb-app .doneTools{display:flex;gap:7px;padding:0 16px 8px;align-items:center}
.hmb-app .doneTools select,.hmb-app .doneTools input{border:1px solid var(--input-line);border-radius:9px;padding:7px 9px;background:var(--input-bg);color:var(--ink);font-size:12px;font-weight:700}
.hmb-app .doneTools input{flex:1;min-width:90px;font-weight:600}
.hmb-app .doneDay{margin-bottom:10px}
.hmb-app .doneDayHead{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding:0 0 4px;margin-bottom:4px}
.hmb-app .doneDayHead span{background:var(--green-soft);color:var(--green);border-radius:99px;padding:1px 8px;font-size:11px}
.hmb-app .doneRow{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.hmb-app .doneRow:last-child{border-bottom:0}
.hmb-app .doneTick{color:var(--green);font-weight:900;flex:0 0 auto}
.hmb-app .doneName{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmb-app .doneWho{color:var(--muted);font-size:11.5px;white-space:nowrap;flex:0 0 auto;max-width:40%;overflow:hidden;text-overflow:ellipsis}
.hmb-app .doneRow .btn{flex:0 0 auto;padding:3px 8px;min-height:0}

/* Adding somebody to the team without leaving the board. */
.hmb-app .addPerson{border-top:2px solid var(--line);margin:4px 16px 0;padding:12px 0 2px}
.hmb-app .addPerson>b{font-size:13px;color:var(--wine-dark)}
.hmb-app[data-theme="dark"] .addPerson>b,.hmb-app[data-theme="midnight"] .addPerson>b{color:var(--ink)}

/* ── Tasks to do cannot be squeezed out of existence ──
   On a tall screen the left column is a flex column: tasks take what is left
   after pickups and reports. With a few orders waiting and a row of report
   buttons, "what is left" became nothing, and the tasks panel collapsed to a
   couple of pixels — it looked like it had gone behind the pickups. Giving it
   a floor means the column scrolls instead of one panel vanishing. */
@media(min-width:901px){
	/*
	 * One scrollbar for the whole left column, not a scrollbar inside another.
	 *
	 * Originally the tasks list scrolled inside its own panel while the column
	 * stayed put, which worked only while everything fitted. Once it did not,
	 * the tasks panel was squeezed to nothing and appeared to hide behind the
	 * pickups. Making the column scroll as well fixed that but left two
	 * scrollbars a few pixels apart, and the wheel landing on whichever one the
	 * pointer happened to be over.
	 *
	 * So: the panels keep their natural height and the column scrolls. One
	 * scrollbar, one thing the wheel does, and nothing can be squeezed away.
	 */
	.hmb-app .colLeft{overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:thin;padding-right:4px}
	.hmb-app .pn-tasks{flex:0 0 auto;min-height:0}
	.hmb-app .pn-tasks .scrolly{max-height:none;overflow:visible}
	.hmb-app .pn-report,.hmb-app .pn-pickup{flex:0 0 auto}
}

/* A member of staff looking at their own hours. */
.hmb-app .myTotals{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.hmb-app .myRow{display:grid;grid-template-columns:minmax(96px,auto) 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px}
.hmb-app .myRow:last-child{border-bottom:0}
.hmb-app .myDay{font-weight:800}
.hmb-app .myTime{color:var(--muted);font-weight:700}
.hmb-app .myHrs{font-weight:900;text-align:right;white-space:nowrap}
.hmb-app .myFlag{grid-column:1/-1;color:var(--amber);font-size:11px;font-weight:700;margin-top:-4px}

/* ── The TV board reaches the edges ──
   Everywhere else the board sits in a centred column with a comfortable
   margin, which is right for something you stand and read at arm's length.
   A wall display is not that: capped at 1560px it left a band of empty page
   down either side of a big screen, which is obvious on the light themes. In
   TV mode the column cap and the padding come off and the board runs edge to
   edge. */
.hmb-app.tvMode main{max-width:none;padding:0}
.hmb-app.tvMode #tv{padding:0}
.hmb-app.tvMode .opsTV{border-radius:0;border-left:0;border-right:0;border-bottom:0;min-height:calc(100vh - 62px)}

/* ── The ticker keeps moving ──
   The original turns every animation off when the system asks for reduced
   motion, which is the right instinct — but this one is not decoration. The
   line is deliberately longer than the screen, so a ticker that has stopped is
   a ticker with its ending hidden. It stays moving; everything else still
   obeys the setting. */
@media (prefers-reduced-motion: reduce){
	.hmb-app .tvxTicker>div{animation:scroll 30s linear infinite!important}
}

/* ── The TV board on the whole screen ── */
.hmb-app .tvxFull{border:1px solid #26364F;background:transparent;color:#8FA2C0;border-radius:8px;padding:5px 11px;font-size:clamp(10px,1vw,12px);letter-spacing:1px;font-weight:800;cursor:pointer;font-family:inherit}
.hmb-app .tvxFull:hover{border-color:#35C7FF;color:#35C7FF}
/* When it is the full-screen element it owns the screen, so it has to bring
   its own background and scrolling with it. */
.hmb-app .opsTV:fullscreen{overflow-y:auto;padding:18px 20px;background:#04060B}
.hmb-app .opsTV:-webkit-full-screen{overflow-y:auto;padding:18px 20px;background:#04060B}

/* A note on the manager's sign-in page when no password has been set yet. */
.hmb-app .lockNote{margin-top:12px;border:1px dashed var(--amber);background:var(--amber-soft);color:var(--amber);border-radius:11px;padding:9px 11px;font-size:12px;font-weight:700;line-height:1.5}

/* ──────────────────────────────────────────────────────────────────────────
   On a phone
   The original already collapses its columns, scrolls its tables sideways and
   folds the header at 900px. What follows is the rest of the way down to a
   phone held in one hand, plus the parts this conversion added.
   ────────────────────────────────────────────────────────────────────────── */

/* Keep a wide table inside its own scroller rather than letting it drag the
   whole board sideways. Deliberately not a blanket overflow rule on the app —
   that would clip shadows and hide a real fault rather than fix it. */
.hmb-app .table-wrap,.hmb-app .tcx .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Long order numbers and customer names should wrap, not push. */
.hmb-app .doneName,.hmb-app .bub p,.hmb-app .task h3,.hmb-app .feedItem b{overflow-wrap:anywhere}

@media(max-width:560px){
	/* Two columns of inputs is too narrow to read or tap on a phone. This is
	   every form on the admin side: creating a task, sending an alert, PINs,
	   adding somebody, the checklists. */
	.hmb-app .formGrid{grid-template-columns:1fr}
	.hmb-app .formGrid .span2{grid-column:auto}

	.hmb-app .tcx .entry-grid,.hmb-app .tcx .entry-grid.with-emp,
	.hmb-app .tcx .filters,.hmb-app .tcx .stats-row{grid-template-columns:1fr}
	.hmb-app .stats{grid-template-columns:repeat(2,1fr)}

	/* Completed tasks: the day and the name compete for the same line. */
	.hmb-app .doneTools{flex-wrap:wrap}
	.hmb-app .doneTools select,.hmb-app .doneTools input{flex:1 1 100%}
	.hmb-app .doneWho{display:none}

	/* My hours reads better stacked than squeezed into three columns. */
	.hmb-app .myRow{grid-template-columns:1fr auto;row-gap:2px}
	.hmb-app .myTime{grid-column:1;font-size:12px}
	.hmb-app .myHrs{grid-row:1;grid-column:2}

	.hmb-app .addPerson{margin-left:12px;margin-right:12px}
	.hmb-app .lockBox{padding:20px 16px}
}

/* Anything tapped with a finger needs to be big enough to hit. The undo and
   edit buttons in dense lists were sized for a mouse. */
@media(pointer:coarse){
	.hmb-app .btn.sm,.hmb-app .doneRow .btn,.hmb-app .btn.small{min-height:36px;padding-left:12px;padding-right:12px}
	.hmb-app .zBtn,.hmb-app .expBtn,.hmb-app .iconBtn{min-height:38px}
	.hmb-app .remX,.hmb-app .chipName a{padding:6px 8px}
}

/* On a phone the browser's own toolbars slide in and out, and a height of
   100vh is measured as though they were never there — so the bottom of the
   board sits underneath them. dvh is the height actually available. */
@supports (height:100dvh){
	.hmb-app-full{height:100dvh}
	.hmb-app .lockWrap{min-height:100dvh}
}

/* The LIVE chip doubles as the sign that the server stopped answering. */
.hmb-app .liveChip.isOffline{color:var(--red);border-color:var(--red);background:var(--red-soft)}
.hmb-app .liveChip.isOffline .liveDot{background:var(--red);animation:none}

/* ------------------------------------------------------------------ */
/* On-screen keyboard                                                  */
/* ------------------------------------------------------------------ */
/*
 * Deliberately a panel and not a dialog: no backdrop, nothing behind it is
 * blocked, and it can be dragged by its bar, the way the Windows one works.
 * It sits above an expanded panel, so the search it belongs to is never on top
 * of it, and below anything genuinely modal, so a confirm box is never trapped
 * behind it.
 */
.hmb-app .osk{position:fixed;z-index:71;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.34);padding:10px;width:252px;user-select:none;-webkit-user-select:none}
.hmb-app .osk.wide{width:min(660px,calc(100vw - 24px))}
.hmb-app .oskBar{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.3px;padding:2px 2px 9px;cursor:grab;touch-action:none;color:var(--muted)}
.hmb-app .oskBar:active{cursor:grabbing}
.hmb-app .oskGrip{opacity:.65;letter-spacing:-1px}
.hmb-app .oskBar #oskTitle,.hmb-app .oskBar span:nth-child(2){flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmb-app .oskX{border:0;background:transparent;color:var(--muted);font-size:14px;line-height:1;padding:3px 5px;border-radius:7px;cursor:pointer}
.hmb-app .oskX:hover{background:var(--gold-soft);color:var(--ink)}

/* The number pad is the login keypad, key for key. */
.hmb-app .oskNum{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.hmb-app .oskRow{display:flex;gap:6px;margin-top:6px}
.hmb-app .oskRow.r2{padding-left:18px}
.hmb-app .oskFoot{margin-top:7px}
.hmb-app .oskKey{flex:1;min-width:0;font-size:18px;padding:13px 4px;border:0;border-radius:11px;background:#EFE6D3;font-weight:800;cursor:pointer;color:inherit;font-family:inherit}
.hmb-app .oskKey:hover{background:var(--gold-soft)}
.hmb-app .oskKey:active{transform:translateY(1px)}
.hmb-app .oskKey.act{font-size:16px}
.hmb-app .oskKey.on{outline:2px solid var(--gold);outline-offset:-2px}
.hmb-app .oskKey.wide{flex:1.6;font-size:13.5px;padding:13px 6px}
.hmb-app .oskKey.space{flex:5;font-size:12px}
.hmb-app .oskKey.go{background:var(--gold);color:#1B1206}
.hmb-app .oskKey.go:hover{filter:brightness(1.06);background:var(--gold)}

.hmb-app[data-theme="dark"] .oskKey{background:#131A2A;color:var(--ink);border:1px solid #243050}
.hmb-app[data-theme="midnight"] .oskKey{background:#0C1B22;color:var(--ink);border:1px solid #1E3A44}
.hmb-app[data-theme="dark"] .oskKey.go,.hmb-app[data-theme="midnight"] .oskKey.go{background:var(--gold);color:#1B1206}

/* Narrow screens keep their own keyboard; ours never appears there. */
@media (max-width:1023px){.hmb-app .osk{display:none !important}}

/* ------------------------------------------------------------------ */
/* Groups & permissions                                                */
/* ------------------------------------------------------------------ */
/*
 * These used to borrow .wday, the week calendar's chip: every one forced to
 * the same width with no room at the sides. That suits Mon/Tue/Wed and
 * nothing else — thirteen names and eight permission labels came out cut in
 * half. Each is now a row that sizes to its own text.
 */
.hmb-app .grpTop{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px}
.hmb-app .grpSection{margin-top:14px}
.hmb-app .grpHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.hmb-app .grpHead h3{margin:0;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.hmb-app .grpCount{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.hmb-app .grpSearch{width:100%;border:1px solid var(--input-line);border-radius:9px;padding:8px 11px;background:var(--input-bg);color:var(--ink);font-size:13px;margin-bottom:8px}

.hmb-app .pickList{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.hmb-app .pickList.wide{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.hmb-app .pick{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:9px 11px;cursor:pointer;font-family:inherit;font-size:13px;min-width:0}
.hmb-app .pick:hover{border-color:var(--gold);background:var(--gold-soft)}
.hmb-app .pick .tick{flex:0 0 18px;height:18px;line-height:16px;text-align:center;border:1.5px solid var(--line);border-radius:5px;font-size:12px;font-weight:900;color:transparent}
.hmb-app .pick .pickName{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmb-app .pick .pickNote{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hmb-app .pick.on{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.hmb-app .pick.on .tick{background:var(--green);border-color:var(--green);color:#fff}
.hmb-app .pick.on .pickNote{color:var(--green)}

.hmb-app .grpActions{display:flex;gap:10px;margin-top:16px}
.hmb-app .grpActions .btn{flex:1}

.hmb-app[data-theme="dark"] .pick,.hmb-app[data-theme="midnight"] .pick{background:var(--input-bg)}
.hmb-app[data-theme="dark"] .pick:hover,.hmb-app[data-theme="midnight"] .pick:hover{background:var(--card)}

@media (max-width:700px){
 .hmb-app .grpTop{grid-template-columns:1fr}
 .hmb-app .pickList,.hmb-app .pickList.wide{grid-template-columns:1fr}
}

/* ── Report buttons & options ──
   The list was one run-on line per button with a × after each option and no
   way at all to remove the button itself. Each button is now its own row,
   with its options under it and a Delete of its own. */
.hmb-app .cfgNote{color:var(--muted);font-size:11.5px;margin-bottom:8px}
.hmb-app .cfgRow{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:7px;background:var(--card)}
.hmb-app .cfgRowHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hmb-app .cfgRowHead b{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hmb-app .cfgDel{flex:0 0 auto;border:1px solid var(--red);background:transparent;color:var(--red);border-radius:8px;padding:3px 9px;font-size:11px;font-weight:800;cursor:pointer;font-family:inherit}
.hmb-app .cfgDel:hover{background:var(--red);color:#fff}
.hmb-app .cfgOpts{margin-top:5px;font-size:12px;color:var(--ink);line-height:1.9}
.hmb-app .cfgX{color:var(--red);text-decoration:none;font-weight:800;padding:0 2px}
.hmb-app .cfgEmpty{color:var(--muted);font-style:italic}

/* ── Work that has not been saved ──
   A refused write used to show nothing but the word OFFLINE in a small chip.
   Somebody types a message, sees it appear, and walks away: it never left the
   browser. This says so where it cannot be missed. */
.hmb-app .unsavedBar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:75;display:flex;align-items:center;gap:10px;background:var(--wine-dark);color:#FBF3E4;border-left:5px solid var(--red);border-radius:12px;padding:11px 15px;font-size:13px;font-weight:800;box-shadow:0 14px 34px rgba(0,0,0,.34);max-width:min(560px,calc(100vw - 24px))}
.hmb-app .unsavedDot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--red);animation:unsavedPulse 1.2s ease-in-out infinite}
@keyframes unsavedPulse{0%,100%{opacity:1}50%{opacity:.25}}
.hmb-app #unsavedText{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hmb-app .unsavedBtn{flex:0 0 auto;border:1px solid #FBF3E4;background:transparent;color:#FBF3E4;border-radius:8px;padding:5px 11px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit}
.hmb-app .unsavedBtn:hover{background:#FBF3E4;color:var(--wine-dark)}

/* ── When the board is holding messages back ──
   An update sent to a branch this screen is not set to was dropped without a
   word, so the admin thought it had vanished and the shop floor never knew
   anything had been sent. The board says so now, and offers the fix. */
.hmb-app .locNote{margin:0 0 10px;padding:10px 13px;border-radius:11px;background:var(--gold-soft);border-left:4px solid var(--gold);color:var(--ink);font-size:12.5px;line-height:1.55}
.hmb-app .locNote b{display:block;margin-bottom:2px}
.hmb-app .locNote a{color:var(--wine);font-weight:800;text-decoration:underline}
.hmb-app[data-theme="dark"] .locNote a,.hmb-app[data-theme="midnight"] .locNote a{color:var(--gold)}

/* A "No" answered on a message is not an agreement, so it is not ticked off. */
.hmb-app .ackLine.saidNo{color:var(--red)}

/* ── The ⋮ on a message ──
   Edit and Delete sat as two buttons under the text, which is fine for two and
   no good for more. They live in a small menu in the corner now, out of the
   way until it is wanted, with room for whatever comes next. */
.hmb-app .bub{position:relative}
.hmb-app .msgMenu{position:absolute;top:5px;right:6px;z-index:3}
.hmb-app .msgDots{border:0;background:transparent;color:var(--muted);font-size:17px;line-height:1;padding:2px 6px;border-radius:7px;cursor:pointer;font-family:inherit;opacity:.55}
.hmb-app .bub:hover .msgDots,.hmb-app .msgMenu.open .msgDots{opacity:1}
.hmb-app .msgDots:hover{background:var(--gold-soft);color:var(--ink)}
.hmb-app .msgMenuList{display:none;position:absolute;top:100%;right:0;margin-top:3px;min-width:132px;background:var(--cream);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.24);overflow:hidden;padding:4px}
.hmb-app .msgMenu.open .msgMenuList{display:block}
.hmb-app .msgMenuList button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 10px;border-radius:7px;cursor:pointer;white-space:nowrap}
.hmb-app .msgMenuList button:hover{background:var(--gold-soft)}
/* Room for the ⋮ so it never sits on top of the name. */
.hmb-app .bub .who{padding-right:26px}
.hmb-app[data-theme="dark"] .msgMenuList,.hmb-app[data-theme="midnight"] .msgMenuList{background:var(--card)}

/* A touch screen has no hover, so it is always there to be pressed. */
@media (hover:none){.hmb-app .msgDots{opacity:1}}

/* A way across from the manager's sign-in to the shop board, for whoever runs
   both and would rather not keep two long addresses in their head. */
.hmb-app .lockCross{display:inline-block;margin-top:14px;padding:9px 16px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--card);font-weight:800;font-size:12.5px;text-decoration:none}
.hmb-app .lockCross:hover{border-color:var(--gold);background:var(--gold-soft)}

/* ── Why the board would not scroll on a phone ──
   Stacked into one column, the column was written as 1fr. A 1fr track will
   not go narrower than the widest thing inside it, so one stubborn child held
   the column at 387px inside a 351px page. That few dozen pixels of overflow
   gave the board a sideways scrollbar, and on a touch screen a sideways
   scrollbar swallows the drag — so the board looked frozen. minmax(0,1fr)
   lets the column be as narrow as the page, which is what the desktop rule
   above has always said. */
@media(max-width:900px){
 .hmb-app .grid,
 .hmb-app .adminGrid{grid-template-columns:minmax(0,1fr)}
 /* Nothing inside a column may push it wider than the screen either. */
 .hmb-app .colLeft,
 .hmb-app .colRight,
 .hmb-app .panel{min-width:0;max-width:100%}
}

/* On a phone the row of buttons along the top ran off the side and had to be
   swiped to reach — the logout door and the theme picker were off the screen
   entirely. They wrap onto a second line instead, so everything can be
   reached with a thumb and there is one less sideways scroller in the way of
   an ordinary drag. */
@media(max-width:560px){
 .hmb-app .tabs{flex-wrap:wrap;overflow-x:visible;row-gap:6px;justify-content:flex-end}
 .hmb-app .tabs .themeSel{max-width:132px}
}

/* ── Daily notices ──
   What the board writes to itself: the opening checklist, the closing
   reminder, the end of day summary, an automatic clock-out. It used to go
   into the column the team talks in, where it buried what people had said to
   each other. Here it reads as what it is — a short list of jobs. */
.hmb-app .noticeRow{border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:11px;padding:9px 11px;margin-bottom:8px;background:var(--card)}
.hmb-app .noticeRow:last-child{margin-bottom:0}
.hmb-app .noticeTop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:3px}
.hmb-app .noticeTop b{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--wine);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmb-app .noticeTop small{font-size:11px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.hmb-app .noticeRow p{margin:0;font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
.hmb-app .noticeRow .actions{margin-top:7px}
.hmb-app .noticeRow.done{border-left-color:var(--green);opacity:.72}
.hmb-app[data-theme="dark"] .noticeTop b,
.hmb-app[data-theme="midnight"] .noticeTop b{color:var(--gold)}

/* ── Tasks and the board's own notices, side by side ──
   Stacked one above the other, the notices sat a screen and a half down and
   were missed entirely. They are a short list of jobs, the same as the tasks
   beside them, so they belong next to them and not underneath. On a narrow
   screen there is no room for two, and they stack as everything else does. */
.hmb-app .tasksRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px;align-items:start}
@media(max-width:1180px){
 .hmb-app .tasksRow{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}
@media(max-width:900px){
 .hmb-app .tasksRow{grid-template-columns:minmax(0,1fr)}
}

/* The branch picker beside the admin's message search. */
.hmb-app .chatLocSel{flex:0 0 auto;max-width:150px;border:1px solid var(--input-line);border-radius:9px;padding:7px 9px;background:var(--input-bg);color:var(--ink);font-family:inherit;font-size:12px;font-weight:700}

/* The two things the bell can do to everything at once. */
.hmb-app .notifFoot{display:flex;gap:8px;padding:9px 12px;border-top:1px solid var(--line);background:var(--card)}
.hmb-app .notifAct{flex:1;border:1px solid var(--line);background:var(--cream);color:var(--ink);border-radius:9px;padding:8px 6px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer}
.hmb-app .notifAct:hover{border-color:var(--gold);background:var(--gold-soft)}
.hmb-app .notifAct.danger{color:var(--red)}
.hmb-app .notifAct.danger:hover{border-color:var(--red);background:var(--red-soft)}
.hmb-app[data-theme="dark"] .notifAct,.hmb-app[data-theme="midnight"] .notifAct{background:var(--input-bg)}