* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: #e5e7eb;
  background: #0b0910;
  font-family: "Segoe UI", Arial, sans-serif;
}

header {
  padding: 28px 5%;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  background: #15111e;
  border-bottom: 1px solid #3b2a50;
}

h1 { margin: 2px 0; color: white; font-size: clamp(30px, 5vw, 48px); }
header p { margin: 0; color: #aaa3b5; }
.eyebrow { color: #c4b5fd; font-size: 12px; font-weight: bold; letter-spacing: 2px; }
nav { display: flex; flex-wrap: wrap; gap: 10px; }
nav a, button { padding: 10px 14px; color: white; background: #6d28d9; border: 0; border-radius: 4px; font-weight: bold; text-decoration: none; cursor: pointer; }
nav a:hover, button:hover { background: #7c3aed; }

main { width: min(1400px, 92%); margin: 28px auto; }
.notice { padding: 12px 16px; color: #ddd6e8; background: #251a31; border-left: 4px solid #c4b5fd; }
.workspace { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 18px; }
.panel { min-width: 0; overflow: hidden; background: #111018; border: 1px solid #383343; border-radius: 7px; box-shadow: 0 18px 45px #0008; }
.panel-bar { min-height: 46px; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; color: #a9a2b4; background: #211c29; border-bottom: 1px solid #383343; font: 12px Consolas, monospace; }
.file-tab { align-self: stretch; padding: 14px 12px; color: white; background: #111018; border-top: 2px solid #c4b5fd; }
.panel-bar button { padding: 7px 10px; font-size: 12px; }
pre { min-height: 540px; margin: 0; padding: 24px; overflow: auto; color: #d8dee9; font: 14px/1.65 Consolas, monospace; tab-size: 4; }
.keyword { color: #c792ea; } .function { color: #82aaff; } .string { color: #c3e88d; } .number { color: #f78c6c; }

.terminal { min-height: 475px; max-height: 475px; padding: 22px; overflow-y: auto; color: #e7e5e4; background: #07070a; font: 14px/1.55 Consolas, monospace; }
.terminal p { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.prompt { color: #c4b5fd; }
.user-entry { color: #f0abfc; }
.success { color: #86efac; font-weight: bold; }
.error { color: #fca5a5; }
#terminal-form { padding: 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; background: #0d0c12; border-top: 1px solid #383343; }
.input-marker { color: #c4b5fd; font: bold 18px Consolas, monospace; }
#terminal-input { width: 100%; padding: 10px; color: white; background: #18151f; border: 1px solid #51465f; border-radius: 4px; font: 15px Consolas, monospace; outline: none; }
#terminal-input:focus { border-color: #c4b5fd; box-shadow: 0 0 0 2px #c4b5fd33; }
.input-help { margin: 0; padding: 10px 15px; color: #9f98aa; background: #15121b; font-size: 12px; }
.screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  header { align-items: flex-start; flex-direction: column; }
  .workspace { grid-template-columns: 1fr; }
  pre { min-height: auto; max-height: 430px; }
}