/* HERO (index.php) */
.hero { min-height: 310px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.eyebrow { margin: 0 0 8px; color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: 0.19em; }
.hero h1 { font: 500 clamp(35px, 5vw, 70px)/1.03 Georgia, serif; margin: 0; letter-spacing: -0.03em; }
.hero h1 em { color: var(--cyan); font-weight: 400; }
.lede { color: var(--muted); max-width: 670px; font-size: 17px; }
.clock { border-left: 1px solid var(--line); padding: 24px 0 24px 32px; display: flex; flex-direction: column; min-width: 250px; }
.clock span, .clock small { color: var(--muted); }
.clock strong { font: 400 25px Georgia, serif; margin: 6px 0; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: #09151b; }
.metrics article { padding: 22px 25px; border-right: 1px solid var(--line); }
.metrics article:last-child { border: 0; }
.metrics span, .metrics small { display: block; color: var(--muted); }
.metrics strong { font: 400 34px Georgia, serif; color: var(--lime); }
@media (max-width: 900px) {
  .hero { align-items: flex-start; flex-direction: column; padding: 70px 0 35px; }
  .clock { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0; width: 100%; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metrics article:nth-child(2) { border-right: 0; }
}
@media (max-width: 520px) {
  .metrics { grid-template-columns: 1fr; }
  .metrics article { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* LEAFLET MAP */
.map { height: 590px; position: relative; overflow: hidden; background: radial-gradient(circle at 47% 46%, #18303a, #081318 68%); }
#map.map { height: 590px; background: #d8e1e4; isolation: isolate; }
.leaflet-container { font: 13px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; }
.leaflet-control-zoom a { background: #0b171d; color: var(--ink); border-color: var(--line); }
.leaflet-control-zoom a:hover { background: #17303a; color: var(--cyan); }
.leaflet-control-attribution { background: #071015d9 !important; color: #91a3ac; }
.leaflet-control-attribution a { color: var(--cyan); }
.leaflet-control-scale-line { background: #071015c9; border-color: #91a3ac; color: var(--ink); }
.map-legend { display: flex; gap: 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 3px; background: #071015e8; color: var(--muted); font-size: 11px; box-shadow: 0 4px 20px #0006; }
@media (max-width: 900px) { .map, #map.map { height: 480px; } }
@media (max-width: 520px) { .map, #map.map { height: 420px; } .map-legend { max-width: 190px; flex-wrap: wrap; } }

/* TIMELINE */
.timeline { display: grid; grid-template-columns: auto auto minmax(120px, 1fr) auto; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #09151b; color: var(--muted); font-size: 11px; }
.timeline button { width: 34px; height: 30px; border: 1px solid var(--cyan); border-radius: 3px; background: #10232b; color: var(--cyan); cursor: pointer; }
.timeline input[type=range] { --progress: 50%; appearance: none; -webkit-appearance: none; width: 100%; height: 5px; border-radius: 5px; background: linear-gradient(90deg, #9bc7d2 0%, #9bc7d2 var(--progress), #20333e var(--progress), #20333e 100%); cursor: ew-resize; touch-action: pan-y; }
.timeline input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #071015; background: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.timeline-readout { text-align: right; }
.timeline-readout strong, .timeline-readout small { display: block; }
.timeline-readout strong { color: var(--cyan); }
.timeline-readout small { color: var(--muted); }
@media (max-width: 520px) { .timeline { grid-template-columns: auto auto 1fr auto; padding: 9px 10px; gap: 7px; } .timeline span { font-size: 9px; } .timeline-readout { text-align: left; } }

/* CELLS LIST */
.cell-list { max-height: 590px; overflow: auto; }
.cell-row { padding: 16px 18px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 7px; border-left: 4px solid var(--cell-color, transparent); cursor: pointer; background: transparent; text-align: left; width: 100%; color: inherit; font: inherit; }
.cell-row:hover { background: #12242c; }
.cell-row.selected { background: #17303a; box-shadow: inset 0 0 0 1px var(--cell-color); }
.cell-id { font: 600 12px ui-monospace, monospace; color: var(--cyan); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-state { font-size: 11px; text-transform: uppercase; color: var(--lime); white-space: nowrap; }
.cell-data { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; color: var(--muted); font-size: 11px; }
.cell-data strong { display: block; color: var(--ink); font-size: 13px; white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 901px) { .cell-row { padding: 14px 13px; } .cell-data { gap: 5px; } .cell-data strong { font-size: 12px; } }
@media (max-width: 900px) { .cell-list { height: auto; max-height: 500px; } }

/* SYSTEM PAGE */
.system-teaser { margin-top: 18px; padding: 24px 26px; border: 1px solid var(--line); background: var(--panel); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.system-teaser h2 { font: 400 22px Georgia, serif; margin: 0; }
.system-teaser p:last-child, .system-head p:last-child { color: var(--muted); }
.system-teaser a { white-space: nowrap; color: var(--cyan); text-decoration: none; border: 1px solid var(--cyan); padding: 10px 14px; }
.system-main { padding-bottom: 30px; }
.system-head { padding: 64px 0 28px; }
.system-head h1 { font: 500 clamp(38px, 5vw, 62px)/1 Georgia, serif; margin: 0; }
.system-warning { display: flex; justify-content: space-between; gap: 20px; padding: 14px 18px; margin-bottom: 18px; border-left: 3px solid var(--amber); background: #2b2115; color: var(--amber); }
@media (max-width: 700px) { .system-teaser, .system-warning { align-items: flex-start; flex-direction: column; } .system-head { padding-top: 42px; } }

.automation-status { display: grid; grid-template-columns: repeat(4, 1fr); }
.automation-status > div { padding: 15px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.automation-status span, .automation-status strong { display: block; }
.automation-status span { color: var(--muted); font-size: 11px; }
.automation-status strong { margin-top: 4px; font-size: 13px; }
@media (max-width: 900px) { .automation-status { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .automation-status { grid-template-columns: 1fr; } }

.health-indicator, .connection-indicator { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.health-indicator i, .connection-indicator i { width: 9px; height: 9px; border-radius: 50%; background: #64757d; box-shadow: 0 0 10px #64757d; }
.health-indicator.healthy, .connection-indicator.green { color: var(--lime); }
.health-indicator.healthy i, .connection-indicator.green i { background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.health-indicator.delayed, .connection-indicator.yellow { color: var(--amber); }
.health-indicator.delayed i, .connection-indicator.yellow i { background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.health-indicator.stale, .health-indicator.disabled, .health-indicator.unavailable, .connection-indicator.red { color: var(--red); }
.health-indicator.stale i, .connection-indicator.red i { background: var(--red); box-shadow: 0 0 12px var(--red); }

.module, .event, .operation { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.module small, .event small, .operation small { display: block; color: var(--muted); }
.module code, .event time, .operation time { color: var(--muted); font-size: 11px; }
.operation time { text-align: right; }
.operation time strong { display: block; color: var(--ink); font-size: 12px; }
.module span b, .operation span b, .event span b { display: block; }
.event em { display: block; color: #647984; font: normal 10px ui-monospace, monospace; margin-top: 3px; }
@media (max-width: 520px) { .operation, .event { grid-template-columns: 10px 1fr; } .operation time, .event time { grid-column: 2; text-align: left; } }
.disclaimer { text-align: center; color: var(--muted); font-size: 11px; padding: 28px; }

/* EMAIL PAGE */
.channel-facts { margin: 0; }
.channel-facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 15px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.channel-facts dt { color: var(--muted); }
.channel-facts dd { margin: 0; overflow-wrap: anywhere; }
.connection-test { padding: 18px 20px; display: flex; align-items: center; gap: 13px; }
.connection-test button { padding: 10px 14px; border: 1px solid var(--cyan); background: #10232b; color: var(--cyan); border-radius: 3px; cursor: pointer; }
.connection-test small { color: var(--muted); }

/* MISSING DASHBOARD & LEAFLET STYLES */
.cell-tooltip{border:1px solid #28414b;background:#071015e8;color:var(--ink);box-shadow:0 5px 16px #0008;font:600 10px ui-monospace,monospace; pointer-events:none;}
.cell-tooltip::before{border-top-color:#071015e8!important}
.cell-popup{min-width:210px;display:grid;gap:6px;color:#102129}
.cell-popup>strong{font:700 12px ui-monospace,monospace;color:#087d78;margin-bottom:4px}
.cell-popup>span{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #dbe3e5;padding-top:5px}
.cell-popup small{color:#64757d}
.cell-popup b{font-weight:700}
.mesocyclone-shape{filter:drop-shadow(0 0 5px #ffb000aa)}
.mesocyclone-popup>strong{color:#b14b00}
.lightning-marker{background:transparent;border:0;color:#fff36b;font-size:25px;font-weight:800;line-height:30px;text-align:center;text-shadow:0 0 3px #06131a,0 0 9px #ffb000;filter:drop-shadow(0 1px 1px #06131a);cursor:pointer}
.lightning-marker.positive{color:#ff6b6b}
.lightning-marker.negative{color:#72d7ff}
.lightning-marker.unknown{color:#fff36b}
.lightning-popup>strong{color:#fff36b}
.legend{position:absolute;left:16px;bottom:15px;display:flex;gap:14px;padding:8px 11px;background:#071015d9;color:var(--muted);font-size:11px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.dot.rain{background:var(--cyan)}
.dot.intense{background:var(--red)}
.line{display:inline-block;width:15px;border-top:1px dashed var(--cyan);margin:0 5px 3px 0}
.history-swatch,.forecast-swatch{display:inline-block;width:16px;margin:0 5px 3px 0;border-top:2px solid #9bc7d2}.forecast-swatch{border-top-style:dashed;border-color:#09aaa2}
.leaflet-control-layers{border:1px solid var(--line)!important;border-radius:3px!important;background:#0b1920ed!important;color:var(--ink)!important;box-shadow:0 8px 24px #0008!important}
.leaflet-control-layers-toggle{display:grid!important;place-items:center;background-image:none!important;background-color:#0b1920!important;color:var(--cyan)!important;text-decoration:none}.leaflet-control-layers-toggle::before{content:"▱";font-size:25px;line-height:1;transform:rotate(-12deg)}.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none!important}
.leaflet-control-layers-expanded{padding:10px 13px!important}
.leaflet-control-layers label{cursor:pointer;font-size:12px}
.leaflet-control-layers-selector{accent-color:var(--cyan)}
.leaflet-control-layers-separator{border-top-color:var(--line)!important}
.cell-layer{position:absolute;inset:0}
.cell-marker{position:absolute;transform:translate(-50%,-50%);width:var(--size);height:var(--size);border:2px solid var(--color);border-radius:48% 52% 55% 45%;background:color-mix(in srgb,var(--color) 28%,transparent);box-shadow:0 0 20px color-mix(in srgb,var(--color) 45%,transparent);cursor:pointer}
.cell-marker::after{content:attr(data-key);position:absolute;left:50%;top:100%;transform:translate(-50%,6px);white-space:nowrap;font-size:10px;color:var(--ink);background:#071015c9;padding:2px 5px}
.forecast-marker{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--cyan);transform:translate(-50%,-50%);box-shadow:0 0 8px var(--cyan)}

/* AUTH PAGE STYLES (login.php & register.php) */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 20% 15%, #16404a 0, transparent 34rem), radial-gradient(circle at 85% 80%, #222f27 0, transparent 28rem), var(--bg, #071015);
  color: var(--ink, #ecf0f1);
}
.auth-shell {
  width: min(1080px, 92vw);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 70px;
  align-items: center;
}
.auth-shell.single {
  grid-template-columns: minmax(320px, 520px);
  justify-content: center;
}
.auth-intro h1 {
  font: 500 clamp(42px, 6vw, 76px)/1.02 Georgia, serif;
  margin: 0;
}
.auth-intro h1 em {
  color: var(--cyan, #58d6d0);
  font-style: italic;
  font-weight: 400;
}
.auth-intro > p:last-child {
  max-width: 530px;
  color: var(--muted, #7f8c8d);
  font-size: 17px;
  line-height: 1.5;
}
.auth-card {
  padding: 38px;
  background: #0c191f;
  border: 1px solid var(--line, #1c2d37);
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}
.auth-card h2 {
  font: 400 30px Georgia, serif;
  margin: 30px 0 4px;
}
.auth-hint {
  color: var(--muted, #7f8c8d);
  margin: 0 0 25px;
}
.auth-card label {
  display: block;
  color: var(--muted, #7f8c8d);
  font-size: 12px;
  margin: 15px 0;
}
.auth-card input:not([type=hidden]) {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 13px 14px;
  background: #071116;
  border: 1px solid var(--line, #1c2d37);
  border-radius: 3px;
  color: var(--ink, #ecf0f1);
  font: inherit;
  outline: none;
  box-sizing: border-box;
}
.auth-card input:focus {
  border-color: var(--cyan, #58d6d0);
  box-shadow: 0 0 0 3px rgba(88, 214, 208, 0.1);
}
.auth-card button {
  width: 100%;
  margin: 12px 0 18px;
  padding: 13px;
  border: 0;
  border-radius: 3px;
  background: var(--cyan, #58d6d0);
  color: #061215;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: 0.15s;
}
.auth-card button:hover {
  background: #76e0db;
}
.auth-card small {
  color: var(--muted, #7f8c8d);
}
.auth-error {
  padding: 11px 13px;
  border-left: 3px solid var(--red, #e74c3c);
  background: #341918;
  color: #ffd8d5;
  margin: 16px 0;
  font-size: 13px;
  border-radius: 0 4px 4px 0;
}
@media (max-width: 760px) {
  .auth-shell {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 0;
  }
  .auth-intro h1 {
    font-size: 45px;
  }
  .auth-card {
    padding: 28px;
  }
}

.storage-panel{grid-column:1/-1}.storage-volumes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;padding:20px}.storage-volume{padding:18px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 76%,#071015)}.storage-volume-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.storage-volume-head strong,.storage-volume-head small{display:block}.storage-volume-head small,.storage-values small,.storage-note{color:var(--muted)}.storage-volume-head b{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--lime)}.storage-volume.notice .storage-volume-head b{color:var(--amber)}.storage-volume.warning .storage-volume-head b,.storage-volume.critical .storage-volume-head b{color:var(--red)}.storage-bar{height:12px;margin:18px 0;background:#071015;border:1px solid var(--line);overflow:hidden}.storage-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--lime));transition:width .25s ease}.storage-volume.notice .storage-bar span{background:var(--amber)}.storage-volume.warning .storage-bar span,.storage-volume.critical .storage-bar span{background:var(--red)}.storage-values{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.storage-values span{min-width:0}.storage-values small,.storage-values strong{display:block}.storage-values strong{margin-top:2px;font-size:16px}.storage-note{margin:0;padding:0 20px 20px;font-size:12px}@media(max-width:560px){.storage-values{grid-template-columns:1fr}.storage-panel{grid-column:auto}}

.status-dot.green{background:var(--lime)}.status-dot.yellow{background:var(--amber)}.status-dot.red{background:var(--red)}.status-dot.gray{background:#64747d}.health-indicator.green i{background:var(--lime)}.health-indicator.yellow i{background:var(--amber)}.health-indicator.red i{background:var(--red)}.health-indicator.gray i{background:#64747d}.service-monitor{padding-bottom:36px}.service-summary{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--panel);margin-bottom:18px}.service-summary article{display:grid;grid-template-columns:12px 1fr;align-items:center;gap:4px 10px;padding:18px 20px;border-right:1px solid var(--line)}.service-summary article:last-child{border-right:0}.service-summary small{color:var(--muted)}.service-summary strong{grid-column:2;font:400 28px Georgia,serif}.service-current,.service-history{margin-bottom:18px}.service-check{display:grid;grid-template-columns:12px minmax(220px,1.4fr) repeat(3,minmax(150px,1fr));gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}.service-check:hover{background:#102028}.service-check>div{min-width:0}.service-check strong,.service-check small,.service-check em{display:block}.service-check small,.service-check em{color:var(--muted);font-size:11px}.service-check em{font-style:normal;margin-top:2px}.service-check-name small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,monospace}.service-check.red{border-left:3px solid var(--red)}.service-check.yellow{border-left:3px solid var(--amber)}.service-check.gray{opacity:.72}@media(max-width:900px){.service-check{grid-template-columns:12px 1fr 1fr}.service-check>div:nth-of-type(3),.service-check>div:nth-of-type(4){grid-column:2/-1}}@media(max-width:620px){.service-summary{grid-template-columns:1fr 1fr}.service-summary article:nth-child(2){border-right:0}.service-summary article:nth-child(-n+2){border-bottom:1px solid var(--line)}.service-check{grid-template-columns:12px 1fr}.service-check>div{grid-column:2!important}}

.service-overview{grid-column:1/-1}.service-overview-body{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:14px 28px;align-items:center;padding:20px}.service-overview-body p{margin:0;color:var(--muted)}.service-overview-body>div{display:flex;gap:16px;flex-wrap:wrap}.service-overview-body>div span{color:var(--muted)}.service-overview-body>div b{color:var(--ink)}.service-overview-body a{grid-column:1/-1;color:var(--cyan);text-decoration:none;width:max-content}.module .status-dot.gray{background:#64747d}@media(max-width:700px){.service-overview-body{grid-template-columns:1fr}.service-overview-body a{width:auto}}

.service-check{grid-template-columns:12px minmax(210px,1.3fr) repeat(3,minmax(135px,1fr)) minmax(210px,auto)}.service-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.service-actions form{margin:0}.service-actions button{padding:8px 10px;border:1px solid var(--cyan);background:transparent;color:var(--text);cursor:pointer}.service-actions button:hover{background:var(--cyan);color:#031015}.service-actions button.danger{border-color:var(--amber);color:var(--amber)}.service-actions button.danger:hover{background:var(--amber);color:#171007}@media(max-width:1180px){.service-check{grid-template-columns:12px 1fr 1fr}.service-actions{grid-column:2/-1;justify-content:flex-start}}