:root{
  /* =========================
     COLOR / UI
  ========================= */
  --bg:#03070a;
  --panel:#070d11;
  --panel-alt:#0a1117;
  --line:#16303c;
  --line-soft:#0d2028;

  --text:#f2f7f8;
  --muted:#72828a;

  --cyan:#29d7f2;
  --green:#48e09c;
  --yellow:#ffd14a;
  --orange:#ff9e3d;
  --red:#ff4d62;
  --magenta:#ff58c8;

  --radius:0px;
  --gap:12px;
  --max-width:1600px;

  /* =========================
     TYPOGRAPHY
  ========================= */
  --font-main:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Text hierarchy */
  --text-h1:44px;
  --text-h2:18px;
  --text-h3:13px;
  --text-body:12px;
  --text-small:11px;
  --text-micro:10px;

  /* Data hierarchy */
  --data-xl:52px;
  --data-lg:46px;
  --data-md:28px;
  --data-sm:18px;

  /* Font weights */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-heavy:700;

  /* Line heights */
  --lh-tight:.95;
  --lh-heading:1.1;
  --lh-body:1.45;
  --lh-small:1.35;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{
  font-family:var(--font-main);
  background:
    linear-gradient(rgba(18,57,68,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,57,68,.09) 1px, transparent 1px),
    var(--bg);
  background-size:40px 40px;
}

/* =========================
   GLOBAL TYPE SYSTEM
========================= */
h1,.type-h1{
  font-size:var(--text-h1);
  font-weight:var(--weight-heavy);
  line-height:var(--lh-tight);
  letter-spacing:-.045em;
}

h2,.type-h2{
  font-size:var(--text-h2);
  font-weight:var(--weight-bold);
  line-height:var(--lh-heading);
}

h3,.type-h3{
  font-size:var(--text-h3);
  font-weight:var(--weight-bold);
  line-height:1.2;
}

.type-body{
  font-size:var(--text-body);
  font-weight:var(--weight-regular);
  line-height:var(--lh-body);
}

.type-small{
  font-size:var(--text-small);
  font-weight:var(--weight-regular);
  line-height:var(--lh-small);
}

.type-micro{
  font-size:var(--text-micro);
  font-weight:var(--weight-medium);
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.data-xl{
  font-size:var(--data-xl);
  font-weight:var(--weight-heavy);
  line-height:1;
  letter-spacing:-.05em;
}

.data-lg{
  font-size:var(--data-lg);
  font-weight:var(--weight-heavy);
  line-height:1;
  letter-spacing:-.045em;
}

.data-md{
  font-size:var(--data-md);
  font-weight:var(--weight-bold);
  line-height:1;
  letter-spacing:-.035em;
}

.data-sm{
  font-size:var(--data-sm);
  font-weight:var(--weight-bold);
  line-height:1.1;
}

.wrap{max-width:var(--max-width);margin:auto;padding:24px}

.topbar{
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:end;
  padding:12px 0 20px;
  border-bottom:1px solid var(--line);
  margin-bottom:14px;
}
.kicker{color:var(--cyan);font-size:var(--text-small);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:.2em;margin-bottom:5px}
h1{margin:0;font-size:var(--text-h1);line-height:var(--lh-tight);letter-spacing:-.045em;font-weight:var(--weight-heavy)}
.coords{margin-top:7px;color:var(--muted);font-size:var(--text-body)}

.top-actions{
  display:flex;
  align-items:stretch;
  gap:8px;
}
.customize-btn{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  min-width:110px;
  padding:0 14px;
  cursor:pointer;
  font:inherit;
  font-size:var(--text-small);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.customize-btn.active{
  color:var(--cyan);
  border-color:var(--cyan);
}
.reset-btn{
  display:none;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  padding:0 12px;
  cursor:pointer;
  font:inherit;
  font-size:var(--text-small);
}
body.customizing .reset-btn{display:block}

.alert-link{color:inherit;text-decoration:none}
.alert-card{
  min-width:300px;
  padding:13px 16px;
  border:1px solid var(--line);
  background:rgba(7,13,17,.88);
  display:flex;
  align-items:center;
  gap:12px
}
.alert-dot{width:13px;height:13px;border-radius:50%;background:var(--yellow);box-shadow:0 0 18px rgba(255,209,74,.75)}
.alert-label{font-weight:var(--weight-bold);font-size:var(--text-h2)}
.alert-source{color:var(--muted);font-size:var(--text-small);margin-top:2px}
.alert-updated{color:var(--muted);font-size:var(--text-small);margin-top:5px}

/* Equal square 3-column dashboard */
.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
  align-items:start;
}
.module{
  aspect-ratio:1 / 1;
  background:rgba(7,13,17,.96);
  border:1px solid var(--line);
  border-radius:var(--radius);
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.module-head{
  flex:0 0 48px;
  border-bottom:1px solid var(--line-soft);
  padding:11px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  user-select:none;
}
.module-title{font-size:var(--text-h3);font-weight:var(--weight-bold)}
.module-meta{color:var(--muted);font-size:var(--text-micro);font-weight:var(--weight-medium);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.module-body{flex:1;min-height:0;overflow:hidden;position:relative}
.module-foot{
  flex:0 0 42px;
  border-top:1px solid var(--line-soft);
  padding:10px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:var(--text-small);
}
.updated{white-space:nowrap}
.source-link{color:var(--cyan);text-decoration:none}
.source-link:hover{text-decoration:underline}
.status-live{color:var(--green)}
.status-live::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--green);box-shadow:0 0 10px var(--green);
  margin-right:7px;vertical-align:1px
}

/* drag mode */
body.customizing .module-head{
  cursor:grab;
  background:rgba(41,215,242,.035);
}
body.customizing .module-head::before{
  content:"⋮⋮";
  color:var(--cyan);
  letter-spacing:-3px;
  margin-right:8px;
  font-size:14px;
}
.sortable-ghost{
  opacity:.25;
  outline:1px dashed var(--cyan);
}
.sortable-chosen{
  outline:1px solid var(--cyan);
}
.sortable-drag{
  opacity:.95;
}

/* camera */
.camera-stage{
  position:absolute;inset:0;
  background:#000;
  overflow:hidden;
}
.camera-stage img,.camera-stage iframe{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;object-fit:cover;
}
.cam-overlay{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:space-between;align-items:end;
  padding:45px 14px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  pointer-events:none
}
.cam-name{font-size:var(--text-body);font-weight:var(--weight-bold)}
.cam-source{font-size:var(--text-micro);color:#b3c0c5;margin-top:3px;text-transform:uppercase;letter-spacing:.1em}
.cam-nav{
  position:absolute;left:10px;right:10px;top:50%;
  transform:translateY(-50%);
  display:flex;justify-content:space-between;
  pointer-events:none
}
.cam-nav button{
  pointer-events:auto;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.58);
  color:#fff;font-size:20px;cursor:pointer
}
.cam-dots{display:flex;gap:6px;align-items:center}
.cam-dot{
  width:6px;height:6px;border-radius:50%;
  border:0;padding:0;background:#46545b;cursor:pointer
}
.cam-dot.active{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

/* shake */
.shake-stage{position:absolute;inset:0;background:#020609}
#shakeCanvas{width:100%;height:100%;display:block}
.shake-time{
  position:absolute;left:12px;right:12px;bottom:9px;
  display:flex;justify-content:space-between;
  color:#5d7079;font-size:var(--text-micro);pointer-events:none
}
.shake-label{
  position:absolute;top:12px;left:13px;
  color:#6b7d85;font-size:var(--text-micro);
  letter-spacing:.12em;text-transform:uppercase
}

/* activity */
.activity-main{height:100%;padding:18px;overflow:auto}
.activity-level{font-size:var(--text-h3);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.11em;color:var(--cyan)}
.activity-ratio{font-size:var(--data-xl);font-weight:var(--weight-heavy);letter-spacing:-.05em;margin-top:6px}
.activity-caption{color:var(--muted);font-size:var(--text-small);margin-top:3px}
.activity-scale{height:8px;background:#0e1b21;margin:18px 0 9px;position:relative;overflow:hidden}
.activity-scale-fill{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red));transition:width .35s ease}
.activity-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);margin-top:13px}
.activity-stat{background:var(--panel);padding:11px}
.activity-stat b{display:block;font-size:var(--data-sm);font-weight:var(--weight-bold)}
.activity-stat span{display:block;color:var(--muted);font-size:var(--text-micro);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.activity-warning{margin-top:13px;font-size:var(--text-micro);line-height:var(--lh-body);color:var(--muted)}

/* weather */
.metric-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  height:100%;
}
.metric{
  padding:13px 14px;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.metric:nth-child(2n){border-right:0}
.metric-value{font-size:var(--data-md);font-weight:var(--weight-bold);letter-spacing:-.035em}
.metric-label{margin-top:5px;font-size:var(--text-micro);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}

/* thermal */
.thermal-main{height:100%;padding:20px 18px;overflow:auto}
.vrp{font-size:var(--data-lg);font-weight:var(--weight-heavy);letter-spacing:-.045em;color:var(--magenta)}
.thermal-state{font-size:var(--text-body);margin-top:8px;line-height:var(--lh-body);color:#b0bcc1}
.thermal-detail{font-size:var(--text-small);color:var(--muted);line-height:1.7;margin-top:14px}

/* iframe modules */
.frame-fill{
  position:absolute;inset:0;
  background:#000;
}
.frame-fill iframe{width:100%;height:100%;border:0}
.infrasound-frame{background:#fff}
.infrasound-frame iframe{filter:brightness(1.65) contrast(.88)}

/* summary */
.summary-body{height:100%;padding:14px 16px;overflow:auto}
.summary-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:12px 0;
  border-bottom:1px solid var(--line-soft)
}
.summary-row:last-child{border-bottom:0}
.summary-label{color:var(--muted);font-size:var(--text-micro);text-transform:uppercase;letter-spacing:.08em}
.summary-value{font-weight:var(--weight-bold);font-size:var(--text-body);text-align:right}

.footer{
  margin-top:14px;
  border-top:1px solid var(--line);
  padding-top:12px;
  color:#5e6e75;
  font-size:var(--text-micro);
  line-height:1.5
}

@media(max-width:1100px){
  .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .wrap{padding:14px}
  .topbar{grid-template-columns:1fr}
  .top-actions{flex-wrap:wrap}
  .alert-card{min-width:0}
  h1{font-size:36px}
  .dashboard-grid{grid-template-columns:1fr}
  .module{aspect-ratio:auto;min-height:420px}
}