.online-lobby { display: grid; gap: 14px; }
.online-panel { min-width: 0; padding: 21px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-panel); }
.online-auth {
  padding: clamp(21px, 5vw, 39px);
  background-image: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 72%);
}
.online-title { font-size: clamp(1.55rem, 5vw, 2.35rem); font-weight: 750; line-height: 1.08; letter-spacing: -.035em; overflow-wrap: anywhere; }
.online-kicker { margin-bottom: 7px; color: var(--color-accent-soft); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.online-copy { margin-top: 8px; color: var(--color-text-muted); font-size: .92rem; line-height: 1.45; }
.online-note, .online-error { margin-top: 10px; font-size: .82rem; line-height: 1.4; }
.online-note { color: var(--color-text-muted); }
.online-section-title { font-size: 1.06rem; }
.online-panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.online-identity { min-width: 0; }
.online-rating { display: grid; justify-items: end; gap: 2px; min-width: 76px; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-accent-soft); background: var(--color-panel-hover); }
.online-rating span { font-size: .71rem; }
.online-rating strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }

.online-mode-switch { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-top: 22px; padding: 3px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-background); }
.online-tab { min-height: 36px; padding: 7px 13px; border: 0; border-radius: 7px; color: var(--color-text-muted); background: transparent; font-size: .87rem; }
.online-tab[aria-pressed="true"] { color: var(--color-text); background: var(--color-panel-hover); box-shadow: inset 0 -2px var(--color-accent); }
.online-tab:not(:disabled):hover { color: var(--color-accent-soft); }
.online-form { display: grid; gap: 12px; max-width: 360px; margin-top: 16px; }
.online-field { display: grid; gap: 6px; color: var(--color-text-muted); font-size: .85rem; }
.online-field input, .online-field select { min-width: 0; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-text); background: var(--color-background); font: inherit; font-size: 1rem; }
.online-field :is(input, select):not(:disabled):hover { border-color: var(--color-accent); }
.online-form .online-note, .online-form .online-error { margin-top: 0; }
.online-form .primary { justify-self: start; }
.online-auth-footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 21px; padding-top: 17px; border-top: 1px solid var(--color-border); }
.online-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.online-retry { margin-top: 10px; }
.online-search-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--color-accent-soft); font-size: .9rem; }
.online-search-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.online-search-settings { margin-top: 14px; }
.online-search-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 420px; }
.online-bot-countdown { margin-top: 4px; font-variant-numeric: tabular-nums; }
.score .match-participant { color: var(--color-text-muted); }
.status .match-unranked { color: var(--color-accent-soft); }

.online-deck-count { color: var(--color-accent-soft); white-space: nowrap; font-size: .83rem; font-weight: 650; }
.online-collection { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 8px; margin-top: 13px; }
.online-collection-item { display: grid; grid-template-rows: 1fr auto; gap: 3px; min-width: 0; text-align: center; }
.online-collection-item .card { width: 100%; min-width: 0; min-height: 78px; aspect-ratio: 1.15; }
.online-card-selection { color: var(--color-text-muted); font-size: .67rem; }
.online-collection-item [aria-pressed="true"] + .online-card-selection { color: var(--color-accent-soft); font-weight: 650; }

.online-ranking { width: 100%; margin-top: 9px; border-collapse: collapse; text-align: left; font-size: .85rem; font-variant-numeric: tabular-nums; }
.online-ranking th, .online-ranking td { padding: 7px 8px; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.online-ranking th { color: var(--color-text-muted); font-size: .73rem; }
.online-ranking :is(th, td):first-child { padding-left: 0; }
.online-ranking :is(th, td):nth-child(n + 3) { text-align: right; }
.online-ranking :is(th, td):last-child { padding-right: 0; }
.online-ranking tbody tr:last-child td { border-bottom: 0; }
.online-ranking-self { color: var(--color-accent-soft); }

@media (max-width: 520px) {
  .online-panel { padding: 15px; }
  .online-auth { padding: 21px; }
  .online-collection { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .online-ranking th, .online-ranking td { padding-inline: 5px; }
}