*,:before,:after{box-sizing:border-box}body{margin:0}#root{height:100vh}*,:before,:after{box-sizing:border-box;margin:0;padding:0}.app{color:#efeff1;background:#0e0e10;flex-direction:column;height:100vh;font-family:system-ui,sans-serif;display:flex}.app-header{background:#18181b;border-bottom:1px solid #2a2a2e;flex-shrink:0;align-items:center;gap:1rem;padding:.75rem 1.25rem;display:flex}.app-header h1{font-size:.95rem;font-weight:600}.status{font-size:.8rem}.status-open{color:#00c780}.status-error{color:#ff6b6b}.status-connecting{color:#adadb8}.app-main{flex:1;display:flex;overflow:hidden}.zone{flex-direction:column;flex:1;padding:1rem;display:flex;overflow:hidden}.zone+.zone{border-left:1px solid #2a2a2e}.zone h2{text-transform:uppercase;letter-spacing:.06em;color:#adadb8;flex-shrink:0;margin-bottom:.75rem;font-size:.75rem;font-weight:600}.chatter-list,.event-feed{flex:1;list-style:none;overflow-y:auto}.chatter-list li{padding:.25rem 0;font-size:.875rem}.event-feed li{align-items:baseline;gap:.4rem;padding:.25rem 0;font-size:.875rem;display:flex}.event-joined .event-icon{color:#00c780}.event-left .event-icon{color:#ff6b6b}.event-time{color:#adadb8;margin-left:auto;font-size:.7rem}.logout-link{color:#adadb8;margin-left:auto;font-size:.8rem;text-decoration:none}.logout-link:hover{color:#efeff1}.loading-screen{color:#adadb8;background:#0e0e10;justify-content:center;align-items:center;height:100vh;font-family:system-ui,sans-serif;display:flex}.landing{color:#efeff1;text-align:center;background:#0e0e10;flex-direction:column;justify-content:center;align-items:center;gap:1rem;height:100vh;padding:0 1.5rem;font-family:system-ui,sans-serif;display:flex}.landing h1{font-size:1.75rem;font-weight:700}.landing p{color:#adadb8;max-width:32rem}.login-button{color:#fff;background:#9147ff;border-radius:6px;margin-top:.5rem;padding:.65rem 1.5rem;font-size:.95rem;font-weight:600;text-decoration:none}.login-button:hover{background:#7d2ff2}