:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #e8eef8; background: #050b14; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 0, #122c4b 0, #07101e 38%, #040910 80%); }
main { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(430px, 100%); padding: 38px; border: 1px solid #24354d; border-radius: 20px; background: rgba(10, 20, 35, .94); box-shadow: 0 30px 80px #0008; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand div { display: grid; }.brand strong { font-size: 17px; }.brand small { color: #8291a8; }
.mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: #04101a; background: #54d6a4; font: 700 18px monospace; }
h1 { margin: 42px 0 8px; font-size: 27px; } p { color: #9ba9bd; line-height: 1.5; }
form { margin-top: 28px; display: grid; gap: 18px; } label { display: grid; gap: 8px; color: #c7d2e2; font-size: 14px; }
input, select, button { border-radius: 9px; border: 1px solid #31425a; font: inherit; }
input, select { padding: 12px 13px; color: #edf3fb; background: #091321; outline: none; }
input:focus, select:focus { border-color: #54d6a4; box-shadow: 0 0 0 3px #54d6a422; }
button { padding: 11px 17px; border-color: #54d6a4; color: #04130d; background: #54d6a4; cursor: pointer; font-weight: 650; }
button.secondary { color: #dbe5f3; border-color: #31425a; background: transparent; }
button:disabled { opacity: .45; cursor: not-allowed; }.error { min-height: 20px; margin: 0; color: #ff8797; font-size: 14px; }
.shell { width: min(1500px, 100%); height: calc(100vh - 48px); display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; border: 1px solid #23344b; border-radius: 16px; background: #07101e; box-shadow: 0 28px 80px #0009; }
header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 18px; border-bottom: 1px solid #1d2b3e; }
.controls { display: flex; gap: 9px; }.controls select { min-width: 230px; padding: 9px 12px; }
.status { display: flex; gap: 8px; align-items: center; padding: 8px 18px; color: #8999af; font-size: 12px; background: #091525; }
.status span { width: 7px; height: 7px; border-radius: 50%; background: #54d6a4; box-shadow: 0 0 10px #54d6a4; }
#terminal { min-height: 0; padding: 12px; }
@media (max-width: 700px) { main { padding: 0; }.shell { height: 100vh; border: 0; border-radius: 0; } header { align-items: flex-start; }.controls { flex-wrap: wrap; justify-content: flex-end; }.controls select { width: 100%; }.login-card { border-radius: 0; } }