*{box-sizing:border-box}body{margin:0;background:#f3f6fa;color:#17314b;font:14px system-ui,sans-serif}header{background:#142e48;color:#fff;padding:28px 4%;display:flex;justify-content:space-between;align-items:center}h1{margin:8px 0;font-size:28px}header small{letter-spacing:2px;color:#98cfc6}header p{color:#bdcddd;margin:0}nav{display:flex;gap:20px}nav a{color:#d6f1ed}main{padding:24px 3%}.toolbar{display:flex;gap:20px;align-items:center;flex-wrap:wrap}input[type=search]{padding:10px;border:1px solid #cbd6e2;border-radius:6px;margin-left:8px}button{padding:10px 16px;background:white;border:1px solid #bbcbdc;border-radius:6px;cursor:pointer}.hint{font-size:12px;color:#60788f;line-height:1.8}.tablewrap{overflow:auto;max-height:72vh;border:1px solid #dbe3ec;border-radius:10px;background:white}table{border-collapse:separate;border-spacing:0;width:100%;white-space:nowrap}th,td{padding:11px 12px;border-bottom:1px solid #e7edf3;text-align:right}th{background:#eaf0f6;font-size:12px;position:sticky;top:0;z-index:2}th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:#f8fafc;font-weight:600;z-index:1}th:first-child{z-index:3}tbody tr:hover td{outline:1px solid #bdccdb}.normal{background:#e1f4ec;color:#167454}.warning{background:#fff1d8;color:#975706}.bad{background:#ffe2e4;color:#aa2837}.unknown,.stale{background:#edf0f3;color:#79828d}.stale{text-decoration:underline dotted}#status{padding:12px;background:#e5edf5;border-radius:6px}.error{color:#ad2636!important;background:#ffe8ea!important}
/* Whole-network view and compact report */
header{padding:12px 2%;}header h1{font-size:20px;margin:4px 0}header small{font-size:10px}header p{font-size:12px}main{padding:12px 1.2%}h2{font-size:16px;margin:8px 0}.networkheading{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}#summary{display:flex;gap:7px}.counter{padding:4px 10px;border-radius:4px;font-size:12px}.network{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:8px}.stationcard{background:white;border:1px solid #cbd6df;border-radius:5px;padding:6px}.stationcard strong{font-size:12px;display:block;margin-bottom:4px}.stationcard>div{display:flex;gap:3px}.channel{min-width:0;flex:1;padding:4px 2px;border:1px solid #b4c7b9;border-radius:3px;font-size:11px;font-weight:600}.channel span{display:block;font-size:10px;font-weight:400}.channel:focus{outline:3px solid #135493}.legend{font-size:11px;color:#60788f;margin:7px 0}.normal{background:#a0ffa0;color:#173d23}.warning{background:#fff29c;color:#665109}.bad{background:#ffbaba;color:#811c29}.unknown,.stale{background:#ededed;color:#666}.tablewrap{max-height:none;border-radius:4px;margin-top:6px}table{font-size:11px}th,td{padding:4px 5px;height:25px;line-height:16px;border-right:1px solid #d9e2de}th{font-weight:600}th:first-child,td:first-child{font-weight:500}.toolbar{gap:10px;font-size:12px}input[type=search]{padding:6px}button{padding:6px 10px}.channel{padding:4px 2px}#status{padding:6px 10px;margin:8px 0;font-size:12px}.hint{margin:5px 0;font-size:11px}#detailHeading{scroll-margin-top:8px}@media(min-width:1550px){.network{grid-template-columns:repeat(10,minmax(0,1fr))}}@media(max-width:850px){.network{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:480px){.network{grid-template-columns:repeat(2,minmax(0,1fr))}header{align-items:flex-start;gap:10px}nav{gap:8px;font-size:12px}#summary{flex-wrap:wrap}}

/* Installed scqcv score palette, composited on white. */
.score1{background:rgb(255,185,185);color:#401010}
.score2{background:rgb(255,170,170);color:#401010}
.score3{background:rgb(255,155,155);color:#401010}
.score4{background:rgb(255,130,130);color:#401010}
.score5{background:rgb(255,105,105);color:#401010}
.score6{background:rgb(255,80,80);color:#401010}
.score7{background:rgb(255,55,55);color:#401010}
.score8{background:rgb(255,35,35);color:#401010}
.score9{background:rgb(255,15,15);color:#401010}
.score10{background:rgb(255,0,0);color:#401010}
.scoreDelay{background:rgb(255,59,59);color:#401010}.scoreGrey{background:#828282;color:#fff}

/* Unified monitoring tabs */
[hidden]{display:none!important}.tabs{display:flex;gap:4px;border-bottom:2px solid #c7d4e1;margin-bottom:12px;overflow-x:auto;padding-top:4px}.tabs [role=tab]{flex-shrink:0;border:1px solid #c7d4e1;border-bottom:0;border-radius:6px 6px 0 0;padding:12px 20px;background:#e7eef5;color:#34516c;font-weight:600}.tabs [aria-selected=true]{background:#173d5c;color:white}.tabs [role=tab]:focus-visible{outline:3px solid #2b8ecb;outline-offset:-3px}[role=tabpanel]>iframe{display:block;width:100%;height:calc(100dvh - 175px);min-height:600px;border:1px solid #d5dfe8;border-radius:6px;background:white}@media(max-width:600px){.tabs [role=tab]{padding:10px 12px;font-size:12px}}

.combined-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}.combined-map-wrap{background:#edf5fa;border:1px solid #cad9e4;border-radius:8px;padding:12px}.combined-tools{display:flex;gap:6px}#combined-map svg{width:100%;height:70vh;min-height:480px;display:block}#combined-map [role=button]{cursor:pointer}#combined-map [role=button]:focus circle{stroke:#17314b;stroke-width:3}.combined-aside{background:white;border:1px solid #cad9e4;border-radius:8px;padding:14px}.combined-aside h3{margin:5px 0 12px}.combined-aside p{line-height:1.6}.combined-aside details{max-height:220px;overflow:auto;font-size:12px}#combined-list{max-height:46vh;overflow:auto;margin-top:10px}.combined-row{display:flex;width:100%;justify-content:space-between;align-items:center;margin:4px 0}.combined-row.chosen{border:2px solid #173d5c}#combined-counts{display:flex;gap:6px;flex-wrap:wrap}#combined-search{width:100%;margin:6px 0}#combined-status{color:#506b80;font-size:12px}@media(max-width:900px){.combined-layout{grid-template-columns:1fr}.combined-aside{display:block}#combined-map svg{height:60vh;min-height:400px}}

/* Fit the actual geographic bounds without letterboxing. */
.combined-map-wrap{padding:6px}.combined-layout{gap:10px}#combined-map svg{width:100%;height:auto;min-height:0}.combined-tools{padding:3px}#combined-map-note{margin:3px 4px}

/* Admin Management Panel */
.admin-wrap { max-width: 1200px; margin: 0 auto; padding: 10px 0; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.admin-header h2 { margin: 0 0 4px; font-size: 20px; color: #0f172a; }
.admin-desc { margin: 0; font-size: 13px; color: #64748b; }
.admin-btn { padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: 6px; border: 1px solid #cbd5e1; background: #fff; color: #334155; cursor: pointer; transition: all 0.2s; }
.admin-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.admin-btn.primary { background: #1d4ed8; color: #fff; border-color: #1e40af; }
.admin-btn.primary:hover { background: #1e40af; }
.admin-btn.danger { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.admin-btn.danger:hover { background: #fecaca; }
.admin-btn.small { padding: 4px 10px; font-size: 12px; }
.admin-card { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); padding: 18px 20px; margin-bottom: 24px; }
.admin-card-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.admin-card-title h3 { margin: 0; font-size: 15px; color: #1e293b; }
.admin-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 6px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.admin-table th { background: #f8fafc; border-bottom: 1px solid #cbd5e1; padding: 10px 12px; font-weight: 600; color: #475569; position: static; }
.admin-table td { padding: 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; text-align: left; }
.admin-table tr:hover td { background: #f8fafc; }
.admin-role-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.admin-role-badge.admin { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.admin-role-badge.user { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.admin-tabs-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-tab-tag { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 11px; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.admin-tab-tag.all { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; font-weight: 600; }

/* Admin Modal */
.admin-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15,23,42,0.6); backdrop-filter: blur(4px); z-index: 9999; display: flex; justify-content: center; align-items: center; }
.admin-modal-card { background: #ffffff; border-radius: 10px; width: 92%; max-width: 500px; padding: 24px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.25); border: 1px solid #cbd5e1; }
.admin-modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; margin-bottom: 18px; }
.admin-modal-header h3 { margin: 0; font-size: 17px; color: #0f172a; }
.admin-modal-close { background: none; border: none; font-size: 24px; color: #94a3b8; cursor: pointer; padding: 0; line-height: 1; }
.admin-modal-close:hover { color: #334155; }
.admin-form-group { margin-bottom: 16px; }
.admin-form-group label { display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 5px; }
.admin-form-group input[type=text], .admin-form-group input[type=password], .admin-form-group select { width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px; border: 1px solid #cbd5e1; border-radius: 5px; outline: none; }
.admin-form-group input:focus, .admin-form-group select:focus { border-color: #2563eb; }
.admin-form-hint { display: block; font-size: 11px; color: #64748b; margin-top: 4px; }
.admin-tabs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px; }
.admin-checkbox-lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #1e293b; cursor: pointer; }
.admin-checkbox-lbl input { cursor: pointer; }
.admin-form-error { padding: 8px 10px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; font-size: 12px; color: #dc2626; margin-bottom: 14px; text-align: center; }
.admin-modal-footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #e2e8f0; padding-top: 16px; margin-top: 20px; }


/* ==========================================================================
   Waveform Viewer Modal (scqcv)
   ========================================================================== */
.qc-wave-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 18px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  margin-right: 6px;
  padding: 0;
  vertical-align: middle;
  transition: all 0.15s ease-in-out;
}
.qc-wave-btn:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #1d4ed8;
  transform: scale(1.08);
}
.qc-stream-clickable {
  cursor: pointer;
  transition: color 0.15s;
}
.qc-stream-clickable:hover {
  color: #2563eb;
  text-decoration: underline;
}

.qc-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.qc-modal-container {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  border: 1px solid #cbd5e1;
  width: 980px;
  max-width: 96vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: qcModalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes qcModalFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.qc-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #0f172a;
  color: #f8fafc;
  border-bottom: 1px solid #334155;
}

.qc-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}

.qc-modal-icon {
  font-size: 15px;
  color: #38bdf8;
}

.qc-stream-title {
  letter-spacing: 0.5px;
  color: #ffffff;
}

.qc-badge {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.qc-badge-source {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.qc-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qc-btn-refresh {
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid #475569;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.qc-btn-refresh:hover {
  background: #334155;
  color: #ffffff;
  border-color: #64748b;
}

.qc-btn-close {
  background: transparent;
  color: #94a3b8;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
}
.qc-btn-close:hover {
  color: #ffffff;
}

.qc-modal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
}

.qc-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qc-meta-item .lbl {
  color: #64748b;
  font-weight: 600;
}

.qc-meta-item .val {
  color: #0f172a;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.qc-modal-canvas-wrap {
  position: relative;
  background: #090d16;
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 290px;
}

#qcWaveformCanvas {
  display: block;
  width: 100%;
  max-width: 940px;
  height: 280px;
  cursor: crosshair;
}

.qc-modal-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 500;
  z-index: 5;
}

.qc-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(56, 189, 248, 0.2);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: qcSpin 0.8s linear infinite;
}

@keyframes qcSpin {
  to { transform: rotate(360deg); }
}

.qc-modal-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  max-width: 80%;
  z-index: 5;
}

.qc-wave-tooltip {
  position: absolute;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.qc-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 20px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  font-size: 11px;
  color: #64748b;
}

.qc-dot-legend-blue {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #38bdf8;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

.qc-dot-legend-red {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: rgba(239, 68, 68, 0.7);
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

.qc-modal-shortcuts b {
  color: #475569;
}


.qc-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}

.qc-badge-live.active::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
  animation: qcPulse 1.2s infinite alternate;
}

.qc-badge-live.paused {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  border-color: rgba(234, 179, 8, 0.4);
}

.qc-badge-live.paused::before {
  content: '❚❚';
  display: inline-block;
  font-size: 9px;
  color: #eab308;
}

@keyframes qcPulse {
  from { opacity: 0.4; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1.2); }
}

.qc-btn-stream-toggle {
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid #475569;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.qc-btn-stream-toggle:hover {
  background: #334155;
  color: #ffffff;
  border-color: #64748b;
}