/* ═══════════════════════════════════════════════════════════════════════════
   ITV — CRAFTED PIXEL / TERMINAL  ·  enhance.css  (component layer)
   Leaderboards · stats · dashboard tiles · housing · SQ · compare · bot monitor
   skeletons · mobile nav · tooltips. Carbon + emerald, hard pixel edges.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LEADERBOARDS ────────────────────────────────────────────────────────── */
.lb-tabs {
  display: flex; gap: 3px; flex-wrap: wrap;
  background: var(--bg-card); border: 2px solid var(--border-md);
  padding: 4px; margin-bottom: 16px; box-shadow: var(--px-sh-sm);
}
.lb-tab {
  padding: 8px 13px; border: 2px solid transparent; background: none; cursor: pointer;
  font-family: var(--font-d); font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-3); display: flex; align-items: center; gap: 6px;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.lb-tab:hover { color: var(--emerald); background: var(--emerald-soft); }
.lb-tab.active { border-color: var(--emerald-border); color: var(--emerald-bright); background: var(--emerald-soft); }

.lb-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--bg-card); border: 2px solid var(--border-md);
  box-shadow: var(--px-sh);
}
.lb-table thead tr { background: var(--bg-card2); }
.lb-table th {
  padding: 12px 16px; text-align: left;
  font-family: var(--font-d); font-size: 9px; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-md);
  position: sticky; top: 0; z-index: 2; background: var(--bg-card2);
}
.lb-table th.right { text-align: right; }
.lb-table td { padding: 10px 16px; font-size: 13px; font-family: var(--font-m); border-bottom: 1px solid var(--border); }
.lb-table tbody tr { cursor: pointer; transition: background var(--t-fast); }
.lb-table tbody tr:hover { background: var(--emerald-soft); }
.lb-table tbody tr:last-child td { border-bottom: none; }

.lb-rank { font-family: var(--font-d); font-size: 13px; width: 60px; font-variant-numeric: tabular-nums; }
.lb-rank-gold   { color: #FFD700; }
.lb-rank-silver { color: #C0C0C0; }
.lb-rank-bronze { color: #CD7F32; }
.lb-rank-default { color: var(--text-3); }
.lb-player { display: flex; align-items: center; gap: 12px; }
.lb-player-head { width: 32px; height: 32px; image-rendering: pixelated; flex-shrink: 0; border: 2px solid var(--border-md); }
.lb-player-name { font-weight: 700; font-size: 14px; color: var(--text); }
.lb-value { font-family: var(--font-m); font-size: 15px; font-weight: 700; text-align: right; color: var(--emerald-bright); font-variant-numeric: tabular-nums; }
.lb-time { font-size: 11px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }

.lb-table tbody tr:nth-child(1) { background: rgba(255,215,0,0.06); border-left: 3px solid #FFD700; }
.lb-table tbody tr:nth-child(2) { background: rgba(192,192,192,0.04); border-left: 3px solid #C0C0C0; }
.lb-table tbody tr:nth-child(3) { background: rgba(205,127,50,0.04); border-left: 3px solid #CD7F32; }

/* ── STAT TILES / STAT TABS ──────────────────────────────────────────────── */
.stat-search-wrap { max-width:500px; margin:0 auto 32px; }
.stat-search-row { display:flex; gap:8px; }
.stat-result-header { background:var(--bg-card); border:2px solid var(--border-md); padding:18px; display:flex; align-items:center; gap:14px; margin-bottom:12px; box-shadow:var(--px-sh); }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.stat-tile { background:var(--bg-card); border:2px solid var(--border-md); padding:14px; box-shadow:var(--px-sh-sm); transition:transform var(--t), border-color var(--t), box-shadow var(--t); }
.stat-tile:hover { border-color:var(--emerald-border); transform:translate(-2px,-2px); box-shadow:var(--px-sh); }
.stat-label { font-family:var(--font-d); font-size:9px; color:var(--text-3); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.stat-value { font-family:var(--font-t); font-size:30px; color:var(--emerald-bright); line-height:1; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; word-break:break-word; min-width:0; }

.stat-tabs, .stat-chart-tabs, .stat-chart-range {
  display:flex; gap:3px; flex-wrap:wrap;
  background:var(--bg-card); border:2px solid var(--border-md);
  padding:3px; margin:14px 0 12px;
}
.stat-chart-wrap { margin-top: 16px; }
.stat-chart-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.stat-chart-tabs, .stat-chart-range { margin:0; }

/* ── DASHBOARD ───────────────────────────────────────────────────────────── */
.dash-player-card {
  background: var(--bg-card); border: 2px solid var(--emerald-border);
  border-left: 4px solid var(--emerald);
  padding: 20px 24px; display: flex; align-items: center; gap: 18px;
  margin-top: 24px; position: relative; overflow: hidden; box-shadow: var(--px-sh);
}
.dash-player-head { width: 64px; height: 64px; image-rendering: pixelated; border: 2px solid var(--border-md); flex-shrink: 0; }
.dash-player-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.dash-player-ign { font-family: var(--font-d); font-size: 18px; color: var(--emerald); text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,0.4); }
.dash-player-lastseen { font-size: 11px; color: var(--text-3); font-family: var(--font-m); }
.dash-player-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dash-mc-rank { display:inline-flex; align-items:center; }

.dash-section-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 16px; }
.dash-stat-chip { background: var(--bg-card); border: 2px solid var(--border-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--px-sh-sm); }
.dash-chip-label { font-family:var(--font-d); font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
.dash-chip-value { font-family: var(--font-m); font-size: 18px; color: var(--emerald-bright); line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

.dash-tiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 16px; }
.dash-tile { background: var(--bg-card); border: 2px solid var(--border-md); padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 12px; box-shadow: var(--px-sh-sm); transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
.dash-tile:hover { border-color: var(--emerald-border); transform: translate(-2px,-2px); box-shadow: var(--px-sh); }
.dash-tile.active { border-color: var(--emerald); box-shadow: var(--px-sh); }
.dash-tile-icon { font-size: 22px; flex-shrink: 0; }
.dash-tile-body { flex: 1; min-width: 0; }
.dash-tile-label { font-family:var(--font-d); font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.3px; }
.dash-tile-value { font-family: var(--font-m); font-size: 18px; line-height: 1.2; margin-top: 4px; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.dash-tile-arrow { font-family:var(--font-d); font-size: 14px; color: var(--text-3); flex-shrink: 0; }

.dash-sections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 16px; }
.dash-section-card { background: var(--bg-card); border: 2px solid var(--border-md); padding: 18px 20px; box-shadow: var(--px-sh-sm); transition: border-color var(--t); }
.dash-section-card:hover { border-color: var(--emerald-border); }
.dash-section-card.dash-section-full { grid-column: 1 / -1; }
.dash-section-title { font-family: var(--font-d); font-size: 11px; margin-bottom: 14px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--emerald); }
.dash-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.dash-kv-grid-wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.dash-kv-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; font-family: var(--font-m); }
.dash-kv-row:last-child { border-bottom: none; }
.dash-kv-label { color: var(--text-2); }
.dash-kv-val { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

.dash-keys-strip, .dash-crate-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.dash-key-item, .dash-crate-item { background: var(--bg-card2); border: 2px solid var(--border-md); padding: 12px 8px; text-align: center; }
.dash-key-tier, .dash-crate-tier { font-family:var(--font-d); font-size: 9px; color: var(--text-3); text-transform: uppercase; }
.dash-key-count, .dash-crate-count { font-family: var(--font-m); font-size: 18px; color: var(--text); margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.dash-key-label, .dash-crate-label { font-size: 10px; color: var(--text-3); margin-top: 2px; }

.dash-chart-wrap { margin-top: 16px; }
.dash-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dash-chart-title { font-family: var(--font-d); font-size: 11px; color: var(--text); text-transform: uppercase; }

.online-players-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.online-player-card { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 2px solid var(--border-md); padding: 8px 10px; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.online-player-card:hover { border-color: var(--emerald-border); background: var(--emerald-soft); }
.online-rank-badge { display: inline-block; font-family: var(--font-d); font-size: 9px; letter-spacing: 0.5px; }
.player-online-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-input); border: 2px solid var(--border-md); padding: 4px 8px; font-size: 10px; color: var(--text-2); cursor: pointer; }
.player-online-pill:hover { border-color: var(--emerald-border); color: var(--emerald); background: var(--emerald-soft); }

/* ── HOUSING (dynamic JS panel) ──────────────────────────────────────────── */
.housing-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.housing-full { grid-column:1/-1; }
.housing-header { padding:10px 16px; border-bottom:2px solid var(--border-md); display:flex; align-items:center; gap:8px; background:var(--bg-panel); }
.housing-icon { width:28px; height:28px; background:var(--emerald-soft); border:2px solid var(--emerald-border); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.housing-title { font-family:var(--font-d); font-size:11px; color:var(--emerald); text-transform:uppercase; }
.housing-body { padding:12px 16px; }
.cmd-list { display:flex; flex-direction:column; gap:4px; }
.cmd-row { display:flex; align-items:center; gap:8px; background:var(--bg-input); border:2px solid var(--border-md); padding:6px 10px; box-shadow:inset 2px 2px 0 rgba(0,0,0,0.4); }
.cmd-row:hover { border-color:var(--emerald-border); }
.cmd-text { font-family:var(--font-m); font-size:13px; color:var(--emerald); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmd-desc { font-size:12px; color:var(--text-3); flex-shrink:0; }
.cmd-copy-btn { padding:5px 10px; font-family:var(--font-d); font-size:9px; text-transform:uppercase; background:var(--emerald-soft); border:2px solid var(--emerald-border); color:var(--emerald); cursor:pointer; flex-shrink:0; }
.cmd-copy-btn:hover { background:var(--emerald); color:#1a1206; }
.cmd-copy-btn.copied { background:var(--green-soft); border-color:rgba(85,255,85,0.3); color:var(--green); }
.visit-row { display:flex; gap:6px; margin-bottom:10px; }
.cmd-preview { background:var(--bg-input); border:2px solid var(--border-md); padding:8px 12px; font-family:var(--font-m); font-size:11px; word-break:break-all; min-height:36px; color:var(--text-3); box-shadow:inset 2px 2px 0 rgba(0,0,0,0.4); }
.housing-tips { display:flex; flex-direction:column; gap:4px; }
.housing-tip { display:flex; gap:8px; align-items:flex-start; padding:8px 10px; background:var(--bg-input); font-size:13px; color:var(--text-2); line-height:1.6; border:2px solid var(--border); }
.housing-staff-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:14px; padding:10px 14px; background:var(--bg-card); border:2px solid var(--emerald-border); }
.staff-badge { display:flex; align-items:center; gap:6px; }

/* ── HOUSING SELECT LANDING CARDS ────────────────────────────────────────── */
.housing-select-page { min-height: calc(100vh - 62px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.housing-select-title { font-family:var(--font-d); font-size: clamp(20px, 4vw, 34px); color: #fff; text-align: center; margin-bottom: 8px; text-transform: uppercase; }
.housing-select-sub { font-size: 14px; color: var(--text-2); text-align: center; margin-bottom: 40px; font-family: var(--font-m); }
.housing-select-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; width: min(720px, 100%); }
.housing-card {
  position: relative; overflow: hidden; cursor: pointer;
  border: 2px solid var(--border-hi); box-shadow: var(--px-sh);
  min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  background: var(--bg-card);
}
.housing-card:hover { transform: translate(-3px,-3px); box-shadow: var(--px-sh-lg); }
.housing-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(0.85) contrast(1.05); transition: transform var(--t-slow); }
.housing-card:hover .housing-card-bg { transform: scale(1.04); }
.housing-card-overlay { position: absolute; inset: 0; }
.housing-card-content { position: relative; z-index: 2; padding: 26px 24px; }
.housing-card-icon { font-size: 30px; margin-bottom: 10px; display: block; }
.housing-card-name { font-family:var(--font-d); font-size: 18px; color: #fff; margin-bottom: 8px; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0,0,0,0.8); }
.housing-card-desc { font-size: 12px; color: rgba(255,255,255,0.78); margin-bottom: 20px; line-height: 1.55; font-family: var(--font-m); text-wrap: pretty; }
.housing-card-btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 20px; font-family: var(--font-d); font-size: 10px; text-transform: uppercase; border: 2px solid; cursor: pointer; box-shadow: var(--px-sh-sm); transition: transform var(--t), box-shadow var(--t); }
.housing-card-btn:hover { transform: translate(-2px,-2px); box-shadow: var(--px-sh); }

.housing-card.mst-card { border-color: var(--emerald-border); }
.housing-card.mst-card .housing-card-overlay { background: linear-gradient(to top, rgba(7,14,10,0.94) 0%, rgba(7,14,10,0.5) 50%, rgba(7,14,10,0.18) 100%); }
.housing-card.mst-card .housing-card-btn { background: var(--emerald); border-color: var(--emerald-bright); color: #1a1206; }
.housing-card.sq-card { border-color: var(--diamond-border); }
.housing-card.sq-card .housing-card-overlay { background: linear-gradient(to top, rgba(6,16,18,0.94) 0%, rgba(6,16,18,0.5) 50%, rgba(6,16,18,0.18) 100%); }
.housing-card.sq-card .housing-card-btn { background: var(--diamond); border-color: #88ffff; color: #04120f; }

/* ── SQ SUB-AREA (Diamond-Cyan accent, not purple) ───────────────────────── */
body.sq-theme .nav-link.active { background: var(--diamond-soft); border-color: var(--diamond-border); color: var(--diamond); }
body.sq-theme ::-webkit-scrollbar-thumb:hover { background: var(--diamond-dim); }
body.sq-theme .feature-card:hover { border-color: var(--diamond-border); }
body.sq-theme .fc-icon-wrap { background: var(--diamond-soft); border-color: var(--diamond-border); }
body.sq-theme .btn-purple { background: var(--diamond-soft); border-color: var(--diamond-border); color: var(--diamond); }
body.sq-theme .btn-purple:hover { background: var(--diamond); border-color: #88ffff; color: #04120f; }
body.sq-theme .page-title { color: var(--diamond); }
body.sq-theme .trade-title { color: var(--diamond); }

.sq-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.sq-stat-card { background: var(--bg-card); border: 2px solid var(--diamond-border); padding: 20px 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--px-sh-sm); transition: transform var(--t), box-shadow var(--t); }
.sq-stat-card:hover { transform: translate(-2px,-2px); box-shadow: var(--px-sh); }
.sq-stat-icon { font-size: 24px; }
.sq-stat-label { font-family:var(--font-d); font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
.sq-stat-value { font-family: var(--font-t); font-size: 32px; color: var(--diamond); line-height: 1; font-variant-numeric: tabular-nums; }
.sq-stat-sub { font-size: 11px; color: var(--text-3); font-family: var(--font-m); }

/* ── PLAYER COMPARE ──────────────────────────────────────────────────────── */
.btn-compare { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; font-family:var(--font-d); font-size:9px; text-transform:uppercase; background:var(--emerald-soft); border:2px solid var(--emerald-border); color:var(--emerald); cursor:pointer; white-space:nowrap; box-shadow:var(--px-sh-sm); transition:transform var(--t), box-shadow var(--t), background var(--t); }
.btn-compare:hover { background:var(--emerald-glow); transform:translate(-2px,-2px); box-shadow:var(--px-sh); color:var(--emerald-bright); }
.cmp-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.cmp-player-card { flex:1; display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg-card); border:2px solid var(--border-md); }
.cmp-p1 { border-color:var(--emerald-border); background:var(--emerald-soft); }
.cmp-p2 { border-color:var(--diamond-border); background:var(--diamond-soft); }
.cmp-avatar { width:32px; height:32px; image-rendering:pixelated; border:2px solid var(--border-md); }
.cmp-avatar-sm { width:28px; height:28px; image-rendering:pixelated; border:2px solid var(--border-md); }
.cmp-name { font-weight:700; font-size:14px; color:var(--text); }
.cmp-vs { font-family:var(--font-d); font-size:11px; color:var(--text-3); letter-spacing:1px; flex-shrink:0; }
.cmp-input-wrap { padding:4px; }
.cmp-input { border:none !important; background:transparent !important; padding:6px 8px !important; font-size:14px !important; font-weight:700 !important; box-shadow:none !important; }
.btn-compare-go { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; font-family:var(--font-d); font-size:11px; text-transform:uppercase; background:var(--emerald-soft); border:2px solid var(--emerald-border); color:var(--emerald); cursor:pointer; box-shadow:var(--px-sh-sm); margin-bottom:16px; transition:transform var(--t), box-shadow var(--t), background var(--t); }
.btn-compare-go:hover { background:var(--emerald-glow); transform:translate(-2px,-2px); box-shadow:var(--px-sh); color:var(--emerald-bright); }
.cmp-scoreboard { display:flex; align-items:center; gap:0; background:var(--bg-card); border:2px solid var(--border-md); padding:14px 16px; margin-bottom:20px; box-shadow:var(--px-sh-sm); }
.cmp-score-side { flex:1; display:flex; align-items:center; gap:8px; }
.cmp-score-side:last-child { justify-content:flex-end; }
.cmp-score-name { font-size:13px; font-weight:700; color:var(--text-2); }
.cmp-score-num { font-family:var(--font-t); font-size:26px; min-width:24px; text-align:center; color:var(--emerald-bright); font-variant-numeric:tabular-nums; }
.cmp-score-divider { flex-shrink:0; padding:6px 16px; font-family:var(--font-d); font-size:9px; text-align:center; white-space:nowrap; color:var(--text-3); }
.cmp-winner { opacity:1; }
.cmp-bars { display:flex; flex-direction:column; gap:10px; }
.cmp-row { display:flex; flex-direction:column; gap:4px; }
.cmp-row-label { font-family:var(--font-d); font-size:9px; color:var(--text-3); text-align:center; letter-spacing:0.5px; text-transform:uppercase; }
.cmp-row-body { display:flex; align-items:center; gap:8px; }
.cmp-val { font-size:12px; color:var(--text-3); min-width:60px; font-family:var(--font-m); font-variant-numeric:tabular-nums; }
.cmp-val-left { text-align:right; }
.cmp-val-right { text-align:left; }
.cmp-val-win { color:var(--emerald) !important; font-weight:700; }
.cmp-bar-wrap { flex:1; display:flex; align-items:center; gap:2px; height:22px; }
.cmp-bar-left { flex:1; height:100%; display:flex; justify-content:flex-end; background:var(--bg-input); overflow:hidden; }
.cmp-bar-right { flex:1; height:100%; display:flex; justify-content:flex-start; background:var(--bg-input); overflow:hidden; }
.cmp-bar-center { width:2px; height:100%; background:var(--border-hi); flex-shrink:0; }
.cmp-bar-fill-left { height:100%; transition:width 0.5s steps(10,end); background:var(--emerald); }
.cmp-bar-fill-right { height:100%; transition:width 0.5s steps(10,end); background:var(--diamond); }

/* ── BOT MONITOR (bm-*) ──────────────────────────────────────────────────── */
.bm-wrap { display:flex; flex-direction:column; gap:14px; }
.bm-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 14px; background:var(--bg-card); border:2px solid var(--border-md); box-shadow:var(--px-sh-sm); }
.bm-topbar-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bm-top-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.bm-summary-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bm-state-chip, .bm-tps-chip, .bm-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; font-family:var(--font-d); font-size:9px; text-transform:uppercase; letter-spacing:0.5px; border:2px solid var(--border-md); background:var(--bg-input); color:var(--text-2); }
.bm-chip-main { color:var(--emerald); border-color:var(--emerald-border); background:var(--emerald-soft); }
.bm-chip-scanner { color:var(--diamond); border-color:var(--diamond-border); background:var(--diamond-soft); }
.bm-tps-chip { color:var(--gold); border-color:var(--gold-border); background:var(--gold-soft); }
.bm-status-dot { width:8px; height:8px; flex-shrink:0; background:var(--text-3); }
.bm-refreshed { font-family:var(--font-m); font-size:10px; color:var(--text-4); }

.bm-vars-grid, .bm-info-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
.bm-card { background:var(--bg-card); border:2px solid var(--border-md); box-shadow:var(--px-sh-sm); overflow:hidden; }
.bm-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; background:var(--bg-panel); border-bottom:2px solid var(--border-md); flex-wrap:wrap; }
.bm-card-title { font-family:var(--font-d); font-size:11px; color:var(--emerald); text-transform:uppercase; }
.bm-card-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.bm-panel { padding:14px; }
.bm-panel-title { font-family:var(--font-d); font-size:11px; color:var(--emerald); text-transform:uppercase; margin-bottom:4px; }
.bm-panel-sub { font-size:11px; color:var(--text-3); font-family:var(--font-m); margin-bottom:12px; }
.bm-divider { height:2px; background:var(--border); margin:12px 0; }
.bm-info-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border-bottom:1px solid var(--border); font-family:var(--font-m); font-size:12px; }
.bm-info-row:last-child { border-bottom:none; }
.bm-info-lbl { color:var(--text-3); }
.bm-info-val { color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }
.bm-var-cell { display:flex; flex-direction:column; gap:2px; padding:8px 10px; background:var(--bg-input); border:2px solid var(--border); }
.bm-var-k { font-family:var(--font-d); font-size:8px; color:var(--text-3); text-transform:uppercase; }
.bm-var-v { font-family:var(--font-m); font-size:13px; color:var(--emerald-bright); font-variant-numeric:tabular-nums; }

.bm-pill-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; font-family:var(--font-d); font-size:9px; text-transform:uppercase; background:var(--bg-card2); border:2px solid var(--border-hi); color:var(--text-2); cursor:pointer; box-shadow:var(--px-sh-sm); transition:transform var(--t), box-shadow var(--t), color var(--t), border-color var(--t); }
.bm-pill-btn:hover { transform:translate(-2px,-2px); box-shadow:var(--px-sh); color:var(--emerald-bright); border-color:var(--emerald-border); }
.bm-pill-active { color:var(--emerald); border-color:var(--emerald-border); background:var(--emerald-soft); }
.bm-pill-danger { color:var(--red); border-color:var(--red-border); background:var(--red-soft); }
.bm-pill-danger:hover { color:#1a0606; background:var(--red); border-color:var(--red); }
.bm-pill-purple { color:var(--diamond); border-color:var(--diamond-border); background:var(--diamond-soft); }
.bm-pill-purple:hover { color:#04120f; background:var(--diamond); border-color:#88ffff; }

.bm-log-box { background:var(--bg-2); border:2px solid var(--border-md); padding:10px; max-height:280px; overflow-y:auto; box-shadow:inset 2px 2px 0 rgba(0,0,0,0.4); display:flex; flex-direction:column; gap:1px; }
.bm-log-row { display:flex; align-items:baseline; gap:8px; font-family:var(--font-m); font-size:11px; padding:2px 4px; }
.bm-log-row:hover { background:var(--emerald-soft); }
.bm-log-time { color:var(--text-4); flex-shrink:0; font-variant-numeric:tabular-nums; }
.bm-log-level { flex-shrink:0; font-family:var(--font-d); font-size:8px; text-transform:uppercase; padding:1px 5px; border:1px solid var(--border); color:var(--text-3); }
.bm-log-level.info  { color:var(--diamond); border-color:var(--diamond-border); }
.bm-log-level.warn  { color:var(--gold); border-color:var(--gold-border); }
.bm-log-level.error { color:var(--red); border-color:var(--red-border); }
.bm-log-msg { color:var(--text-2); word-break:break-word; }

.bm-empty, .bm-empty-state { text-align:center; padding:36px 16px; border:2px dashed var(--border-md); color:var(--text-3); font-family:var(--font-m); font-size:12px; }
.bm-hint { font-size:11px; color:var(--text-3); font-family:var(--font-m); line-height:1.5; }

.bm-add-form { display:flex; flex-direction:column; gap:12px; }
.bm-add-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.bm-add-footer { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.bm-field { display:flex; flex-direction:column; gap:5px; }
.bm-lbl { font-family:var(--font-d); font-size:9px; color:var(--text-3); text-transform:uppercase; letter-spacing:0.5px; }

/* MSA device-code banner */
.bm-msa-banner { background:var(--gold-soft); border:2px solid var(--gold-border); padding:14px; box-shadow:var(--px-sh-sm); }
.bm-msa-top { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.bm-msa-icon { font-size:18px; }
.bm-msa-label { font-family:var(--font-d); font-size:9px; color:var(--gold); text-transform:uppercase; letter-spacing:0.5px; }
.bm-msa-title { font-family:var(--font-d); font-size:12px; color:var(--gold); text-transform:uppercase; }
.bm-msa-body { font-size:12px; color:var(--text-2); line-height:1.6; font-family:var(--font-m); }
.bm-msa-code-row { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.bm-msa-code-box { background:var(--bg-2); border:2px solid var(--gold-border); padding:8px 14px; box-shadow:inset 2px 2px 0 rgba(0,0,0,0.4); }
.bm-msa-code { font-family:var(--font-t); font-size:24px; color:var(--gold); letter-spacing:3px; }

/* ── SKELETON LOADING ────────────────────────────────────────────────────── */
.skeleton { background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card2) 50%, var(--bg-card) 75%); background-size: 400px 100%; animation: skel-shim 1.4s steps(8,end) infinite; }
@keyframes skel-shim { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.skeleton-card { background: var(--bg-card); border: 2px solid var(--border); padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--px-sh-sm); }
.skeleton-line { height: 12px; }
.skeleton-heading { height: 18px; width: 55%; }
.skeleton-avatar { width: 32px; height: 32px; flex-shrink: 0; }
.skeleton-badge { height: 16px; width: 60px; }
.skeleton-block { height: 60px; width: 100%; }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }

/* ── STAT BARS ───────────────────────────────────────────────────────────── */
.stat-bar-wrap { display: flex; flex-direction: column; gap: 3px; }
.stat-bar-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); font-family: var(--font-m); font-variant-numeric: tabular-nums; }
.stat-bar-track { height: 8px; background: var(--bg-input); border: 2px solid var(--border); overflow: hidden; }
.stat-bar-fill { height: 100%; background: var(--emerald); transform-origin: left; animation: bar-grow 0.5s steps(8,end) both; }
@keyframes bar-grow { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* ── EMPTY / NO-DATA (JS) ────────────────────────────────────────────────── */
.empty-state, .no-data { font-family: var(--font-m); padding: 40px 16px; text-align: center; color: var(--text-3); }

/* ── TOOLTIPS (data-tip) ─────────────────────────────────────────────────── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: var(--bg-panel); border: 2px solid var(--border-hi);
  color: var(--text); font-family: var(--font-m); font-size: 11px; padding: 5px 10px;
  opacity: 0; pointer-events: none; z-index: 999; box-shadow: var(--px-sh-sm);
  transition: opacity var(--t-fast);
}
[data-tip]:hover::after { opacity: 1; }

/* ── MOBILE BOTTOM NAV ───────────────────────────────────────────────────── */
.mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  height: 54px; background: var(--bg-nav);
  border-top: 2px solid var(--emerald-border); padding: 0 4px;
  box-shadow: 0 -4px 0 rgba(0,0,0,0.5);
}
.mobile-nav-inner { display: flex; align-items: center; justify-content: space-around; height: 100%; max-width: 600px; margin: 0 auto; }
.mobile-nav-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; border: 2px solid transparent; background: none; cursor: pointer; min-width: 48px; transition: background var(--t-fast); }
.mobile-nav-btn:active { transform: translateY(1px); }
.mobile-nav-btn.active { background: var(--emerald-soft); border-color: var(--emerald-border); }
.mobile-nav-icon { font-size: 18px; line-height: 1; }
.mobile-nav-label { font-family: var(--font-d); font-size: 8px; letter-spacing: 0.3px; color: var(--text-3); text-transform: uppercase; }
.mobile-nav-btn.active .mobile-nav-label { color: var(--emerald); }

/* ── AUDIT LOG ───────────────────────────────────────────────────────────── */
#audit-log-content table { width: 100%; border-collapse: collapse; font-family: var(--font-m); font-size: 12px; }
#audit-log-content table th { position: sticky; top: 0; background: var(--bg-card2); z-index: 1; font-family: var(--font-d); font-size: 9px; text-transform: uppercase; color: var(--gold); padding: 8px 12px; border-bottom: 2px solid var(--border-md); text-align: left; }
#audit-log-content table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text-2); }
#audit-log-content table tr:hover td { background: var(--emerald-soft); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .housing-grid { grid-template-columns: 1fr; }
  .housing-full { grid-column: 1; }
}
@media (max-width: 768px) {
  .mobile-nav { display: flex; }
  body { padding-bottom: 54px; }
  .nav-links { display: none !important; }
  .lb-table th:last-child, .lb-table td:last-child { display: none; }
}
@media (max-width: 600px) {
  .dash-keys-strip, .dash-crate-strip { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .dash-key-item, .dash-crate-item { padding: 8px 4px; }
  .dash-section-row { grid-template-columns: repeat(2, 1fr); }
  .cmp-header { flex-direction: column; gap: 8px; }
  .cmp-val { min-width: 45px; font-size: 11px; }
  .cmp-score-name { font-size: 11px; }
  .item-search-lore-popup, .trade-lore-popup { min-width: 200px; max-width: calc(100vw - 16px); }
  .stat-chart-header { flex-direction: column; align-items: flex-start; }
}

/* ── PRINT ───────────────────────────────────────────────────────────────── */
@media print {
  .navbar, .mobile-nav, .site-footer, .btn, .modal-bg, .space-bg { display: none !important; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}