:root {
  color-scheme: dark;
  --bg: #0b0d13;
  --surface: #12151e;
  --surface-raised: #181c27;
  --surface-soft: #10131b;
  --line: #292e3b;
  --line-bright: #394153;
  --text: #f1f4fb;
  --muted: #9ba5b7;
  --accent: #3f9cff;
  --accent-bright: #ffd15c;
  --cyan: #69ddff;
  --danger: #fb7185;
  --success: #6ee7b7;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body, body * { -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--bg);
}

button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.app-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 28px 26px 36px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.brand-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; }
.brand-copy { display: grid; gap: 3px; }
.eyebrow { margin: 0; color: var(--accent-bright); font-size: .67rem; font-weight: 750; letter-spacing: .14em; }
.game-name { color: var(--muted); font-size: .88rem; font-weight: 550; }
.topbar-actions { display: flex; gap: 9px; }

.action-button, .primary-button, .secondary-button, .pagination button, .join-button {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--line-bright);
  border-radius: 9px;
  background: var(--surface-raised);
  font-weight: 650;
  font-size: .84rem;
  transition: background-color .14s ease, border-color .14s ease;
}
.action-button:hover, .pagination button:hover { border-color: #59657a; background: #202635; }
.action-button.secondary { border-color: #3e5675; color: var(--cyan); background: #152133; }
.private-server-action { border-color: #65542a; color: var(--accent-bright); background: #211e14; }
.action-button.ghost { background: transparent; }
button:disabled { cursor: not-allowed; opacity: .48; }

.dashboard { display: grid; gap: 18px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat-card, .hop-panel, .browser-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.stat-card { min-height: 88px; padding: 16px 18px; }
.stat-label { display: block; color: var(--muted); font-size: .76rem; font-weight: 600; }
.stat-card strong { display: block; margin-top: 7px; font-size: 1.38rem; letter-spacing: -.02em; }
.stat-card strong small { color: var(--muted); font-size: .74rem; font-weight: 500; }
.status-card strong { color: var(--success); font-size: 1.02rem; }

.hop-panel { padding: 22px 23px 18px; border-color: #303b4d; background: #141821; }
.hop-heading, .hop-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hop-heading h1 { margin: 6px 0 0; font-size: clamp(1.35rem, 3vw, 1.8rem); letter-spacing: -.04em; }
.countdown { flex: 0 0 auto; margin: 0; padding: 9px 12px; border: 1px solid #38334c; border-radius: 9px; color: var(--cyan); background: #111821; font-size: .84rem; font-weight: 700; }
.hop-controls { justify-content: flex-start; flex-wrap: wrap; margin-top: 19px; }
.primary-button { min-height: 44px; padding-inline: 17px; border-color: #e2b83d; color: #15120a; background: var(--accent-bright); }
.primary-button:hover { background: #ffe08a; }
.secondary-button { min-height: 44px; padding-inline: 16px; border-color: #56313f; color: #ffb0bd; background: #21151c; }
.secondary-button:hover { background: #2b1922; }
.interval-field { display: flex; align-items: center; gap: 10px; margin-left: auto; color: var(--muted); font-size: .8rem; }
.interval-field input { width: 72px; min-height: 40px; padding: 7px 9px; border: 1px solid var(--line-bright); border-radius: 8px; color: var(--text); background: var(--surface-soft); text-align: center; }
#intervalInput { appearance: textfield; -moz-appearance: textfield; }
#intervalInput::-webkit-inner-spin-button, #intervalInput::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.hop-message { min-height: 1.35em; margin: 15px 0 0; color: var(--cyan); font-size: .84rem; }
.stop-note { margin: 5px 0 0; color: var(--muted); font-size: .73rem; }

.hop-live-actions { display: flex; align-items: center; gap: 9px; }
.no-boss-button { min-height: 38px; padding: 8px 13px; border: 1px solid #66502b; border-radius: 9px; color: var(--accent-bright); background: #211e14; font-size: .8rem; font-weight: 750; }
.no-boss-button:hover { border-color: #a27d39; background: #2b2618; }
.no-boss-button[hidden] { display: none; }
.no-boss-button:disabled { opacity: .55; }

.browser-panel { padding: 19px; }
.panel-heading { margin-bottom: 14px; }
.browser-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.panel-heading h2 { margin: 0; font-size: 1.1rem; letter-spacing: -.02em; }
.muted { display: inline-block; margin-top: 5px; color: var(--muted); font-size: .75rem; }
.browser-actions { display: flex; gap: 8px; }
.browser-actions input, .browser-actions select {
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-soft);
  font-size: .8rem;
}
.browser-actions input { width: min(220px, 32vw); }
.browser-actions input::placeholder { color: #717c90; }
.browser-actions select { min-width: 150px; }
.server-list-note { margin: -5px 0 12px; color: var(--muted); font-size: .71rem; line-height: 1.5; }

.server-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 240px; align-content: start; }
.server-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.server-card.lowest { border-color: #65562e; background: #1a1915; }
.server-card-header, .server-info, .server-card-meta, .server-card-footer { display: flex; align-items: center; }
.server-card-header { justify-content: space-between; gap: 8px; }
.server-info { min-width: 0; flex-wrap: wrap; gap: 8px; }
.server-card h3 { margin: 0; font-size: .95rem; }
.server-pill { padding: 4px 7px; border-radius: 999px; color: var(--muted); background: #202531; font-size: .65rem; font-weight: 700; }
.server-pill.lowest { color: var(--accent-bright); background: #2c2718; }
.server-pill.attempted { color: #fbbf72; background: #2c241b; }
.server-pill.no-boss { color: #ffc778; background: #2c241b; }
.server-pill.full { color: #fda4af; background: #2d1b23; }
.server-id { display: block; margin-top: 9px; overflow-wrap: anywhere; color: #8d98ab; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .65rem; line-height: 1.45; }
.server-card-meta { flex-wrap: wrap; gap: 8px 13px; margin-top: 13px; color: var(--muted); font-size: .72rem; }
.occupancy-track { width: 60px; height: 5px; overflow: hidden; border-radius: 999px; background: #303644; }
.occupancy-track span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.server-card-footer { justify-content: flex-end; margin-top: 13px; }
.join-button { min-height: 34px; padding: 6px 13px; border-color: #3e5675; color: var(--cyan); background: #172232; font-size: .75rem; }
.join-button:hover { border-color: #5e8fc5; background: #1b2b40; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 15px; color: var(--muted); font-size: .78rem; }
.pagination button { min-height: 33px; padding: 5px 10px; font-size: .74rem; }
.empty-state { grid-column: 1 / -1; padding: 30px 16px; border: 1px dashed var(--line-bright); border-radius: 10px; color: var(--muted); text-align: center; font-size: .86rem; }
.server-skeleton { min-height: 105px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }

.settings-dialog { width: min(500px, calc(100% - 28px)); max-height: 82vh; padding: 20px; border: 1px solid var(--line-bright); border-radius: 14px; color: var(--text); background: var(--surface); }
.settings-dialog::backdrop { background: rgb(0 0 0 / 65%); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dialog-heading h2 { margin: 5px 0 0; font-size: 1.25rem; }
.settings-grid { display: grid; gap: 8px; margin-top: 15px; }
.toggle-row { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; color: #d2d8e4; background: var(--surface-soft); font-size: .83rem; }
.toggle-row input { accent-color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.profile-watermark { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; color: var(--muted); font-size: .73rem; text-decoration: none; }
.profile-watermark:hover { color: var(--text); }
.profile-watermark strong { color: var(--accent-bright); }

@media (max-width: 680px) {
  .app-shell { padding: 17px 14px 25px; }
  .topbar { min-height: 58px; margin-bottom: 17px; padding-bottom: 13px; flex-wrap: wrap; }
  .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .brand-wrap { gap: 9px; }
  .topbar-actions { width: 100%; justify-content: flex-end; gap: 6px; }
  .action-button { min-height: 36px; padding: 7px 10px; font-size: .73rem; }
  .stats-grid { gap: 7px; }
  .stat-card { min-height: 76px; padding: 11px 10px; }
  .stat-label { font-size: .65rem; }
  .stat-card strong { font-size: 1.1rem; }
  .status-card strong { font-size: .85rem; }
  .hop-panel, .browser-panel { padding: 15px; }
  .hop-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .countdown { padding: 7px 9px; font-size: .75rem; }
  .hop-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hop-controls button { width: 100%; padding-inline: 8px; font-size: .76rem; }
  .interval-field { grid-column: 1 / -1; justify-content: space-between; margin: 5px 0 0; }
  .browser-heading { align-items: stretch; flex-direction: column; gap: 9px; }
  .browser-actions input, .browser-actions select { width: 100%; min-width: 0; }
  .server-list { grid-template-columns: 1fr; min-height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}