/* Darky design system (darky/packages/shared/design/tokens.css): same
 * colours, type and radius as darky.me and panel.darky.me. Panel variable
 * names are kept; they now point at the Darky palette. --accent is the
 * brand/action colour, --ok is for healthy/online/running states. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 499; font-display: swap; src: url('/fonts/inter-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('/fonts/inter-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 499; font-display: swap; src: url('/fonts/inter-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('/fonts/inter-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --bg-subtle: #0e1117;
  --surface: #11151d;
  --surface-raised: #171c26;
  --surface-hover: #1c2230;
  --surface-2: #171c26;
  --border: #222834;
  --border-strong: #313848;
  --text: #e8eaef;
  --muted: #a3aab7;
  --subtle: #848c9c;
  --accent: #4566e0;
  --accent-2: #3a58cc;
  --accent-text: #8ea3ff;
  --ok: #3fb27f;
  --danger: #ef6461;
  --warn: #e2a336;
  --radius: 8px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.7);
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
code { font-family: var(--mono); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

.brand { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; white-space: nowrap; letter-spacing: -0.01em; }
.logo { color: var(--accent-text); font-size: 20px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--danger); min-height: 1.5em; margin: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card.warn { border-color: var(--warn); margin-bottom: 16px; background: rgba(226, 163, 54, 0.04); }
.card.warn p { margin: 6px 0 10px; }
.label { color: var(--subtle); font-size: 12px; font-weight: 500; margin-bottom: 6px; letter-spacing: 0.02em; }

.btn {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  padding: 7px 14px; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; border-radius: 6px;
  transition: background-color .12s, border-color .12s, transform .05s; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-hover); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 1px 2px rgba(69, 102, 224, 0.4); }
.btn.primary:hover:not(:disabled) { background: var(--accent-2); }
.btn.danger { color: var(--danger); }
.btn.danger:hover:not(:disabled) { background: rgba(239, 100, 97, 0.12); border-color: var(--danger); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border); }
.btn.small { padding: 4px 10px; font-size: 12.5px; border-radius: 5px; }

input, textarea {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px; font: inherit; transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px rgba(69, 102, 224, 0.22); }
label { display: block; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
label input { margin-top: 4px; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--text); cursor: pointer; user-select: none; }
label.check input { width: auto; margin: 0; cursor: pointer; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 20%, #151b28 0%, var(--bg) 65%); }
.login-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; padding: 28px; box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.login-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.login-brand .logo { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-2); color: var(--accent-text); font-size: 22px; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { color: var(--text); font-size: 15px; font-weight: 600; }
.login-brand small { margin-top: 1px; color: var(--muted); font-size: 12px; }
.login-card h1 { margin: 2px 0 0; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; font-weight: 600; }
.login-help, .login-footnote { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.login-card label { margin: 2px 0 0; color: var(--text); font-size: 13px; }
.login-card input { min-height: 42px; margin-top: 6px; }
.login-card .btn { min-height: 42px; font-size: 14px; }
.login-footnote { padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; }

/* Layout */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 8px 18px; background: rgba(17, 21, 29, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.tabs { display: flex; gap: 3px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500;
  padding: 6px 11px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: color .12s, background-color .12s;
  display: inline-flex; align-items: center; gap: 5px;
}
.tab:hover { color: var(--text); background: var(--surface-hover); }
.tab.active { color: var(--text); background: var(--surface-2); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border-strong); }
.badge { background: var(--surface-2); border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tab.active .badge { background: var(--border-strong); color: var(--text); }
.bad-badge { background: rgba(239, 100, 97, 0.25); color: var(--danger); }
.content { max-width: 1240px; margin: 0 auto; padding: 20px 16px; }
.tab-panel { display: flex; flex-direction: column; gap: 16px; }

/* Overview */
.server-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.server-info-col { display: flex; flex-direction: column; gap: 8px; }
.server-conn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.conn-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 9px; font-size: 12px; cursor: pointer; color: var(--text);
  transition: all 0.15s ease;
}
.conn-chip:hover { background: var(--surface-hover); border-color: var(--accent); transform: translateY(-1px); }
.conn-chip code { font-family: var(--mono); color: var(--accent-text); font-size: 12px; }
.conn-chip .platform-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 4px;
  background: rgba(69, 102, 224, 0.2); color: var(--accent-text);
}
.conn-chip .copy-icon { opacity: 0.6; font-size: 11px; }
.conn-chip:hover .copy-icon { opacity: 1; }

.state { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; flex-wrap: wrap; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); position: relative; }
@keyframes liveDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}
.dot.running { background: var(--ok); animation: liveDotPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1); }
.dot.starting, .dot.stopping { background: var(--warn); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Quick Action Dock */
.quick-dock {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap;
  background: var(--surface-2); border-color: var(--border-strong);
}
.quick-dock-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
.quick-dock-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.quick-dock .btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.quick-dock .btn .icon { font-size: 14px; line-height: 1; }

/* Stat Progress Bars */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat {
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.stat:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.stat .value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.stat-bar {
  width: 100%; height: 5px; background: rgba(255, 255, 255, 0.06); border-radius: 3px;
  margin-top: 8px; overflow: hidden;
}
.stat-bar-fill {
  height: 100%; border-radius: 3px; transition: width 0.4s ease, background-color 0.3s ease;
}
.stat-bar-fill.ok { background: var(--ok); }
.stat-bar-fill.warn { background: var(--warn); }
.stat-bar-fill.bad { background: var(--danger); }
.stat-bar-fill.accent { background: var(--accent); }
.stat-bar-fill.purple { background: #ab7df8; }

/* Overview Players Roster */
.overview-players-card { display: flex; flex-direction: column; gap: 12px; }
.overview-players-title { display: flex; align-items: center; gap: 8px; }
.roster-grid { display: flex; gap: 8px; flex-wrap: wrap; min-height: 38px; align-items: center; }
.roster-empty { padding: 4px 0; color: var(--muted); }
.roster-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: all 0.15s ease; user-select: none;
}
.roster-chip:hover {
  background: var(--surface-hover); border-color: var(--accent); transform: translateY(-1px);
}
.roster-chip img { width: 22px; height: 22px; border-radius: 4px; image-rendering: pixelated; background: var(--surface); }
.roster-chip .roster-name { font-weight: 600; font-size: 13px; color: var(--text); }
.roster-chip .roster-ping { font-size: 11px; color: var(--ok); font-family: var(--mono); }
.roster-chip .roster-world { font-size: 10px; background: rgba(255, 255, 255, 0.08); padding: 1px 5px; border-radius: 4px; color: var(--muted); }

/* Worlds Matrix Enhancements */
.world-name-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.world-icon { font-size: 16px; line-height: 1; }
.world-time-pill, .world-weather-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: 5px; font-size: 11px; background: var(--surface-2); border: 1px solid var(--border);
  cursor: pointer; transition: all 0.12s; color: var(--text);
}
.world-time-pill:hover, .world-weather-pill:hover {
  background: var(--surface-hover); border-color: var(--accent);
}
.world-time-pill.day { color: #f6c177; }
.world-time-pill.night { color: #9ccfd8; }
.world-weather-pill.storm { color: #eb6f92; border-color: rgba(235, 111, 146, 0.4); }
.world-weather-pill.clear { color: #9ccfd8; }

.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.chart canvas { width: 100%; height: 120px; display: block; }
#chart-daily { height: 180px; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-weight: 600; font-size: 12px; }

/* Console */
.console-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.console {
  margin: 0; height: calc(100vh - 230px); min-height: 300px; overflow: auto; background: var(--bg);
  border-radius: 8px; padding: 12px; font: 12.5px/1.45 var(--mono); white-space: pre-wrap; word-break: break-word;
}
.console .warn { color: var(--warn); }
.console .err { color: var(--danger); }
.console .panel { color: var(--accent-text); }
.console .cmd { color: var(--accent); }
.command { display: flex; align-items: center; gap: 8px; }
.command .prompt { font-family: var(--mono); color: var(--accent); }
.command input { font-family: var(--mono); }

/* Players */
.players { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.player-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.player-head img { width: 40px; height: 40px; border-radius: 6px; image-rendering: pixelated; background: var(--surface-2); }
.player-name { font-weight: 700; font-size: 16px; }
.tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { font-size: 11px; background: var(--surface-2); border-radius: 4px; padding: 1px 6px; color: var(--muted); }
.tag.on { color: var(--ok); }
.player-info { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.player-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Files */
.files { display: grid; grid-template-columns: 260px 1fr; gap: 12px; }
.file-list { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.file-list button { text-align: left; background: none; border: 0; color: var(--text); font: inherit; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.file-list button:hover { background: var(--surface-2); }
.file-list button.active { background: var(--surface-2); color: var(--accent); }
.file-list button.missing { color: var(--muted); }
.editor { display: flex; flex-direction: column; gap: 10px; }
.editor-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.editor textarea { min-height: 60vh; resize: vertical; font: 12.5px/1.5 var(--mono); tab-size: 2; }
.editor p { margin: 0; }

/* Backups */
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.table td { vertical-align: middle; }
.secret { font-size: 15px; letter-spacing: .08em; user-select: all; display: inline-block; padding: 6px 10px; }
#twofa-card p { margin: 0 0 10px; }

.bad-row td { color: var(--danger); }
#audit-table td:first-child { white-space: nowrap; }
#audit-table td:nth-child(3) { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
textarea { font: 12.5px/1.5 var(--mono); resize: vertical; margin-top: 4px; }

/* Loading */
.spinner {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px;
  border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted);
  background: var(--bg); border-radius: 8px; z-index: 1;
}
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; min-height: 78px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Stats */
.ledger { display: grid; grid-template-columns: repeat(8, 1fr); padding: 0; }
.ledger-item { display: flex; flex-direction: column; padding: 14px 16px; border-left: 1px solid var(--border); min-width: 0; }
.ledger-item:first-child { border-left: 0; }
.ledger-item .n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ledger-item .l { color: var(--muted); font-size: 12.5px; }
.ledger-item .s { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
@media (max-width: 1100px) {
  .ledger { grid-template-columns: repeat(4, 1fr); }
  .ledger-item:nth-child(5) { border-left: 0; }
  .ledger-item:nth-child(n+5) { border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .ledger { grid-template-columns: repeat(2, 1fr); }
  .ledger-item:nth-child(odd) { border-left: 0; }
  .ledger-item:nth-child(n+3) { border-top: 1px solid var(--border); }
  .ledger-item .n { font-size: 19px; }
}

.split { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.section-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.key { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.key i { width: 8px; height: 8px; display: inline-block; border-radius: 2px; }
.key i + i, .key .k-unique { margin-left: 8px; }
.k-peak { background: var(--accent); }
.k-unique { background: #4f545d; }
#chart-daily { width: 100%; height: 190px; display: block; }

.heatmap { display: grid; grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 2px; font-size: 10px; color: var(--muted); }
.heatmap .hm-cell { aspect-ratio: 1; border-radius: 2px; min-width: 0; }
.heatmap .hm-day { display: flex; align-items: center; font-size: 11px; }
.heatmap .hm-hour { text-align: left; white-space: nowrap; overflow: visible; width: 0; }
.heatmap-note { margin-top: 10px; }

.segmented { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.segmented::-webkit-scrollbar { display: none; }
.segmented button {
  background: none; border: 0; border-left: 1px solid var(--border); color: var(--muted);
  font: inherit; font-size: 12.5px; padding: 5px 10px; cursor: pointer; white-space: nowrap; flex: none;
}
.segmented button:first-child { border-left: 0; }
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--surface-2); color: var(--text); }

.ranking { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
@media (max-width: 760px) { .ranking { columns: 1; } }
.ranking li {
  break-inside: avoid; display: grid; grid-template-columns: 22px 20px 1fr auto; gap: 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13.5px;
}
.ranking li:hover .name { text-decoration: underline; }
.ranking .pos { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.ranking img { width: 20px; height: 20px; border-radius: 3px; image-rendering: pixelated; }
.ranking .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .val { font-variant-numeric: tabular-nums; }
.ranking .bar { grid-column: 3 / 5; height: 2px; background: var(--surface-2); margin-top: -4px; }
.ranking .bar span { display: block; height: 100%; background: #4f545d; }
.ranking li:first-child .bar span { background: var(--accent); }
.ranking .empty { cursor: default; color: var(--muted); display: block; }

.table-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.search-small { max-width: 200px; padding: 5px 10px; width: auto; }
select.search-small { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.table-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.sortable th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable th:hover { color: var(--text); }
.sortable th.asc::after { content: ' ↑'; }
.sortable th.desc::after { content: ' ↓'; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
#stats-table tbody tr { cursor: pointer; }
#stats-table tbody tr:hover td { background: var(--surface-2); }
#stats-table td { white-space: nowrap; }
.name-cell { display: flex; align-items: center; gap: 8px; }
.name-cell img { width: 20px; height: 20px; border-radius: 3px; image-rendering: pixelated; }
.status { font-size: 11.5px; color: var(--muted); }
.status.online { color: var(--ok); }
.status.banned { color: var(--danger); }

/* Player profile */
.dialog {
  width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: 0;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
}
.dialog::backdrop { background: rgba(0, 0, 0, .6); }
.profile-head { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.profile-head img { width: 48px; height: 48px; border-radius: 4px; image-rendering: pixelated; }
.profile-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.profile-head .meta { color: var(--muted); font-size: 13px; }
.profile-head .meta .online { color: var(--ok); }
.profile-head .close { margin-left: auto; align-self: flex-start; }
.profile-live { padding: 10px 20px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.profile-live b { color: var(--text); font-weight: 600; }
.profile .ledger { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 560px) { .profile .ledger { grid-template-columns: repeat(2, 1fr); } }
.profile-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; padding: 16px 20px; }
@media (max-width: 640px) { .profile-cols { grid-template-columns: 1fr; } }
.profile-cols h4, .profile-lists h4 { margin: 14px 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.profile-cols h4:first-child { margin-top: 0; }
.profile-cols dl { margin: 0; }
.profile-cols .row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.profile-cols dt { color: var(--muted); }
.profile-cols dd { margin: 0; font-variant-numeric: tabular-nums; }
.profile-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 24px; padding: 0 20px 20px; border-top: 1px solid var(--border); }
.profile-lists ol { list-style: none; margin: 0; padding: 0; }
.profile-lists li { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; padding: 3px 0; }
.profile-lists li span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Server software / performance */
.split.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .split.even { grid-template-columns: 1fr; } }
.card p { margin: 0 0 10px; }
.changes { list-style: none; margin: 8px 0 0; padding: 0; max-height: 180px; overflow: auto; border-top: 1px solid var(--border); }
.changes li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.changes li b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.paper-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.spark-result { margin-top: 10px; }
.spark-result a { word-break: break-all; }

/* Player management */
.manage-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.manage-form { display: flex; gap: 8px; flex-wrap: wrap; }
.manage-form input { width: 180px; padding: 5px 10px; }
.manage-form select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font: inherit; padding: 5px 8px; }
.whitelist-toggle { margin: 0; }
.name-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; }
.name-list li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.name-list li img { width: 18px; height: 18px; border-radius: 3px; image-rendering: pixelated; }
.name-list li .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name-list li .muted { font-size: 12px; }
.name-list .link { background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; padding: 0; }
.name-list .link:hover { color: var(--danger); text-decoration: underline; }
.section-head.plain { margin: 4px 0 -4px; }
.profile-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--border); }

/* Inventory */
.inv-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.inv-head h2 { margin: 0; font-size: 18px; }
.inv-section { padding: 12px 20px; }
.inv-section h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.inv-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.inv-slot {
  position: relative; aspect-ratio: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  font-size: 9.5px; line-height: 1.15; padding: 3px; overflow: hidden; color: var(--text); overflow-wrap: anywhere; hyphens: auto;
}
.inv-slot.held { border-color: var(--accent); }
.inv-slot.enchanted { color: #c8a8ff; }
.inv-slot .count { position: absolute; right: 3px; bottom: 2px; font-weight: 700; font-size: 11px; }
.inv-slot .dura { position: absolute; left: 3px; right: 3px; bottom: 1px; height: 2px; background: var(--border); }
.inv-slot .dura span { display: block; height: 100%; background: var(--accent); }
.inv-note { padding: 0 20px 16px; }
@media (max-width: 560px) { .inv-slot { font-size: 8px; } }

/* Map */
.map-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.map-card p { margin: 0; }
.map-wrap { position: relative; }
#map-frame { display: block; width: 100%; height: calc(100vh - 250px); min-height: 400px; border: 0; border-radius: 8px; background: var(--bg); }

/* Store */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.chip { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.chip:hover { color: var(--text); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.store-heading { margin-top: 14px; }
.load-more { display: flex; justify-content: center; margin-top: 12px; }
.update-card { border-color: var(--accent-text); }
.update-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.update-row:last-child { border-bottom: 0; }
.badge-installed { font-size: 11px; color: var(--ok); margin-left: 6px; font-weight: 600; }

/* Plugins */
.upload-btn { cursor: pointer; margin: 0; }
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 12px; }
.result { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border-radius: 8px; padding: 10px; }
.result img, .result-icon { width: 40px; height: 40px; border-radius: 8px; flex: none; background: var(--bg); }
.result .grow { flex: 1; min-width: 0; }
.result .title { font-weight: 700; }
.result .desc { color: var(--muted); font-size: 12.5px; margin: 2px 0 6px; }
.status-on { color: var(--ok); }
.status-off { color: var(--muted); }

/* Settings */
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--surface-2); border: 1px solid var(--border); padding: 10px 16px; border-radius: 8px;
  transition: .2s; pointer-events: none; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.bad { border-color: var(--danger); }

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; padding: 10px 16px; }
  .tabs { order: 3; flex-basis: 100%; }
  .content { padding: 16px; }
  .files { grid-template-columns: 1fr; }
  .players { grid-template-columns: 1fr; }
}

/* Roles: hide controls the signed-in account can't use */
body[data-role="moderator"] [data-role="admin"],
body[data-role="moderator"] [data-role="owner"],
body[data-role="admin"] [data-role="owner"] { display: none !important; }
.whoami { white-space: nowrap; }
.card.wide { grid-column: 1 / -1; }

/* Chat */
.chat-card { display: flex; flex-direction: column; gap: 10px; }
.chat-card .section-head { margin-bottom: 0; }
.chat-log {
  height: calc(100vh - 290px); min-height: 280px; overflow: auto; background: var(--bg); border-radius: 8px;
  padding: 10px 12px; font-size: 13.5px; line-height: 1.5;
}
.chat-line { display: grid; grid-template-columns: 64px 20px 1fr; gap: 8px; align-items: start; padding: 2px 0; }
.chat-line time { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; padding-top: 2px; white-space: nowrap; }
#chat-input { font-family: inherit; }
.chat-line img { width: 18px; height: 18px; border-radius: 3px; image-rendering: pixelated; margin-top: 1px; }
.chat-line .who { font-weight: 600; margin-right: 6px; }
.chat-line.event { color: var(--muted); font-style: italic; }
.chat-line.server .who { color: #c9a3ff; }
.chat-log.hide-events .chat-line.event { display: none; }
.chat-day { color: var(--muted); font-size: 11.5px; text-align: center; margin: 8px 0 4px; }

/* World tab forms */
.stack-form label { margin-bottom: 10px; }
.stack-form select, .kit-form select, #staff-role {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font: inherit; padding: 7px 8px; margin-top: 4px;
}
.inline-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-fields label { flex: 1; min-width: 140px; }
.kit-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.kit-form textarea { width: 100%; }
.pregen-progress { margin-top: 10px; min-height: 1.4em; }
#kits-table td:nth-child(2) { color: var(--muted); font-size: 12.5px; }
.staff-form { margin-top: 12px; }
#staff-role { width: auto; margin-top: 0; }
.secret-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }

/* Player profile additions */
.profile-mod { padding: 12px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.profile-mod .state-line b { font-weight: 600; }
.profile-mod .state-line .bad { color: var(--danger); }
.mod-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mod-form input, .mod-form select { width: auto; padding: 5px 8px; font-size: 13px; }
.mod-form select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.mod-form input.reason { flex: 1; min-width: 160px; }
.warn-list { list-style: none; margin: 0; padding: 0; }
.warn-list li { padding: 3px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.warn-list li b { color: var(--text); font-weight: 500; }
.blocklog { max-height: 220px; overflow: auto; font-size: 12.5px; }
.blocklog table { width: 100%; border-collapse: collapse; }
.blocklog td { padding: 3px 6px 3px 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
.blocklog td.undone { color: var(--muted); text-decoration: line-through; }
.profile-section { padding: 12px 20px; border-top: 1px solid var(--border); }
.profile-section h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }

/* Quests */
.quest-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
@media (max-width: 640px) { .quest-cols { grid-template-columns: 1fr; } }
.quest-box h4 { margin-top: 10px; }
.quest-row { display: grid; grid-template-columns: 1fr 70px auto; gap: 10px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.quest-row.done > span:first-child { color: var(--muted); text-decoration: line-through; }
.quest-bar { height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.quest-bar span { display: block; height: 100%; background: var(--accent); }
.ach-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ach { font-size: 12px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); }
.ach.earned { color: var(--text); border-color: var(--accent); }
#quest-config h4 { margin: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
#quest-config .table td { padding: 5px 6px; }

/* Player actions */
.actions-panel h4 { margin-bottom: 4px; }
.action-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.action-row:last-child { border-bottom: 0; }
.action-label { color: var(--muted); font-size: 12.5px; }
.action-controls { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.action-controls input, .action-controls select {
  width: auto; padding: 5px 8px; font-size: 13px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-family: inherit;
}
.action-controls .coord { width: 84px; }
.action-controls .num-input { width: 74px; }
.action-controls .item-input { width: 170px; }
.action-controls .msg-input { flex: 1; min-width: 180px; }
@media (max-width: 560px) { .action-row { grid-template-columns: 1fr; gap: 4px; } }
.dialog { overflow-x: hidden; }
.action-row > * { min-width: 0; }

/* Countdown restart */
.countdown { color: var(--warn); margin-top: 2px; }
.countdown .link, .link { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.link:hover { color: var(--text); }
.link.bad { color: var(--danger); }
#countdown-minutes { padding: 7px 8px; }
.chart-head { align-items: center; margin: 0; }

/* Plugins */
.plugin-desc { max-width: 520px; }
.update-note { color: var(--accent-text); }
#installed-card { transition: border-color .15s; }
#installed-card.dropping { border-color: var(--accent); border-style: dashed; }
.drop-hint { margin: 10px 0 0; }
.version-upgrade { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.wide-dialog { width: min(1100px, calc(100vw - 32px)); }
.config-body { display: grid; grid-template-columns: 240px 1fr; gap: 12px; padding: 12px 20px 16px; }
.config-body .file-list { background: var(--surface-2); border-radius: 8px; max-height: 60vh; overflow: auto; }
.config-body .file-list button { font-size: 12.5px; word-break: break-all; }
.config-body textarea { min-height: 52vh; }
@media (max-width: 760px) { .config-body { grid-template-columns: 1fr; } .config-body .file-list { max-height: 160px; } }

/* Reports */
.reports { display: flex; flex-direction: column; gap: 10px; }
.report { border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.report.open { border-left: 3px solid var(--warn); }
.report-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.report-who { display: flex; align-items: center; gap: 6px; }
.report-who img { width: 20px; height: 20px; border-radius: 3px; image-rendering: pixelated; }
.report-reason { font-size: 14.5px; }

/* World extras */
.enchanted { color: #c8a8ff; }
.board-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.board-form .inline-fields label { min-width: 90px; }
.stack-form select, #xray-mode { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font: inherit; padding: 7px 8px; margin-top: 4px; }
.sub-h { margin: 8px 0 10px; font-size: 14px; font-weight: 600; }
.server-preview { display: flex; gap: 12px; align-items: center; background: #1b1b1b; border: 1px solid #000; padding: 8px; border-radius: 4px; margin-bottom: 14px; font-family: var(--mono); font-size: 13px; }
.server-preview img { width: 64px; height: 64px; image-rendering: pixelated; background: #333; flex: none; }
.server-preview strong { color: #fff; font-weight: 400; }
.motd-preview { color: #aaa; line-height: 1.35; margin-top: 2px; min-height: 2.7em; }
.icon-actions { margin-bottom: 6px; }

/* Backups off-site */
.check-row { margin-bottom: 10px; }
.check-row label.check { flex: none; min-width: 0; margin-bottom: 4px; }
#offsite-form select { width: 100%; }

/* Scheduled commands */
.tasks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.task { border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.task-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.task-top > input { width: 180px; padding: 5px 8px; }
.task-top select, .task-when input { width: auto; padding: 5px 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.task-when { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--muted); }
.task-when .num-input { width: 74px; }
.task .day { display: inline-flex; gap: 3px; align-items: center; margin: 0; font-size: 12.5px; color: var(--text); }
.task .day input { width: auto; margin: 0; }
.task label.check { margin: 0 0 0 auto; }
.task textarea { margin: 0; }

/* Player history */
.history { max-height: 320px; overflow: auto; margin-top: 6px; font-size: 13px; }
.history-day { color: var(--muted); font-size: 11.5px; margin: 10px 0 2px; }
.history-row { display: grid; grid-template-columns: 48px 70px 1fr; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.history-row time { color: var(--muted); font-variant-numeric: tabular-nums; }
.history-kind { color: var(--muted); }
.history-row.warning .history-kind, .history-row.report .history-kind { color: var(--warn); }
.history-row.staff .history-kind { color: var(--accent-text); }
.history-row.death .history-kind { color: var(--danger); }

/* Phones */
.menu-toggle { display: none; }
@media (max-width: 760px) {
  .topbar { position: sticky; gap: 10px; }
  .topbar .brand { font-size: 15px; }
  .menu-toggle { display: inline-block; margin-left: auto; order: 2; }
  .whoami { display: none; }
  #logout { order: 2; }
  .tabs { display: none; order: 3; flex-basis: 100%; flex-wrap: wrap; gap: 4px; padding-top: 6px; }
  body.menu-open .tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
  .tab { text-align: left; background: var(--surface-2); }
  .tab.active { background: var(--accent); color: #fff; }
  .content { padding: 12px; }
  .tab-panel { gap: 12px; }
  .card { padding: 12px; }
  .server-card .actions { width: 100%; }
  .server-card .actions .btn { flex: 1; }
  #countdown-minutes { flex-basis: 100%; max-width: none; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat .value { font-size: 19px; }
  .charts { grid-template-columns: 1fr; }
  .chart-head { flex-direction: column; align-items: stretch; gap: 6px; }
  .editor-head { flex-wrap: wrap; }
  .table th, .table td { padding: 7px 4px; }
  .table-scroll > .table { min-width: 560px; }
  .row-actions { justify-content: flex-start; }
  .manage-form input { width: 100%; }
  .search-small { max-width: none; flex: 1; }
  .dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .profile-head, .profile-live, .profile-actions, .profile-section, .profile-mod, .profile-cols { padding-left: 14px; padding-right: 14px; }
  .console { height: calc(100vh - 200px); }
  .chat-line { grid-template-columns: 44px 18px 1fr; }
  .task-top > input { width: 100%; }
  .history-row { grid-template-columns: 44px 60px 1fr; }
}
@media (max-width: 400px) {
  body.menu-open .tabs { grid-template-columns: repeat(2, 1fr); }
}
.notice { border: 1px solid var(--warn); border-radius: 8px; padding: 8px 10px; color: var(--text); }

/* Store sources */
.badge-older { font-size: 11px; color: var(--warn); margin-left: 6px; font-weight: 600; }
.older-toggle { margin: 4px 0 12px; }
.older-toggle input { margin-top: 2px; }
.store-error { margin: 0 0 10px; }

/* World details */
.wd-ledger { grid-template-columns: repeat(5, 1fr); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 14px; }
@media (max-width: 900px) { .wd-ledger { grid-template-columns: repeat(2, 1fr); } .wd-ledger .ledger-item { border-left: 0; border-top: 1px solid var(--border); } }
.wd-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; }
@media (max-width: 900px) { .wd-cols { grid-template-columns: 1fr; } }
#world-details h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.wd-rules-head { display: flex; align-items: center; gap: 12px; margin-top: 16px !important; }
.wd-rules-head input { font-size: 12.5px; }
.wd-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 16px; max-height: 360px; overflow: auto; margin-top: 6px; }
.wd-rule { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.wd-rule input[type=checkbox] { width: auto; margin: 0; }
.wd-rule input[type=number] { width: 80px; padding: 3px 6px; }
.table.compact td { padding: 4px 6px; }
.bad { color: var(--danger); }
code.seed { user-select: all; }

/* Extra servers */
.dot.inline { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 1px; }
.dot.failed { background: var(--danger); }
.dot.installing { background: var(--warn); }
.srv-main td { background: var(--surface-2); }
.srv-create { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .srv-create { grid-template-columns: 1fr; } }
.srv-create h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.srv-type-group { margin-bottom: 12px; }
.srv-type-group .label { margin-bottom: 4px; }
.srv-type {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; background: none; color: var(--text);
  border: 1px solid transparent; border-bottom-color: var(--border); padding: 7px 8px; font: inherit; cursor: pointer; border-radius: 6px;
}
.srv-type:hover { background: var(--surface-2); }
.srv-type.active { border-color: var(--accent); background: var(--surface-2); }
.srv-modpacks { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; margin: -4px 0 12px; }
.srv-modpack { display: flex; gap: 8px; align-items: center; text-align: left; background: none; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font: inherit; cursor: pointer; }
.srv-modpack img, .srv-modpack .result-icon { width: 28px; height: 28px; border-radius: 5px; flex: none; }
.srv-modpack.active { border-color: var(--accent); }
.srv-subtabs { align-self: flex-start; }
#srv-console { height: calc(100vh - 330px); }
.install-log { height: 260px; min-height: 0; }
#srv-detail { display: flex; flex-direction: column; gap: 12px; }

/* Install a server: category tabs + one row per type */
.srv-cat-tabs { margin-bottom: 12px; }
.srv-rows { display: flex; flex-direction: column; }
.srv-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.srv-row:last-child { border-bottom: 0; }
.srv-row .grow { flex: 1; min-width: 0; }
.srv-row img, .srv-row .result-icon { width: 32px; height: 32px; border-radius: 6px; flex: none; }
.srv-row-version { width: auto; padding: 5px 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.srv-pack-search { margin-bottom: 6px; }
.srv-eula-note { margin: 12px 0 0; }
@media (max-width: 560px) { .srv-row { flex-wrap: wrap; } .srv-row .grow { flex-basis: 100%; } }

/* Extra server updates */
.srv-update { margin: 4px 0 10px; display: flex; flex-direction: column; gap: 6px; }
.srv-update-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#srv-change .action-controls select { max-width: 100%; }
.srv-change-mods { margin: 8px 0 6px; }

/* Fun tab */
.fun-tabs { align-self: flex-start; }
.fun-block { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.fun-block-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.fun-block-head .item-input, .fun-block .item-input { width: 170px; padding: 4px 8px; }
.fun-name { width: 220px; font-weight: 600; padding: 4px 8px; }
.fun-block table input, .fun-block table select { width: auto; padding: 4px 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; }
.num-small { width: 90px !important; padding: 4px 8px; }
.fun-keys label { min-width: 180px; }
.fun-keys select, #fun-give select { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font: inherit; padding: 6px 8px; margin-top: 4px; }
#fun-give select { width: auto; margin: 0; }
.fun-give { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.fun-give input { width: 160px; }
.fun-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.fun-job { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.fun-more .inline-fields label { min-width: 160px; }

/* Viewers see what moderators see, minus actions (the server refuses them anyway) */
body[data-role="viewer"] [data-role="admin"],
body[data-role="viewer"] [data-role="owner"] { display: none !important; }
.tab.denied { display: none !important; }
.bad-badge { background: var(--danger); color: #fff; }

/* Console tools */
.console-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.console-tools .check { margin: 0; }
.console .entry { white-space: pre-wrap; }
.console .entry .ts { color: var(--subtle); }
.console.no-times .entry .ts { display: none; }
.console .entry.join { color: var(--ok); }
.console .trace-toggle { background: none; border: 0; color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer; text-decoration: underline; margin-left: 8px; padding: 0; }
.console .trace { color: #f2706d; padding-left: 16px; }

/* File manager */
.fm-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.fm-crumbs { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.fm-quick { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.fm-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 6px 8px; background: var(--surface-2); border-radius: 8px; margin-bottom: 8px; }
.fm-list-wrap { max-height: 62vh; overflow: auto; border-radius: 8px; transition: outline-color .15s; outline: 2px dashed transparent; }
.fm-list-wrap.dropping { outline-color: var(--accent); }
.fm-table td, .fm-table th { padding: 5px 6px; }
.fm-table .fm-check { width: 28px; }
.fm-table .fm-check input { width: auto; margin: 0; }
.fm-name { background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; padding: 0; text-align: left; display: flex; gap: 8px; align-items: center; }
.fm-name:hover { text-decoration: underline; }
.fm-icon { color: var(--muted); width: 10px; display: inline-block; }
.fm-dir .fm-name { font-weight: 600; }
.fm-versions { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--surface-2); border-radius: 8px; max-height: 200px; overflow: auto; }
.fm-version { display: flex; gap: 12px; align-items: center; font-size: 12.5px; }
#fm-content { min-height: 60vh; }

/* Incidents */
.incidents { display: flex; flex-direction: column; gap: 8px; }
.incident { text-align: left; background: none; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.incident:hover { border-color: var(--muted); }
.incident.open { border-left: 3px solid var(--danger); }
.incident-head { display: flex; justify-content: space-between; gap: 10px; }
.incident-status { font-size: 12px; color: var(--muted); }
.incident-status.open { color: var(--danger); }
.incident-status.recovered { color: var(--warn); }
.incident-status.resolved { color: var(--ok); }
.timeline { list-style: none; margin: 0 0 8px; padding: 0; font-size: 13px; }
.timeline li { padding: 3px 0; border-bottom: 1px solid var(--border); }
.timeline time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
.incident-log { height: 260px; min-height: 0; font-size: 12px; }
#activity-tabs { align-self: flex-start; }

/* Security center */
.security-score { display: flex; gap: 20px; align-items: center; }
.security-score p { margin: 0; }
.score { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.score.good { color: var(--ok); }
.score.mid { color: var(--warn); }
.score.low { color: var(--danger); }
.sec-checks { display: flex; flex-direction: column; }
.sec-check { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.sec-check:last-child { border-bottom: 0; }
.sec-mark { font-size: 11.5px; font-weight: 700; text-transform: uppercase; padding-top: 2px; }
.sec-check.ok .sec-mark { color: var(--ok); }
.sec-check.warn .sec-mark { color: var(--warn); }
.sec-check.bad .sec-mark { color: var(--danger); }

/* Sessions, backup codes, access */
.codes { font-family: var(--mono); font-size: 15px; letter-spacing: .05em; columns: 2; margin: 8px 0 0; user-select: all; }
#backup-codes { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.access-list { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 14px; }
.access-list label { margin: 0; }
#staff-table select { width: auto; padding: 4px 6px; }

/* Health center (2026-10-07) */
.health-card { margin-bottom: 16px; }
.health-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.health-head strong { font-size: 17px; }
.health-list { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 6px; }
.health-list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; line-height: 1.4; }
.health-list .lvl { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--muted); }
.health-list .lvl.ok { background: var(--ok); }
.health-list .lvl.warn { background: var(--warn); }
.health-list .lvl.bad { background: var(--danger); }
.health-list .fix { display: block; color: var(--muted); font-size: 12px; }
.health-list .area { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.dot.health-ok { background: var(--ok); }
.dot.health-warn { background: var(--warn); }
.dot.health-bad { background: var(--danger); }
.check-ok { color: var(--ok); }
.check-bad { color: var(--danger); }
.notes { margin-bottom: 12px; }
.note { border-left: 3px solid var(--warn); padding: 4px 8px; margin: 6px 0; white-space: pre-wrap; }
.note .meta { color: var(--muted); font-size: 12px; display: flex; gap: 8px; align-items: center; }
.notes form { display: flex; gap: 8px; margin-top: 6px; }
.notes textarea { flex: 1; min-height: 38px; resize: vertical; }

/* shop editor: special items */
.shop-special select, .shop-special input { margin: 0 4px 4px 0; }
.shop-special input { width: 16em; max-width: 100%; }

/* Command Palette (Ctrl+K) */
.palette-dialog {
  padding: 0;
  max-width: 560px;
  width: 90vw;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: var(--text);
}
.palette-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.palette-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.palette-head .prompt {
  color: var(--accent-text);
  font-size: 17px;
  font-family: var(--mono);
}
.palette-head input {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 15px;
  color: var(--text);
  outline: none;
  box-shadow: none;
  width: 100%;
}
.palette-head input:focus {
  border: 0;
  box-shadow: none;
}
.palette-kbd {
  font-size: 11px;
  color: var(--subtle);
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.palette-list {
  max-height: 360px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 6px;
}
.palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  font-size: 13.5px;
  transition: background-color .1s;
}
.palette-item:hover, .palette-item.selected {
  background: var(--surface-hover);
  color: var(--text);
}
.palette-item.selected .palette-desc {
  color: var(--accent-text);
}
.palette-item .palette-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.palette-item .palette-icon {
  font-size: 14px;
  color: var(--accent-text);
  width: 20px;
  text-align: center;
}
.palette-item .palette-desc {
  font-size: 12px;
  color: var(--subtle);
}

/* Interactive Performance Charts */
.chart-wrap {
  position: relative;
}
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 11.5px;
  color: var(--text);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  z-index: 10;
  display: none;
  transform: translate(-50%, -100%);
  margin-top: -8px;
}
.chart-tooltip .val {
  font-weight: 700;
  color: var(--accent-text);
}
.chart-tooltip .time {
  font-size: 10.5px;
  color: var(--subtle);
  margin-top: 1px;
}

/* Console enhancements */
.console-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin: 6px 0 2px;
}
.console-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--muted);
  cursor: pointer;
  transition: all .1s ease;
}
.console-chip:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--accent-text);
}

/* Session Expiry Banner */
.session-banner {
  background: rgba(226, 163, 54, 0.1);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #f7d58b;
  font-size: 13px;
}
.session-banner button {
  white-space: nowrap;
}

/* File Manager Unsaved Indicator */
.dirty-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--warn);
  border-radius: 50%;
  margin-right: 6px;
}

/* Console Power Tools */
.console-wrap { position: relative; width: 100%; }
.console .chat { color: #56b6c2; }
.console-filters { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.console-filter {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 500; cursor: pointer;
  transition: all .15s ease;
}
.console-filter:hover { background: var(--surface-hover); color: var(--text); }
.console-filter.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.console-scroll-btn {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--surface-raised); border: 1px solid var(--accent); color: var(--accent-light, #708bff);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5); border-radius: 20px; padding: 6px 14px;
  font-size: 12px; font-weight: 600; cursor: pointer; z-index: 10;
  display: flex; align-items: center; gap: 6px; transition: transform .15s, opacity .15s;
}
.console-scroll-btn:hover { background: var(--accent); color: #fff; transform: translateX(-50%) translateY(-2px); }
.console-scroll-btn[hidden] { display: none !important; }

/* Mobile Bottom Navigation Bar */
.mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface); border-top: 1px solid var(--border);
  z-index: 99; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  justify-content: space-around; align-items: center;
}
.mobile-nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: var(--muted); font-size: 11px;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.mobile-nav-btn.active, .mobile-nav-btn:hover { color: var(--accent); }
.mobile-nav-btn svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .mobile-nav { display: flex; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* Chat canned quick chips */
.chat-quick-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px;
  background: var(--card-bg, #11151d);
  border-bottom: 1px solid var(--border, #242938);
}
.chat-quick-chips .chip {
  cursor: pointer;
  background: #171c26;
  border: 1px solid #2a3142;
  color: #c9d1d9;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 12px;
  transition: all 0.15s ease;
}
.chat-quick-chips .chip:hover {
  background: #242b3b;
  border-color: #4566e0;
  color: #fff;
}

/* Clickable chat avatars & player names */
.clickable-head {
  cursor: pointer;
  border-radius: 3px;
  transition: transform 0.15s ease;
}
.clickable-head:hover {
  transform: scale(1.2);
}
.who.clickable-player {
  cursor: pointer;
  transition: color 0.15s ease;
}
.who.clickable-player:hover {
  color: #5375e2 !important;
  text-decoration: underline;
}

/* Copy badges in player profile */
.copy-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #171c26;
  border: 1px solid #2e3649;
  color: #9aa4b2;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.copy-badge:hover {
  background: #232a39;
  color: #fff;
  border-color: #4566e0;
}

/* Item quick chips in player action drawer */
.item-presets .chip {
  cursor: pointer;
  background: #171c26;
  border: 1px solid #2a3142;
  color: #c9d1d9;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  transition: all 0.15s ease;
}
.item-presets .chip:hover {
  background: #242b3b;
  border-color: #4566e0;
  color: #fff;
}


/* Game switch: Minecraft | FiveM. Each game's tabs and panels carry data-game; shared ones don't. */
body[data-game="fivem"] [data-game="minecraft"],
body:not([data-game="fivem"]) [data-game="fivem"] { display: none !important; }
body[data-role="viewer"] [data-role="moderator"] { display: none !important; }
.game-switch { display: flex; padding: 2px; gap: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); flex-shrink: 0; }
.game-switch button {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-radius: 6px; padding: 4px 10px;
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .12s, background-color .12s;
}
.game-switch button:hover { color: var(--text); }
.game-switch button.active { background: var(--accent); color: #fff; }
.dot.mini { width: 7px; height: 7px; }
.mono-cell { font-family: var(--mono); word-break: break-all; }
#fx-files { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
#fx-files button { font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .game-switch { order: 1; }
  #fx-files { max-height: 200px; }
}