:root {
  --bg: #0b1020;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-2: rgba(255, 255, 255, 0.09);
  --text: #e9ecf1;
  --muted: #a8b0c0;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #66e3ff;
  --accent-2: #ff66d4;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
  
html[data-theme="light"] {
  --bg: #f6f8ff;
  --panel: rgba(30, 41, 59, 0.05);
  --panel-2: rgba(30, 41, 59, 0.08);
  --text: #0b1020;
  --muted: #334155;
  --border: rgba(15, 23, 42, 0.12);
  --shadow: 0 12px 40px rgba(2, 6, 23, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  background:
    radial-gradient(
      1200px 800px at 10% 0%,
      rgba(102, 227, 255, 0.18),
      transparent
    ),
    radial-gradient(
      900px 700px at 100% 20%,
      rgba(255, 102, 212, 0.14),
      transparent
    ),
    var(--bg);

  color: var(--text);
}

/* =========================================
   APP LAYOUT
========================================= */

.app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 40px;
  width: 100%;
}

/* =========================================
   HEADER
========================================= */

.header {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;

  padding: 18px;
  border-radius: 18px;

  background: linear-gradient(
    135deg,
    var(--panel),
    transparent
  );

  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.header h1 {
  margin: 0;
  line-height: 1.2;
  font-size: 1.35rem;
  word-break: break-word;
}

.sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* =========================================
   GRID
========================================= */

.grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

@media (min-width: 980px) {
  .grid {
    grid-template-columns: 420px 1fr;
    align-items: start;
  }
}

.wide {
  grid-column: 1 / -1;
}

/* =========================================
   CARD
========================================= */

.card {
  background: linear-gradient(
    135deg,
    var(--panel),
    transparent
  );

  border: 1px solid var(--border);
  border-radius: 18px;

  padding: 16px;
  box-shadow: var(--shadow);

  width: 100%;
  overflow: hidden;
}

.card-title {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 1rem;
}

/* =========================================
   FORM ROWS
========================================= */

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.row-inline {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.label {
  color: var(--muted);
  font-size: 0.9rem;
}

.input,
.num,
select {
  width: 100%;
  padding: 10px 12px;

  border-radius: 12px;
  border: 1px solid var(--border);

  background: var(--panel-2);
  color: var(--text);

  outline: none;
  font-size: 0.95rem;
}

select {
  appearance: none;
}

/* =========================================
   BUTTONS
========================================= */

.btn {
  padding: 10px 12px;

  border-radius: 12px;
  border: 1px solid var(--border);

  background: linear-gradient(
    90deg,
    rgba(102, 227, 255, 0.25),
    rgba(255, 102, 212, 0.18)
  );

  color: var(--text);
  cursor: pointer;

  transition: 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--panel-2);
}

.status {
  color: var(--muted);
  font-size: 0.9rem;
  word-break: break-word;
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

/* =========================================
   SLIDER
========================================= */

.slider {
  padding: 10px 10px 12px;

  border: 1px solid var(--border);
  border-radius: 14px;

  background: rgba(0, 0, 0, 0.06);

  margin-bottom: 10px;
}

html[data-theme="light"] .slider {
  background: rgba(0, 0, 0, 0.03);
}

.slider-head {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.slider-head label {
  font-size: 0.92rem;
  line-height: 1.4;
}

.slider input[type="range"] {
  width: 100%;
}

.checkbox {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  flex-wrap: wrap;
}

.segmented {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.seg-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  transition: 0.2s ease;
}

.seg-btn.active {
  background: linear-gradient(90deg, rgba(102, 227, 255, 0.25), rgba(255, 102, 212, 0.18));
  color: var(--text);
  font-weight: 700;
}

/* =========================================
   STATS
========================================= */

.stats {
  display: grid;
  gap: 12px;
}

@media (min-width: 680px) {
  .stats {
    grid-template-columns: 1fr 1fr;
  }
}

.stat {
  padding: 12px;

  border-radius: 16px;
  border: 1px solid var(--border);

  background: rgba(0, 0, 0, 0.08);

  overflow: hidden;
}

html[data-theme="light"] .stat {
  background: rgba(0, 0, 0, 0.03);
}

.stat .k {
  color: var(--muted);
  font-size: 0.9rem;
}

.stat .v {
  font-size: 1.7rem;
  font-weight: 800;
  margin-top: 6px;

  background: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-2)
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  word-break: break-word;
}

.stat .h {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 4px;
  line-height: 1.4;
}

.feedback-summary {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

@media (min-width: 680px) {
  .feedback-summary {
    grid-template-columns: 1fr 1fr;
  }
}

.feedback-item {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.06);
  display: grid;
  gap: 4px;
}

html[data-theme="light"] .feedback-item {
  background: rgba(0, 0, 0, 0.03);
}

.feedback-item span {
  color: var(--muted);
  font-size: 0.84rem;
}

.feedback-item strong {
  font-size: 0.95rem;
  word-break: break-word;
}

.profile-badge-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0 8px;
}

.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  font-weight: 700;
}

.risk-high {
  color: #ff6b6b;
}

.risk-moderate {
  color: #ffcf5c;
}

.risk-low {
  color: #4ddf9b;
}

.intervention-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}

.intervention-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .intervention-item {
  background: rgba(0, 0, 0, 0.02);
}

.severity {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid var(--border);
}

.severity-critical {
  color: #ff8a80;
}

.severity-needs-attention {
  color: #ffd166;
}

.severity-good {
  color: #4ddf9b;
}

.intervention-text {
  color: var(--text);
  line-height: 1.45;
  font-size: 0.92rem;
}

.lookup-summary {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

@media (min-width: 680px) {
  .lookup-summary {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================
   TEXT
========================================= */

.muted {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* =========================================
   TABLE
========================================= */

.table-wrap {
  overflow-x: auto;
  overflow-y: hidden;

  border-radius: 14px;
  border: 1px solid var(--border);

  width: 100%;

  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;

  background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] table {
  background: rgba(0, 0, 0, 0.02);
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);

  text-align: left;
  font-size: 0.92rem;
}

th {
  color: var(--muted);
  font-weight: 700;
}

/* =========================================
   CHART
========================================= */

.chart-wrap {
  margin-top: 12px;

  border-radius: 14px;
  border: 1px solid var(--border);

  padding: 12px;
  background: rgba(0, 0, 0, 0.06);

  overflow-x: auto;
}

html[data-theme="light"] .chart-wrap {
  background: rgba(0, 0, 0, 0.02);
}

canvas {
  max-width: 100%;
}

.performance-grid {
  display: grid;
  gap: 14px;
}

@media (min-width: 860px) {
  .performance-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.performance-figure {
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .performance-figure {
  background: rgba(0, 0, 0, 0.03);
}

.performance-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.performance-figure figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* =========================================
   EXPLAINER CONTAINER (SHAP / LIME side-by-side)
========================================= */

/* Slide-in animation for when a panel appears */
@keyframes explainerFadeSlide {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.explainer-container {
  display: flex;
  flex-wrap: wrap;           /* allows panels to wrap on narrow viewports   */
  gap: 16px;
  align-items: flex-start;
  margin-top: 4px;
}

/* Each panel: flex-grow so they fill the row evenly, flex-basis 280px so
   they wrap onto their own line before they get too narrow to be readable. */
.explainer-panel {
  flex: 1 1 280px;
  min-width: 0;              /* critical — prevents flex child from overflowing */
  animation: explainerFadeSlide 0.35s ease both;
}

/* Single-panel mode (JS adds this class to the container) */
.explainer-container.single-panel > .explainer-panel {
  flex: 1 1 100%;
}

/* ── Tables inside explainer panels ────────────────────────────────────────
   The global table rule sets min-width: 560px which breaks when two panels
   sit side-by-side on a <980px viewport. Override to a tighter value inside
   the panels; the .table-wrap still scrolls horizontally if needed.        */
.explainer-panel .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.explainer-panel table {
  min-width: 260px;          /* enough for Feature + Value columns           */
}

/* ── Charts inside explainer panels ────────────────────────────────────────
   canvas must never be wider than its container.                            */
.explainer-panel .chart-wrap {
  overflow-x: hidden;
}

.explainer-panel canvas {
  max-width: 100%;
  height: auto !important;  /* let Chart.js height scale with width          */
}

/* ── Responsive breakpoints ────────────────────────────────────────────────
   Below 600px force a single-column stack regardless of JS state,
   and let the table scroll at a comfortable 260px minimum.                  */
@media (max-width: 600px) {
  .explainer-container {
    flex-direction: column;
  }

  .explainer-panel {
    flex: 1 1 100%;
  }

  .explainer-panel table {
    min-width: 260px;
  }
}

/* =========================================
   FOOTER
========================================= */

.footer {
  margin-top: 18px;
  text-align: center;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 860px) {
  .header {
    flex-direction: column;
    align-items: stretch;
  }

  .header-actions {
    width: 100%;
  }

  .header-actions .btn {
    width: 100%;
  }

  .header h1 {
    font-size: 1.2rem;
  }

  .sub {
    font-size: 0.9rem;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 560px) {
  .app {
    padding: 12px 10px 24px;
  }

  .card {
    padding: 14px;
    border-radius: 16px;
  }

  .header {
    padding: 14px;
    border-radius: 16px;
  }

  .header h1 {
    font-size: 1.05rem;
  }

  .sub {
    font-size: 0.82rem;
  }

  .row-inline {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .slider {
    padding: 10px;
  }

  .slider-head {
    grid-template-columns: 1fr 72px;
    gap: 8px;
  }

  .slider-head label {
    font-size: 0.82rem;
  }

  .num {
    padding: 8px;
    font-size: 0.9rem;
  }

  .stat {
    padding: 10px;
  }

  .stat .v {
    font-size: 1.35rem;
  }

  .stat .k,
  .stat .h {
    font-size: 0.8rem;
  }

  .muted {
    font-size: 0.82rem;
  }

  table {
    min-width: 520px;
  }

  th,
  td {
    padding: 8px;
    font-size: 0.8rem;
  }

  .chart-wrap {
    padding: 8px;
  }
}

/* =========================================
   EXTRA SMALL DEVICES
========================================= */

@media (max-width: 380px) {
  .header h1 {
    font-size: 0.95rem;
  }

  .sub {
    font-size: 0.76rem;
  }

  .slider-head {
    grid-template-columns: 1fr 65px;
  }

  .stat .v {
    font-size: 1.15rem;
  }

  .card {
    padding: 12px;
  }

  th,
  td {
    font-size: 0.75rem;
  }
}