:root {
    --sl-bg: #102a2d;
    --sl-surface: #183538;
    --sl-surface-2: #1d3e41;
    --sl-border: rgba(65, 199, 194, .24);
    --sl-border-soft: rgba(255, 255, 255, .09);
    --sl-text: #f1f5f5;
    --sl-muted: #94abad;
    --sl-primary: #39c0b7;
    --sl-primary-dark: #1c7775;
    --sl-red: #f16b72;
    --sl-green: #4bd39d;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.sl-page { min-height: 100vh; margin: 0; color: var(--sl-text); background: var(--sl-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.45; }
a { color: inherit; }
.sl-nav { min-height: 62px; display: flex; align-items: center; gap: 2rem; padding: .8rem max(1.2rem, calc((100vw - 1240px) / 2)); border-bottom: 2px solid var(--sl-primary-dark); background: #19383b; position: sticky; top: 0; z-index: 10; }
.sl-logo { color: var(--sl-primary); font-size: 1.55rem; font-weight: 850; letter-spacing: -.04em; text-decoration: none; white-space: nowrap; }
.sl-nav-links { display: flex; flex: 1; align-items: center; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
.sl-nav-links::-webkit-scrollbar { display: none; }
.sl-nav-links a, .sl-nav-profile { padding: .45rem .7rem; color: #b9c8ca; border-radius: 6px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sl-nav-links a:hover, .sl-nav-links a.active, .sl-nav-profile:hover { color: var(--sl-primary); background: rgba(57, 192, 183, .08); }
.sl-nav-profile { color: var(--sl-primary); border: 1px solid var(--sl-border); font-size: .8rem; }
.sl-shell { width: min(1240px, calc(100% - 2.4rem)); margin: 0 auto; padding: 3.5rem 0 4rem; }
.sl-hero { display: grid; grid-template-columns: 1fr 290px; align-items: end; gap: 2rem; padding-bottom: 2.6rem; }
.sl-eyebrow, .sl-kicker { margin: 0 0 .45rem; color: var(--sl-primary); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.sl-pulse { display: inline-block; width: 7px; height: 7px; margin-right: .4rem; border-radius: 50%; background: var(--sl-green); box-shadow: 0 0 0 4px rgba(75, 211, 157, .12); vertical-align: 1px; }
h1, h2 { margin: 0; letter-spacing: -.035em; }
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: .98; }
h2 { font-size: 1.2rem; }
.sl-lede { max-width: 580px; margin: 1rem 0 1.5rem; color: var(--sl-muted); font-size: 1.05rem; }
.sl-hero-actions, .sl-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
.sl-btn { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 7px; padding: .55rem .9rem; color: var(--sl-text); cursor: pointer; font: inherit; font-size: .83rem; font-weight: 800; text-decoration: none; transition: border-color .16s, background .16s, transform .16s, opacity .16s; }
.sl-btn:hover { transform: translateY(-1px); }
.sl-btn:disabled { cursor: wait; opacity: .55; transform: none; }
.sl-btn-primary { background: var(--sl-primary); color: #092426; }
.sl-btn-primary:hover { background: #65d7d0; }
.sl-btn-quiet { border-color: var(--sl-border); color: var(--sl-primary); background: rgba(57, 192, 183, .04); }
.sl-btn-small { min-height: 32px; padding: .35rem .6rem; font-size: .72rem; }
.sl-rating-card { min-height: 175px; display: flex; flex-direction: column; justify-content: center; padding: 1.4rem; border: 1px solid var(--sl-border); border-radius: 13px; background: linear-gradient(145deg, rgba(57, 192, 183, .12), rgba(24, 53, 56, .95) 70%); box-shadow: 0 14px 30px rgba(0,0,0,.12); }
.sl-rating-card strong { margin: .1rem 0; color: var(--sl-primary); font-size: 3rem; line-height: 1; }
.sl-rating-caption { color: var(--sl-text); font-size: .8rem; }
.sl-mini-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; color: var(--sl-muted); font-size: .74rem; }
.sl-mini-stats a { color: var(--sl-primary); text-decoration: none; }
.sl-notice { margin: 0 0 1.2rem; padding: .8rem 1rem; border: 1px solid var(--sl-border); border-radius: 8px; background: rgba(57, 192, 183, .07); color: var(--sl-muted); font-size: .82rem; }
.sl-notice-warn { border-color: rgba(241, 190, 99, .38); color: #e9c98e; }
.sl-notice.is-error { border-color: rgba(241, 107, 114, .55); color: #ffadb0; background: rgba(241,107,114,.08); }
.sl-create-panel, .sl-panel { border: 1px solid var(--sl-border); border-radius: 13px; background: rgba(24, 53, 56, .88); box-shadow: 0 18px 40px rgba(0,0,0,.1); }
.sl-create-panel { margin-bottom: 1.2rem; padding: 1.3rem; }
.sl-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.2rem; border-bottom: 1px solid var(--sl-border); }
.sl-section-heading .sl-eyebrow { margin-bottom: .2rem; }
.sl-icon-btn { width: 32px; height: 32px; border: 1px solid var(--sl-border); border-radius: 7px; background: transparent; color: var(--sl-muted); cursor: pointer; font-size: 1.4rem; line-height: 1; }
.sl-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; padding-top: 1.2rem; }
.sl-field { min-width: 0; color: var(--sl-muted); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sl-field-wide { grid-column: span 2; }
.sl-label-hint { color: #6f898a; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sl-field input, .sl-field select, .sl-mode-filter select { width: 100%; margin-top: .4rem; padding: .65rem .7rem; border: 1px solid var(--sl-border); border-radius: 7px; outline: 0; background: #112e31; color: var(--sl-text); font: inherit; font-size: .84rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.sl-field input:focus, .sl-field select:focus, .sl-mode-filter select:focus { border-color: var(--sl-primary); box-shadow: 0 0 0 3px rgba(57,192,183,.12); }
.sl-visibility { display: flex; flex-direction: column; justify-content: center; gap: .45rem; margin: 0; padding: .6rem .7rem; border: 1px solid var(--sl-border-soft); border-radius: 7px; color: var(--sl-muted); font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.sl-visibility legend { padding: 0 .2rem; color: var(--sl-muted); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sl-visibility label { display: flex; gap: .45rem; align-items: center; }
.sl-visibility input { width: auto; margin: 0; accent-color: var(--sl-primary); }
.sl-form-actions { grid-column: 1 / -1; padding-top: .3rem; }
.sl-form-status { min-height: 1.2em; color: #ffadb0; font-size: .8rem; }
.sl-content-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr); gap: 1.2rem; align-items: start; }
.sl-count { display: inline-flex; min-width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(57,192,183,.12); color: var(--sl-primary); font-size: .75rem; font-weight: 800; }
.sl-lobby-list { display: grid; gap: .65rem; padding: 1rem; }
.sl-lobby-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 1rem; border: 1px solid var(--sl-border-soft); border-radius: 9px; background: rgba(16, 42, 45, .62); }
.sl-lobby-row:hover { border-color: var(--sl-border); }
.sl-lobby-title { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.sl-lobby-title strong { font-size: .96rem; }
.sl-private, .sl-public { border-radius: 4px; padding: .14rem .35rem; font-size: .6rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.sl-private { color: #e8c78f; background: rgba(232,199,143,.11); }
.sl-public { color: var(--sl-green); background: rgba(75,211,157,.1); }
.sl-lobby-meta { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: .35rem; color: var(--sl-muted); font-size: .72rem; }
.sl-lobby-meta span + span { position: relative; }
.sl-lobby-meta span + span::before { content: ""; position: absolute; left: -.58rem; top: .38em; width: 3px; height: 3px; border-radius: 50%; background: var(--sl-primary-dark); }
.sl-participants { margin-top: .85rem; }
.sl-player-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.sl-player-chip { border: 1px solid rgba(75,211,157,.24); border-radius: 5px; padding: .25rem .42rem; color: #bdebd6; background: rgba(75,211,157,.07); font-size: .68rem; font-weight: 700; }
.sl-player-chip.red { border-color: rgba(241,107,114,.3); color: #ffc2c4; background: rgba(241,107,114,.07); }
.sl-muted { color: var(--sl-muted); font-size: .75rem; }
.sl-pending { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; color: #e8c78f; font-size: .7rem; }
.sl-request { border: 1px solid rgba(75,211,157,.3); border-radius: 5px; padding: .25rem .4rem; color: var(--sl-green); background: transparent; cursor: pointer; font: inherit; font-size: .68rem; font-weight: 700; }
.sl-request-no { border-color: rgba(241,107,114,.3); color: var(--sl-red); }
.sl-lobby-side { display: flex; min-width: 86px; flex-direction: column; align-items: flex-end; gap: .1rem; color: var(--sl-muted); font-size: .68rem; text-align: right; }
.sl-lobby-side strong { color: var(--sl-text); font-size: 1rem; }
.sl-lobby-side .sl-btn { margin-top: .7rem; }
.sl-cancel { border-color: rgba(241,107,114,.3); color: var(--sl-red); background: transparent; }
.sl-table-wrap { overflow-x: auto; }
.sl-table { width: 100%; min-width: 390px; border-collapse: collapse; }
.sl-table th, .sl-table td { padding: .78rem .65rem; border-bottom: 1px solid var(--sl-border-soft); font-size: .78rem; text-align: left; white-space: nowrap; }
.sl-table th { color: var(--sl-muted); font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.sl-table th:first-child, .sl-table td:first-child { padding-left: 1.2rem; }
.sl-table th:last-child, .sl-table td:last-child { padding-right: 1.2rem; }
.sl-table tbody tr:last-child td { border-bottom: 0; }
.sl-rank { color: var(--sl-muted); font-weight: 800; }
.sl-player-link { display: flex; flex-direction: column; gap: .08rem; text-decoration: none; }
.sl-player-link:hover strong, .sl-text-link:hover { color: var(--sl-primary); }
.sl-player-link small { color: var(--sl-muted); font-size: .65rem; }
.sl-elo { color: var(--sl-primary); font-size: .95rem !important; font-weight: 850; }
.sl-mode-filter { width: 145px; }
.sl-mode-filter select { margin: 0; padding: .48rem .55rem; font-size: .72rem; }
.sl-empty { display: flex; min-height: 150px; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: 1.4rem; color: var(--sl-muted); text-align: center; }
.sl-empty strong { color: var(--sl-text); font-size: .86rem; }
.sl-empty span { max-width: 330px; font-size: .76rem; }
.sl-table-empty { min-height: 120px; border-top: 1px solid var(--sl-border-soft); }
.sl-player-panel { margin-top: 1.2rem; }
.sl-text-link { color: var(--sl-primary); font-size: .76rem; font-weight: 750; text-decoration: none; }
.sl-mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .65rem; padding: 1rem; }
.sl-mode-card { display: flex; flex-direction: column; gap: .22rem; padding: .85rem; border: 1px solid var(--sl-border-soft); border-radius: 8px; background: rgba(16,42,45,.5); }
.sl-mode-card span { color: var(--sl-muted); font-size: .68rem; font-weight: 700; }
.sl-mode-card strong { color: var(--sl-primary); font-size: 1.45rem; }
.sl-mode-card small { color: var(--sl-muted); font-size: .68rem; }
.sl-footnote { margin: 1.2rem 0 0; color: var(--sl-muted); font-size: .76rem; text-align: center; }
.sl-check { display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; margin-right: .25rem; border-radius: 50%; color: #092426; background: var(--sl-green); font-size: .65rem; font-weight: 900; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 900px) {
    .sl-nav { gap: 1rem; padding-inline: 1rem; }
    .sl-nav-profile { display: none; }
    .sl-hero { grid-template-columns: 1fr; gap: 1.3rem; }
    .sl-rating-card { min-height: 0; }
    .sl-content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .sl-shell { width: min(100% - 1.1rem, 1240px); padding-top: 2.2rem; }
    .sl-nav { min-height: 56px; padding: .65rem .65rem; }
    .sl-logo { font-size: 1.25rem; }
    .sl-nav-links { gap: 0; }
    .sl-nav-links a { padding: .4rem .48rem; font-size: .72rem; }
    h1 { font-size: 2.65rem; }
    .sl-form { grid-template-columns: 1fr; }
    .sl-field-wide { grid-column: auto; }
    .sl-lobby-row { grid-template-columns: 1fr; gap: .7rem; }
    .sl-lobby-side { min-width: 0; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; }
    .sl-lobby-side .sl-btn { margin: 0 0 0 auto; }
    .sl-section-heading { padding-inline: .9rem; }
}