:root{
  --bg:#0e1220;
  --panel:#1a1f3a;
  --line:#ffcc00;
  --text:#ffffff;
  --muted:#bcd6ff;
  --good:#4dff9c;
  --bad:#ff5a7a;
  --accent:#7cf3ff;
  --accent2:#ff9de2;
  --term:#0a1022;
  --term2:#111935;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
}

body{
  min-height:100vh;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color:var(--text);
  background:
    radial-gradient(circle at top, rgba(124,243,255,0.08), transparent 35%),
    linear-gradient(rgba(10,12,30,0.92), rgba(10,12,30,0.94)),
    url("background.jpg") center center / cover no-repeat fixed;
  overflow-x:hidden;
}

.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.08;
  background-image:
    linear-gradient(transparent 50%, rgba(255,255,255,.04) 50%);
  background-size:100% 4px;
}

.wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}

.terminal{
  width:min(980px, 100%);
  border:3px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg, #151a32, #1e2753);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.04) inset,
    0 18px 60px rgba(0,0,0,.45),
    2px 2px 0 #000;
}

.term-top{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 16px;
  border-bottom:2px solid rgba(255,204,0,.35);
  background:linear-gradient(180deg, #2b3365, #1c244b);
}

.lights{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}

.light{
  width:13px;
  height:13px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  box-shadow:0 0 10px rgba(255,255,255,.15);
}
.light.red{background:#ff5a7a;}
.light.yellow{background:#ffcc00;}
.light.green{background:#4dff9c;}

.term-title{
  color:var(--muted);
  letter-spacing:.08em;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.screen{
  padding:22px;
  background:
    linear-gradient(rgba(8,14,28,.84), rgba(8,14,28,.9)),
    linear-gradient(180deg, #0d1430, #0c1228);
}

.hero{
  margin-bottom:16px;
  padding:16px;
  border:2px dashed rgba(124,243,255,.35);
  background:rgba(7,13,26,.55);
  box-shadow:inset 0 0 14px rgba(124,243,255,.06);
  overflow:auto;
}

.ascii{
  color:var(--accent);
  font-size:12px;
  line-height:1.25;
  white-space:pre;
  text-shadow:
    0 0 8px rgba(124,243,255,.3),
    1px 1px 0 #000;
}

.subascii{
  margin-top:10px;
  color:var(--accent2);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.line{
  margin:7px 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
  word-break:break-word;
}

.prompt{
  color:var(--good);
}

.kw{
  color:#ffcc00;
  font-weight:700;
  text-shadow:0 0 8px rgba(255,204,0,.25);
}

.divider{
  height:1px;
  margin:18px 0;
  background:linear-gradient(to right, transparent, rgba(255,204,0,.45), transparent);
}

.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:16px;
}

.inlineform{
  margin:0;
}

button{
  appearance:none;
  border:3px solid #fff;
  background:linear-gradient(135deg, #3a7dff, #5fd3ff);
  color:#071020;
  font-family:inherit;
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:13px 16px;
  border-radius:8px;
  cursor:pointer;
  box-shadow:
    2px 2px 0 #000,
    inset 0 0 0 2px rgba(255,255,255,.22);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}

button:hover{
  background:linear-gradient(135deg, #5fd3ff, #ff9de2);
  transform:translateY(-1px);
}

button:active{
  transform:translateY(1px);
  box-shadow:1px 1px 0 #000;
}

.tabbtn.active{
  background:linear-gradient(135deg, #ffcc00, #ffe88a);
}

.ghostbtn{
  background:linear-gradient(135deg, #2a355f, #475593);
  color:#fff;
  border-color:var(--accent);
}

.tab{
  display:none;
}

.tab.active{
  display:block;
}

.panel,
.formpanel{
  border:2px dashed rgba(255,204,0,.55);
  background:linear-gradient(145deg, #141a33, #1f2750);
  padding:16px;
  border-radius:10px;
  box-shadow:
    1px 1px 0 #000,
    inset 0 0 6px rgba(255,255,255,0.04);
}

.formpanel{
  margin-top:14px;
}

.steps{
  margin:10px 0 0 18px;
  padding:0;
  color:var(--muted);
  line-height:1.6;
  font-size:14px;
}

.steps li{margin:6px 0;}

label{
  display:block;
  margin-top:14px;
  margin-bottom:6px;
  color:var(--accent);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

input{
  width:100%;
  padding:13px 14px;
  border:2px solid var(--accent);
  border-radius:8px;
  background:#0c1230;
  color:#fff;
  font-family:inherit;
  outline:none;
  box-shadow:
    inset 0 0 4px rgba(255,255,255,0.08),
    1px 1px 0 #000;
}

input:focus{
  border-color:var(--accent2);
  box-shadow:
    0 0 0 2px rgba(255,157,226,.22),
    inset 0 0 4px rgba(255,255,255,0.12);
}

.formrow{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}

.status{
  margin-top:16px;
  padding:14px;
  border:3px solid;
  border-radius:10px;
  box-shadow:
    2px 2px 0 #000,
    inset 0 0 6px rgba(255,255,255,0.08);
}

.status.ok{
  border-color:var(--good);
  color:var(--good);
  background:rgba(77,255,156,.08);
}

.status.no{
  border-color:var(--bad);
  color:var(--bad);
  background:rgba(255,90,122,.08);
}

.status-head{
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:14px;
}

.status-sub{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  text-transform:none;
  letter-spacing:0;
}

.footerlog{
  opacity:.9;
}

a{
  color:#7cf3ff;
  text-decoration:none;
  font-weight:700;
}

a:hover{
  color:#ff9de2;
  text-decoration:underline;
}

@media (max-width: 700px){
  .wrap{
    padding:14px;
  }

  .screen{
    padding:14px;
  }

  .ascii{
    font-size:7px;
  }

  .subascii{
    font-size:11px;
    letter-spacing:.1em;
  }

  button{
    width:100%;
  }

  .toolbar{
    flex-direction:column;
  }

  .inlineform{
    width:100%;
  }

  .inlineform button{
    width:100%;
  }
}