:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #101513; color: #f3f7f5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #23483b, #101513 60%); }
.lobby-shell { width: min(92vw, 760px); margin: 0 auto; padding: 4rem 0; }
.eyebrow { color: #75dfa9; text-transform: uppercase; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(2.5rem, 8vw, 4.5rem); }
.panel, dialog { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid #426356; border-radius: 1rem; background: #18211e; color: inherit; }
.create-action { margin-top: 1.5rem; }
.create-action button { width: 100%; }
form { display: grid; gap: 1rem; }
label { display: grid; gap: .4rem; }
input, button { min-height: 2.75rem; border-radius: .55rem; font: inherit; }
input { border: 1px solid #5e766c; padding: 0 .8rem; background: #0e1411; color: inherit; }
button { border: 0; padding: 0 1rem; background: #75dfa9; color: #102019; cursor: pointer; font-weight: 700; }
button.secondary { border: 1px solid #5e766c; background: transparent; color: inherit; }
.list-heading, .actions, li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
li { padding: 1rem 0; border-bottom: 1px solid #31433c; }
li div { display: grid; gap: .25rem; }
li span { color: #b6c8c0; }
dialog { width: min(92vw, 440px); margin: auto; }
dialog::backdrop { background: #000a; }
.error { min-height: 1.5em; color: #ffadad; }