/* Adapted from yuanzhi-yw/model-tester, MIT. See LICENSE. */

  :root {
    --bg:         #09090b;
    --panel:      #0f1011;
    --surface:    #191a1b;
    --hover:      rgba(255,255,255,0.03);
    --text:       #f7f8f8;
    --text2:      #d0d6e0;
    --text3:      #8a8f98;
    --text4:      #62666d;
    --accent:     #5e6ad2;
    --accent2:    #7170ff;
    --accent3:    #828fff;
    --green:      #10b981;
    --red:        #ef4444;
    --amber:      #f59e0b;
    --border:     rgba(255,255,255,0.05);
    --border2:    rgba(255,255,255,0.08);
    --border3:    rgba(255,255,255,0.06);
    --font:       'Inter', -apple-system, system-ui, sans-serif;
    --mono:       ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
  }

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

  [data-theme="light"] {
    --bg: #ffffff;
    --panel: #f9f9fb;
    --surface: #f0f0f3;
    --hover: rgba(0,0,0,0.03);
    --text: #1a1a1a;
    --text2: #3d3d3d;
    --text3: #6b6b6b;
    --text4: #9a9a9a;
    --accent: #5e6ad2;
    --accent2: #7170ff;
    --accent3: #828fff;
    --green: #10b981;
    --red: #ef4444;
    --amber: #f59e0b;
    --border: rgba(0,0,0,0.06);
    --border2: rgba(0,0,0,0.10);
    --border3: rgba(0,0,0,0.08);
  }

  html {
    font-feature-settings: "cv01", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    background: var(--bg);
    color: var(--text2);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.165px;
    min-height: 100vh;
  }

  ::selection { background: rgba(113, 112, 255, 0.2); }

  /* Page shell */
  .page {
    max-width: 840px;
    margin: 0 auto;
    padding: 80px 24px 120px;
  }

  /* Header */
  .header { margin-bottom: 80px; }
  .header h1 {
    font-size: 48px;
    font-weight: 510;
    line-height: 1.0;
    letter-spacing: -1.056px;
    color: var(--text);
    margin-bottom: 14px;
  }
  .header p {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.165px;
    color: var(--text3);
    max-width: 540px;
  }

  /* Sections */
  .section { margin-bottom: 80px; }
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .section-label {
    font-size: 12px;
    font-weight: 510;
    text-transform: uppercase;
    color: var(--text4);
    letter-spacing: 0.3px;
  }
  .section-header-actions {
    display: flex;
    gap: 4px;
  }
  /* Channel cards */
  .channels {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .channel {
    background: var(--panel);
    border: none;
    border-radius: 8px;
    padding: 20px 24px;
    transition: background 0.15s ease;
  }
  .channel:hover {
    background: rgba(255, 255, 255, 0.025);
  }
  .channel-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }
  .channel-name h3 {
    font-size: 14px;
    font-weight: 510;
    color: var(--text);
    letter-spacing: -0.182px;
    flex: 1;
  }
  .channel-name .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .dot--0 { background: var(--accent2); }
  .dot--1 { background: #38bdf8; }
  .dot--2 { background: #a78bfa; }
  .dot--3 { background: #34d399; }
  .dot--4 { background: #fb923c; }

  .channel-fields {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 12px;
  }
  .field label {
    display: block;
    font-size: 11px;
    font-weight: 510;
    color: var(--text4);
    margin-bottom: 5px;
    letter-spacing: 0.1px;
  }
  .field input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border2);
    border-radius: 6px;
    color: var(--text2);
    font-size: 13px;
    font-family: var(--mono);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .field input::placeholder { color: var(--text4); }
  .field input:focus {
    border-color: var(--accent2);
    box-shadow: 0 0 0 1px rgba(113, 112, 255, 0.12),
                rgba(0, 0, 0, 0.1) 0px 4px 12px;
  }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border2);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 510;
    font-family: var(--font);
    font-feature-settings: "cv01", "ss03";
    cursor: pointer;
    transition: all 0.12s ease;
    line-height: 1.5;
    outline: none;
  }
  .btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .btn--primary:hover {
    background: var(--accent3);
    border-color: var(--accent3);
  }
  .btn--primary:disabled { opacity: 0.4; pointer-events: none; }
  .btn--ghost {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text2);
    border-color: var(--border2);
  }
  .btn--ghost:hover { background: rgba(255, 255, 255, 0.05); }
  .btn--ghost:disabled { opacity: 0.35; pointer-events: none; }
  .btn--danger {
    background: transparent;
    color: var(--red);
    border-color: rgba(239, 68, 68, 0.12);
  }
  .btn--danger:hover { background: rgba(239, 68, 68, 0.06); }
  .btn--sm { padding: 4px 10px; font-size: 12px; }
  .btn--tiny { padding: 2px 8px; font-size: 11px; }

  .action-row {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    align-items: center;
    flex-wrap: wrap;
  }
  .action-row--between { justify-content: space-between; }

  .status-line {
    font-size: 13px;
    color: var(--text4);
    margin-top: 10px;
    letter-spacing: -0.13px;
  }
  .status-line.ok { color: var(--green); }
  .status-line.err { color: var(--red); }

  /* Channel filter chips */
  .filter-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 6px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 510;
    cursor: pointer;
    border: 1px solid var(--border2);
    color: var(--text4);
    background: transparent;
    transition: all 0.12s ease;
    user-select: none;
  }
  .filter-chip .fd {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .filter-chip.active { color: #fff; border-color: transparent; }
  .filter-chip:hover { background: rgba(255, 255, 255, 0.03); }
  .filter-chip.active:hover { opacity: 0.9; }

  /* Model scroll list */
  .model-scroll {
    max-height: 380px;
    overflow-y: auto;
    margin-top: 8px;
    padding: 2px 0;
  }
  .model-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-family: var(--mono);
    color: var(--text2);
    transition: background 0.08s ease;
  }
  .model-row:hover { background: var(--hover); }
  .model-row input[type="checkbox"] {
    accent-color: var(--accent2);
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .src-tag {
    font-size: 10px;
    font-weight: 510;
    font-family: var(--font);
    font-feature-settings: "cv01", "ss03";
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  .model-owner {
    color: var(--text4);
    font-size: 11px;
    font-family: var(--font);
    font-feature-settings: "cv01", "ss03";
  }

  /* Select row */
  .select-links {
    display: flex;
    gap: 16px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 510;
  }
  .select-links a {
    color: var(--text4);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.1s ease;
  }
  .select-links a:hover { color: var(--text3); }
  .select-hint { font-size: 12px; color: var(--text4); }

  /* Results table */
  .table-wrap { overflow-x: auto; }
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 510;
    text-transform: uppercase;
    color: var(--text4);
    letter-spacing: 0.2px;
    border-bottom: 1px solid var(--border);
  }
  tbody td {
    padding: 12px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text2);
  }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr { transition: background 0.08s ease; }
  tbody tr:hover { background: rgba(255, 255, 255, 0.012); }
  .cell-model {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text);
  }
  .cell-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 510;
    color: var(--text4);
    background: rgba(255, 255, 255, 0.02);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
  }
  .cell-source .sdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }

  /* Pill badges with dots */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px 2px 6px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 510;
    line-height: 1.5;
    border: 1px solid;
  }
  .chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .chip--pass {
    color: var(--green);
    border-color: rgba(16, 185, 129, 0.15);
    background: rgba(16, 185, 129, 0.04);
  }
  .chip--pass::before { background: var(--green); }
  .chip--fail {
    color: var(--red);
    border-color: rgba(239, 68, 68, 0.15);
    background: rgba(239, 68, 68, 0.04);
  }
  .chip--fail::before { background: var(--red); }
  .chip--warn {
    color: var(--amber);
    border-color: rgba(245, 158, 11, 0.15);
    background: rgba(245, 158, 11, 0.04);
  }
  .chip--warn::before { background: var(--amber); }
  .chip--idle {
    color: var(--text4);
    border-color: var(--border);
    background: transparent;
  }
  .chip--idle::before { background: var(--text4); }

  /* Progress */
  .progress {
    height: 2px;
    background: rgba(255, 255, 255, 0.03);
    margin-top: 20px;
    border-radius: 1px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .progress.on { opacity: 1; }
  .progress-bar {
    height: 100%;
    background: var(--accent2);
    width: 0%;
    transition: width 0.25s ease;
  }

  /* Concurrency control */
  .conc-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text4);
  }
  .conc-control select {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border2);
    border-radius: 4px;
    color: var(--text2);
    font-size: 12px;
    font-family: var(--mono);
    padding: 2px 6px;
    outline: none;
    cursor: pointer;
  }
  .conc-control select:focus { border-color: var(--accent2); }

  /* Footnote */
  .footnote {
    padding: 16px 20px;
    background: rgba(94, 106, 210, 0.03);
    border: 1px solid rgba(94, 106, 210, 0.06);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text3);
    line-height: 1.7;
    letter-spacing: -0.13px;
  }
  .footnote strong { color: var(--text2); font-weight: 590; }
  .footnote code {
    background: rgba(94, 106, 210, 0.10);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 12px;
  }

  /* Spinner */
  .spin {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--border2);
    border-top-color: var(--accent2);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Toast */
  .toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 510;
    color: var(--text2);
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.18s ease;
    pointer-events: none;
    z-index: 100;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
                rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  }
  .toast.on { opacity: 1; transform: translateY(0); }