* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #111418; color: #e6e6e6; font-family: system-ui, sans-serif; }

body.login { display: flex; align-items: center; justify-content: center; }
.login form { width: min(320px, 90vw); display: flex; flex-direction: column; gap: 12px; }
.login h1 { margin: 0; font-size: 22px; }
.login p { margin: 0 0 8px; color: #9aa3ad; font-size: 14px; }
.login input, .login button { font-size: 16px; padding: 10px 12px; border-radius: 6px; border: 1px solid #2c333b; background: #1a1f25; color: inherit; }
.login button { background: #2f6feb; border-color: #2f6feb; cursor: pointer; }

body.term { display: flex; flex-direction: column; height: 100dvh; }
header { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; font-size: 12px; color: #9aa3ad; border-bottom: 1px solid #22282f; }
header form { margin: 0; }
header .actions { display: flex; gap: 6px; align-items: center; }
header button, #keys button { font-size: 12px; padding: 4px 8px; border-radius: 4px; border: 1px solid #2c333b; background: #1a1f25; color: #e6e6e6; cursor: pointer; }
#terminal { flex: 1; min-height: 0; padding: 4px; }
#keys { display: flex; gap: 4px; padding: 4px; overflow-x: auto; border-top: 1px solid #22282f; }
#keys button { flex: 0 0 auto; font-size: 14px; padding: 8px 10px; }
@media (pointer: fine) { #keys { display: none; } }