/* css/seats-panel.css — the Pro alliance-seats panel (js/seats-panel.js).
 *
 * Prefix `sp-` (DESIGN.md §4 registry). Its own file rather than a block inside
 * css/home.css, because the panel is mountable: any page that mounts it links
 * this, and a page-local block would leave the second mount unstyled. Tokens
 * only — no literals, so both themes follow with nothing wired up.
 */
.sp-head { font-weight: 600; color: var(--text-1); margin: 0 0 8px; }
.sp-note { color: var(--text-2); font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
.sp-lbl { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
          color: var(--text-3); margin-bottom: 5px; }
.sp-select { width: 100%; font: inherit; font-size: 14px; color: var(--text-1); background: var(--bg-2);
             border: 1px solid var(--border-2); border-radius: 9px; padding: 9px 10px; margin-bottom: 10px; }
.sp-btn { width: 100%; }
.sp-seats { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-seat { display: flex; align-items: center; gap: 8px; background: var(--bg-2);
           border: 1px solid var(--border-2); border-radius: 10px; padding: 8px 11px; }
.sp-seat-name { font-weight: 600; color: var(--text-1); }
.sp-seat-tag { font-family: var(--font-data); font-size: 11px; color: var(--text-3); }
.sp-msg { font-size: 13px; margin: 10px 0 0; color: var(--text-2); min-height: 1em; }
.sp-msg.ok { color: var(--accent); }
.sp-msg.err { color: var(--red); }