/* =========================================================================
   Tokens
   ========================================================================= */
:root{
  --bg:            #07060b;
  --bg-elevated:   #0f0d16;
  --bg-row:        #131019;
  --border:        #2b2140;
  --border-soft:   #1c1729;
  --purple:        #9d5cff;
  --purple-dim:    #6b3fc7;
  --purple-glow:   #c79bff;
  --text:          #e9e6f7;
  --text-dim:      #837f9c;
  --text-faint:    #55516b;
  --green:         #35ff8f;
  --red:           #ff3f63;

  --font-display:  "Chakra Petch", "Segoe UI", sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, monospace;

  --radius: 2px;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  min-height: 100vh;
}

body{
  background-image:
    linear-gradient(180deg, rgba(157,92,255,0.05), transparent 40%),
    repeating-linear-gradient(0deg, rgba(157,92,255,0.025) 0px, rgba(157,92,255,0.025) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(157,92,255,0.025) 0px, rgba(157,92,255,0.025) 1px, transparent 1px, transparent 40px);
  background-attachment: fixed;
}

::selection{ background: var(--purple-dim); color: #fff; }

a{ color: inherit; }

:focus-visible{
  outline: 2px solid var(--purple-glow);
  outline-offset: 2px;
}

/* =========================================================================
   Preloader (terminal boot)
   ========================================================================= */
#preloader{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #05040a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--green);
  transition: opacity .5s ease, filter .5s ease;
}

#preloader.preloader--out{
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
}

.boot-lines{
  white-space: pre-wrap;
  max-width: 90vw;
  min-height: 1.4em;
  text-shadow: 0 0 6px rgba(53,255,143,0.5);
}

.boot-lines .boot-lines__line{ display:block; }
.boot-lines .boot-lines__line--dim{ color: var(--text-faint); }
.boot-lines .boot-lines__line--ok{ color: var(--purple-glow); }

.boot-caret{
  animation: blink 1s step-end infinite;
  color: var(--green);
}

@keyframes blink{
  0%, 49%{ opacity: 1; }
  50%, 100%{ opacity: 0; }
}

/* glitch flicker over the whole preloader, occasional */
#preloader::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--purple);
  mix-blend-mode: overlay;
  opacity: 0;
  animation: glitchFlash 3.6s steps(1) infinite;
}

@keyframes glitchFlash{
  0%, 92%, 100%{ opacity: 0; }
  93%{ opacity: .12; }
  94%{ opacity: 0; }
  95%{ opacity: .08; }
  96%{ opacity: 0; }
}

/* =========================================================================
   App shell
   ========================================================================= */
.app{
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 20px 40px;
  opacity: 1;
  transition: opacity .6s ease;
}

.app--hidden{ opacity: 0; }

/* ambient overlays */
.scanline{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(157,92,255,0.06) 50%,
    transparent 100%
  );
  height: 140px;
  animation: scan 7s linear infinite;
  mix-blend-mode: screen;
}

@keyframes scan{
  0%{ transform: translateY(-140px); }
  100%{ transform: translateY(100vh); }
}

.vignette{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  box-shadow: inset 0 0 160px rgba(0,0,0,0.75);
}

/* =========================================================================
   Header
   ========================================================================= */
.header{
  position: relative;
  padding: 18px 22px 22px;
  margin-bottom: 22px;
}

.header__corner{
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--purple-dim);
  border-style: solid;
  opacity: .8;
}
.header__corner--tl{ top: 0; left: 0; border-width: 1px 0 0 1px; }
.header__corner--tr{ top: 0; right: 0; border-width: 1px 1px 0 0; }

.brand{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 5vw, 34px);
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  text-shadow: 0 0 18px rgba(157,92,255,0.35);
}

.brand__dot{ color: var(--purple-glow); }

.subtitle{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin: 0;
  min-height: 1.4em;
}

.cursor{
  color: var(--purple-glow);
  animation: blink 1s step-end infinite;
}

/* =========================================================================
   Summary bar
   ========================================================================= */
.summary{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  margin-bottom: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

.summary__dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}

.summary__text{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.summary__meta{
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
}

.summary[data-state="operational"] .summary__dot{
  background: var(--green);
  box-shadow: 0 0 10px 2px rgba(53,255,143,0.6);
}
.summary[data-state="operational"] .summary__text{ color: var(--green); }

.summary[data-state="partial_outage"] .summary__dot{
  background: #ffb43f;
  box-shadow: 0 0 10px 2px rgba(255,180,63,0.55);
}
.summary[data-state="partial_outage"] .summary__text{ color: #ffb43f; }

.summary[data-state="major_outage"] .summary__dot{
  background: var(--red);
  box-shadow: 0 0 10px 2px rgba(255,63,99,0.6);
}
.summary[data-state="major_outage"] .summary__text{ color: var(--red); }

/* =========================================================================
   Panel + service rows
   ========================================================================= */
.panel{
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.panel__corner{
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--purple);
  border-style: solid;
}
.panel__corner--tl{ top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.panel__corner--tr{ top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.panel__corner--bl{ bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.panel__corner--br{ bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.panel__head{
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border-soft);
}

.services{
  list-style: none;
  margin: 0;
  padding: 0;
}

.service{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  transition: background .2s ease;
}

.service:last-child{ border-bottom: none; }
.service:hover{ background: var(--bg-row); }

.service__name{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
}

.service__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  transition: color .2s ease, transform .2s ease;
}
.service__link:hover{ color: var(--purple-glow); transform: translate(1px,-1px); }
.service__link svg{ width: 13px; height: 13px; }

.service__status{
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: flex-end;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-align: right;
}

.dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.dot::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  animation: pulse 1.8s ease-out infinite;
}

.dot--online{ background: var(--green); box-shadow: 0 0 8px 1px rgba(53,255,143,0.7); }
.dot--online::after{ background: rgba(53,255,143,0.35); }

.dot--offline{ background: var(--red); box-shadow: 0 0 8px 1px rgba(255,63,99,0.7); }
.dot--offline::after{ background: rgba(255,63,99,0.35); }

.dot--checking{ background: var(--text-faint); }
.dot--checking::after{ display: none; }

@keyframes pulse{
  0%{ transform: scale(0.6); opacity: .8; }
  100%{ transform: scale(1.9); opacity: 0; }
}

.status-label--online{ color: var(--green); }
.status-label--offline{ color: var(--red); }

/* =========================================================================
   Footer
   ========================================================================= */
.footer{
  margin-top: 20px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.03em;
  display: flex;
  gap: 8px;
}

.footer__sep{ opacity: .5; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 480px){
  .app{ padding: 40px 14px 32px; }
  .panel__head span:first-child{ display: none; }
  .service__status{ font-size: 11px; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .scanline, .dot::after, .cursor, .boot-caret, #preloader::after{
    animation: none !important;
  }
}