:root{--brand-purple: #651ff0;--brand-purple-dark: #4d0099;--bg: #f2f2f5;--surface: #ffffff;--text: #2a1250;--text-muted: #6b6b7a;--danger: #c0392b;--radius: 12px;--max-width: 640px}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,Segoe UI,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}h1,h2,h3,h4{margin:0 0 .5rem;font-weight:600}header.app-header{background:var(--brand-purple);color:#fff;padding:.75rem 1rem;text-align:center}header.app-header h1{font-size:1.5rem;margin:0}header.app-header a{color:#fff;text-decoration:none}main{max-width:var(--max-width);margin:1.25rem auto;padding:0 1rem;display:flex;flex-direction:column;gap:1rem}.card{background:var(--surface);border-radius:var(--radius);padding:1.25rem;box-shadow:0 1px 3px #00000014}.stack{display:flex;flex-direction:column;gap:.75rem}.row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.row.space-between{justify-content:space-between}button,input[type=submit]{font:inherit;background:var(--brand-purple);color:#fff;border:0;border-radius:var(--radius);padding:.65rem 1.1rem;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{background:transparent;color:var(--brand-purple-dark);border:2px solid var(--brand-purple)}button.danger{background:var(--danger)}input[type=text],input[type=email]{font:inherit;padding:.65rem .75rem;border-radius:var(--radius);border:2px solid #ddd;width:100%}.room-code{font-size:2.75rem;letter-spacing:.15em;text-align:center;font-weight:700;color:var(--brand-purple-dark)}.muted{color:var(--text-muted);font-size:.9rem}.error-text{color:var(--danger);text-align:center}.category-group summary{cursor:pointer;font-weight:600;padding:.5rem 0}.structure-list{list-style:none;margin:0;padding:0}.structure-list li{border-top:1px solid #eee}.structure-list li>a,.structure-list li>button.list-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.6rem 0;background:none;border:0;border-radius:0;color:inherit;text-decoration:none;font:inherit;text-align:left;cursor:pointer}.structure-list li>a:hover,.structure-list li>button.list-item:hover{color:var(--brand-purple-dark)}.progress-bar{height:10px;border-radius:6px;background:#e5e0f5;overflow:hidden}.progress-bar>div{height:100%;background:var(--brand-purple);transition:width .3s ease}@media (min-width: 480px){main{margin:2rem auto}}