/* ============================================================
   THEME — gruvbox-material, warm dark. Not the default acid-green.
   ============================================================ */
:root{
  --bg:        #1d2021;  /* page background, warm charcoal */
  --bg-term:   #282828;  /* terminal surface */
  --bg-card:   #32302f;  /* status cards */
  --fg:        #ebdbb2;  /* warm cream — primary text */
  --fg-dim:    #a89984;  /* muted */
  --fg-faint:  #665c54;  /* very muted, logs */
  --gold:      #d8a657;  /* prompt / accent */
  --teal:      #89b482;  /* paths, links */
  --blue:      #7daea3;  /* secondary */
  --green:     #a9b665;  /* success */
  --red:       #ea6962;  /* error / danger */
  --orange:    #e78a4e;  /* warning */
  --border:    #3c3836;
  --glow:      0 0 1px rgba(216,166,87,.4);
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* faint scanline atmosphere — subtle, killed for reduced-motion */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.06) 3px,
    rgba(0,0,0,0) 4px
  );
  z-index:5;
  opacity:.5;
}

a{ color:var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; }

::selection{ background:var(--gold); color:var(--bg); }

/* ============================================================ NAVBAR */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.8rem clamp(1rem,4vw,2.5rem);
  background:rgba(29,32,33,.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.brand{
  color:var(--fg);
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
}
.brand .sigil{ color:var(--gold); }
.brand .dot{ color:var(--fg-dim); }
.nav-links{ display:flex; gap:.4rem; }
.nav-links a{
  color:var(--fg-dim);
  padding:.25rem .7rem;
  border:1px solid transparent;
  border-radius:5px;
  font-weight:500;
}
.nav-links a:hover{ color:var(--fg); text-decoration:none; background:var(--bg-term); }
.nav-links a.active{
  color:var(--gold);
  border-color:var(--border);
  background:var(--bg-term);
}
.nav-links a.active::before{ content:"> "; color:var(--gold); }

/* ============================================================ LAYOUT */
main{
  flex:1;
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:clamp(1rem,3vw,2rem) clamp(1rem,4vw,2rem) 1rem;
}
.page{ display:none; }
.page.active{ display:block; animation:fade .35s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

/* ============================================================ TERMINAL WINDOW */
.window{
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--bg-term);
  box-shadow:0 18px 50px -25px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.2);
  overflow:hidden;
}
.titlebar{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .9rem;
  background:#1f2223;
  border-bottom:1px solid var(--border);
  font-size:13px;
  color:var(--fg-dim);
}
.conn-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.titlebar .who{ color:var(--fg); }
.titlebar .tag{ margin-left:auto; color:var(--fg-faint); }

.terminal{
  padding:1rem clamp(.9rem,2.5vw,1.3rem) 1.1rem;
  height:min(64vh,560px);
  overflow-y:auto;
  font-size:14px;
  cursor:text;
}
.terminal::-webkit-scrollbar{ width:9px; }
.terminal::-webkit-scrollbar-thumb{ background:var(--border); border-radius:9px; }
.terminal::-webkit-scrollbar-track{ background:transparent; }

.line{ white-space:pre-wrap; word-break:break-word; }
.line.cmd-echo{ color:var(--fg); }
.c-prompt{ color:var(--gold); }
.c-user{ color:var(--green); }
.c-path{ color:var(--teal); }
.c-dim{ color:var(--fg-dim); }
.c-faint{ color:var(--fg-faint); }
.c-gold{ color:var(--gold); }
.c-teal{ color:var(--teal); }
.c-blue{ color:var(--blue); }
.c-green{ color:var(--green); }
.c-red{ color:var(--red); }
.c-orange{ color:var(--orange); }
.c-key{ color:var(--gold); font-weight:600; }

/* input line */
.input-line{ display:flex; align-items:baseline; flex-wrap:wrap; }
.input-line .ps1{ flex:0 0 auto; margin-right:.5ch; }
.input-wrap{ position:relative; flex:1 1 auto; min-width:2ch; }
#cmd{
  width:100%;
  background:transparent; border:none; outline:none;
  color:var(--fg); font:inherit;
  caret-color:transparent;
  padding:0;
}
#mirror{
  position:absolute; left:0; top:0;
  visibility:hidden; white-space:pre;
  font:inherit;
}
#cursor{
  position:absolute; top:0; left:0;
  width:.6ch; height:1.25em;
  background:var(--gold);
  box-shadow:0 0 6px rgba(216,166,87,.7);
  transform:translateY(.12em);
  animation:blink 1.05s step-end infinite;
}
.input-wrap.unfocused #cursor{ animation:none; opacity:.3; }
@keyframes blink{ 50%{opacity:0;} }

/* ============================================================ STATUS PAGE */
.status-head{ margin-bottom:1.3rem; }
.status-head h1{
  font-size:clamp(1.4rem,4vw,2rem);
  font-weight:700; margin:.2rem 0 .3rem;
  letter-spacing:-.01em;
}
.status-head .sub{ color:var(--fg-dim); font-size:14px; }

.banner{
  display:flex; align-items:center; gap:.8rem;
  border:1px solid var(--border);
  border-left:4px solid var(--fg-faint);
  border-radius:8px;
  background:var(--bg-term);
  padding:.9rem 1.1rem;
  margin-bottom:1.4rem;
  transition:border-color .4s;
}
.banner.ok{ border-left-color:var(--green); }
.banner .b-dot{
  width:11px; height:11px; border-radius:50%;
  background:var(--fg-faint); flex:0 0 auto;
}
.banner.ok .b-dot{ background:var(--green); box-shadow:0 0 10px var(--green); }
.banner .b-text{ font-weight:600; letter-spacing:.03em; }
.banner .b-sub{ color:var(--fg-dim); font-size:13px; margin-left:auto; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:.9rem;
}
.card{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg-card);
  padding:1rem 1.1rem 1.1rem;
  display:flex; flex-direction:column;
  min-height:188px;
}
.card .q{
  color:var(--fg);
  font-weight:600;
  margin-bottom:.6rem;
  display:flex; gap:.5rem; align-items:baseline;
}
.card .q .spin{ color:var(--gold); width:1ch; flex:0 0 auto; }
.card .log{
  font-size:12.5px;
  color:var(--fg-faint);
  flex:1 1 auto;
  white-space:pre-wrap;
  margin-bottom:.5rem;
}
.card .log .ok{ color:var(--green); }
.card .verdict{
  font-size:2.1rem;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
  opacity:0;
  transform:translateY(6px);
}
.card .verdict.show{ opacity:1; transform:none; transition:all .4s ease; }
.card .verdict.good{ color:var(--green); text-shadow:0 0 18px rgba(169,182,101,.35); }
.card .verdict.warn{ color:var(--orange); text-shadow:0 0 18px rgba(231,138,78,.3); }
.card .verdict.bad{ color:var(--red); text-shadow:0 0 18px rgba(234,105,98,.3); }
.card .note{ color:var(--fg-dim); font-size:12.5px; margin-top:.35rem; min-height:1.2em; }

.rerun{
  margin-top:1.4rem;
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent;
  color:var(--gold);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.5rem .9rem;
  font:inherit; font-size:13px; cursor:pointer;
}
.rerun:hover{ background:var(--bg-term); border-color:var(--gold); }
.rerun:disabled{ opacity:.4; cursor:not-allowed; }

/* ============================================================ FOOTER */
footer{
  text-align:center;
  color:var(--fg-faint);
  font-size:12px;
  padding:1.6rem 1rem 2rem;
}
footer .sep{ color:var(--border); margin:0 .5ch; }

/* focus visibility for keyboard users */
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:3px; }

@media (max-width:560px){
  body{ font-size:14px; }
  .terminal{ font-size:13px; height:62vh; }
  .nav-links a{ padding:.25rem .55rem; }
  .card .verdict{ font-size:1.9rem; }
}

/* matrix rain overlay (white-rabbit easter egg) */
.matrix-rain{
  position:fixed; inset:0;
  z-index:9999;
  cursor:pointer;
  background:rgba(29,32,33,.55);
  transition:opacity .4s ease;
}
.matrix-rain canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.matrix-hint{
  position:absolute; bottom:1.3rem; left:0; right:0;
  text-align:center;
  color:var(--green);
  font-family:var(--mono);
  font-size:12px; letter-spacing:.14em;
  opacity:.65;
}

/* konami celebration */
body.konami{ animation:konamiFlash 2.2s ease; }
@keyframes konamiFlash{
  0%,100%{ background:var(--bg); }
  15%{ background:#23282a; }
  45%{ background:#1f2731; }
  70%{ background:#262321; }
}

/* flashbang — the light-theme punishment */
.flashbang{
  position:fixed; inset:0;
  z-index:10000;
  background:#ffffff;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.flashbang.on{ opacity:1; }
.flashbang.off{ opacity:0; transition:opacity .8s ease; }

@media (prefers-reduced-motion:reduce){
  body::after{ display:none; }
  #cursor, .conn-dot{ animation:none; }
  .page.active{ animation:none; }
  .verdict.show{ transition:none; }
  body.konami{ animation:none; }
  .flashbang{ display:none; }
}