:root{
  --menu-bg:#c7b37a;
  --content-bg:#ead9a5;
  --content-card:rgba(255,255,255,.22);
  --panel-grey:#6f747b;
  --panel-grey-dark:#575d65;
  --menu-border:#9d8750;
  --nav-text:#1f211d;
  --nav-muted:#5e5131;
  --nav-hover:#b9a264;
  --nav-active:#a88f50;
  --button-face:#111;
  --button-border:#c8d0dc;
  --button-text:#fff;
  --sidebar-width:288px;
  --mobile-header-height:58px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--content-bg);font-family:Arial,Helvetica,sans-serif;color:#171717}
a{color:inherit;text-decoration:none}

/* Command Bar */
.cmd-bar{position:fixed;top:0;left:0;right:0;height:52px;background:#2a2d30;color:#fff;display:flex;align-items:center;padding:0 8px;gap:4px;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.3);font-family:Arial,Helvetica,sans-serif}
.cmd-btn{width:48px;height:48px;border:none;background:none;color:#fff;cursor:pointer;display:grid;place-items:center;border-radius:10px;font-size:20px;font-weight:900;transition:background .12s;flex-shrink:0}
.cmd-btn:hover{background:rgba(255,255,255,.12)}
.cmd-btn:active{background:rgba(255,255,255,.2)}
.cmd-title{font-weight:900;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
.cmd-spacer{flex:1}
.cmd-view{font-weight:700;font-size:13px;background:rgba(255,255,255,.15);padding:4px 12px;border-radius:6px;white-space:nowrap}
.cmd-badges{display:flex;gap:4px;align-items:center;padding:0 4px}
.cmd-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-weight:900;font-size:12px;cursor:pointer;border:none;background:rgba(255,255,255,.15);color:#fff;white-space:nowrap;transition:background .12s}
.cmd-badge:hover{background:rgba(255,255,255,.25)}
.cmd-badge.problem{background:#ff0000;animation:cmd-flash .8s infinite}
.cmd-badge.msg{background:#3a7bd5}
.cmd-badge.fork{background:#ff8c00}
.cmd-badge.hidden{display:none}
@keyframes cmd-flash{0%,100%{opacity:1}50%{opacity:.5}}
.cmd-employee{font-weight:700;font-size:13px;padding:0 12px;white-space:nowrap;opacity:.8}
.cmd-employee a{color:#fff;text-decoration:underline;opacity:.7}
.cmd-employee a:hover{opacity:1}

/* Navigation Overlay */
.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:2000;display:flex;flex-direction:column;overflow-y:auto;padding:0;opacity:0;pointer-events:none;transition:opacity .18s}
.nav-overlay.open{opacity:1;pointer-events:auto}
.nav-overlay-header{display:flex;align-items:center;padding:12px 16px;gap:12px;flex-shrink:0}
.nav-overlay-title{font-weight:900;font-size:20px;color:#fff;flex:1}
.nav-overlay-close{width:48px;height:48px;border:none;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;border-radius:10px;font-size:24px;font-weight:900;display:grid;place-items:center;flex-shrink:0}
.nav-overlay-close:hover{background:rgba(255,255,255,.2)}
.nav-overlay-body{flex:1;padding:16px;overflow-y:auto}

/* Button Grid */
.btn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;padding:0}
.btn-grid.letters{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}
.grid-btn{font-weight:1000;font-size:18px;padding:24px 16px;border-radius:14px;border:3px solid #242629;background:#6f747b;color:#fff;cursor:pointer;text-align:center;box-shadow:inset 0 2px 12px rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.18);transition:transform .08s;font-family:inherit;line-height:1.2;word-wrap:break-word}
.grid-btn:active{transform:scale(.96)}
.grid-btn:hover{background:#7d8289}
.grid-btn.back{background:#4a4a4a;font-size:15px;font-weight:800}
.grid-btn.active-emp{background:#3a7bd5}
.grid-btn.section{background:#9d8750;font-size:15px}
.grid-btn.mypanel{background:#00a651}
.grid-btn.letter{font-size:22px;padding:20px 8px;font-weight:1000}

/* Breadcrumb Bar */
.breadcrumb-bar{position:fixed;top:52px;left:0;right:0;height:32px;background:#232528;display:flex;align-items:center;padding:0 8px;gap:0;z-index:999;border-bottom:1px solid rgba(157,135,80,.15);font:700 13px Arial,Helvetica,sans-serif}
.breadcrumb-bar.hidden{display:none}
.breadcrumb-back{width:32px;height:32px;border:none;background:none;color:#e3d4b3;cursor:pointer;display:grid;place-items:center;border-radius:8px;font-size:18px;flex-shrink:0;margin-right:4px;transition:background .12s}
.breadcrumb-back:hover{background:rgba(255,255,255,.1)}
.breadcrumb-back.hidden{display:none}
.breadcrumb-trail{display:flex;align-items:center;gap:0;overflow:hidden;white-space:nowrap}
.breadcrumb-item{color:rgba(255,255,255,.5);text-decoration:none;padding:4px 6px;border-radius:6px;transition:color .12s,background .12s;cursor:pointer;flex-shrink:0}
.breadcrumb-item:hover{color:#e3d4b3;background:rgba(255,255,255,.06)}
.breadcrumb-item.current{color:#e3d4b3;cursor:default}
.breadcrumb-item.current:hover{background:none}
.breadcrumb-sep{color:rgba(255,255,255,.2);margin:0 2px;flex-shrink:0;font-size:11px}

/* App Content */
.app-content{padding-top:88px;min-height:100vh}
.app-content.no-breadcrumb{padding-top:56px}

.content{padding:28px;background:var(--content-bg);min-width:0;width:100%}
.page-header{max-width:1180px;margin:0 auto 18px}
.page-header h1{font-size:28px;margin:0 0 7px;color:#201b11}
.page-header p{margin:0;color:#463d27;font-weight:700;line-height:1.45}
.page-card{max-width:1180px;margin:0 auto;background:var(--content-card);border:1px solid rgba(70,55,25,.18);border-radius:18px;padding:18px}
.panel-title{font-size:20px;font-weight:800;margin:0 0 12px;color:#221f18}
.panel-scroll{overflow-x:auto;overflow-y:hidden;padding:0 0 12px;-webkit-overflow-scrolling:touch}
.panel{background:linear-gradient(180deg,#8a8d91,#6f7276);padding:clamp(18px,2vw,28px);border-radius:16px;border:3px solid #242629;box-shadow:inset 0 2px 12px rgba(255,255,255,.10),inset 0 -12px 30px rgba(0,0,0,.22);min-width:1020px}
.layout{display:grid;grid-template-columns:clamp(72px,9vw,110px) 1fr clamp(72px,9vw,110px);gap:clamp(18px,3vw,42px);align-items:stretch}
.vertical{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:12px;min-height:100%}
.switch{width:clamp(54px,6.6vw,88px);aspect-ratio:1/1;border-radius:7px;border:3px solid #1d1f22;background:var(--sw-bg,#000);position:relative;color:var(--sw-text,#fff);box-shadow:inset 0 4px 12px rgba(255,255,255,.22),inset 0 -7px 13px rgba(0,0,0,.24),0 4px 8px rgba(0,0,0,.25);display:grid;place-items:center;padding:6px;text-shadow:0 2px 5px rgba(0,0,0,.55);user-select:none}
.switch:after{content:attr(data-label);position:absolute;inset:6px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(.68rem,1.05vw,.95rem);line-height:1.08;font-weight:800;white-space:pre-line}
.switch[data-status="empty"]{--sw-bg:#000;--sw-text:#fff;box-shadow:inset 0 3px 8px rgba(255,255,255,.08),inset 0 -7px 13px rgba(0,0,0,.45),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="ready"]{--sw-bg:#00a651;--sw-text:#fff;box-shadow:inset 0 4px 12px rgba(255,255,255,.25),inset 0 -7px 13px rgba(0,0,0,.28),0 0 14px rgba(0,255,123,.28),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="heating"]{--sw-bg:#ffd400;--sw-text:#000;text-shadow:none;box-shadow:inset 0 4px 12px rgba(255,255,255,.30),inset 0 -7px 13px rgba(0,0,0,.20),0 0 12px rgba(255,212,0,.25),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="problem"]{--sw-bg:#ff0000;--sw-text:#fff;box-shadow:inset 0 4px 12px rgba(255,255,255,.22),inset 0 -7px 13px rgba(0,0,0,.24),0 0 16px rgba(255,0,0,.35),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="charging"]{--sw-bg:#ffd400;--sw-text:#000;text-shadow:none;box-shadow:inset 0 4px 12px rgba(255,255,255,.30),inset 0 -7px 13px rgba(0,0,0,.20),0 0 12px rgba(255,212,0,.25),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="idle"]{--sw-bg:#7b2d8e;--sw-text:#fff;box-shadow:inset 0 4px 12px rgba(255,255,255,.22),inset 0 -7px 13px rgba(0,0,0,.28),0 0 12px rgba(123,45,142,.3),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="used"]{--sw-bg:#7b2d8e;--sw-text:#fff;box-shadow:inset 0 4px 12px rgba(255,255,255,.22),inset 0 -7px 13px rgba(0,0,0,.28),0 0 12px rgba(123,45,142,.3),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="active"]{--sw-bg:#3a7bd5;--sw-text:#fff;box-shadow:inset 0 4px 12px rgba(255,255,255,.25),inset 0 -7px 13px rgba(0,0,0,.28),0 0 12px rgba(58,123,213,.3),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="requested"]{--sw-bg:#ff8c00;--sw-text:#fff;box-shadow:inset 0 4px 12px rgba(255,255,255,.25),inset 0 -7px 13px rgba(0,0,0,.28),0 0 12px rgba(255,140,0,.3),0 4px 8px rgba(0,0,0,.25)}
.switch.flash{animation:switchFlash .52s ease-in-out infinite alternate}
@keyframes switchFlash{0%{opacity:1}100%{opacity:.15}}
.center{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;padding:0;border-radius:16px;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.12);box-sizing:border-box;overflow:hidden}
.center.no-tabs{justify-content:center;gap:clamp(16px,2vw,28px);padding:clamp(18px,3vw,36px)}
.tab-bar{display:flex;gap:2px;padding:6px 6px 0;background:rgba(0,0,0,.12);border-bottom:2px solid rgba(0,0,0,.18);flex-shrink:0;flex-wrap:wrap}
.tab-btn{padding:8px 14px;border:none;border-radius:8px 8px 0 0;background:rgba(255,255,255,.10);color:#fff;font-weight:800;font-size:clamp(.7rem,.95vw,.85rem);cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s}
.tab-btn:hover{background:rgba(255,255,255,.22)}
.tab-btn.active{background:rgba(255,255,255,.30);color:#fff;box-shadow:inset 0 2px 4px rgba(255,255,255,.15)}
.tab-body{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:clamp(16px,2vw,28px);padding:clamp(14px,2.5vw,30px);min-height:0;overflow:auto}
.tab-pane{display:none;flex-direction:column;justify-content:center;align-items:stretch;gap:clamp(16px,2vw,28px);flex:1;min-height:0}
.tab-pane.active{display:flex}
.tab-placeholder{color:rgba(255,255,255,.55);font-weight:700;text-align:center;padding:32px 16px;font-size:clamp(.85rem,1.1vw,1rem)}
.sched-row{display:flex;gap:clamp(8px,1.2vw,14px);justify-content:center;flex-wrap:wrap}
.sched-day{width:clamp(48px,5.5vw,72px);aspect-ratio:1/1;border-radius:7px;border:3px solid #1d1f22;display:grid;place-items:center;font-weight:800;font-size:clamp(.72rem,1vw,.92rem);user-select:none;box-shadow:inset 0 4px 12px rgba(255,255,255,.22),inset 0 -7px 13px rgba(0,0,0,.24),0 4px 8px rgba(0,0,0,.25);text-shadow:0 2px 5px rgba(0,0,0,.55)}
.sched-day[data-status="working"]{background:#00a651;color:#fff}
.sched-day[data-status="off"]{background:#111;color:#666}
.sched-day[data-status="maintenance"]{background:#ffd400;color:#000;text-shadow:none}
.sched-day.clickable{cursor:pointer;transition:transform .08s}
.sched-day.clickable:active{transform:scale(.93)}
.sched-label{color:rgba(255,255,255,.7);font-weight:700;text-align:center;font-size:clamp(.72rem,.95vw,.88rem);margin-bottom:4px}
.sched-legend{display:flex;gap:clamp(12px,2vw,22px);justify-content:center;margin-top:14px;flex-wrap:wrap}
.sched-legend-item{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.7);font-weight:700;font-size:clamp(.68rem,.88vw,.82rem)}
.sched-legend-dot{width:16px;height:16px;border-radius:4px;border:2px solid #1d1f22}
.sched-legend-dot[data-status="working"]{background:#00a651}
.sched-legend-dot[data-status="off"]{background:#111}
.sched-legend-dot[data-status="maintenance"]{background:#ffd400}
.recipe-name{color:rgba(255,255,255,.7);font-weight:700;text-align:center;font-size:clamp(.76rem,1vw,.92rem);margin-bottom:8px}
.ing-btn{width:100%;padding:10px 12px;border-radius:7px;border:3px solid #1d1f22;font-weight:800;font-size:clamp(.72rem,.95vw,.88rem);text-align:center;user-select:none;box-shadow:inset 0 4px 12px rgba(255,255,255,.22),inset 0 -7px 13px rgba(0,0,0,.24),0 4px 8px rgba(0,0,0,.25);transition:transform .08s;display:flex;justify-content:space-between;align-items:center;gap:8px}
.ing-btn.uncharged{background:#4a1a1a;color:#ff8888;cursor:pointer;text-shadow:0 2px 5px rgba(0,0,0,.55)}
.ing-btn.uncharged:active{transform:scale(.97)}
.ing-btn.charged{background:#00a651;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.55)}
.ing-btn.readonly.uncharged{background:#333;color:#999;cursor:default}
.ing-btn.readonly.charged{cursor:default}
.ing-target{font-size:clamp(.62rem,.82vw,.78rem);opacity:.7;font-weight:600}
.ing-actual{font-size:clamp(.62rem,.82vw,.78rem);color:#ffd400}
.ing-grid{display:grid;gap:8px;max-width:420px;margin:0 auto}
.charge-all-btn{margin:12px auto 0;display:block;padding:10px 28px;border-radius:7px;border:3px solid #1d1f22;font-weight:800;font-size:clamp(.72rem,.95vw,.88rem);cursor:pointer;user-select:none;transition:transform .08s;box-shadow:inset 0 4px 12px rgba(255,255,255,.22),inset 0 -7px 13px rgba(0,0,0,.24),0 4px 8px rgba(0,0,0,.25)}
.charge-all-btn:active{transform:scale(.97)}
.charge-all-btn.incomplete{background:#ff8c00;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.55)}
.charge-all-btn.complete{background:#00a651;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.55)}
/* Problem tab */
.problem-section{margin-bottom:16px}
.problem-section h4{font-size:clamp(.72rem,.95vw,.88rem);margin:0 0 6px;color:#fff;font-weight:800;text-shadow:0 2px 5px rgba(0,0,0,.55)}
.prob-btn{display:block;width:100%;max-width:420px;margin:0 auto 6px;padding:10px 14px;border-radius:7px;border:3px solid #1d1f22;font-weight:800;font-size:clamp(.7rem,.9vw,.85rem);cursor:pointer;user-select:none;transition:transform .08s;box-shadow:inset 0 4px 12px rgba(255,255,255,.22),inset 0 -7px 13px rgba(0,0,0,.24),0 4px 8px rgba(0,0,0,.25);text-align:center}
.prob-btn:active{transform:scale(.97)}
.prob-btn.idle{background:#2a2d30;color:#bbb}
.prob-btn.active-problem{background:#ff0000;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.55);animation:prob-pulse 1s infinite}
@keyframes prob-pulse{0%,100%{opacity:1}50%{opacity:.6}}
.prob-custom-row{max-width:420px;margin:10px auto 0;display:flex;gap:8px}
.prob-custom-row input{flex:1;font-size:.85rem;border:2px solid #555;border-radius:6px;padding:6px 10px;background:#1a1c1e;color:#fff;font-family:inherit}
.prob-custom-row button{padding:6px 16px;border-radius:6px;border:2px solid #00a651;background:#00a651;color:#fff;font-weight:800;cursor:pointer;font-size:.82rem}
.prob-active-list{max-width:420px;margin:12px auto 0}
.prob-active-item{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:4px;background:rgba(255,0,0,.15);border:1px solid rgba(255,0,0,.3);border-radius:8px;color:#fff;font-size:clamp(.7rem,.9vw,.85rem);font-weight:700}
.prob-active-item .prob-text{flex:1}
.prob-active-item .prob-time{font-size:.72rem;opacity:.7}
.prob-resolve-btn{padding:4px 12px;border-radius:5px;border:1px solid #00a651;background:#00a651;color:#fff;font-weight:800;cursor:pointer;font-size:.72rem}
.prob-resolve-btn:hover{background:#008c44}
.no-problems{text-align:center;color:#8a8;font-weight:700;padding:12px;font-size:clamp(.72rem,.9vw,.85rem)}

/* Flashing border for active problems */
.panel.problem-alert{animation:border-flash .8s infinite}
@keyframes border-flash{0%,100%{box-shadow:inset 0 0 0 4px #ff0000}50%{box-shadow:inset 0 0 0 4px transparent}}

.problem-row{display:flex;gap:clamp(16px,2.5vw,28px);justify-content:center;padding:10px 0}
.problem-row .problem-btn{padding:clamp(12px,2vh,24px) clamp(18px,2.5vw,36px);border-radius:12px;border:3px solid #1d1f22;font-weight:900;font-size:clamp(.9rem,1.4vw,1.3rem);cursor:pointer;text-align:center;white-space:pre-line;box-shadow:inset 0 4px 12px rgba(255,255,255,.22),inset 0 -7px 13px rgba(0,0,0,.24),0 4px 8px rgba(0,0,0,.25);transition:transform .08s}
.problem-row .problem-btn:active{transform:scale(.96)}
.problem-row .problem-btn.off{background:#2a2d30;color:#999}
.problem-row .problem-btn.on{background:#ff0000;color:#fff;animation:prob-pulse 1s infinite}
.row{display:grid;grid-template-columns:repeat(6,clamp(54px,6.6vw,88px));gap:clamp(14px,1.8vw,22px);justify-content:center;margin-bottom:clamp(10px,1.4vw,18px)}
.row.small{grid-template-columns:repeat(2,clamp(54px,6.6vw,88px));justify-content:center;gap:clamp(24px,4vw,46px)}
.placeholder{background:rgba(255,255,255,.16);border:1px solid rgba(70,55,25,.16);color:#211d13;border-radius:16px;padding:24px;min-height:220px}
.placeholder h2{margin-top:0}
.placeholder p{max-width:760px;line-height:1.5;font-weight:700}
.link-list{display:grid;gap:12px;max-width:650px;margin-top:18px}
.doc-link{display:block;background:rgba(255,255,255,.24);border:1px solid rgba(70,55,25,.22);border-radius:12px;padding:14px 16px;font-weight:800;color:#1c1a12}
.doc-link:hover{background:rgba(255,255,255,.38)}
.note{font-weight:700;color:#3a3325;margin-top:12px}
@media(max-width:900px){
  .content{padding:18px 12px}
  .page-card{padding:12px}
  .page-header h1{font-size:23px}
  .panel{min-width:1020px}
  .panel-scroll{margin:0 -2px}
}
/* VOIP UI */
.voip-phone-btn{font-size:18px!important}
.voip-dnd-btn{font-size:16px!important;opacity:.6}
.voip-dnd-btn.active{opacity:1;background:rgba(211,47,47,.5)!important;color:#fff}
.voip-active-bar{display:flex;align-items:center;gap:8px;background:rgba(0,166,81,.25);padding:4px 12px;border-radius:8px;font-weight:800;font-size:13px;white-space:nowrap}
.voip-end-btn{padding:4px 12px;border-radius:6px;border:2px solid #d32f2f;background:#d32f2f;color:#fff;font-weight:900;font-size:12px;cursor:pointer}
.voip-end-btn:hover{background:#b71c1c}
.voip-incoming-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:3000;display:flex;align-items:center;justify-content:center}
.voip-incoming-card{background:#2a2d30;border:3px solid #3a7bd5;border-radius:20px;padding:32px;text-align:center;color:#fff;min-width:280px;max-width:400px;animation:voip-ring-pulse .8s infinite}
@keyframes voip-ring-pulse{0%,100%{box-shadow:0 0 0 0 rgba(58,123,213,.5)}50%{box-shadow:0 0 0 20px rgba(58,123,213,0)}}
.voip-incoming-icon{font-size:48px;margin-bottom:12px;animation:voip-shake .4s infinite}
@keyframes voip-shake{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}
.voip-incoming-label{font-weight:900;font-size:20px;margin-bottom:8px}
.voip-incoming-from{font-weight:700;font-size:16px;opacity:.8;margin-bottom:20px}
.voip-incoming-btns{display:flex;gap:16px;justify-content:center}
.voip-answer-btn{padding:12px 28px;border-radius:12px;border:2px solid #00a651;background:#00a651;color:#fff;font-weight:900;font-size:16px;cursor:pointer}
.voip-answer-btn:hover{background:#008c44}
.voip-decline-btn{padding:12px 28px;border-radius:12px;border:2px solid #d32f2f;background:#d32f2f;color:#fff;font-weight:900;font-size:16px;cursor:pointer}
.voip-decline-btn:hover{background:#b71c1c}
.voip-allcall-bar{position:fixed;top:54px;left:0;right:0;background:#d32f2f;color:#fff;text-align:center;padding:10px;font-weight:900;font-size:16px;z-index:1500;animation:voip-allcall-flash .6s infinite}
@keyframes voip-allcall-flash{0%,100%{opacity:1}50%{opacity:.7}}
.voip-allcall-icon{font-size:20px}

/* Tooltip system */
.tt-bubble{position:fixed;z-index:3000;background:#1a1c1e;color:#fff;padding:10px 14px;border-radius:10px;font-size:14px;font-weight:700;max-width:320px;line-height:1.4;box-shadow:0 4px 16px rgba(0,0,0,.4);pointer-events:none;opacity:0;transition:opacity .15s}
.tt-highlight{outline:3px solid #3a7bd5!important;outline-offset:2px;position:relative}
.tt-highlight::after{content:'?';position:absolute;top:-8px;right:-8px;width:20px;height:20px;background:#3a7bd5;color:#fff;border-radius:50%;font-size:12px;font-weight:900;display:grid;place-items:center;z-index:10;pointer-events:none}
#help-mode-btn{font-size:18px;font-weight:900;font-family:Georgia,serif}
#help-mode-btn.active{background:rgba(58,123,213,.5);color:#fff}

.wi-container{padding:8px 0}.wi-header{font-size:18px;font-weight:1000;color:#fff;padding:8px 12px;margin-bottom:8px;border-bottom:2px solid rgba(255,255,255,.2)}.wi-empty{padding:16px;text-align:center;opacity:.6;font-weight:700}.wi-item{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.12);border-radius:10px;margin-bottom:8px;overflow:hidden}.wi-item.expanded{border-color:rgba(58,123,213,.5)}.wi-title{padding:12px 14px;font-weight:900;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none}.wi-title:hover{background:rgba(255,255,255,.06)}.wi-toggle{font-size:12px;opacity:.5}.wi-body{padding:4px 16px 16px;font-size:14px;line-height:1.5;border-top:1px solid rgba(255,255,255,.1)}.wi-body h2{font-size:16px;margin:8px 0 6px}.wi-body ul,.wi-body ol{padding-left:20px;margin:6px 0}.wi-body li{margin:4px 0}.wi-body em{opacity:.65}
/* Error handler toast system */
#eh-toast-container{position:fixed;top:60px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:420px;pointer-events:none}
.eh-toast{pointer-events:auto;padding:12px 18px;border-radius:10px;font-size:14px;font-weight:700;line-height:1.4;cursor:pointer;animation:eh-slide-in .25s ease-out;box-shadow:0 4px 20px rgba(0,0,0,.5);word-break:break-word}
.eh-toast strong{margin-right:6px}
.eh-toast-error{background:#d32f2f;color:#fff;border:2px solid #b71c1c}
.eh-toast-warning{background:#f57f17;color:#000;border:2px solid #e65100}
.eh-toast-success{background:#2e7d32;color:#fff;border:2px solid #1b5e20}
.eh-toast-info{background:#1565c0;color:#fff;border:2px solid #0d47a1}
.eh-toast-fade{opacity:0;transition:opacity .3s}
@keyframes eh-slide-in{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* System Errors dashboard */
.err-stats-bar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.err-stat-card{flex:1;min-width:120px;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12);border-radius:10px;padding:14px;text-align:center}
.err-stat-card h3{font-size:12px;text-transform:uppercase;opacity:.6;margin:0 0 6px}
.err-stat-card .err-stat-num{font-size:28px;font-weight:1000}
.err-stat-card.sev-error .err-stat-num{color:#ef5350}
.err-stat-card.sev-warning .err-stat-num{color:#ffa726}
.err-stat-card.sev-critical .err-stat-num{color:#ff1744}
.err-table{width:100%;border-collapse:collapse;font-size:14px}
.err-table th{text-align:left;padding:10px 12px;border-bottom:2px solid rgba(255,255,255,.2);font-weight:900;font-size:12px;text-transform:uppercase;opacity:.7}
.err-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
.err-table tr:hover td{background:rgba(255,255,255,.04)}
.err-table tr.expanded td{background:rgba(58,123,213,.1)}
.err-sev{display:inline-block;padding:2px 8px;border-radius:6px;font-weight:900;font-size:12px;text-transform:uppercase}
.err-sev-critical{background:#ff1744;color:#fff}
.err-sev-error{background:#d32f2f;color:#fff}
.err-sev-warning{background:#f57f17;color:#000}
.err-sev-info{background:#1565c0;color:#fff}
.err-detail{padding:12px 16px;background:rgba(0,0,0,.3);border-radius:8px;margin:8px 0;font-size:13px;line-height:1.5}
.err-detail pre{white-space:pre-wrap;word-break:break-all;font-family:monospace;font-size:12px;margin:8px 0;padding:10px;background:rgba(0,0,0,.3);border-radius:6px;max-height:300px;overflow-y:auto}
.err-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.err-filters select,.err-filters input{padding:8px 12px;border-radius:8px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:14px;font-weight:700}
.err-purge-btn{padding:8px 16px;border-radius:8px;border:2px solid #d32f2f;background:rgba(211,47,47,.2);color:#ef5350;font-weight:900;cursor:pointer;font-size:13px}
.err-purge-btn:hover{background:#d32f2f;color:#fff}

/* ── Mockup / Planned Feature Indicators ── */
.mockup-section{position:relative;border:2px dashed rgba(157,135,80,.5);border-radius:14px;padding:16px;background:rgba(250,243,224,.06);overflow:hidden}
.mockup-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(135deg,transparent,transparent 20px,rgba(157,135,80,.03) 20px,rgba(157,135,80,.03) 40px);pointer-events:none;border-radius:14px}
.mockup-badge{display:inline-block;padding:4px 12px;border-radius:8px;font:900 11px Arial;text-transform:uppercase;letter-spacing:1px;background:linear-gradient(135deg,#e3d4b3,#d4c49e);color:#5a4a2e;border:2px solid #9d8750;cursor:pointer;transition:all .15s}
.mockup-badge:hover{background:linear-gradient(135deg,#f5e6c8,#e3d4b3);transform:scale(1.05);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.mockup-gauge{display:inline-flex;flex-direction:column;align-items:center;gap:4px;padding:12px;border-radius:12px;background:rgba(0,0,0,.2);min-width:100px}
.mockup-gauge-label{font:900 11px Arial;text-transform:uppercase;opacity:.7}
.mockup-gauge-value{font:900 28px Arial}
.mockup-gauge-unit{font:700 12px Arial;opacity:.6}
.mockup-camera{background:#0a0a0a;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border:2px solid #333}
.mockup-camera::after{content:'';position:absolute;top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border:2px solid rgba(255,255,255,.15);border-radius:50%}
.mockup-camera::before{content:'+';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:300 48px Arial;color:rgba(255,255,255,.1)}
.mockup-camera-label{color:rgba(255,255,255,.3);font:900 14px Arial;text-transform:uppercase;letter-spacing:2px;z-index:1}
.mockup-indicator{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font:900 13px Arial;background:rgba(0,0,0,.25)}
.mockup-indicator-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.mockup-indicator-dot.green{background:#4caf50;box-shadow:0 0 6px #4caf50}
.mockup-indicator-dot.amber{background:#ff9800;box-shadow:0 0 6px #ff9800}
.mockup-indicator-dot.red{background:#f44336;box-shadow:0 0 6px #f44336}
.mockup-indicator-dot.off{background:#555}
.mockup-msg{border-radius:12px;padding:14px;background:rgba(58,123,213,.1);border:2px solid rgba(58,123,213,.3);margin-bottom:10px}
.mockup-msg-from{font:900 12px Arial;color:#3a7bd5;margin-bottom:6px}
.mockup-msg-body{font:700 14px Arial;line-height:1.5}

@media print{
  .cmd-bar,.nav-overlay,.breadcrumb-bar{display:none!important}
  .app-content{padding-top:0!important}
  .content{padding:0!important}
  body{background:#fff!important;color:#000!important}
  .page-header h1{font-size:22pt;color:#000}
  .page-header p{color:#333}
  .page-card,.placeholder{background:none!important;border:none!important;box-shadow:none!important;padding:0!important}
  a{color:#000!important}
  img{page-break-inside:avoid;max-width:100%!important}
}