:root {
  --bg: #040816; --card: #0d1528; --line: rgba(255,255,255,0.08);
  --text: #ffffff; --muted: rgba(255,255,255,0.6);
  --blue: #3b82f6; --cyan: #22d3ee; --violet: #8b5cf6;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); padding-top: 120px; }
.sys-header { position: fixed; top: 0; width: 100%; display: flex; justify-content: space-between; padding: 20px 4%; border-bottom: 1px solid var(--line); background: rgba(4,8,22,0.9); backdrop-filter: blur(10px); }
.sys-exit { color: var(--cyan); text-decoration: none; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.sys-container { width: min(1200px, 92%); margin: auto; }
.engine-split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 50px; }
.control-box { background: var(--card); border: 1px solid var(--line); padding: 40px; border-radius: 24px; }
.query-input-wrap { display: flex; gap: 10px; background: rgba(0,0,0,0.3); border: 1px solid var(--line); padding: 8px; border-radius: 14px; }
.query-input-wrap input { background: none; border: none; color: #fff; width: 100%; padding: 10px; font-family: inherit; font-size: 0.95rem; }
.query-input-wrap input:focus { outline: none; }
.query-input-wrap button { background: linear-gradient(135deg, var(--blue), var(--violet)); border: none; color: #fff; padding: 0 24px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: opacity 200ms; }
.query-input-wrap button:hover { opacity: 0.9; }
.telemetry-box { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 24px; padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.t-row { display: flex; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.t-row:last-child { border: none; padding: 0; }
.t-row span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; color: var(--muted); }
.text-cyan { color: var(--cyan); }.text-violet { color: var(--violet); }
@media(max-width: 900px) { .engine-split { grid-template-columns: 1fr; } }