:root {
  --spux-panel: rgba(255,255,255,.03);
  --spux-border: rgba(201,168,76,.16);
  --spux-text: #efe8d8;
  --spux-muted: #a8b9ab;
  --spux-gold: #c9a84c;
  --spux-green: #4db870;
  --spux-red: #d96363;
}

.spux-page { padding-top: 28px; }
.spux-hero,
.spux-directory-card,
.spux-detail-card,
.spux-home-panel,
.spux-loading-card {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border: 1px solid var(--spux-border);
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,.24);
}

.spux-hero {
  padding: 28px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 1.8fr auto;
  gap: 20px;
  align-items: end;
}
.spux-title { font-size: clamp(2rem, 3vw, 3rem); margin: 0 0 10px; }
.spux-subtitle { color: var(--spux-muted); max-width: 860px; }
.spux-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.spux-archive-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.35fr);
  gap: 22px;
  align-items: start;
}
.spux-directory-card,
.spux-detail-card,
.spux-home-panel,
.spux-loading-card { padding: 20px; }
.spux-directory-head,
.spux-player-panel-head,
.spux-home-head { display:flex; gap:18px; justify-content:space-between; align-items:flex-start; }
.spux-directory-head h2,
.spux-player-panel-head h2,
.spux-home-panel h2,
.spux-home-panel h3 { margin: 0 0 4px; }
.spux-directory-head p,
.spux-panel-meta,
.spux-home-summary p { color: var(--spux-muted); }

.spux-controls,
.spux-home-control-grid { display:flex; gap:10px; flex-wrap:wrap; }
.spux-input,
.spux-select {
  min-height: 46px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--spux-border);
  color: var(--spux-text);
  border-radius: 12px;
  padding: 0 14px;
}
.spux-input { min-width: 240px; }
.spux-select { min-width: 165px; }

.spux-directory-list { display:grid; gap:12px; margin-top:18px; }
.spux-player-row {
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
  border-radius: 14px;
  color: var(--spux-text);
  padding: 14px;
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap:12px;
}
.spux-player-row:hover,
.spux-player-row.is-active {
  border-color: rgba(201,168,76,.28);
  background: rgba(201,168,76,.07);
}
.spux-player-row-main { display:flex; gap:12px; align-items:center; min-width:0; }
.spux-player-row-avatar,
.spux-player-avatar {
  width:48px; height:48px; border-radius:50%;
  background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.28);
  display:grid; place-items:center; font-weight:700; color: var(--spux-gold);
  flex: 0 0 48px;
}
.spux-player-row-name { font-weight:700; }
.spux-player-row-meta,
.spux-muted,
.spux-table-sub,
.spux-spark-empty { color: var(--spux-muted); font-size:.92rem; }
.spux-player-row-side { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.spux-player-row-diff { font-weight:700; }

.spux-player-panel { display:grid; gap:18px; }
.spux-panel-actions { display:flex; gap:10px; flex-wrap:wrap; }
.spux-stats-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.spux-stat-card {
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:14px;
  background: rgba(255,255,255,.025);
}
.spux-stat-value { font-size: 1.55rem; font-weight: 700; line-height:1.1; }
.spux-stat-label { color: var(--spux-muted); margin-top: 4px; }
.spux-stat-extra { color: var(--spux-muted); font-size:.86rem; margin-top:4px; }
.spux-chart-card,
.spux-table-card,
.spux-home-summary {
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:16px;
  background: rgba(255,255,255,.02);
}
.spux-chart-head,
.spux-table-head,
.spux-home-summary-top { display:flex; justify-content:space-between; gap:14px; align-items:center; }
.spux-chart-head h3,
.spux-table-head h3 { margin:0; }
.spux-table-wrap { overflow:auto; }
.spux-table th, .spux-table td { white-space: nowrap; }
.spux-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:28px; padding:0 10px; border-radius:999px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
}
.spux-badge--finish { background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.24); }
.spux-pill-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.spux-pill {
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--spux-text);
  padding:8px 12px;
  border-radius:999px;
}
.spux-pill.is-active,
.spux-pill:hover { border-color: rgba(201,168,76,.28); background: rgba(201,168,76,.08); }
.spux-home-controls { margin: 16px 0 18px; }
.spux-home-summary { margin-bottom: 18px; }
.spux-home-summary-chart { margin-top: 12px; }
.spux-home-section .gp-wrap { max-width: 1180px; }
.spux-no-results,
.spux-panel-empty { padding: 22px; color: var(--spux-muted); text-align:center; }
.spux-loading-card { text-align:center; color: var(--spux-muted); }
.spux-pos { color: var(--spux-green); }
.spux-neg { color: var(--spux-red); }

.spux-spark { width:120px; height:38px; }
.spux-spark-line {
  fill: none;
  stroke: var(--spux-gold);
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spux-spark-zero {
  stroke: rgba(255,255,255,.16);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

@media (max-width: 1080px) {
  .spux-archive-grid { grid-template-columns: 1fr; }
  .spux-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .spux-hero { grid-template-columns: 1fr; padding: 22px; }
  .spux-directory-head,
  .spux-player-panel-head,
  .spux-home-head,
  .spux-home-summary-top { flex-direction: column; align-items: stretch; }
  .spux-controls,
  .spux-home-control-grid { flex-direction: column; }
  .spux-input,
  .spux-select { width: 100%; min-width: 0; }
  .spux-stats-grid { grid-template-columns: 1fr; }
  .spux-player-row { grid-template-columns: 1fr; }
  .spux-player-row-side { align-items:flex-start; }
  .spux-chart-head,
  .spux-table-head { flex-direction: column; align-items:flex-start; }
  .spux-spark { width: 100%; }
  .spux-table th,
  .spux-table td { font-size: .92rem; }
}