/* pz-panel — tema dark custom (ver skill dataviz / src/theme.ts para a paleta) */

:root {
  --surface-page: #0b0e13;
  --surface-card: #141821;
  --surface-card-alt: #1a2029;
  --surface-hover: #1f2631;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #7d8590;
  --gridline: #2c2c2a;

  --good: #0ca30c;
  --good-bg: rgba(12, 163, 12, 0.14);
  --warning: #fab219;
  --warning-bg: rgba(250, 178, 25, 0.14);
  --serious: #ec835a;
  --serious-bg: rgba(236, 131, 90, 0.14);
  --critical: #d03b3b;
  --critical-bg: rgba(208, 59, 59, 0.16);
  --blue: #3987e5;
  --blue-bg: rgba(57, 135, 229, 0.14);

  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 7px;
  --sidebar-w: 248px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
[x-cloak] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0 0 0.5rem 0; font-weight: 700; }
p { margin: 0 0 0.75rem 0; }
.muted { color: var(--text-muted); }

/* ---------------------------------------------------------------- shell */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand { display: flex; align-items: center; gap: 0.65rem; padding: 0 0.4rem 1.5rem 0.4rem; }
.brand-badge {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--good-bg); color: var(--good);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(12,163,12,0.3);
}
.brand-badge i { width: 20px; height: 20px; }
.brand-title { font-weight: 700; font-size: 1rem; color: var(--text-primary); }
.brand-subtitle { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

.sidebar-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.7rem; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-weight: 500; font-size: 0.88rem;
  border-left: 3px solid transparent;
}
.sidebar-nav a i { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-nav a:hover { background: var(--surface-hover); color: var(--text-primary); }
.sidebar-nav a.active {
  background: var(--good-bg); color: var(--good);
  border-left: 3px solid var(--good);
  font-weight: 600;
}

.sidebar-footer { margin-top: auto; padding: 0.75rem 0.4rem 0 0.4rem; border-top: 1px solid var(--border); }
.sidebar-footer-label { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 0.5rem; }
.sidebar-version { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; color: var(--text-muted); }
.dot-online { width: 8px; height: 8px; border-radius: 999px; background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1.5rem;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border);
}
.topbar-title { flex: 1; min-width: 0; }
.topbar-title-row { display: flex; align-items: center; gap: 0.6rem; }
.topbar-title h1 { font-size: 1.15rem; }
.topbar-title p { margin: 0; font-size: 0.78rem; color: var(--text-muted); }

.topbar-user { position: relative; }
.user-chip {
  display: flex; align-items: center; gap: 0.55rem;
  background: none; border: none; padding: 0.3rem 0.4rem; border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.user-chip:hover { background: var(--surface-hover); }
.user-chip i { width: 16px; height: 16px; color: var(--text-muted); }
.avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(135deg, var(--good), #0a7a0a);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #06280a; font-size: 0.85rem;
}
.user-info { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.user-info strong { font-size: 0.82rem; }
.user-info small { color: var(--text-muted); font-size: 0.7rem; }
.user-menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem);
  background: var(--surface-card-alt); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 0.35rem; min-width: 140px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
.user-menu form { margin: 0; }
.user-menu button {
  width: 100%; display: flex; align-items: center; gap: 0.5rem;
  background: none; border: none; color: var(--text-secondary);
  padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); text-align: left; font-size: 0.85rem;
}
.user-menu button:hover { background: var(--surface-hover); color: var(--text-primary); }
.user-menu i { width: 16px; height: 16px; }

.icon-btn { background: none; border: none; color: var(--text-secondary); padding: 0.3rem; border-radius: var(--radius-sm); }
.icon-btn i { width: 20px; height: 20px; }
.only-mobile { display: none; }

.content { padding: 1.5rem; flex: 1; min-width: 0; }
.content > h2:first-child, .content > h3:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- status */
.status-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.65rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.status-ONLINE { background: var(--good-bg); color: var(--good); }
.status-OFFLINE { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.status-STARTING, .status-RESTARTING, .status-UPDATING, .status-BACKING_UP, .status-STOPPING { background: var(--warning-bg); color: var(--warning); }
.status-ERROR { background: var(--critical-bg); color: var(--critical); }

.health-ok, .text-good { color: var(--good); }
.health-warning, .text-warning { color: var(--warning); }
.health-critical, .text-critical { color: var(--critical); }
.text-blue { color: var(--blue); }

/* ---------------------------------------------------------------- grids & cards */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem; margin-bottom: 1.25rem; }
.card-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.card-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }

.card, .metric-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
}
.card-danger { border-color: rgba(208, 59, 59, 0.35); background: linear-gradient(180deg, rgba(208, 59, 59, 0.06), var(--surface-card) 60px); }
.card-danger .card-header i { color: var(--critical); }
.card-header { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.85rem; }
.card-header i { width: 17px; height: 17px; color: var(--text-muted); }
.card-header h3 { margin: 0; font-size: 0.92rem; }
.card-header .spacer { flex: 1; }
.card-header .see-all { font-size: 0.75rem; color: var(--good); }

.metric-card { display: flex; flex-direction: column; gap: 0.55rem; }
.metric-card-top { display: flex; align-items: center; justify-content: space-between; }
.metric-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-card-alt); color: var(--text-muted);
}
.metric-icon i { width: 16px; height: 16px; }
.metric-icon.icon-good { background: var(--good-bg); color: var(--good); }
.metric-icon.icon-blue { background: var(--blue-bg); color: var(--blue); }
.metric-icon.icon-warning { background: var(--warning-bg); color: var(--warning); }
.metric-label { font-size: 0.74rem; color: var(--text-muted); }
.metric-value { font-size: 1.4rem; font-weight: 700; }
.metric-sub { font-size: 0.72rem; color: var(--text-muted); }
.metric-chart { margin-top: -0.25rem; }

.progress-track { height: 6px; border-radius: 999px; background: var(--surface-card-alt); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: var(--good); }
.progress-fill.blue { background: var(--blue); }
.progress-fill.warning { background: var(--warning); }
.progress-fill.critical { background: var(--critical); }

/* ---------------------------------------------------------------- kv list */
.kv-list { display: flex; flex-direction: column; }
.kv-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.kv-row:last-child { border-bottom: none; padding-bottom: 0; }
.kv-row .k { color: var(--text-muted); }
.kv-row .v { font-weight: 600; }

/* ---------------------------------------------------------------- players list */
.player-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.player-row:last-child { border-bottom: none; padding-bottom: 0; }
.avatar-sm {
  width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
  background: var(--surface-card-alt); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem;
  position: relative;
}
.avatar-sm .dot { position: absolute; bottom: -1px; right: -1px; width: 9px; height: 9px; border-radius: 999px; background: var(--good); border: 2px solid var(--surface-card); }
.player-meta { flex: 1; min-width: 0; }
.player-meta .name { font-weight: 600; font-size: 0.85rem; }
.player-meta .since { font-size: 0.72rem; color: var(--text-muted); }
.player-row i.signal { width: 16px; height: 16px; color: var(--good); }

/* ---------------------------------------------------------------- activity feed */
.activity-list { display: flex; flex-direction: column; gap: 0.1rem; }
.activity-row { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.45rem 0; }
.activity-time { font-size: 0.72rem; color: var(--text-muted); width: 42px; flex-shrink: 0; padding-top: 0.15rem; font-variant-numeric: tabular-nums; }
.activity-icon {
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  background: var(--surface-card-alt); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
}
.activity-icon i { width: 12px; height: 12px; }
.activity-icon.ok { background: var(--good-bg); color: var(--good); }
.activity-icon.warn { background: var(--warning-bg); color: var(--warning); }
.activity-text { font-size: 0.82rem; padding-top: 0.1rem; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.65rem 1rem; border-radius: var(--radius-md);
  border: 1px solid transparent; font-weight: 600; font-size: 0.85rem;
  background: var(--surface-card-alt); color: var(--text-primary);
}
.btn i { width: 16px; height: 16px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-good { background: var(--good); color: #052905; }
.btn-blue { background: var(--blue); color: #08172c; }
.btn-critical { background: var(--critical); color: #2c0a0a; }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text-secondary); }
.btn-outline-critical { background: transparent; border-color: rgba(208,59,59,0.5); color: var(--critical); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.72rem; }

.action-bar { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }
.action-bar .btn { flex: 1; min-width: 150px; }

.control-hero {
  display: grid; grid-template-columns: minmax(240px, 1fr) auto; align-items: center; gap: 1rem;
  margin-bottom: 1rem; padding: 1.25rem 1.35rem; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(12,163,12,0.14), rgba(57,135,229,0.08) 55%, var(--surface-card));
  border: 1px solid rgba(12,163,12,0.25);
}
.control-hero h2 { margin: 0.15rem 0 0.25rem; font-size: 1.35rem; }
.control-hero p { margin: 0; color: var(--text-muted); }
.eyebrow { color: var(--good); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.primary-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.primary-actions .btn { min-width: 112px; }
.action-feedback { grid-column: 1 / -1; min-height: 1.25rem; margin: 0; color: var(--text-secondary); font-size: 0.8rem; }
.permission-note { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-muted); font-size: 0.78rem; }
.permission-note i { width: 14px; height: 14px; }
.managed-user { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.managed-user:last-child { border-bottom: 0; }
.managed-user div { display: flex; flex-direction: column; }
.managed-user small { color: var(--text-muted); }
.empty-access { text-align: center; padding: 3rem; }
.empty-access > i { width: 40px; height: 40px; color: var(--warning); margin-bottom: 0.8rem; }

/* ---------------------------------------------------------------- forms & tables */
label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.85rem; }
input[type="text"], input[type="password"], select, textarea {
  background: var(--surface-card-alt); border: 1px solid var(--border-strong);
  color: var(--text-primary); padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(57,135,229,0.5); outline-offset: 1px; }

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.compact th, table.compact td { padding: 0.5rem 0.6rem; text-align: left; border-bottom: 1px solid var(--border); }
table.compact th { color: var(--text-muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }

.badge {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
  background: var(--surface-card-alt); color: var(--text-secondary); font-size: 0.7rem;
}

.log-pane {
  background: #05070a; color: #c9d1d9;
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.78rem;
  padding: 1rem; border-radius: var(--radius-md); height: 60vh; overflow-y: auto; white-space: pre-wrap;
  border: 1px solid var(--border);
}
.log-line-error { color: #ff9b93; }
.log-line-warn { color: #f0c374; }

/* ---------------------------------------------------------------- game console */
.console-card { padding: 0; overflow: hidden; }
.console-card .card-header { margin: 0; padding: .8rem 1rem; background: rgba(7,11,9,.88); }
.console-connection { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-muted); font: .68rem Consolas, monospace; }
.console-connection span { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 7px var(--good); }
.console-help { padding: .55rem 1rem; color: var(--text-muted); font-size: .75rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.console-help button { margin-left: .3rem; padding: .16rem .4rem; color: #9eea8d; background: rgba(79,216,62,.08); border: 1px solid rgba(79,216,62,.2); border-radius: 3px; font: .7rem Consolas, monospace; }
.console-output { height: min(58vh, 610px); min-height: 360px; padding: 1rem; overflow: auto; background: rgba(1,4,3,.92); font: .82rem/1.55 Consolas, "SFMono-Regular", monospace; }
.console-line { color: #d7ddd5; white-space: pre-wrap; overflow-wrap: anywhere; }
.console-line > span { color: var(--good); }
.console-line.system { color: #89958b; margin-bottom: .8rem; }
.console-line.command { margin-top: .7rem; color: #e9eee8; }
.console-line.command code { color: #f2efe2; }
.console-response { margin: .18rem 0 0 1.15rem; color: #98cf91; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.console-response.error { color: #ef7469; }
.console-form { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .72rem 1rem; background: #080d0b; border-top: 1px solid rgba(166,143,104,.25); }
.console-prompt { color: var(--good); font: 700 1rem Consolas, monospace; }
.console-form input { width: 100%; margin: 0; background: transparent; border: 0; outline: 0; color: #f0eee5; font: .88rem Consolas, monospace; }

/* ---------------------------------------------------------------- admin tools */
.tools-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .1rem 0 .7rem; }
.tools-heading h2 { margin: .1rem 0; font-family: Impact, "Arial Narrow", sans-serif; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.tools-heading .badge { display: inline-flex; align-items: center; gap: .35rem; }
.tools-heading .badge i { width: 13px; height: 13px; color: var(--good); }
.admin-tools-grid { display: grid; grid-template-columns: repeat(2, minmax(300px,1fr)); gap: .65rem; }
.tool-card form { display: grid; grid-template-columns: repeat(2,minmax(140px,1fr)); gap: .75rem; align-items: end; }
.tool-card form label, .item-picker-filters label {
  margin: 0; gap: .42rem; color: #95a79c; font-size: .66rem; font-weight: 650;
  letter-spacing: .075em; text-transform: uppercase;
}
.tool-card input, .tool-card select, .item-picker-filters input, .item-picker-filters select {
  width: 100%; min-height: 42px; padding: .62rem .72rem; color: #edf2ee;
  background: rgba(3,12,9,.68); border: 1px solid rgba(167,198,178,.17); border-radius: 7px;
  box-shadow: inset 0 1px 6px rgba(0,0,0,.18); text-transform: none; letter-spacing: 0;
}
.tool-card input:hover, .tool-card select:hover, .item-picker-filters input:hover, .item-picker-filters select:hover { border-color: rgba(167,198,178,.3); }
.tool-card input:focus, .tool-card select:focus, .item-picker-filters input:focus, .item-picker-filters select:focus {
  border-color: rgba(88,223,102,.65); outline: 3px solid rgba(88,223,102,.09); box-shadow: none;
}
.tool-card input::placeholder, .item-picker-filters input::placeholder { color: #52645a; }
.tool-card form .btn { min-height: 42px; grid-column: 1 / -1; }
.tool-card .tool-secondary-form { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.08); }
.tool-result { position: sticky; bottom: .5rem; margin: .65rem 0 0; padding: .65rem .8rem; background: rgba(5,10,7,.94); border: 1px solid rgba(166,143,104,.3); border-radius: 4px; box-shadow: 0 5px 18px rgba(0,0,0,.35); }
.item-picker-field { display: grid; grid-template-columns: 1fr auto; gap: .45rem; }
.item-picker-field .btn { min-width: 104px; padding: .5rem .7rem; white-space: nowrap; }
.item-modal { align-items: center; padding: 2vh 1rem; backdrop-filter: blur(7px); }
.item-picker-modal { max-width: 900px; height: min(790px, 92vh); display: flex; flex-direction: column; padding: 1.15rem; background: linear-gradient(145deg, rgba(10,24,19,.99), rgba(5,14,11,.99)); border-color: rgba(166,194,177,.25); border-radius: 13px; box-shadow: 0 30px 90px #000; }
.item-picker-modal .modal-header { flex: 0 0 auto; margin-bottom: .75rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(185,207,193,.12); }
.item-picker-modal .modal-header h2 { margin: .05rem 0 0; font-size: 1.15rem; }
.item-picker-filters { display: grid; grid-template-columns: 1.5fr 1fr; gap: .75rem; padding: .7rem; background: rgba(1,9,6,.34); border: 1px solid rgba(185,207,193,.08); border-radius: 9px; }
.item-picker-summary { display: flex; justify-content: space-between; padding: .6rem .2rem .45rem; color: var(--text-muted); font-size: .68rem; border-bottom: 1px solid rgba(185,207,193,.1); }
.item-picker-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .35rem .15rem .35rem 0; }
.item-option { width: 100%; display: grid; grid-template-columns: auto minmax(180px,1fr) auto; align-items: center; gap: .75rem; padding: .68rem .72rem; text-align: left; color: var(--text-primary); background: transparent; border: 1px solid transparent; border-bottom-color: rgba(185,207,193,.07); border-radius: 7px; }
.item-option:hover, .item-option:focus { background: rgba(88,223,102,.065); border-color: rgba(88,223,102,.15); outline: 0; }
.item-option-icon { display: grid; place-items: center; width: 35px; height: 35px; color: var(--premium-green); background: rgba(88,223,102,.09); border: 1px solid rgba(88,223,102,.12); border-radius: 8px; }
.item-option-icon i { width: 17px; height: 17px; }
.item-option > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.item-option strong { color: #edf2ee; font-size: .82rem; font-weight: 650; }
.item-option code { color: #81938a; font-size: .68rem; overflow: hidden; text-overflow: ellipsis; }
.item-option-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.item-option-meta small { color: #b5c2ba; font-size: .67rem; }
.item-option-meta em { color: #63736a; font-size: .61rem; font-style: normal; }
.item-picker-note { margin: .45rem 0 0; font-size: .7rem; }

/* Formulários administrativos: hierarquia limpa e compacta. */
.tool-card form,
.game-admin-grid form,
#backup-create-form {
  gap: .7rem;
}
.tool-card form label,
.game-admin-grid form label,
#backup-create-form label,
.item-picker-filters label {
  position: relative;
  margin: 0;
  gap: .38rem;
  color: #c2cec6;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
.tool-card form label > small,
.game-admin-grid form label > small,
#backup-create-form label > small {
  margin-top: -.12rem;
  color: #718078;
  font-size: .68rem;
  font-weight: 400;
  line-height: 1.35;
}
.tool-card input,
.tool-card select,
.game-admin-grid input,
.game-admin-grid select,
#backup-create-form input,
#backup-create-form select,
.item-picker-filters input,
.item-picker-filters select {
  min-height: 44px;
  width: 100%;
  padding: .65rem .78rem;
  color: #f0f4f1;
  background: linear-gradient(180deg, rgba(7,18,14,.92), rgba(4,13,10,.92));
  border: 1px solid rgba(170,196,180,.2);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 1px 2px rgba(0,0,0,.25);
  font-size: .84rem;
  font-weight: 450;
}
.tool-card input:focus,
.tool-card select:focus,
.game-admin-grid input:focus,
.game-admin-grid select:focus,
#backup-create-form input:focus,
#backup-create-form select:focus,
.item-picker-filters input:focus,
.item-picker-filters select:focus {
  border-color: rgba(88,223,102,.65);
  outline: 3px solid rgba(88,223,102,.1);
  box-shadow: 0 0 0 1px rgba(88,223,102,.08);
}
.game-admin-grid form > .action-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin: 0;
}
.game-admin-grid form > .action-bar label {
  min-width: 0;
}
.game-admin-grid form > .action-bar .btn {
  min-width: 0;
}
.game-admin-grid .tool-secondary-form {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(170,196,180,.12);
}
#backup-create-form {
  padding: .85rem;
  background: rgba(3,11,8,.32);
  border: 1px solid rgba(170,196,180,.1);
  border-radius: 9px;
  align-items: end;
}
#backup-create-form .btn { min-height: 44px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }

details { margin-top: 1rem; }
summary { cursor: pointer; color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 0.5rem; }

/* ---------------------------------------------------------------- login */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--surface-page); }
.login-card { width: 100%; max-width: 380px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; }
.login-card .brand-badge { margin: 0 auto 1rem auto; width: 48px; height: 48px; }
.login-card .brand-badge i { width: 26px; height: 26px; }
.login-error { color: var(--critical); font-size: 0.85rem; background: var(--critical-bg); padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); }

/* ---------------------------------------------------------------- mapa */
.map-svg-wrap { border-radius: var(--radius-md); overflow: hidden; line-height: 0; }
.map-svg-wrap svg text { pointer-events: none; }
.map-legend { display: flex; gap: 1.1rem; margin-top: 0.75rem; font-size: 0.75rem; color: var(--text-secondary); }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 0.35rem; vertical-align: middle; }
.map-stale-banner {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem;
  background: var(--warning-bg); color: var(--warning); padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm); margin-bottom: 0.75rem;
}
.map-stale-banner i { width: 15px; height: 15px; flex-shrink: 0; }
.map-empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.35rem; padding: 2.5rem 1rem; color: var(--text-secondary);
}
.map-empty-state i { width: 30px; height: 30px; color: var(--text-muted); margin-bottom: 0.4rem; }
.map-empty-state p { margin: 0; max-width: 480px; }

/* ---------------------------------------------------------------- modal (detalhe do jogador) */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(5, 7, 10, 0.72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 1rem; z-index: 50; overflow-y: auto;
}
.modal-card {
  width: 100%; max-width: 560px; background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.25rem; max-height: 92vh; overflow-y: auto;
}
.modal-header { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; }
.modal-body { display: flex; flex-direction: column; gap: 1.1rem; }
.modal-section-title {
  display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.82rem;
  color: var(--text-secondary); margin-bottom: 0.55rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.modal-section-title i { width: 15px; height: 15px; }

.progress-track-fill-custom { height: 100%; border-radius: 999px; }

.body-part-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.55rem 1rem; }
.body-part-row { display: flex; flex-direction: column; gap: 0.25rem; }
.body-part-name { font-size: 0.74rem; color: var(--text-secondary); display: flex; justify-content: space-between; }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.chip {
  background: var(--surface-card-alt); color: var(--text-secondary);
  font-size: 0.72rem; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid var(--border);
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 20;
    transform: translateX(-100%); transition: transform 0.2s ease;
    box-shadow: 20px 0 40px rgba(0,0,0,0.4);
  }
  .sidebar.sidebar-open { transform: translateX(0); }
  .only-mobile { display: flex; }
  .content { padding: 1rem; }
  .control-hero { grid-template-columns: 1fr; }
  .primary-actions { justify-content: stretch; }
  .primary-actions .btn { flex: 1; }
}

/* ========================================================== SURVIVOR THEME */
:root {
  --surface-page: #080b0a;
  --surface-card: rgba(18, 23, 21, 0.94);
  --surface-card-alt: rgba(8, 13, 12, 0.92);
  --surface-hover: rgba(76, 205, 58, 0.10);
  --border: rgba(166, 143, 104, 0.24);
  --border-strong: rgba(184, 142, 88, 0.50);
  --text-primary: #f0eee5;
  --text-secondary: #c5c8c0;
  --text-muted: #8d948e;
  --good: #4fd83e;
  --good-bg: rgba(79, 216, 62, 0.12);
  --blue: #54a2ff;
  --radius-lg: 7px;
  --radius-md: 5px;
  --radius-sm: 4px;
  --sidebar-w: 238px;
}

body {
  background:
    linear-gradient(rgba(5, 8, 7, 0.79), rgba(5, 8, 7, 0.90)),
    url('/public/images/survivor-bg.jpg') center / cover fixed;
  font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: overlay;
}
.app-shell { background: rgba(5, 8, 7, 0.24); }

.sidebar {
  background:
    linear-gradient(180deg, rgba(10,14,12,.96), rgba(7,10,9,.98)),
    url('/public/images/survivor-bg.jpg') left center / auto 100% fixed;
  border-right: 1px solid rgba(154, 113, 65, .35);
  box-shadow: 8px 0 30px rgba(0,0,0,.52), inset -1px 0 rgba(255,255,255,.025);
  padding: 1.45rem .9rem;
}
.sidebar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 55%, rgba(151,81,32,.07));
}
.sidebar-brand { position: relative; z-index: 1; padding: 0 .65rem 2rem; gap: .7rem; }
.brand-badge {
  width: 31px; height: 42px; border: 0; border-radius: 2px;
  color: #8d744f; background: transparent; opacity: .72;
}
.brand-badge i { width: 28px; height: 28px; }
.brand-title {
  font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.58rem; line-height: 1;
  letter-spacing: .035em; color: #e8e3d5; text-shadow: 0 2px 2px #000;
}
.brand-title span { color: #a82924; }
.brand-subtitle { margin-top: .32rem; font-size: .68rem; letter-spacing: .12em; color: #bbb7aa; }
.sidebar-nav { position: relative; z-index: 1; gap: .35rem; }
.sidebar-nav a {
  padding: .78rem .85rem; border: 1px solid transparent; border-left: 3px solid transparent;
  font-size: .92rem; color: #deddd5; text-shadow: 0 1px #000;
}
.sidebar-nav a i { width: 21px; height: 21px; color: #e8e5dc; }
.sidebar-nav a.active {
  background: linear-gradient(90deg, rgba(61,141,48,.25), rgba(38,83,34,.16));
  color: #a7ef78; border: 1px solid rgba(83, 177, 67, .40); border-left: 3px solid #61de49;
  box-shadow: inset 0 0 16px rgba(59,152,45,.1), 0 0 10px rgba(0,0,0,.35);
}
.sidebar-nav a.active i { color: #e9eee0; }
.sidebar-footer { position: relative; z-index: 1; color: #aaa89f; border-color: rgba(166,143,104,.18); }

.topbar {
  min-height: 92px; padding: .75rem 1.35rem; border-bottom: 1px solid rgba(143, 103, 58, .42);
  background:
    linear-gradient(90deg, rgba(7,11,10,.94), rgba(7,11,10,.62) 65%, rgba(7,11,10,.90)),
    url('/public/images/survivor-bg.jpg') center 20% / cover;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.topbar-title h1 { font-size: 1.25rem; letter-spacing: .02em; }
.topbar-title p { font-size: .8rem; color: #b8bab2; }
.user-chip {
  min-width: 180px; padding: .55rem .75rem; background: rgba(8,11,10,.74);
  border: 1px solid rgba(157, 116, 67, .45); box-shadow: inset 0 0 20px rgba(0,0,0,.28);
}
.user-chip:hover { background: rgba(20,27,23,.9); }
.avatar { background: linear-gradient(145deg, #66e34d, #2f9d2a); color: #10250d; box-shadow: 0 0 12px rgba(74,208,58,.24); }

.content { padding: .72rem .9rem 1rem; max-width: 1800px; width: 100%; margin: 0 auto; }
.card, .metric-card, .control-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 3px 3px, #151814 0 2px, #806343 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 3px) 3px, #151814 0 2px, #806343 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at 3px calc(100% - 3px), #151814 0 2px, #806343 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 3px) calc(100% - 3px), #151814 0 2px, #806343 2.5px 3.5px, transparent 4px),
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 38%),
    rgba(16, 21, 19, .94);
  border: 1px solid rgba(154, 116, 72, .54);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.34), inset 0 0 28px rgba(0,0,0,.30), 0 3px 12px rgba(0,0,0,.34);
}
.card::after, .metric-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(105deg, transparent 0 35px, rgba(173,108,53,.025) 36px 37px, transparent 38px 72px);
}
.card > *, .metric-card > * { position: relative; z-index: 1; }
.card-header { border-bottom: 1px solid rgba(204,197,175,.13); padding-bottom: .48rem; margin-bottom: .55rem; }
.card-header h3, .metric-label {
  font-family: Impact, "Arial Narrow", sans-serif; font-weight: 400; letter-spacing: .055em; text-transform: uppercase;
}
.card-header h3 { font-size: 1rem; color: #ece9dd; }
.card-header i { color: #e8e6dc; width: 20px; height: 20px; }

.metric-grid { grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: .58rem; margin-bottom: .62rem; }
.metric-card { min-height: 142px; padding: .72rem; gap: .32rem; justify-content: flex-start; }
.metric-card:nth-child(odd) { background-color: rgba(14,19,17,.96); }
.metric-icon { width: 38px; height: 38px; border-radius: 4px; border: 1px solid rgba(255,255,255,.06); }
.metric-icon i { width: 22px; height: 22px; }
.metric-icon.icon-good { color: var(--good); background: rgba(9,14,12,.82); }
.metric-icon.icon-blue, .metric-icon.icon-warning { color: #c9cbc5; background: rgba(9,14,12,.82); }
.metric-label { margin-top: .15rem; font-size: .77rem; color: #dedbd0; }
.metric-value { font-size: 1.45rem; margin-top: .05rem; }
.metric-sub { margin-top: auto; color: #aeb4ae; }
.progress-track { height: 7px; background: #303937; box-shadow: inset 0 1px 3px #000; }
.progress-fill, .progress-fill.blue { background: linear-gradient(90deg, #35c62d, #64e554); }

.card-grid-3 { grid-template-columns: 1.03fr 1.03fr 1.07fr; gap: .62rem; margin-bottom: .62rem; }
.card-grid-2 { gap: .62rem; margin-bottom: .62rem; }
.card { padding: .78rem; }
.kv-row { border-color: rgba(198,195,180,.14); background: rgba(2,6,5,.18); padding: .4rem .48rem; }
.kv-row .k { color: #b7bcb5; }
.activity-row { border-bottom: 1px solid rgba(198,195,180,.10); padding: .3rem 0; }
.activity-icon.ok { color: var(--good); background: transparent; }

.survival-controls {
  min-height: 0; grid-template-columns: 1fr auto; padding: .7rem 1rem; margin-bottom: .8rem;
  border-color: rgba(83,177,67,.35); background-color: rgba(11,17,14,.94);
}
.survival-controls h2 { font-size: 1.05rem; text-transform: uppercase; font-family: Impact, "Arial Narrow", sans-serif; letter-spacing: .05em; }
.survival-controls .eyebrow { font-size: .62rem; }
.survival-controls .action-feedback { display: none; }
.primary-actions .btn { padding: .58rem .9rem; }
.connection-card {
  display: grid; grid-template-columns: minmax(185px, .72fr) minmax(385px, 1.45fr) auto auto;
  align-items: center; gap: .7rem; margin-bottom: .58rem; padding: .52rem .72rem;
  background: linear-gradient(90deg, rgba(11,18,14,.97), rgba(18,25,21,.94));
  border: 1px solid rgba(83,177,67,.32); border-left: 3px solid var(--good); border-radius: 5px;
  box-shadow: inset 0 0 24px rgba(0,0,0,.28), 0 3px 12px rgba(0,0,0,.3);
}
.connection-heading { display: flex; align-items: center; gap: .7rem; }
.connection-heading > div { display: flex; flex-direction: column; }
.connection-heading strong { font-family: Impact, "Arial Narrow", sans-serif; font-weight: 400; letter-spacing: .04em; }
.connection-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--good); background: var(--good-bg); border: 1px solid rgba(79,216,62,.2); border-radius: 4px; }
.connection-icon i { width: 19px; height: 19px; }
.connection-values { display: grid; grid-template-columns: 1.35fr .65fr 1fr; gap: .6rem; }
.connection-values > div { display: flex; flex-direction: column; padding: .3rem .55rem; background: rgba(3,7,6,.42); border: 1px solid rgba(255,255,255,.06); border-radius: 3px; }
.connection-values small { color: var(--text-muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; }
.connection-values strong { margin-top: .12rem; font-size: .94rem; }
.mono { font-family: Consolas, "SFMono-Regular", monospace; }
.connection-live { display: inline-block; width: 6px; height: 6px; margin-left: .25rem; border-radius: 50%; background: var(--warning); }
.connection-live.online { background: var(--good); box-shadow: 0 0 6px var(--good); }
.connection-actions { display: flex; align-items: center; gap: .45rem; }
.connection-controls { display: flex; align-items: center; gap: .35rem; padding-left: .65rem; border-left: 1px solid rgba(255,255,255,.1); }
.connection-controls .btn { padding: .46rem .58rem; }
.connection-toggle { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; }
.connection-toggle i { width: 15px; height: 15px; }
.btn { border-radius: 4px; text-transform: uppercase; letter-spacing: .035em; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 2px 5px rgba(0,0,0,.3); }
.btn-good { background: linear-gradient(#54d943, #329f29); color: #071306; border-color: #67ef54; }
.btn-blue { background: linear-gradient(#455762, #28363d); color: #edf0ea; border-color: #63727a; }
.btn-critical { background: linear-gradient(#a93d34, #70241f); color: #fff1e9; border-color: #c75549; }
.btn-outline { border-color: rgba(170,145,106,.45); }
.admin-actions { margin-top: .62rem; }
.dashboard-feedback:empty { display: none; }
.dashboard-feedback { margin: -.25rem 0 .35rem; padding-left: .25rem; }
.monitor-summary { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:.7rem; margin-bottom:.7rem; }
.monitor-summary .card { display:flex; flex-direction:column; gap:.35rem; min-height:105px; }
.monitor-value { font-size:1.35rem; }
.monitor-grid { display:grid; grid-template-columns:repeat(2,minmax(280px,1fr)); gap:.7rem; }
.monitor-chart { min-height:190px; }
.monitor-chart svg { margin-top:.75rem; }
.log-live-state { display:flex; align-items:center; gap:.55rem; color:var(--text-muted); font-size:.82rem; }
.log-toolbar { margin-bottom:.7rem; }
.log-tabs { display:flex; flex-wrap:wrap; gap:.35rem; padding-bottom:.8rem; border-bottom:1px solid rgba(255,255,255,.08); }
.log-tabs button { border:1px solid transparent; background:transparent; color:#aeb8b1; border-radius:7px; padding:.5rem .72rem; cursor:pointer; }
.log-tabs button:hover,.log-tabs button.active { color:#eaf7eb; background:rgba(79,216,62,.12); border-color:rgba(79,216,62,.28); }
.log-filter-grid { display:grid; grid-template-columns:1.2fr .8fr .9fr 1fr 2fr; gap:.65rem; margin-top:.8rem; }
.log-search { min-width:220px; }
.log-actions { margin-top:.8rem; }
.log-actions .active { border-color:rgba(79,216,62,.55); color:var(--good); }
.log-console-card { padding-bottom:.65rem; }
.log-pane.enhanced { min-height:480px; max-height:65vh; padding:.55rem 0; background:#050806; border:1px solid rgba(79,216,62,.12); }
.log-row { display:grid; grid-template-columns:4px 1fr; gap:.65rem; padding:.18rem .7rem; color:#b8c1bb; font:12px/1.55 Consolas,"Cascadia Mono",monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.log-row:hover { background:rgba(255,255,255,.035); color:#edf2ee; }
.log-marker { background:transparent; border-radius:2px; }
.log-row.error { color:#ffaaa2; background:rgba(208,59,59,.07); }.log-row.error .log-marker{background:#d03b3b;}
.log-row.warn { color:#f4cb78; }.log-row.warn .log-marker{background:#fab219;}
.log-row.player .log-marker{background:#4fd83e;}
.log-footer { display:flex; justify-content:space-between; gap:1rem; color:var(--text-muted); font-size:.75rem; padding-top:.55rem; }
.permission-fieldset { border:1px solid rgba(255,255,255,.09); border-radius:8px; padding:.8rem; margin:.8rem 0; }
.permission-fieldset legend { color:var(--text-muted); padding:0 .35rem; font-size:.78rem; }
.permission-grid { display:grid; grid-template-columns:repeat(2,minmax(150px,1fr)); gap:.45rem; }
.permission-check { display:flex; align-items:center; gap:.5rem; padding:.52rem .6rem; border:1px solid rgba(255,255,255,.07); border-radius:6px; color:#c9d1cb; cursor:pointer; }
.permission-check:has(input:checked) { border-color:rgba(79,216,62,.35); background:rgba(79,216,62,.08); color:#eaf5eb; }
.permission-check input { width:auto; margin:0; accent-color:#4fd83e; }.permission-check.disabled{opacity:.65;cursor:default;}
.permission-user-list { display:flex; flex-direction:column; gap:.6rem; }.permission-user{border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:.6rem;}
.permission-editor { padding:.75rem 0 .25rem 3rem; }.permission-editor .btn{margin-top:.7rem;}

.status-pill { border: 1px solid currentColor; border-radius: 4px; padding: .22rem .7rem; box-shadow: inset 0 0 10px rgba(0,0,0,.3); }
.status-OFFLINE { color: #ee6c5f; background: rgba(149,44,37,.28); }
.status-ONLINE { color: #77ec63; background: rgba(42,126,35,.25); }
.login-shell { background: linear-gradient(rgba(4,7,6,.66), rgba(4,7,6,.86)), url('/public/images/survivor-bg.jpg') center / cover fixed; }
.login-card { border-color: rgba(154,116,72,.54); box-shadow: 0 24px 80px #000, inset 0 0 35px rgba(0,0,0,.28); }

@media (max-width: 1350px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(170px, 1fr)); }
  .connection-card { grid-template-columns: minmax(190px,.7fr) 1.4fr auto; }
  .connection-controls { grid-column: 1 / -1; justify-content: flex-end; padding: .45rem 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 1050px) {
  .card-grid-3 { grid-template-columns: 1fr 1fr; }
  .card-grid-3 > .card:last-child { grid-column: 1 / -1; }
  .connection-card { grid-template-columns: 1fr auto; }
  .connection-values { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 900px) {
  .topbar { min-height: 82px; padding: .75rem 1rem; }
  .user-chip { min-width: auto; }
  .user-info { display: none; }
  .survival-controls { grid-template-columns: 1fr; }
  .admin-tools-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .metric-grid, .card-grid-3, .card-grid-2 { grid-template-columns: 1fr; }
  .monitor-summary, .monitor-grid { grid-template-columns:1fr; }
  .log-filter-grid { grid-template-columns:1fr; }
  .permission-grid { grid-template-columns:1fr; }.permission-editor{padding-left:0;}
  .card-grid-3 > .card:last-child { grid-column: auto; }
  .metric-card { min-height: 145px; }
  .primary-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .primary-actions .btn { min-width: 0; padding: .55rem .35rem; font-size: .72rem; }
  .connection-card { grid-template-columns: 1fr; }
  .connection-values { grid-column: auto; grid-row: auto; grid-template-columns: 1fr; }
  .connection-actions { justify-content: stretch; }
  .connection-actions .btn { flex: 1; }
  .console-help { display: none; }
  .console-output { min-height: 55vh; }
  .console-form { grid-template-columns: auto 1fr; }
  .console-form .btn { grid-column: 1 / -1; }
  .tool-card form { grid-template-columns: 1fr; }
  .item-picker-filters { grid-template-columns: 1fr; }
  .item-option { grid-template-columns: auto 1fr; }
  .item-option-meta { grid-column: 2; align-items: flex-start; }
}

/* ====================================================== PREMIUM THEME V2 */
:root {
  --premium-green: #58df66;
  --premium-green-soft: rgba(88, 223, 102, .12);
  --premium-blue: #3f9cff;
  --premium-panel: rgba(10, 21, 18, .88);
  --premium-panel-solid: #0c1714;
  --premium-line: rgba(166, 194, 177, .18);
}

body {
  background:
    linear-gradient(90deg, rgba(5,13,11,.88), rgba(5,13,11,.73) 48%, rgba(5,13,11,.87)),
    url('/public/images/survivor-bg.jpg') center / cover fixed;
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  letter-spacing: 0;
}
body::before {
  background: radial-gradient(circle at 50% 0, rgba(69,130,91,.11), transparent 45%), linear-gradient(rgba(2,8,6,.08), rgba(2,8,6,.42));
  mix-blend-mode: normal;
}

.sidebar {
  width: var(--sidebar-w); padding: 1.55rem 1rem 1rem;
  background:
    linear-gradient(180deg, rgba(6,17,14,.91), rgba(5,14,12,.97)),
    url('/public/images/survivor-bg.jpg') 5% center / auto 100% fixed;
  border-right: 1px solid rgba(183,210,193,.17);
  box-shadow: 10px 0 40px rgba(0,0,0,.28);
}
.sidebar::after { background: linear-gradient(180deg, rgba(65,145,86,.04), transparent 35%, rgba(0,0,0,.16)); }
.sidebar-brand { padding: .25rem .65rem 2rem; justify-content: center; text-align: center; }
.brand-badge { display: none; }
.brand-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.72rem; letter-spacing: -.04em; text-transform: none; color: #e9e9df; }
.brand-title span { color: #5bd66b; }
.brand-subtitle { color: #b0b9b2; font-size: .56rem; letter-spacing: .23em; }
.sidebar-nav { gap: .18rem; }
.sidebar-nav a {
  min-height: 43px; padding: .62rem .75rem; border: 1px solid transparent; border-left-width: 3px;
  border-radius: 7px; color: #d5dad5; font-size: .83rem; text-shadow: none;
}
.sidebar-nav a i { width: 20px; height: 20px; color: #d4dad5; stroke-width: 2; }
.sidebar-nav a:hover { background: rgba(255,255,255,.035); }
.sidebar-nav a.active {
  color: #aaf2b2; background: linear-gradient(90deg, rgba(43,130,62,.28), rgba(35,91,47,.14));
  border-color: rgba(88,223,102,.08); border-left-color: var(--premium-green); box-shadow: none;
}
.sidebar-nav a.active i { color: #8be797; }
.sidebar-footer { margin: auto .45rem 0; padding: .9rem 0 0; }
.sidebar-version .dot-online { background: var(--premium-green); box-shadow: 0 0 0 4px rgba(88,223,102,.13), 0 0 10px rgba(88,223,102,.55); }

.topbar {
  position: relative; min-height: 126px; padding: .85rem 1.7rem;
  background:
    linear-gradient(90deg, rgba(7,18,15,.95), rgba(7,18,15,.60) 62%, rgba(7,18,15,.90)),
    url('/public/images/survivor-bg.jpg') center 24% / cover;
  border-bottom: 1px solid var(--premium-line); box-shadow: none;
}
.server-breadcrumb { display: flex; align-items: center; gap: .38rem; margin-bottom: .62rem; color: #85968d; font-size: .65rem; letter-spacing: .08em; }
.server-breadcrumb i { width: 12px; height: 12px; }
.server-breadcrumb strong { color: #b9c3bd; font-weight: 500; letter-spacing: 0; }
.topbar-title-row { gap: .8rem; }
.server-avatar {
  display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto; border-radius: 9px;
  color: #b8c8bd; background: linear-gradient(145deg, rgba(38,59,49,.76), rgba(9,19,16,.9)), url('/public/images/survivor-bg.jpg') left bottom / 190px auto;
  border: 1px solid rgba(164,195,175,.32); box-shadow: inset 0 0 20px rgba(0,0,0,.3);
}
.server-avatar i { width: 27px; height: 27px; filter: drop-shadow(0 2px 3px #000); }
.server-heading-copy { display: flex; flex-direction: column; gap: .2rem; }
.server-heading-copy > div { display: flex; align-items: center; gap: .65rem; }
.topbar-title h1 { margin: 0; font-size: 1.42rem; letter-spacing: -.02em; }
.topbar-title p { margin: 0; color: #a7b2ab; font-size: .75rem; }
.topbar .status-pill { font-size: .6rem; padding: .2rem .58rem; border: 0; border-radius: 999px; }
.user-chip { min-width: 178px; border: 0; background: transparent; box-shadow: none; }
.user-chip:hover { background: rgba(255,255,255,.035); }
.avatar { width: 35px; height: 35px; background: linear-gradient(145deg, #54d864, #25933b); color: #06180b; box-shadow: none; }

.content { padding: .78rem 1rem 1rem; max-width: 1720px; }
.card, .metric-card, .control-hero {
  background: linear-gradient(135deg, rgba(16,31,26,.91), rgba(7,17,14,.91));
  border: 1px solid var(--premium-line); border-radius: 9px;
  box-shadow: inset 0 1px rgba(255,255,255,.015), 0 8px 24px rgba(0,0,0,.12);
}
.card::after, .metric-card::after { background: none; }
.card-danger { border-color: rgba(208,59,59,.38); background: linear-gradient(145deg, rgba(62,20,18,.22), rgba(10,18,15,.94)); }
.card-header { padding-bottom: .56rem; border-color: rgba(186,207,193,.11); }
.card-header h3, .metric-label { font-family: "Segoe UI", Arial, sans-serif; font-weight: 600; letter-spacing: 0; text-transform: none; }
.card-header h3 { font-size: .9rem; }
.card-header i { color: #edf0eb; width: 19px; height: 19px; }

.metric-grid { gap: .7rem; margin-bottom: .72rem; }
.metric-card { min-height: 151px; padding: .82rem; background: linear-gradient(145deg, rgba(14,29,24,.91), rgba(7,17,14,.91)); }
.metric-card:nth-child(1) { background: linear-gradient(90deg, rgba(10,24,19,.82), rgba(8,18,15,.93)), url('/public/images/survivor-bg.jpg') left bottom / 360px auto; }
.metric-card:nth-child(3)::before, .metric-card:nth-child(4)::before, .metric-card:nth-child(5)::before, .metric-card:nth-child(6)::before {
  content: ""; position: absolute; right: -5px; bottom: -8px; width: 82px; height: 82px; opacity: .055; border: 16px solid currentColor; border-radius: 16px; transform: rotate(-8deg);
}
.metric-icon { width: 36px; height: 36px; border-radius: 7px; border-color: rgba(88,223,102,.23); background: rgba(11,39,23,.72); }
.metric-icon i { width: 21px; height: 21px; }
.metric-icon.icon-good { color: var(--premium-green); background: rgba(24,77,35,.35); }
.metric-icon.icon-blue { color: var(--premium-blue); background: rgba(26,71,116,.28); border-color: rgba(63,156,255,.25); }
.metric-label { color: #cbd4ce; font-size: .74rem; }
.metric-value { font-size: 1.38rem; }
.metric-sub { color: #98a69d; }
.progress-track { height: 6px; background: #26332f; }
.progress-fill { background: linear-gradient(90deg, #39c852, #61e572); }
.progress-fill.blue { background: linear-gradient(90deg, #2583dc, #47a9ff); }

.card-grid-3 { gap: .72rem; margin-bottom: .72rem; }
.card { padding: .9rem; }
.card-grid-3 .card { min-height: 230px; }
.card-grid-3 .card:first-child { background: linear-gradient(90deg, rgba(8,20,16,.86), rgba(8,18,15,.92)), url('/public/images/survivor-bg.jpg') left bottom / 620px auto; }
.kv-row { padding: .43rem .1rem; background: transparent; border-color: rgba(185,207,193,.11); }
.kv-row .k { color: #9fada5; }
.kv-row .v { color: #f0f1ec; }
.player-row, .activity-row { border-color: rgba(185,207,193,.10); }

.connection-card {
  grid-template-columns: minmax(185px,.72fr) minmax(380px,1.45fr) auto auto;
  padding: .48rem .7rem; margin-bottom: .72rem; border-radius: 8px;
  background: linear-gradient(90deg, rgba(11,28,21,.95), rgba(8,19,16,.91));
  border: 1px solid var(--premium-line); border-left: 3px solid var(--premium-green); box-shadow: 0 7px 22px rgba(0,0,0,.12);
}
.connection-icon { border-radius: 7px; color: var(--premium-green); }
.connection-values > div { background: rgba(4,13,10,.45); border-color: rgba(185,207,193,.09); border-radius: 6px; }
.connection-controls { border-color: rgba(185,207,193,.12); }
.btn { border-radius: 6px; text-transform: none; letter-spacing: 0; box-shadow: none; }
.btn-good { color: #06170b; background: linear-gradient(180deg, #65e774, #40bd52); border-color: #71ee7e; }
.btn-blue { color: #eaf4ff; background: linear-gradient(180deg, #397eb8, #285a84); border-color: #4b8fc7; }
.btn-critical { color: #fff0ed; background: linear-gradient(180deg, #b94b43, #85312c); border-color: #ca5c53; }
.btn-outline { color: #c9d1cc; border-color: rgba(185,207,193,.22); background: rgba(255,255,255,.015); }
.status-pill { border: 0; border-radius: 999px; box-shadow: none; }
.status-OFFLINE { color: #e9ece8; background: #35403c; }
.status-ONLINE { color: #8eef99; background: rgba(52,153,68,.24); }

.console-card, .tool-card, .users-layout .card { border-radius: 9px; }
.console-output { background: rgba(2,9,7,.94); }
.console-help { background: rgba(255,255,255,.012); }
.app-footer { display: flex; align-items: center; gap: .75rem; min-height: 42px; padding: .65rem 1.2rem; color: #687970; font-size: .66rem; border-top: 1px solid rgba(185,207,193,.08); }
.footer-spacer { flex: 1; }

@media (max-width: 1500px) {
  .connection-card { grid-template-columns: minmax(180px,.7fr) 1.4fr auto; }
  .connection-controls { grid-column: 1 / -1; justify-content: flex-end; padding: .4rem 0 0; border-left: 0; border-top: 1px solid rgba(185,207,193,.1); }
}
@media (max-width: 900px) {
  .topbar { min-height: 105px; }
  .server-breadcrumb { display: none; }
  .server-avatar { width: 45px; height: 45px; }
  .app-footer { display: none; }
}
@media (max-width: 650px) {
  .topbar-title h1 { font-size: 1.08rem; }
  .server-avatar { display: none; }
  .connection-card { grid-template-columns: 1fr; }
}