/**
 * WP Code Arena – Public Stylesheet
 *
 * Design system: Dark IDE aesthetic with vibrant accent colours.
 * Uses CSS custom properties for full theme flexibility.
 *
 * @package WPCodeArena
 */

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

:root {
  /* Surfaces */
  --wpca-bg-0:        #0d1117;   /* deepest background */
  --wpca-bg-1:        #161b22;   /* panel background */
  --wpca-bg-2:        #1c2333;   /* elevated surface */
  --wpca-bg-3:        #222d3f;   /* hover surface */
  --wpca-border:      #30363d;   /* default border */
  --wpca-border-soft: #21262d;

  /* Text */
  --wpca-text-0:      #e6edf3;   /* primary text */
  --wpca-text-1:      #8b949e;   /* secondary */
  --wpca-text-2:      #484f58;   /* muted */

  /* Accent — electric cyan */
  --wpca-accent:      #58a6ff;
  --wpca-accent-glow: rgba(88, 166, 255, 0.25);

  /* Semantic colours */
  --wpca-green:       #3fb950;
  --wpca-green-dim:   rgba(63, 185, 80, 0.15);
  --wpca-red:         #f85149;
  --wpca-red-dim:     rgba(248, 81, 73, 0.15);
  --wpca-yellow:      #d29922;
  --wpca-yellow-dim:  rgba(210, 153, 34, 0.15);
  --wpca-orange:      #e3b341;
  --wpca-purple:      #a371f7;

  /* Difficulty colours */
  --wpca-easy:        #3fb950;
  --wpca-medium:      #d29922;
  --wpca-hard:        #f85149;

  /* Sizing */
  --wpca-radius:      8px;
  --wpca-radius-sm:   4px;
  --wpca-radius-lg:   12px;
  --wpca-header-h:    52px;
  --wpca-console-h:   220px;
  --wpca-toolbar-h:   48px;

  /* Fonts */
  --wpca-font-ui:     'Inter', 'SF Pro Display', system-ui, sans-serif;
  --wpca-font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  /* Transitions */
  --wpca-transition:  0.15s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL RESETS (scoped)
───────────────────────────────────────────────────────────────────────────── */

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

/* ─────────────────────────────────────────────────────────────────────────────
   PROBLEM PAGE LAYOUT
───────────────────────────────────────────────────────────────────────────── */

.wpca-problem-page {
  display:        flex;
  flex-direction: column;
  height:         calc(100vh - 0px);
  min-height:     600px;
  background:     var(--wpca-bg-0);
  color:          var(--wpca-text-0);
  font-family:    var(--wpca-font-ui);
  overflow:       hidden;
}

/* ── Header bar ──────────────────────────────────────────────────────────── */

.wpca-problem-header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  height:           var(--wpca-header-h);
  padding:          0 16px;
  background:       var(--wpca-bg-1);
  border-bottom:    1px solid var(--wpca-border);
  flex-shrink:      0;
  z-index:          100;
}

.wpca-problem-header__left .wpca-back-link {
  color:           var(--wpca-text-1);
  text-decoration: none;
  font-size:       13px;
  transition:      color var(--wpca-transition);
}
.wpca-problem-header__left .wpca-back-link:hover {
  color: var(--wpca-accent);
}

.wpca-problem-header__center {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.wpca-problem-title {
  font-weight: 600;
  font-size:   15px;
  color:       var(--wpca-text-0);
}

.wpca-user-pill {
  font-size:     12px;
  color:         var(--wpca-text-1);
  background:    var(--wpca-bg-2);
  border:        1px solid var(--wpca-border);
  padding:       3px 10px;
  border-radius: 20px;
}

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

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

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

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

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

/* ── Resize divider ──────────────────────────────────────────────────────── */

.wpca-divider {
  width:            6px;
  background:       var(--wpca-border);
  cursor:           col-resize;
  transition:       background var(--wpca-transition);
  flex-shrink:      0;
}
.wpca-divider:hover,
.wpca-divider:active {
  background: var(--wpca-accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LEFT PANEL — TABS + CONTENT
───────────────────────────────────────────────────────────────────────────── */

.wpca-panel-tabs {
  display:       flex;
  border-bottom: 1px solid var(--wpca-border);
  flex-shrink:   0;
  background:    var(--wpca-bg-1);
  position:      sticky;
  top:           0;
  z-index:       10;
}

.wpca-tab-btn {
  padding:          10px 20px;
  background:       none;
  border:           none;
  border-bottom:    2px solid transparent;
  color:            var(--wpca-text-1);
  font-size:        13px;
  font-weight:      500;
  cursor:           pointer;
  transition:       color var(--wpca-transition), border-color var(--wpca-transition);
  font-family:      var(--wpca-font-ui);
}
.wpca-tab-btn:hover { color: var(--wpca-text-0); }
.wpca-tab-btn.active {
  color:        var(--wpca-accent);
  border-bottom-color: var(--wpca-accent);
}

.wpca-tab-content       { display: none; }
.wpca-tab-content.active{ display: block; }

/* Description content */
.wpca-problem-body {
  padding:    24px;
  line-height: 1.7;
  font-size:  14px;
  color:      var(--wpca-text-0);
}
.wpca-problem-body p,
.wpca-problem-body li { margin-bottom: 8px; }
.wpca-problem-body code {
  background:    var(--wpca-bg-2);
  border:        1px solid var(--wpca-border);
  border-radius: var(--wpca-radius-sm);
  padding:       1px 5px;
  font-family:   var(--wpca-font-mono);
  font-size:     13px;
  color:         var(--wpca-orange);
}
.wpca-problem-body pre {
  background:    var(--wpca-bg-2);
  border:        1px solid var(--wpca-border);
  border-radius: var(--wpca-radius);
  padding:       12px 16px;
  overflow-x:    auto;
  font-family:   var(--wpca-font-mono);
  font-size:     13px;
  line-height:   1.5;
}

.wpca-section { padding: 0 24px 20px; }
.wpca-section-title {
  font-size:     13px;
  font-weight:   600;
  color:         var(--wpca-text-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.wpca-example {
  background:    var(--wpca-bg-2);
  border:        1px solid var(--wpca-border);
  border-radius: var(--wpca-radius);
  overflow:      hidden;
  margin-bottom: 12px;
}
.wpca-example-io {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.wpca-io-block {
  padding: 12px 14px;
}
.wpca-io-block + .wpca-io-block {
  border-left: 1px solid var(--wpca-border);
}
.wpca-io-label {
  display:       block;
  font-size:     11px;
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:         var(--wpca-text-1);
  margin-bottom: 6px;
}
.wpca-code-block {
  margin:      0;
  font-family: var(--wpca-font-mono);
  font-size:   13px;
  color:       var(--wpca-text-0);
  white-space: pre-wrap;
  word-break:  break-word;
}
.wpca-example-explanation {
  border-top: 1px solid var(--wpca-border);
  padding:    10px 14px;
  font-size:  13px;
  color:      var(--wpca-text-1);
}

.wpca-constraints-list {
  margin:     0;
  padding:    0;
  list-style: none;
}
.wpca-constraints-list li {
  padding:       5px 0;
  padding-left:  16px;
  position:      relative;
  font-size:     13px;
  color:         var(--wpca-text-0);
  font-family:   var(--wpca-font-mono);
}
.wpca-constraints-list li::before {
  content:  '•';
  position: absolute;
  left:     0;
  color:    var(--wpca-accent);
}

.wpca-limits-row {
  display:    flex;
  gap:        8px;
  padding:    12px 24px 24px;
}
.wpca-limit-pill {
  font-size:     12px;
  background:    var(--wpca-bg-2);
  border:        1px solid var(--wpca-border);
  border-radius: 20px;
  padding:       4px 12px;
  color:         var(--wpca-text-1);
}

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

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

.wpca-toolbar-spacer { flex: 1; }

.wpca-editor-container {
  flex:         1;
  min-height:   0;
  overflow:     hidden;
}

/* ── Console ──────────────────────────────────────────────────────────────── */

.wpca-console {
  height:        var(--wpca-console-h);
  background:    var(--wpca-bg-1);
  border-top:    1px solid var(--wpca-border);
  display:       flex;
  flex-direction: column;
  flex-shrink:   0;
}

.wpca-console-header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  height:        36px;
  padding:       0 12px;
  background:    var(--wpca-bg-2);
  border-bottom: 1px solid var(--wpca-border);
  flex-shrink:   0;
}

.wpca-console-title {
  font-size:   12px;
  font-weight: 600;
  color:       var(--wpca-text-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wpca-console-body {
  flex:        1;
  overflow-y:  auto;
  padding:     10px 12px;
  font-family: var(--wpca-font-mono);
  font-size:   13px;
}

.wpca-console-hint {
  color:      var(--wpca-text-2);
  font-style: italic;
  margin:     0;
}

/* Console message types */
.wpca-console-msg        { margin-bottom: 10px; }
.wpca-console-msg--loading{ color: var(--wpca-text-1); }
.wpca-console-msg--error { color: var(--wpca-red); }

/* Status banner (full-width) */
.wpca-status-banner {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 14px;
  border-radius: var(--wpca-radius);
  margin-bottom: 10px;
  font-weight:   600;
  font-size:     14px;
  border:        1px solid transparent;
}
.wpca-status-banner--accepted  { background: var(--wpca-green-dim);  border-color: var(--wpca-green);  color: var(--wpca-green);  }
.wpca-status-banner--wrong     { background: var(--wpca-red-dim);    border-color: var(--wpca-red);    color: var(--wpca-red);    }
.wpca-status-banner--tle       { background: var(--wpca-yellow-dim); border-color: var(--wpca-yellow); color: var(--wpca-yellow); }
.wpca-status-banner--mle       { background: var(--wpca-yellow-dim); border-color: var(--wpca-yellow); color: var(--wpca-yellow); }
.wpca-status-banner--error     { background: var(--wpca-red-dim);    border-color: var(--wpca-red);    color: var(--wpca-red);    }
.wpca-status-banner--pending   { background: var(--wpca-bg-2);       border-color: var(--wpca-border); color: var(--wpca-text-1); }

/* Individual test case result */
.wpca-testcase-result {
  background:    var(--wpca-bg-2);
  border:        1px solid var(--wpca-border);
  border-radius: var(--wpca-radius);
  margin-bottom: 8px;
  overflow:      hidden;
}
.wpca-testcase-result.tc--pass { border-left: 3px solid var(--wpca-green); }
.wpca-testcase-result.tc--fail { border-left: 3px solid var(--wpca-red); }

.wpca-tc-header {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     8px 12px;
  font-size:   13px;
}
.wpca-tc-title   { font-weight: 600; color: var(--wpca-text-0); }
.wpca-tc-status  { margin-left: auto; font-size: 11px; color: var(--wpca-text-1); }

.wpca-tc-body      { padding: 0 12px 10px; border-top: 1px solid var(--wpca-border-soft); }
.wpca-tc-detail    { margin-top: 8px; }
.wpca-tc-label     { font-size: 11px; color: var(--wpca-text-1); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 3px; }
.wpca-tc-code      { margin: 0; padding: 6px 10px; background: var(--wpca-bg-0); border-radius: var(--wpca-radius-sm); white-space: pre-wrap; word-break: break-word; font-size: 12px; }
.wpca-tc-code--error { color: var(--wpca-red); }
.wpca-tc-meta      { font-size: 11px; color: var(--wpca-text-1); margin-top: 6px; }

.wpca-summary-line { padding: 8px 0; font-weight: 600; color: var(--wpca-text-0); border-top: 1px solid var(--wpca-border-soft); margin-top: 4px; }
.wpca-meta-line    { font-size: 12px; color: var(--wpca-text-1); padding: 4px 0; }

.wpca-error-banner {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 14px;
  border-radius: var(--wpca-radius);
  background:    var(--wpca-red-dim);
  border:        1px solid var(--wpca-red);
  color:         var(--wpca-red);
  font-size:     13px;
}

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

.wpca-btn {
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  gap:            6px;
  padding:        7px 16px;
  border-radius:  var(--wpca-radius);
  border:         1px solid transparent;
  font-size:      13px;
  font-weight:    500;
  cursor:         pointer;
  transition:     all var(--wpca-transition);
  white-space:    nowrap;
  font-family:    var(--wpca-font-ui);
  text-decoration: none;
}
.wpca-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wpca-btn--loading { position: relative; color: transparent !important; }
.wpca-btn--loading::after {
  content:      '';
  position:     absolute;
  width:        14px;
  height:       14px;
  border:       2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation:    wpca-spin 0.6s linear infinite;
  color:        #fff;
}

.wpca-btn--primary {
  background: var(--wpca-green);
  border-color: var(--wpca-green);
  color: #000;
}
.wpca-btn--primary:hover:not(:disabled) {
  background:   #4dc860;
  box-shadow:   0 0 10px rgba(63, 185, 80, 0.4);
}

.wpca-btn--secondary {
  background:  var(--wpca-accent);
  border-color: var(--wpca-accent);
  color:       #000;
}
.wpca-btn--secondary:hover:not(:disabled) {
  background:  #79b8ff;
  box-shadow:  0 0 10px var(--wpca-accent-glow);
}

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

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

/* ─────────────────────────────────────────────────────────────────────────────
   SELECTS
───────────────────────────────────────────────────────────────────────────── */

.wpca-select {
  background:    var(--wpca-bg-2);
  border:        1px solid var(--wpca-border);
  border-radius: var(--wpca-radius);
  color:         var(--wpca-text-0);
  font-size:     13px;
  padding:       5px 10px;
  cursor:        pointer;
  font-family:   var(--wpca-font-ui);
  transition:    border-color var(--wpca-transition);
}
.wpca-select:focus { outline: none; border-color: var(--wpca-accent); }

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

.wpca-badge {
  display:       inline-block;
  padding:       2px 10px;
  border-radius: 20px;
  font-size:     12px;
  font-weight:   600;
  letter-spacing: 0.03em;
}
.wpca-badge--easy   { background: rgba(63,185,80,.15);  color: var(--wpca-easy);   border: 1px solid var(--wpca-easy);   }
.wpca-badge--medium { background: rgba(210,153,34,.15); color: var(--wpca-medium); border: 1px solid var(--wpca-medium); }
.wpca-badge--hard   { background: rgba(248,81,73,.15);  color: var(--wpca-hard);   border: 1px solid var(--wpca-hard);   }

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

.wpca-problems-page {
  max-width:    1100px;
  margin:       0 auto;
  padding:      32px 20px;
  font-family:  var(--wpca-font-ui);
  color:        var(--wpca-text-0);
}

.wpca-problems-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             16px;
  margin-bottom:   24px;
}
.wpca-page-title {
  font-size:   24px;
  font-weight: 700;
  color:       var(--wpca-text-0);
  margin:      0;
}

.wpca-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.wpca-filter-btn {
  padding:       5px 14px;
  border-radius: 20px;
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  text-decoration: none;
  background:    var(--wpca-bg-2);
  border:        1px solid var(--wpca-border);
  color:         var(--wpca-text-1);
  transition:    all var(--wpca-transition);
}
.wpca-filter-btn.active,
.wpca-filter-btn:hover { background: var(--wpca-bg-3); color: var(--wpca-text-0); border-color: var(--wpca-accent); }
.wpca-filter-btn--easy.active   { border-color: var(--wpca-easy);   color: var(--wpca-easy); }
.wpca-filter-btn--medium.active { border-color: var(--wpca-medium); color: var(--wpca-medium); }
.wpca-filter-btn--hard.active   { border-color: var(--wpca-hard);   color: var(--wpca-hard); }

.wpca-problems-table-wrapper {
  background:    var(--wpca-bg-1);
  border:        1px solid var(--wpca-border);
  border-radius: var(--wpca-radius-lg);
  overflow:      hidden;
}

.wpca-problems-table {
  width:           100%;
  border-collapse: collapse;
}
.wpca-problems-table thead th {
  padding:       10px 16px;
  background:    var(--wpca-bg-2);
  font-size:     12px;
  font-weight:   600;
  color:         var(--wpca-text-1);
  text-align:    left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--wpca-border);
}
.wpca-problem-row {
  border-bottom: 1px solid var(--wpca-border-soft);
  transition:    background var(--wpca-transition);
}
.wpca-problem-row:last-child { border-bottom: none; }
.wpca-problem-row:hover      { background: var(--wpca-bg-2); }
.wpca-problem-row td         { padding: 12px 16px; font-size: 14px; vertical-align: middle; }

.wpca-col-status { width: 36px; text-align: center; }
.wpca-col-num    { width: 50px; color: var(--wpca-text-2); font-size: 13px; }
.wpca-col-diff   { width: 100px; }
.wpca-col-tags   { width: 240px; }

.wpca-solved-icon { color: var(--wpca-green); font-size: 14px; font-weight: 700; }
.wpca-problem-link { color: var(--wpca-text-0); text-decoration: none; font-weight: 500; }
.wpca-problem-link:hover { color: var(--wpca-accent); }
.wpca-problems-table .wpca-solved .wpca-problem-link { color: var(--wpca-text-1); }

.wpca-tag-pill {
  display:       inline-block;
  background:    var(--wpca-bg-3);
  border:        1px solid var(--wpca-border);
  border-radius: 4px;
  padding:       2px 8px;
  font-size:     11px;
  color:         var(--wpca-text-1);
  text-decoration: none;
  margin:        2px;
  transition:    all var(--wpca-transition);
}
.wpca-tag-pill:hover { color: var(--wpca-accent); border-color: var(--wpca-accent); }

.wpca-empty-state { padding: 48px; text-align: center; color: var(--wpca-text-2); font-size: 14px; }

.wpca-pagination {
  display:     flex;
  justify-content: center;
  gap:         6px;
  padding:     24px 0;
}
.wpca-page-btn {
  padding:       6px 12px;
  border:        1px solid var(--wpca-border);
  border-radius: var(--wpca-radius);
  background:    var(--wpca-bg-2);
  color:         var(--wpca-text-1);
  text-decoration: none;
  font-size:     13px;
  transition:    all var(--wpca-transition);
}
.wpca-page-btn.active,
.wpca-page-btn:hover { background: var(--wpca-accent); color: #000; border-color: var(--wpca-accent); }

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

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

.wpca-dashboard-hero {
  display:     flex;
  align-items: center;
  gap:         20px;
  padding:     24px;
  background:  var(--wpca-bg-1);
  border:      1px solid var(--wpca-border);
  border-radius: var(--wpca-radius-lg);
  margin-bottom: 24px;
}
.wpca-avatar__img { border-radius: 50%; border: 2px solid var(--wpca-accent); }
.wpca-profile-name   { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.wpca-profile-handle { font-size: 14px; color: var(--wpca-text-1); margin: 0 0 6px; }
.wpca-profile-rank   { font-size: 14px; color: var(--wpca-accent); margin: 0; }

.wpca-stats-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   16px;
  margin-bottom:         24px;
}
.wpca-stat-card {
  background:    var(--wpca-bg-1);
  border:        1px solid var(--wpca-border);
  border-radius: var(--wpca-radius-lg);
  padding:       20px;
  text-align:    center;
  transition:    border-color var(--wpca-transition);
}
.wpca-stat-card:hover { border-color: var(--wpca-accent); }
.wpca-stat-value { font-size: 32px; font-weight: 700; color: var(--wpca-accent); }
.wpca-stat-label { font-size: 12px; color: var(--wpca-text-1); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }

.wpca-difficulty-breakdown,
.wpca-recent-submissions {
  background:    var(--wpca-bg-1);
  border:        1px solid var(--wpca-border);
  border-radius: var(--wpca-radius-lg);
  padding:       24px;
  margin-bottom: 24px;
}
.wpca-section-heading {
  font-size:     14px;
  font-weight:   600;
  color:         var(--wpca-text-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin:        0 0 16px;
}
.wpca-diff-rows { display: flex; flex-direction: column; gap: 12px; }
.wpca-diff-row  { display: flex; align-items: center; gap: 12px; }
.wpca-progress-bar {
  flex:          1;
  height:        8px;
  background:    var(--wpca-bg-2);
  border-radius: 4px;
  overflow:      hidden;
}
.wpca-progress-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.wpca-progress-fill--easy   { background: var(--wpca-easy); }
.wpca-progress-fill--medium { background: var(--wpca-medium); }
.wpca-progress-fill--hard   { background: var(--wpca-hard); }
.wpca-diff-count { font-size: 13px; color: var(--wpca-text-1); min-width: 56px; text-align: right; }

/* ─────────────────────────────────────────────────────────────────────────────
   LEADERBOARD
───────────────────────────────────────────────────────────────────────────── */

.wpca-leaderboard {
  max-width:   900px;
  margin:      0 auto;
  padding:     32px 20px;
  font-family: var(--wpca-font-ui);
  color:       var(--wpca-text-0);
}
.wpca-leaderboard-header   { margin-bottom: 24px; }
.wpca-leaderboard-title    { font-size: 26px; font-weight: 700; margin: 0 0 6px; }
.wpca-leaderboard-sub      { font-size: 14px; color: var(--wpca-text-1); margin: 0; }

.wpca-leaderboard-table .wpca-lb-row { transition: background var(--wpca-transition); }
.wpca-leaderboard-table .wpca-lb-row:hover { background: var(--wpca-bg-2); }
.wpca-leaderboard-table .wpca-lb-row--mine { background: rgba(88,166,255,0.07); }

.wpca-rank-num        { font-size: 15px; font-weight: 700; color: var(--wpca-text-1); }
.wpca-rank-num--top   { font-size: 20px; }

.wpca-lb-user  { display: flex; align-items: center; gap: 10px; }
.wpca-lb-avatar{ border-radius: 50%; }
.wpca-lb-name  { font-weight: 500; }
.wpca-you-tag {
  display:       inline-block;
  background:    var(--wpca-accent-glow);
  border:        1px solid var(--wpca-accent);
  color:         var(--wpca-accent);
  border-radius: 20px;
  padding:       1px 8px;
  font-size:     11px;
  font-weight:   600;
  margin-left:   6px;
}

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

.wpca-table-wrapper {
  background:    var(--wpca-bg-1);
  border:        1px solid var(--wpca-border);
  border-radius: var(--wpca-radius-lg);
  overflow:      hidden;
}
.wpca-table {
  width:           100%;
  border-collapse: collapse;
}
.wpca-table thead th {
  padding:       10px 16px;
  background:    var(--wpca-bg-2);
  font-size:     12px;
  font-weight:   600;
  color:         var(--wpca-text-1);
  text-align:    left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--wpca-border);
}
.wpca-table tbody tr {
  border-bottom: 1px solid var(--wpca-border-soft);
}
.wpca-table tbody tr:last-child { border-bottom: none; }
.wpca-table tbody td { padding: 11px 16px; font-size: 14px; vertical-align: middle; }

/* Status badges */
.wpca-status-badge {
  display:       inline-block;
  padding:       2px 10px;
  border-radius: 20px;
  font-size:     12px;
  font-weight:   600;
}
.status--accepted { background: var(--wpca-green-dim);  color: var(--wpca-green);  border: 1px solid var(--wpca-green); }
.status--wrong    { background: var(--wpca-red-dim);    color: var(--wpca-red);    border: 1px solid var(--wpca-red); }
.status--tle      { background: var(--wpca-yellow-dim); color: var(--wpca-yellow); border: 1px solid var(--wpca-yellow); }
.status--mle      { background: var(--wpca-yellow-dim); color: var(--wpca-orange); border: 1px solid var(--wpca-orange); }
.status--error    { background: var(--wpca-red-dim);    color: var(--wpca-red);    border: 1px solid var(--wpca-red); }
.status--pending  { background: var(--wpca-bg-2);       color: var(--wpca-text-1); border: 1px solid var(--wpca-border); }

.wpca-lang-tag {
  display:       inline-block;
  padding:       2px 8px;
  background:    var(--wpca-bg-3);
  border-radius: var(--wpca-radius-sm);
  font-size:     11px;
  font-family:   var(--wpca-font-mono);
  color:         var(--wpca-text-1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOGIN OVERLAY
───────────────────────────────────────────────────────────────────────────── */

.wpca-login-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         999;
}
.wpca-login-overlay[hidden] { display: none; }
.wpca-login-card {
  background:    var(--wpca-bg-1);
  border:        1px solid var(--wpca-border);
  border-radius: var(--wpca-radius-lg);
  padding:       40px;
  text-align:    center;
  max-width:     360px;
  width:         100%;
}
.wpca-login-card h2 { margin: 0 0 10px; font-size: 22px; }
.wpca-login-card p  { color: var(--wpca-text-1); margin-bottom: 24px; }
.wpca-login-card .wpca-btn { display: block; margin-bottom: 10px; width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING SPINNER
───────────────────────────────────────────────────────────────────────────── */

.wpca-spinner {
  display:       inline-block;
  width:         14px;
  height:        14px;
  border:        2px solid var(--wpca-text-2);
  border-top-color: var(--wpca-accent);
  border-radius: 50%;
  animation:     wpca-spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right:  6px;
}
.wpca-loading { color: var(--wpca-text-1); font-style: italic; padding: 24px; text-align: center; }

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

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

@media (max-width: 900px) {
  .wpca-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .wpca-split-layout {
    flex-direction: column;
  }
  .wpca-panel--left {
    width:      100% !important;
    max-width:  100%;
    min-height: 300px;
    border-right: none;
    border-bottom: 1px solid var(--wpca-border);
  }
  .wpca-divider { display: none; }
  .wpca-panel--right { min-height: 500px; }

  .wpca-problems-header { flex-direction: column; align-items: flex-start; }
  .wpca-col-tags { display: none; }

  .wpca-dashboard-hero { flex-direction: column; text-align: center; }
  .wpca-stats-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 480px) {
  .wpca-stats-grid { grid-template-columns: 1fr 1fr; }
  .wpca-editor-toolbar .wpca-select { max-width: 120px; font-size: 12px; }
}