:root {
  --bg: #070707;
  --panel: rgba(20, 21, 22, 0.92);
  --panel-2: rgba(13, 14, 15, 0.92);
  --text: #e8e3d9;
  --muted: rgba(232, 227, 217, 0.68);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(0, 0, 0, 0.65);
  --accent: #d7862d;
  --accent-2: #ffb35a;
  --ok: #55d6a2;
  --warn: #ffcc66;
  --danger: #ff6b6b;
  --shadow: 0 26px 60px rgba(0, 0, 0, 0.65);
  --radius: 14px;
  --radius-sm: 12px;
  --bg-tile: url("assets/bg/beijing-tile-256.jpg");

  --skin-btn-primary-normal: url("assets/ui/skin/btn-primary-normal.png");
  --skin-btn-primary-hover: url("assets/ui/skin/btn-primary-hover.png");
  --skin-btn-primary-pressed: url("assets/ui/skin/btn-primary-pressed.png");
  --skin-btn-primary-disabled: url("assets/ui/skin/btn-primary-disabled.png");
  --skin-btn-ghost-normal: url("assets/ui/skin/btn-ghost-normal.png");
  --skin-btn-ghost-hover: url("assets/ui/skin/btn-ghost-hover.png");
  --skin-btn-ghost-pressed: url("assets/ui/skin/btn-ghost-pressed.png");

  --skin-input-normal: url("assets/ui/skin/input-normal.png");
  --skin-input-focus: url("assets/ui/skin/input-focus.png");
  --skin-select-cap: url("assets/ui/skin/select-cap.png");

  --skin-checkbox-off: url("assets/ui/skin/checkbox-off.png");
  --skin-checkbox-on: url("assets/ui/skin/checkbox-on.png");

  --skin-corner-tl: url("assets/ui/skin/corner-tl.png");
  --skin-corner-tr: url("assets/ui/skin/corner-tr.png");
  --skin-corner-bl: url("assets/ui/skin/corner-bl.png");
  --skin-corner-br: url("assets/ui/skin/corner-br.png");

  --skin-frame-plain: url("assets/ui/skin/frame-plain.png");
  --skin-frame-accent: url("assets/ui/skin/frame-accent.png");

  --skin-panel-tile: url("assets/ui/skin/panel-tile.png");
  --skin-header-tile: url("assets/ui/skin/header-tile.png");
  --skin-row-tile: url("assets/ui/skin/row-tile.png");

  --icon-search: url("assets/ui/icons/search.png");
  --icon-filter: url("assets/ui/icons/filter.png");
  --icon-refresh: url("assets/ui/icons/refresh.png");
}

* { box-sizing: border-box; }
html, body { height: 100%; }

@supports (background-image: image-set(url("assets/bg/beijing-tile-256.webp") type("image/webp"))) {
  :root {
    --bg-tile: image-set(
      url("assets/bg/beijing-tile-256.webp") type("image/webp"),
      url("assets/bg/beijing-tile-256.jpg") type("image/jpeg")
    );

    --skin-btn-primary-normal: image-set(
      url("assets/ui/skin/btn-primary-normal.webp") type("image/webp"),
      url("assets/ui/skin/btn-primary-normal.png") type("image/png")
    );
    --skin-btn-primary-hover: image-set(
      url("assets/ui/skin/btn-primary-hover.webp") type("image/webp"),
      url("assets/ui/skin/btn-primary-hover.png") type("image/png")
    );
    --skin-btn-primary-pressed: image-set(
      url("assets/ui/skin/btn-primary-pressed.webp") type("image/webp"),
      url("assets/ui/skin/btn-primary-pressed.png") type("image/png")
    );
    --skin-btn-primary-disabled: image-set(
      url("assets/ui/skin/btn-primary-disabled.webp") type("image/webp"),
      url("assets/ui/skin/btn-primary-disabled.png") type("image/png")
    );
    --skin-btn-ghost-normal: image-set(
      url("assets/ui/skin/btn-ghost-normal.webp") type("image/webp"),
      url("assets/ui/skin/btn-ghost-normal.png") type("image/png")
    );
    --skin-btn-ghost-hover: image-set(
      url("assets/ui/skin/btn-ghost-hover.webp") type("image/webp"),
      url("assets/ui/skin/btn-ghost-hover.png") type("image/png")
    );
    --skin-btn-ghost-pressed: image-set(
      url("assets/ui/skin/btn-ghost-pressed.webp") type("image/webp"),
      url("assets/ui/skin/btn-ghost-pressed.png") type("image/png")
    );

    --skin-input-normal: image-set(
      url("assets/ui/skin/input-normal.webp") type("image/webp"),
      url("assets/ui/skin/input-normal.png") type("image/png")
    );
    --skin-input-focus: image-set(
      url("assets/ui/skin/input-focus.webp") type("image/webp"),
      url("assets/ui/skin/input-focus.png") type("image/png")
    );
    --skin-select-cap: image-set(
      url("assets/ui/skin/select-cap.webp") type("image/webp"),
      url("assets/ui/skin/select-cap.png") type("image/png")
    );

    --skin-checkbox-off: image-set(
      url("assets/ui/skin/checkbox-off.webp") type("image/webp"),
      url("assets/ui/skin/checkbox-off.png") type("image/png")
    );
    --skin-checkbox-on: image-set(
      url("assets/ui/skin/checkbox-on.webp") type("image/webp"),
      url("assets/ui/skin/checkbox-on.png") type("image/png")
    );

	    --skin-corner-tl: image-set(
	      url("assets/ui/skin/corner-tl.webp") type("image/webp"),
	      url("assets/ui/skin/corner-tl.png") type("image/png")
	    );
    --skin-corner-tr: image-set(
      url("assets/ui/skin/corner-tr.webp") type("image/webp"),
      url("assets/ui/skin/corner-tr.png") type("image/png")
    );
    --skin-corner-bl: image-set(
      url("assets/ui/skin/corner-bl.webp") type("image/webp"),
      url("assets/ui/skin/corner-bl.png") type("image/png")
    );
	    --skin-corner-br: image-set(
	      url("assets/ui/skin/corner-br.webp") type("image/webp"),
	      url("assets/ui/skin/corner-br.png") type("image/png")
	    );

	    --skin-panel-tile: image-set(
	      url("assets/ui/skin/panel-tile.webp") type("image/webp"),
	      url("assets/ui/skin/panel-tile.png") type("image/png")
	    );
    --skin-header-tile: image-set(
      url("assets/ui/skin/header-tile.webp") type("image/webp"),
      url("assets/ui/skin/header-tile.png") type("image/png")
    );
	    --skin-row-tile: image-set(
	      url("assets/ui/skin/row-tile.webp") type("image/webp"),
	      url("assets/ui/skin/row-tile.png") type("image/png")
	    );

	    --icon-search: image-set(
	      url("assets/ui/icons/search.webp") type("image/webp"),
	      url("assets/ui/icons/search.png") type("image/png")
	    );
	    --icon-filter: image-set(
	      url("assets/ui/icons/filter.webp") type("image/webp"),
	      url("assets/ui/icons/filter.png") type("image/png")
	    );
	    --icon-refresh: image-set(
	      url("assets/ui/icons/refresh.webp") type("image/webp"),
	      url("assets/ui/icons/refresh.png") type("image/png")
	    );
	  }
	}

@supports (border-image-source: image-set(url("assets/ui/skin/frame-plain.webp") type("image/webp"))) {
  :root {
    --skin-frame-plain: image-set(
      url("assets/ui/skin/frame-plain.webp") type("image/webp"),
      url("assets/ui/skin/frame-plain.png") type("image/png")
    );
    --skin-frame-accent: image-set(
      url("assets/ui/skin/frame-accent.webp") type("image/webp"),
      url("assets/ui/skin/frame-accent.png") type("image/png")
    );
  }
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji",
    "Segoe UI Emoji";
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 720px at 12% -12%, rgba(215, 134, 45, 0.22), transparent 60%),
    radial-gradient(900px 620px at 88% 0%, rgba(0, 0, 0, 0.65), transparent 62%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.86)),
    var(--bg-tile);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: cover, cover, cover, 256px 256px;
  background-attachment: fixed, fixed, fixed, fixed;
  text-rendering: geometricPrecision;
}

a { color: inherit; }

.container {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-image:
    var(--skin-header-tile),
    linear-gradient(180deg, rgba(34, 36, 38, 0.96), rgba(17, 19, 20, 0.96));
  background-repeat: repeat-x, no-repeat;
  background-size: 256px 64px, auto;
  background-position: 0 0, 0 0;
  background-blend-mode: overlay, normal;
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(215, 134, 45, 0.85), transparent);
  opacity: 0.65;
  pointer-events: none;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-title {
  font-weight: 950;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
}
.brand-sub { color: var(--muted); font-weight: 700; }

.topbar-actions { display: flex; gap: 10px; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
  margin: 18px 0 40px;
}
.layout-side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.card {
  margin: 18px 0 40px;
  border: 12px solid transparent;
  border-image-source: var(--skin-frame-plain);
  border-image-slice: 26;
  border-image-repeat: stretch;
  background-image:
    var(--skin-panel-tile),
    radial-gradient(900px 380px at 20% 0%, rgba(255, 255, 255, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(44, 46, 48, 0.92), rgba(16, 17, 18, 0.94));
  background-position: 0 0, 0 0, 0 0;
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 256px 256px, auto, auto;
  background-blend-mode: overlay, normal, normal;
  border-radius: var(--radius);
  background-clip: padding-box;
  box-shadow:
    inset 0 0 0 1px rgba(215, 134, 45, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    var(--shadow);
  overflow: hidden;
}
.card-compact { margin: 0; }
.card-side .card-header { padding: 14px 14px 10px; }
.layout-main.card { border-image-source: var(--skin-frame-accent); }
.h2 {
  font-weight: 950;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  font-size: 14px;
}
.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 8px;
  background-image:
    var(--skin-header-tile),
    linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.24));
  background-repeat: repeat-x, no-repeat;
  background-size: 256px 64px, auto;
  background-position: 0 0, 0 0;
  background-blend-mode: overlay, normal;
}
.h1 { margin: 0; font-size: 22px; }
.muted { color: var(--muted); font-size: 13px; margin-top: 6px; }
.sep { margin: 0 6px; opacity: 0.7; }
.right { display: flex; align-items: center; gap: 10px; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
}
.pill-ok { border-color: rgba(85,214,162,0.35); color: var(--ok); }
.pill-warn { border-color: rgba(255,204,102,0.35); color: var(--warn); }

.toolbar {
  margin: 12px;
  padding: 12px 12px 14px;
  border: 10px solid transparent;
  border-image-source: var(--skin-frame-plain);
  border-image-slice: 26;
  border-image-repeat: stretch;
  border-radius: 12px;
  background-image:
    var(--skin-panel-tile),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.26));
  background-repeat: repeat, no-repeat;
  background-size: 256px 256px, auto;
  background-position: 0 0, 0 0;
  background-blend-mode: overlay, normal;
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.65);
}
.toolbar-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.toolbar-row + .toolbar-row { margin-top: 10px; }

.toolbar-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 14px;
  align-items: center;
}
.filter-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  min-width: 0;
}

.input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background-image: var(--skin-input-normal);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: transparent;
  color: var(--text);
  outline: none;
  transition: box-shadow 140ms ease, filter 140ms ease;
}
.input::placeholder { color: rgba(232, 227, 217, 0.46); }
.input:focus {
  background-image: var(--skin-input-focus);
  box-shadow: 0 0 0 3px rgba(215, 134, 45, 0.18);
}

.input-search {
  padding: 0 14px 0 40px;
  background-image: var(--skin-input-normal), var(--icon-search);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 18px 18px;
  background-position: 0 0, 14px center;
}
.input-search:focus { background-image: var(--skin-input-focus), var(--icon-search); }

.toolbar-actions { display: flex; gap: 10px; flex-shrink: 0; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.55);
  background-image: var(--skin-btn-primary-normal);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: transparent;
  color: rgba(18, 12, 8, 0.92);
  text-decoration: none;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7),
    0 10px 24px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14);
  white-space: nowrap;
  transition: filter 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}
.btn:hover {
  background-image: var(--skin-btn-primary-hover);
  filter: brightness(1.06);
}
.btn:active {
  background-image: var(--skin-btn-primary-pressed);
  transform: translateY(1px);
}
.btn:disabled, .btn[disabled] {
  background-image: var(--skin-btn-primary-disabled);
  cursor: not-allowed;
  opacity: 0.72;
  filter: none;
}
.btn-ghost {
  border-color: rgba(0, 0, 0, 0.55);
  background-image: var(--skin-btn-ghost-normal);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: rgba(232, 227, 217, 0.86);
}
.btn-ghost:hover {
  background-image: var(--skin-btn-ghost-hover);
  filter: brightness(1.06);
}
.btn-ghost:active { background-image: var(--skin-btn-ghost-pressed); }
.btn-ghost:disabled, .btn-ghost[disabled] { opacity: 0.72; filter: none; }

.btn-icon {
  position: relative;
  padding-left: 38px;
}
.btn-icon::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: no-repeat center / contain;
  opacity: 0.9;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
}
.btn-refresh::before { background-image: var(--icon-refresh); }
.btn-filter::before { background-image: var(--icon-filter); }

.check {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-weight: 750;
  user-select: none;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.10);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease, transform 120ms ease;
}
.check:hover {
  background: rgba(215, 134, 45, 0.08);
  border-color: rgba(215, 134, 45, 0.18);
}
.check input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.check span {
  position: relative;
  padding-left: 28px;
  line-height: 1.1;
}
.check span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  background: no-repeat center / contain;
  background-image: var(--skin-checkbox-off);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.65));
  opacity: 0.95;
}
.check input:checked + span::before { background-image: var(--skin-checkbox-on); }
.check input:focus-visible + span::before { box-shadow: 0 0 0 3px rgba(215, 134, 45, 0.18); border-radius: 6px; }

.sort { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.sort label.muted { font-size: 12px; font-weight: 850; }
.select {
  height: 44px;
  padding: 0 40px 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: var(--skin-input-normal), var(--skin-select-cap);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, auto 100%;
  background-position: 0 0, right center;
  background-color: transparent;
  color: var(--text);
  outline: none;
  cursor: pointer;
  transition: box-shadow 140ms ease, filter 140ms ease;
}
.select:focus {
  background-image: var(--skin-input-focus), var(--skin-select-cap);
  box-shadow: 0 0 0 3px rgba(215, 134, 45, 0.18);
}

.table-wrap {
  margin: 0 12px 12px;
  padding: 12px;
  border: 10px solid transparent;
  border-image-source: var(--skin-frame-plain);
  border-image-slice: 26;
  border-image-repeat: stretch;
  border-radius: 12px;
  background-image:
    var(--skin-panel-tile),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.20));
  background-repeat: repeat, no-repeat;
  background-size: 256px 256px, auto;
  background-position: 0 0, 0 0;
  background-blend-mode: overlay, normal;
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.65);
}
.table-frame {
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-image:
    var(--skin-panel-tile),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18));
  background-repeat: repeat, no-repeat;
  background-size: 256px 256px, auto;
  background-position: 0 0, 0 0;
  background-blend-mode: overlay, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.65);
  scrollbar-width: thin;
  scrollbar-color: rgba(215, 134, 45, 0.35) rgba(0, 0, 0, 0.35);
}
.table-frame::-webkit-scrollbar { height: 10px; width: 10px; }
.table-frame::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
}
.table-frame::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(215, 134, 45, 0.42), rgba(0, 0, 0, 0.55));
  border: 2px solid rgba(0, 0, 0, 0.65);
  border-radius: 999px;
}
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: rgba(0, 0, 0, 0.14); }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.table th {
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background-image:
    var(--skin-header-tile),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.38));
  background-repeat: repeat-x, no-repeat;
  background-size: 256px 64px, auto;
  background-position: 0 0, 0 0;
  background-blend-mode: overlay, normal;
  border-bottom: 1px solid rgba(215, 134, 45, 0.28);
}
.table thead th { position: sticky; top: 0; z-index: 2; }
.table tbody tr {
  background-image: var(--skin-row-tile);
  background-repeat: repeat-x;
  background-size: 256px 100%;
  background-position: 0 0;
  background-color: rgba(0, 0, 0, 0.10);
  transition: background-color 140ms ease, box-shadow 140ms ease;
}
.table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.02); }
.table tbody tr:hover {
  background-color: rgba(215, 134, 45, 0.10);
  box-shadow: inset 0 0 0 1px rgba(215, 134, 45, 0.22);
}
.table td.num, .table th.num { text-align: right; }
.table td.name { font-weight: 800; }
.status {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.72);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.28), transparent 48%),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12));
  vertical-align: -4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.55),
    0 8px 18px rgba(0,0,0,0.35);
}
.status-online {
  background-color: rgba(85, 214, 162, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.55),
    0 0 14px rgba(85, 214, 162, 0.25);
}
.status-empty { background-color: rgba(232, 227, 217, 0.65); opacity: 0.9; }
.status-offline {
  background-color: rgba(255, 107, 107, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.55),
    0 0 14px rgba(255, 107, 107, 0.20);
}

.players {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.players-text { line-height: 1; }
.players-bar {
  width: 120px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.65);
  overflow: hidden;
}
.players-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(85, 214, 162, 0.92), rgba(255, 179, 90, 0.92));
}
.players-fill-full { background: linear-gradient(90deg, rgba(255, 107, 107, 0.92), rgba(255, 179, 90, 0.92)); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.link { color: var(--accent-2); text-decoration: none; }
.link:hover { text-decoration: underline; }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.65);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.badge-ok { border-color: rgba(85,214,162,0.35); color: var(--ok); background: rgba(85,214,162,0.08); }
.badge-warn { border-color: rgba(215, 134, 45, 0.45); color: var(--accent-2); background: rgba(215, 134, 45, 0.12); }
.badge-muted { color: var(--muted); background: rgba(255,255,255,0.02); }

.flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  width: 1.6em;
  margin-right: 6px;
}
.flag-muted { opacity: 0.45; }
.table td.loc { width: 68px; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 12px 12px;
  padding: 12px 12px 14px;
  border: 10px solid transparent;
  border-image-source: var(--skin-frame-plain);
  border-image-slice: 26;
  border-image-repeat: stretch;
  border-radius: 12px;
  background-image:
    var(--skin-panel-tile),
    linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.22));
  background-repeat: repeat, no-repeat;
  background-size: 256px 256px, auto;
  background-position: 0 0, 0 0;
  background-blend-mode: overlay, normal;
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.65);
}
.pager-actions { display: flex; align-items: center; gap: 10px; }
.pager-info { color: var(--muted); font-weight: 800; }

.empty { text-align: center; padding: 28px 14px; color: var(--muted); }

.flash-wrap { margin-top: 14px; display: grid; gap: 10px; }
.flash {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.22);
}
.flash-success { border-color: rgba(85,214,162,0.35); }
.flash-error { border-color: rgba(255,107,107,0.35); }

.notice {
  margin: 12px;
  padding: 12px 14px;
  border: 10px solid transparent;
  border-image-source: var(--skin-frame-plain);
  border-image-slice: 26;
  border-image-repeat: stretch;
  border-radius: 14px;
  background-image:
    var(--skin-panel-tile),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.22));
  background-repeat: repeat, no-repeat;
  background-size: 256px 256px, auto;
  background-position: 0 0, 0 0;
  background-blend-mode: overlay, normal;
  background-clip: padding-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.notice-title { font-weight: 900; margin-bottom: 6px; }
.notice-body { color: var(--muted); font-size: 13px; line-height: 1.35; }
.notice-warn { border-image-source: var(--skin-frame-accent); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 14px 14px;
}
.stat {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-image:
    var(--skin-panel-tile),
    linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.22));
  background-repeat: repeat, no-repeat;
  background-size: 256px 256px, auto;
  background-position: 0 0, 0 0;
  background-blend-mode: overlay, normal;
  border-radius: 12px;
  padding: 10px 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.65);
}
.stat-k {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.stat-v { margin-top: 6px; font-weight: 950; }

.side-list {
  list-style: none;
  margin: 0;
  padding: 4px 10px 12px;
}
.side-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background-image: var(--skin-row-tile);
  background-repeat: repeat-x;
  background-size: 256px 100%;
  background-position: 0 0;
  background-color: rgba(0, 0, 0, 0.10);
}
.side-item:first-child { border-top: 0; }
.side-item:hover { background-color: rgba(215, 134, 45, 0.08); }
.side-rank {
  width: 18px;
  flex-shrink: 0;
  color: rgba(232, 227, 217, 0.55);
  font-weight: 900;
  line-height: 1.2;
  margin-top: 1px;
}
.side-main { min-width: 0; flex: 1; }
.side-title { font-weight: 950; line-height: 1.25; }
.side-link {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-sub {
  margin-top: 4px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-meta { flex-shrink: 0; }
.side-meta .flag { margin-right: 0; }
.side-empty {
  padding: 12px 14px 14px;
  list-style: none;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 18px 18px;
}
.kv {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-image:
    var(--skin-panel-tile),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.22));
  background-repeat: repeat, no-repeat;
  background-size: 256px 256px, auto;
  background-position: 0 0, 0 0;
  background-blend-mode: overlay, normal;
  border-radius: 14px;
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.65);
}
.k { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.v { margin-top: 8px; font-weight: 750; }

.divider {
  height: 1px;
  margin: 0 18px;
  background: rgba(255, 255, 255, 0.08);
}

.hist {
  padding: 14px 18px 18px;
}
.hist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hist-title { font-weight: 900; }
.hist-body { margin-top: 12px; display: grid; gap: 8px; }
.hist-row { display: flex; align-items: center; gap: 12px; }
.hist-day { width: 92px; color: var(--muted); font-size: 12px; }
.hist-bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.hist-bar-inner {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(102, 192, 244, 0.85), rgba(85, 214, 162, 0.85));
}
.hist-num { width: 48px; text-align: right; }

.hist-metrics { display: flex; gap: 10px; align-items: stretch; flex-shrink: 0; }
.metric {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-image:
    var(--skin-panel-tile),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.22));
  background-repeat: repeat, no-repeat;
  background-size: 256px 256px, auto;
  background-position: 0 0, 0 0;
  background-blend-mode: overlay, normal;
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 140px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.65);
}
.metric-k { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: 0.4px; text-transform: uppercase; }
.metric-v { margin-top: 6px; font-weight: 900; font-size: 18px; }
.metric-s { margin-top: 4px; }

.chart-wrap {
  position: relative;
  margin-top: 12px;
}
.chart-canvas {
  width: 100%;
  height: 240px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-image:
    var(--skin-panel-tile),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.20));
  background-repeat: repeat, no-repeat;
  background-size: 256px 256px, auto;
  background-position: 0 0, 0 0;
  background-blend-mode: overlay, normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.65);
}
.chart-tip {
  position: absolute;
  z-index: 2;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0, 0, 0, 0.78);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
  backdrop-filter: blur(6px);
}

.footer {
  margin: 30px 0 18px;
  color: var(--muted);
  font-size: 12px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
}

@media (max-width: 760px) {
  body { background-attachment: scroll, scroll, scroll, scroll; }
  .toolbar-row { flex-wrap: wrap; }
  .toolbar-filters { grid-template-columns: 1fr; }
  .toolbar-actions { width: 100%; }
  .grid { grid-template-columns: 1fr; }
  .sort { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
}

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