/* =============================================================
   MINETIER — GLOBAL STYLESHEET
   Single consolidated stylesheet for all pages.

   FILE CHECKLIST (mark an [x] here when a page has been migrated
   to this file and restructured — alphabetical order, one at a time):
     [x] Add.html
     [x] Claim.html
     [x] Contact.html
     [x] Dashboard.html
     [x] Featured.html
     [x] Forgot.html
     [x] Index.html
     [x] Login.html
     [x] Server.html
     [x] Signup.html
   ============================================================= */

/* =========================================================
   FONTS (local only, no CDNs)
   ========================================================= */
@font-face{
  font-family:'Noto Sans';
  src:url('fonts/NotoSans.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Noto Color Emoji';
  src:url('fonts/NotoColorEmoji.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Minecraftia';
  src:url('fonts/Minecraftia.otf') format('opentype');
  font-display:swap;
}
@font-face{
  font-family:'Minecraft Ten';
  src:url('fonts/MinecraftTen.ttf') format('truetype');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --bg:#fafafa;
  --surface:#ffffff;
  --surface-2:#f5f5f5;
  --surface-3:#eeeeee;
  --border:#e5e5e5;
  --border-strong:#d4d4d4;
  --text:#171717;
  --text-muted:#737373;
  --text-soft:#a3a3a3;

  --accent:#65a30d;
  --accent-hover:#4d7c0f;
  --accent-soft:#ecfccb;
  --accent-text:#3f6212;

  --success:#16a34a;      --success-soft:#dcfce7;
  --warn:#d97706;         --warn-soft:#fef3c7;
  --danger:#dc2626;       --danger-soft:#fee2e2;
  --info:#2563eb;         --info-soft:#dbeafe;

  --overlay:rgba(10,10,10,0.5);
  --hero-base:#262626;
  --hero-overlay:rgba(10,10,10,0.55);

  --font:'Noto Sans','Noto Color Emoji',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mc:'Minecraftia',monospace;
  --font-heading:'Minecraft Ten',var(--font);

  /* Blocky aesthetic: buttons/tags/pills keep independent rounding,
     everything else (cards, containers, inputs) is square. */
  --r-sm:4px; --r-md:4px; --r-lg:0px; --r-pill:999px;
  --r-card:0px;
  --container:1200px;
  --c-cur:#65a30d; --c-prev:#7c3aed;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0a0a;
  --surface:#141414;
  --surface-2:#1c1c1c;
  --surface-3:#242424;
  --border:#2e2e2e;
  --border-strong:#3d3d3d;
  --text:#f2f2f2;
  --text-muted:#a3a3a3;
  --text-soft:#737373;

  --accent:#84cc16;
  --accent-hover:#a3e635;
  --accent-soft:#1a2408;
  --accent-text:#bef264;

  --success:#4ade80;      --success-soft:#14532d;
  --warn:#fbbf24;         --warn-soft:#451a03;
  --danger:#f87171;       --danger-soft:#450a0a;
  --info:#60a5fa;         --info-soft:#1e3a8a;

  --overlay:rgba(10,10,10,0.75);
  --hero-base:#141414;
  --hero-overlay:rgba(10,10,10,0.6);
  --c-cur:#84cc16; --c-prev:#a78bfa;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:0.92rem;
  font-weight:400;
  line-height:1.55;
  font-feature-settings:"cv02","cv03","cv04","cv11";
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
[hidden]{ display:none !important; }

/* Headers use the blocky display face; never mix with Noto Sans in
   the same text block. */
h1, h2{
  font-family:var(--font-heading);
  font-weight:900;
  letter-spacing:0;
  text-transform:none;
}

.container{
  max-width:var(--container);
  padding:0 20px;
  margin:0 auto;
}
@media (max-width:720px){
  .container{ padding:0 14px; }
}

.uppercase-label{
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.78rem;
  font-weight:700;
  color:var(--text-soft);
}
.tabular{ font-variant-numeric:tabular-nums; }

.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;
}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--accent); color:#fff;
  padding:10px 16px; border-radius:var(--r-sm);
  z-index:999;
}
.skip-link:focus{ left:12px; top:12px; }

/* =========================================================
   SITE HEADER
   ========================================================= */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:14px 0;
  position:sticky;
  top:0;
  z-index:50;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.header-logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:1.1rem;
  letter-spacing:-0.02em;
  color:var(--text);
}
.header-logo .logo-mark{
  width:36px; height:36px; border-radius:var(--r-md);
  background:var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:1.1rem;
}
/* Text-only logo variant (e.g. "Mine<span>tier</span>") used on some pages */
.header-logo span, .footer-logo span{ color:var(--accent-hover); }
.header-logo img{ height:36px; width:auto; display:block; }
@media (max-width:720px){ .header-logo img{ height:30px; } }
.footer-logo{ display:inline-flex; align-items:center; height:28px; font-size:1.1rem; font-weight:800; letter-spacing:-0.02em; color:var(--text); }
.header-nav{ display:flex; gap:6px; }
.header-nav a{
  padding:8px 14px;
  border-radius:var(--r-sm);
  color:var(--text-muted);
  font-weight:600;
  font-size:0.88rem;
  transition:background 0.15s ease, color 0.15s ease;
}
.header-nav a:hover{ color:var(--text); background:var(--surface-2); }
.header-nav a.active{ color:var(--accent-hover); background:var(--accent-soft); }
.header-actions{ display:flex; align-items:center; gap:10px; }
.mobile-menu-btn{
  display:none;
  width:36px; height:36px;
  align-items:center; justify-content:center;
  border-radius:var(--r-sm);
  color:var(--text);
  transition:background 0.15s ease;
}
.mobile-menu-btn:hover{ background:var(--surface-2); }
@media (max-width:860px){
  .header-nav{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    flex-direction:column;
    padding:8px;
  }
  .header-nav.open{ display:flex; }
  .mobile-menu-btn{ display:inline-flex; }
}

/* =========================================================
   HERO (image background, centered content, solid overlay)
   Shared across every page — same size/image/spacing as Index.
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--border);
  background-color:var(--hero-base);
  background-image:url('images/hero.jpg');
  background-size:cover;
  background-position:center;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:var(--hero-overlay);
}
.hero-inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:16px;
  padding:72px 20px;
}
.hero-logo{ height:88px; width:auto; max-width:70%; object-fit:contain; }
.hero h1{
  font-size:clamp(1.4rem, 2.4vw, 1.85rem); font-weight:900;
  letter-spacing:0; line-height:1.15; margin:0; color:#fff;
}
.hero p{ color:rgba(255,255,255,0.85); margin:0; font-size:0.92rem; line-height:1.6; max-width:560px; }
@media (max-width:720px){
  .hero-inner{ padding:44px 16px; }
  .hero-logo{ height:64px; }
}
/* Consistent gap under the hero before the page content starts,
   matching Index.html — applies to whichever container follows
   the hero on every page. */
.hero + .container{ padding-top:28px; }

/* =========================================================
   BUTTONS (independent rounding + border allowed here)
   ========================================================= */
.btn-sm, .btn, .btn-full{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-sm);
  border:0;
  font-weight:700; letter-spacing:0.01em;
  transition:background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease, filter 0.12s ease;
  white-space:nowrap;
}
.btn-sm{ padding:8px 16px; font-size:0.85rem; }
.btn{ padding:11px 22px; font-size:0.92rem; }
.btn-full{ padding:10px 14px; font-size:0.88rem; width:100%; }
/* Bevelled "block" buttons: a lit top edge and a thick shaded bottom edge
   make each button read as a raised block. Pressing pushes it down 2px and
   flattens the bottom edge. No borders anywhere. */
.btn-sm-primary, .btn-primary{
  background:var(--accent); color:#fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.30), inset 0 -3px 0 rgba(0,0,0,0.28);
  text-shadow:0 1px 0 rgba(0,0,0,0.22);
}
.btn-sm-primary:hover, .btn-primary:hover{ filter:brightness(1.08); }
.btn-sm-primary:active, .btn-primary:active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 0 rgba(0,0,0,0.22);
}
html[data-theme="dark"] .btn-sm-primary, html[data-theme="dark"] .btn-primary{
  color:#0f1a02; text-shadow:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -3px 0 rgba(0,0,0,0.30);
}

.secondary, .btn-secondary{
  background:var(--surface-3); color:var(--text);
  box-shadow:inset 0 2px 0 var(--surface), inset 0 -3px 0 var(--border-strong);
}
.secondary:hover, .btn-secondary:hover{
  background:var(--accent-soft); color:var(--accent-text);
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.45), inset 0 -3px 0 var(--accent);
}
.secondary:active, .btn-secondary:active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 0 var(--border-strong);
}
.btn-sm:focus-visible, .btn:focus-visible, .btn-full:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.mobile-menu-btn:focus-visible, .theme-toggle:focus-visible, .modal-close:focus-visible,
.tag-option:focus-visible, .version-option:focus-visible, .ip-copy-btn:focus-visible,
.text-btn:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--accent-soft);
}

/* =========================================================
   PILLS / TAGS (independent border + full rounding allowed here)
   ========================================================= */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--surface-3);
  border:none;
  color:var(--text-muted);
  font-size:0.78rem; font-weight:500;
  padding:4px 10px; border-radius:var(--r-pill);
  white-space:nowrap;
}
.pill.pill-micro{ font-size:0.66rem; padding:2px 8px; font-weight:700; }
.pill.accent{ background:var(--accent-soft); color:var(--accent-text); }
.pill.success{ background:var(--success-soft); color:var(--success); }
.pill.warn{ background:var(--warn-soft); color:var(--warn); }
.pill.danger{ background:var(--danger-soft); color:var(--danger); }
.pill.info{ background:var(--info-soft); color:var(--info); }
.pill.solid-accent{ background:var(--accent); color:#fff; }
.pill.solid-dark{ background:var(--text); color:var(--surface); font-variant-numeric:tabular-nums; }
.pill .platform-logo-img{ width:14px; height:14px; object-fit:contain; }

.tag-option, .version-option{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-3);
  color:var(--text-muted);
  font-size:0.85rem; font-weight:500;
  min-height:36px;
  padding:6px 14px; border-radius:var(--r-pill);
  border:none;
  transition:all 0.15s ease;
}
.version-option{ font-variant-numeric:tabular-nums; }
.tag-option:hover, .version-option:hover{ background:var(--accent-soft); color:var(--accent-text); }
.tag-option.selected, .version-option.selected{ background:var(--accent); color:#fff; font-weight:600; }
.chip-icon{ width:16px; height:16px; object-fit:contain; }

/* =========================================================
   CARD CONNECTION SYSTEM
   - A single card never carries its own border/shadow/rounding;
     separation from the page comes from surface color contrast.
   - Two or more cards grouped together share ONE outer border via
     .card-group; individual .card children only get a divider on
     the seam where they join the next card, never on the group's
     outer edges. Rounding lives on the group's outer corners only
     (currently 0, per the blocky aesthetic).
   ========================================================= */
.card{
  background:var(--surface);
  border:none;
  border-radius:var(--r-card);
  box-shadow:none;
}
.card-group{
  border:none;
  border-radius:var(--r-card);
  overflow:hidden;
  background:transparent;
}
.card-group .card{ border-radius:0; }
.card-group.stack{ display:flex; flex-direction:column; }
.card-group.row{ display:flex; flex-direction:row; }
.card-group.row .card{ flex:1; }
@media (max-width:720px){
  .card-group.row{ flex-direction:column; }
}

/* =========================================================
   FORM CONTROLS (shared: search, selects, text inputs)
   ========================================================= */
label{ display:block; font-size:0.82rem; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
input[type="text"], input[type="search"], input[type="url"], input[type="number"],
input[type="email"], input[type="password"], select, textarea{
  padding:10px 12px;
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  font-family:inherit; font-size:0.9rem;
  background:var(--surface); color:var(--text);
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="number"]:focus,
input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder{ color:var(--text-soft); }
.hint{ font-size:0.78rem; color:var(--text-soft); margin-top:4px; }

/* =========================================================
   SEARCHABLE SELECT (country pickers, etc.)
   ========================================================= */
.select-search{ position:relative; }
.select-search input{ width:100%; cursor:text; }
.select-dropdown{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  max-height:230px; overflow-y:auto;
  z-index:30;
  display:none;
  padding:6px;
}
.select-dropdown.open{ display:block; }
.select-option{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:var(--r-sm);
  font-size:0.88rem; color:var(--text);
  cursor:pointer;
  transition:background 0.12s ease;
}
.select-option:hover, .select-option.highlight{ background:var(--surface-2); }
.select-option.selected{ background:var(--accent-soft); color:var(--accent-text); font-weight:600; }
.select-option .flag{ font-size:1rem; }
.select-empty{
  padding:10px; font-size:0.85rem; color:var(--text-soft); text-align:center;
}

/* =========================================================
   TOGGLE SWITCH
   ========================================================= */
.switch{
  position:relative; width:44px; height:36px; flex-shrink:0;
  display:flex; align-items:center;
}
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch-track{
  position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%);
  height:24px;
  background:var(--surface-3);
  border:1px solid var(--border-strong);
  border-radius:var(--r-pill);
  transition:all 0.15s ease;
}
.switch-track::after{
  content:'';
  position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border-strong);
  transition:all 0.15s ease;
}
.switch input:checked + .switch-track{ background:var(--accent); border-color:var(--accent); }
.switch input:checked + .switch-track::after{ transform:translateX(20px); border-color:var(--accent); }
.switch input:focus-visible + .switch-track{ box-shadow:0 0 0 3px var(--accent-soft); }

/* =========================================================
   THEME TOGGLE / TOAST
   ========================================================= */
.theme-toggle{
  position:fixed; bottom:24px; right:24px;
  width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border-strong);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text); z-index:100;
  transition:all 0.15s ease;
}
.theme-toggle:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.theme-toggle svg{ width:20px; height:20px; }
.theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

.toast{
  position:fixed; bottom:80px; right:24px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:12px 18px;
  display:flex; align-items:center; gap:10px;
  font-size:0.9rem; font-weight:600;
  transform:translateY(20px); opacity:0; pointer-events:none;
  transition:all 0.3s ease; z-index:200;
}
.toast.show{ transform:translateY(0); opacity:1; }
.toast svg{ width:16px; height:16px; color:var(--success); flex-shrink:0; }
@media (max-width:480px){ .toast{ left:14px; right:14px; } }

/* Cookie banner: a card in the bottom-left corner, clear of the theme toggle. */
.cookie-banner{
  position:fixed; left:24px; bottom:24px; z-index:150;
  width:min(420px, calc(100vw - 48px));
  padding:18px 20px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--border-strong);
  box-shadow:0 12px 32px rgba(0,0,0,0.18);
}
.cookie-banner[hidden]{ display:none; }
.cookie-title{ margin:0 0 6px; font-family:var(--font-heading); font-weight:800; font-size:1rem; color:var(--text); }
.cookie-text{ margin:0 0 14px; font-size:0.86rem; line-height:1.55; color:var(--text-muted); }
.cookie-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
@media (max-width:560px){
  .cookie-banner{ left:14px; right:14px; bottom:14px; width:auto; }
  .cookie-actions .btn-sm{ flex:1; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ margin-top:auto; background:var(--surface); border-top:1px solid var(--border); padding:32px 0 20px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:24px; }
@media (max-width:980px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .header-logo{ margin-bottom:10px; }
.footer-brand .logo-mark{ width:28px; height:28px; font-size:0.95rem; }
.footer-brand p{ font-size:0.88rem; max-width:280px; color:var(--text-muted); margin:0; }
.footer-col h4{ font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-soft); margin:0 0 12px; }
.footer-col a{ display:block; font-size:0.9rem; color:var(--text-muted); padding:5px 0; transition:color 0.15s ease; }
.footer-col a:hover{ color:var(--accent-hover); }
.footer-bottom{ border-top:1px solid var(--border); padding-top:18px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; color:var(--text-soft); font-size:0.82rem; }
.social-icons{ display:flex; gap:10px; }
.social-icon{
  width:32px; height:32px; border-radius:50%;
  background:var(--surface-3); color:var(--text-muted);
  display:inline-flex; align-items:center; justify-content:center;
  transition:all 0.15s ease;
}
.social-icon svg{ width:16px; height:16px; }
.social-icon:hover{ background:var(--accent); color:#fff; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* =============================================================
   ADD.HTML — page-specific styles
   ============================================================= */
.main{ flex:1; padding:0 0 64px; }
.form-page{ max-width:1040px; margin:0 auto; }

/* Form card: a single standalone card — square, no border, no
   shadow. Contrast against the page comes from the surface fill. */
.form-card{
  background:var(--surface);
  border:none;
  border-radius:var(--r-card);
  box-shadow:none;
  padding:30px 34px 34px;
}

.form-section{ margin-top:24px; }
.form-section:first-child{ margin-top:0; }

.required-mark{ color:var(--danger); margin-left:2px; font-weight:700; }
.optional-mark{
  color:var(--text-soft); font-weight:500; font-style:italic;
  font-size:0.78rem; text-transform:none; letter-spacing:normal;
  margin-left:6px;
}

.form-group{ margin-bottom:18px; }
.form-group:last-child{ margin-bottom:0; }
input[type="text"], input[type="url"], input[type="number"], input[type="email"], input[type="password"], select, textarea{ width:100%; }

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.form-row.cols-3{ grid-template-columns:1fr 1fr 1fr; }
.form-row.cols-4{ grid-template-columns:1fr 1fr 1fr 1fr; }
.form-row.name-country{ grid-template-columns:2fr 1fr; }
@media (max-width:760px){
  .form-row.cols-3, .form-row.cols-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .form-row, .form-row.cols-3, .form-row.cols-4, .form-row.name-country{ grid-template-columns:1fr; }
}

.slug-group{
  display:flex; align-items:stretch;
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  overflow:hidden;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.slug-group:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.slug-prefix{
  display:flex; align-items:center;
  padding:0 10px;
  background:var(--surface-3);
  color:var(--text-soft);
  font-size:0.85rem;
  white-space:nowrap;
  flex-shrink:0;
}
.slug-group input{
  border:none; border-radius:0; box-shadow:none !important;
}

input.ip-field::placeholder{ font-family:var(--font-mc); }
input.ip-field{
  font-size:0.8rem;
  letter-spacing:0.02em;
  padding-top:12px; padding-bottom:12px;
}

.links-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:560px){
  .links-grid{ grid-template-columns:1fr; }
}
.link-input-group .icon-circle{
  width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--text-muted);
  flex-shrink:0;
}
.link-input-group .icon-circle svg{ width:15px; height:15px; }
.link-input-group{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  padding:0 12px;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.link-input-group:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.link-input-group input{
  border:none; padding:10px 0; box-shadow:none !important;
}

.wysiwyg-toolbar{
  display:flex; gap:4px;
  border:1px solid var(--border-strong);
  border-bottom:none;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  background:var(--surface-2);
  padding:6px;
}
.wysiwyg-btn{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm);
  color:var(--text-muted);
  font-size:0.85rem;
  transition:background 0.15s ease, color 0.15s ease;
}
.wysiwyg-btn:hover{ background:var(--surface-3); color:var(--text); }
.wysiwyg-btn.active{ background:var(--accent-soft); color:var(--accent-text); }
.wysiwyg-btn b{ font-weight:800; }
.wysiwyg-btn i{ font-style:italic; }
.wysiwyg-btn u{ text-decoration:underline; }
.wysiwyg-btn s{ text-decoration:line-through; }

.wysiwyg-body{
  min-height:140px;
  max-height:320px;
  overflow-y:auto;
  padding:12px 14px;
  border:1px solid var(--border-strong);
  border-radius:0 0 var(--r-sm) var(--r-sm);
  font-size:0.9rem;
  line-height:1.6;
  background:var(--surface);
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.wysiwyg-body:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.wysiwyg-body:empty::before{
  content:attr(data-placeholder);
  color:var(--text-soft);
}

.tag-picker-grid{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:12px;
}
.tag-option.custom-tag{ padding-right:8px; }
.tag-option.custom-tag .remove-x{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%;
  font-size:0.7rem; line-height:1;
}
.tag-option.custom-tag .remove-x:hover{ background:rgba(255,255,255,0.25); color:inherit; }

.tag-add-row{ display:flex; gap:8px; }
.tag-add-row input{ flex:1; }

.tag-counter{ font-size:0.78rem; color:var(--text-soft); margin-top:8px; }
.tag-counter.limit{ color:var(--warn); font-weight:600; }

.platform-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
@media (max-width:560px){
  .platform-grid{ grid-template-columns:1fr; }
}
.platform-option{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
  background:var(--surface-2);
  color:var(--text-muted);
  font-size:0.92rem; font-weight:700;
  letter-spacing:-0.01em;
  padding:28px 14px;
  border-radius:var(--r-card);
  border:none;
  cursor:pointer;
  text-align:center;
  transition:background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.platform-option input[type="radio"]{
  position:absolute; opacity:0; pointer-events:none;
}
.platform-option .p-icon{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:transform 0.15s ease;
}
.platform-option .p-icon img{ width:44px; height:44px; object-fit:contain; }
.platform-option .p-check{
  position:absolute; top:10px; right:10px;
  width:20px; height:20px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(0.6);
  transition:all 0.15s ease;
}
.platform-option .p-check svg{ width:12px; height:12px; }
.platform-option:hover{ background:var(--surface-3); }
.platform-option:hover .p-icon{ transform:scale(1.06); }
.platform-option.selected{ background:var(--accent-soft); color:var(--accent-text); }
.platform-option.selected .p-check{ opacity:1; transform:scale(1); }

.toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.toggle-row .t-label{ font-size:0.9rem; font-weight:600; color:var(--text); }
.toggle-row .t-desc{ font-size:0.8rem; color:var(--text-muted); margin-top:2px; }

.collapse-body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 0.3s ease;
}
.collapse-body.open{ grid-template-rows:1fr; }
.collapse-body-inner{
  overflow:hidden;
  min-height:0;
  padding-top:18px;
}

.version-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.version-counter{ font-size:0.78rem; color:var(--text-soft); margin-top:8px; }
.version-counter.limit{ color:var(--warn); font-weight:600; }

.hidden-block{ display:none !important; }

.upload-zone{
  border:none;
  border-radius:var(--r-md);
  background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:all 0.15s ease;
  overflow:hidden;
}
.upload-zone:hover, .upload-zone.dragover{
  background:var(--accent-soft);
  color:var(--accent-text);
}
.upload-zone img.preview{
  width:100%; height:100%; object-fit:cover;
}

.media-row{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:24px;
}
.media-row .upload-field:first-child{ flex-shrink:0; }
.media-row .upload-field:last-child{ flex:1 1 320px; max-width:468px; }

.upload-field{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }

.icon-upload{
  width:60px; height:60px;
  border-radius:var(--r-sm);
  flex-shrink:0;
}
.icon-upload .u-icon svg{ width:18px; height:18px; }

.banner-upload{
  width:100%;
  max-width:468px;
  height:60px;
}
.banner-upload .u-icon svg{ width:16px; height:16px; }

.upload-zone .u-icon{ color:var(--text-soft); display:flex; }

.upload-dims{ font-size:0.78rem; color:var(--text-soft); }

.submit-row{ margin-top:36px; padding-top:24px; border-top:1px solid var(--border); }
.submit-row .btn{ width:100%; }

/* =============================================================
   CLAIM.HTML — page-specific styles
   ============================================================= */
.btn:disabled{ opacity:0.6; cursor:not-allowed; }
.btn:disabled:active{ transform:none; }
.btn.copied{ background:var(--success); }

.spinner{
  width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  animation:spin 0.7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.pill.micro{ font-size:0.66rem; padding:2px 8px; font-weight:700; }

/* One continuous card, no separate sections — square, no border,
   no shadow; contrast comes from the surface fill against the page. */
.claim{
  max-width:720px; margin:0 auto;
  background:var(--surface);
  border:none;
  border-radius:var(--r-card);
  box-shadow:none;
  padding:28px 32px;
}
.flow{ display:flex; flex-direction:column; gap:24px; }
.lead{ margin:0; color:var(--text-muted); line-height:1.6; }
.lead strong, .lead b{ color:var(--text); font-weight:600; }

.claim .form-group{ margin:0; }
.label{ display:block; font-size:0.82rem; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.label .req{ color:var(--danger); margin-left:2px; }
.label .opt{ color:var(--text-soft); font-weight:400; margin-left:4px; }

.field, .textarea{
  width:100%; padding:10px 12px;
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  font-family:inherit; font-size:0.9rem;
  background:var(--surface); color:var(--text);
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.field:focus, .textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.textarea{ min-height:140px; resize:vertical; line-height:1.55; }
.textarea::placeholder{ color:var(--text-soft); }
.hint-row{ display:flex; justify-content:space-between; gap:12px; }
.hint-row .hint{ margin:4px 0 0; }

/* Server lookup (combobox) */
.combobox{ position:relative; }
.combobox-input-wrap{ position:relative; }
.combobox-input-wrap .search-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--text-soft); pointer-events:none;
}
.combobox-input{
  width:100%; padding:11px 14px 11px 38px;
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  font-family:inherit; font-size:0.92rem;
  background:var(--surface); color:var(--text);
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.combobox-input::placeholder{ color:var(--text-soft); }
.combobox-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.combobox-dropdown{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md);
  max-height:280px; overflow-y:auto; z-index:40; display:none;
}
.combobox-dropdown.open{ display:block; }
.combobox-option{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; cursor:pointer; transition:background 0.1s ease;
}
.combobox-option:hover, .combobox-option.active{ background:var(--surface-2); }
.combobox-option-icon{
  width:32px; height:32px; border-radius:var(--r-sm); flex-shrink:0;
  background:var(--surface-3); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.72rem;
}
.combobox-option-info{ flex:1; min-width:0; }
.combobox-option-name{ display:block; font-size:0.87rem; font-weight:600; color:var(--text); }
.combobox-option-address{
  display:block; font-size:0.74rem; color:var(--text-muted);
  font-family:var(--font-mc); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.combobox-empty{ padding:18px; text-align:center; font-size:0.85rem; color:var(--text-muted); }
.combobox-empty-link{ color:var(--accent-hover); font-weight:600; }
.combobox-empty-link:hover{ text-decoration:underline; }
.combobox-section-label{
  padding:10px 12px 4px; font-size:0.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.07em; color:var(--text-soft);
}
.combobox-divider{ height:1px; background:var(--border); margin:4px 8px; }

.selected-server{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; background:var(--surface-2); border-radius:var(--r-md);
}
.selected-server-icon{
  width:48px; height:48px; border-radius:var(--r-sm); flex-shrink:0;
  background:var(--surface-3); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1rem; overflow:hidden;
}
.selected-server-info{ flex:1; min-width:0; }
.selected-server-name{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:0.97rem; font-weight:700; }
.selected-server-name .pills{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.selected-server-address{
  font-family:var(--font-mc); font-size:0.8rem; color:var(--text-muted);
  margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  user-select:all;
}
.selected-server-change{
  flex-shrink:0; background:none; border:none; padding:6px 4px;
  font-size:0.82rem; font-weight:600; color:var(--accent-hover); cursor:pointer;
  border-radius:var(--r-sm);
}
.selected-server-change:hover{ text-decoration:underline; }
.selected-server-change:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); }
.selected-server-change:disabled{ opacity:0.6; cursor:not-allowed; }

.method-section{ display:flex; flex-direction:column; gap:24px; transition:opacity 0.2s ease; }
.method-section[data-disabled="true"]{ opacity:0.45; pointer-events:none; }

.claim .icon-circle{
  width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-3); border:1px solid var(--border-strong); color:var(--text-muted);
  transition:all 0.15s ease; flex-shrink:0; cursor:pointer;
}
.claim .icon-circle:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.2); }

/* Method picker: two cards connected into one group — square, one
   shared outer border, a single divider on the seam, no independent
   borders/shadows on the cards themselves. Active/hover states are
   shown with a background change only. */
.method-grid.card-group{ background:transparent; }
.method.card{
  padding:16px;
  display:flex; align-items:center; gap:12px;
  text-align:left; width:100%;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}
.method.card{ background:var(--surface-2); }
.method.card:hover{ background:var(--surface-3); }
.method.card:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--accent-soft); }
.method.card.active{ background:var(--accent-soft); }
.method.card:disabled{ opacity:0.6; cursor:not-allowed; }
.method-icon{
  width:40px; height:40px; border-radius:var(--r-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--text-muted);
}
.method.active .method-icon{ background:var(--accent); color:#fff; }
.method-title{ display:block; font-size:0.95rem; font-weight:700; }
.method-desc{ display:block; font-size:0.82rem; color:var(--text-muted); line-height:1.45; }

.panel{ display:flex; flex-direction:column; gap:18px; }
.code-row{ display:flex; gap:10px; align-items:stretch; }
.code{
  flex:1; min-width:0;
  background:var(--surface-3); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:10px 14px;
  font-size:1.15rem; font-weight:700; letter-spacing:0.06em;
  font-variant-numeric:tabular-nums; user-select:all;
  display:flex; align-items:center; word-break:break-all;
}
.code:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Alerts are colored callouts — never a border under any
   circumstance; the colored fill alone carries the separation. */
.alert{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px; border-radius:var(--r-sm);
  border:none; font-size:0.88rem; line-height:1.55;
  color:var(--text);
}
.alert svg{ margin-top:2px; }
.alert p{ margin:0; }
.alert p + p{ margin-top:6px; }
.alert strong{ font-weight:700; }
.alert.success{ background:var(--success-soft); }
.alert.success svg{ color:var(--success); }
.alert.warn{ background:var(--warn-soft); }
.alert.warn svg{ color:var(--warn); }
.alert.danger{ background:var(--danger-soft); }
.alert.danger svg{ color:var(--danger); }
.alert.info{ background:var(--info-soft); }
.alert.info svg{ color:var(--info); }
.motd-seen{
  margin-top:8px; padding:6px 10px; border-radius:var(--r-sm);
  background:var(--surface-3); color:var(--text);
  font-family:var(--font-mc); font-size:0.72rem; line-height:1.6; word-break:break-word;
}
.result:empty{ display:none; }

.done{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.done-badge{
  width:48px; height:48px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.done h2:focus{ outline:none; }

.footer-desc{ color:var(--text-muted); font-size:0.88rem; max-width:280px; margin:10px 0 0; }
.footer h4{
  margin:0 0 12px; font-size:0.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--text-soft);
}
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.footer ul a{ font-size:0.9rem; color:var(--text-muted); transition:color 0.15s ease; }
.footer ul a:hover{ color:var(--accent-hover); }

/* This page's mobile menu button keeps its own filled/outlined look
   (scoped by id so the shared .mobile-menu-btn default is untouched). */
#menuBtn{ background:var(--surface-3); border:1px solid var(--border-strong); }
#menuBtn:hover{ background:var(--surface-2); border-color:var(--accent); }

@media (max-width:720px){
  .claim{ padding:22px 20px; }
}
@media (max-width:480px){
  .claim{ padding:20px 16px; }
  .selected-server-icon{ width:44px; height:44px; font-size:0.9rem; }
  .code-row{ flex-direction:column; }
  .actions .btn, .panel > .btn, .done .btn{ width:100%; }
}

/* =============================================================
   CONTACT.HTML — page-specific styles
   ============================================================= */
.contact-grid *{ margin:0; }
.contact-grid .form-group{ margin-bottom:18px; }
.contact-grid label{ margin-bottom:6px; }
.form-textarea{ min-height:140px; resize:vertical; line-height:1.55; }
.section{ margin-top:56px; }
.section:first-child{ margin-top:0; }
.section-title{ font-size:1.5rem; font-weight:700; letter-spacing:-0.01em; margin-bottom:8px; }
.section-subtitle{ color:var(--text-muted); font-size:0.95rem; margin-bottom:24px; }
.contact-grid{ max-width:760px; margin:0 auto; }
.form-hint{ font-size:0.78rem; color:var(--text-soft); margin-top:4px; }

/* Category picker: four separate, spaced-out cards. Each one is its own
   square block with no border; active/hover shown with a background change. */
.category-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  margin-bottom:24px;
}
.category-card{
  background:var(--surface);
  border:none;
  border-radius:var(--r-card);
  padding:18px;
  display:flex; align-items:center; gap:14px;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}
.category-card:hover{ background:var(--surface-2); }
.category-card.active{ background:var(--accent-soft); }
.category-card .cat-icon{
  width:40px; height:40px; border-radius:var(--r-sm);
  background:var(--surface-3); border:none;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--accent); flex-shrink:0;
}
.category-card.active .cat-icon{ background:var(--accent); color:#fff; }
.category-card .cat-info strong{ font-size:0.95rem; font-weight:700; color:var(--text); display:block; }
.category-card .cat-info span{ font-size:0.82rem; color:var(--text-muted); }
@media (max-width:560px){
  .category-grid{ grid-template-columns:1fr; }
}

/* FAQ accordion: already one connected block (shared outer border,
   dividers only between items) — just square off the corners. */
.faq{ border:none; border-radius:0; overflow:hidden; background:var(--surface); }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-item:last-child{ border-bottom:none; }
.faq-q{
  width:100%; text-align:left; padding:16px 20px;
  font-size:0.98rem; font-weight:600;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  color:var(--text); background:none; border:none; cursor:pointer;
  transition:background 0.15s ease;
}
.faq-q:hover{ background:var(--surface-2); }
.faq-q .chev{ width:18px; height:18px; flex-shrink:0; color:var(--text-muted); transition:transform 0.2s ease; }
.faq-item.open .faq-q .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height 0.25s ease; }
.faq-item.open .faq-a{ max-height:400px; }
.faq-a-inner{ padding:0 20px 16px; color:var(--text-muted); font-size:0.92rem; line-height:1.6; }

.footer-col > .footer-brand{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.footer-col > .footer-brand img{ height:28px; width:auto; display:block; }
.footer-col p{ color:var(--text-muted); font-size:0.88rem; line-height:1.6; max-width:280px; margin:0; }

/* =============================================================
   DASHBOARD.HTML — page-specific styles
   ============================================================= */
.btn-danger{
  background:var(--danger); color:#fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.28), inset 0 -3px 0 rgba(0,0,0,0.28);
}
.btn-danger:hover{ filter:brightness(1.08); }
.btn-danger:active{ transform:translateY(2px); box-shadow:inset 0 2px 0 rgba(0,0,0,0.22); }
.header-actions .btn-sm svg, .dash-shell .btn-sm svg, .dash-shell .btn svg{ width:15px; height:15px; }
.mobile-menu-btn svg{ width:20px; height:20px; }

.status-dot{ width:8px; height:8px; border-radius:50%; background:var(--success); position:relative; flex-shrink:0; }
.status-dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--success); opacity:0.35;
  animation:statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse{
  0%,100%{ transform:scale(1); opacity:0.35; }
  50%{ transform:scale(1.35); opacity:0; }
}

.icon-circle{
  width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-3); border:1px solid var(--border-strong); color:var(--text-muted);
  transition:all 0.15s ease; flex-shrink:0;
}
.icon-circle:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.08); }
.icon-circle svg{ width:16px; height:16px; }

.dash-shell h1, .dash-shell h2, .dash-shell h3, .dash-shell h4{ margin:0; }
.dash-shell{
  display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:start;
  padding:28px 0 0;
}
@media (max-width:860px){ .dash-shell{ grid-template-columns:1fr; } }

/* Sidebar: account box + nav are two cards connected into one group */
.dash-sidebar{ position:sticky; top:84px; }
@media (max-width:860px){ .dash-sidebar{ position:static; } }
.side-group.card-group{ display:flex; flex-direction:column; }
.account-box{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--surface-2);
}
.account-badge{
  width:36px; height:36px; border-radius:var(--r-md);
  background:var(--accent-soft); color:var(--accent-text);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.95rem; flex-shrink:0;
}
.account-name{ font-weight:700; font-size:0.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-sub{ font-size:0.74rem; color:var(--text-soft); }
.dash-nav{ padding:8px; display:flex; flex-direction:column; gap:2px; }
.dash-nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:var(--r-sm); font-weight:600; font-size:0.88rem;
  color:var(--text-muted); text-align:left;
  transition:background 0.15s ease, color 0.15s ease;
}
.dash-nav-item svg{ width:17px; height:17px; flex-shrink:0; }
.dash-nav-item:hover{ background:var(--surface-2); color:var(--text); }
.dash-nav-item.active{ background:var(--accent-soft); color:var(--accent-text); }
.dash-nav-divider{ height:1px; background:var(--border); margin:6px 4px; }
.dash-nav-item.nav-danger{ color:var(--danger); }
.dash-nav-item.nav-danger:hover{ background:var(--danger-soft); }
@media (max-width:860px){
  .dash-nav{ flex-direction:row; overflow-x:auto; }
  .dash-nav-item{ white-space:nowrap; }
  .dash-nav-divider{ display:none; }
  .dash-nav-item.nav-danger{ margin-left:auto; }
}

.dash-panel{ display:none; }
.dash-panel.active{ display:block; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.panel-head h1, .panel-head h2{ font-size:1.35rem; font-weight:800; letter-spacing:0; }
.panel-head p{ font-size:0.85rem; color:var(--text-muted); margin:2px 0 0; }

/* Server list: cards connected into one stacked group. Dividers only
   between visible cards, so hidden rows never leave a stray line. */
.server-list.card-group{ display:flex; flex-direction:column; gap:12px; overflow:visible; }
.server-card{
  position:relative; display:flex; align-items:center; gap:18px; padding:16px;
  transition:background 0.15s ease;
}
.server-card[hidden]{ display:none; }
.server-card:hover{ background:var(--surface-2); }
.server-card.clickable{ cursor:pointer; }
.server-name-row{ display:flex; align-items:center; gap:8px; }
.server-name{ font-size:1.02rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.server-ip-box{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-3); border:1px solid var(--border-strong); border-radius:var(--r-sm);
  padding:5px 10px; width:fit-content; max-width:100%;
}
.server-ip-box span{
  font-family:var(--font-mc); font-size:0.72rem; letter-spacing:0.01em; color:var(--text); user-select:all;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.col-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
.title-row{ display:flex; align-items:center; gap:10px; min-width:0; }
.name{ font-size:1.25rem; font-weight:700; margin:0; letter-spacing:0; line-height:1.3; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.banner{ width:100%; max-width:468px; aspect-ratio:468/60; height:auto; background:var(--surface-3); border:1px solid var(--border); object-fit:cover; }
.icon{ width:52px; height:52px; flex-shrink:0; object-fit:cover; }
.col-action{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.col-action .btn-full{ width:auto; padding:10px 18px; }
@media (max-width:640px){
  .server-card{ flex-wrap:wrap; }
  .col-main{ flex:1 1 100%; }
  .icon{ width:40px; height:40px; }
  .col-action{ flex:1; }
  .col-action .btn-full{ flex:1; }
}

.pro-badge{
  display:inline-flex; align-items:center; gap:4px;
  background:var(--text); color:var(--surface);
  font-size:0.62rem; font-weight:700; letter-spacing:0.04em;
  padding:3px 8px 3px 6px; border-radius:999px;
}
.pro-badge svg{ width:10px; height:10px; fill:var(--accent); stroke:none; }

/* Analytics */
.analytics-view{ display:none; }
.analytics-view.active{ display:block; }
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.85rem; font-weight:600; color:var(--text-muted); margin-bottom:16px;
}
.back-link:hover{ color:var(--accent-hover); }
.back-link svg{ width:15px; height:15px; }
.analytics-server-card{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; margin-bottom:20px;
}
.analytics-server-card img{ width:44px; height:44px; border-radius:var(--r-md); border:1px solid var(--border); flex-shrink:0; }
.analytics-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:16px; }
.range-toggle, .tab-strip, .billing-toggle{
  display:flex; gap:2px; background:var(--surface-3); border-radius:var(--r-pill); padding:3px;
}
.range-btn{ padding:7px 14px; font-size:0.82rem; font-weight:600; color:var(--text-muted); border-radius:var(--r-pill); transition:all 0.15s ease; }
.range-btn:hover{ color:var(--text); }
.range-btn.active{ background:var(--surface); color:var(--accent-hover); }

/* Status strip: one card, internal dividers between stats */
.stat-strip{
  display:flex; flex-wrap:wrap; align-items:center;
  background:var(--surface); border-radius:var(--r-card);
  padding:14px 18px; margin-bottom:26px; row-gap:14px;
}
.stat-item{ display:flex; flex-direction:column; gap:3px; padding:0 20px; border-right:1px solid var(--border); }
.stat-item:first-child{ padding-left:0; }
.stat-item:last-child{ border-right:none; }
.stat-item .stat-label{ font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-soft); font-weight:700; }
.stat-item .stat-value{ display:flex; align-items:center; gap:8px; font-size:1rem; font-weight:700; color:var(--text); }
@media (max-width:720px){ .stat-item{ padding:0 14px; border-right:none; flex:1 1 40%; } }

.section-label{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em;
  font-weight:700; color:var(--text-soft); margin-bottom:14px;
}
.section-label-sub{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--text-soft); opacity:0.75; margin-left:4px; }
#analyticsDetailView .section-label{ margin-top:30px; }

.period-legend{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:0.8rem; color:var(--text-muted); }
.period-legend .lg{ display:inline-flex; align-items:center; gap:7px; }
.period-legend b{ color:var(--text); font-weight:700; }
.lg-dot{ width:18px; height:0; border-top:3px solid var(--c-cur); border-radius:2px; display:inline-block; }
.lg-dot.prev{ border-top:3px solid var(--c-prev); }

.a-panel{ background:var(--surface); border-radius:var(--r-card); padding:18px 20px; }
.a-panel.a-flush{ padding:0; overflow:hidden; }
.a-table-wrap{ overflow-x:auto; }
.a-table{ width:100%; min-width:680px; font-size:0.86rem; border-collapse:collapse; font-family:inherit; }
.a-table th{
  text-align:right; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.07em;
  color:var(--text-soft); font-weight:700; padding:12px 16px; background:var(--surface-2);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.a-table th small{ display:block; text-transform:none; letter-spacing:0; font-weight:600; margin-top:1px; }
.a-table th:first-child, .a-table td:first-child{ text-align:left; }
.a-table td{ padding:11px 16px; text-align:right; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; white-space:nowrap; }
.a-table tr:last-child td{ border-bottom:none; }
.a-table tr.grp td{
  background:var(--surface); padding:10px 16px 6px; font-size:0.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--text-soft); border-bottom:none;
}
.a-table .m-name{ font-weight:700; }
.a-table .m-help{ display:block; font-size:0.72rem; font-weight:500; color:var(--text-soft); }
.a-table .m-cur{ font-weight:800; }
.a-table .m-prev{ color:var(--text-muted); }
.a-table .up{ color:var(--success); font-weight:700; }
.a-table .down{ color:var(--danger); font-weight:700; }
.a-table .flat{ color:var(--text-muted); font-weight:700; }

.change-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:0.76rem; font-weight:700; padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.change-badge svg{ width:12px; height:12px; }
.change-badge.up{ background:var(--success-soft); color:var(--success); }
.change-badge.down{ background:var(--danger-soft); color:var(--danger); }
.change-badge.flat{ background:var(--surface-3); color:var(--text-muted); }

.a-panel-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.a-sum{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:0.84rem; color:var(--text-muted); }
.a-sum .a-big{ font-size:1.3rem; font-weight:800; color:var(--text); letter-spacing:-0.01em; }
.tab-strip{ max-width:100%; overflow-x:auto; }
.tab-btn{ padding:6px 12px; font-size:0.78rem; font-weight:600; color:var(--text-muted); border-radius:var(--r-pill); white-space:nowrap; transition:all 0.15s ease; }
.tab-btn:hover{ color:var(--text); }
.tab-btn.active{ background:var(--surface); color:var(--accent-hover); }
/* The Server page's squared .tab-btn (defined further down) must not leak into
   the rounded analytics tab strip, so restate the pill shape with higher specificity. */
.tab-strip .tab-btn{ padding:6px 12px; font-size:0.78rem; border-radius:var(--r-pill); background:transparent; }
.tab-strip .tab-btn:hover{ background:transparent; color:var(--text); }
.tab-strip .tab-btn.active{ background:var(--surface); color:var(--accent-hover); }

.a-chart{ position:relative; width:100%; }
.a-chart svg{ display:block; overflow:visible; }
.a-grid{ stroke:var(--border); stroke-width:1; }
.a-axis{ stroke:var(--border-strong); stroke-width:1; }
.a-lab{ fill:var(--text-soft); font-size:11px; font-weight:600; font-family:inherit; font-variant-numeric:tabular-nums; }
.a-line-cur{ fill:none; stroke:var(--c-cur); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
.a-line-prev{ fill:none; stroke:var(--c-prev); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.a-dot-cur{ fill:var(--c-cur); stroke:var(--surface); stroke-width:1.5; }
.a-dot-prev{ fill:var(--surface); stroke:var(--c-prev); stroke-width:1.6; }
.a-cross{ stroke:var(--text-soft); stroke-width:1; stroke-dasharray:3 3; opacity:0; }
.bar.cur{ fill:var(--c-cur); } .bar.prev{ fill:var(--c-prev); } .bar.mute{ fill:var(--surface-3); }
.bar{ transition:opacity 0.1s ease; } .bar:hover{ opacity:0.8; }
.a-tip{
  position:absolute; top:0; left:0; z-index:5; pointer-events:none; opacity:0;
  background:var(--surface-3); border:none; border-radius:var(--r-sm);
  padding:9px 12px; font-size:0.76rem; line-height:1.5; white-space:nowrap;
  transition:opacity 0.1s ease;
}
.a-tip.show{ opacity:1; }
.a-tip .tt-r{ display:flex; align-items:center; gap:8px; }
.a-tip .tt-r b{ margin-left:auto; padding-left:14px; font-variant-numeric:tabular-nums; }
.a-tip .tt-d{ margin-top:5px; padding-top:5px; border-top:1px solid var(--border-strong); font-weight:700; }
.a-tip .tt-d.up{ color:var(--success); } .a-tip .tt-d.down{ color:var(--danger); } .a-tip .tt-d.flat{ color:var(--text-muted); }
.tt-dot{ width:9px; height:9px; border-radius:50%; background:var(--c-cur); flex-shrink:0; }
.tt-dot.prev{ background:var(--c-prev); } .tt-dot.mute{ background:var(--border-strong); }
.chart-tooltip{
  position:fixed; background:var(--surface-3); border:none; border-radius:var(--r-sm);
  padding:6px 10px; font-size:0.76rem; line-height:1.35; pointer-events:none; z-index:300;
  opacity:0; transform:translate(-50%, -100%); transition:opacity 0.1s ease; white-space:nowrap;
}
.chart-tooltip.show{ opacity:1; }
.chart-tooltip .tt-label{ color:var(--text-soft); font-weight:600; }
.chart-tooltip .tt-value{ color:var(--text); font-weight:700; margin-left:6px; }

/* Pro tab */
.pro-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:6px 0 26px; }
.pro-hero h1, .pro-hero h2{ font-size:clamp(1.5rem, 3vw, 2.1rem); font-weight:800; letter-spacing:0; }
.pro-hero p{ color:var(--text-muted); max-width:480px; font-size:0.94rem; margin:0; }
.pro-proof{
  display:flex; align-items:center; gap:6px; font-size:0.8rem; font-weight:600; color:var(--accent-text);
  background:var(--accent-soft); padding:6px 14px; border-radius:999px; margin-top:4px;
}
.pro-proof svg{ width:13px; height:13px; }
.billing-toggle{ width:fit-content; margin:0 auto 26px; }
.billing-btn{
  padding:8px 16px; font-size:0.84rem; font-weight:600; color:var(--text-muted);
  border-radius:var(--r-pill); transition:all 0.15s ease; display:flex; align-items:center; gap:6px;
}
.billing-btn.active{ background:var(--surface); color:var(--accent-hover); }
.billing-btn .save-tag{ background:var(--success-soft); color:var(--success); font-size:0.66rem; font-weight:700; padding:1px 6px; border-radius:999px; }

.pro-server-picker{ position:relative; max-width:360px; margin:0 auto 22px; text-align:left; }
.pro-server-picker-label{ font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-soft); margin-bottom:6px; }
.pro-server-select{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--r-md);
  background:var(--surface); transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.pro-server-select:hover{ border-color:var(--accent); }
.pro-server-select[aria-expanded="true"]{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.pro-server-select img{ width:28px; height:28px; border-radius:7px; flex-shrink:0; }
.pro-server-select-name{ font-size:0.94rem; font-weight:700; flex:1; text-align:left; }
.pro-server-select .select-chevron{ width:16px; height:16px; color:var(--text-muted); transition:transform 0.15s ease; }
.pro-server-select[aria-expanded="true"] .select-chevron{ transform:rotate(180deg); }
.pro-server-dropdown{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:6px; z-index:20; display:none;
}
.pro-server-dropdown.open{ display:block; }
.pro-server-option{
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:var(--r-sm);
  font-size:0.88rem; font-weight:600; color:var(--text); transition:background 0.12s ease;
}
.pro-server-option img{ width:26px; height:26px; border-radius:7px; flex-shrink:0; }
.pro-server-option:hover:not(:disabled){ background:var(--surface-2); }
.pro-server-option:disabled{ color:var(--text-soft); cursor:default; }
.pro-server-option .pill{ margin-left:auto; }

.pro-card{ max-width:440px; margin:0 auto; padding:30px 32px; text-align:center; }
.pro-price-row{ display:flex; align-items:baseline; justify-content:center; gap:6px; margin-bottom:2px; }
.pro-price{ font-size:2.6rem; font-weight:800; letter-spacing:-0.02em; }
.pro-price-period{ font-size:0.92rem; color:var(--text-muted); font-weight:600; }
.pro-price-strike{ font-size:0.9rem; color:var(--text-soft); text-decoration:line-through; }
.pro-price-note{ font-size:0.8rem; color:var(--success); font-weight:600; margin-bottom:22px; min-height:1.2em; }
.pro-feature-list{ display:flex; flex-direction:column; gap:18px; text-align:left; margin-bottom:26px; }
.pro-feature{ display:flex; align-items:center; gap:14px; font-size:0.88rem; line-height:1.45; }
.pro-feature .fi{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--accent-soft); color:var(--accent-text);
  display:inline-flex; align-items:center; justify-content:center;
}
.pro-feature .fi svg{ width:16px; height:16px; }
.pro-feature strong{ font-weight:700; }
.pro-card .btn{ width:100%; }
.pro-fine-print{ font-size:0.76rem; color:var(--text-soft); margin:12px 0 0; }

/* Account: the two settings cards are connected into one group */
.settings-group.card-group{ display:flex; flex-direction:column; max-width:520px; margin-bottom:16px; }
.settings-card{ padding:24px 26px; }
.settings-card + .settings-card{ background:var(--surface-2); }
.settings-card h3{ font-size:1.05rem; font-weight:700; margin-bottom:16px; }

/* Slim footer variant */
.footer-slim{ background:transparent; padding:20px 0; margin-top:auto; }
.footer-slim .footer-bottom{ border-top:none; padding-top:0; }

/* =============================================================
   FEATURED.HTML — page-specific styles
   ============================================================= */
.auction h2, .auction p{ margin:0; }
.auction .section-head{ margin-bottom:20px; }
.auction .section-head h2{ font-size:1.5rem; }
.auction .section-head p{ color:var(--text-muted); margin-top:4px; }

/* Slots: four cards connected into one group — one outer border,
   dividers only on the seams, square corners, no shadow. */
.slots{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  background:transparent;
  border:none;
  border-radius:var(--r-card);
  overflow:hidden;
}
.slot{
  position:relative; display:flex; flex-direction:column;
  padding:32px 28px 28px; min-height:400px;
  background:var(--surface);
}
.slot::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--tone); }
.slot.open{ --tone:var(--accent); }
.slot.bidding{ --tone:var(--warn); }
.slot.closed{ --tone:var(--danger); }
.slot-name{ font-size:0.85rem; font-weight:600; color:var(--text-muted); }
.slot-num{ font-family:var(--font-mc); font-size:4.5rem; line-height:1; margin:6px 0 22px; color:var(--text); }
.slot-status{ font-size:0.92rem; font-weight:700; color:var(--tone); }
.slot-price{ font-size:2.25rem; font-weight:800; letter-spacing:-0.02em; line-height:1.1; margin-top:4px; font-variant-numeric:tabular-nums; }
.slot-price small{ font-size:0.92rem; font-weight:400; color:var(--text-muted); letter-spacing:0; margin-left:6px; }
.slot-note{ color:var(--text-muted); margin-top:8px; }
.slot-date{ font-weight:600; margin-top:4px; }
.slot-cta{ margin-top:auto; padding-top:24px; }
.slot-dim .slot-price{ color:var(--text-soft); }
@media (max-width:1040px){
  .slots{ grid-template-columns:1fr 1fr; }
  .slot{ min-height:0; }
}
@media (max-width:620px){
  .slots{ grid-template-columns:1fr; }
  .slot-num{ font-size:3.5rem; margin-bottom:16px; }
}

.bid-form{ display:flex; gap:8px; margin-top:auto; padding-top:20px; }
.bid-form .field{ position:relative; flex:1; min-width:0; width:auto; padding:0; border:0; border-radius:0; background:none; }
.bid-form .field span{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-soft); font-weight:600; }
.bid-form input[type="number"]{ height:40px; padding:10px 12px 10px 26px; font-variant-numeric:tabular-nums; }
.bid-form .btn-sm{ height:40px; }
.rules{ margin:14px 0 0; color:var(--text-muted); font-size:0.85rem; max-width:720px; }

/* =============================================================
   FORGOT.HTML — page-specific styles
   ============================================================= */
.btn-block{ width:100%; }
.btn-primary[disabled]:hover{ background:var(--accent); }

/* Auth card: single standalone card, square, no border, no shadow */
.auth-card{
  max-width:440px; margin:0 auto;
  background:var(--surface);
  border:none; border-radius:var(--r-card); box-shadow:none;
  padding:24px 26px;
}
.auth-head{ margin-bottom:22px; }
.auth-head p{ margin:0; color:var(--text-muted); line-height:1.6; }
.auth-card .form-group p, .auth-card .auth-switch, .sent-state p{ margin:0; }

input.invalid, input.invalid:focus{ border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft); }
.input-wrap{ position:relative; }
.input-wrap input{ padding-right:48px; }
.input-icon-btn{
  position:absolute; top:0; right:0; width:44px; height:100%; min-height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--text-muted);
  transition:color 0.15s ease;
}
.input-icon-btn:hover{ color:var(--text); }
.input-icon-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.input-icon-btn svg{ width:18px; height:18px; }
.input-icon-btn .icon-eye-off{ display:none; }
.input-icon-btn[aria-pressed="true"] .icon-eye{ display:none; }
.input-icon-btn[aria-pressed="true"] .icon-eye-off{ display:block; }
.req{ color:var(--danger); margin-left:2px; }
.field-error{ font-size:0.78rem; font-weight:600; color:var(--danger); margin-top:4px; }

.text-link{ font-weight:600; color:var(--accent-hover); font-size:0.88rem; transition:color 0.15s ease; }
.text-link:hover{ text-decoration:underline; }
.text-link:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--accent-soft); border-radius:2px; }

/* Danger callout: colored fill only, never a border */
.auth-card .alert{
  margin-bottom:18px; background:var(--danger-soft); color:var(--danger);
  font-weight:600; align-items:flex-start;
}
.auth-card .alert svg{ width:16px; height:16px; flex-shrink:0; margin-top:3px; color:inherit; }

.auth-switch{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--border);
  text-align:center; color:var(--text-muted); font-size:0.88rem;
}
.sent-state{ text-align:center; padding:8px 0 4px; }
.sent-icon{
  width:48px; height:48px; border-radius:50%;
  background:var(--success-soft); color:var(--success);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.sent-icon svg{ width:22px; height:22px; }
.sent-state h2{ margin:0; font-size:1.5rem; line-height:1.25; }
.sent-state h2:focus{ outline:none; }
.sent-state p{ margin-top:8px; color:var(--text-muted); line-height:1.6; }
.sent-state .hint{ margin-top:14px; }
@media (max-width:480px){
  body:has(.auth-card) .theme-toggle{ bottom:16px; right:16px; }
}

/* =============================================================
   INDEX.HTML — page-specific styles
   ============================================================= */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.search-wrap{ position:relative; flex:1 1 260px; min-width:200px; }
.search-wrap svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-soft); pointer-events:none; }
.search-wrap input{ width:100%; padding-left:36px; }
.toolbar input[type="search"], .toolbar select{ height:42px; }
.select-wrap{ position:relative; flex:0 0 auto; min-width:190px; }
.select-wrap select{ width:100%; cursor:pointer; -webkit-appearance:none; appearance:none; padding-right:38px; }
.select-wrap select:hover{ border-color:var(--accent); }
.select-chevron{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; pointer-events:none;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  color:var(--text-muted);
}
.filters-toggle{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; font-size:0.88rem; background:var(--surface); }
.filters-toggle svg{ width:16px; height:16px; }
.filters-toggle[aria-expanded="true"]{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-text); }
.filters-toggle .count-badge{
  background:var(--accent); color:#fff; font-size:0.66rem; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums;
}
@media (max-width:560px){
  .search-wrap{ flex-basis:100%; }
  .select-wrap{ flex:1; min-width:0; }
  .filters-toggle{ flex:1; justify-content:center; }
}

/* Filters panel: a standalone surface, square, no border, no shadow */
.filters-panel{ display:none; background:var(--surface); border-radius:var(--r-card); padding:20px; margin-bottom:14px; }
.filters-panel.open{ display:block; }
.filters-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-bottom:20px; }
@media (max-width:900px){ .filters-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .filters-grid{ grid-template-columns:1fr; } }
.filters-panel > .filter-block{ margin-bottom:20px; }
.filter-block .uppercase-label{ display:block; margin-bottom:8px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.chip-hint{ font-size:0.78rem; color:var(--text-soft); margin-top:8px; font-variant-numeric:tabular-nums; }
.toggle-line{ display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:0 0 0 10px; margin:0; cursor:pointer; }
.toggle-line .t-label{ font-size:0.86rem; font-weight:600; color:var(--text); min-width:104px; }
.filters-footer{ display:flex; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px solid var(--border); }
.results-count{ font-size:0.85rem; color:var(--text-muted); margin:0 0 14px; font-variant-numeric:tabular-nums; }
.text-btn{ min-height:36px; padding:0 4px; font-size:0.85rem; font-weight:600; color:var(--text-muted); border-radius:var(--r-sm); transition:color 0.15s ease; }
.text-btn:hover{ color:var(--accent-hover); }

/* Server list: cards stay standalone here (not connected), with
   normal spacing between them — per instruction, this is the one
   page where cards are not grouped. Still square, no border, no
   shadow; separation from the page comes from the surface fill. */
.server-list{ display:flex; flex-direction:column; gap:14px; }
.empty-state{ text-align:center; padding:60px 20px; color:var(--text-muted); background:var(--surface); border-radius:var(--r-card); }
.server-card{
  position:relative; display:flex;
  background:var(--surface);
  border:none; border-radius:var(--r-card); box-shadow:none;
  padding:16px; align-items:center; gap:20px;
  transition:background 0.18s ease, transform 0.18s ease;
}
.server-card:hover{ background:var(--surface-2); transform:scale(1.01); }
.server-card:has(.name a:focus-visible){ box-shadow:0 0 0 3px var(--accent-soft); }

.col-rank{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:48px; }
.rank{ font-size:1.5rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:4px; color:var(--text); font-variant-numeric:tabular-nums; }
.flag{ font-size:1.25rem; line-height:1.2; }

.col-banner-tags{ display:flex; flex-direction:column; width:468px; flex-shrink:0; gap:6px; }
.banner{ width:468px; height:60px; max-width:100%; background:var(--surface-3); border:1px solid var(--border); object-fit:cover; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; }

.col-info{ flex-grow:1; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.title-row{ display:flex; align-items:center; gap:10px; margin-bottom:6px; min-width:0; }
.icon{ width:36px; height:36px; flex-shrink:0; object-fit:cover; }
.name{ font-size:1.25rem; font-weight:700; margin:0; letter-spacing:-0.01em; line-height:1.3; color:var(--text); min-width:0; font-family:var(--font); }
.name a{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.name a:focus-visible{ outline:none; }
.name a::after{ content:''; position:absolute; inset:0; }
.meta-row{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:6px; }

.players{ font-size:0.85rem; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
.players svg{ width:16px; height:16px; flex-shrink:0; color:var(--text-muted); }
.players .players-bars{ width:19px; height:14px; }
.players-bars rect{ fill:var(--border-strong); }
.players-bars rect.on{ fill:var(--accent); }
.players-max{ color:var(--text-muted); font-weight:500; }
.players.is-offline{ color:var(--danger); letter-spacing:0.4px; }
.players.is-offline svg{ color:var(--danger); }

.col-action{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:stretch; justify-content:center; width:240px; flex-shrink:0; gap:8px; }

/* IP box + tooltip (matches Server.html) */
.tooltip-wrap{ position:relative; display:inline-flex; }
.tooltip-bubble{
  position:absolute; bottom:calc(100% + 9px); left:0; transform:translateY(4px);
  background:var(--text); color:var(--bg);
  font-size:0.72rem; font-weight:600; padding:6px 10px; border-radius:var(--r-sm);
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity 0.15s ease, transform 0.15s ease; z-index:30;
}
.tooltip-bubble::after{ content:""; position:absolute; top:100%; left:16px; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--text); }
.tooltip-wrap:hover .tooltip-bubble{ opacity:1; transform:translateY(0); }

.ip-stack{ display:flex; flex-direction:column; gap:8px; text-align:left; }
.ip-line{ display:flex; gap:8px; }
.ip-box{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:8px 10px; }
.ip-box-bedrock{ flex:1; min-width:0; }
.ip-box-port{ flex:0 0 96px; }
.ip-box-inner{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ip-value-wrap{ min-width:0; display:block; }
.ip-value{
  display:block; font-family:var(--font-mc); font-size:0.85rem; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; user-select:all;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ip-copy-btn{
  flex-shrink:0; width:26px; height:26px; border-radius:var(--r-sm); border:none;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.15s ease, transform 0.1s ease;
}
.ip-copy-btn{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -2px 0 rgba(0,0,0,0.28); }
.ip-copy-btn:hover{ filter:brightness(1.08); }
.ip-copy-btn:active{ transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(0,0,0,0.22); }
.ip-copy-btn.copied{ background:var(--success); }
.ip-copy-btn svg{ width:13px; height:13px; }

@media (max-width:980px){
  .server-card{ flex-direction:column; align-items:stretch; }
  .col-rank{ flex-direction:row; justify-content:space-between; }
  .col-banner-tags, .banner{ width:100%; }
  .col-action{ width:100%; }
}
@media (max-width:480px){
  .rank{ font-size:1.25rem; }
  .icon{ width:32px; height:32px; }
}

/* Join modal: a popup, so no border under any circumstance;
   square corners, no shadow, contrast from the backdrop overlay. */
.modal-backdrop{ position:fixed; inset:0; background:var(--overlay); display:none; align-items:center; justify-content:center; padding:20px; z-index:300; }
.modal-backdrop.open{ display:flex; }
.modal{ background:var(--surface); border:none; border-radius:var(--r-card); box-shadow:none; width:100%; max-width:420px; max-height:90vh; overflow-y:auto; }
.modal-header{ display:flex; align-items:center; gap:12px; padding:20px 20px 14px; border-bottom:1px solid var(--border); }
.modal-header .icon{ width:40px; height:40px; }
.modal-header .modal-title{ flex:1; min-width:0; }
.modal-header h3{ margin:0; font-size:1.25rem; font-weight:700; letter-spacing:-0.01em; }
.modal-header .modal-rank{ font-size:0.78rem; color:var(--text-muted); }
.modal-close{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-muted); background:var(--surface-3);
  transition:all 0.15s ease;
}
.modal-close:hover{ background:var(--accent); color:#fff; }
.modal-close svg{ width:15px; height:15px; }
.modal-body{ padding:18px 20px; }
.modal-section{ margin-bottom:16px; }
.modal-section:last-child{ margin-bottom:0; }
.modal-ip-stack{ margin-top:8px; }
.modal-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); font-size:0.86rem; }
.modal-row:first-child{ padding-top:0; }
.modal-row:last-child{ border-bottom:none; padding-bottom:0; }
.modal-row .row-label{ color:var(--text-muted); font-weight:500; }
.modal-row .row-value{ font-weight:600; color:var(--text); display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.modal-desc{ font-size:0.92rem; color:var(--text-muted); line-height:1.7; margin:8px 0 0; }
.modal-footer{ padding:14px 20px 20px; display:flex; flex-direction:column; gap:6px; }
.modal-link{
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:36px; border-radius:var(--r-sm);
  font-size:0.85rem; font-weight:600; color:var(--text-muted);
  transition:color 0.15s ease;
}
.modal-link:hover{ color:var(--accent-hover); }
.modal-link:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--accent-soft); }

/* =============================================================
   LOGIN.HTML — page-specific styles
   ============================================================= */
.check{
  display:flex; align-items:flex-start; gap:10px;
  min-height:36px; margin:0;
  font-size:0.88rem; font-weight:400; color:var(--text-muted);
  line-height:1.5; cursor:pointer; padding-top:6px;
  transition:color 0.15s ease;
}
.check:hover{ color:var(--text); }
.check input{ width:18px; height:18px; margin:1px 0 0; accent-color:var(--accent); flex-shrink:0; cursor:pointer; }
.check input:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.check .text-link{ font-size:inherit; }
.form-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin-bottom:18px; }
.form-meta .check{ padding-top:0; align-items:center; }

/* =============================================================
   SERVER.HTML — page-specific styles
   ============================================================= */
.btn-copy{
  background:var(--accent); color:#fff;
  width:32px; height:32px; border-radius:var(--r-sm);
  padding:0; flex-shrink:0;
}
.btn-copy{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -2px 0 rgba(0,0,0,0.28); }
.btn-copy:hover{ filter:brightness(1.08); }
.btn-copy:active{ transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(0,0,0,0.22); }
.btn-copy.copied{ background:var(--success); }
.ip-box .btn-copy{ width:26px; height:26px; flex-shrink:0; }
.ip-box .btn-copy svg{ width:13px; height:13px; }
.ip-box .ip-label{
  font-size:0.62rem; text-transform:uppercase; letter-spacing:0.07em;
  font-weight:700; color:var(--text-soft);
}
/* Trigger the tooltip on keyboard focus too, everywhere it's used */
.tooltip-wrap:focus-visible .tooltip-bubble{ opacity:1; transform:translateY(0); }

.main{ padding:28px 0 64px; }
.detail-layout{ display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start; }
@media (max-width:980px){ .detail-layout{ grid-template-columns:1fr; } }

/* Sidebar: identity + details are one continuous surface — square,
   single outer border, internal dividers only, no shadow. */
.sidebar{ position:sticky; top:20px; }
@media (max-width:980px){ .sidebar{ position:static; } }
.combined-panel{ background:var(--surface); border:none; border-radius:var(--r-card); }
.panel-divider{ height:1px; background:var(--border); margin:0; }

.identity-section{ padding:24px 22px 20px; text-align:center; }
.server-icon{
  width:64px; height:64px; border-radius:var(--r-md);
  margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.6rem; color:var(--text-soft);
  overflow:hidden;
}
.server-name{ display:inline-flex; align-items:center; gap:6px; font-size:1.4rem; margin:0 0 4px; }
.server-subtitle{ font-size:0.82rem; color:var(--text-muted); margin:0 0 18px; }
.identity-section .server-name{ overflow:visible; max-width:100%; font-family:var(--font); }
.server-name-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
/* This sidebar's tooltip is centered above its trigger, unlike the
   left-anchored default used on server-list cards elsewhere. */
.sidebar .tooltip-bubble{ left:50%; transform:translateX(-50%) translateY(4px); }
.sidebar .tooltip-bubble::after{ left:50%; transform:translateX(-50%); }
.sidebar .tooltip-wrap:hover .tooltip-bubble,
.sidebar .tooltip-wrap:focus-visible .tooltip-bubble{ transform:translateX(-50%) translateY(0); }
.sidebar .ip-box .ip-value-wrap .tooltip-bubble{ left:0; transform:translateX(0) translateY(4px); }
.sidebar .ip-box .ip-value-wrap .tooltip-bubble::after{ left:16px; transform:translateX(-50%); }
.sidebar .ip-box .ip-value-wrap:hover .tooltip-bubble{ transform:translateX(0) translateY(0); }
.verified-badge{ color:var(--accent); flex-shrink:0; cursor:default; }
.verified-badge svg{ width:18px; height:18px; display:block; }

.action-stack{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }

.rank-row{ display:flex; justify-content:center; margin-top:16px; }
.rank-highlight{ display:flex; align-items:center; gap:12px; background:var(--accent-soft); border-radius:var(--r-md); padding:12px 20px; }
.rank-highlight .rank-value{ font-size:2.1rem; font-weight:800; line-height:1; color:var(--accent-text); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.rank-highlight .rank-caption{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.rank-highlight .rank-label{ font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; color:var(--accent-text); }
.rank-highlight .rank-sub{ font-size:0.78rem; color:var(--text-muted); }

.share-row{ display:flex; gap:8px; margin-top:16px; }
.share-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center;
  height:36px; border-radius:var(--r-sm);
  background:var(--surface-3); border:1px solid var(--border-strong); color:var(--text-muted);
  transition:background 0.15s ease, color 0.15s ease;
}
.share-btn:hover{ background:var(--accent-soft); color:var(--accent-text); border-color:var(--accent); }

.details-header{ display:flex; align-items:center; padding:16px 18px 10px; }
.details-table{ width:100%; border-collapse:collapse; }
.details-table tr{ border-bottom:1px solid var(--border); }
.details-table tr:last-child{ border-bottom:none; }
.details-table td{ padding:11px 18px; font-size:0.86rem; }
.details-table td.label{ color:var(--text-muted); font-weight:500; white-space:nowrap; padding-right:8px; }
.details-table td.value{ color:var(--text); font-weight:600; text-align:right; white-space:nowrap; }
.value-wrap{ display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; }

.tag-section{ padding:16px 18px; border-top:1px solid var(--border); }
.tag-section .uppercase-label{ display:block; margin-bottom:10px; }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:6px; }
.tag-cloud .pill{ cursor:pointer; transition:background 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.tag-cloud .pill:hover{ background:var(--accent-soft); color:var(--accent-text); transform:scale(1.08); }
.pill-hover-scale{ transition:transform 0.15s ease, background 0.15s ease; cursor:pointer; }
.pill-hover-scale:hover{ transform:scale(1.08); background:var(--surface-3); }

.report-row{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:14px 18px; border-top:1px solid var(--border);
  color:var(--danger); font-size:0.85rem; font-weight:600; cursor:pointer;
  transition:background 0.15s ease;
}
.report-row:hover{ background:var(--danger-soft); }
.report-row svg{ width:15px; height:15px; }

/* Main content: tabs are structurally attached to the top edge of
   the card block they control — tabs, active panel and card group
   share one outer border; the active tab matches the card surface
   so there is no seam between it and the content below. */
.main-content{ min-width:0; border:none; border-radius:var(--r-card); overflow:hidden; }
.tab-bar{ display:flex; background:var(--surface-2); }
.tab-btn{
  padding:14px 22px; font-size:0.92rem; font-weight:600;
  color:var(--text-muted); background:transparent; border:none; border-radius:0;
  white-space:nowrap; transition:background 0.15s ease, color 0.15s ease;
}
.tab-btn:hover{ background:var(--surface-3); color:var(--text); }
.tab-btn[aria-selected="true"]{ background:var(--surface); color:var(--accent-hover); }

.tab-panel{ display:none; background:var(--surface); }
.tab-panel.active{ display:block; }

.about-section, .how-to-join, .faq-section, .stats-section, .vote-section{
  background:var(--surface); padding:24px 26px;
}
.about-section + .how-to-join, .how-to-join + .faq-section{ border-top:1px solid var(--border); }

.main-content h2{ font-size:1.5rem; font-weight:700; margin:0 0 12px; letter-spacing:0; }
.main-content h3{ font-size:1.25rem; font-weight:700; margin:0 0 10px; }
.main-content p{ margin:0 0 12px; color:var(--text-muted); line-height:1.7; }
.main-content p:last-child{ margin-bottom:0; }

.server-banner{
  width:468px; height:60px; max-width:100%;
  border-radius:var(--r-sm); background:var(--surface-3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-soft); font-weight:700; font-size:0.78rem;
  margin:0 auto 20px; overflow:hidden;
}
.motd{ background:transparent; border-radius:var(--r-sm); padding:14px 16px; font-family:var(--font-mc); font-size:0.85rem; line-height:1.7; margin-bottom:20px; overflow-x:auto; text-align:center; }
.motd .mc-white{ color:#ffffff; } .motd .mc-gray{ color:#aaaaaa; } .motd .mc-green{ color:#55ff55; } .motd .mc-gold{ color:#ffaa00; } .motd .mc-aqua{ color:#55ffff; }

/* Nested tab set for the join instructions — same fused, squared
   treatment as the main tabs, one level down. */
.join-shell{ border:none; border-radius:var(--r-card); overflow:hidden; margin-top:2px; }
.join-tabs{ display:flex; background:var(--surface-2); }
.join-tab{
  padding:10px 16px; font-size:0.88rem; font-weight:600; color:var(--text-muted);
  background:transparent; border:none; border-radius:0;
  transition:background 0.15s ease, color 0.15s ease;
}
.join-tab:hover{ background:var(--surface-3); color:var(--text); }
.join-tab[aria-selected="true"]{ background:var(--surface); color:var(--accent-hover); }
.join-panel{ display:none; padding:16px 18px; background:var(--surface); }
.join-panel.active{ display:block; }

.steps{ display:flex; flex-direction:column; gap:10px; }
.step{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; }
.step-num{
  width:26px; height:26px; border-radius:50%; background:var(--accent-soft); color:var(--accent-text);
  font-weight:700; font-size:0.82rem; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.step-text{ font-size:0.9rem; line-height:1.55; color:var(--text); padding-top:2px; }
.step-text code{ background:var(--surface-3); border:1px solid var(--border); padding:1px 6px; border-radius:4px; font-weight:600; font-family:var(--font-mc); }

/* FAQ accordion inside the fused card block: already connected
   (dividers between items only) — no outer border needed here
   since the shell around .main-content already provides one. */
.faq-item{ border-bottom:1px solid var(--border); }
.faq-item:last-child{ border-bottom:none; }
.faq-question{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:16px 0; font-weight:700; font-size:0.95rem; text-align:left; }
.faq-question .chevron{ transition:transform 0.2s ease; color:var(--text-soft); flex-shrink:0; margin-left:12px; }
.faq-question.open .chevron{ transform:rotate(180deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height 0.25s ease; }
.faq-answer.open{ max-height:400px; }
.faq-answer p{ padding-bottom:16px; }

.graph-wrap{ border-radius:var(--r-md); padding:18px 18px 14px; background:var(--surface-2); }
.graph-wrap svg{ width:100%; height:auto; display:block; }
.graph-title-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.graph-title-row h3{ margin:0; font-size:0.95rem; }
.graph-title-row span{ font-size:0.78rem; color:var(--text-soft); }
.graph-inline-stats{ display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--text-muted); margin-bottom:14px; }
.graph-inline-stats strong{ color:var(--text); font-weight:800; }
.graph-inline-stats .stat-sep{ color:var(--text-soft); }
.graph-grid-line{ stroke:var(--border); stroke-width:1; }
.graph-axis-label{ fill:var(--text-soft); font-size:10px; font-family:var(--font); }
.graph-avg-line{ stroke:var(--text-soft); stroke-width:1.5; stroke-dasharray:4 4; }
.graph-area{ fill:var(--accent); opacity:0.12; }
.graph-line{ stroke:var(--accent); stroke-width:2.5; fill:none; }
.graph-dot{ fill:var(--accent); }
.graph-dot-peak{ fill:var(--surface); stroke:var(--accent); stroke-width:2.5; }
.graph-peak-label{ fill:var(--text); font-size:11px; font-weight:700; font-family:var(--font); }
.graph-legend{ display:flex; gap:18px; flex-wrap:wrap; font-size:0.78rem; color:var(--text-muted); margin-top:10px; }
.graph-legend .legend-item{ display:flex; align-items:center; gap:6px; }
.graph-legend .swatch{ width:14px; height:3px; border-radius:2px; flex-shrink:0; }
.graph-legend .swatch.dashed{ background:none; border-top:2px dashed var(--text-soft); height:0; }
.graph-legend .swatch.solid{ background:var(--accent); }


/* =============================================================
   CHANGE.PY ADDITIONS (search bar, search modal, pagination, FAQ,
   index-seo page, Server "How to join" fix). Safe to delete as one block.
   ============================================================= */

/* ---- Search bar element (Index, index-seo, Claim) ---- */
.mt-search{
  position:relative; display:flex; align-items:center; flex:1 1 340px; min-width:0; height:52px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm);
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.mt-search:hover{ border-color:var(--accent); }
.mt-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.mt-search-icon{
  display:flex; align-items:center; justify-content:center; flex:0 0 50px; align-self:stretch;
  color:var(--text-soft); transition:color 0.15s ease;
}
.mt-search-icon svg{ width:18px; height:18px; }
.mt-search:focus-within .mt-search-icon{ color:var(--accent); }
.mt-search input[type="search"], .mt-search input[type="text"]{
  flex:1 1 auto; min-width:0; width:auto; height:100%; padding:0 8px 0 0;
  border:0; border-radius:0; background:transparent; box-shadow:none;
  font-size:0.97rem; color:var(--text);
}
.mt-search input[type="search"]:focus, .mt-search input[type="text"]:focus{ border:0; box-shadow:none; outline:none; }
.mt-search input[type="search"]::-webkit-search-cancel-button,
.mt-search input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none; }
.mt-search-clear{
  flex:0 0 auto; width:32px; height:32px; margin-right:6px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); color:var(--text-soft); transition:background 0.15s ease, color 0.15s ease;
}
.mt-search-clear:hover{ background:var(--surface-3); color:var(--text); }
.mt-search-clear:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.mt-search input:placeholder-shown ~ .mt-search-clear{ display:none; }
.mt-search-btn{ flex:0 0 auto; height:38px; margin-right:7px; padding:0 20px; }
.combobox-input-wrap.mt-search{ flex:none; width:100%; }
.combobox-input-wrap.mt-search .combobox-input{ padding:0 8px 0 0; }

/* Launcher version of the bar: looks like a search field, opens the search modal */
button.mt-search-launch{ width:auto; padding:0 7px 0 0; text-align:left; cursor:pointer; font-size:0.97rem; color:var(--text-soft); }
.mt-search-text{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-search-launch:hover .mt-search-text{ color:var(--text-muted); }
.mt-search-launch .mt-search-btn{ pointer-events:none; margin-right:0; }
.toolbar .mt-search ~ .select-wrap select, .toolbar .mt-search ~ .filters-toggle{ height:52px; }
.toolbar .mt-search{ margin:0; }
@media (max-width:640px){ .mt-search{ flex-basis:100%; } }
@media (max-width:480px){ .mt-search-launch .mt-search-btn{ padding:0 12px; } }

/* ---- Pagination ---- */
.pagination{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; margin:24px 0 4px; }
.pagination[hidden]{ display:none; }
.pg{
  min-width:42px; height:42px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--surface); color:var(--text); font-weight:700; font-size:0.88rem; border-radius:var(--r-sm);
  font-variant-numeric:tabular-nums; box-shadow:inset 0 -3px 0 var(--border-strong);
  transition:background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}
a.pg:hover{ background:var(--accent-soft); color:var(--accent-text); box-shadow:inset 0 -3px 0 var(--accent); }
a.pg:active{ transform:translateY(2px); }
a.pg:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pg[aria-current="page"]{ background:var(--accent); color:#fff; box-shadow:inset 0 2px 0 rgba(255,255,255,0.30), inset 0 -3px 0 rgba(0,0,0,0.28); }
html[data-theme="dark"] .pg[aria-current="page"]{ color:#0f1a02; }
.pg.is-disabled{ opacity:0.4; cursor:not-allowed; }
.pg-gap{ min-width:24px; padding:0; background:none; box-shadow:none; color:var(--text-soft); }
.pg svg{ width:14px; height:14px; }
@media (max-width:480px){ .pg{ min-width:38px; height:38px; padding:0 10px; } .pg-label{ display:none; } }

/* ---- Index FAQ ---- */
.mt-faq{ margin-top:36px; background:var(--surface); padding:26px; }
.mt-faq h2{ margin:0 0 4px; font-size:1.5rem; font-weight:700; letter-spacing:0; }
.mt-faq-intro{ margin:0 0 12px; color:var(--text-muted); }
.mt-faq-item{ border-bottom:1px solid var(--border); }
.mt-faq-item:last-child{ border-bottom:0; }
.mt-faq-item summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:16px 0; font-weight:700; font-size:0.95rem; color:var(--text);
}
.mt-faq-item summary::-webkit-details-marker{ display:none; }
.mt-faq-item summary::after{
  content:""; flex:0 0 auto; width:8px; height:8px; margin:-4px 4px 0 0;
  border-right:2px solid var(--text-soft); border-bottom:2px solid var(--text-soft);
  transform:rotate(45deg); transition:transform 0.2s ease;
}
.mt-faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:4px; }
.mt-faq-item summary:hover{ color:var(--accent-hover); }
.mt-faq-item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.mt-faq-a{ padding:0 0 6px; color:var(--text-muted); line-height:1.7; }
.mt-faq-a p{ margin:0 0 10px; }

/* ---- Server page: "How to join" tab bar ---- */
.join-shell{ border:1px solid var(--border-strong); }
.join-tabs{ border-bottom:1px solid var(--border-strong); }
.join-tab{ flex:1 1 0; min-width:0; text-align:center; }
.join-tab + .join-tab{ border-left:1px solid var(--border); }

/* ---- Chips (modal, active filters, explore lists): no borders ---- */
.sm-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sm-chip{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:0; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--text); cursor:pointer;
  font-size:0.88rem; font-weight:600; line-height:1.2;
  transition:background 0.15s ease, color 0.15s ease;
}
.sm-chip:hover{ background:var(--accent-soft); color:var(--accent-text); }
.sm-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sm-chip .flag{ font-size:1rem; line-height:1; }
.sm-chip .chip-icon, .sm-pick .chip-icon, .sm-row-ico .chip-icon{ width:16px; height:16px; flex:0 0 auto; object-fit:contain; }
.sm-chip[aria-pressed="true"]{ background:var(--accent); color:#fff; }
html[data-theme="dark"] .sm-chip[aria-pressed="true"]{ color:#0f1a02; }
.sm-chip[aria-pressed="true"]:hover{ background:var(--accent-hover); color:#fff; }
html[data-theme="dark"] .sm-chip[aria-pressed="true"]:hover{ color:#0f1a02; }

/* ---- Search modal (built by search-modal.js) ---- */
.sm-backdrop{
  position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  padding:16px; background:var(--overlay);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:smFade 0.16s ease-out;
}
.sm-backdrop[hidden]{ display:none; }
.sm{
  width:100%; max-width:680px; display:flex; flex-direction:column; overflow:hidden;
  max-height:calc(100vh - 32px);
  background:var(--surface); border:none; border-radius:var(--r-card); box-shadow:none;
  animation:smRise 0.22s cubic-bezier(.2,.8,.2,1);
}
.sm-head{ display:flex; align-items:center; gap:10px; padding:16px 16px 12px; margin:0; }
.sm-bar{
  flex:1; min-width:0; height:54px; display:flex; align-items:center; gap:12px; padding:0 8px 0 16px;
  background:var(--surface-2); border:0; border-radius:var(--r-sm);
  transition:box-shadow 0.15s ease;
}
.sm-bar:focus-within{ box-shadow:0 0 0 3px var(--accent-soft); }
.sm-bar > svg{ width:20px; height:20px; flex:0 0 auto; color:var(--text-soft); }
.sm-bar:focus-within > svg{ color:var(--accent); }
.sm-bar input[type="search"]{
  flex:1; min-width:0; width:auto; height:100%; padding:0; border:0; border-radius:0; background:transparent;
  box-shadow:none; font-size:1.02rem; color:var(--text); outline:none;
}
.sm-bar input[type="search"]:focus{ border:0; box-shadow:none; }
.sm-bar input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; display:none; }
.sm-clear{ flex:0 0 auto; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-sm); color:var(--text-soft); }
.sm-clear:hover{ background:var(--surface-3); color:var(--text); }
.sm-bar input:placeholder-shown ~ .sm-clear{ display:none; }
.sm-close{
  flex:0 0 auto; width:54px; height:54px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); color:var(--text-muted); background:var(--surface-2); transition:background 0.15s ease, color 0.15s ease;
}
.sm-close:hover{ background:var(--accent-soft); color:var(--accent-text); }
.sm-close:focus-visible, .sm-clear:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* platform row: always visible, above the tabs */
.sm-plat{ display:flex; align-items:center; gap:14px; padding:2px 16px 12px; }
.sm-plat .sm-label{ margin:0; flex:0 0 auto; }
.sm-plat[hidden]{ display:none; }

.sm-tabs{ display:flex; gap:2px; padding:0 16px; }
.sm-tabs[hidden]{ display:none; }
.sm-tab{ position:relative; padding:12px 14px; font-size:0.88rem; font-weight:700; color:var(--text-muted); transition:color 0.15s ease; }
.sm-tab:hover{ color:var(--text); }
.sm-tab[aria-selected="true"]{ color:var(--accent-text); }
.sm-tab[aria-selected="true"]::after{ content:""; position:absolute; left:10px; right:10px; bottom:0; height:3px; border-radius:2px; background:var(--accent); }
.sm-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.sm-n{
  display:inline-block; min-width:20px; margin-left:6px; padding:0 6px; border-radius:99px; background:var(--accent); color:#fff;
  font-size:0.72rem; line-height:20px; text-align:center;
}
html[data-theme="dark"] .sm-n{ color:#0f1a02; }
.sm-n[hidden]{ display:none; }

.sm-body{ flex:1 1 auto; height:min(300px, 38vh); overflow-y:auto; padding:16px; overscroll-behavior:contain; background:var(--surface); }
.sm-body [hidden]{ display:none !important; }
.sm-label{ display:block; margin:0 0 10px; font-size:0.74rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-soft); }
/* custom country dropdown */
.sm-combo{ margin-top:22px; }
.sm-combo-field{ display:flex; align-items:center; gap:10px; height:46px; padding:0 12px; background:var(--surface-2); border-radius:var(--r-sm); transition:box-shadow 0.15s ease; }
.sm-combo-field:focus-within{ box-shadow:0 0 0 3px var(--accent-soft); }
.sm-combo-field > svg{ width:16px; height:16px; flex:0 0 auto; color:var(--text-soft); }
.sm-combo-field:focus-within > svg:first-child{ color:var(--accent); }
.sm-combo-field input[type="text"]{ flex:1; min-width:0; width:auto; height:100%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; outline:none; font-size:0.95rem; color:var(--text); }
.sm-combo-field input[type="text"]:focus{ border:0; box-shadow:none; }
.sm-combo-field .sm-chev{ transition:transform 0.15s ease; }
.sm-combo-field input[aria-expanded="true"] ~ .sm-chev{ transform:rotate(180deg); }
.sm-clist{ margin-top:6px; max-height:210px; overflow-y:auto; padding:4px; background:var(--surface-2); border-radius:var(--r-sm); overscroll-behavior:contain; }
.sm-clist[hidden]{ display:none; }
.sm-copt{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; text-align:left; border-radius:var(--r-sm); font-size:0.92rem; color:var(--text); }
.sm-copt:hover, .sm-copt.is-hl{ background:var(--accent-soft); color:var(--accent-text); }
.sm-copt .flag{ font-size:1.05rem; line-height:1; }
.sm-copt .sm-ck{ margin-left:auto; width:15px; height:15px; color:var(--accent); visibility:hidden; }
.sm-copt[aria-selected="true"]{ font-weight:700; }
.sm-copt[aria-selected="true"] .sm-ck{ visibility:visible; }
.sm-cempty{ padding:14px; text-align:center; font-size:0.88rem; color:var(--text-muted); }
.sm-rows{ display:flex; flex-direction:column; gap:2px; }
.sm-row{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r-sm); color:var(--text); font-size:0.93rem; }
.sm-row:hover, .sm-row.is-active{ background:var(--accent-soft); color:var(--accent-text); }
.sm-row-ico{ flex:0 0 22px; display:inline-flex; justify-content:center; color:var(--text-soft); font-size:1.05rem; line-height:1; }
.sm-row-ico svg{ width:16px; height:16px; }
.sm-row:hover .sm-row-ico, .sm-row.is-active .sm-row-ico{ color:var(--accent); }
.sm-row-t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.sm-row-k{ flex:0 0 auto; font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-soft); }

/* everything picked, visible from every tab, removable */
.sm-picked{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:50px; max-height:84px; overflow-y:auto; padding:10px 16px; background:var(--surface-2); }
.sm-empty{ font-size:0.84rem; color:var(--text-soft); }
.sm-pick{
  display:inline-flex; align-items:center; gap:6px; padding:5px 8px 5px 11px; border:0; border-radius:var(--r-pill);
  background:var(--accent-soft); color:var(--accent-text); font-size:0.82rem; font-weight:700; line-height:1.2; cursor:pointer;
}
.sm-pick:hover{ background:var(--accent); color:#fff; }
html[data-theme="dark"] .sm-pick:hover{ color:#0f1a02; }
.sm-pick:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sm-pick .flag{ font-size:0.95rem; line-height:1; }

.sm-foot{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--surface-2); }
.sm-sum{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.86rem; color:var(--text-muted); }
.sm-go{ height:42px; padding:0 24px; }
.sm-go[disabled]{ opacity:0.5; cursor:not-allowed; }
@keyframes smFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes smRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .sm-backdrop, .sm{ animation:none; } }
@media (max-width:640px){
  .sm-backdrop{ padding:0; align-items:stretch; }
  .sm{ max-width:none; max-height:none; height:100%; }
  .sm-body{ height:auto; }
  .sm-close, .sm-bar{ height:50px; } .sm-close{ width:50px; }
  .sm-tab{ padding:12px 10px; }
  .sm-plat{ flex-wrap:wrap; gap:8px; }
}

/* ---- Index extras: breadcrumbs, active filters, explore, "view all" tile pages ---- */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; font-size:0.85rem; color:var(--text-muted); }
.crumbs[hidden]{ display:none; }
.crumbs a:hover{ color:var(--accent-hover); text-decoration:underline; }
.crumbs [aria-current]{ color:var(--text); font-weight:600; }
.active-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; }
.active-filters[hidden]{ display:none; }
.af-chip svg{ width:12px; height:12px; color:var(--text-soft); }
.af-chip:hover svg{ color:var(--accent-text); }
.af-clear{ font-size:0.85rem; font-weight:600; color:var(--text-muted); padding:0 6px; }
.af-clear:hover{ color:var(--accent-hover); }
.explore{ margin-top:36px; background:var(--surface); padding:26px; }
.explore h2{ margin:0 0 16px; font-size:1.5rem; font-weight:700; letter-spacing:0; }
.explore h3, .explore-head h3{ margin:0; font-size:0.74rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-soft); }
.explore > h3{ margin:22px 0 10px; }
.explore-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:22px 0 10px; }
.explore-head .btn-sm{ flex:0 0 auto; }

/* the hero sits directly under the header */
.main{ padding-top:0; }
.tile[hidden]{ display:none; }
.tile-search{ margin:0 0 16px; }
.tile-search .mt-search{ margin:0; }
.tile-status{ margin:0 0 16px; padding:20px; background:var(--surface); color:var(--text-muted); text-align:center; }
.tile-status[hidden]{ display:none; }
.adv-search-btn{ display:inline-flex; align-items:center; gap:8px; height:42px; white-space:nowrap; }
.adv-search-btn svg{ width:16px; height:16px; flex:0 0 auto; fill:none; }
.explore-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px; }
.explore-top h2{ margin:0; }
.modal-rank .chip-icon{ margin:0 4px 0 2px; vertical-align:-3px; }
.tiles{ display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin:0 0 20px; }
.tile{
  aspect-ratio:1 / 1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:12px; min-width:0;
  background:var(--surface); color:var(--text-muted); border-radius:var(--r-sm); text-align:center;
  font-size:1.05rem; font-weight:700; overflow-wrap:anywhere; transition:background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.tile:hover{ background:var(--accent-soft); color:var(--accent-text); }
.tile:active{ transform:translateY(2px); }
.tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tile .flag{ font-size:2.4rem; line-height:1; }
.tiles-more{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 8px; color:var(--text-muted); font-size:0.88rem; }
@media (max-width:1000px){ .tiles{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width:760px){ .tiles{ grid-template-columns:repeat(3, 1fr); gap:10px; } .tile{ font-size:0.95rem; } }
@media (max-width:460px){ .tiles{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .explore{ padding:18px; } .explore-head{ align-items:flex-start; } }

/* ===== Header v2: clean layout (loads after global.css, overrides the old header) ===== */
.site-header{ padding:0; }
.header-inner{ display:flex; align-items:center; gap:28px; min-height:68px; }
.header-logo{ flex:0 0 auto; }
.header-logo img{ height:38px; }
.header-nav{ display:flex; align-items:center; gap:4px; flex:1 1 auto; min-width:0; }
.header-nav > a, .nav-trigger{
  display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:var(--r-sm);
  color:var(--text-muted); font-weight:600; font-size:0.92rem; transition:background .15s, color .15s;
}
.header-nav > a:hover, .nav-trigger:hover{ color:var(--text); background:var(--surface-2); }
.header-nav > a.active, .nav-trigger[aria-expanded="true"], .nav-trigger.active{ color:var(--accent-text); background:var(--accent-soft); }
.nav-trigger svg{ width:14px; height:14px; transition:transform .15s; }
.nav-trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }

/* Right side: search, then account actions */
.header-actions{ display:flex; align-items:center; gap:6px; margin-left:auto; flex:0 0 auto; }
.header-search-btn{
  display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 12px; border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--text-muted); font-size:0.88rem; font-weight:600; transition:background .15s, color .15s;
}
.header-search-btn:hover{ background:var(--accent-soft); color:var(--accent-text); }
.header-search-btn svg{ width:17px; height:17px; flex:0 0 auto; }
.header-search-btn kbd{ font:inherit; font-size:0.7rem; font-weight:700; color:var(--text-soft); background:var(--surface-3); border-radius:3px; padding:0 6px; line-height:18px; margin-left:4px; }
.header-sep{ width:1px; height:22px; margin:0 10px; background:var(--border-strong); }
.hdr-link{
  display:inline-flex; align-items:center; height:40px; padding:0 14px; border-radius:var(--r-sm);
  color:var(--text-muted); font-weight:600; font-size:0.9rem; transition:background .15s, color .15s;
}
.hdr-link:hover{ color:var(--text); background:var(--surface-2); }
.auth-in{ display:none; }
.site-header[data-auth="in"] .auth-in{ display:inline-flex; }
.site-header[data-auth="in"] .auth-out{ display:none; }
.site-header[data-auth="in"] .add-server{ background:var(--accent); color:#fff; }
.site-header[data-auth="in"] .add-server:hover{ background:var(--accent-hover); color:#fff; }
html[data-theme="dark"] .site-header[data-auth="in"] .add-server, html[data-theme="dark"] .site-header[data-auth="in"] .add-server:hover{ color:#0f1a02; }
.user-btn{
  width:40px; height:40px; align-items:center; justify-content:center; border-radius:var(--r-sm);
  background:var(--surface-3); border:1px solid var(--border-strong); color:var(--text); transition:border-color .15s, color .15s, background .15s;
}
.user-btn:hover{ border-color:var(--accent); color:var(--accent-hover); background:var(--surface-2); }
.user-btn:focus-visible, .nav-trigger:focus-visible, .header-search-btn:focus-visible, .hdr-link:focus-visible, .mm a:focus-visible, .mm-search:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.user-btn svg{ width:20px; height:20px; }
.mobile-menu-btn{ background:var(--surface-3); border:1px solid var(--border-strong); width:40px; height:40px; }

/* Servers mega menu: four calm columns, text only */
.mm{ position:absolute; top:100%; left:0; right:0; max-height:calc(100vh - 84px); overflow-y:auto; background:var(--surface); border-bottom:1px solid var(--border-strong); box-shadow:0 18px 32px -18px rgba(0,0,0,.35); }
.mm-search-row{ padding:24px 20px 0; }
.mm-search{
  width:100%; height:50px; display:flex; align-items:center; gap:12px; padding:0 16px; text-align:left;
  background:var(--surface-2); border:0; border-radius:var(--r-sm); color:var(--text-muted);
  font-size:0.94rem; transition:background .15s, color .15s;
}
.mm-search:hover{ background:var(--accent-soft); color:var(--text); }
.mm-search svg{ width:18px; height:18px; flex:0 0 auto; color:var(--text-soft); }
.mm-search:hover svg{ color:var(--accent); }
.mm-search span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-search kbd{ font:inherit; font-size:0.72rem; font-weight:700; color:var(--text-soft); background:var(--surface-3); border-radius:3px; padding:0 6px; line-height:20px; flex:0 0 auto; }
.mm-grid{ display:grid; grid-template-columns:1.1fr 1.3fr .8fr 1.35fr; gap:20px 56px; padding:32px 20px 34px; }
.mm h3, .mm .mm-title{ margin:0 0 14px; line-height:1.4; font-size:0.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); }
.mm-block + .mm-block{ margin-top:30px; }
.mm-platform a{ display:flex; align-items:center; gap:12px; padding:7px 0; }
.mm-platform img{ width:26px; height:26px; object-fit:contain; flex-shrink:0; }
.mm-platform strong{ display:block; font-size:0.92rem; }
.mm-platform span{ display:block; font-size:0.8rem; color:var(--text-muted); line-height:1.35; }
.mm-platform a:hover strong, .mm-list a:hover, .mm-cols a:hover, .mm-one a:hover{ color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }
.mm-list, .mm-one{ display:flex; flex-direction:column; }
.mm-list a, .mm-cols a, .mm-one a{ display:block; padding:4px 0; font-size:0.92rem; line-height:1.4; color:var(--text); }
.mm-cols{ column-count:2; column-gap:28px; }
.mm-cols a{ break-inside:avoid; }
.mm-cols .fl{ display:inline-block; width:1.55em; }
.mm-list a.mm-viewall, .mm-cols a.mm-viewall, .mm-one a.mm-viewall{ font-weight:700; color:var(--accent-text); }
.mm-foot{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px 20px; background:var(--surface-2); font-size:0.92rem; }
.mm-more{ display:flex; flex-wrap:wrap; gap:10px 36px; }
.mm-more a{ color:var(--text-muted); font-weight:600; line-height:1.4; }
.mm-more a:hover{ color:var(--accent-text); }
.mm-all{ flex:0 0 auto; padding-left:8px; font-weight:700; white-space:nowrap; color:var(--accent-text); }
.mm-all:hover{ color:var(--accent-hover); }

@media (max-width:1100px){
  .header-inner{ gap:20px; }
  .header-search-btn kbd{ display:none; }
  .mm-grid{ gap:20px 36px; }
}
/* Mobile: one tidy row (logo, actions, menu button); nav lives in a drawer */
@media (max-width:960px){
  .header-inner{ gap:12px; min-height:60px; }
  .header-sep{ display:none; }
  .header-search-btn{ width:40px; padding:0; justify-content:center; }
  .header-search-btn .hs-label, .header-search-btn kbd{ display:none; }
  .mobile-menu-btn{ display:inline-flex; }
  .header-nav{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px;
    padding:8px 14px 14px; background:var(--surface); border-bottom:1px solid var(--border-strong);
    max-height:calc(100vh - 100px); overflow-y:auto;
  }
  .header-nav.open{ display:flex; }
  .nav-trigger{ justify-content:space-between; }
  .mm{ position:static; max-height:none; overflow:visible; box-shadow:none; border:0; background:var(--surface-2); margin:4px 0 6px; border-radius:var(--r-sm); }
  .mm-search-row{ padding:14px 16px 0; } .mm-search kbd{ display:none; }
  .mm-grid{ grid-template-columns:1fr 1fr; gap:24px 18px; padding:20px 16px; }
  .mm-foot{ flex-direction:column; align-items:flex-start; gap:14px; padding:16px; background:transparent; }
}
@media (max-width:700px){ .header-actions .add-server{ display:none; } }
@media (max-width:560px){ .mm-grid{ grid-template-columns:1fr; } .header-actions .btn-sm{ padding:8px 12px; } }
@media (max-width:420px){ .header-actions .hdr-link.auth-out{ display:none; } }

/* =============================================================
   BACKEND ADDITIONS — states the static designs did not need
   (flash banners, empty media, MOTD colors, legal pages, admin).
   ============================================================= */

/* ---- Flash banners (server messages after a redirect) ---- */
.flash{ padding:12px 0; font-size:0.9rem; font-weight:600; transition:opacity .4s ease, max-height .4s ease; max-height:120px; overflow:hidden; }
.flash-success{ background:var(--success-soft); color:var(--success); }
.flash-error{ background:var(--danger-soft); color:var(--danger); }
.flash-hide{ opacity:0; max-height:0; padding:0; }

/* ---- Empty icons / banners ---- */
.icon-empty{ display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:0.8rem; color:var(--text-soft); background:var(--surface-3); }
.banner-empty{ display:flex; align-items:center; justify-content:center; overflow:hidden; font-family:var(--font-mc); font-size:0.8rem; color:var(--text-soft); background:linear-gradient(135deg, var(--surface-3), var(--surface-2)); }
.banner-empty span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 12px; }
.server-icon img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.server-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.modal-header .icon-empty{ width:40px; height:40px; }

/* ---- Server cards: tag links sit above the card-wide link ---- */
.server-card .tags a.pill{ position:relative; z-index:1; transition:background .15s, color .15s; }
.server-card .tags a.pill:hover{ background:var(--accent-soft); color:var(--accent-text); }
.server-card.is-featured{ box-shadow:inset 1px 0 0 var(--accent); }
.verified-mini{ position:relative; z-index:1; color:var(--accent); display:inline-flex; flex-shrink:0; }
.verified-mini svg{ width:16px; height:16px; }

/* ---- Join pop-up (index): icon, "<name> IP Copied", Java IP, Bedrock IP + Port, then the usual buttons ---- */
.modal.jm2{ position:relative; max-width:500px; }
.jm2-close{ position:absolute; top:12px; right:12px; z-index:1; }
.jm2-body{ padding:32px 24px 6px; text-align:center; }
.jm2-icon{ display:flex; justify-content:center; }
.jm2-icon img, .jm2-initials{ width:88px; height:88px; object-fit:cover; image-rendering:pixelated; background:var(--surface-3); }
.jm2-initials{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-size:1.8rem; color:var(--text-soft); }
.jm2-title{ margin:16px 0 22px; font-family:var(--font-heading); font-weight:900; font-size:1.55rem; line-height:1.3; letter-spacing:0; color:var(--text); overflow-wrap:anywhere; }
.jm2-copied{ white-space:nowrap; }
.jm2-field{ text-align:left; margin-bottom:16px; min-width:0; }
.jm2-label{ display:block; margin-bottom:6px; font-weight:700; font-size:0.9rem; color:var(--text); }
.jm2-field .ip-box{ width:100%; }
.jm2-row{ display:flex; gap:12px; }
.jm2-row[hidden], .jm2-field[hidden]{ display:none !important; }
.jm2-grow{ flex:1 1 auto; }
.jm2-port{ flex:0 0 136px; }
@media (max-width:420px){
  .jm2-body{ padding:28px 18px 4px; }
  .jm2-row{ flex-direction:column; gap:0; }
  .jm2-port{ flex-basis:auto; }
}

/* ---- Unverified listing (from ExtraComponents/server-unverified.html) ---- */
.unclaimed-badge{ color:var(--text-soft); flex-shrink:0; cursor:pointer; transition:color 0.15s ease; }
.unclaimed-badge:hover, .unclaimed-badge:focus-visible{ color:var(--warn); }
.unclaimed-badge svg{ width:18px; height:18px; display:block; }
.unclaimed-badge .tooltip-bubble{ white-space:normal; width:200px; text-align:center; line-height:1.35; }
.unclaimed-notice{
  display:flex; align-items:center; justify-content:center; gap:6px; background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn);
  border-radius:var(--r-sm); padding:8px 10px; font-size:0.78rem; font-weight:600; margin:0 0 16px; transition:filter 0.15s ease;
}
.unclaimed-notice:hover{ filter:brightness(0.97); }
html[data-theme="dark"] .unclaimed-notice:hover{ filter:brightness(1.15); }
.unclaimed-notice svg{ width:15px; height:15px; flex-shrink:0; }
/* Vote tab bookmark reminder: same look as the claim notice */
.vote-note.vote-bookmark{
  width:fit-content; max-width:100%; margin:32px auto 0; background:var(--warn-soft); color:#000; border:1px solid var(--warn);
  border-radius:var(--r-sm); padding:10px 16px; font-size:0.95rem; font-weight:500; line-height:1.45; text-align:center;
}
html[data-theme="dark"] .vote-note.vote-bookmark{ color:#fff; }
.vote-bookmark strong{ font-weight:700; }
.detail-notice{ grid-column:1 / -1; }
a.report-row{ color:var(--danger); }

/* ---- MOTD: every Minecraft color + formatting; RGB comes inline ---- */
.motd{ background:#1b1b1b; color:#aaaaaa; border-radius:var(--r-sm); white-space:normal; }
.motd .mc-black{ color:#000000; } .motd .mc-dark-blue{ color:#0000aa; } .motd .mc-dark-green{ color:#00aa00; } .motd .mc-dark-aqua{ color:#00aaaa; }
.motd .mc-dark-red{ color:#aa0000; } .motd .mc-dark-purple{ color:#aa00aa; } .motd .mc-gold{ color:#ffaa00; } .motd .mc-gray{ color:#aaaaaa; }
.motd .mc-dark-gray{ color:#555555; } .motd .mc-blue{ color:#5555ff; } .motd .mc-green{ color:#55ff55; } .motd .mc-aqua{ color:#55ffff; }
.motd .mc-red{ color:#ff5555; } .motd .mc-light-purple{ color:#ff55ff; } .motd .mc-yellow{ color:#ffff55; } .motd .mc-white{ color:#ffffff; }
.motd .mc-bold{ font-weight:700; } .motd .mc-italic{ font-style:italic; }
.motd .mc-underline{ text-decoration:underline; } .motd .mc-strike{ text-decoration:line-through; }
.motd .mc-underline.mc-strike{ text-decoration:underline line-through; }
.motd .mc-obf{ font-variant-numeric:tabular-nums; }
.motd-seen{ white-space:pre-wrap; }

/* ---- Server page extras ---- */
.server-description p{ margin:0 0 12px; color:var(--text-muted); line-height:1.7; }
.server-description p:last-child{ margin-bottom:0; }
.server-description{ color:var(--text-muted); line-height:1.7; overflow-wrap:anywhere; }
.vote-result{ margin-top:16px; }
.vote-result:empty{ display:none; }
.vote-note{ margin-top:18px; }
.vote-section .cf-turnstile{ min-height:65px; }
.rec-section{ background:var(--surface); padding:24px 26px; margin-bottom:24px; }
.rec-section h2{ font-size:1.25rem; margin:0 0 14px; }
.rec-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.rec-card{ display:flex; align-items:center; gap:12px; padding:12px; background:var(--surface-2); border-radius:var(--r-sm); transition:background .15s, transform .15s; min-width:0; }
.rec-card:hover{ background:var(--accent-soft); transform:translateY(-1px); }
.rec-icon{ width:40px; height:40px; flex-shrink:0; object-fit:cover; }
.rec-info{ display:flex; flex-direction:column; min-width:0; }
.rec-name{ font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rec-meta{ font-size:0.78rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:560px){ .rec-grid{ grid-template-columns:1fr; } }

/* ---- Forms ---- */
.hp-field{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.upload-zone .u-preview{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.upload-remove{ padding-top:4px; font-size:0.82rem; }
.danger-zone{ margin-top:16px; }
.danger-zone .t-label{ color:var(--danger); }
.form-card .alert{ margin:0; }
.settings-alert{ max-width:520px; margin-bottom:16px; }

/* ---- Dashboard extras ---- */
.dash-stats{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:0.8rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.dash-stats span{ display:inline-flex; align-items:center; gap:6px; }
.dash-logout{ margin:0; }
.dash-logout .dash-nav-item{ width:100%; }
.coming-soon{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.coming-soon svg{ width:28px; height:28px; color:var(--accent); }
.coming-soon strong{ color:var(--text); font-size:1.05rem; }

/* ---- Browse tiles ---- */
.tile-count{ font-size:0.72rem; font-weight:700; color:var(--text-soft); background:var(--surface-2); padding:2px 8px; border-radius:var(--r-pill); }

/* ---- Legal pages ---- */
.legal-doc{ max-width:820px; margin:0 auto; padding:30px 34px; line-height:1.7; }
.legal-doc h2{ font-size:1.25rem; margin:28px 0 8px; }
.legal-doc h3{ font-size:1rem; margin:18px 0 6px; font-family:var(--font); }
.legal-doc p{ color:var(--text-muted); margin:0 0 12px; }
.legal-list{ list-style:disc; padding-left:22px; margin:0 0 12px; color:var(--text-muted); }
.legal-list li{ margin:4px 0; }
.legal-foot{ margin-top:28px !important; font-size:0.82rem; }
@media (max-width:560px){ .legal-doc{ padding:22px 18px; } }

/* ---- Staff page ---- */
.staff-group{ margin:0 0 32px; }
.staff-group h2{ font-size:1.25rem; margin:0 0 14px; }
.staff-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
.staff-card{ padding:20px; display:flex; flex-direction:column; gap:6px; }
.staff-card h3{ margin:0; font-size:1.1rem; font-family:var(--font-heading); }
.staff-role{ font-family:var(--font-mc); font-size:0.8rem; color:var(--text-muted); }
.staff-discord{ display:inline-flex; align-items:center; gap:8px; font-size:0.9rem; color:var(--text-muted); }
.discord-icon{ flex:none; color:var(--accent); }

/* ---- Admin panel ---- */
.admin-kpis.stat-strip{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px 0; padding:16px 0; }
.admin-kpis .stat-item, .admin-kpis .stat-item:first-child{ padding:0 20px; }
.admin-kpis .stat-item:nth-child(4n){ border-right:none; }
@media (max-width:720px){ .admin-kpis.stat-strip{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .admin-kpis .stat-item{ border-right:none; } }
.a-table.admin-table{ min-width:720px; }
.admin-table th, .admin-table td{ text-align:left; padding:11px 16px; }
.admin-main{ min-width:0; }
.admin-main .panel-head{ flex-wrap:wrap; }
.admin-filter{ margin:0 0 14px; }
.admin-filter .search-wrap input{ height:42px; }
.admin-filter .btn-sm{ height:42px; }
.inline-form{ display:inline-flex; align-items:center; gap:6px; margin:0; }
.admin-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.dash-shell > *{ min-width:0; } /* lets the mobile nav strip scroll instead of widening the page */
/* Pin the two-column layouts so the main column never slides into the sidebar column
   (e.g. if a browser extension hides the sidebar). */
@media (min-width:981px){
  .detail-layout > .sidebar{ grid-column:1; grid-row:1; }
  .detail-layout > .main-content{ grid-column:2; grid-row:1; }
  .detail-layout > .detail-notice{ grid-column:1 / -1; grid-row:auto; }
  .detail-layout:has(> .detail-notice) > .sidebar, .detail-layout:has(> .detail-notice) > .main-content{ grid-row:2; }
}
@media (min-width:861px){
  .dash-shell > .dash-sidebar{ grid-column:1; grid-row:1; }
  .dash-shell > :not(.dash-sidebar){ grid-column:2; grid-row:1; }
}
.nav-count{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill); background:var(--accent); color:#fff; font-size:0.7rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }

/* Admin lists: one card per item, like the Dashboard's server rows */
.adm-list{ display:flex; flex-direction:column; gap:12px; }
.adm-card{ padding:16px 18px; }
.adm-card-main{ display:flex; align-items:center; gap:16px; }
.adm-icon{ width:44px; height:44px; flex-shrink:0; object-fit:cover; image-rendering:pixelated; }
.adm-card .account-badge{ width:44px; height:44px; font-size:1.05rem; }
.adm-card-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.adm-card-title{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:1.02rem; font-weight:700; color:var(--text); }
.adm-card-title a:hover{ color:var(--accent-hover); text-decoration:underline; }
.adm-card-meta{ font-size:0.84rem; color:var(--text-muted); overflow-wrap:anywhere; }
.adm-card-text{ margin:4px 0 0; font-size:0.88rem; color:var(--text); white-space:normal; overflow-wrap:anywhere; }
.adm-card-actions{ display:flex; flex-direction:column; gap:8px; width:140px; flex-shrink:0; }
.adm-card-actions form{ display:block; width:100%; }
.adm-card-actions .btn-full{ width:100%; }
.adm-manage{ margin-top:14px; border-top:1px solid var(--border); }
.adm-manage summary{ cursor:pointer; list-style:none; padding:12px 0 0; font-size:0.84rem; font-weight:700; color:var(--text-muted); display:inline-flex; align-items:center; gap:6px; }
.adm-manage summary::-webkit-details-marker{ display:none; }
.adm-manage summary::after{ content:''; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin:-3px 0 0 4px; transition:transform .15s; }
.adm-manage[open] summary::after{ transform:rotate(-135deg); margin-top:3px; }
.adm-manage summary:hover{ color:var(--accent-hover); }
.adm-manage-body{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 24px; padding:14px 0 2px; }
.adm-field{ margin:0; min-width:0; }
.adm-field label{ display:block; margin-bottom:6px; }
.adm-inline{ display:flex; gap:8px; align-items:center; }
.adm-inline input, .adm-inline .select-wrap{ flex:1; min-width:0; }
.adm-inline input, .adm-inline select{ height:40px; }
.adm-inline .btn-sm{ height:40px; flex-shrink:0; }
.adm-buttons{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:720px){
  .adm-card-main{ flex-wrap:wrap; }
  .adm-card-actions{ width:100%; flex-direction:row; }
  .adm-card-actions > *{ flex:1; }
  .adm-manage-body{ grid-template-columns:1fr; }
}
.admin-table td{ vertical-align:middle; }
.admin-table td.wrap{ white-space:normal; min-width:200px; max-width:360px; overflow-wrap:anywhere; }
.admin-table td .m-help{ display:block; font-size:0.74rem; color:var(--text-soft); font-weight:500; }
.admin-table .btn-sm{ padding:6px 10px; font-size:0.78rem; }
.admin-kpis{ margin-bottom:20px; }
.admin-charts{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; margin-bottom:14px; }
@media (max-width:1100px){ .admin-charts{ grid-template-columns:1fr; } }
.admin-chart{ min-width:0; }
.uplot-wrap{ width:100%; min-height:200px; position:relative; }
.uplot-readout{ font-size:0.78rem; color:var(--text-muted); min-height:1.2em; margin-top:4px; font-variant-numeric:tabular-nums; }
.kv{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--border); font-size:0.86rem; }
.kv:last-child{ border-bottom:0; }
.kv span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-gap{ margin-top:20px; }
.admin-note{ margin-bottom:14px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.admin-note .section-label{ width:100%; margin:0; }
.admin-messages{ display:flex; flex-direction:column; gap:12px; }
.admin-message header{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.admin-message header .m-help{ width:100%; font-size:0.78rem; color:var(--text-soft); }
.admin-message-body{ color:var(--text); white-space:normal; overflow-wrap:anywhere; margin:0 0 12px; }
.log-ctx{ margin-top:6px; }
.log-ctx summary{ cursor:pointer; color:var(--text-muted); font-size:.8rem; }
.log-ctx pre{ margin:6px 0 0; padding:10px; max-height:320px; overflow:auto; background:var(--bg); border:1px solid var(--border); border-radius:8px; font-size:.75rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.admin-import textarea{ width:100%; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:0.84rem; }
.admin-pager{ justify-content:flex-start; }

/* ---- uPlot (local library styles, kept in this one stylesheet) ---- */
.uplot, .uplot *, .uplot *::before, .uplot *::after{ box-sizing:border-box; }
.uplot{ font-family:var(--font); line-height:1.5; width:min-content; }
.u-wrap{ position:relative; user-select:none; }
.u-over, .u-under{ position:absolute; }
.u-under{ overflow:hidden; }
.uplot canvas{ display:block; position:relative; width:100%; height:100%; }
.u-axis{ position:absolute; }
.u-legend{ font-size:14px; margin:auto; text-align:center; }
.u-select{ background:rgba(0,0,0,0.07); position:absolute; pointer-events:none; }
.u-cursor-x, .u-cursor-y{ position:absolute; left:0; top:0; pointer-events:none; will-change:transform; }
.u-hz .u-cursor-x, .u-vt .u-cursor-y{ height:100%; border-right:1px dashed var(--text-soft); }
.u-hz .u-cursor-y, .u-vt .u-cursor-x{ width:100%; border-bottom:1px dashed var(--text-soft); }
.u-cursor-pt{ position:absolute; top:0; left:0; border-radius:50%; border:0 solid; pointer-events:none; will-change:transform; background-clip:padding-box !important; }
.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off{ display:none; }