/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@600;700&display=swap');

:root {
  --bg:        #02080f;
  --bg2:       #060e18;
  --bg3:       #0a1520;
  --bg4:       #0f1e2e;
  --bg5:       #162336;
  --teal:      #00e5b4;
  --tealdk:    #00b88f;
  --tealdim:   rgba(0,229,180,.08);
  --tealline:  rgba(0,229,180,.15);
  --gold:      #ffb020;
  --golddim:   rgba(255,176,32,.08);
  --goldline:  rgba(255,176,32,.2);
  --red:       #ff3d55;
  --reddim:    rgba(255,61,85,.08);
  --redline:   rgba(255,61,85,.2);
  --blue:      #4d9fff;
  --bluedim:   rgba(77,159,255,.08);
  --purple:    #b06bff;
  --purpledim: rgba(176,107,255,.08);
  --white:     #c8dce8;
  --white2:    #8aa4b8;
  --gray:      #3a5268;
  --gray2:     #162030;
  --gray3:     #1e2e40;
  --line:      rgba(0,229,180,.07);
  --font:      'IBM Plex Sans', sans-serif;
  --condensed: 'IBM Plex Sans Condensed', sans-serif;
  --mono:      'IBM Plex Mono', monospace;
}

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

html, body {
  height: 100%; background: var(--bg);
  color: var(--white); font-family: var(--font);
  font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray2); border-radius: 2px; }

/* ── BADGES ── */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 3px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
}
.badge-teal   { background: var(--tealdim); color: var(--teal);   border: 1px solid var(--tealline); }
.badge-gold   { background: var(--golddim); color: var(--gold);   border: 1px solid var(--goldline); }
.badge-red    { background: var(--reddim);  color: var(--red);    border: 1px solid var(--redline);  }
.badge-blue   { background: var(--bluedim); color: var(--blue);   border: 1px solid rgba(77,159,255,.2); }
.badge-gray   { background: var(--bg3);     color: var(--white2); border: 1px solid var(--gray2); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 4px;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .12s; border: none;
  text-decoration: none; letter-spacing: .01em;
}
.btn-primary   { background: var(--teal); color: var(--bg); }
.btn-primary:hover { background: var(--tealdk); }
.btn-secondary { background: var(--bg3); color: var(--white2); border: 1px solid var(--gray2); }
.btn-secondary:hover { border-color: var(--teal); color: var(--teal); }
.btn-ghost     { background: transparent; color: var(--white2); border: 1px solid var(--gray2); }
.btn-ghost:hover { color: var(--white); border-color: var(--gray3); }
.btn-danger    { background: var(--reddim); color: var(--red); border: 1px solid var(--redline); }
.btn-danger:hover { background: var(--red); color: white; }
.btn:disabled  { opacity: .35; cursor: not-allowed; }

/* ── INPUTS ── */
.input {
  width: 100%; background: var(--bg3); border: 1px solid var(--gray2);
  border-radius: 4px; padding: 8px 12px;
  font-family: var(--font); font-size: 13px; color: var(--white);
  outline: none; transition: border-color .12s;
}
.input:focus { border-color: var(--teal); }
.input::placeholder { color: var(--gray); }

/* ── TABLES ── */
.table { width: 100%; border-collapse: collapse; }
.table th {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--gray); padding: 7px 10px; text-align: left;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td {
  padding: 9px 10px; border-bottom: 1px solid rgba(0,229,180,.04);
  font-size: 12px; vertical-align: middle;
}
.table tbody tr { transition: background .1s; cursor: pointer; }
.table tbody tr:hover td { background: rgba(0,229,180,.03); }
.table tbody tr:last-child td { border-bottom: none; }

/* ── SEVERITY ── */
.sev { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.sev-5 { background: var(--red);  box-shadow: 0 0 5px var(--red); }
.sev-4 { background: var(--gold); box-shadow: 0 0 5px var(--gold); }
.sev-3 { background: var(--blue); }
.sev-2 { background: var(--teal); }
.sev-1 { background: var(--gray); }

/* ── SPINNER ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 14px; height: 14px; border: 1.5px solid var(--gray2);
  border-top-color: var(--teal); border-radius: 50%;
  animation: spin .7s linear infinite; display: inline-block; flex-shrink: 0;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up   { animation: fadeUp .3s ease-out both; }
.fade-up-1 { animation-delay: .06s; }
.fade-up-2 { animation-delay: .12s; }
.fade-up-3 { animation-delay: .18s; }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.blink { animation: blink 1.4s infinite; }

/* ── SCAN LINE ── */
@keyframes scan {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(500%); opacity: 0; }
}