:root {
      --bg: #0f172a;
      --panel: #111827;
      --panel-2: #0b1220;
      --text: #e5e7eb;
      --muted: #9ca3af;
      --primary: #60a5fa;
      --primary-2: #22d3ee;
      --accent: #34d399;
      --danger: #f87171;
      --grid: rgba(148,163,184,0.15);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text);
      background: radial-gradient(1000px 600px at 20% -10%, rgba(59,130,246,0.25), transparent 60%),
                  radial-gradient(700px 500px at 100% 0%, rgba(34,211,238,0.2), transparent 60%),
                  linear-gradient(180deg, #0b1022 0%, #0a0f1e 60%, #080d1a 100%);
      min-height: 100vh;
    }
    header {
      padding: 20px clamp(16px, 3vw, 28px) 8px;
    }
    .title {
      font-size: clamp(20px, 3vw, 28px);
      font-weight: 700;
      letter-spacing: 0.2px;
    }
    .subtitle {
      color: var(--muted);
      margin-top: 6px;
      font-size: 14px;
    }

    main {
      padding: 4px clamp(16px, 3vw, 28px) 28px;
    }
    .grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: clamp(12px, 2.5vw, 22px);
    }
    @media (max-width: 980px) {
      .grid { grid-template-columns: 1fr; }
    }

    .card {
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      border: 1px solid rgba(148,163,184,0.15);
      border-radius: 14px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
      overflow: hidden;
    }
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px 10px 16px;
      border-bottom: 1px solid rgba(148,163,184,0.12);
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
    }
    .card-title { font-weight: 600; letter-spacing: 0.2px; }
    .badge {
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(96,165,250,0.15);
      border: 1px solid rgba(96,165,250,0.35);
      color: #bfdbfe;
    }
    .card-body { padding: 16px; }

    /* Plot area */
    .plot-wrap { width: 100%; height: clamp(320px, 45vh, 520px); }
    svg { width: 100%; height: 100%; display: block; }
    .axis path, .axis line { stroke: rgba(148,163,184,0.35); }
    .gridline { stroke: var(--grid); stroke-dasharray: 3 5; }
    .point { cursor: ns-resize; }

    .legend {
      display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
      color: var(--muted); font-size: 13px; margin-top: 10px;
    }
    .legend .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 6px; }

    /* Controls */
    .controls { display: grid; gap: 14px; }
    .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
    .row label { color: var(--muted); font-size: 12px; letter-spacing: 0.3px; text-transform: uppercase; }
    .value {
      min-width: 92px; text-align: right; font-variant-numeric: tabular-nums;
      padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.06);
      border: 1px solid rgba(148,163,184,0.18);
    }
    .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: rgba(148,163,184,0.25); outline: none; }
    .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(180deg, #93c5fd, #60a5fa); border: 1px solid rgba(30,64,175,0.6); box-shadow: 0 6px 14px rgba(59,130,246,0.45); cursor: pointer; }
    .slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #60a5fa; border: none; cursor: pointer; }

    .buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
    button {
      background: linear-gradient(180deg, rgba(96,165,250,0.15), rgba(96,165,250,0.05));
      color: #dbeafe; border: 1px solid rgba(96,165,250,0.35);
      padding: 10px 12px; border-radius: 10px; cursor: pointer; font-weight: 600;
      transition: transform .06s ease, filter .15s ease;
    }
    button:hover { filter: brightness(1.08); }
    button:active { transform: translateY(1px); }

    .eq {
      margin-top: 8px; padding: 10px 12px; border-radius: 10px;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      border: 1px solid rgba(148,163,184,0.18);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 13px;
    }

    .kpi {
      display: flex; gap: 14px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 13px; margin: 8px 0 0;
    }
    .kpi .pill {
      background: rgba(34,211,238,0.12); border: 1px solid rgba(34,211,238,0.35);
      color: #a5f3fc; padding: 6px 10px; border-radius: 999px; font-variant-numeric: tabular-nums;
    }

    /* NN Viz */
    .viz {
      width: 100%; height: clamp(220px, 30vh, 320px);
      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      border: 1px solid rgba(148,163,184,0.15);
      border-radius: 12px; margin-top: 14px; position: relative; overflow: hidden;
    }
    .viz .caption { position: absolute; right: 10px; bottom: 8px; color: var(--muted); font-size: 12px; }

    /* Predictions table */
    .table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; color: var(--muted); }
    .table th, .table td { text-align: right; padding: 6px 8px; border-bottom: 1px dashed rgba(148,163,184,0.18); font-variant-numeric: tabular-nums; }
    .table th:first-child, .table td:first-child { text-align: left; }
    .table th:nth-child(n+2), .table td:nth-child(n+2) { width: 22%; }
    .table tfoot td { border-top: 1px solid rgba(148,163,184,0.25); color: var(--text); font-weight: 600; }
    .residual-line { stroke: #f87171; stroke-opacity: 0.9; stroke-width: 2; stroke-linecap: round; }

    button.primary {
        background: linear-gradient(180deg, var(--primary), #3b82f6);
        color: white;
        border-color: #1d4ed8;
        box-shadow: 0 4px 12px rgba(59,130,246,0.3);
        font-weight: 700;
    }