:root{
  --page:#070b10;
  --case:#c7c2ad;
  --case-dark:#777467;
  --screen:#07121f;
  --screen-mid:#0a1d30;
  --text:#d4e8ff;
  --dim:#7c98b6;
  --bright:#f2f8ff;
  --accent:#7db5e8;
  --line:rgba(182,216,255,.22);
  --shadow:rgba(0,0,0,.58);
  --mono:"IBM Plex Mono","Courier New",monospace;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  display:grid;
  place-items:center;
  padding:clamp(10px,3vw,34px);
  background:
    radial-gradient(circle at 50% 12%,#27313b 0,#11161c 32%,#05070a 78%);
  color:var(--text);
  font-family:var(--mono);
}
.ibm-shell{
  width:min(1180px,100%);
  padding:18px;
  border:1px solid #e2deca;
  border-radius:10px;
  background:linear-gradient(145deg,#d7d2bd,#aaa58f 46%,#807d70);
  box-shadow:0 25px 70px var(--shadow),inset 0 1px #fff;
}
.system-header,.system-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  color:#252a2f;
}
.system-header{padding:2px 8px 15px}
.system-id{margin:0 0 5px;font-size:.72rem;letter-spacing:.16em}
.system-header h1{margin:0;font-size:clamp(1.25rem,3vw,2rem);letter-spacing:.08em}
.system-status{display:grid;gap:4px;text-align:right;font-size:.69rem}
.system-status strong{color:#070b10}
.monitor-frame{
  position:relative;
  overflow:hidden;
  border:16px solid #34383b;
  border-radius:18px;
  background:#03080d;
  box-shadow:inset 0 0 0 2px #111,inset 0 0 85px #000,0 3px 5px rgba(255,255,255,.25);
}
.monitor-label{
  display:flex;
  justify-content:space-between;
  padding:7px 14px;
  border-bottom:1px solid #303a45;
  background:#171c21;
  color:#8f9aa5;
  font-size:.67rem;
  letter-spacing:.08em;
}
.terminal-screen{
  position:relative;
  z-index:2;
  min-height:650px;
  max-height:75vh;
  overflow:auto;
  padding:clamp(18px,3vw,34px);
  background:
    radial-gradient(ellipse at center,rgba(37,94,145,.12),transparent 70%),
    linear-gradient(#06111d,#071522 60%,#050e18);
  color:var(--text);
  font-size:clamp(.82rem,1.35vw,1rem);
  line-height:1.5;
  outline:none;
  text-shadow:0 0 5px rgba(150,205,255,.22);
}
.terminal-output{white-space:pre-wrap;word-break:break-word}
.output-line{margin:0 0 .2rem}
.output-line.system{color:var(--bright)}
.output-line.dim{color:var(--dim)}
.output-line.error{color:#ffb2a8}
.output-line.success{color:#c8f8d0}
.command-line{display:flex;align-items:center;gap:.6ch;margin-top:.5rem}
.prompt{color:var(--bright);white-space:nowrap}
.command-input{
  flex:1;
  min-width:2ch;
  border:0;
  outline:0;
  padding:0;
  background:transparent;
  color:var(--bright);
  font:inherit;
  caret-color:var(--bright);
  text-transform:none;
}
.command-input:focus{box-shadow:none}
.crt-overlay,.screen-glare{position:absolute;inset:31px 0 0;pointer-events:none;z-index:4}
.crt-overlay{
  background:
    repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.18) 3px,rgba(0,0,0,.18) 4px);
  opacity:.7;
}
.screen-glare{
  background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 24%,transparent 72%,rgba(255,255,255,.025));
  box-shadow:inset 0 0 95px rgba(0,0,0,.72);
}
.system-footer{padding:12px 8px 0;font-size:.7rem}
.system-footer button{
  border:1px solid #5f625b;
  background:#b9b5a3;
  color:#22272a;
  padding:7px 10px;
  font:inherit;
  cursor:pointer;
}
.terminal-screen.flash{animation:screenFlash .22s steps(2)}
@keyframes screenFlash{50%{filter:brightness(1.45);transform:translateX(1px)}}
@media(max-width:720px){
  body{padding:0}.ibm-shell{border-radius:0;padding:8px;min-height:100vh}.system-header{align-items:flex-start;flex-direction:column}.system-status{text-align:left}.monitor-frame{border-width:8px;border-radius:8px}.terminal-screen{min-height:72vh}.system-footer{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.terminal-screen.flash{animation:none}}