/* ============================================================
   problems.css — DataVix Problems Hub
   Matches the landing page / quizzes / datasets design system: warm off-white
   bg, Inter body + Bricolage Grotesque display, JetBrains Mono for code, slate
   cards with soft shadows, violet→pink→amber gradient accents. Self-contained
   (own reset + tokens). Two surfaces: the library (list + filters + sidebar)
   and the split-screen solver (problem panel | Monaco editor + console).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink: #1a1a2e;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --bg: #fbfaf8;
  --white: #ffffff;
  --violet: #6d28d9;
  --pink: #db2777;
  --amber: #f59e0b;
  --emerald: #059669;
  --red: #dc2626;
  --gradient-brand: linear-gradient(90deg, var(--violet), var(--pink) 50%, var(--amber));
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-card: 0 8px 24px rgba(15,23,42,0.06);
  --shadow-hover: 0 16px 38px rgba(15,23,42,0.12);
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

h1, h2, h3, .font-display { font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; color: var(--slate-900); margin: 0; }
.gradient-text { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-label { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }

/* ── Navbar (shared classes) ─────────────────────────────────────────── */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: rgba(251,250,248,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--slate-100); }
.navbar .logo { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--slate-900); text-decoration: none; }
.navbar .nav-buttons { display: flex; align-items: center; gap: 18px; }
.navbar .menu-toggle { display: none; cursor: pointer; font-size: 22px; color: var(--slate-900); }

.btn-gradient, .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.btn-gradient { background: var(--slate-900); color: #fff; box-shadow: 0 12px 24px rgba(15,23,42,.2); }
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(15,23,42,.26); }
.btn-outline { background: var(--white); color: var(--slate-800); border: 1px solid var(--slate-300); box-shadow: var(--shadow-sm); }
.btn-outline:hover { border-color: var(--slate-500); transform: translateY(-2px); }

/* ── Difficulty + category badges ────────────────────────────────────── */
.pb-diff { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .02em; }
.pb-diff-easy { background: rgba(5,150,105,.12); color: var(--emerald); }
.pb-diff-medium { background: rgba(245,158,11,.16); color: #b45309; }
.pb-diff-hard { background: rgba(220,38,38,.12); color: var(--red); }
.pb-cat-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.pb-cat-sql { background: rgba(14,165,233,.12); color: #0369a1; }
.pb-cat-python { background: rgba(245,158,11,.14); color: #b45309; }
.pb-cat-pandas { background: rgba(109,40,217,.1); color: var(--violet); }
.pb-cat-numpy { background: rgba(5,150,105,.12); color: var(--emerald); }
.pb-cat-statistics { background: rgba(219,39,119,.1); color: var(--pink); }

/* ════════════════════════════════════════════════════════════════════
   LIBRARY
   ════════════════════════════════════════════════════════════════════ */
.pb-wrap { max-width: 1280px; margin: 0 auto; padding: 128px 24px 90px; }
.pb-breadcrumb { font-size: 13px; color: var(--slate-500); margin-bottom: 22px; display: flex; flex-wrap: wrap; align-items: center; }
.pb-breadcrumb a { color: var(--slate-600); text-decoration: none; }
.pb-breadcrumb a:hover { color: var(--violet); }
.pb-crumb-sep { margin: 0 8px; color: var(--slate-300); }

.pb-hero { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.pb-hero h1 { font-size: 46px; line-height: 1.1; margin: 14px 0; }
.pb-hero p { color: var(--slate-500); font-size: 16.5px; line-height: 1.7; max-width: 620px; margin: 0 auto; }

.pb-layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .pb-layout { grid-template-columns: 1fr; } }

/* Sidebar */
.pb-sidebar { position: sticky; top: 100px; }
@media (max-width: 900px) { .pb-sidebar { position: static; } }
.pb-sidebar nav { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-md); padding: 8px; box-shadow: var(--shadow-card); }
.pb-side-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm); color: var(--slate-600); text-decoration: none; font-size: 14px; font-weight: 600; transition: background .18s ease, color .18s ease; }
.pb-side-link:hover { background: var(--slate-50); color: var(--slate-900); }
.pb-side-link.active { background: var(--slate-900); color: #fff; }
.pb-side-link.active svg { color: #fff; }
.pb-side-link svg { color: var(--slate-400); flex-shrink: 0; }
.pb-side-cta { margin-top: 16px; background: linear-gradient(160deg, #faf5ff, #fdf2f8); border: 1px solid var(--slate-200); border-radius: var(--radius-md); padding: 18px; text-align: center; }
.pb-side-cta p { font-size: 13.5px; font-weight: 700; color: var(--slate-800); margin: 0 0 12px; }
.pb-side-cta .btn-gradient { width: 100%; }
@media (max-width: 900px) { .pb-side-cta { display: none; } }

/* Filter bar (sticky) */
.pb-filterbar { position: sticky; top: 84px; z-index: 40; background: rgba(251,250,248,.9); backdrop-filter: blur(10px); border: 1px solid var(--slate-200); border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-card); margin-bottom: 18px; }
.pb-search { position: relative; display: flex; align-items: center; margin-bottom: 12px; }
.pb-search svg { position: absolute; left: 16px; color: var(--slate-400); }
.pb-search input { width: 100%; padding: 12px 18px 12px 44px; border-radius: 999px; border: 1px solid var(--slate-300); background: var(--white); font-family: inherit; font-size: 14px; outline: none; box-shadow: var(--shadow-sm); transition: border-color .2s ease, box-shadow .2s ease; }
.pb-search input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(109,40,217,.12); }
.pb-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pb-filter-row-2 { margin-top: 10px; }
.pb-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--slate-200); background: var(--white); color: var(--slate-600); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .16s ease; }
.pb-chip:hover { border-color: var(--slate-400); color: var(--slate-800); }
.pb-chip.active { background: var(--slate-900); color: #fff; border-color: var(--slate-900); }
.pb-chip-diff.active[data-value="Easy"] { background: var(--emerald); border-color: var(--emerald); }
.pb-chip-diff.active[data-value="Medium"] { background: #d97706; border-color: #d97706; }
.pb-chip-diff.active[data-value="Hard"] { background: var(--red); border-color: var(--red); }
.pb-selects { display: flex; gap: 10px; }
.pb-select { display: flex; flex-direction: column; gap: 3px; }
.pb-select-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-400); padding-left: 4px; }
.pb-select select { padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--slate-300); background: var(--white); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--slate-700); cursor: pointer; outline: none; }
.pb-select select:focus { border-color: var(--violet); }

/* List */
.pb-list-head, .pb-row { display: grid; grid-template-columns: 64px 1fr 110px 100px 100px 80px; align-items: center; gap: 12px; }
.pb-list-head { padding: 8px 18px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-400); }
.pb-results-meta { padding: 4px 18px 10px; font-size: 13px; font-weight: 600; color: var(--slate-500); }
.pb-list { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.pb-row { padding: 14px 18px; border-bottom: 1px solid var(--slate-100); text-decoration: none; color: inherit; transition: background .16s ease, transform .16s ease; position: relative; }
.pb-row:last-child { border-bottom: none; }
.pb-row:hover { background: var(--slate-50); }
.pb-row.is-hidden { display: none; }
.pb-cell { min-width: 0; }
.pb-cell-status { display: flex; justify-content: center; }
.pb-status-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--slate-300); display: block; transition: all .2s ease; }
.pb-row.is-solved .pb-status-dot { border-color: var(--emerald); background: var(--emerald); box-shadow: inset 0 0 0 2px #fff; }
.pb-row.is-attempted .pb-status-dot { border-color: var(--amber); }
.pb-row-title { display: block; font-size: 15px; font-weight: 600; color: var(--slate-900); }
.pb-row:hover .pb-row-title { color: var(--violet); }
.pb-row-topics { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.pb-topic { font-size: 10.5px; color: var(--slate-500); background: var(--slate-100); padding: 2px 7px; border-radius: 5px; font-weight: 600; }
.pb-cell-acc, .pb-cell-solved { font-size: 13px; font-weight: 600; color: var(--slate-600); font-variant-numeric: tabular-nums; }
.pb-empty { text-align: center; color: var(--slate-500); padding: 50px 20px; }

@media (max-width: 680px) {
  .pb-list-head { display: none; }
  .pb-row { grid-template-columns: 30px 1fr auto; grid-template-areas: "status name diff"; row-gap: 6px; }
  .pb-cell-status { grid-area: status; }
  .pb-cell-name { grid-area: name; }
  .pb-cell-diff { grid-area: diff; }
  .pb-cell-cat, .pb-cell-acc, .pb-cell-solved { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SOLVER (split screen)
   ════════════════════════════════════════════════════════════════════ */
.pb-solver-body { overflow: hidden; }
.pb-solver { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; display: flex; align-items: stretch; background: var(--bg); }
.pb-tabs { display: none; }

/* Left panel */
.pb-left { width: 45%; min-width: 300px; overflow-y: auto; background: var(--white); border-right: 1px solid var(--slate-200); }
.pb-left-inner { padding: 26px 30px 60px; max-width: 720px; }
.pb-solver-crumb { margin-bottom: 16px; font-size: 12.5px; }
.pb-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pb-title { font-size: 26px; line-height: 1.2; }
.pb-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 16px; }
.pb-meta-chip { font-size: 12px; font-weight: 600; color: var(--slate-600); background: var(--slate-100); padding: 4px 10px; border-radius: 999px; }
.pb-rating { color: var(--amber); }

.pb-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--slate-100); margin-bottom: 18px; }
.pb-icon-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--slate-200); background: var(--white); color: var(--slate-600); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .16s ease; }
.pb-icon-btn:hover { border-color: var(--slate-400); color: var(--slate-900); }
.pb-icon-btn.active { color: var(--violet); border-color: var(--violet); background: rgba(109,40,217,.06); }
.pb-icon-btn.active svg { fill: rgba(109,40,217,.18); }

.pb-notes { margin-bottom: 18px; }
.pb-notes textarea { width: 100%; min-height: 90px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--slate-300); font-family: inherit; font-size: 13.5px; resize: vertical; outline: none; }
.pb-notes textarea:focus { border-color: var(--violet); }

.pb-panel-section { margin-bottom: 26px; }
.pb-h3 { font-size: 16px; margin-bottom: 12px; }
.pb-desc { font-size: 15px; line-height: 1.75; color: var(--slate-700); }
.pb-desc code, .pb-constraints code { font-family: var(--mono); font-size: 12.5px; background: var(--slate-100); color: var(--violet); padding: 1px 6px; border-radius: 5px; }

.pb-example { border: 1px solid var(--slate-200); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 12px; }
.pb-example-head { background: var(--slate-50); padding: 8px 14px; font-size: 12.5px; font-weight: 700; color: var(--slate-700); border-bottom: 1px solid var(--slate-200); }
.pb-example-body { padding: 14px; display: grid; gap: 12px; }
.pb-example-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-400); margin-bottom: 5px; }
.pb-example-body pre { margin: 0; font-family: var(--mono); font-size: 12.5px; background: var(--slate-50); padding: 10px 12px; border-radius: 8px; white-space: pre-wrap; color: var(--slate-800); border: 1px solid var(--slate-100); }
.pb-example-body p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--slate-600); }

/* Left-panel schema reference — always-visible table & column names */
.pb-schema-hint { font-size: 13px; color: var(--slate-500); margin: 0 0 14px; line-height: 1.6; }
.pb-tables { display: grid; gap: 10px; }
.pb-tbl { border: 1px solid var(--slate-200); border-radius: var(--radius-sm); overflow: hidden; background: var(--white); }
.pb-tbl-name { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--slate-50); border-bottom: 1px solid var(--slate-200); }
.pb-tbl-name svg { color: var(--violet); flex-shrink: 0; }
.pb-tbl-name code { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--slate-900); }
.pb-tbl-count { margin-left: auto; font-size: 10.5px; color: var(--slate-400); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pb-tbl-cols { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; }
.pb-tbl-col { display: inline-flex; align-items: baseline; gap: 6px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 6px; padding: 4px 8px; }
.pb-tbl-col code { font-family: var(--mono); font-size: 12px; color: var(--slate-800); font-weight: 600; }
.pb-tbl-col em { font-family: var(--mono); font-size: 9.5px; font-style: normal; color: var(--slate-400); text-transform: uppercase; letter-spacing: .03em; }

.pb-constraints { margin: 0; padding-left: 20px; }
.pb-constraints li { font-size: 13.5px; line-height: 1.7; color: var(--slate-600); }
.pb-tag-row { display: flex; flex-wrap: wrap; gap: 7px; }
.pb-tag { font-size: 12px; color: var(--violet); background: rgba(109,40,217,.07); padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.pb-tag-company { color: var(--slate-600); background: var(--slate-100); }

.pb-hint, .pb-solution { border: 1px solid var(--slate-200); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; }
.pb-hint summary, .pb-solution summary { cursor: pointer; padding: 11px 14px; font-size: 13.5px; font-weight: 600; color: var(--slate-700); list-style: none; display: flex; align-items: center; gap: 8px; }
.pb-hint summary::-webkit-details-marker, .pb-solution summary::-webkit-details-marker { display: none; }
.pb-hint[open] summary, .pb-solution[open] summary { border-bottom: 1px solid var(--slate-100); color: var(--slate-900); }
.pb-hint p { margin: 0; padding: 12px 14px; font-size: 13.5px; line-height: 1.65; color: var(--slate-600); }
.pb-solution-note { margin: 0; padding: 12px 14px 4px; font-size: 12.5px; color: var(--slate-500); font-style: italic; }
.pb-solution-code { margin: 0; padding: 12px 14px 16px; }
.pb-solution-code code { font-family: var(--mono); font-size: 12.5px; color: var(--slate-800); white-space: pre; display: block; overflow-x: auto; }

.pb-related { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pb-related a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--slate-200); border-radius: var(--radius-sm); text-decoration: none; color: var(--slate-800); font-size: 13.5px; font-weight: 600; transition: all .16s ease; }
.pb-related a:hover { border-color: var(--violet); background: var(--slate-50); }
.pb-prevnext { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--slate-100); }
.pb-pn-link { font-size: 13px; font-weight: 600; color: var(--slate-600); text-decoration: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-pn-link:hover { color: var(--violet); }
.pb-pn-next { text-align: right; }

/* Divider */
.pb-divider { width: 8px; background: var(--slate-100); cursor: col-resize; flex-shrink: 0; position: relative; transition: background .16s ease; }
.pb-divider:hover, .pb-divider.dragging { background: var(--violet); }
.pb-divider::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 3px; height: 34px; border-radius: 3px; background: var(--slate-300); }
.pb-divider:hover::after, .pb-divider.dragging::after { background: #fff; }

/* Right panel */
.pb-right { flex: 1; min-width: 320px; display: flex; flex-direction: column; background: #f6f7f9; overflow: hidden; }
.pb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--white); border-bottom: 1px solid var(--slate-200); flex-wrap: wrap; }
.pb-lang select { padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--slate-300); background: var(--white); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--slate-700); cursor: pointer; }
.pb-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pb-tbtn { padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--slate-300); background: var(--white); color: var(--slate-700); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .16s ease; }
.pb-tbtn:hover { border-color: var(--slate-500); transform: translateY(-1px); }
.pb-run { background: var(--slate-900); color: #fff; border-color: var(--slate-900); }
.pb-run:hover { box-shadow: 0 6px 16px rgba(15,23,42,.24); }
.pb-submit { background: linear-gradient(180deg, var(--emerald), #047857); color: #fff; border-color: #047857; }
.pb-submit:hover { box-shadow: 0 6px 16px rgba(5,150,105,.32); }
.pb-tbtn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.pb-editor-region { position: relative; flex: 1 1 55%; min-height: 140px; }
.pb-editor { position: absolute; inset: 0; }
.pb-fallback { position: absolute; inset: 0; width: 100%; height: 100%; border: none; padding: 16px; font-family: var(--mono); font-size: 14px; line-height: 1.6; resize: none; outline: none; background: #1e293b; color: #e2e8f0; }
.pb-editor-region.monaco-ready .pb-fallback { display: none; }

/* Bottom console/schema/expected */
.pb-bottom { flex: 1 1 45%; min-height: 150px; display: flex; flex-direction: column; background: var(--white); border-top: 1px solid var(--slate-200); }
.pb-bottom-tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--slate-200); background: var(--slate-50); }
.pb-btab { padding: 8px 14px; border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--slate-500); cursor: pointer; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; }
.pb-btab:hover { color: var(--slate-800); }
.pb-btab.active { color: var(--violet); border-bottom-color: var(--violet); background: var(--white); }
.pb-bottom-body { flex: 1; overflow: auto; }
.pb-btab-panel { display: none; padding: 14px; }
.pb-btab-panel.active { display: block; }

.pb-console-empty { color: var(--slate-500); font-size: 13px; padding: 16px; text-align: center; }
.pb-console-empty kbd { font-family: var(--mono); font-size: 11px; background: var(--slate-100); border: 1px solid var(--slate-300); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }
.pb-status-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 8px 12px; margin-bottom: 10px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; }
.pb-status-bar.ok { background: rgba(5,150,105,.1); color: var(--emerald); }
.pb-status-bar.err { background: rgba(220,38,38,.1); color: var(--red); }
.pb-status-bar.info { background: var(--slate-100); color: var(--slate-600); }
.pb-result-meta { color: var(--slate-500); font-weight: 500; }
.pb-err-hint { margin-top: 8px; font-weight: 500; font-size: 12px; line-height: 1.6; opacity: .92; }
.pb-err-hint code { font-family: var(--mono); background: rgba(15,23,42,.06); padding: 1px 6px; border-radius: 5px; }

.pb-result-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
.pb-result-table th { position: sticky; top: 0; background: var(--slate-100); text-align: left; padding: 8px 12px; font-weight: 700; color: var(--slate-700); border-bottom: 1px solid var(--slate-200); white-space: nowrap; }
.pb-result-table td { padding: 7px 12px; border-bottom: 1px solid var(--slate-100); color: var(--slate-700); white-space: nowrap; }
.pb-result-table tbody tr:nth-child(even) { background: var(--slate-50); }
.pb-null { color: var(--slate-400); font-style: italic; }
.pb-table-scroll { overflow: auto; max-height: 100%; border: 1px solid var(--slate-200); border-radius: var(--radius-sm); }

/* Submit banner */
.pb-verdict { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 12px; font-weight: 700; }
.pb-verdict.correct { background: rgba(5,150,105,.1); color: var(--emerald); border: 1px solid rgba(5,150,105,.25); }
.pb-verdict.wrong { background: rgba(220,38,38,.08); color: var(--red); border: 1px solid rgba(220,38,38,.2); }
.pb-verdict.error { background: rgba(245,158,11,.1); color: #b45309; border: 1px solid rgba(245,158,11,.3); }
.pb-verdict-icon { font-size: 22px; }
.pb-verdict small { display: block; font-weight: 500; font-size: 12.5px; margin-top: 2px; opacity: .85; }

/* Schema panel */
.pb-schema-table { border: 1px solid var(--slate-200); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; }
.pb-schema-table summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--slate-800); list-style: none; }
.pb-schema-table summary::-webkit-details-marker { display: none; }
.pb-schema-table summary code { font-family: var(--mono); color: var(--violet); }
.pb-schema-table summary svg { color: var(--slate-400); }
.pb-col-count { margin-left: auto; font-size: 11px; color: var(--slate-400); font-weight: 500; }
.pb-col-list { list-style: none; margin: 0; padding: 4px 12px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; border-top: 1px solid var(--slate-100); }
.pb-col-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; padding: 2px 0; }
.pb-col-list code { font-family: var(--mono); color: var(--slate-700); }
.pb-col-type { font-size: 10px; color: var(--slate-400); text-transform: uppercase; }
.pb-sample { overflow-x: auto; padding: 0 12px 12px; }
.pb-sample table { border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; width: 100%; }
.pb-sample th { background: var(--slate-50); text-align: left; padding: 5px 9px; color: var(--slate-500); border: 1px solid var(--slate-100); white-space: nowrap; }
.pb-sample td { padding: 5px 9px; border: 1px solid var(--slate-100); color: var(--slate-700); white-space: nowrap; }

/* Toast */
.pb-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--slate-900); color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 13.5px; font-weight: 600; box-shadow: 0 12px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 1100; }
.pb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Footer (shared) */
.footer { background: var(--white); border-top: 1px solid var(--slate-100); padding: 56px 32px 28px; margin-top: 60px; }
.footer-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand h3 { font-size: 18px; margin-bottom: 10px; }
.footer-brand p { color: var(--slate-500); font-size: 13px; line-height: 1.6; }
.footer-links h4 { color: var(--slate-900); margin-bottom: 14px; font-size: 13px; }
.footer-links a, .footer-enroll { display: block; color: var(--slate-500); text-decoration: none; font-size: 13.5px; margin-bottom: 10px; transition: color .2s ease; }
.footer-links a:hover, .footer-enroll:hover { color: var(--violet); }
.footer-bottom { max-width: 1180px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid var(--slate-100); color: var(--slate-500); font-size: 12.5px; }

.pb-notfound { text-align: center; padding: 150px 24px 110px; }
.pb-notfound p { color: var(--slate-500); margin: 12px 0 26px; }

/* ── Responsive: tablet shrinks panels; mobile becomes tabs ──────────── */
@media (max-width: 760px) {
  .navbar { padding: 14px 20px; }
  .navbar .nav-buttons { display: none; }
  .navbar .nav-buttons.active { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--white); padding: 16px 24px; border-bottom: 1px solid var(--slate-100); gap: 14px; align-items: stretch; }
  .navbar .menu-toggle { display: block; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .pb-hero h1 { font-size: 32px; }

  .pb-tabs { display: flex; position: fixed; top: 64px; left: 0; right: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--slate-200); }
  .pb-tab { flex: 1; padding: 12px; border: none; background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--slate-500); cursor: pointer; border-bottom: 2px solid transparent; }
  .pb-tab.active { color: var(--violet); border-bottom-color: var(--violet); }
  .pb-solver { top: 64px; flex-direction: column; }
  .pb-left, .pb-right { width: 100% !important; position: absolute; top: 46px; bottom: 0; left: 0; right: 0; border-right: none; }
  .pb-left { display: none; }
  .pb-right { display: none; }
  .pb-solver[data-active="question"] .pb-left { display: block; }
  .pb-solver[data-active="editor"] .pb-right { display: flex; }
  .pb-solver[data-active="output"] .pb-right { display: flex; }
  .pb-divider { display: none; }
}
/* Desktop keeps its natural split (left block + right flex column); the
   mobile display:none rules above are scoped to max-width:760, so no
   desktop override is needed — forcing display here would break the
   right panel's flex column. */