:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #0b0e14; color: #e7eaf0; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #0b0e14; }
button, input { font: inherit; }
button { border: 0; border-radius: .35rem; padding: .65rem 1rem; background: #4d7cff; color: white; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondary { background: #293142; }
.login-page { display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(100%, 26rem); padding: 2rem; border: 1px solid #2a3140; border-radius: .75rem; background: #131823; }
h1 { margin: 0 0 1rem; font-size: 1.4rem; }
label { display: block; margin: .8rem 0 .35rem; }
input[type="text"], input[type="password"] { width: 100%; border: 1px solid #374056; border-radius: .35rem; padding: .7rem; background: #090c12; color: inherit; }
.login-card button { width: 100%; margin-top: 1rem; }
.error { min-height: 1.3rem; color: #ff9191; }
.console-page { max-width: 1400px; margin: auto; padding: 1rem; }
header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.status { font-size: .9rem; color: #ff9e9e; }
.status.connected { color: #7be6a2; }
.status.reconnecting { color: #ffd57b; }
.offline { border: 1px solid #7c5632; border-radius: .35rem; padding: .7rem; background: #352615; color: #ffd7a6; }
.console { height: 65vh; overflow: auto; padding: .75rem; border: 1px solid #293142; border-radius: .4rem; background: #05070a; font: .88rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.line { display: grid; grid-template-columns: 5.5rem 5rem 1fr; gap: .5rem; }
.line time { color: #6f7a91; }
.line .level { color: #75baff; }
.line.level-warning .level, .line.level-warn .level { color: #ffd36d; }
.line.level-severe .level, .line.level-error .level { color: #ff7474; }
.toolbar { display: flex; align-items: center; gap: .6rem; margin: .7rem 0; flex-wrap: wrap; }
.toolbar label { margin: 0 auto 0 0; }
.command-form { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
@media (max-width: 600px) { .line { grid-template-columns: 4.5rem 4.5rem 1fr; } .console { height: 60vh; } }