* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #1e1e1e; color: #d4d4d4; font-family: system-ui, sans-serif; }
.login { display: grid; place-items: center; height: 100vh; }
.login form { display: flex; flex-direction: column; gap: .5rem; min-width: 280px; }
.login input, .login button { padding: .6rem; font-size: 1rem; border-radius: 6px; border: 1px solid #444; }
.login button { background: #0e639c; color: #fff; cursor: pointer; }
.error { color: #f48771; }
#app { display: flex; flex-direction: column; height: 100vh; }
#app header { display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem; background: #252526; border-bottom: 1px solid #333; }
.status { font-size: .85rem; color: #9cdcfe; }
.spacer { flex: 1; }
header .file-btn, header button { font-size: .8rem; color: #d4d4d4; background: #333; border: 1px solid #444; border-radius: 4px; padding: .2rem .5rem; cursor: pointer; }
.body { flex: 1; min-height: 0; display: flex; }
.body main { position: relative; flex: 1; min-width: 0; }
#terminal { height: 100%; padding: .25rem; }
#activity-panel { width: 280px; border-left: 1px solid #333; background: #1b1b1b; overflow: auto; padding: .5rem; }
#activity-panel h2 { font-size: .8rem; text-transform: uppercase; color: #888; margin: .25rem 0; }
#activity-list { list-style: none; margin: 0; padding: 0; font-size: .75rem; color: #b5cea8; }
#activity-list li { padding: .15rem 0; border-bottom: 1px solid #262626; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.waking { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(30,30,30,.85); color: #9cdcfe; font-size: 1.1rem; }
.waking[hidden] { display: none; }