*{margin:0;padding:0;box-sizing:border-box}

/* === Theme variables === */
:root{
  --bg-body:#0f172a;--bg-surface:#1e293b;--bg-surface-hover:#253347;--bg-inset:#151d2e;--bg-cell:#0f172a;
  --border:#334155;--border-hover:#475569;
  --text-primary:#f1f5f9;--text-secondary:#e2e8f0;--text-muted:#b0bec5;--text-dim:#8494a7;
  --accent:#4f46e5;--accent-hover:#6366f1;
  --ok:#34d399;--warn:#fbbf24;--danger:#f87171;
  --st-online-bg:#065f46;--st-online-fg:#6ee7b7;
  --st-idle-bg:#1e3a5f;--st-idle-fg:#7dd3fc;
  --st-sleeping-bg:#78350f;--st-sleeping-fg:#fde68a;
  --st-offline-bg:#334155;--st-offline-fg:#cbd5e1;
}
[data-theme="light"]{
  --bg-body:#f1f5f9;--bg-surface:#ffffff;--bg-surface-hover:#f8fafc;--bg-inset:#e8ecf1;--bg-cell:#f1f5f9;
  --border:#d1d5db;--border-hover:#9ca3af;
  --text-primary:#0f172a;--text-secondary:#1e293b;--text-muted:#475569;--text-dim:#64748b;
  --ok:#16a34a;--warn:#d97706;--danger:#dc2626;
  --st-online-bg:#dcfce7;--st-online-fg:#166534;
  --st-idle-bg:#dbeafe;--st-idle-fg:#1e40af;
  --st-sleeping-bg:#fef3c7;--st-sleeping-fg:#92400e;
  --st-offline-bg:#e5e7eb;--st-offline-fg:#4b5563;
}

html,body{height:100%;overflow:hidden}
body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg-body);color:var(--text-primary);padding:0;font-size:clamp(13px,1.1vw,22px);transition:background 0.2s,color 0.2s;display:flex;flex-direction:column}

/* === Top bar === */
#topbar{display:flex;align-items:center;background:var(--bg-inset);padding:0 clamp(16px,2.5vw,40px);height:clamp(44px,6vh,72px);gap:clamp(10px,1.2vw,20px);flex-wrap:nowrap;border-bottom:1px solid var(--border)}
.topbar-title{font-size:clamp(16px,1.8vw,32px);font-weight:800;color:var(--text-primary);white-space:nowrap;letter-spacing:-0.3px}
.topbar-spacer{flex:1}
.topbar-stat{font-size:clamp(12px,1.4vw,24px);color:var(--text-muted);white-space:nowrap}
.topbar-stat b{color:var(--text-secondary);font-weight:600}
.topbar-sep{width:1px;height:clamp(18px,2.5vh,32px);background:var(--border)}
.topbar-clock{font-family:'SF Mono',Monaco,Consolas,monospace;font-size:clamp(12px,1.4vw,24px);color:var(--text-muted);letter-spacing:0.5px}
/* Lamp indicator */
.topbar-lamp{width:clamp(10px,1.1vw,16px);height:clamp(10px,1.1vw,16px);border-radius:50%;display:inline-block;transition:opacity 0.3s ease}
.lamp-ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.lamp-alert{background:var(--danger);box-shadow:0 0 10px var(--danger)}
.lamp-off{background:var(--text-dim);box-shadow:none}
.lamp-dim{opacity:0.2}

.topbar-config{font-size:clamp(20px,2vw,36px);color:var(--text-muted);cursor:pointer;border:none;background:none;transition:color 0.15s;white-space:nowrap;line-height:1;padding:0}
.topbar-config:hover{color:var(--text-primary)}

/* === Fleet tabs (content area, underline style) === */
#fleet-tabs{display:flex;align-items:center;padding:clamp(14px,2vw,28px) clamp(16px,2.5vw,40px) 0;gap:clamp(8px,1vw,16px);flex-wrap:wrap}
.fleet-tab{font-size:clamp(14px,1.4vw,26px);font-weight:500;padding:clamp(6px,0.6vw,10px) clamp(4px,0.4vw,8px);color:var(--fleet-color,var(--text-dim));cursor:pointer;border:none;background:none;transition:all 0.15s;white-space:nowrap;border-bottom:2px solid transparent}
.fleet-tab:hover{border-bottom-color:var(--fleet-color,var(--text-dim))}
.fleet-tab.active{font-weight:700;border-bottom-color:var(--fleet-color,currentColor)}
.fleet-tab-wrap{display:inline-flex;align-items:center;gap:2px}
.fleet-cfg-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:clamp(14px,1.2vw,20px);padding:4px 6px;opacity:0.4;transition:opacity 0.15s}
.fleet-tab-wrap:hover .fleet-cfg-btn{opacity:1}
.fleet-cfg-btn:hover{color:var(--text-primary)}
.fleet-add-btn{opacity:0.5;font-size:clamp(16px,1.6vw,28px)!important;padding:clamp(4px,0.4vw,8px)!important}
.fleet-add-btn:hover{opacity:1}

/* === Layout === */
#app{padding:0 clamp(16px,2.5vw,40px);flex:1;overflow:auto;min-height:0}
.view-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.view-title{font-size:clamp(16px,1.6vw,28px);font-weight:700}
.view-subtitle{font-size:clamp(11px,0.9vw,16px);color:#64748b}

/* === Summary Card (fleet view) === */
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,20px);padding-top:clamp(10px,1.2vw,20px)}
@media(max-width:900px){.summary-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:550px){.summary-grid{grid-template-columns:1fr}}
.summary-card{background:var(--bg-surface);border-radius:clamp(8px,0.8vw,14px);padding:clamp(14px,1.5vw,24px);cursor:pointer;transition:all 0.15s;border:1px solid var(--border)}
.summary-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.15);filter:brightness(1.05)}

/* Card lamp */
.sc-lamp{width:clamp(8px,0.8vw,12px);height:clamp(8px,0.8vw,12px);border-radius:50%;display:inline-block;flex-shrink:0;transition:opacity 0.3s ease}
.sc-lamp-online{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.sc-lamp-idle{background:#38bdf8;box-shadow:0 0 6px #38bdf8}
.sc-lamp-sleeping{background:var(--warn);box-shadow:0 0 4px var(--warn)}
.sc-lamp-offline{background:var(--text-dim);box-shadow:none}
.sc-lamp-dim{opacity:0.15}
.sc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:clamp(8px,1vw,14px)}
.sc-name{display:flex;align-items:center;gap:clamp(6px,0.6vw,12px);flex-wrap:wrap;min-width:0;flex:1}
.sc-alias{font-weight:700;font-size:clamp(15px,1.6vw,30px);word-break:break-word}
.sc-did{font-size:clamp(10px,0.9vw,16px);color:var(--text-dim);font-family:'SF Mono',Monaco,Consolas,monospace}
.sc-stats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,0.6vw,12px) clamp(14px,1.8vw,28px)}
.sc-stat{display:flex;justify-content:space-between;align-items:center}
.sc-stat-label{font-size:clamp(12px,1.1vw,20px);color:var(--text-muted)}
.sc-stat-val{font-size:clamp(16px,1.5vw,28px);font-weight:600;color:var(--text-primary)}
.sc-stat-val.warn{color:var(--warn)}
.sc-stat-val.danger{color:var(--danger)}
.sc-stat-val.ok{color:var(--ok)}
.sc-footer{font-size:clamp(11px,0.9vw,16px);color:var(--text-dim);margin-top:clamp(8px,0.8vw,14px);padding-top:clamp(6px,0.6vw,12px);border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.sc-fleet{font-size:clamp(11px,1vw,16px);font-weight:700}

/* === Device Detail (tab-based) === */
.dev-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid #334155;padding-bottom:0}
.dev-tab{font-size:12px;font-weight:500;padding:8px 16px;color:#94a3b8;cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:all 0.15s;margin-bottom:-1px}
.dev-tab:hover{color:#e2e8f0}
.dev-tab.active{color:#e0e7ff;border-bottom-color:#4f46e5}
.dev-tab-content{display:none}
.dev-tab-content.active{display:block}

/* === Status badge === */
.status{font-size:clamp(11px,1vw,18px);font-weight:600;padding:clamp(2px,0.3vw,5px) clamp(8px,0.8vw,14px);border-radius:10px;white-space:nowrap;flex-shrink:0}
.st-online{background:var(--st-online-bg);color:var(--st-online-fg)}
.st-idle{background:var(--st-idle-bg);color:var(--st-idle-fg)}
.st-sleeping{background:var(--st-sleeping-bg);color:var(--st-sleeping-fg)}
.st-offline{background:var(--st-offline-bg);color:var(--st-offline-fg)}

/* === Device Card (detail view) === */
.no-dev{color:#475569;padding:40px;text-align:center;font-size:14px}
.dev{background:#1e293b;border-radius:12px;padding:16px;margin-bottom:16px}
.dev-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.status-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ble-badge{font-size:10px;font-weight:600;padding:2px 6px;border-radius:8px}
.ble-on{background:#1e3a5f;color:#7dd3fc}
.ble-off{background:#1c1917;color:#78716c}
.cmd-block{display:flex;gap:6px;align-items:center}
.cmd-btn{font-size:11px;font-weight:600;padding:6px 14px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:4px}
.cmd-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.cmd-btn:active{transform:translateY(0)}
.cmd-btn:disabled{background:#1e293b;color:#475569;border-color:#334155;cursor:default;transform:none;box-shadow:none}
.cmd-wake{background:#3730a3;color:#c7d2fe;border-color:#4f46e5}
.cmd-wake:hover{background:#4338ca}
.cmd-sleep{background:#78350f;color:#fde68a;border-color:#92400e}
.cmd-sleep:hover{background:#92400e}
.cmd-pending{background:#334155;color:#94a3b8;border-color:#475569;cursor:wait}
.cmd-manage{background:#1e293b;color:#94a3b8;border-color:#334155}.cmd-manage:hover{background:#334155;color:#e2e8f0}
.ts-info{font-size:10px;color:#64748b;margin-top:4px}
.section{margin-bottom:12px}
.section-title{font-size:10px;color:#475569;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;font-weight:600}
.row{display:flex;gap:8px;flex-wrap:wrap}
.cell{background:#0f172a;border-radius:6px;padding:8px 12px;min-width:100px;flex:1}
.cell-sm{flex:0 0 auto;min-width:80px}
.cl{font-size:9px;color:#64748b;text-transform:uppercase;letter-spacing:0.5px}
.cv{font-size:15px;margin-top:3px;font-weight:600}
.obj-summary{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#0f172a;border-radius:8px;margin-bottom:12px;flex-wrap:wrap}
.obj-total{font-weight:700;font-size:13px;margin-right:4px}
.lv-count{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px}
.lv3{background:#7f1d1d;color:#fca5a5}.lv2{background:#7c2d12;color:#fdba74}.lv1{background:#713f12;color:#fde68a}.lv0{background:#064e3b;color:#6ee7b7}
.dist-stats{font-size:11px;color:#94a3b8;margin-left:auto}
.obj-canvas-wrap{display:flex;justify-content:center;margin:8px 0 12px}
.obj-canvas-wrap canvas{border-radius:8px;border:1px solid var(--border);max-width:100%}
.bar-wrap{background:#0f172a;border-radius:4px;height:6px;margin-top:4px;overflow:hidden}
.bar{height:100%;border-radius:4px;transition:width 0.3s}
.bar-ok{background:#22d3ee}.bar-warn{background:#f59e0b}.bar-danger{background:#ef4444}
.alias-display{cursor:pointer;color:#e2e8f0;font-weight:700;font-size:13px}
.alias-display:hover{text-decoration:underline;text-decoration-color:#64748b}
.del-btn{background:none;border:none;color:#dc2626;cursor:pointer;padding:0 4px;font-size:14px;opacity:0.5;margin-left:4px}
.del-btn:hover{opacity:1}

/* === DI badges === */
.di-badge{font-size:10px;font-weight:600;padding:1px 6px;border-radius:8px;margin-right:3px}
.di-on{background:#065f46;color:#6ee7b7}.di-off{background:#1c1917;color:#78716c}.di-unknown{background:#1e293b;color:#475569}

/* === Timeline === */
.tl-wrap{margin-top:12px;position:relative}
.tl-labels{display:flex;justify-content:space-between;font-size:9px;color:#475569;margin-top:2px;padding:0 2px}
.tl-canvas{width:100%;display:block;border-radius:4px;cursor:crosshair}
.tl-status-canvas{width:100%;height:20px;display:block;border-radius:4px}
.tl-tooltip{position:absolute;background:#1e293b;border:1px solid #334155;border-radius:6px;padding:6px 10px;font-size:11px;color:#e2e8f0;pointer-events:none;white-space:nowrap;z-index:10;display:none;box-shadow:0 4px 12px rgba(0,0,0,0.4)}
.tl-tooltip .tt-time{color:#94a3b8;font-size:10px}
.tl-tooltip .tt-val{font-weight:600;margin-top:2px}
.tl-section-title{font-size:10px;color:#475569;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-weight:600;margin-top:10px}
.tl-legend{display:flex;gap:10px;font-size:9px;color:#64748b;margin-top:2px}
.tl-legend span{display:flex;align-items:center;gap:3px}
.tl-legend i{display:inline-block;width:8px;height:8px;border-radius:2px}

/* === Device Detail Modal === */
#device-modal{align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.device-modal-box{background:var(--bg-body);border-radius:14px;width:100%;max-width:860px;padding:24px;box-shadow:0 12px 48px rgba(0,0,0,0.4);border:1px solid var(--border);position:relative}
.dm-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.dm-back{background:none;border:1px solid #334155;color:#94a3b8;border-radius:6px;padding:4px 10px;cursor:pointer;font-size:14px;transition:all 0.15s}
.dm-back:hover{background:#1e293b;color:#e2e8f0}
.dm-alias{font-size:18px;font-weight:700}
.dm-did{font-size:11px;color:#64748b;font-family:'SF Mono',Monaco,Consolas,monospace}
.dm-fleet{font-size:11px;color:#94a3b8;background:#1e293b;padding:2px 8px;border-radius:4px}

/* === Modal === */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:100;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal-box{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:28px;min-width:400px;max-width:500px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.modal-title{font-weight:700;font-size:14px;color:var(--text-primary);margin-bottom:4px}
.modal-did{font-size:11px;color:var(--text-dim);margin-bottom:16px}
.modal-row{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.modal-btn{font-size:12px;font-weight:600;padding:10px 16px;border-radius:8px;border:1px solid;cursor:pointer;text-align:left;transition:all 0.15s}
.mbtn-kiosk{background:#1e3a5f;color:#7dd3fc;border-color:#2563eb}.mbtn-kiosk:hover{background:#1d4ed8}
.mbtn-home{background:#2e1065;color:#d8b4fe;border-color:#7c3aed}.mbtn-home:hover{background:#6d28d9}
.modal-close{background:#0f172a;color:#94a3b8;border:1px solid #334155;border-radius:6px;padding:6px 14px;cursor:pointer;font-size:12px;width:100%}
.modal-close:hover{background:#1e293b;color:#e2e8f0}
.modal-alias-wrap{margin-bottom:16px}
.modal-alias-label{font-size:11px;color:#94a3b8;margin-bottom:4px}
.modal-alias-row{display:flex;gap:6px}
.modal-alias-input{flex:1;border:1px solid #334155;background:#0f172a;color:#e2e8f0;border-radius:6px;padding:8px 12px;font-size:13px;outline:none}
.modal-alias-input:focus{border-color:#6366f1}
.modal-alias-btn{background:#4f46e5;color:#e0e7ff;border:none;border-radius:6px;padding:8px 14px;cursor:pointer;font-size:12px;font-weight:600}
.modal-alias-btn:hover{background:#6366f1}

/* === Config view === */
.cfg-panel{background:var(--bg-surface);border-radius:12px;padding:16px;margin-bottom:16px}
.cfg-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.cfg-label{font-size:12px;color:var(--text-muted);min-width:120px}
.cfg-input{background:var(--bg-cell);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;padding:6px 10px;width:80px;font-size:13px;text-align:right}
.cfg-input:focus{border-color:#6366f1;outline:none}
.cfg-unit{font-size:11px;color:var(--text-dim)}
.cfg-save{background:#4f46e5;color:#e0e7ff;border:none;border-radius:6px;padding:8px 18px;cursor:pointer;font-size:12px;font-weight:600;margin-top:4px}
.cfg-save:hover{background:#6366f1}
.cfg-msg{font-size:11px;color:var(--ok);margin-left:8px;opacity:0;transition:opacity 0.3s}
.cfg-theme-btn{background:var(--bg-cell);border:1px solid var(--border);color:var(--text-muted);border-radius:6px;padding:8px 16px;cursor:pointer;font-size:13px;transition:all 0.15s}
.cfg-theme-btn:hover{border-color:var(--border-hover);color:var(--text-primary)}
.cfg-theme-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* === Fleet management table === */
.fleet-table{width:100%;border-collapse:collapse;font-size:12px}
.fleet-table th{text-align:left;color:#94a3b8;font-weight:500;padding:8px;border-bottom:1px solid #334155}
.fleet-table td{padding:8px;border-bottom:1px solid #1e293b}
.fleet-select{background:#0f172a;border:1px solid #334155;color:#e2e8f0;border-radius:4px;padding:4px 8px;font-size:12px}
.fleet-select:focus{border-color:#6366f1;outline:none}

/* === Control grid (status tab inline controls) === */
.ctrl-grid{display:flex;flex-direction:column;gap:2px}
.ctrl-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#0f172a;border-radius:6px}
.ctrl-label{font-size:12px;color:#94a3b8;min-width:100px;font-weight:500}

/* === Login === */
#login-overlay{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;background:var(--bg-body);z-index:200}
.login-box{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:32px;width:320px;text-align:center}
.login-title{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.login-sub{font-size:12px;color:var(--text-dim);margin-bottom:24px}
.login-input{width:100%;background:var(--bg-cell);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;padding:10px 14px;font-size:14px;margin-bottom:10px;outline:none}
.login-input:focus{border-color:#6366f1}
.login-btn{width:100%;background:#4f46e5;color:#fff;border:none;border-radius:6px;padding:10px;font-size:14px;font-weight:600;cursor:pointer;transition:background 0.15s}
.login-btn:hover{background:#6366f1}
.login-error{color:#f87171;font-size:12px;margin-top:8px;display:none}

/* === Logs tab — calendar + detail layout === */
.logs-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,32px)}
@media(max-width:700px){.logs-layout{grid-template-columns:1fr}}

/* Calendar */
.cal-nav{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.5vw,24px);margin-bottom:clamp(8px,1vw,14px)}
.cal-nav-btn{background:none;border:1px solid var(--border);color:var(--text-muted);border-radius:6px;padding:clamp(4px,0.4vw,8px) clamp(10px,1vw,16px);cursor:pointer;font-size:clamp(14px,1.2vw,22px);transition:all 0.15s}
.cal-nav-btn:hover{border-color:var(--text-secondary);color:var(--text-primary)}
.cal-nav-btn:disabled{opacity:0.3;cursor:default}
.cal-nav-label{font-size:clamp(14px,1.3vw,22px);font-weight:700;color:var(--text-primary);min-width:clamp(80px,8vw,140px);text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(2px,0.3vw,4px)}
.cal-header{text-align:center;font-size:clamp(10px,0.8vw,13px);color:var(--text-dim);font-weight:500;padding:clamp(2px,0.3vw,4px) 0}
.cal-cell{background:var(--bg-cell);border:1px solid var(--border);border-radius:clamp(4px,0.4vw,8px);text-align:center;min-height:clamp(32px,3.5vw,56px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:default;transition:all 0.1s}
.cal-cell.empty{background:transparent;border:none}
.cal-day{font-size:clamp(11px,0.9vw,15px);color:var(--text-dim)}
.cal-cell.has-data{cursor:pointer}
.cal-cell.has-data:hover{border-color:var(--accent);transform:scale(1.05)}
.cal-cell.cal-done{background:color-mix(in srgb,var(--ok) 12%,var(--bg-cell));border-color:color-mix(in srgb,var(--ok) 25%,var(--border))}
.cal-cell.cal-done .cal-day{color:var(--text-secondary)}
.cal-cell.cal-pending{background:color-mix(in srgb,var(--warn) 12%,var(--bg-cell));border-color:color-mix(in srgb,var(--warn) 25%,var(--border))}
.cal-cell.cal-pending .cal-day{color:var(--text-secondary)}
.cal-cell.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.cal-legend{display:flex;gap:clamp(10px,1.2vw,20px);margin-top:clamp(6px,0.6vw,10px);font-size:clamp(10px,0.8vw,13px);color:var(--text-dim)}
.cal-leg-item{display:flex;align-items:center;gap:4px}
.cal-leg-box{width:clamp(10px,1vw,14px);height:clamp(10px,1vw,14px);border-radius:3px;border:1px solid var(--border);background:var(--bg-cell)}
.cal-leg-box.cal-done{background:color-mix(in srgb,var(--ok) 12%,var(--bg-cell));border-color:color-mix(in srgb,var(--ok) 25%,var(--border))}
.cal-leg-box.cal-pending{background:color-mix(in srgb,var(--warn) 12%,var(--bg-cell));border-color:color-mix(in srgb,var(--warn) 25%,var(--border))}
.cal-cell.cal-nodata{background:var(--bg-cell);border-color:var(--border);opacity:0.5}
.cal-cell.cal-nodata .cal-day{color:var(--text-dim)}
.cal-leg-box.cal-nodata{background:var(--bg-cell);border-color:var(--border);opacity:0.5}

/* Day detail (right side) */
.day-detail{min-height:200px}
.day-detail-empty{color:var(--text-dim);font-size:clamp(12px,1vw,16px);padding-top:clamp(20px,3vw,40px);text-align:center}
.day-detail-header{font-weight:700;font-size:clamp(14px,1.3vw,22px);color:var(--text-primary);margin-bottom:clamp(10px,1vw,16px)}
.day-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,0.6vw,10px)}
.day-detail-item{background:var(--bg-cell);border-radius:clamp(6px,0.5vw,8px);padding:clamp(10px,1vw,16px)}
.day-detail-label{font-size:clamp(10px,0.85vw,14px);color:var(--text-dim);margin-bottom:2px}
.day-detail-val{font-size:clamp(16px,1.5vw,26px);font-weight:700;color:var(--text-primary)}
.day-detail-sub{font-size:clamp(10px,0.8vw,13px);color:var(--text-muted);margin-top:2px}

/* === Fleet Layout (map + cards side by side) === */
/* === Fleet Layout (map + cards side by side) === */
#app:has(.fleet-layout){padding-bottom:0;overflow:hidden}
.fleet-layout{display:flex;gap:clamp(12px,1.5vw,24px);height:100%;overflow:hidden}
.fleet-map-col{flex:1;min-width:0;position:relative}
.fleet-map-col #live-map-canvas{width:100%;height:100%;border:1px solid var(--border);border-radius:8px;background:var(--bg-inset);display:block}
.fleet-cards-col{width:clamp(280px,28vw,400px);overflow-y:auto;flex-shrink:0}
.fleet-cards-col .summary-grid{display:flex;flex-direction:column;gap:clamp(8px,1vw,14px)}
/* map overlay controls */
.map-ctrl{position:absolute;display:flex;gap:4px;z-index:2}
.map-ctrl-tr{top:8px;right:8px}
.map-ctrl-btn{background:var(--bg-surface);color:var(--text-muted);border:1px solid var(--border);border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;opacity:0.85;transition:opacity 0.15s}
.map-ctrl-btn:hover{opacity:1}
.map-ctrl-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* === RAW tab === */
.debug-section{background:#0f172a;border-radius:8px;padding:12px;margin-bottom:12px;font-family:'SF Mono',Monaco,Consolas,monospace;font-size:11px;line-height:1.6}
.debug-label{color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
.debug-json{color:#94a3b8;white-space:pre-wrap;word-break:break-all;max-height:300px;overflow-y:auto}