.flhllv-browser {
  --flhllv-bg: #10150f;
  --flhllv-panel: #171e15;
  --flhllv-panel-2: #1e271b;
  --flhllv-border: rgba(224, 232, 207, .14);
  --flhllv-text: #f3f4ed;
  --flhllv-muted: #a8b09d;
  --flhllv-accent: #d6b45c;
  --flhllv-green: #86a869;
  color: var(--flhllv-text);
  background:
    radial-gradient(circle at 90% 0, rgba(126, 151, 91, .14), transparent 34rem),
    var(--flhllv-bg);
  border: 1px solid var(--flhllv-border);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .24);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}
.flhllv-browser *, .flhllv-browser *::before, .flhllv-browser *::after { box-sizing: border-box; }
.flhllv-browser__header { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-end; padding: 28px 30px 22px; border-bottom: 1px solid var(--flhllv-border); }
.flhllv-browser__eyebrow { margin: 0 0 5px; color: var(--flhllv-accent); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.flhllv-browser h2 { margin: 0; color: var(--flhllv-text); font-size: clamp(22px, 3vw, 34px); font-weight: 760; line-height: 1.08; letter-spacing: -.03em; }
.flhllv-browser__totals { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 5px; color: var(--flhllv-muted); font-size: 13px; white-space: nowrap; }
.flhllv-browser__totals strong { color: var(--flhllv-text); font-size: 20px; font-variant-numeric: tabular-nums; }
.flhllv-browser__dot { width: 3px; height: 3px; margin: 0 7px 3px; border-radius: 50%; background: var(--flhllv-muted); }
.flhllv-browser__controls { padding: 22px 30px 18px; background: rgba(255,255,255,.015); }
.flhllv-browser__search { position: relative; display: block; max-width: 660px; }
.flhllv-browser__search svg { position: absolute; top: 50%; left: 15px; width: 19px; height: 19px; transform: translateY(-50%); fill: none; stroke: var(--flhllv-muted); stroke-linecap: round; stroke-width: 1.8; pointer-events: none; }
.flhllv-browser__search input { width: 100%; min-height: 48px; padding: 10px 16px 10px 45px; color: var(--flhllv-text); background: var(--flhllv-panel); border: 1px solid var(--flhllv-border); border-radius: 10px; box-shadow: none; font: inherit; outline: none; }
.flhllv-browser__search input::placeholder { color: #818a78; }
.flhllv-browser__search input:focus { border-color: var(--flhllv-accent); box-shadow: 0 0 0 3px rgba(214, 180, 92, .13); }
.flhllv-browser__filters { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.flhllv-browser__filter, .flhllv-browser__refresh, .flhllv-browser__sort { appearance: none; font: inherit; cursor: pointer; }
.flhllv-browser__filter { padding: 7px 11px; color: var(--flhllv-muted); background: transparent; border: 1px solid var(--flhllv-border); border-radius: 7px; font-size: 12px; font-weight: 750; line-height: 1; letter-spacing: .02em; }
.flhllv-browser__filter:hover { color: var(--flhllv-text); background: var(--flhllv-panel-2); }
.flhllv-browser__filter.is-active { color: #17150c; background: var(--flhllv-accent); border-color: var(--flhllv-accent); }
.flhllv-browser__meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 30px 12px; }
.flhllv-browser__meta p { margin: 0; color: var(--flhllv-muted); font-size: 12px; }
.flhllv-browser__refresh { padding: 5px 0; color: var(--flhllv-accent); background: none; border: 0; font-size: 12px; font-weight: 700; }
.flhllv-browser__refresh:disabled { cursor: wait; opacity: .45; }
.flhllv-browser__table-wrap { overflow-x: auto; border-top: 1px solid var(--flhllv-border); }
.flhllv-browser__table { width: 100%; min-width: 720px; margin: 0; border: 0; border-collapse: collapse; color: inherit; background: transparent; }
.flhllv-browser__table th, .flhllv-browser__table td { padding: 15px 18px; text-align: left; border: 0; border-bottom: 1px solid var(--flhllv-border); vertical-align: middle; }
.flhllv-browser__table th:first-child, .flhllv-browser__table td:first-child { padding-left: 30px; }
.flhllv-browser__table th:last-child, .flhllv-browser__table td:last-child { padding-right: 30px; }
.flhllv-browser__table th { padding-top: 10px; padding-bottom: 10px; background: rgba(0,0,0,.12); }
.flhllv-browser__table tbody tr { transition: background-color .15s ease; }
.flhllv-browser__table tbody tr:hover { background: rgba(255,255,255,.025); }
.flhllv-browser__table tbody tr:last-child td { border-bottom: 0; }
.flhllv-browser__server-col { width: 48%; }
.flhllv-browser__sort { padding: 0; color: var(--flhllv-muted); background: none; border: 0; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.flhllv-browser__sort:hover, .flhllv-browser__sort.is-active { color: var(--flhllv-text); }
.flhllv-browser__sort-arrow { margin-left: 5px; color: var(--flhllv-accent); }
.flhllv-browser__server-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.flhllv-browser__server-title strong { overflow: hidden; color: var(--flhllv-text); font-size: 14px; font-weight: 680; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.flhllv-browser__online-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--flhllv-green); box-shadow: 0 0 0 3px rgba(134, 168, 105, .12); }
.flhllv-browser__lock { flex: 0 0 auto; overflow: hidden; width: 7px; color: transparent; }
.flhllv-browser__lock::before { content: ""; display: block; width: 7px; height: 6px; margin-top: 4px; border: 1px solid var(--flhllv-muted); border-radius: 1px; }
.flhllv-browser__detail { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 6px 0 0 16px; }
.flhllv-browser__detail code { padding: 0; color: var(--flhllv-muted); background: transparent; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.flhllv-browser__tag { padding: 2px 5px; color: #d4dacb; background: rgba(255,255,255,.06); border-radius: 3px; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.flhllv-browser__players, .flhllv-browser__ping { color: var(--flhllv-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flhllv-browser__players strong { color: var(--flhllv-text); }
.flhllv-browser__meter { display: block; width: 64px; height: 3px; margin-top: 7px; overflow: hidden; background: rgba(255,255,255,.09); border-radius: 3px; }
.flhllv-browser__meter-fill { display: block; height: 100%; background: var(--flhllv-accent); border-radius: inherit; }
.flhllv-browser__map { max-width: 180px; overflow: hidden; color: #d9ddcf; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.flhllv-browser__empty { padding: 60px 30px; text-align: center; }
.flhllv-browser__empty strong { display: block; color: var(--flhllv-text); font-size: 17px; }
.flhllv-browser__empty p { margin: 7px 0 0; color: var(--flhllv-muted); font-size: 13px; }

@media (max-width: 700px) {
  .flhllv-browser__header { align-items: flex-start; padding: 23px 20px 18px; }
  .flhllv-browser__totals { display: none; }
  .flhllv-browser__controls { padding: 18px 20px 15px; }
  .flhllv-browser__filters { flex-wrap: nowrap; margin-right: -20px; padding-right: 20px; overflow-x: auto; scrollbar-width: none; }
  .flhllv-browser__filter { flex: 0 0 auto; }
  .flhllv-browser__meta { padding: 0 20px 12px; }
  .flhllv-browser__table-wrap { overflow: visible; }
  .flhllv-browser__table { min-width: 0; }
  .flhllv-browser__table thead { display: none; }
  .flhllv-browser__table, .flhllv-browser__table tbody, .flhllv-browser__table tr, .flhllv-browser__table td { display: block; width: 100%; }
  .flhllv-browser__table tr { position: relative; padding: 17px 20px; border-bottom: 1px solid var(--flhllv-border); }
  .flhllv-browser__table tbody tr:last-child { border-bottom: 0; }
  .flhllv-browser__table td, .flhllv-browser__table th:first-child, .flhllv-browser__table td:first-child, .flhllv-browser__table th:last-child, .flhllv-browser__table td:last-child { padding: 0; border: 0; }
  .flhllv-browser__server-title { padding-right: 72px; }
  .flhllv-browser__server-title strong { white-space: normal; }
  .flhllv-browser__detail { margin-left: 16px; padding-right: 72px; }
  .flhllv-browser__players { position: absolute; top: 17px; right: 20px; text-align: right; }
  .flhllv-browser__meter { margin-left: auto; }
  .flhllv-browser__map, .flhllv-browser__ping { display: inline-block !important; width: auto !important; max-width: calc(100% - 90px); margin: 13px 14px 0 16px; color: var(--flhllv-muted); font-size: 11px; }
  .flhllv-browser__ping { margin-left: 0; }
  .flhllv-browser__ping::before { content: "•"; margin-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .flhllv-browser * { scroll-behavior: auto !important; transition: none !important; }
}

/* Frontline 0.8 theme bridge.  The component deliberately inherits the
   website tokens so it reads as part of the server world, not as a plugin. */
.flhllv-browser {
  --flhllv-bg: var(--fln-bg, #080b08);
  --flhllv-panel: var(--fln-panel, #0d110c);
  --flhllv-panel-2: var(--fln-panel-2, #121611);
  --flhllv-border: var(--fln-line, #2a3028);
  --flhllv-text: var(--fln-text, #ede5d7);
  --flhllv-muted: var(--fln-muted, #aaa493);
  --flhllv-accent: var(--fln-gold-2, #f1cf83);
  --flhllv-green: var(--fln-green, #62bd70);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--fln-body, Inter, ui-sans-serif, system-ui, sans-serif);
  background: linear-gradient(135deg, rgba(197,154,74,.09), transparent 47%), var(--flhllv-bg);
}
.flhllv-browser__header { align-items: start; padding: clamp(24px,4vw,44px); border-bottom-color: var(--flhllv-border); }
.flhllv-browser__eyebrow { color: var(--fln-gold-2, var(--flhllv-accent)); font-weight: 900; }
.flhllv-browser h2 { font-family: var(--fln-display, Impact, sans-serif); font-size: clamp(38px,5vw,68px); font-weight: 400; letter-spacing: .005em; line-height: .94; text-transform: uppercase; }
.flhllv-browser__totals { gap: 7px; padding-top: 8px; font-size: 12px; text-transform: uppercase; }
.flhllv-browser__totals strong { color: var(--fln-gold-2, var(--flhllv-accent)); font-family: var(--fln-display, Impact, sans-serif); font-size: 34px; font-weight: 400; }
.flhllv-browser__controls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:end; padding:24px clamp(24px,4vw,44px); background:transparent; }
.flhllv-browser__search { max-width:none; }
.flhllv-browser__search input { min-height:52px; border-radius:0; background:var(--fln-bg-2, var(--flhllv-panel)); }
.flhllv-browser__filters { justify-content:flex-end; margin-top:0; }
.flhllv-browser__filter { border-radius:0; color:var(--flhllv-muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.flhllv-browser__filter.is-active { color:var(--fln-bg, #080b08); background:var(--fln-gold-2, var(--flhllv-accent)); border-color:var(--fln-gold-2, var(--flhllv-accent)); }
.flhllv-browser__meta { padding:0 clamp(24px,4vw,44px) 17px; }
.flhllv-browser__meta p { font-size:12px; }
.flhllv-browser__refresh { color:var(--fln-gold-2, var(--flhllv-accent)); font-size:11px; letter-spacing:.08em; text-decoration:underline; text-underline-offset:5px; text-transform:uppercase; }
.flhllv-browser__notice { margin:0; padding:12px clamp(24px,4vw,44px); color:var(--fln-muted, var(--flhllv-muted)); border-top:1px solid var(--fln-line, var(--flhllv-border)); border-bottom:1px solid var(--fln-line, var(--flhllv-border)); background:rgba(197,154,74,.06); font-size:12px; }
.flhllv-browser__table th { background:var(--fln-bg-2, var(--flhllv-panel)); }
.flhllv-browser__table th,.flhllv-browser__table td { border-bottom-color:var(--fln-line, var(--flhllv-border)); }
.flhllv-browser__table th:first-child,.flhllv-browser__table td:first-child { padding-left:clamp(24px,4vw,44px); }
.flhllv-browser__table th:last-child,.flhllv-browser__table td:last-child { padding-right:clamp(24px,4vw,44px); }
.flhllv-browser__sort { font-size:10px; letter-spacing:.1em; }
.flhllv-browser__server-title strong { color:var(--fln-text, var(--flhllv-text)); font-size:15px; }
.flhllv-browser__online-dot { box-shadow:0 0 0 4px rgba(98,189,112,.11); }
.flhllv-browser__online-dot.is-offline { background:var(--fln-dim, #7e8177); box-shadow:none; }
.flhllv-browser__tag,.flhllv-browser__source { padding:3px 6px; border:1px solid var(--fln-line, var(--flhllv-border)); color:var(--fln-muted, var(--flhllv-muted)); background:transparent; font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.flhllv-browser__source { color:var(--fln-gold-2, var(--flhllv-accent)); border-color:var(--fln-line-gold, var(--flhllv-border)); }
.flhllv-browser__meter { border-radius:0; background:rgba(237,229,215,.12); }
.flhllv-browser__meter-fill { border-radius:0; background:var(--fln-gold, var(--flhllv-accent)); }
.flhllv-browser__empty { padding:68px 30px; background:var(--fln-panel, var(--flhllv-panel)); }

@media (max-width: 820px) {
  .flhllv-browser__controls { grid-template-columns:1fr; gap:14px; }
  .flhllv-browser__filters { justify-content:flex-start; margin-top:0; }
}