/* Native panel styles are served by app_painel.py at /demo/painel.css.
   Only demo-specific layout and aliases belong here. */
body.demo-mode {
  --card-bg: var(--card);
  --text-main: var(--text);
  --grid: var(--border);
}
.demo-mode .demo-brand-wrap { display:flex; align-items:center; min-width:0; }
.demo-mode .brand img { height:32px; width:auto; flex-shrink:0; }
.demo-mode .brand div { font-size:15px; font-weight:800; color:white; }
.demo-mode .header-actions { gap:12px; }
.demo-mode .header-actions > a { color:white; font-weight:700; font-size:13px; }
.demo-mode .demo-tag { position:static; width:auto; height:auto; color:#cbd5e1; font-size:10px; padding:6px 12px; }
.demo-mode .layout { flex-wrap:nowrap; }
.demo-mode .main { padding:0; }
.demo-mode .sidebar { position:static; top:auto; overflow:visible; max-height:none; border-right:0; }
.demo-mode .workspace.menu-closed .sidebar { display:none !important; }
.demo-mode .sidebar .aside-heading { margin:0; }
.demo-mode .sidebar .aside-heading h2 { font-size:11px; font-weight:800; opacity:.6; }
.demo-mode .sidebar #preset { margin:0; height:auto; }
.demo-mode .sidebar .field-label { color:#94a3b8; font-size:10px; font-weight:700; }
.demo-mode .sidebar h3 { color:#94a3b8; }
.demo-mode .sidebar .config-group { border-color:rgba(255,255,255,.12); }
.demo-mode .sidebar summary { color:white; font-size:12px; min-height:42px; }
.demo-mode .sidebar summary svg, .demo-mode .sidebar #sensor-count { color:#94a3b8; }
.demo-mode .sidebar .setting-note { color:#cbd5e1; font-size:11px; }
.demo-mode .sidebar .module-list { display:flex; flex-direction:column; gap:8px; }
.demo-mode .sidebar .module-option { position:relative; background:rgba(255,255,255,.05); border:0; border-radius:10px; padding:10px; min-height:48px; gap:8px; }
.demo-mode .sidebar .module-option > span:first-of-type { flex:1; }
.demo-mode .sidebar .module-option small { color:#94a3b8; }
.demo-mode .sidebar .module-option svg { color:white; }
.demo-mode .sidebar .module-option:has(.demo-toggle-input) { padding-right:54px; }
.demo-mode .sidebar .demo-toggle-input { position:absolute; right:10px; width:40px; height:22px; opacity:0; margin:0; z-index:1; cursor:pointer; }
.demo-mode .sidebar .module-option .toggle { position:absolute; right:10px; flex:none; }
.demo-mode .demo-toggle-input:focus-visible + .toggle { outline:2px solid white; outline-offset:3px; }
.demo-mode .sidebar .icon-button { color:#cbd5e1; border-color:rgba(255,255,255,.2); }
.demo-mode .sidebar .aside-footer { border-color:rgba(255,255,255,.12); }
.demo-mode .sidebar .aside-footer button { color:white; border-color:rgba(255,255,255,.3); }
.demo-mode .sidebar .mount-option { color:white; font-size:11px; grid-template-columns:76px minmax(0,1fr); }
.demo-mode .sidebar .mount-option select { font-size:10px; padding:8px 4px; }
.demo-mode .sidebar input[type=number] { background:rgba(255,255,255,.1); color:white; border-color:rgba(255,255,255,.2); }
.demo-mode .page-heading { margin:0; }
.demo-mode .page-heading h1 { font-size:18px; font-weight:800; }
.demo-mode .eyebrow { display:none; }
.demo-mode .kpi-grid { margin:0; }
.demo-mode .kpi { min-height:104px; gap:0; }
.demo-mode .kpi[aria-pressed=true] { box-shadow:0 4px 20px rgba(0,0,0,.04); border-color:var(--border); }
.demo-mode .kpi-label { text-transform:uppercase; font-size:12px; font-weight:700; color:var(--muted); }
.demo-mode .kpi-head .kpi-ico { flex:none; }
.demo-mode .kpi-head .kpi-ico svg { color:var(--moss); width:19px; height:19px; }
[data-theme=dark].demo-mode .kpi-head .kpi-ico svg { color:var(--text); }
.demo-mode .kpi-value { line-height:1.4; }
.demo-mode .bench-grid { gap:15px; border:0; background:transparent; margin:0; }
.demo-mode .process-section, .demo-mode .assembly, .demo-mode .telemetry { background:var(--card); border:0; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,.04); overflow:hidden; }
.demo-mode .section-heading h2 { font-size:14px; font-weight:800; }
.demo-mode .lower-grid { border:0; }
.demo-mode .event-section { margin:0; }
.demo-mode .footer { display:block; text-align:center; }
.demo-mode .footer span { display:block; font-size:10px; margin-top:5px; }
.demo-mode .manual-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:16px 20px; border-top:1px solid var(--border); }
.demo-mode .manual-controls[hidden] { display:none; }
.demo-mode .manual-controls > div { margin-right:auto; }
.demo-mode .manual-controls b { font-size:13px; }
.demo-mode .manual-controls span { display:block; color:var(--muted); font-size:11px; margin-top:4px; font-variant-numeric:tabular-nums; }
.demo-mode .manual-controls label { display:flex; align-items:center; gap:8px; font-size:10px; color:var(--muted); }
.demo-mode .manual-controls input { width:72px; }
.demo-mode .manual-controls button { font-size:11px; }
.demo-mode .circuit-points { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); border-top:1px solid var(--border); padding-top:8px; }
.demo-mode .circuit-points button { min-width:0; }
.demo-mode .circuit-points button strong { display:block; font-size:14px; color:var(--text); font-variant-numeric:tabular-nums; }
.demo-mode .circuit-points button[aria-pressed=true] { background:var(--bg); }
.demo-mode #feed-source { font-size:12px; }
.demo-mode .metric-group { min-width:0; margin:0; padding:0; border:0; display:flex; flex-direction:column; gap:8px; }
.demo-mode .metric-group + .metric-group { margin-top:16px; }
.demo-mode .metric-group legend { float:left; width:100%; color:#a8b7ae; font-size:11px; font-weight:700; margin-bottom:8px; }
.demo-mode .module-option > span:first-of-type { min-width:0; overflow-wrap:anywhere; line-height:1.45; }
.demo-mode .kpi-label { text-transform:none; }
.demo-mode .product-caption { text-align:center; font-size:13px; font-weight:700; padding:8px 12px 4px; }
.demo-mode #product { aspect-ratio:720/520; }
@media(max-width:1100px) { .demo-mode .product-caption { grid-column:2; text-align:left; padding-left:16px; } }
@media(max-width:950px) {
  .demo-mode #product { grid-row:2 / 5; align-self:start; }
  .demo-mode .product-caption { grid-row:2; }
  .demo-mode .assembly-caption { grid-column:2; grid-row:3; }
  .demo-mode .parts { grid-column:2; grid-row:4; }
}
.demo-mode .assembly[hidden] { display:none; }
.demo-mode .bench-grid:has(.assembly[hidden]) { grid-template-columns:minmax(0,1fr); }
@media(max-width:900px) {
  .demo-mode .layout { flex-wrap:wrap; }
  .demo-mode .sidebar { width:100%; display:flex; }
  .demo-mode .main { width:100%; }
  .demo-mode .page-heading { flex-direction:column; align-items:flex-start; }
  .demo-mode .bench-grid { grid-template-columns:minmax(0,1fr); }
  .demo-mode .demo-tag { font-size:9px; padding:4px 8px; }
  .demo-mode .header-actions { gap:7px; }
}
@media(max-width:600px) {
  .demo-mode .header-actions .demo-tag { display:none; }
  .demo-mode .page-heading h1::after { content:'DEMO'; margin-left:8px; font-size:10px; color:var(--muted); vertical-align:middle; }
  .demo-mode .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demo-mode .kpi { padding:12px; min-width:0; }
  .demo-mode .kpi-label { font-size:10px; gap:7px; }
  .demo-mode .kpi-val { font-size:24px; }
}