/* The product shares the public site's ice, cranberry and evergreen palette. */
.app-ui { color-scheme:light; letter-spacing:0; }
.app-ui > nav { background:var(--bg-card); border-bottom:1px solid var(--border); padding:16px 32px; gap:18px; }
.app-ui > nav .brand { color:var(--text); font-weight:800; font-size:20px; white-space:nowrap; }
.app-ui > nav .brand::after { content:"."; color:var(--primary); }
.app-ui > nav .nav-links { gap:16px; }
.app-ui > nav .nav-links a { color:var(--text-muted); font-weight:550; }
.app-ui > nav .nav-links a:hover { color:var(--primary); }
.app-ui > nav .user-name { border-left:1px solid var(--border); padding-left:12px; font-weight:650; color:var(--text); }
.app-ui .language-form select { border-radius:4px; padding:6px 8px; }
.app-ui :focus-visible { outline:3px solid var(--info); outline-offset:3px; }
.app-ui input::placeholder, .app-ui textarea::placeholder { color:#687b73; opacity:1; }
.app-ui input:disabled, .app-ui select:disabled { color:var(--text-muted); opacity:.75; }
.app-ui input[type=checkbox], .app-ui input[type=radio] { accent-color:var(--primary); }
.app-ui input, .app-ui select, .app-ui textarea { letter-spacing:0; }
.app-ui .btn { border-radius:4px; padding:10px 16px; line-height:1.3; }
.app-ui .btn-sm { padding:7px 11px; }
.app-ui .btn-outline { background:var(--bg-card); color:var(--text); border:1px solid #b6c8bf; }
.app-ui .btn-outline:hover { background:var(--bg-input); border-color:var(--accent); }
.app-ui .btn-danger { background:var(--danger); }
.app-ui .btn:disabled { opacity:.5; cursor:default; }
.app-ui input[type=text], .app-ui input[type=email], .app-ui input[type=password], .app-ui input[type=number], .app-ui select, .app-ui textarea { border-radius:5px; }
.app-ui .container, .app-ui .container-wide { padding-top:32px; padding-bottom:40px; }
.app-ui .container-wide { max-width:1180px; }
.app-ui .section-title { font-size:15px; font-weight:750; color:var(--text); }
.app-ui h1, .app-ui h2, .app-ui h3 { letter-spacing:0; }
.app-ui .card { border-radius:6px; border-color:var(--border); box-shadow:none; }
.app-ui .pool-card { border-top:3px solid #b2cdbf; padding:22px; }
.app-ui .pool-card:hover { border-color:var(--primary); background:#fffdfd; }
.app-ui .pool-card strong { font-size:18px; overflow-wrap:anywhere; }
.app-ui .pool-card .text-sm p { margin-top:7px; }
.app-ui .dashboard-join { background:transparent; border:0; border-block:1px solid var(--border); border-radius:0; }
.app-ui .badge { border-radius:4px; font-weight:650; }
.app-ui .badge-active { color:var(--accent); background:var(--tint-success); }
.app-ui .badge-setup { color:var(--warning); background:var(--tint-warning); }
.app-ui .badge-drafting, .app-ui .badge-redrafting { color:var(--primary); background:var(--tint-primary); }
.app-ui .badge-completed { color:var(--text-muted); background:var(--bg-input); }
.app-ui .flash-error { color:var(--danger); background:var(--tint-primary); }
.app-ui .flash-success { color:var(--accent); background:var(--tint-success); }
.app-ui .flash-info { color:var(--info); background:var(--tint-info); }
.app-ui th { color:var(--text-muted); font-weight:700; font-size:11px; background:var(--bg-input); }
.app-ui td { font-variant-numeric:tabular-nums; }
.app-ui .code-box { letter-spacing:0; border:1px solid var(--border); background:var(--bg-input); }
.app-ui .draft-header { border-radius:6px; background:var(--bg-card); border-top:3px solid var(--primary); }
.app-ui .draft-header .on-clock.my-turn { color:var(--accent); }
.app-ui .draft-btn { border-radius:4px; background:var(--accent); color:#fff; }
.app-ui .draft-btn:hover { background:#115d41; }
.app-ui .draft-top { grid-template-columns:minmax(0,1fr) 300px; }
.app-ui .draft-top > *, .app-ui .player-panel { min-width:0; }
.app-ui .player-panel { border-radius:6px; }
.app-ui .player-panel .player-list { overflow:auto; }
.app-ui .player-list .sort-header { position:sticky; top:0; background:var(--bg-card); z-index:1; padding-block:10px; }
.app-ui .player-stats-row, .app-ui .sort-header { min-width:590px; grid-template-columns:72px minmax(180px,1fr) repeat(5,38px) 84px; }
.app-ui .sort-header span:nth-child(2) { text-align:left; }
.app-ui .board-table td.current-pick { background:var(--tint-primary); }
.app-ui .roster-player .rp-name span { white-space:normal; overflow:visible; overflow-wrap:anywhere; }
.app-ui .player-stats-row:hover { background:var(--bg-input); }
.app-ui .player-stats-row .player-name { white-space:normal; overflow:visible; overflow-wrap:anywhere; line-height:1.35; }
.app-ui .player-stats-row .player-info { padding-block:2px; }
.app-ui .filter-btn { border-radius:4px; }
.app-ui .filter-btn.active, .app-ui .roster-tab.active { background:var(--primary); color:#fff; }
.app-ui .stat-toggle a.active { color:var(--warning); background:var(--tint-warning); }
.app-ui .draft-round-badge, .app-ui .round-chip, .app-ui .round-tag, .app-ui .drafted-tag { color:var(--info); background:var(--tint-info); border-radius:4px; }
.app-ui .pos-tag, .app-ui .roster-modal-body .pos-tag { color:var(--info); background:var(--tint-info); }
.app-ui .chat-input-row input { background:var(--bg-input); }
.app-ui .chat-input-row button { border-radius:4px; }
.app-ui .roster-modal-backdrop, .app-ui .game-modal-backdrop, .app-ui .player-summary-backdrop { background:var(--overlay); }
.app-ui .roster-modal-dialog, .app-ui .game-modal-dialog, .app-ui .player-summary-dialog { box-shadow:var(--shadow); border-radius:8px; }
.app-ui .roster-modal-head { background:var(--bg-input); border-top:3px solid var(--accent); }
.app-ui .roster-modal-body .player-row { background:var(--bg-card); border-radius:5px; }
.app-ui .roster-modal-body .player-row:hover { background:var(--bg-input); }
.app-ui .player-profile-hero { background:var(--bg-input); border-top:3px solid var(--primary); }
.app-ui .player-profile-hero::before { opacity:.06; }
.app-ui .player-summary-close { background:var(--bg-card); border-color:var(--border); }
.app-ui .player-current-card { border:0; border-radius:0; border-bottom:1px solid var(--border); background:var(--bg-input); }
.app-ui .player-summary-stat { border:0; border-radius:0; background:var(--bg-input); }
.app-ui .player-current-card .player-summary-stat { background:transparent; }
.app-ui .player-current-card h3 { text-transform:none; color:var(--text); }
.app-ui .player-game-result { background:var(--bg-input); }
.app-ui .player-log-source { letter-spacing:0; background:var(--tint-info); color:var(--info); }
.app-ui .stat-item .sk { letter-spacing:0; }
.app-ui .game-state-badge.live, .app-ui .game-status-pill.live, .app-ui .live-pill { color:var(--danger); }
.app-ui .game-state-badge.upcoming { color:var(--warning); background:var(--tint-warning); }
.app-ui .game-state-badge.processing { color:var(--info); background:var(--tint-info); }
.app-ui .game-table th { background:var(--bg-input); }
.app-ui .public-page { padding-top:32px; }
.app-ui .public-page h1 { font-weight:800; }
.app-ui .public-page details { border-color:var(--border); }
.app-ui .support-message { background:var(--bg-card); }
@media (max-width:900px) { .app-ui .draft-top { grid-template-columns:minmax(0,1fr); } }
@media (max-width:768px) {
    .app-ui > nav { padding:12px 16px; gap:12px; }
    .app-ui > nav .nav-links { gap:10px 14px; padding-bottom:0; }
    .app-ui > nav .nav-links a, .app-ui > nav .user-name { font-size:12px; }
    .app-ui .container, .app-ui .container-wide { padding:22px 16px 32px; }
    .app-ui .btn { padding:9px 13px; }
    .app-ui .btn-sm { padding:6px 9px; }
    .app-ui .dashboard-join .flex { flex-wrap:wrap; }
    .app-ui .dashboard-join input { min-width:0; }
    .app-ui .player-panel { padding:16px; }
    .app-ui .player-panel .panel-header { padding:0 0 8px; }
    .app-ui .player-panel .player-list { padding:0 0 8px; }
    .app-ui .stat-toggle { display:flex; flex-wrap:wrap; gap:4px; margin-left:0; align-items:center; }
}
@media (prefers-reduced-motion:reduce) { .app-ui * { transition:none !important; animation:none !important; } }
.app-release { padding:16px; text-align:center; color:var(--text-muted); font-size:12px; }
.app-release span { margin-left:8px; }
/* Explicit display styles on flex wrappers must not override native hidden. */
[data-separate-slots][hidden] { display: none !important; }