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

body {
  background: #050a0e;
  color: #c0d0e0;
  font-family: 'Courier New', monospace;
  min-height: 100vh;
}
html, body { width: 100%; height: 100%; overflow-x: hidden; }

/* ── SCREENS */
.screen { display: none; }
.screen.active { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100vw; }
#screen-login.active, #screen-mfa-setup.active, #screen-mfa-verify.active { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100vw; }
#screen-app.active { display: block !important; width: 100vw !important; min-height: 100vh; }

/* ── AUTH CARDS */
.auth-card {
  background: #0a1520;
  border: 1px solid #1a3a5c;
  border-radius: 8px;
  padding: 36px;
  width: 400px;
  box-shadow: 0 0 40px rgba(0,150,255,0.12);
}
.auth-card.wide { width: 460px; }
.auth-header { text-align: center; margin-bottom: 28px; }
.auth-icon { font-size: 28px; margin-bottom: 6px; }
.auth-title { color: #40c4ff; font-size: 18px; font-weight: bold; letter-spacing: 4px; }
.auth-subtitle { color: #2a5070; font-size: 9px; letter-spacing: 3px; margin-top: 3px; }
.auth-legal { color: #1a3040; font-size: 8px; margin-top: 4px; }
.auth-hint { color: #1a3040; font-size: 9px; text-align: center; margin-top: 14px; }

/* ── FORM ELEMENTS */
.field-label { color: #4a8090; font-size: 10px; letter-spacing: 2px; margin-bottom: 4px; margin-top: 12px; }
.field-input {
  width: 100%;
  background: #071520;
  border: 1px solid #1a3a5c;
  border-radius: 4px;
  padding: 10px 12px;
  color: #40c4ff;
  font-size: 14px;
  outline: none;
  font-family: 'Courier New', monospace;
}
.field-input.small { padding: 6px 8px; font-size: 12px; }
.field-input.code-input { font-size: 24px; text-align: center; letter-spacing: 8px; margin-bottom: 8px; }
.field-input::placeholder { color: #2a4050; }

/* ── BUTTONS */
.primary-btn {
  width: 100%;
  background: #003a6e;
  border: 1px solid #0060b0;
  color: #40c4ff;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 3px;
  font-family: 'Courier New', monospace;
  margin-top: 8px;
}
.primary-btn:hover { background: #004a8e; }
.primary-btn.narrow { width: auto; padding: 9px 20px; }
.ghost-btn {
  width: 100%;
  background: transparent;
  border: none;
  color: #2a5070;
  padding: 8px;
  cursor: pointer;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  margin-top: 4px;
}
.ghost-btn:hover { color: #40c4ff; }
.small-btn {
  background: #001a3a;
  border: 1px solid #1a4a7a;
  color: #40c4ff;
  padding: 3px 9px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 9px;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}
.ghost-small-btn {
  background: transparent;
  border: 1px solid #1a3040;
  color: #4a6070;
  padding: 3px 7px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 9px;
  font-family: 'Courier New', monospace;
}
.add-btn {
  background: #003a6e;
  border: 1px solid #0060b0;
  color: #40c4ff;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 16px;
}
.toggle-btn {
  background: #003a6e;
  border: 1px solid #0060b0;
  color: #40c4ff;
  padding: 4px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 11px;
  font-family: 'Courier New', monospace;
}
.toggle-btn.off { background: #1a0808; border-color: #3a1010; color: #4a2020; }

/* ── ERROR BOX */
.error-box {
  color: #ff4444;
  font-size: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #1a0000;
  border-radius: 4px;
  border: 1px solid #440000;
}
.hidden { display: none !important; }

/* ── QR CODE */
.qr-box {
  background: #071520;
  border: 1px solid #1a3a5c;
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 14px;
  text-align: center;
}
.qr-img { display: block; margin: 10px auto; border: 4px solid white; border-radius: 2px; }
.qr-hint { color: #2a4050; font-size: 9px; margin-top: 6px; }

/* ── TOPBAR */
.topbar {
  background: #070f1a;
  border-bottom: 1px solid #1a3a5c;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-logo { color: #40c4ff; font-weight: bold; font-size: 15px; letter-spacing: 4px; }
.topbar-version { color: #1a4060; font-size: 9px; letter-spacing: 2px; }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 10px; }
.badge {
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: bold;
}
.badge-critical { background: #3a0000; border: 1px solid #ff2020; color: #ff4444; }
.badge-high { background: #2d1800; border: 1px solid #ff8c00; color: #ff8c00; }
.status-dot { color: #4a6080; }
.status-nominal { color: #00e676; }
.status-syncing { color: #ffd700; }
.status-error { color: #ff4444; }
.last-sync { color: #3a5060; }
.user-info { color: #4a8090; }

/* ── NAVBAR */
.navbar {
  background: #060d18;
  border-bottom: 1px solid #122030;
  padding: 0 20px;
  display: flex;
}
.nav-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #4a6080;
  padding: 11px 18px;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
}
.nav-btn.active { background: #0a1f35; border-bottom-color: #40c4ff; color: #40c4ff; }
.nav-btn:hover:not(.active) { color: #6a90b0; }

/* ── CONTENT & TABS */
.content { padding: 18px; }
.tab { display: none; }
.tab.active { display: block; }

/* ── STATS ROW */
.stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.stat-card {
  background: #0a1520;
  border: 1px solid #1a3040;
  border-radius: 6px;
  padding: 12px 14px;
}
.stat-label { color: #3a5060; font-size: 9px; letter-spacing: 2px; margin-bottom: 4px; }
.stat-value { font-size: 26px; font-weight: bold; }
.stat-value.blue { color: #40c4ff; }
.stat-value.red { color: #ff2020; }
.stat-value.orange { color: #ff8c00; }
.stat-value.yellow { color: #ffd700; }
.stat-value.green { color: #00e676; }

/* ── PANELS */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.two-col-fixed { display: grid; grid-template-columns: 260px 1fr; gap: 14px; }
.panel {
  background: #0a1520;
  border: 1px solid #1a3040;
  border-radius: 6px;
  padding: 16px;
}
.panel-header {
  color: #40c4ff;
  font-size: 11px;
  letter-spacing: 3px;
  margin-bottom: 14px;
  border-bottom: 1px solid #122030;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.scanning { color: #ffd700; font-size: 9px; animation: pulse 1s infinite; }

/* ── EVENT LIST */
.event-list { max-height: 420px; overflow-y: auto; }
.event-item {
  border-bottom: 1px solid #0a1a25;
  padding: 8px 0;
  cursor: pointer;
}
.event-item:hover { background: #0d1f30; }
.event-item-top { display: flex; gap: 6px; align-items: center; margin-bottom: 2px; }
.event-title { color: #c0d0e0; font-size: 12px; }
.event-meta { color: #3a5060; font-size: 10px; }
.empty-state { color: #2a4050; text-align: center; padding: 30px 0; font-size: 12px; }

/* ── SEVERITY BADGES */
.sev-badge {
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: bold;
  border: 1px solid;
  white-space: nowrap;
}
.sev-CRITICAL { color: #ff2020; background: #3a0000; border-color: #ff2020; }
.sev-HIGH     { color: #ff8c00; background: #2d1800; border-color: #ff8c00; }
.sev-MODERATE { color: #ffd700; background: #2a2000; border-color: #ffd700; }
.sev-LOW      { color: #00e676; background: #001a08; border-color: #00e676; }
.sev-INFO     { color: #40c4ff; background: #001a2d; border-color: #40c4ff; }

/* ── AI ALERT CARDS */
.ai-card {
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 8px;
}
.ai-card-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
.ai-level { font-size: 9px; font-weight: bold; letter-spacing: 1px; }
.ai-source { color: #2a4050; font-size: 9px; }
.ai-title { color: #c0d0e0; font-size: 12px; font-weight: bold; margin-bottom: 2px; }
.ai-location { color: #4a8090; font-size: 10px; }
.ai-summary  { color: #6a8090; font-size: 11px; margin-top: 3px; }
.ai-detected { color: #2a4a5a; font-size: 9px; margin-top: 4px; letter-spacing: 0.5px; }
.ai-card-actions { display: flex; gap: 6px; margin-top: 8px; }
.ai-action-btn {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid #1a3040;
  color: #4a7a9b;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ai-action-btn:hover { background: rgba(0,200,255,0.08); color: #c0d4e0; border-color: #2a5060; }
.ai-action-btn.active { background: rgba(0,200,100,0.12); border-color: #1a5030; color: #00e676; }
.ai-action-btn.analyze { color: #00c8ff; border-color: #0a3040; }
.ai-action-btn.analyze:hover { background: rgba(0,200,255,0.12); }
.ai-section-header {
  font-size: 10px;
  letter-spacing: 2px;
  color: #4a7a9b;
  border-top: 1px solid #1a3040;
  padding-top: 10px;
  margin: 12px 0 8px;
}

/* ── EVENT GRID */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
.event-card {
  background: #0a1520;
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
  border: 1px solid #1a3040;
}
.event-card:hover { background: #0d1f30; }
.event-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.event-mag { color: #ffd700; font-size: 18px; font-weight: bold; }
.event-place { color: #c0d0e0; font-size: 12px; margin-bottom: 2px; }
.event-time { color: #3a5060; font-size: 10px; }
.tsunami-badge { color: #ff4444; font-size: 10px; margin-top: 4px; }

/* ── FILTER ROW */
.filter-row { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.search-input {
  background: #0a1520;
  border: 1px solid #1a3040;
  border-radius: 4px;
  padding: 7px 10px;
  color: #c0d0e0;
  font-size: 12px;
  width: 220px;
  font-family: 'Courier New', monospace;
  outline: none;
}
.sev-filters { display: flex; gap: 6px; }
.sev-btn {
  background: #070f1a;
  border: 1px solid #1a3040;
  color: #4a6080;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 9px;
  letter-spacing: 1px;
  font-family: 'Courier New', monospace;
}
.sev-btn.active { border-color: #40c4ff; color: #40c4ff; background: #001a2d; }
.sev-btn.active.critical { border-color: #ff2020; color: #ff2020; background: #3a0000; }
.sev-btn.active.high { border-color: #ff8c00; color: #ff8c00; background: #2d1800; }
.sev-btn.active.moderate { border-color: #ffd700; color: #ffd700; background: #2a2000; }
.sev-btn.active.low { border-color: #00e676; color: #00e676; background: #001a08; }
.event-count { margin-left: auto; color: #3a5060; font-size: 11px; }
.section-label { font-size: 10px; letter-spacing: 3px; margin-bottom: 10px; }
.section-label.yellow { color: #ffd700; }
.section-label.green { color: #00e676; }

/* ── ANALYSIS */
.analysis-textarea {
  width: 100%;
  background: #071520;
  border: 1px solid #1a3040;
  border-radius: 4px;
  padding: 10px;
  color: #c0d0e0;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  resize: vertical;
  outline: none;
  margin-bottom: 10px;
}
.analysis-output {
  color: #a0c0d0;
  font-size: 12px;
  line-height: 1.8;
  white-space: pre-wrap;
  max-height: 560px;
  overflow-y: auto;
}

/* ── WATCHLIST */
.kw-input-row { display: flex; gap: 6px; margin-bottom: 10px; }
.keyword-list { display: flex; flex-direction: column; gap: 4px; }
.kw-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 7px;
  background: #071520;
  border-radius: 4px;
}
.kw-label { color: #40c4ff; font-size: 11px; }
.kw-remove {
  background: transparent;
  border: none;
  color: #3a2030;
  cursor: pointer;
  font-size: 16px;
  font-family: 'Courier New', monospace;
}
.kw-remove:hover { color: #ff4444; }
.kw-tags { display: flex; gap: 4px; margin-top: 3px; }
.kw-tag { background: #001a3a; color: #40c4ff; font-size: 8px; padding: 1px 5px; border-radius: 2px; }

/* ── SETTINGS */
.settings-wrap { max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.profile-rows { display: flex; flex-direction: column; }
.profile-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #0a1a25; }
.profile-key { color: #4a6080; font-size: 12px; }
.profile-val { color: #c0d0e0; font-size: 12px; }
.mfa-status-row { display: flex; justify-content: space-between; align-items: center; }
.status-active { color: #00e676; font-size: 10px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #0a1a25; }
.setting-title { color: #c0d0e0; font-size: 12px; margin-bottom: 2px; }
.setting-sub { color: #3a5060; font-size: 10px; }
.source-list { display: flex; flex-direction: column; gap: 3px; }
.source-item { color: #00e676; font-size: 10px; }

/* ── MODAL */
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); }
.modal-card {
  position: relative;
  background: #0a1520;
  border: 1px solid #1a3a5c;
  border-radius: 8px;
  padding: 28px;
  width: 540px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 1;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-title { color: #40c4ff; font-size: 12px; font-weight: bold; letter-spacing: 2px; }
.modal-close { background: transparent; border: none; color: #4a6080; cursor: pointer; font-size: 22px; }
.modal-close:hover { color: #ff4444; }
.modal-sev { border-radius: 4px; padding: 5px 11px; display: inline-block; margin-bottom: 10px; border: 1px solid; }
.modal-event-title { color: #c0d0e0; font-size: 15px; font-weight: bold; margin-bottom: 8px; }
.modal-field { color: #4a8090; font-size: 11px; margin-bottom: 3px; }
.modal-mag { color: #ffd700; font-size: 13px; margin-bottom: 3px; }
.modal-tsunami { color: #ff4444; font-size: 11px; margin-bottom: 3px; }
.modal-desc {
  color: #5a7080;
  font-size: 11px;
  margin-top: 10px;
  line-height: 1.7;
  max-height: 160px;
  overflow-y: auto;
  background: #071520;
  padding: 10px;
  border-radius: 4px;
}
.modal-time { color: #2a4050; font-size: 10px; margin-top: 10px; }
.modal-link { color: #40c4ff; font-size: 11px; margin-top: 8px; display: block; }

/* ── SCROLLBAR */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #070f1a; }
::-webkit-scrollbar-thumb { background: #1a3a5c; border-radius: 2px; }

/* ── ANIMATIONS */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
/* ── MAP */
.map-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.map-toggle-label {
  color: #4a6080;
  font-size: 10px;
  letter-spacing: 2px;
}
.map-layer-btn {
  background: #0a1520;
  border: 1px solid #1a3040;
  color: #4a6080;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 1px;
  font-family: 'Courier New', monospace;
}
.map-layer-btn.active {
  border-color: #40c4ff;
  color: #40c4ff;
  background: #001a2d;
}
.leaflet-container {
  background: #050a0e !important;
  font-family: 'Courier New', monospace;
}
.leaflet-tile {
  filter: invert(1) hue-rotate(180deg) brightness(0.7) saturate(0.6);
}
.map-popup {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  min-width: 200px;
}
.map-popup-title {
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 5px;
}
.map-popup-sev {
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 5px;
}
.map-popup-field {
  color: #555;
  font-size: 11px;
  margin-top: 2px;
}
.leaflet-popup-content-wrapper {
  background: #0a1520 !important;
  border: 1px solid #1a3a5c !important;
  border-radius: 6px !important;
  color: #c0d0e0 !important;
}
.leaflet-popup-tip {
  background: #1a3a5c !important;
}
.leaflet-popup-close-button {
  color: #40c4ff !important;
}
.time-filter-btn {
  background: #070f1a;
  border: 1px solid #1a3040;
  color: #4a6080;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 9px;
  letter-spacing: 1px;
  font-family: 'Courier New', monospace;
}
.time-filter-btn.active {
  border-color: #ffd700;
  color: #ffd700;
  background: #2a2000;
}
.three-col-analysis {
  display: grid;
  grid-template-columns: 280px minmax(0, 1.2fr) 280px;
  gap: 14px;
  height: 100%;
}

.small-action-btn {
  background: rgba(0, 200, 255, 0.1);
  border: 1px solid rgba(0, 200, 255, 0.3);
  color: #00c8ff;
  padding: 3px 10px;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.small-action-btn:hover { background: rgba(0, 200, 255, 0.25); }
.small-action-btn.danger { color: #ff4444; border-color: rgba(255,68,68,0.3); background: rgba(255,68,68,0.1); }
.small-action-btn.danger:hover { background: rgba(255,68,68,0.25); }

.analysis-history { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: calc(100vh - 200px); }

.history-item {
  position: relative;
  background: rgba(0, 200, 255, 0.05);
  border: 1px solid rgba(0, 200, 255, 0.15);
  padding: 10px 30px 10px 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.history-item:hover { background: rgba(0, 200, 255, 0.12); }
.history-query { font-size: 11px; color: #a0d4ff; font-family: 'Courier New', monospace; margin-bottom: 4px; }
.history-meta { font-size: 10px; color: #4a7a9b; }
.history-delete {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; color: #ff4444;
  cursor: pointer; font-size: 12px; padding: 0 4px;
}
.history-delete:hover { color: #ff0000; }
.ai-source-link {
  color: #00c8ff;
  font-size: 10px;
  text-decoration: none;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(0,200,255,0.3);
}
.ai-source-link:hover {
  color: #fff;
  border-bottom-color: #fff;
}
.social-kw-group { margin-bottom: 16px; }
.social-kw-header {
  font-size: 10px;
  color: #00c8ff;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,200,255,0.2);
  margin-bottom: 8px;
}
.social-card {
  background: rgba(0,200,255,0.04);
  border: 1px solid rgba(0,200,255,0.1);
  padding: 10px 12px;
  margin-bottom: 8px;
  position: relative;
}
.social-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.social-platform {
  font-size: 10px;
  color: #4a7a9b;
  font-family: 'Courier New', monospace;
  margin-left: auto;
}
.social-delete {
  background: none;
  border: none;
  color: #ff4444;
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
}
.social-delete:hover { color: #ff0000; }
.social-title { font-size: 11px; color: #a0d4ff; margin-bottom: 4px; }
.social-preview { font-size: 10px; color: #4a7a9b; margin-bottom: 6px; line-height: 1.4; }
.social-meta { display: flex; gap: 12px; font-size: 9px; color: #3a6a8b; font-family: 'Courier New', monospace; flex-wrap: wrap; }

.platform-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,200,255,0.15);
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}
.platform-toggle.active { background: rgba(0,200,255,0.08); border-color: rgba(0,200,255,0.4); }
.platform-toggle.locked { opacity: 0.4; cursor: not-allowed; }
.platform-toggle:not(.locked):hover { background: rgba(0,200,255,0.15); }
.platform-name { color: #a0d4ff; flex: 1; letter-spacing: 1px; }
.platform-status { font-size: 9px; color: #4a7a9b; }
.platform-toggle.active .platform-status { color: #00e676; }
.kw-rules {
  background: none;
  border: 1px solid rgba(0,200,255,0.2);
  color: #4a7a9b;
  cursor: pointer;
  font-size: 11px;
  padding: 1px 5px;
  margin-right: 4px;
}
.kw-rules:hover { color: #00c8ff; border-color: rgba(0,200,255,0.5); }
.kw-rules.has-rules { color: #00c8ff; border-color: rgba(0,200,255,0.5); }

.rules-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rules-modal.hidden { display: none; }
.rules-modal-inner {
  background: #0a1428;
  border: 1px solid rgba(0,200,255,0.3);
  padding: 24px;
  width: 480px;
  max-width: 90vw;
}
.rules-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-family: 'Courier New', monospace;
  color: #00c8ff;
  font-size: 13px;
  letter-spacing: 1px;
}
.rules-close {
  background: none;
  border: none;
  color: #ff4444;
  cursor: pointer;
  font-size: 16px;
}
.rules-row { margin-bottom: 14px; }
.rules-label {
  display: block;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.rules-label.critical { color: #ff2020; }
.rules-label.high { color: #ff8c00; }
.rules-label.moderate { color: #ffd700; }
.rules-label.low { color: #00e676; }
.rules-input {
  width: 100%;
  background: rgba(0,200,255,0.05);
  border: 1px solid rgba(0,200,255,0.2);
  color: #a0d4ff;
  padding: 8px 10px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  box-sizing: border-box;
}
.rules-input:focus { outline: none; border-color: rgba(0,200,255,0.5); }
/* ── ITR / OPS PORTAL ADDITIONS ─────────────────────────────────────────── */

.success-box {
  background: rgba(26,107,74,0.2);
  border: 1px solid #1a6b4a;
  color: #2ecc71;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  margin-top: 10px;
}

.ghost-link {
  color: #4a8090;
  font-size: 12px;
  text-decoration: none;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
}
.ghost-link:hover { color: #c0d4e0; text-decoration: underline; }

.file-input {
  width: 100%;
  background: rgba(0,200,255,0.05);
  border: 1px solid rgba(0,200,255,0.15);
  color: #8ab4c8;
  padding: 8px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  box-sizing: border-box;
  cursor: pointer;
}
.file-input:focus { outline: none; }

.field-select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a7a9b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}
.field-select option { background: #0d2030; color: #c0d4e0; }

.status-badge {
  display: inline-block;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 2px;
}
.status-badge.yellow { background: rgba(255,215,0,0.15); color: #ffd700; border: 1px solid rgba(255,215,0,0.3); }
.status-badge.blue   { background: rgba(0,150,255,0.15); color: #64b5f6; border: 1px solid rgba(0,150,255,0.3); }
.status-badge.orange { background: rgba(255,140,0,0.15); color: #ff8c00; border: 1px solid rgba(255,140,0,0.3); }
.status-badge.green  { background: rgba(0,230,118,0.12); color: #00e676; border: 1px solid rgba(0,230,118,0.3); }
.status-badge.red    { background: rgba(255,32,32,0.12); color: #ff4444; border: 1px solid rgba(255,32,32,0.3); }

.modal-field-group { margin-bottom: 12px; }
.modal-field-label {
  font-size: 10px;
  color: #4a7a9b;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.modal-field-value {
  font-size: 13px;
  color: #c0d4e0;
  font-family: 'Courier New', monospace;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.profile-label { color: #4a7a9b; font-size: 11px; font-family: 'Courier New', monospace; letter-spacing: 0.5px; }
.profile-value { color: #c0d4e0; font-size: 12px; font-family: 'Courier New', monospace; }