/**
 * SQL Practice Arena – Public Stylesheet
 *
 * Design direction: Warm amber terminal aesthetic.
 * Like vintage data terminals — parchment backgrounds, amber/gold accents,
 * monospaced precision. Completely distinct from WP Code Arena's dark IDE.
 *
 * @package SQLPracticeArena
 */

/* ─────────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Parchment surfaces */
  --spa-bg-base:    #fdf6e3;   /* warm off-white */
  --spa-bg-panel:   #fef9f0;   /* panel background */
  --spa-bg-raised:  #fff8e6;   /* cards, raised surfaces */
  --spa-bg-sunken:  #f5edd8;   /* inputs, code blocks */
  --spa-bg-dark:    #2d2416;   /* dark accent areas */

  /* Borders */
  --spa-border:     #e8d9b5;
  --spa-border-soft:#f0e4c4;
  --spa-border-dark:#c4a96e;

  /* Amber accent system */
  --spa-amber:      #d97706;   /* primary accent */
  --spa-amber-light:#fbbf24;   /* hover / glow */
  --spa-amber-dim:  rgba(217,119,6,.12);
  --spa-amber-glow: 0 0 12px rgba(251,191,36,.35);

  /* Text */
  --spa-text-0:     #2d2416;   /* darkest — main content */
  --spa-text-1:     #6b5c3e;   /* secondary */
  --spa-text-2:     #a89070;   /* muted */
  --spa-text-inv:   #fdf6e3;   /* inverse (on dark) */

  /* Semantic */
  --spa-green:      #15803d;
  --spa-green-dim:  rgba(21,128,61,.12);
  --spa-red:        #b91c1c;
  --spa-red-dim:    rgba(185,28,28,.12);
  --spa-blue:       #1d4ed8;
  --spa-blue-dim:   rgba(29,78,216,.10);

  /* Difficulty */
  --spa-easy:       #15803d;
  --spa-medium:     #b45309;
  --spa-hard:       #b91c1c;

  /* Sizing */
  --spa-radius:     6px;
  --spa-radius-sm:  3px;
  --spa-radius-lg:  10px;
  --spa-topbar-h:   52px;
  --spa-toolbar-h:  46px;
  --spa-results-h:  240px;

  /* Fonts */
  --spa-font-ui:    'IBM Plex Sans', 'Palatino', Georgia, serif;
  --spa-font-mono:  'IBM Plex Mono', 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --spa-font-display: 'Playfair Display', 'Palatino Linotype', serif;

  /* Transitions */
  --spa-tr:         0.18s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GOOGLE FONTS IMPORT
───────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=Playfair+Display:wght@700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────────
   SCOPE RESET
───────────────────────────────────────────────────────────────────────────── */

.spa-problem-page *,
.spa-problems-page *,
.spa-dashboard * {
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   EDITOR PAGE LAYOUT
───────────────────────────────────────────────────────────────────────────── */

.spa-problem-page {
  display:        flex;
  flex-direction: column;
  /* Height is set dynamically by JS to fill from plugin top to viewport bottom.
     Fallback: 80vh so it's usable even without JS. */
  height:         80vh;
  min-height:     600px;
  background:     var(--spa-bg-base);
  color:          var(--spa-text-0);
  font-family:    var(--spa-font-ui);
  overflow:       hidden;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(217,119,6,.06) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(217,119,6,.04) 0%, transparent 40%);
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.spa-topbar {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  height:           var(--spa-topbar-h);
  padding:          0 18px;
  background:       var(--spa-bg-dark);
  border-bottom:    2px solid var(--spa-amber);
  flex-shrink:      0;
  z-index:          100;
}

.spa-back-link {
  color:           var(--spa-amber-light);
  font-size:       13px;
  font-family:     var(--spa-font-mono);
  text-decoration: none;
  transition:      color var(--spa-tr);
}
.spa-back-link:hover { color: #fff; }

.spa-topbar__center {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.spa-logo-mark {
  color:     var(--spa-amber);
  font-size: 20px;
  line-height: 1;
}

.spa-problem-name {
  font-family: var(--spa-font-display);
  font-size:   15px;
  color:       var(--spa-text-inv);
  letter-spacing: 0.01em;
}

.spa-user-chip {
  font-size:     12px;
  font-family:   var(--spa-font-mono);
  color:         var(--spa-amber-light);
  background:    rgba(217,119,6,.2);
  border:        1px solid rgba(217,119,6,.4);
  padding:       3px 10px;
  border-radius: 20px;
}

/* ── Split layout ────────────────────────────────────────────────────────── */

.spa-split-layout {
  display:  flex;
  flex:     1;
  overflow: hidden;
  min-height: 0;
}

.spa-panel {
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  min-height:     0;
}

.spa-panel--left {
  width:       42%;
  min-width:   280px;
  max-width:   62%;
  background:  var(--spa-bg-panel);
  border-right:1px solid var(--spa-border);
  overflow-y:  auto;
}

.spa-panel--right {
  flex:        1;
  background:  var(--spa-bg-base);
  display:     flex;
  flex-direction: column;
  min-height:  0;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */

.spa-divider {
  width:        5px;
  background:   var(--spa-border);
  cursor:       col-resize;
  flex-shrink:  0;
  transition:   background var(--spa-tr);
}
.spa-divider:hover { background: var(--spa-amber); }

/* ─────────────────────────────────────────────────────────────────────────────
   LEFT PANEL CONTENT
───────────────────────────────────────────────────────────────────────────── */

.spa-tab-nav {
  display:       flex;
  border-bottom: 1px solid var(--spa-border);
  background:    var(--spa-bg-sunken);
  flex-shrink:   0;
  position:      sticky;
  top:           0;
  z-index:       10;
}

.spa-tab-nav__btn {
  padding:       9px 18px;
  background:    none;
  border:        none;
  border-bottom: 2px solid transparent;
  font-size:     12px;
  font-family:   var(--spa-font-mono);
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color:         var(--spa-text-2);
  cursor:        pointer;
  transition:    color var(--spa-tr), border-color var(--spa-tr);
}
.spa-tab-nav__btn:hover  { color: var(--spa-text-0); }
.spa-tab-nav__btn.active {
  color:              var(--spa-amber);
  border-bottom-color: var(--spa-amber);
}

.spa-tab-pane       { display: none; }
.spa-tab-pane.active{ display: block; }

.spa-description-body {
  padding:     24px;
  font-size:   14px;
  line-height: 1.75;
  color:       var(--spa-text-0);
}
.spa-description-body strong { color: var(--spa-text-0); font-weight: 700; }
.spa-description-body code {
  background:    var(--spa-bg-sunken);
  border:        1px solid var(--spa-border);
  border-radius: var(--spa-radius-sm);
  padding:       1px 5px;
  font-family:   var(--spa-font-mono);
  font-size:     13px;
  color:         var(--spa-amber);
}

.spa-section       { padding: 0 24px 20px; }
.spa-section-label {
  font-size:      11px;
  font-family:    var(--spa-font-mono);
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--spa-text-2);
  margin-bottom:  8px;
  padding-bottom: 5px;
  border-bottom:  1px solid var(--spa-border-soft);
}

.spa-code-pre {
  font-family:   var(--spa-font-mono);
  font-size:     12px;
  background:    var(--spa-bg-sunken);
  border:        1px solid var(--spa-border);
  border-radius: var(--spa-radius);
  padding:       12px 14px;
  overflow-x:    auto;
  white-space:   pre;
  line-height:   1.6;
  color:         var(--spa-text-0);
}

.spa-table-chips {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
}
.spa-table-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  background:    var(--spa-amber-dim);
  border:        1px solid var(--spa-amber);
  border-radius: var(--spa-radius);
  padding:       4px 10px;
  font-size:     12px;
  font-family:   var(--spa-font-mono);
  color:         var(--spa-amber);
  font-weight:   600;
}
.spa-chip-icon { opacity: 0.7; }

.spa-hints-list {
  padding-left: 20px;
  font-size:    14px;
  line-height:  1.7;
  color:        var(--spa-text-1);
}
.spa-hints-list li { margin-bottom: 8px; }

.spa-notice,
.spa-loading-text {
  padding:    24px;
  color:      var(--spa-text-2);
  font-size:  13px;
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RIGHT PANEL — EDITOR + RESULTS
───────────────────────────────────────────────────────────────────────────── */

.spa-editor-toolbar {
  display:       flex;
  align-items:   center;
  height:        var(--spa-toolbar-h);
  padding:       0 12px;
  gap:           6px;
  background:    var(--spa-bg-sunken);
  border-bottom: 1px solid var(--spa-border);
  flex-shrink:   0;
}

.spa-lang-badge {
  font-size:     11px;
  font-family:   var(--spa-font-mono);
  font-weight:   700;
  background:    var(--spa-amber-dim);
  border:        1px solid var(--spa-amber);
  color:         var(--spa-amber);
  padding:       2px 8px;
  border-radius: var(--spa-radius-sm);
  letter-spacing: 0.06em;
}

.spa-toolbar-sep {
  flex: 1;
}

.spa-editor-container {
  flex:        1;
  min-height:  200px; /* Monaco needs real height to render */
  overflow:    hidden;
  background:  #fff;
}

/* ── Results area ────────────────────────────────────────────────────────── */

.spa-results-area {
  height:        var(--spa-results-h);
  background:    var(--spa-bg-panel);
  border-top:    2px solid var(--spa-border);
  display:       flex;
  flex-direction:column;
  flex-shrink:   0;
}

.spa-status-banner {
  display:       none;
  align-items:   center;
  gap:           10px;
  padding:       9px 14px;
  font-family:   var(--spa-font-mono);
  font-size:     13px;
  font-weight:   600;
  border-bottom: 1px solid var(--spa-border);
  flex-shrink:   0;
}
.spa-status-banner--accepted   { background: var(--spa-green-dim); color: var(--spa-green);  }
.spa-status-banner--wrong_answer{ background: var(--spa-red-dim);  color: var(--spa-red);    }
.spa-status-banner--error       { background: var(--spa-red-dim);  color: var(--spa-red);    }
.spa-status-banner--blocked     { background: var(--spa-amber-dim);color: var(--spa-amber);  }
.spa-status-banner--timeout     { background: var(--spa-amber-dim);color: var(--spa-amber);  }
.spa-status-banner--info        { background: var(--spa-bg-sunken);color: var(--spa-text-1); }

.spa-results-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         6px 12px;
  border-bottom:   1px solid var(--spa-border-soft);
  background:      var(--spa-bg-sunken);
  flex-shrink:     0;
}
.spa-results-meta {
  font-size:   11px;
  font-family: var(--spa-font-mono);
  color:       var(--spa-text-2);
}

.spa-result-output {
  flex:       1;
  overflow-y: auto;
  padding:    0;
}

.spa-result-hint {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         10px;
  height:      100%;
  color:       var(--spa-text-2);
  font-size:   13px;
  font-style:  italic;
}
.spa-hint-icon {
  color:     var(--spa-amber);
  font-size: 20px;
  opacity:   0.5;
}

.spa-result-scroll {
  overflow-x: auto;
}

.spa-result-table {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--spa-font-mono);
  font-size:       12px;
}
.spa-result-table thead th {
  padding:        7px 12px;
  background:     var(--spa-bg-dark);
  color:          var(--spa-amber-light);
  text-align:     left;
  font-weight:    600;
  letter-spacing: 0.03em;
  border-right:   1px solid rgba(217,119,6,.25);
  white-space:    nowrap;
}
.spa-result-table thead th:last-child { border-right: none; }
.spa-result-table tbody tr { border-bottom: 1px solid var(--spa-border-soft); }
.spa-result-table tbody tr:hover { background: var(--spa-amber-dim); }
.spa-result-table tbody td {
  padding:    6px 12px;
  color:      var(--spa-text-0);
  border-right: 1px solid var(--spa-border-soft);
  white-space: nowrap;
}
.spa-result-table tbody td:last-child { border-right: none; }

.spa-result-table--diff { margin-bottom: 12px; }

.spa-diff-container {
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       12px;
  padding:   12px;
}
.spa-diff-label {
  font-size:   11px;
  font-family: var(--spa-font-mono);
  font-weight: 600;
  color:       var(--spa-text-1);
  margin-bottom: 6px;
}

.spa-error-block { padding: 12px; }
.spa-error-pre {
  font-family:  var(--spa-font-mono);
  font-size:    12px;
  color:        var(--spa-red);
  background:   var(--spa-red-dim);
  border:       1px solid var(--spa-red);
  border-radius: var(--spa-radius);
  padding:      10px 14px;
  white-space:  pre-wrap;
  word-break:   break-word;
  margin:       0;
}

.spa-truncation-warn {
  padding:   8px 14px;
  font-size: 11px;
  font-family: var(--spa-font-mono);
  color:     var(--spa-amber);
  background: var(--spa-amber-dim);
  border-top: 1px solid var(--spa-border);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────────────────────── */

.spa-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             5px;
  border-radius:   var(--spa-radius);
  border:          1px solid transparent;
  cursor:          pointer;
  font-family:     var(--spa-font-mono);
  font-size:       12px;
  font-weight:     600;
  text-decoration: none;
  transition:      all var(--spa-tr);
  white-space:     nowrap;
  padding:         6px 14px;
  letter-spacing:  0.03em;
}
.spa-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.spa-btn--loading {
  position: relative;
  color: transparent !important;
}
.spa-btn--loading::after {
  content:      '';
  position:     absolute;
  width:        12px; height: 12px;
  border:       2px solid rgba(255,255,255,.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation:    spa-spin .6s linear infinite;
}

.spa-btn--run {
  background:   var(--spa-bg-dark);
  border-color: var(--spa-amber);
  color:        var(--spa-amber-light);
}
.spa-btn--run:hover:not(:disabled) {
  background: var(--spa-amber);
  color:      var(--spa-bg-dark);
  box-shadow: var(--spa-amber-glow);
}

.spa-btn--submit {
  background:   var(--spa-amber);
  border-color: var(--spa-amber);
  color:        var(--spa-bg-dark);
}
.spa-btn--submit:hover:not(:disabled) {
  background: var(--spa-amber-light);
  box-shadow: var(--spa-amber-glow);
}

.spa-btn--ghost {
  background:  transparent;
  border-color: var(--spa-border-dark);
  color:        var(--spa-text-1);
}
.spa-btn--ghost:hover:not(:disabled) {
  border-color: var(--spa-amber);
  color:        var(--spa-amber);
}

.spa-btn--outline {
  background:  transparent;
  border-color: var(--spa-amber-light);
  color:        var(--spa-amber-light);
}
.spa-btn--outline:hover { background: var(--spa-amber-dim); }

.spa-btn--xs { padding: 2px 8px; font-size: 11px; }
.spa-btn--sm { padding: 4px 10px; font-size: 12px; }

/* ─────────────────────────────────────────────────────────────────────────────
   DIFFICULTY BADGES
───────────────────────────────────────────────────────────────────────────── */

.spa-diff-badge {
  display:       inline-block;
  padding:       2px 9px;
  border-radius: 20px;
  font-size:     11px;
  font-family:   var(--spa-font-mono);
  font-weight:   700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.spa-diff-badge--easy   { background: rgba(21,128,61,.12);   color: var(--spa-easy);   border: 1px solid var(--spa-easy);   }
.spa-diff-badge--medium { background: rgba(180,83,9,.12);    color: var(--spa-medium); border: 1px solid var(--spa-medium); }
.spa-diff-badge--hard   { background: rgba(185,28,28,.12);   color: var(--spa-hard);   border: 1px solid var(--spa-hard);   }

/* ─────────────────────────────────────────────────────────────────────────────
   PROBLEM LIST PAGE
───────────────────────────────────────────────────────────────────────────── */

.spa-problems-page {
  max-width:   1140px;
  margin:      0 auto;
  padding:     0 20px 40px;
  font-family: var(--spa-font-ui);
  color:       var(--spa-text-0);
  background:  var(--spa-bg-base);
  min-height:  100vh;
}

.spa-problems-hero {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             16px;
  padding:         40px 0 28px;
  border-bottom:   2px solid var(--spa-border);
  margin-bottom:   28px;
}

.spa-hero-title {
  font-family:   var(--spa-font-display);
  font-size:     32px;
  color:         var(--spa-text-0);
  margin:        0 0 6px;
  display:       flex;
  align-items:   center;
  gap:           10px;
}
.spa-hero-title .spa-logo-mark { color: var(--spa-amber); font-size: 28px; }
.spa-hero-sub { font-size: 14px; color: var(--spa-text-1); margin: 0; }

.spa-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.spa-filter-chip {
  padding:       5px 14px;
  border-radius: 20px;
  font-size:     12px;
  font-family:   var(--spa-font-mono);
  font-weight:   600;
  text-decoration: none;
  background:    var(--spa-bg-sunken);
  border:        1px solid var(--spa-border);
  color:         var(--spa-text-1);
  transition:    all var(--spa-tr);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.spa-filter-chip:hover  { border-color: var(--spa-amber); color: var(--spa-amber); }
.spa-filter-chip.active { background: var(--spa-amber-dim); border-color: var(--spa-amber); color: var(--spa-amber); }
.spa-filter-chip.diff--easy   { color: var(--spa-easy);   border-color: var(--spa-easy);   background: rgba(21,128,61,.1); }
.spa-filter-chip.diff--medium { color: var(--spa-medium); border-color: var(--spa-medium); background: rgba(180,83,9,.1);  }
.spa-filter-chip.diff--hard   { color: var(--spa-hard);   border-color: var(--spa-hard);   background: rgba(185,28,28,.1); }

.spa-problem-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   16px;
}

.spa-problem-card {
  display:       flex;
  flex-direction:column;
  background:    var(--spa-bg-raised);
  border:        1px solid var(--spa-border);
  border-radius: var(--spa-radius-lg);
  padding:       18px 20px;
  text-decoration: none;
  color:         var(--spa-text-0);
  transition:    all var(--spa-tr);
  cursor:        pointer;
  position:      relative;
  overflow:      hidden;
}
.spa-problem-card::before {
  content:    '';
  position:   absolute;
  left:       0; top: 0; bottom: 0;
  width:      3px;
  background: var(--spa-amber-dim);
  transition: background var(--spa-tr);
}
.spa-problem-card:hover {
  border-color: var(--spa-amber);
  box-shadow:   0 4px 20px rgba(217,119,6,.12);
  transform:    translateY(-1px);
}
.spa-problem-card:hover::before { background: var(--spa-amber); }
.spa-problem-card--solved::before { background: var(--spa-green); }

.spa-card-header {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 10px;
}
.spa-card-num {
  font-family:  var(--spa-font-mono);
  font-size:    11px;
  color:        var(--spa-text-2);
  font-weight:  600;
  min-width:    20px;
}
.spa-solved-check {
  color:      var(--spa-green);
  font-weight: 700;
  font-size:  14px;
}

.spa-card-title {
  font-size:    16px;
  font-weight:  600;
  color:        var(--spa-text-0);
  margin:       0 0 auto;
  line-height:  1.3;
  flex:         1;
}

.spa-card-footer {
  margin-top:  14px;
  padding-top: 10px;
  border-top:  1px solid var(--spa-border-soft);
}
.spa-card-rate {
  font-size:   11px;
  font-family: var(--spa-font-mono);
  color:       var(--spa-text-2);
}

.spa-empty { grid-column: 1 / -1; text-align: center; padding: 60px 0; color: var(--spa-text-2); }

/* ─────────────────────────────────────────────────────────────────────────────
   DASHBOARD
───────────────────────────────────────────────────────────────────────────── */

.spa-dashboard {
  max-width:   860px;
  margin:      0 auto;
  padding:     32px 20px;
  font-family: var(--spa-font-ui);
  color:       var(--spa-text-0);
}

.spa-dash-hero {
  display:       flex;
  align-items:   center;
  gap:           20px;
  padding:       24px;
  background:    var(--spa-bg-raised);
  border:        1px solid var(--spa-border);
  border-radius: var(--spa-radius-lg);
  margin-bottom: 24px;
  border-top:    3px solid var(--spa-amber);
}
.spa-dash-avatar img { border-radius: 50%; border: 2px solid var(--spa-amber); }
.spa-dash-name       { font-family: var(--spa-font-display); font-size: 22px; margin: 0 0 4px; }
.spa-dash-handle     { font-family: var(--spa-font-mono); font-size: 13px; color: var(--spa-text-1); margin: 0; }
.spa-dash-rank       { font-family: var(--spa-font-mono); font-size: 13px; color: var(--spa-amber); margin: 4px 0 0; }

.spa-dash-stats {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   14px;
  margin-bottom:         24px;
}
.spa-stat-tile {
  background:    var(--spa-bg-raised);
  border:        1px solid var(--spa-border);
  border-radius: var(--spa-radius-lg);
  padding:       18px;
  text-align:    center;
  transition:    border-color var(--spa-tr);
}
.spa-stat-tile:hover { border-color: var(--spa-amber); }
.spa-stat-num { font-family: var(--spa-font-display); font-size: 30px; color: var(--spa-amber); }
.spa-stat-lbl { font-size: 11px; font-family: var(--spa-font-mono); color: var(--spa-text-2); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

.spa-dash-section {
  background:    var(--spa-bg-raised);
  border:        1px solid var(--spa-border);
  border-radius: var(--spa-radius-lg);
  padding:       20px;
  margin-bottom: 20px;
}
.spa-dash-section-title {
  font-family:    var(--spa-font-mono);
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--spa-text-2);
  margin:         0 0 16px;
}
.spa-empty-msg { color: var(--spa-text-2); font-style: italic; font-size: 14px; }

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED TABLE
───────────────────────────────────────────────────────────────────────────── */

.spa-table-wrap {
  overflow: auto;
  border:   1px solid var(--spa-border);
  border-radius: var(--spa-radius);
}

.spa-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       13px;
}
.spa-table thead th {
  padding:        9px 14px;
  background:     var(--spa-bg-sunken);
  font-size:      11px;
  font-family:    var(--spa-font-mono);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--spa-text-1);
  text-align:     left;
  border-bottom:  1px solid var(--spa-border);
}
.spa-table tbody tr  { border-bottom: 1px solid var(--spa-border-soft); }
.spa-table tbody tr:last-child { border-bottom: none; }
.spa-table tbody tr:hover { background: var(--spa-amber-dim); }
.spa-table tbody td  { padding: 10px 14px; vertical-align: middle; }

.spa-status-badge {
  display:       inline-block;
  padding:       2px 8px;
  border-radius: 20px;
  font-size:     11px;
  font-family:   var(--spa-font-mono);
  font-weight:   700;
}
.s--accepted { background: var(--spa-green-dim); color: var(--spa-green); border: 1px solid var(--spa-green); }
.s--wrong    { background: var(--spa-red-dim);   color: var(--spa-red);   border: 1px solid var(--spa-red); }
.s--error    { background: var(--spa-red-dim);   color: var(--spa-red);   border: 1px solid var(--spa-red); }
.s--pending  { background: var(--spa-amber-dim); color: var(--spa-amber); border: 1px solid var(--spa-amber); }

/* ─────────────────────────────────────────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────────────────────────────────────────── */

@keyframes spa-spin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .spa-split-layout { flex-direction: column; }
  .spa-panel--left  { width: 100% !important; max-width: 100%; min-height: 300px; border-right: none; border-bottom: 1px solid var(--spa-border); }
  .spa-divider      { display: none; }
  .spa-panel--right { min-height: 500px; }
  .spa-dash-stats   { grid-template-columns: 1fr 1fr; }
  .spa-problem-grid { grid-template-columns: 1fr; }
  .spa-problems-hero{ flex-direction: column; }
}

@media (max-width: 480px) {
  .spa-dash-stats { grid-template-columns: 1fr 1fr; }
  .spa-hero-title { font-size: 24px; }
}