:root{
  --bg:#111217;
  --panel-bg:#181b1f;
  --panel-border:#2c3235;
  --text:#d8d9da;
  --text-secondary:#9fa7b3;
  --text-faint:#6e7681;
  --green:#73bf69;
  --red:#f2495c;
  --orange:#ff780a;
  --yellow:#e0b400;
  --blue:#5794f2;
  --lightblue:#8ab8ff;
  --purple:#b877d9;
  --teal:#33a2c1;
  --grey:#4b535b;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:11px 22px;border-bottom:1px solid var(--panel-border);background:#141619;}
.topbar .brand{display:flex;align-items:center;gap:11px;}
.topbar .logo{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#33a2c1,#5794f2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#0b0c0e;flex:none;}
.topbar .crumbs{font-size:13.5px;color:var(--text-secondary);line-height:1.3;}
.topbar .crumbs .dt{font-size:16px;color:var(--text);font-weight:600;}
.topbar .crumbs .sub{font-size:12px;color:var(--text-faint);margin-top:1px;}
.topbar .controls{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--text-secondary);}
.pill{border:1px solid var(--panel-border);border-radius:4px;padding:5px 10px;background:#1f2226;display:flex;align-items:center;gap:6px;}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(115,191,105,.18);}
.dash-wrap{padding:14px 22px 46px;max-width:1660px;margin:0 auto;}
.row-header{display:flex;align-items:baseline;gap:10px;margin:24px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--panel-border);}
.row-header:first-of-type{margin-top:6px;}
.row-header .rt{font-size:13.5px;font-weight:600;color:var(--text);letter-spacing:.2px;}
.row-header .rs{font-size:11.5px;color:var(--text-faint);}
.grid{display:grid;grid-template-columns:repeat(24,1fr);gap:8px;}
.panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:3px;display:flex;flex-direction:column;min-width:0;overflow:hidden;}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:7px 10px 2px;flex:none;}
.panel-title{font-size:12px;color:#d8d9da;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;}
.panel-title .ic{flex:none;opacity:.72;}
.panel-menu{color:#6e7681;font-size:13px;letter-spacing:1px;}
.panel-body{flex:1;padding:2px 12px 12px;display:flex;flex-direction:column;justify-content:center;min-height:0;}
.panel.pad-sm .panel-body{padding:2px 10px 10px;}

/* stat */
.stat-body{display:flex;flex-direction:column;justify-content:center;height:100%;}
.stat-value-row{display:flex;align-items:baseline;gap:6px;}
.stat-value{font-size:30px;font-weight:600;line-height:1.05;}
.stat-unit{font-size:13px;font-weight:400;color:var(--text-secondary);}
.stat-name{font-size:11.5px;color:var(--text-secondary);margin-top:5px;}
.stat-sub{font-size:11.5px;color:var(--text-secondary);margin-top:6px;display:flex;align-items:center;gap:5px;}
.stat-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 7px;border-radius:10px;background:rgba(255,255,255,.06);color:var(--text-secondary);width:fit-content;margin-top:6px;}
.panel.solid{border-color:transparent;}
.panel.solid .panel-title, .panel.solid .panel-menu{color:rgba(11,12,14,.72);}
.panel.solid .stat-value{color:#0b0c0e;}
.panel.solid .stat-unit,.panel.solid .stat-name,.panel.solid .stat-sub{color:rgba(11,12,14,.68);}
.c-green{color:var(--green);} .c-red{color:var(--red);} .c-orange{color:var(--orange);}
.c-yellow{color:var(--yellow);} .c-blue{color:var(--blue);} .c-purple{color:var(--purple);}
.c-lightblue{color:var(--lightblue);} .c-teal{color:var(--teal);} .c-grey{color:var(--text-secondary);}
.bg-green{background:var(--green);} .bg-red{background:var(--red);} .bg-orange{background:var(--orange);}
.bg-yellow{background:var(--yellow);} .bg-blue{background:var(--blue);} .bg-purple{background:var(--purple);}
.bg-teal{background:var(--teal);} .bg-grey{background:#3a4046;}

/* gauge */
.gauge-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding-top:2px;}
.gauge-value{font-size:22px;font-weight:600;margin-top:-30px;}
.gauge-unit{font-size:11px;color:var(--text-secondary);font-weight:400;}
.gauge-label{font-size:11px;color:var(--text-secondary);margin-top:2px;text-align:center;}

/* timeseries */
.ts-legend{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;font-size:11px;color:var(--text-secondary);margin-top:4px;padding-top:6px;border-top:1px solid var(--panel-border);}
.ts-legend .li{display:flex;align-items:center;gap:5px;}
.ts-legend .sw{width:8px;height:8px;border-radius:2px;flex:none;}
.ts-legend b{color:var(--text);font-weight:500;}

/* donut */
.donut-wrap{display:flex;align-items:center;gap:16px;height:100%;justify-content:center;}
.donut{width:104px;height:104px;border-radius:50%;position:relative;flex:none;}
.donut::after{content:"";position:absolute;inset:19px;background:var(--panel-bg);border-radius:50%;}
.donut-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:2;}
.donut-center b{font-size:15px;}
.donut-center span{font-size:9.5px;color:var(--text-faint);}
.donut-legend{display:flex;flex-direction:column;gap:7px;font-size:12px;}
.donut-legend .li{display:flex;align-items:center;gap:7px;}
.donut-legend .sw{width:10px;height:10px;border-radius:2px;flex:none;}
.donut-legend .val{color:var(--text-secondary);font-variant-numeric:tabular-nums;}

/* state timeline (bool sensors) */
.state-row{display:flex;align-items:center;gap:10px;padding:5px 0;}
.state-name{font-size:12px;width:150px;flex:none;color:var(--text);}
.state-bar{flex:1;height:16px;border-radius:3px;overflow:hidden;display:flex;background:#22262a;}
.state-seg{height:100%;}
.state-badge{width:96px;flex:none;text-align:right;font-size:11px;font-weight:600;}
.state-times{display:flex;justify-content:space-between;font-size:10px;color:var(--text-faint);margin-top:6px;}

/* table */
table.gtable{width:100%;border-collapse:collapse;font-size:12px;}
table.gtable th{text-align:left;color:var(--text-faint);font-weight:500;font-size:11px;padding:5px 8px;border-bottom:1px solid var(--panel-border);}
table.gtable td{padding:6px 8px;border-bottom:1px solid #202327;color:var(--text-secondary);}
table.gtable tr:last-child td{border-bottom:none;}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:1px 8px;border-radius:9px;font-weight:600;}
.badge .d{width:6px;height:6px;border-radius:50%;}
.badge.ok{background:rgba(115,191,105,.14);color:var(--green);}
.badge.warn{background:rgba(255,120,10,.14);color:var(--orange);}
.badge.crit{background:rgba(242,73,92,.14);color:var(--red);}
.badge.info{background:rgba(87,148,242,.14);color:var(--blue);}

/* map-like panel */
.map-panel{position:relative;height:100%;min-height:210px;border-radius:2px;overflow:hidden;background:
  radial-gradient(ellipse at 30% 20%,#182a33 0%,#0f1b21 55%,#0c1418 100%);}
.map-grid{position:absolute;inset:0;background-image:
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:34px 34px;}
.map-coast{position:absolute;inset:0;}
.map-pin{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 6px rgba(51,162,193,.25),0 0 0 1px rgba(255,255,255,.4);}
.map-pin.locked{background:var(--text-faint);}
.map-track{position:absolute;stroke:var(--teal);stroke-width:2;fill:none;stroke-dasharray:4 3;opacity:.85;}
.map-caption{position:absolute;left:10px;bottom:8px;font-size:11px;color:var(--text-secondary);background:rgba(10,12,14,.55);padding:4px 8px;border-radius:3px;display:flex;align-items:center;gap:6px;}
.map-caption .ic{opacity:.8;}
.privacy-note{position:absolute;top:8px;right:8px;font-size:10.5px;color:var(--text-faint);background:rgba(10,12,14,.55);padding:3px 8px;border-radius:9px;display:flex;align-items:center;gap:5px;}

.foot{margin-top:30px;padding-top:14px;border-top:1px solid var(--panel-border);font-size:11px;color:var(--text-faint);display:flex;justify-content:space-between;}