/* Media Server BD: accessible, responsive, no third-party fonts or UI dependencies. */
:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
  --background: #f7f8fc; --surface: #ffffff; --surface-soft: #f3f5fa;
  --text: #151b33; --muted: #737c92; --muted-2: #9aa2b3;
  --line: #e7eaf1; --line-strong: #dadeea;
  --primary: #4554dc; --primary-deep: #3442bb; --primary-soft: #edf0ff;
  --shadow: 0 10px 35px rgba(29,40,77,.045);
  --green: #0f956b; --green-bg: #e4f8ef; --amber: #ab7422; --amber-bg: #fff4dd;
}
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) {
  color-scheme: dark; --background: #0c1120; --surface: #151c2d; --surface-soft: #1e273b;
  --text: #edf0fa; --muted: #a1acc0; --muted-2: #79869e; --line: #283247; --line-strong: #344059;
  --primary: #8390ff; --primary-deep: #6574f0; --primary-soft: #242d57;
  --shadow: 0 16px 42px rgba(0,0,0,.13); --green: #6ce3ae; --green-bg: #183f35; --amber:#ebbd74; --amber-bg:#463722;
}}
:root[data-theme="dark"] { color-scheme: dark; --background:#0c1120; --surface:#151c2d; --surface-soft:#1e273b; --text:#edf0fa; --muted:#a1acc0; --muted-2:#79869e; --line:#283247; --line-strong:#344059; --primary:#8390ff; --primary-deep:#6574f0; --primary-soft:#242d57; --shadow:0 16px 42px rgba(0,0,0,.13); --green:#6ce3ae; --green-bg:#183f35; --amber:#ebbd74; --amber-bg:#463722; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--background); color:var(--text); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button,select { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.7; }
:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.container { width:min(1170px, calc(100% - 48px)); margin-inline:auto; }
.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; }
.site-shell { min-height:100vh; display:flex; flex-direction:column; }
.site-header { border-bottom:1px solid var(--line); background:var(--surface); }
.header-inner { height:83px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-logo { border-radius:12px; display:block; }
.brand strong { display:block; font-size:17px; font-weight:800; letter-spacing:-.65px; line-height:1.35; }
.brand small { display:block; color:var(--muted); font-size:11px; margin-top:2px; font-weight:500; }
.header-actions { display:flex; align-items:center; gap:22px; }
.bd-mark { font-size:12px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:8px; white-space:nowrap; }
.bd-dot,.visitors-dot { width:7px; height:7px; border-radius:50%; background:#19b983; flex:none; box-shadow:0 0 0 4px rgba(25,185,131,.1); }
.theme-selector { height:38px; display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--surface-soft); }
.theme-selector select { border:0; background:transparent; color:var(--text); font-size:12px; font-weight:650; max-width:88px; outline:none; }
.hero { position:relative; text-align:center; padding:80px 0 54px; isolation:isolate; }
.hero-orb { position:absolute; pointer-events:none; z-index:-1; filter:blur(3px); }
.hero-orb-one { width:380px; height:270px; border-radius:50%; background:radial-gradient(ellipse,rgba(96,112,255,.09),transparent 70%); top:10px; left:4%; }
.hero-orb-two { width:360px; height:270px; border-radius:50%; background:radial-gradient(ellipse,rgba(114,155,255,.10),transparent 70%); top:12px; right:0; }
.eyebrow { display:flex; align-items:center; justify-content:center; gap:12px; font-size:10px; letter-spacing:2px; color:var(--primary); font-weight:800; }
.eyebrow-line { width:25px; height:1px; background:var(--primary); opacity:.55; }
h1,h2,h3,p { margin-top:0; }
.hero h1 { font-size:clamp(39px,6vw,69px); line-height:1.10; letter-spacing:-3.4px; margin:22px 0 17px; font-weight:850; }
.hero h1 span { color:var(--primary); }
.hero-description { color:var(--muted); font-size:15px; line-height:1.9; max-width:540px; margin:0 auto; }
.hero-description strong { color:var(--text); font-weight:600; }
.hero-metrics { margin-top:33px; display:flex; justify-content:center; align-items:center; gap:18px; color:var(--muted); font-size:12px; }
.hero-metrics strong { color:var(--text); font-weight:800; }
.metric-divider { width:1px; height:14px; background:var(--line-strong); }
.status-zone { margin-bottom:76px; }
.status-panel { text-align:center; padding:32px 26px 28px; border:1px solid #3647bc; border-radius:20px; position:relative; overflow:hidden; background:linear-gradient(120deg,#202b64 0%,#18244d 48%,#20275c 100%); color:#fff; box-shadow:0 14px 34px rgba(32,42,112,.14); }
.status-panel-shine { position:absolute; width:420px; height:360px; top:-240px; left:calc(50% - 210px); pointer-events:none; background:radial-gradient(ellipse,rgba(129,147,255,.36),transparent 70%); }
.status-label { position:relative; display:flex; align-items:center; gap:8px; justify-content:center; color:#aab8ff; font-size:10px; letter-spacing:1.6px; font-weight:800; }
.live-indicator { width:7px; height:7px; background:#64eec4; border-radius:50%; box-shadow:0 0 0 4px rgba(100,238,196,.12); }
.status-panel h2 { position:relative; margin:10px 0 6px; font-size:clamp(18px,2.5vw,24px); letter-spacing:-.7px; }
.status-panel > p { position:relative; color:#bfcbf1; font-size:12px; margin:0 0 23px; }
.check-button { position:relative; border:1px solid #fff; background:#fff; color:#2a3b9b; border-radius:11px; min-height:54px; padding:0 22px; display:inline-flex; align-items:center; gap:11px; font-size:14px; font-weight:800; box-shadow:0 6px 24px rgba(2,5,40,.2); transition:transform .16s,box-shadow .16s; }
.check-button:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 12px 26px rgba(2,5,40,.24); }
.check-button svg { width:18px; height:18px; }
.check-button .button-arrow { width:16px; opacity:.7; }
.check-progress { color:#d5dfff; min-height:21px; font-size:11px; margin:12px 0 0; }
.status-panel .check-disclaimer { max-width:680px; margin:7px auto 0; line-height:1.6; font-size:10px; color:#9caddc; }
.directory { padding-bottom:58px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:23px; }
.section-overline { color:var(--primary); font-size:10px; letter-spacing:1.9px; font-weight:800; margin-bottom:9px; }
.section-heading h2 { font-size:29px; line-height:1.2; letter-spacing:-1px; font-weight:800; margin:0 0 7px; display:flex; align-items:center; gap:12px; }
.section-heading p { margin:0; color:var(--muted); font-size:12px; }
.count-bubble { font-size:12px; background:var(--primary-soft); color:var(--primary); border-radius:8px; padding:5px 10px; letter-spacing:0; }
.view-switch { flex:none; display:flex; gap:3px; padding:4px; background:var(--surface); border:1px solid var(--line); border-radius:11px; }
.view-button { display:grid; place-items:center; width:34px; height:32px; border:0; border-radius:7px; background:transparent; color:var(--muted); }
.view-button svg { width:17px; height:17px; }
.view-button.is-active { background:var(--primary-soft); color:var(--primary); }
.filter-bar { border:1px solid var(--line); box-shadow:var(--shadow); padding:10px; background:var(--surface); border-radius:13px; display:flex; gap:10px; align-items:center; }
.search-wrap { position:relative; flex:1; min-width:180px; display:flex; align-items:center; }
.search-wrap > svg { position:absolute; left:13px; height:18px; width:18px; color:var(--muted-2); }
.search-wrap input { height:43px; min-width:0; width:100%; padding:0 70px 0 40px; border:1px solid transparent; border-radius:9px; outline:0; background:var(--surface-soft); color:var(--text); }
.search-wrap input::placeholder { color:var(--muted-2); }
.search-wrap input:focus { border-color:var(--primary); }
.search-shortcut { position:absolute; right:12px; color:var(--muted-2); font-size:9px; font-weight:750; letter-spacing:.7px; }
.filter-selects { display:flex; gap:8px; }
.select-wrap select { background:var(--surface); border:1px solid var(--line); color:var(--text); min-height:43px; max-width:180px; padding:0 26px 0 12px; border-radius:9px; font-size:12px; font-weight:650; }
.results-meta { display:flex; align-items:center; justify-content:space-between; min-height:43px; padding:8px 2px; font-size:12px; color:var(--muted); }
.text-button { background:none; border:0; color:var(--primary); font-size:12px; font-weight:700; }
.servers.grid-layout { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.server-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); position:relative; min-width:0; transition:transform .15s,border-color .15s; }
.server-card:hover { transform:translateY(-3px); border-color:var(--line-strong); }
.grid-layout .server-card { min-height:235px; padding:24px 21px 18px; display:flex; flex-direction:column; }
.server-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.server-logo { width:54px; height:54px; flex:none; border-radius:14px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; font-size:23px; font-weight:850; overflow:hidden; border:1px solid var(--line); }
.server-logo img { width:100%; height:100%; object-fit:contain; background:#fff; }
.featured-marker { padding:5px 7px; border-radius:6px; background:var(--primary-soft); color:var(--primary); font-weight:800; text-transform:uppercase; letter-spacing:.5px; font-size:9px; }
.card-status { position:absolute; top:11px; left:50%; transform:translateX(-50%); white-space:nowrap; }
.grid-layout .server-card:has(.card-status) { padding-top:34px; }
.server-name { font-size:17px; font-weight:800; letter-spacing:-.5px; color:var(--text); margin:16px 0 3px; display:flex; align-items:center; gap:8px; min-width:0; }
.server-name a { overflow-wrap:anywhere; }
.server-name a:hover { color:var(--primary); }
.server-url { display:block; font-size:11px; color:var(--muted); max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.server-description { margin:9px 0 0; color:var(--muted); font-size:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tags { margin-top:auto; padding-top:17px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tag { display:inline-flex; align-items:center; border-radius:6px; background:var(--surface-soft); color:var(--muted); padding:4px 8px; font-size:10px; font-weight:700; }
.tag.language { background:var(--primary-soft); color:var(--primary); }
.tags-toggle { border:0; background:none; color:var(--primary); font-size:11px; font-weight:750; padding:4px 2px; }
.card-bottom { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); margin-top:16px; padding-top:14px; gap:12px; }
.card-bottom > span { color:var(--muted-2); font-size:10px; }
.open-link { color:var(--primary); font-weight:800; font-size:12px; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.open-link:hover { text-decoration:underline; }
.open-link svg { width:14px; height:14px; }
.status-pill { display:inline-flex; align-items:center; gap:5px; border-radius:30px; padding:4px 8px; font-weight:800; font-size:10px; color:var(--muted); background:var(--surface-soft); }
.status-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--muted-2); }
.status-pill.reachable { background:var(--green-bg); color:var(--green); }
.status-pill.reachable::before { background:var(--green); }
.status-pill.unverified,.status-pill.browser-blocked { background:var(--amber-bg); color:var(--amber); }
.status-pill.unverified::before,.status-pill.browser-blocked::before { background:var(--amber); }
.status-pill.checking::before { background:var(--primary); animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.2; } }
.servers.list-layout { display:flex; flex-direction:column; gap:10px; }
.list-layout .server-card { display:grid; align-items:center; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) auto; gap:16px; padding:16px 20px; }
.list-layout .server-card__main { display:flex; align-items:center; gap:13px; min-width:0; }
.list-layout .server-logo { width:47px; height:47px; border-radius:12px; font-size:18px; }
.list-layout .server-name { margin:0 0 2px; font-size:14px; }
.list-layout .server-title-group { min-width:0; }
.list-layout .server-description,.list-layout .featured-marker,.list-layout .card-status,.list-layout .card-bottom > span { display:none; }
.list-layout .server-card__top { align-items:center; }
.list-layout .tags { padding:0; margin:0; }
.list-layout .card-bottom { padding:0; margin:0; border:0; justify-content:flex-end; }
.list-layout .server-name .status-pill { font-size:9px; white-space:nowrap; }
.list-layout .server-name a { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.empty-state { grid-column:1/-1; padding:65px 22px; text-align:center; color:var(--muted); background:var(--surface); border:1px dashed var(--line-strong); border-radius:15px; }
.empty-state strong { display:block; color:var(--text); font-size:18px; margin-bottom:7px; }
.empty-state button { margin-top:12px; }
.skeleton { height:225px; border-radius:16px; background:linear-gradient(110deg,var(--surface),var(--surface-soft),var(--surface)); background-size:200% 100%; animation:shimmer 1.4s infinite; border:1px solid var(--line); }
@keyframes shimmer { to { background-position-x:-200%; } }
.footnote { display:flex; gap:13px; border:1px solid var(--line); background:var(--surface); border-radius:13px; padding:20px; margin-bottom:64px; }
.footnote-icon { border-radius:50%; background:var(--primary-soft); color:var(--primary); height:24px; width:24px; flex:none; font-family:Georgia,serif; font-size:17px; font-weight:bold; text-align:center; }
.footnote strong { font-size:12px; }
.footnote p { color:var(--muted); font-size:11px; line-height:1.8; margin:5px 0 0; }
.site-footer { margin-top:auto; border-top:1px solid var(--line); background:var(--surface); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; min-height:105px; gap:22px; }
.footer-brand { display:flex; gap:10px; align-items:center; }
.footer-brand strong { display:block; font-size:12px; }
.footer-brand small { display:block; color:var(--muted); font-size:10px; }
.footer-center { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:11px; }
.footer-center strong { color:var(--text); font-size:15px; font-variant-numeric:tabular-nums; }
.footer-links { display:flex; align-items:center; gap:20px; color:var(--muted); font-size:11px; }
.footer-links a:hover { color:var(--primary); }
.toast { position:fixed; z-index:200; bottom:22px; left:50%; transform:translateX(-50%); background:var(--text); color:var(--background); border-radius:9px; padding:12px 20px; box-shadow:var(--shadow); font-size:12px; max-width:calc(100vw - 40px); text-align:center; }
/* Admin uses the same theme palette. */
.admin-page { background:var(--background); }
.admin-wrap { max-width:1160px; margin:38px auto 90px; width:calc(100% - 40px); }
.login-panel { width:min(410px,100%); margin:90px auto; padding:35px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.login-panel img { margin-bottom:18px; }
.login-panel h1 { letter-spacing:-1px; font-size:27px; margin:0 0 5px; }
.login-panel p { color:var(--muted); font-size:13px; margin:0 0 27px; }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field label,.field .field-label { color:var(--text); font-size:12px; font-weight:750; }
.field input,.field select,.field textarea { width:100%; background:var(--surface); color:var(--text); border:1px solid var(--line-strong); border-radius:9px; padding:11px 12px; font-size:13px; outline:0; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--primary); }
.field textarea { resize:vertical; min-height:74px; }
.field small { font-size:11px; color:var(--muted); }
.field + .field { margin-top:15px; }
.primary-action { background:#4857db; color:#fff; border:0; border-radius:9px; padding:11px 17px; font-size:13px; font-weight:750; min-height:42px; }
.primary-action:hover { background:#3947c6; }
.secondary-action,.danger-action { background:var(--surface); border:1px solid var(--line-strong); color:var(--text); border-radius:9px; padding:9px 13px; font-size:12px; font-weight:650; }
.danger-action { color:#d85869; }
.secondary-action:hover { background:var(--surface-soft); }
.login-panel .primary-action { width:100%; margin-top:25px; }
.form-error { color:#d85869; font-size:12px; min-height:20px; margin-top:12px; }
.admin-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:30px; }
.admin-header h1 { margin:0 0 3px; font-size:29px; letter-spacing:-1px; }
.admin-header p { margin:0; font-size:12px; color:var(--muted); }
.admin-actions { display:flex; align-items:center; gap:9px; }
.admin-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.admin-tab { background:none; padding:12px 15px; border:0; border-radius:9px; color:var(--muted); font-size:13px; font-weight:700; white-space:nowrap; }
.admin-tab.is-active { color:var(--primary); background:var(--primary-soft); }
.admin-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:21px; }
.admin-summary > div { background:var(--surface); padding:19px; border:1px solid var(--line); border-radius:13px; }
.admin-summary strong { display:block; font-size:26px; letter-spacing:-.8px; }
.admin-summary span { color:var(--muted); font-size:11px; }
.admin-panel { background:var(--surface); padding:19px; border:1px solid var(--line); border-radius:14px; }
.admin-panel-heading { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-bottom:16px; }
.admin-panel-heading h2 { margin:0; font-size:17px; }
.admin-panel-heading p { margin:3px 0 0; color:var(--muted); font-size:11px; }
.admin-table-wrap { overflow-x:auto; }
.admin-table { border-collapse:collapse; width:100%; font-size:12px; }
.admin-table th { font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); text-align:left; background:var(--surface-soft); padding:12px 10px; }
.admin-table td { border-bottom:1px solid var(--line); padding:11px 10px; vertical-align:middle; }
.admin-table tr:last-child td { border-bottom:0; }
.admin-table td a { color:var(--primary); }
.admin-table button { margin-right:4px; }
.admin-tag-list { display:flex; flex-wrap:wrap; gap:8px; }
.admin-tag-item { border:1px solid var(--line); background:var(--surface-soft); border-radius:9px; display:flex; align-items:center; gap:12px; padding:8px 8px 8px 13px; font-size:12px; font-weight:700; }
.admin-tag-item .secondary-action,.admin-tag-item .danger-action { padding:5px 7px; font-size:11px; }
.dialog { border:1px solid var(--line); border-radius:17px; padding:0; max-width:600px; width:calc(100% - 24px); max-height:min(90vh,920px); overflow-y:auto; background:var(--surface); color:var(--text); box-shadow:0 18px 70px #0005; }
.dialog::backdrop { background:rgba(9,12,28,.65); }
.dialog-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:19px 22px; border-bottom:1px solid var(--line); }
.dialog-header h2 { font-size:18px; margin:0; }
.dialog-close { border:0; background:var(--surface-soft); color:var(--muted); border-radius:8px; padding:6px 10px; font-size:18px; }
.dialog-body { padding:22px; }
.dialog-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dialog-grid .field + .field { margin-top:0; }
.dialog-grid .full { grid-column:1/-1; }
.checkbox-grid { display:flex; flex-wrap:wrap; gap:7px; }
.check-label { border:1px solid var(--line-strong); padding:6px 9px; border-radius:8px; display:flex; align-items:center; gap:5px; font-size:11px; cursor:pointer; }
.check-label:has(input:checked) { color:var(--primary); background:var(--primary-soft); border-color:var(--primary); }
.check-label input { width:auto; }
.dialog-footer { display:flex; justify-content:flex-end; align-items:center; gap:9px; padding:16px 22px; border-top:1px solid var(--line); }
.inline-flags { display:flex; gap:20px; align-items:center; }
.inline-flags label { display:flex; gap:8px; align-items:center; font-size:12px; }
.admin-helper { color:var(--muted); font-size:12px; line-height:1.7; }
@media(max-width:1000px) {
  .servers.grid-layout { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filter-bar { flex-wrap:wrap; }
  .filter-selects { width:100%; }
  .filter-selects > * { flex:1; min-width:0; }
  .select-wrap select { width:100%; max-width:none; }
  .list-layout .server-card { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }
}
@media(max-width:670px) {
  .container { width:calc(100% - 32px); }
  .header-inner { height:72px; }
  .brand-logo { width:40px; height:40px; }
  .brand strong { font-size:14px; }
  .brand small { font-size:10px; }
  .bd-mark { display:none; }
  .theme-selector { height:35px; padding:0 6px; gap:3px; }
  .theme-selector select { font-size:11px; max-width:70px; }
  .hero { padding:55px 0 35px; }
  .hero h1 { font-size:40px; letter-spacing:-2px; margin-top:17px; }
  .hero-description { font-size:13px; }
  .hero-metrics { flex-wrap:wrap; gap:10px; font-size:10px; margin-top:24px; }
  .status-zone { margin-bottom:55px; }
  .status-panel { padding:26px 15px 22px; border-radius:15px; }
  .status-panel h2 { font-size:19px; }
  .check-button { padding:0 13px; width:100%; justify-content:center; font-size:12px; gap:8px; }
  .status-panel > p { font-size:11px; line-height:1.7; }
  .section-heading h2 { font-size:24px; }
  .filter-bar { gap:9px; }
  .filter-selects { display:grid; grid-template-columns:1fr 1fr; }
  .filter-selects .select-wrap:last-child { grid-column:1/-1; }
  .search-shortcut { display:none; }
  .search-wrap input { padding-right:12px; }
  .servers.grid-layout { grid-template-columns:1fr; gap:12px; }
  .grid-layout .server-card { min-height:226px; }
  .list-layout .server-card { display:grid; grid-template-columns:1fr auto; gap:10px; padding:14px; }
  .list-layout .server-card__main { grid-column:1/-1; }
  .list-layout .tags { grid-column:1; }
  .list-layout .card-bottom { grid-column:2; grid-row:2; align-self:end; }
  .footer-inner { flex-direction:column; text-align:center; justify-content:center; padding:25px 0; gap:19px; }
  .footer-links { justify-content:center; }
  .footnote { margin-bottom:45px; }
  .admin-header { flex-wrap:wrap; }
  .admin-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .admin-summary > div { padding:14px 9px; }
  .admin-summary strong { font-size:20px; }
  .admin-panel { padding:12px; }
  .admin-panel-heading { align-items:flex-start; }
  .dialog-grid { grid-template-columns:1fr; }
  .dialog-grid .full { grid-column:1; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.server-logo { position:relative; }
.server-logo img { position:absolute; inset:0; width:100%; height:100%; }
[hidden] { display:none!important; }

.admin-search-field { margin-bottom:14px; }
.admin-bottom-note { margin-top:18px; }
.tag-dialog { max-width:420px; }

/* Public readability upgrade — keep the original layout and branding. */
.site-shell { font-size:16px; line-height:1.6; }
.brand strong { font-size:18px; letter-spacing:-.25px; }
.brand small { font-size:12px; }
.bd-mark,.theme-selector select { font-size:13px; }
.eyebrow,.section-overline,.status-label { font-size:11px; letter-spacing:1.3px; }
.hero h1 { letter-spacing:-2.5px; }
.hero-description { font-size:16px; line-height:1.75; max-width:620px; }
.hero-metrics { font-size:14px; }
.status-panel h2 { font-size:clamp(21px,2.5vw,27px); letter-spacing:-.45px; }
.status-panel > p { font-size:14px; line-height:1.65; }
.check-button { font-size:15px; }
.check-progress { font-size:13px; }
.section-heading p { font-size:14px; }
.section-heading h2 { font-size:30px; }
.count-bubble { font-size:13px; }
.search-wrap input { font-size:14px; min-height:46px; }
.search-shortcut { font-size:10px; }
.select-wrap select { font-size:13px; min-height:46px; max-width:none; padding:0 23px 0 11px; }
.results-meta { font-size:13px; }
.text-button { font-size:13px; }
.server-name { font-size:19px; line-height:1.35; letter-spacing:-.25px; }
.server-url { font-size:13px; }
.server-description { font-size:13px; line-height:1.55; }
.tag { font-size:12px; padding:5px 9px; }
.tags-toggle { font-size:12px; }
.card-bottom > span { font-size:12px; }
.open-link { font-size:14px; }
.status-pill { font-size:12px; padding:5px 9px; line-height:1.4; }
.status-pill::before { width:7px; height:7px; }
.list-layout .server-name { font-size:16px; flex-wrap:wrap; }
.list-layout .server-name .status-pill { font-size:12px; }
.list-layout .server-card { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto; }
.list-layout .server-name a { white-space:normal; overflow-wrap:anywhere; }
.footnote strong,.footer-brand strong { font-size:14px; }
.footnote p,.footer-brand small,.footer-center,.footer-links { font-size:13px; }
.toast { font-size:14px; }

/* Connection results are deliberately *not* called Online / Offline. */
.status-pill.browser-blocked { background:var(--surface-soft); color:var(--muted); }
.status-pill.browser-blocked::before { background:var(--muted); }
.status-summary { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin:12px 0 4px; }
.summary-count { display:inline-flex; align-items:center; gap:6px; border:1px solid #ffffff30; border-radius:50px; background:#ffffff12; color:#ecf1ff; font-size:13px; padding:6px 12px; }
.summary-count strong { font-size:16px; font-variant-numeric:tabular-nums; }
.summary-count.responded strong { color:#7eeac2; }
.summary-count.no-response strong { color:#ffd18a; }
.summary-count.blocked strong { color:#d7def5; }
.status-help { max-width:660px; margin:15px auto 0; position:relative; color:#dde7ff; }
.status-help summary { display:inline-block; list-style:none; cursor:pointer; font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.status-help summary::-webkit-details-marker { display:none; }
.status-help-content { margin-top:11px; border:1px solid #ffffff30; background:#0a153d70; border-radius:11px; padding:12px 16px; text-align:left; }
.status-help-content p { font-size:13px; line-height:1.65; margin:3px 0 8px; color:#e2e9ff; }
.status-help-content p:last-child { margin-bottom:3px; }
.status-sort-notice { margin:12px 0 2px; padding:12px 15px; border:1px solid var(--line-strong); border-radius:10px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; background:var(--surface); font-size:13px; color:var(--muted); }
.status-sort-notice button { border:0; background:var(--primary-soft); color:var(--primary); padding:8px 12px; border-radius:8px; font-size:13px; font-weight:750; }
.empty-state .primary-action { margin-top:16px; }

/* Four filters fit desktop without squeezing the search input. */
.filter-selects { flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:1000px) {
  .filter-selects { justify-content:stretch; }
  .filter-selects .select-wrap { flex:1 1 165px; }
}
@media (max-width:670px) {
  .brand strong { font-size:15px; }
  .brand small { font-size:11px; }
  .theme-selector select { font-size:12px; }
  .hero h1 { font-size:clamp(34px,9vw,44px); letter-spacing:-1.5px; }
  .hero-description { font-size:15px; }
  .hero-metrics { font-size:12px; }
  .status-panel h2 { font-size:21px; }
  .status-panel > p,.check-progress { font-size:13px; }
  .check-button { font-size:14px; }
  .section-heading h2 { font-size:24px; }
  .filter-selects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filter-selects .select-wrap:last-child { grid-column:auto; }
  .select-wrap select { width:100%; font-size:13px; }
  .status-summary { gap:6px; }
  .summary-count { font-size:12px; padding:5px 9px; }
  .server-name { font-size:18px; }
  .grid-layout .server-card { min-height:245px; }
  .list-layout .server-name { font-size:16px; }
  .list-layout .server-card { grid-template-columns:minmax(0,1fr) auto; }
  .list-layout .server-card__main { align-items:flex-start; }
  .list-layout .server-name .status-pill { white-space:normal; }
  .footnote p { font-size:13px; }
}