* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #0f1115;
  color: #e5e7eb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.banner {
  padding: 10px 24px;
  font-size: 13px;
}

.banner--warning {
    background: #422006;
    color: #fbbf24;
  }

.banner--warning code {
      background: rgba(0,0,0,0.3);
      padding: 1px 4px;
      border-radius: 3px;
    }

@media (max-width: 600px) {

.banner {
    padding: 10px 16px;
    font-size: 12px
}
  }

.user-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 6px 24px;
  background: #181c23;
  border-bottom: 1px solid #262b35;
  font-size: 12px;
  color: #9ca3af;
}

.user-bar strong {
    color: #e5e7eb;
    font-weight: 500;
  }

.user-bar-link {
  color: #9ca3af;
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid #262b35;
  border-radius: 4px;
}

.user-bar-link:hover {
    color: #e5e7eb;
    border-color: #9ca3af;
  }

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #262b35;
}

.dashboard-header h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
  }

.dashboard-header .controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

.dashboard-header .controls .range-label { color: #9ca3af; }

@media (max-width: 600px) {

.dashboard-header {
    padding: 12px 16px
}

    .dashboard-header h1 { font-size: 16px; }

    .dashboard-header .last-updated { display: none; }
  }

/* Refresh button + "Xm ago" indicator — live in the header controls bar*/
.refresh-btn {
  background: transparent;
  color: #9ca3af;
  border: 1px solid #262b35;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.refresh-btn:hover {
    color: #e5e7eb;
    background: rgba(255,255,255,0.04);
    border-color: lighten(#262b35, 10%);
  }
.refresh-btn:active { transform: scale(0.96); }
.refresh-btn.is-spinning {
    animation: refresh-spin 0.6s linear infinite;
    pointer-events: none;
  }
@keyframes refresh-spin {
  to { transform: rotate(360deg); }
}
.last-updated {
  color: #9ca3af;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 72px;
  cursor: help;
}

/* Segmented brand picker — same shape as range picker, populated dynamically by JS*/
.brand-picker {
  display: inline-flex;
  background: rgba(0,0,0,0.2);
  border: 1px solid #262b35;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  min-height: 28px;
  align-items: center;
}
.brand-picker-loading {
  padding: 0 10px;
  color: #9ca3af;
  font-size: 12px;
}
.brand-btn {
  background: transparent;
  color: #9ca3af;
  border: 0;
  padding: 4px 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s ease, color 0.1s ease;
}
.brand-btn:hover:not(.is-active) {
    color: #e5e7eb;
    background: rgba(255,255,255,0.04);
  }
.brand-btn.is-active {
    background: #3b82f6;
    color: white;
  }
.brand-btn:focus-visible {
    outline: 2px solid rgba(59,130,246,0.5);
    outline-offset: 1px;
  }

/* Segmented date-range picker — replaces the original <select> dropdown*/
.range-picker {
  display: inline-flex;
  background: rgba(0,0,0,0.2);
  border: 1px solid #262b35;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.range-btn {
  background: transparent;
  color: #9ca3af;
  border: 0;
  padding: 4px 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s ease, color 0.1s ease;
}
.range-btn:hover:not(.is-active) {
    color: #e5e7eb;
    background: rgba(255,255,255,0.04);
  }
.range-btn.is-active {
    background: #3b82f6;
    color: white;
  }
.range-btn:focus-visible {
    outline: 2px solid rgba(59,130,246,0.5);
    outline-offset: 1px;
  }

.grid {
  display: grid;
  /* minmax(0, 1fr) instead of 1fr so panels can shrink below their intrinsic*/
  /* min-content. Without this, canvas elements (Chart.js sets explicit width*/
  /* attrs) lock the grid track wider than the viewport on small screens.*/
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  padding: 16px 24px;
}

@media (max-width: 900px) {

.grid {
    grid-template-columns: minmax(0, 1fr)
}
  }

@media (max-width: 600px) {

.grid {
    padding: 12px 16px;
    gap: 12px
}
  }

.panel {
  background: #181c23;
  border: 1px solid #262b35;
  border-radius: 8px;
  padding: 16px;
  position: relative;
  min-height: 180px;
}

.panel h2 {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

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

.panel--headline .big-number {
      font-size: 42px;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

.panel--headline .big-number-sub {
      color: #9ca3af;
      font-size: 12px;
      margin-top: -4px;
      margin-bottom: 12px;
    }

/* Chart.js with `maintainAspectRatio: false` resizes to fill its parent.*/

/* Cap height so the canvas can't grow unbounded if the parent has no*/

/* explicit height (which is the case for all panels here).*/

.panel .panel-body > canvas {
    display: block;
    max-height: 240px;
    width: 100% !important;
  }

.panel.is-loading .panel-body { opacity: 0.4; }

.panel.is-loading::after {
      content: "Loading…";
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      color: #9ca3af;
    }

.panel.is-error .panel-body { display: none; }

.panel.is-error .panel-error { display: block !important; }

.panel.is-empty .panel-body { display: none; }

.panel.is-empty .panel-empty { display: block !important; color: #9ca3af; padding: 24px 0; text-align: center; }

/* Small inline disclaimer above the panel grid explaining what Δ next to numbers means.*/
.grid-note {
  margin: 4px 0 -4px 0;
  padding: 8px 24px;
  color: #9ca3af;
  font-size: 11px;
  line-height: 1.5;
}
.grid-note em { color: #e5e7eb; font-style: italic; }
.grid-note-delta {
  display: inline-block;
  font-weight: 700;
  color: #e5e7eb;
  margin-right: 4px;
}

/* Big-number gets inline-block so the period-over-period delta indicator can*/
/* sit on the same line beside it (instead of dropping to its own line).*/
/* The subtitle (.big-number-sub) is still a block element so it drops below.*/
.big-number {
  display: inline-block;
}

/* Period-over-period delta indicator — sits inline after a big-number element.*/
/* Neutral colour (no green-up/red-down): direction interpretation depends on the*/
/* metric (more logins = good, longer reschedule shift = bad), so we leave the*/
/* interpretation to the reader.*/
.delta {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 500;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Inline example tokens used inside the .grid-note disclaimer — render the delta*/
/* pill in the flow of normal sentence text.*/
.delta.delta--example {
  margin-left: 0;
  margin-right: 2px;
  padding: 1px 6px;
  border: 1px solid #262b35;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  color: #e5e7eb;
  font-size: 11px;
  vertical-align: baseline;
}

/* Login panel — two stats side by side under one panel*/
.login-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-end;
  padding: 4px 0;
}
.login-stat {
  min-width: 120px;
}
.login-stat .big-number {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
  }
.login-stat .big-number-sub {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 6px;
  }

/* Histogram wrapper — used by the reschedule-shift panel.*/
.histogram-wrap {
  position: relative;
  height: 90px;
  width: 100%;
}

/* Frequency transitions — direction icon + row tinting*/
.freq-arrow-cell {
  text-align: center;
  width: 28px;
  padding: 6px 4px;
}
.freq-arrow {
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.freq-arrow--shortening { color: #10b981; }  /* green — engagement signal*/
.freq-arrow--prolonging { color: #f59e0b; }  /* amber — soft-cancel signal*/
.freq-arrow--lateral,
.freq-arrow--unknown    { color: #9ca3af; }

.freq-row--shortening td { background: rgba(16, 185, 129, 0.05); }
.freq-row--prolonging td { background: rgba(245, 158, 11, 0.05); }

/* Reason × Item crosstab heatmap table*/
.crosstab-wrap {
  overflow-x: auto;
}
.crosstab {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 11px;
}
.crosstab th, .crosstab td {
    border-bottom: 0;
    padding: 4px 6px;
  }
.crosstab .crosstab-corner {
    background: transparent;
  }
.crosstab .crosstab-col-header {
    color: #9ca3af;
    font-weight: 500;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
    text-align: center;
    max-width: 80px;
    word-wrap: break-word;
    line-height: 1.2;
  }
.crosstab .crosstab-row-header {
    color: #e5e7eb;
    font-weight: 400;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
    padding-right: 10px;
    background: transparent;
  }
.crosstab .crosstab-cell {
    text-align: center;
    font-variant-numeric: tabular-nums;
    border-radius: 3px;
    min-width: 36px;
    cursor: default;
  }
/* Sortable header — applies to both the corner (sort by item name) and the reason columns*/
.crosstab .crosstab-sortable {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    transition: color 0.1s, background 0.1s;
    position: relative;
  }
.crosstab .crosstab-sortable:hover {
      color: #e5e7eb;
      background: rgba(255,255,255,0.04);
    }
.crosstab .crosstab-sortable.is-sorted {
      color: #e5e7eb;
      background: rgba(59,130,246,0.08);
    }
.crosstab .crosstab-sortable .sort-indicator {
      display: inline-block;
      margin-left: 4px;
      color: #3b82f6;
      font-weight: 700;
      font-size: 14px;
      line-height: 0;
      vertical-align: middle;
    }

/* Generic in-panel disclaimer — small, dim, italicized clarifying text.*/
/* Sits between the <h2> and the panel-body to set expectations for non-obvious metrics.*/
.panel-disclaimer {
  margin: -4px 0 12px 0;
  font-size: 11px;
  line-height: 1.5;
  color: #9ca3af;
}
.panel-disclaimer code {
    background: rgba(255,255,255,0.04);
    padding: 0 4px;
    border-radius: 3px;
    font-size: 10px;
    color: #e5e7eb;
  }
.panel-disclaimer em {
    color: #e5e7eb;
    font-style: italic;
  }

/* Discount stickiness — comparison table: two cohorts (with / without discount) × three windows*/
.stickiness-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
.stickiness-table thead th {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 6px 8px;
    border-bottom: 1px solid #262b35;
  }
.stickiness-table thead th:first-child {
    border-bottom: 0;
  }
.stickiness-row-label {
  text-align: left !important;
  color: #e5e7eb;
  font-weight: 500;
  font-size: 12px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 14px 8px 14px 0 !important;
  white-space: nowrap;
  vertical-align: middle;
}
.stickiness-cell {
  text-align: center;
  padding: 12px 8px;
  vertical-align: middle;
}
.stickiness-cell--empty {
    opacity: 0.5;
  }
.stickiness-pct {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stickiness-note {
  display: block;
  color: #9ca3af;
  font-size: 10px;
  margin-top: 4px;
}

/* Expandable panels — clickable affordance + hint shown on hover.*/
/* Click action is wired in JS (navigates to a drill page; not a modal).*/
.panel[data-expandable="true"] {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.panel[data-expandable="true"]:hover {
    border-color: lighten(#262b35, 10%);
    background: lighten(#181c23, 1%);
  }
.panel[data-expandable="true"] .panel-expand-hint {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 8px;
    opacity: 0.5;
    transition: opacity 0.15s ease;
  }
.panel[data-expandable="true"]:hover .panel-expand-hint {
    opacity: 1;
  }

/* Drill-page layout (e.g. /items/cancelled)*/
.drill-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.drill-header-left h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
  }
.drill-back {
  color: #9ca3af;
  text-decoration: none;
  font-size: 13px;
  padding: 4px 10px;
  border: 1px solid #262b35;
  border-radius: 6px;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.drill-back:hover {
    color: #e5e7eb;
    background: rgba(255,255,255,0.04);
    border-color: lighten(#262b35, 10%);
  }
.drill-main {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drill-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.drill-toolbar input[type="text"] {
    flex: 1;
    max-width: 400px;
    background: rgba(0,0,0,0.25);
    color: #e5e7eb;
    border: 1px solid #262b35;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
  }
.drill-toolbar input[type="text"]::-moz-placeholder { color: #9ca3af; }
.drill-toolbar input[type="text"]::placeholder { color: #9ca3af; }
.drill-toolbar input[type="text"]:focus {
      outline: none;
      border-color: #3b82f6;
    }
.drill-row-count {
  color: #9ca3af;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.drill-table-wrap {
  background: #181c23;
  border: 1px solid #262b35;
  border-radius: 8px;
  overflow: hidden;
}
.drill-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.drill-table th, .drill-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #262b35;
    text-align: left;
  }
.drill-table thead th {
    color: #9ca3af;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
    background: lighten(#181c23, 1%);
    position: sticky;
    top: 0;
  }
.drill-table thead th[data-sort] {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
    transition: color 0.1s ease, background 0.1s ease;
  }
.drill-table thead th[data-sort]:hover {
      color: #e5e7eb;
      background: lighten(#181c23, 3%);
    }
.drill-table thead th[data-sort].is-sorted {
      color: #e5e7eb;
    }
.drill-table thead th[data-sort] .sort-indicator {
      display: inline-block;
      width: 14px;
      color: #3b82f6;
      font-weight: 600;
      margin-left: 4px;
      font-variant-numeric: tabular-nums;
    }
/* When active, blow up the arrow so the sort direction is obvious at a glance.*/
/* line-height: 0 + vertical-align: middle keeps the row height stable.*/
.drill-table thead th[data-sort].is-sorted .sort-indicator {
      font-size: 18px;
      font-weight: 700;
      line-height: 0;
      vertical-align: middle;
    }
.drill-table tbody tr:last-child td { border-bottom: 0; }
.drill-table tr:hover td { background: rgba(255,255,255,0.02); }
.drill-table .col-rank   { width: 40px;  color: #9ca3af; }
.drill-table .col-item   { font-weight: 500; }
.drill-table .col-sku    code {
    color: #9ca3af;
    font-size: 11px;
    background: rgba(0,0,0,0.25);
    padding: 1px 5px;
    border-radius: 3px;
  }
.drill-table .col-count  {
    text-align: right;
    width: 140px;
    font-variant-numeric: tabular-nums;
  }
.drill-loading,
.drill-empty,
.drill-error {
  padding: 32px;
  text-align: center;
  color: #9ca3af;
}

/* Expandable item rows — click to reveal reason breakdown*/
.drill-row {
  cursor: pointer;
}
.drill-row .expand-toggle {
    display: inline-block;
    width: 14px;
    color: #9ca3af;
    font-size: 11px;
    margin-right: 6px;
    transition: color 0.1s;
  }
.drill-row:hover .expand-toggle { color: #e5e7eb; }
.drill-row.is-expanded {
    background: rgba(255,255,255,0.03);
  }
.drill-row.is-expanded .expand-toggle { color: #3b82f6; }
.drill-row-detail > td {
  background: rgba(0,0,0,0.2);
  padding: 0 14px;
}
.reason-breakdown {
  padding: 14px 22px;
}
.reason-loading,
.reason-error,
.reason-empty {
  padding: 16px;
  color: #9ca3af;
  font-size: 12px;
  text-align: center;
}
.reason-table {
  width: 100%;
  max-width: 700px;
  border-collapse: collapse;
  font-size: 12px;
}
.reason-table thead th {
    color: #9ca3af;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-align: left;
    padding: 4px 8px;
    background: transparent;
    position: static; /* don't inherit the outer table's sticky*/
    border-bottom: 1px solid #262b35;
  }
.reason-table tbody td {
    padding: 5px 8px;
    border-bottom: 0;
  }
.reason-table .reason-label    { color: #e5e7eb; min-width: 140px; }
.reason-table .reason-bar-cell { width: 280px; padding-right: 12px; }
.reason-table .reason-count    { width: 60px;  text-align: right; color: #9ca3af; font-variant-numeric: tabular-nums; }
.reason-table .reason-pct      { width: 60px;  text-align: right; color: #e5e7eb; font-variant-numeric: tabular-nums; }
.reason-table .reason-bar {
    height: 6px;
    background: #3b82f6;
    border-radius: 3px;
    transition: width 0.2s ease;
    min-width: 1px;
  }
.reason-table .reason-bar--missing {
    background: #9ca3af;
    opacity: 0.4;
  }
.reason-table .reason-missing .reason-label { color: #9ca3af; font-style: italic; }

/* Chart wrapper for drill pages — fixed height so Chart.js (responsive +*/
/* maintainAspectRatio: false) has a parent to size into.*/
.drill-chart-wrap {
  background: #181c23;
  border: 1px solid #262b35;
  border-radius: 8px;
  padding: 16px;
  height: 380px;
  position: relative;
}

/* Save-rate drill: big-number block + sparkline-mode toggle on the same row*/
.save-rate-headline {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.save-rate-headline .save-rate-big .big-number {
      font-size: 48px;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1;
    }
.save-rate-headline .save-rate-big .big-number-sub {
      color: #9ca3af;
      font-size: 13px;
      margin-top: 4px;
    }

/* Inline anchor used inside .panel-disclaimer*/
.inline-link {
  color: #3b82f6;
  text-decoration: none;
}
.inline-link:hover { text-decoration: underline; }

.dashboard-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid #262b35;
  color: #9ca3af;
  font-size: 11px;
}

.dashboard-footer code {
    background: rgba(255,255,255,0.04);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    color: #e5e7eb;
  }

.dashboard-footer .footer-sep {
    opacity: 0.5;
  }

@media (max-width: 600px) {

.dashboard-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 16px
}

    .dashboard-footer .footer-sep { display: none; }
  }

.panel-error,
.panel-empty {
  display: none;
}

.panel-error button {
  margin-left: 8px;
  background: #3b82f6;
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

table th, table td {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid #262b35;
  }

table th {
    color: #9ca3af;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
  }

table td code {
    color: #9ca3af;
    font-size: 11px;
  }

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  background: #181c23;
  border: 1px solid #262b35;
  border-radius: 8px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.login-title {
  margin: 0 0 8px;
  font-size: 20px;
}

.login-sub {
  margin: 0 0 24px;
  color: #9ca3af;
  font-size: 13px;
}

.login-error {
  background: rgba(#ef4444, 0.12);
  border: 1px solid rgba(#ef4444, 0.4);
  color: lighten(#ef4444, 12%);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
  text-align: left;
}

.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: #3b82f6;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

.login-btn:hover { filter: brightness(1.1); }

.login-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: white;
  color: #3b82f6;
  border-radius: 50%;
  font-weight: 700;
  font-size: 12px;
}

.login-btn--secondary {
  background: transparent;
  border: 1px solid #262b35;
  color: #e5e7eb;
  margin-top: 8px;
}

.login-btn--secondary:hover { background: rgba(255,255,255,0.04); filter: none; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 16px;
  color: #9ca3af;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.login-divider::before, .login-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid #262b35;
  }

.login-local {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

/* Outcome distribution — rows variant.*/
.outcome-rows-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.outcome-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.outcome-label {
  color: #e5e7eb;
}

.outcome-track {
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  height: 14px;
  overflow: hidden;
}

.outcome-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.outcome-meta {
  color: #e5e7eb;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 90px;
  text-align: right;
}

.outcome-meta strong { font-weight: 600; }

.outcome-pct {
  color: #9ca3af;
  margin-left: 6px;
  font-size: 12px;
}

@media (max-width: 600px) {
  .outcome-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 12px;
  }
  .outcome-label { grid-column: 1 / 2; }
  .outcome-meta  { grid-column: 2 / 3; grid-row: 1 / 2; }
  .outcome-track { grid-column: 1 / -1; grid-row: 2 / 3; }
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #9ca3af;
}

.login-field input {
    background: #0f1115;
    border: 1px solid #262b35;
    color: #e5e7eb;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
  }

.login-field input:focus {
      outline: none;
      border-color: #3b82f6;
    }