:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #0b0e1a;
  --panel: #171b2e;
  --muted: #9299b3;
  --text: #f6f7fb;
  --accent: #ff9718;
  --good: #36d17c;
  --bad: #ff5d68;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 70% -10%, #252b54 0, transparent 42%), var(--bg); }
html.modal-open,html.modal-open body { overflow:hidden;overscroll-behavior:none; }
button, input, select { font: inherit; }
button { cursor: pointer; touch-action:manipulation; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--accent);outline-offset:3px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.shell { width: min(100%, 980px); min-height: 100vh; margin: auto; padding: max(22px, env(safe-area-inset-top)) 18px max(30px, env(safe-area-inset-bottom)); }
.topbar { min-height: 42px; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; gap: 12px; }
.topbar img { object-fit: contain; }
.topbar-actions { display: flex; flex-wrap:wrap; align-items: center; gap: 8px; }
.icon-button { display:inline-flex;align-items:center;justify-content:center;min-height:44px;border: 1px solid #343a59; border-radius: 999px; padding: 8px 12px; color: var(--text); background: #14182a; font-size: .78rem; }
.network-status { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.network-status.offline { background: var(--bad); }
.intro { padding: 12vh 4px 28px; }
.intro.compact { padding-top: 9vh; }
.intro h1 { max-width: 420px; margin: 4px 0 12px; font-size: clamp(2.35rem, 12vw, 4.2rem); line-height: .98; letter-spacing: -.055em; }
.intro.compact h1 { font-size: clamp(2.25rem, 10vw, 3.5rem); }
.intro > p:last-child { max-width: 390px; color: var(--muted); line-height: 1.55; }
.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: .72rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.panel { border: 1px solid #272c46; border-radius: 18px; background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: 0 18px 50px rgb(0 0 0 / 18%); }
.form-stack { display: grid; gap: 17px; padding: 22px; }
label { display: grid; gap: 8px; color: var(--muted); font-size: .8rem; font-weight: 650; }
input,textarea { width: 100%; min-height: 54px; border: 1px solid #343a59; border-radius: 13px; outline: none; padding: 0 15px; background: #0f1323; color: var(--text); font:inherit;font-size: 1rem; }
textarea { resize:vertical;padding-block:14px;line-height:1.4; }
input:focus,textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(255 151 24 / 14%); }
select { min-height: 44px; border: 1px solid #343a59; border-radius: 10px; padding: 0 10px; background: #0f1323; color: var(--text); }
.primary-button { min-height: 54px; border: 0; border-radius: 13px; padding: 0 21px; background: var(--accent); color: #211300; font-weight: 800; }
.primary-button:disabled { opacity: .65; cursor: wait; }
.search-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.search-form input,.search-form textarea { min-width: 0; font-size: 1.05rem; text-transform: uppercase; }
.player-search { position:relative; }
.search-history { position:absolute;z-index:6;top:calc(100% + 8px);display:none;width:100%;overflow:hidden;border:1px solid #343a59;border-radius:13px;background:#111526;box-shadow:0 20px 50px #000; }
.player-search:focus-within .search-history { display:block; }
.search-history header { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid #272c46; }
.search-history header strong { font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em; }
.search-history button { border:0;background:transparent;color:var(--text); }
.search-history header button { color:var(--muted);font-size:.75rem; }
.history-row { display:grid;grid-template-columns:1fr 44px;border-bottom:1px solid #272c46; }
.history-row:last-child { border-bottom:0; }
.history-row>button:first-child { display:flex;align-items:center;gap:10px;min-width:0;padding:12px 14px;text-align:left; }
.history-row>button:first-child span { color:var(--accent); }
.history-row>button:first-child strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.history-row>button:last-child { color:var(--muted);font-size:1.1rem; }
.error { min-height: 1.4em; margin: 12px 2px; color: #ff8189; font-size: .88rem; }
.notice { margin:12px 2px;color:#7aefa9;font-size:.88rem; }
.gws-info { margin:8px 0;border:1px solid #303651;border-radius:13px;padding:14px;background:#171b2e;color:var(--muted);font-size:.84rem;line-height:1.5; }
.location-search { position: relative; margin-top: 14px; }
.location-results { position: absolute; z-index: 5; width: 100%; overflow: hidden; border: 1px solid #343a59; border-radius: 13px; background: #111526; box-shadow: 0 20px 50px #000; }
.location-results button { display: flex; width: 100%; justify-content: space-between; border: 0; border-bottom: 1px solid #272c46; padding: 13px 15px; background: transparent; color: var(--text); text-align: left; }
.location-results small { color: var(--muted); }
.dashboard-toolbar { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.dashboard-actions { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px; }
.danger-button { border-color:#733a42;color:#ff939a;background:rgb(255 93 104 / 7%); }
.refresh-time { color: var(--muted); font-size: .75rem; }.empty-state { padding: 32px 0; color: var(--muted); text-align: center; }
.players-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 12px; }.player-card { position: relative; border: 1px solid #315c49; border-radius: 18px; padding: 17px; background: linear-gradient(145deg,#182b25,#141b24); cursor: pointer; }.player-card.recent { border-color: #8b5f23; background: linear-gradient(145deg,#352817,#211b18); }.player-card.stale { border-color: #704a32; background: linear-gradient(145deg,#30231c,#201a19); }.player-card.offline { border-color: #6b333b; background: linear-gradient(145deg,#352027,#211820); }.player-card header { display:flex;justify-content:space-between;align-items:start; }.player-card header p { margin:0;color:var(--muted);font-size:.7rem;text-transform:uppercase; }.player-card h2 { margin:2px 0 12px;font-size:1.55rem; }.player-card header button { border:0;background:transparent;color:var(--muted);font-size:1.5rem; }.player-card dl { margin:14px 0 0; }.player-card dl div { display:grid;grid-template-columns:110px 1fr;gap:8px;padding:7px 0;border-top:1px solid rgb(255 255 255 / 7%); }.player-card dt { color:var(--muted);font-size:.72rem; }.player-card dd { margin:0;overflow-wrap:anywhere;text-align:right;font-size:.78rem; }
.player-card { scroll-margin-block:20px; }
.player-card:focus { outline:2px solid var(--accent);outline-offset:3px; }
.player-card.unavailable { border-color:#585078;background:linear-gradient(145deg,#29253a,#1b1928); }
.player-card dl .heartbeat-row { margin-top:5px;border:1px solid rgb(255 255 255 / 10%);border-radius:10px;padding:11px 10px;background:rgb(255 255 255 / 4%); }
.player-card .heartbeat-row dt { align-self:center;font-size:.78rem;font-weight:700; }
.player-card .heartbeat-row dd { display:grid;gap:3px; }
.player-card .heartbeat-row dd strong { font-size:1rem;line-height:1.3; }
.player-card .heartbeat-row dd small { color:var(--muted);font-size:.68rem;font-weight:500;line-height:1.3; }
.result { display: grid; gap: 14px; padding-top: 12px; }
.status-card { display:flex;align-items:center;min-height:46px;border:1px solid #315c49;border-radius:14px;padding:9px 12px;background:linear-gradient(130deg,#203c32,#172920); }
.status-card.recent { border-color:#8b5f23;background:linear-gradient(130deg,#352817,#211b18); }
.status-card.stale { border-color:#704a32;background:linear-gradient(130deg,#30231c,#201a19); }
.status-card.offline { border-color:#6b333b;background:linear-gradient(130deg,#49252a,#281a24); }
.status-pill { flex:0 0 auto;border-radius:999px;padding:6px 9px;background:rgb(54 209 124 / 14%);color:#7aefa9;font-size:.7rem;font-weight:800;text-transform:uppercase; }
.recent .status-pill { background:rgb(255 178 67 / 14%);color:#ffc86f; }
.stale .status-pill { background:rgb(255 151 24 / 14%);color:#ffb45a; }
.offline .status-pill { background:rgb(255 93 104 / 14%);color:#ff939a; }
.unavailable .status-pill { background:rgb(156 135 230 / 14%);color:#c5b7f6; }
.status-card + .metrics { margin-top:10px; }
.metrics { display:grid;gap:0;overflow:hidden; }
.metric { display:grid;grid-template-columns:minmax(100px,.65fr) 1fr;align-items:center;gap:14px;min-height:58px;border-bottom:1px solid #272c46;padding:11px 14px; }
.metric:last-child { border-bottom:0; }
.metric span { color: var(--muted); font-size: .78rem; }
.metric strong { overflow-wrap: anywhere; text-align: right; font-size: .9rem; line-height: 1.35; }
.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 18px; }
.action-grid button { min-height: 58px; border: 1px solid #303651; border-radius: 14px; padding: 8px; background: #171b2e; color: var(--text); font-size: .8rem; font-weight: 700; }
dialog { width: min(calc(100% - 24px), 500px); max-height: min(82vh, 700px); border: 1px solid #303651; border-radius: 22px; padding: 0; background: #121626; color: var(--text); box-shadow: 0 30px 90px #000; }
.modal { position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:12px;background:rgb(4 6 13 / 78%);backdrop-filter:blur(4px); }.modal-card { width:min(100%,720px);max-height:92vh;overflow:auto;overscroll-behavior:contain;border:1px solid #303651;border-radius:22px;background:#121626;box-shadow:0 30px 90px #000; }.modal-card>header { position:sticky;z-index:2;top:0;display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #282e48;background:#121626; }.modal-card>header h2 { margin:0 }.modal-card>header button,.modal-card>nav button { border:0;background:transparent;color:var(--muted);font-size:1.5rem; }.modal-card>nav { padding:10px 20px 0; }
.modal-card { display:flex;flex-direction:column;min-width:0;max-height:calc(100dvh - 24px);overflow:hidden; }
.modal-card>header { position:static;flex-shrink:0;gap:12px; }
.modal-card>header>div { min-width:0;overflow-wrap:anywhere; }
.detail-header-actions { display:flex;align-items:center;justify-content:flex-end;gap:6px; }
.u1-link { display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #343a59;border-radius:999px;padding:7px 12px;color:var(--text);background:#171b2e;font-size:.75rem;font-weight:700;text-decoration:none;white-space:nowrap; }
.modal-card>header button { display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:52px;min-height:52px;border-radius:50%;line-height:1; }
.modal-card>nav { flex-shrink:0; }
.modal-card>nav button { min-height:44px;font-size:1rem;text-align:left; }
.dialog-body { min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#4b5478 transparent; }
.dialog-body::-webkit-scrollbar { width:9px; }
.dialog-body::-webkit-scrollbar-track { margin:16px 0;background:transparent; }
.dialog-body::-webkit-scrollbar-thumb { border:2px solid #121626;border-radius:999px;background:#4b5478; }
.dialog-body::-webkit-scrollbar-thumb:hover { background:#65709d; }
dialog::backdrop { background: rgb(4 6 13 / 75%); backdrop-filter: blur(4px); }
dialog header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #282e48; padding: 18px 20px; background: #121626; }
dialog h2 { margin: 0; font-size: 1.1rem; }
dialog header button { border: 0; background: transparent; color: var(--muted); font-size: 1.8rem; line-height: 1; }
.dialog-body { padding: 16px 20px 22px; }
.bulk-analysis-modal .modal-card>header small { display:block;margin-top:5px;color:var(--muted);font-size:.75rem; }
.bulk-analysis-body { position:relative; }
.bulk-confirm-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:20px; }
.bulk-confirm-actions .primary-button { flex:1; }
.bulk-analysis-body progress { display:block;width:100%;height:12px;margin:16px 0;accent-color:var(--accent); }
.bulk-cancel { margin-top:10px; }
.bulk-arrow { display:none;position:absolute;z-index:2;top:50%;width:44px;height:64px;transform:translateY(-50%);border:1px solid #3b4263;border-radius:14px;background:#171b2e;color:var(--text);font-size:2rem; }
.bulk-arrow-left { left:8px; }
.bulk-arrow-right { right:8px; }
.bulk-arrow:disabled { opacity:.25;cursor:default; }
.detail-row { display: grid; grid-template-columns: minmax(90px, .55fr) 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid #252a42; }
.detail-row span:first-child { color: var(--muted); font-size: .78rem; }
.detail-row span:last-child { overflow-wrap: anywhere; text-align: left; white-space: pre-wrap; font-size: .86rem; }
.song { padding: 14px 0; border-bottom: 1px solid #252a42; }
.song strong, .song span { display: block; }
.song span { margin-top: 4px; color: var(--muted); font-size: .82rem; }
.tech-section { margin-top:10px;overflow:hidden;border:1px solid #292f49;border-radius:14px;background:#0f1322; }
.tech-section > summary { display:flex;align-items:center;min-height:48px;padding:10px 14px;cursor:pointer;list-style:none; }
.tech-section > summary::-webkit-details-marker,.tech-subsection > summary::-webkit-details-marker { display:none; }
.tech-section > summary::after,.tech-subsection > summary::after { content:"›";margin-left:auto;color:var(--muted);font-size:1.15rem;transform:rotate(90deg);transition:transform .15s ease; }
.tech-section:not([open]) > summary::after,.tech-subsection:not([open]) > summary::after { transform:rotate(0); }
.tech-section > summary h3 { margin:0;color:var(--accent);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase; }
.tech-section > .tech-group,.tech-section > .tech-text { padding:0 14px 14px; }
.tech-group,.tech-text { display:grid;gap:8px;min-width:0; }
.tech-line { padding:2px 0;overflow-wrap:anywhere;white-space:pre-wrap;font-size:.82rem;line-height:1.5; }
.tech-line:has(.tech-segment) { display:flex;flex-wrap:wrap;gap:5px 7px;align-items:center;white-space:normal; }
.tech-segment { display:inline-flex;max-width:100%;border-radius:6px;padding:3px 7px;background:rgb(255 255 255 / 5%);white-space:nowrap; }
.tech-line.danger .tech-segment { background:rgb(255 93 104 / 12%); }
.tech-banner { overflow-x:auto;overflow-wrap:normal;scrollbar-width:thin;scrollbar-color:#414967 transparent;white-space:nowrap;font-size:.72rem; }
.tech-banner:has(.tech-segment) { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 14px;overflow:visible; }
.tech-banner .tech-segment:last-child { justify-self:end;text-align:right; }
.tech-banner::-webkit-scrollbar { height:6px; }
.tech-banner::-webkit-scrollbar-thumb { border-radius:999px;background:#414967; }
.tech-pair { display:grid;grid-template-columns:minmax(110px,.65fr) minmax(0,1fr);gap:12px;border-bottom:1px solid #20253b;padding-bottom:7px;font-size:.82rem;line-height:1.45; }
.tech-pair > span:first-child { color:var(--muted); }
.tech-pair > span:last-child { overflow-wrap:anywhere;text-align:left;white-space:pre-wrap; }
.tech-subsection { overflow:hidden;border:1px solid #252a42;border-radius:10px;background:#0c101d; }
.tech-subsection > summary { display:flex;align-items:center;gap:8px;min-height:42px;padding:8px 10px;cursor:pointer;list-style:none;font-size:.8rem;font-weight:700; }
.tech-subsection > summary small { margin-left:auto;color:var(--muted);font-size:.68rem;font-weight:650; }
.tech-subsection > summary::after { margin-left:0; }
.tech-subsection-content { display:grid;gap:7px;min-width:0;padding:4px 10px 10px; }
.tech-subsection.danger { border-color:#733a42; }
.tech-subsection.danger > summary,.tech-pair.danger,.tech-text .danger { color:#ff939a;background:rgb(255 93 104 / 7%); }
.tech-subsection.warning { border-color:#74562d; }
.tech-subsection.warning > summary,.tech-pair.warning,.tech-text .warning { color:#ffc86f;background:rgb(255 178 67 / 7%); }
.tech-empty { margin:0;padding:5px 0;color:var(--muted);font-size:.78rem; }
.hours-row { display:grid;grid-template-columns:1fr auto;gap:4px 15px;padding:12px 0;border-bottom:1px solid #252a42; }.hours-row small { grid-column:1/-1;color:#ff939a; }.admin-create { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:end;padding:18px; }.admin-create h2 { grid-column:1/-1;margin:0; }.users { display:grid;gap:10px; }.user-row { display:grid;grid-template-columns:minmax(0,1fr) auto minmax(150px,.5fr) auto;gap:12px;align-items:end;padding:14px; }.user-state { align-self:center;border-radius:999px;padding:6px 9px;background:rgb(54 209 124 / 14%);color:#7aefa9;font-size:.72rem;font-weight:700; }.user-state.disabled { background:rgb(255 93 104 / 14%);color:#ff939a; }.user-password { grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end; }

#tech-dialog { width: min(calc(100% - 20px), 720px); }
#tech-content { padding-inline: 14px; }

@media (max-width: 430px) {
  .tech-banner:has(.tech-segment) { grid-template-columns:1fr; }
  .tech-banner .tech-segment:last-child { justify-self:start;text-align:left; }
  .tech-pair { grid-template-columns: 1fr; gap: 3px; }
  .player-card dl div { grid-template-columns:1fr; }.player-card dd { text-align:left; }
}

@media (min-width: 700px) {
  .shell { padding-inline: 0; }
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .metric { grid-template-columns:1fr;align-content:space-between;min-height:92px;border-right:1px solid #272c46;border-bottom:0; }
  .metric:last-child { border-right:0; }
  .metric strong { text-align:left; }
  .bulk-analysis-body:has(.bulk-arrow) { padding-inline:72px; }
  .bulk-arrow { display:block; }
}

@media (max-width: 600px) {
  .dashboard-toolbar { align-items:flex-start; }
  .dashboard-actions { max-width:70%; }
  .admin-view .intro.compact { padding-top:5vh; }
  .admin-create,.user-row,.user-password { grid-template-columns:1fr; }
  .admin-create h2,.user-password { grid-column:auto; }
  .admin-create .primary-button,.user-row>button,.user-password>button { width:100%;min-height:48px; }
  .user-state { justify-self:start; }
  .modal { padding:0;place-items:stretch; }
  .modal-card { width:100%;height:100dvh;max-height:none;border:0;border-radius:0; }
  .modal-card>header { padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left)); }
  .modal-card>nav { padding:8px max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left)); }
  .dialog-body { padding:12px max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .action-grid button { min-height:48px; }
}