:root{
  --bg: #080808;
  --text: #e6e6e6;
  --muted: #bdbdbd;
  --dim: #9a9a9a;
  --red: #e43a3a;
  --red-soft: #c41f2d;
  --scan: rgba(255,255,255,0.03);
  --btn: #141414;
  --btn-border: #262626;
  --btn-glow: rgba(228,58,58,0.3);
  --mono: 'Share Tech Mono', monospace;
  --fz: clamp(1rem, 2.4vw, 1.15rem);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--mono);}
body{display:flex;min-height:100dvh}

#app{display:flex;flex-direction:column;gap:.5rem; width:100%; max-width:900px; margin:0 auto; padding:0 10px 12px}
#output{flex:1; overflow:auto; padding:14px 6px 0; font-size:var(--fz); line-height:1.65}
#controls{position:sticky; bottom:0; background:linear-gradient(180deg, transparent, rgba(8,8,8,0.92) 25% 100%); padding-top:.35rem}

#inputbar{display:flex;align-items:center;gap:.5rem;background:#0e0e0e;border:1px solid #1f1f1f;border-radius:10px;padding:.5rem .7rem; box-shadow:0 0 0 2px rgba(0,0,0,0.2) inset}
.prompt{color:var(--red);user-select:none}
#command{flex:1;background:transparent;border:0;color:var(--text);font:inherit;outline:none; caret-color: var(--red); font-size:var(--fz)}
.cursor{color:var(--red); opacity:.8; animation:blink 1s steps(1,end) infinite}
@keyframes blink{ 50% {opacity:0} }

.btnrow{display:grid; grid-template-columns: repeat(4, 1fr); gap:.5rem; margin-top:.5rem}
.btnrow button{
  background:var(--btn);
  border:1px solid var(--btn-border);
  color:var(--text);
  padding:.6rem .6rem;
  border-radius:10px;
  font:inherit;
  font-size:.95rem;
  letter-spacing:.04em;
  box-shadow:0 0 0 0 transparent;
}
.btnrow button:active{transform:translateY(1px)}
.btnrow button:hover, .btnrow button:focus-visible{ outline:0; box-shadow:0 0 0 3px var(--btn-glow) }
@media (min-width:720px){ .btnrow{ grid-template-columns: repeat(8, 1fr) } }

/* Output styling */
.line{white-space:pre-wrap}
.system{color:var(--muted)}
.error{color:#ff7b7b}
.granted{color:var(--red)}
.dim{color:var(--dim)}
.quote{color:#aaaaaa; font-style:italic; opacity:.95; margin:.35rem 0 .15rem}
hr.sep{border:0;border-top:1px dashed #2a2a2a;margin:.35rem 0}

/* CRT/scanline effect */
.crt{
  position:relative;
}
.crt::before{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient( to bottom, transparent 0 2px, var(--scan) 2px 3px );
  pointer-events:none; mix-blend-mode: soft-light;
}
.crt::after{
  content:""; position:absolute; inset:-20px 0 0 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.06), transparent 60%);
  pointer-events:none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cursor{animation:none}
}