:root {
      --bg: #f3f5f8;
      --bg-soft: #eef2f7;
      --panel: rgba(255, 255, 255, 0.78);
      --panel-solid: #ffffff;
      --muted: #667085;
      --text: #101828;
      --text-soft: #344054;
      --line: rgba(15, 23, 42, 0.08);
      --line-strong: rgba(15, 23, 42, 0.12);
      --accent: #0a84ff;
      --accent-soft: rgba(10, 132, 255, 0.12);
      --success: #16a34a;
      --warn: #d97706;
      --shadow-soft: 0 20px 50px rgba(15, 23, 42, 0.08);
      --shadow-card: 0 12px 30px rgba(15, 23, 42, 0.06);
      --radius-xl: 30px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --radius-sm: 14px;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at top right, rgba(10, 132, 255, 0.08) 0%, rgba(10, 132, 255, 0) 28%),
        linear-gradient(180deg, #f8fafc 0%, var(--bg) 42%, var(--bg-soft) 100%);
      color: var(--text);
      min-height: 100vh;
    }
    .container {
      max-width: 1480px;
      margin: 0 auto;
      padding: 40px 28px 64px;
    }
    .hero {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 28px;
      padding: 28px 28px 18px;
      background: rgba(255, 255, 255, 0.62);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(15, 23, 42, 0.06);
      box-shadow: var(--shadow-soft);
    }
    .hero-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
    }
    .hero-left {
      flex: 1 1 0;
      min-width: 0;
    }
    .hero-bar {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .hero-status-text {
      margin-left: auto;
      color: var(--muted);
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
      text-align: right;
      flex-shrink: 0;
    }
    .hero-count {
      font-size: 22px;
      line-height: 1.05;
      font-weight: 680;
      letter-spacing: -0.04em;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }
    .hero-count-label {
      color: var(--muted);
      font-size: 13px;
      font-weight: 500;
    }
    .hero-kicker {
      margin-bottom: 10px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .brand-mark {
      position: relative;
      width: 44px;
      height: 44px;
      flex: 0 0 auto;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--accent), var(--success));
      box-shadow: 0 10px 24px rgba(10, 132, 255, 0.20);
    }
    .brand-mark::before {
      content: "";
      position: absolute;
      left: 11px;
      right: 11px;
      bottom: 11px;
      height: 3px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.86);
    }
    .brand-mark-line {
      position: absolute;
      inset: 0;
    }
    .brand-mark-line::before {
      content: "";
      position: absolute;
      left: 11px;
      top: 23px;
      width: 24px;
      height: 15px;
      border-left: 4px solid #fff;
      border-top: 4px solid #fff;
      transform: skewY(-32deg);
      border-radius: 3px 0 0 0;
    }
    h1 {
      margin: 0;
      font-size: clamp(40px, 5vw, 56px);
      line-height: 1.02;
      letter-spacing: -0.045em;
      font-weight: 720;
    }
    .hero-desc {
      margin: 16px 0 0;
      max-width: 760px;
      color: var(--text-soft);
      font-size: 18px;
      line-height: 1.65;
      letter-spacing: -0.01em;
    }
    .space-switcher {
      display: flex;
      gap: 4px;
      padding: 4px;
      border-radius: 999px;
      background: rgba(241, 245, 249, 0.82);
      border: 1px solid rgba(15, 23, 42, 0.10);
      box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
      width: fit-content;
    }
    .space-switcher.hidden { display: none; }
    .space-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 88px;
      min-height: 36px;
      padding: 0 16px;
      border: none;
      border-radius: 999px;
      background: transparent;
      color: rgba(52, 64, 84, 0.72);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.012em;
      cursor: pointer;
      white-space: nowrap;
      transition: background 140ms ease, color 140ms ease, box-shadow 160ms ease;
    }
    .space-btn:hover {
      color: var(--text-soft);
    }
    .space-btn.active {
      background: rgba(255, 255, 255, 0.98);
      color: var(--text);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10), 0 6px 16px rgba(15, 23, 42, 0.06);
    }
    .auth-card {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
      flex-shrink: 0;
    }
    .auth-summary {
      color: var(--text);
      font-size: 14px;
      line-height: 1.4;
      font-weight: 600;
      text-align: right;
    }
    .auth-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .auth-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, 0.12);
      background: rgba(255, 255, 255, 0.96);
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    }
    .auth-btn.primary {
      background: var(--accent);
      color: white;
      border-color: rgba(10, 132, 255, 0.5);
    }
    .auth-btn:disabled {
      opacity: 0.6;
      cursor: progress;
    }
    .user-menu { position: relative; }
    .user-menu.hidden { display: none; }
    .user-menu-trigger {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 4px 12px 4px 4px;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, 0.12);
      background: rgba(255, 255, 255, 0.96);
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
      transition: background 140ms ease, border-color 140ms ease;
    }
    .user-menu-trigger:hover {
      background: rgba(248, 250, 252, 1);
      border-color: rgba(15, 23, 42, 0.18);
    }
    .user-menu-avatar {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: linear-gradient(135deg, #0a84ff 0%, #5856d6 100%);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .user-menu-label {
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .user-menu-chevron {
      font-size: 10px;
      color: var(--muted);
      margin-left: 2px;
    }
    .user-menu-popover {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 200px;
      padding: 6px;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(15, 23, 42, 0.10);
      border-radius: 12px;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
      z-index: 60;
      backdrop-filter: blur(12px);
    }
    .user-menu-popover.hidden { display: none; }
    .user-menu-item {
      display: block;
      width: 100%;
      padding: 8px 10px;
      text-align: left;
      border: none;
      background: transparent;
      color: var(--text);
      font-size: 13px;
      font-weight: 500;
      border-radius: 8px;
      cursor: pointer;
    }
    .user-menu-item:hover {
      background: rgba(15, 23, 42, 0.04);
    }
    .user-menu-divider {
      height: 1px;
      background: rgba(15, 23, 42, 0.08);
      margin: 4px 6px;
    }
    .auth-modal {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .auth-modal.hidden { display: none; }
    .auth-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.45);
      backdrop-filter: blur(2px);
    }
    .auth-modal-card {
      position: relative;
      width: 100%;
      max-width: 420px;
      background: var(--panel-solid);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
      padding: 24px;
    }
    .auth-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .auth-modal-title {
      font-size: 18px;
      font-weight: 650;
      letter-spacing: -0.01em;
    }
    .auth-modal-close {
      border: none;
      background: transparent;
      font-size: 22px;
      line-height: 1;
      color: var(--muted);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 999px;
    }
    .auth-modal-close:hover {
      background: rgba(15, 23, 42, 0.06);
    }
    .shortcuts-modal {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .shortcuts-modal.hidden { display: none; }
    .shortcuts-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.38);
      backdrop-filter: blur(2px);
    }
    .shortcuts-modal-card {
      position: relative;
      width: min(420px, 100%);
      background: var(--panel-solid);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
      padding: 22px;
    }
    .shortcuts-modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }
    .shortcuts-modal-title {
      font-size: 18px;
      font-weight: 650;
      letter-spacing: -0.01em;
    }
    .shortcuts-modal-subtitle {
      margin-top: 4px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }
    .shortcuts-list {
      display: grid;
      gap: 10px;
    }
    .shortcut-row {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--text-soft);
      font-size: 14px;
    }
    .shortcut-row kbd {
      min-width: 28px;
      padding: 3px 7px;
      border: 1px solid var(--line-strong);
      border-bottom-width: 2px;
      border-radius: 7px;
      background: rgba(15, 23, 42, 0.04);
      color: var(--text);
      font: 600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      text-align: center;
    }
    tr.is-active-row td {
      box-shadow: inset 0 1px 0 var(--accent-soft), inset 0 -1px 0 var(--accent-soft);
    }
    tr.is-active-row td:first-child {
      box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--accent-soft), inset 0 -1px 0 var(--accent-soft);
    }
    .auth-tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      background: rgba(15, 23, 42, 0.05);
      border-radius: 999px;
      padding: 4px;
      margin-bottom: 18px;
    }
    .auth-tab {
      border: none;
      background: transparent;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 600;
      padding: 8px 12px;
      border-radius: 999px;
      cursor: pointer;
    }
    .auth-tab.active {
      background: white;
      color: var(--text);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    }
    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .auth-field > span {
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: 0;
    }
    .auth-field-hint {
      text-transform: none;
      letter-spacing: 0;
      color: rgba(100, 116, 139, 0.8);
      font-weight: 500;
    }
    .auth-field input {
      width: 100%;
      min-height: 42px;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(148, 163, 184, 0.55);
      background: white;
      font-size: 14px;
    }
    .auth-field input:focus {
      border-color: rgba(10, 132, 255, 0.55);
      box-shadow: 0 0 0 4px var(--accent-soft);
      outline: none;
    }
    .auth-form-error {
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      background: rgba(220, 38, 38, 0.08);
      border: 1px solid rgba(220, 38, 38, 0.22);
      color: #991b1b;
      font-size: 13px;
    }
    .auth-form-error.hidden { display: none; }
    .oauth-row {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 14px;
    }
    .oauth-row.hidden { display: none; }
    .oauth-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 10px;
      border: 1px solid rgba(15, 23, 42, 0.16);
      background: #0f172a;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      transition: background 140ms ease, transform 120ms ease;
    }
    .oauth-btn:hover {
      background: #1e293b;
      transform: translateY(-1px);
    }
    .oauth-btn:active { transform: translateY(0); }
    .oauth-btn.is-loading {
      pointer-events: none;
      opacity: 0.85;
    }
    .oauth-btn-icon { flex-shrink: 0; }
    .oauth-hint {
      font-size: 12px;
      color: var(--muted);
      text-align: center;
      line-height: 1.4;
      margin-top: -4px;
    }
    .oauth-divider {
      position: relative;
      text-align: center;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .oauth-divider::before,
    .oauth-divider::after {
      content: "";
      position: absolute;
      top: 50%;
      width: calc(50% - 50px);
      height: 1px;
      background: rgba(15, 23, 42, 0.10);
    }
    .oauth-divider::before { left: 0; }
    .oauth-divider::after { right: 0; }
    .auth-form-error a {
      color: #b91c1c;
      font-weight: 600;
      text-decoration: underline;
      cursor: pointer;
    }
    .auth-form-error a:hover { color: #7f1d1d; }
    .auth-submit { width: 100%; }
    .auth-modal-help {
      font-size: 12px;
      color: var(--muted);
    }

    /* ── API Tokens in profile modal ────────────────────────────────── */
    .tokens-section {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }
    .tokens-section-head {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 12px;
    }
    .tokens-section-title {
      font-size: 14px;
      font-weight: 650;
    }
    .tokens-section-hint {
      font-size: 12px;
      color: var(--muted);
    }
    .tokens-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 12px;
    }
    .tokens-list:empty {
      display: none;
      margin-bottom: 0;
    }
    .token-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 12px;
      background: var(--bg-soft);
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
    }
    .token-item-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .token-item-name {
      font-size: 13px;
      font-weight: 600;
    }
    .token-item-meta {
      font-size: 11px;
      color: var(--muted);
    }
    .token-item-meta code {
      font-size: 11px;
    }
    .token-revoke-btn {
      flex-shrink: 0;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--muted);
      font-size: 11px;
      padding: 4px 10px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
    }
    .token-revoke-btn:hover {
      background: rgba(220, 38, 38, 0.08);
      border-color: rgba(220, 38, 38, 0.30);
      color: #dc2626;
    }
    .token-created-box {
      margin-bottom: 12px;
      padding: 12px;
      background: rgba(34, 197, 94, 0.08);
      border: 1px solid rgba(34, 197, 94, 0.25);
      border-radius: var(--radius-sm);
    }
    .token-created-box.hidden { display: none; }
    .token-created-head {
      font-size: 12px;
      font-weight: 600;
      color: #16a34a;
      margin-bottom: 8px;
    }
    .token-created-value-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .token-created-value {
      flex: 1;
      font-size: 11px;
      padding: 6px 10px;
      background: var(--bg);
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
      word-break: break-all;
      user-select: all;
    }
    .token-copy-btn {
      flex-shrink: 0;
      border: 1px solid var(--line);
      background: var(--bg);
      color: var(--text);
      font-size: 12px;
      padding: 5px 12px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background 140ms ease;
    }
    .token-copy-btn:hover { background: var(--bg-soft); }
    .tokens-create-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .token-name-input {
      flex: 1;
      min-height: 36px;
      padding: 8px 10px;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(148, 163, 184, 0.55);
      background: white;
      font-size: 13px;
    }
    .token-name-input:focus {
      border-color: rgba(10, 132, 255, 0.55);
      box-shadow: 0 0 0 4px var(--accent-soft);
      outline: none;
    }
    .section-shell {
      margin-bottom: 22px;
      padding: 24px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(18px);
    }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }
    .section-title {
      margin: 0;
      font-size: 26px;
      line-height: 1.15;
      letter-spacing: -0.03em;
      font-weight: 650;
    }
    .info-dot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      margin-left: 8px;
      border-radius: 999px;
      border: 1px solid rgba(100, 116, 139, 0.45);
      background: rgba(255, 255, 255, 0.9);
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      cursor: help;
      vertical-align: middle;
      position: relative;
      transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
    }
    .info-dot:hover,
    .info-dot:focus-visible {
      border-color: rgba(10, 132, 255, 0.55);
      color: var(--accent);
      background: rgba(10, 132, 255, 0.06);
      outline: none;
    }
    .info-dot-tip {
      position: absolute;
      left: 50%;
      top: calc(100% + 8px);
      transform: translateX(-50%);
      width: max-content;
      max-width: 260px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(15, 23, 42, 0.12);
      background: rgba(15, 23, 42, 0.92);
      color: rgba(255, 255, 255, 0.94);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1.4;
      text-transform: none;
      box-shadow: 0 18px 38px rgba(15, 23, 42, 0.22);
      opacity: 0;
      pointer-events: none;
      transition: opacity 140ms ease, transform 160ms ease;
      z-index: 30;
    }
    .info-dot:hover .info-dot-tip,
    .info-dot:focus-visible .info-dot-tip {
      opacity: 1;
      transform: translateX(-50%) translateY(-2px);
    }
    .info-dot-tip kbd {
      display: inline-block;
      padding: 1px 5px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.12);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 11px;
      font-weight: 600;
    }
    .section-desc {
      margin: 8px 0 0;
      max-width: 840px;
      color: var(--text-soft);
      font-size: 15px;
      line-height: 1.6;
    }
    .sub {
      color: var(--muted);
      margin: 6px 0 0;
      font-size: 13px;
      line-height: 1.45;
    }
    .controls {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(170px, 220px) auto;
      gap: 14px;
      margin-bottom: 22px;
      align-items: center;
    }
    .controls input, .controls select {
      width: 100%;
      min-height: 52px;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(148, 163, 184, 0.55);
      color: var(--text);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      font-size: 14px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 10px 24px rgba(15, 23, 42, 0.08);
    }
    .controls input::placeholder {
      color: rgba(71, 85, 105, 0.62);
    }
    .controls input:focus, .controls select:focus {
      border-color: rgba(10, 132, 255, 0.55);
      box-shadow: 0 0 0 4px var(--accent-soft), 0 14px 28px rgba(15, 23, 42, 0.10);
    }
    .controls select,
    thead .filter-row select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding-right: 44px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5.25 7.75L10 12.5l4.75-4.75' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      background-size: 16px 16px;
    }
    .sort-wrap {
      position: relative;
      width: 100%;
    }
    .sort-wrap select {
      width: 100%;
    }
    .sort-dir {
      position: absolute;
      right: 44px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      display: grid;
      place-items: center;
      pointer-events: none;
      opacity: 0.9;
    }
    .sort-dir svg {
      width: 18px;
      height: 18px;
      display: block;
    }
    .sort-tooltip {
      position: absolute;
      left: 0;
      top: calc(100% + 10px);
      z-index: 30;
      width: max-content;
      max-width: 260px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(15, 23, 42, 0.12);
      background: rgba(15, 23, 42, 0.92);
      color: rgba(255, 255, 255, 0.92);
      font-size: 12px;
      line-height: 1.35;
      box-shadow: 0 18px 38px rgba(15, 23, 42, 0.22);
      opacity: 0;
      transform: translateY(-4px);
      pointer-events: none;
      transition: opacity 140ms ease, transform 160ms ease;
    }
    .sort-tooltip::before {
      content: "";
      position: absolute;
      top: -6px;
      left: 16px;
      width: 10px;
      height: 10px;
      transform: rotate(45deg);
      background: rgba(15, 23, 42, 0.92);
      border-left: 1px solid rgba(15, 23, 42, 0.12);
      border-top: 1px solid rgba(15, 23, 42, 0.12);
    }
    .sort-wrap.show-tip .sort-tooltip {
      opacity: 1;
      transform: translateY(0);
    }
    .controls button {
      width: auto;
      min-height: 52px;
      background: rgba(16, 24, 40, 0.94);
      color: #ffffff;
      border: 1px solid rgba(16, 24, 40, 0.94);
      border-radius: var(--radius-sm);
      padding: 0 18px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      justify-self: start;
      box-shadow: var(--shadow-card);
    }
    .table-toolbar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      margin: -4px 2px 14px;
    }
    .table-toolbar .info-dot-tip {
      max-width: 320px;
      white-space: normal;
      text-align: left;
    }
    .export-wrap {
      position: relative;
      display: inline-flex;
    }
    .export-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 36px;
      padding: 0 14px 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, 0.12);
      background: white;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
      transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, color 140ms ease;
    }
    .export-icon {
      flex: 0 0 auto;
      color: var(--muted);
      transition: color 140ms ease;
    }
    .export-btn:hover .export-icon,
    .export-btn[aria-expanded="true"] .export-icon {
      color: var(--accent);
    }
    .export-btn:hover {
      border-color: rgba(10, 132, 255, 0.45);
      background: rgba(10, 132, 255, 0.04);
      color: var(--text);
    }
    .export-btn[aria-expanded="true"] {
      border-color: rgba(10, 132, 255, 0.55);
      background: rgba(10, 132, 255, 0.06);
      color: var(--text);
    }
    .export-caret { font-size: 10px; color: var(--muted); }
    .export-menu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 160px;
      padding: 6px;
      background: white;
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
      z-index: 40;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .export-menu.hidden { display: none; }
    .export-menu-item {
      display: block;
      width: 100%;
      text-align: left;
      padding: 8px 10px;
      border: none;
      background: transparent;
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
    }
    .export-menu-item:hover {
      background: rgba(10, 132, 255, 0.08);
      color: var(--accent);
    }
    .view-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0;
      padding: 2px;
      border-radius: 10px;
      border: 1px solid rgba(15, 23, 42, 0.10);
      background: rgba(241, 245, 249, 0.82);
      box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
    }
    .view-toggle input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .view-toggle-option {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      min-width: 82px;
      padding: 0 13px;
      border-radius: 8px;
      color: rgba(52, 64, 84, 0.72);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.012em;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      transition: background 140ms ease, color 140ms ease, box-shadow 160ms ease;
    }
    .view-toggle-option:hover {
      color: var(--text-soft);
    }
    .view-toggle-option:has(input:checked) {
      background: rgba(255, 255, 255, 0.98);
      color: var(--text);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10), 0 6px 16px rgba(15, 23, 42, 0.06);
    }
    .view-toggle-option:has(input:focus-visible) {
      box-shadow: 0 0 0 4px var(--accent-soft), 0 1px 2px rgba(15, 23, 42, 0.10);
    }
    tr.variant-child { background: rgba(248, 250, 252, 0.68); }
    tr.variant-child td:first-child { padding-left: 22px; position: relative; }
    tr.variant-child td:first-child::before {
      content: "";
      position: absolute;
      left: 10px;
      top: 50%;
      width: 5px;
      height: 5px;
      margin-top: -2.5px;
      border-radius: 999px;
      background: rgba(100, 116, 139, 0.32);
    }
    .index-cell {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      min-width: 0;
      width: 100%;
    }
    .index-label {
      color: var(--muted);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: -0.01em;
      font-variant-numeric: tabular-nums;
    }
    .variant-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 9px;
      min-height: 24px;
      font-size: 12px;
      font-weight: 650;
      letter-spacing: -0.01em;
      line-height: 1;
      color: rgba(52, 64, 84, 0.74);
      background: rgba(248, 250, 252, 0.92);
      border: 1px solid rgba(15, 23, 42, 0.06);
      border-radius: 999px;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
      vertical-align: middle;
      white-space: nowrap;
      transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 160ms ease;
    }
    .variant-toggle:hover {
      color: var(--text-soft);
      border-color: rgba(15, 23, 42, 0.09);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
    }
    .variant-toggle:active { transform: translateY(0); }
    .variant-toggle .caret {
      font-size: 10px;
      color: rgba(100, 116, 139, 0.72);
    }
    .variant-toggle .count { letter-spacing: -0.01em; }
    .cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
    .card {
      min-height: 148px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 22px;
      box-shadow: var(--shadow-card);
      position: relative;
      overflow: hidden;
      transition: transform 180ms ease, box-shadow 220ms ease, border-color 220ms ease;
    }
    .card::before {
      content: "";
      position: absolute;
      inset: 0 auto auto 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, rgba(10, 132, 255, 0.45), rgba(10, 132, 255, 0));
    }
    .card::after {
      content: "";
      position: absolute;
      right: -10%;
      bottom: -18%;
      width: 78%;
      height: 78%;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(10, 132, 255, 0.11) 0%, rgba(10, 132, 255, 0.04) 28%, rgba(10, 132, 255, 0) 72%);
      pointer-events: none;
      opacity: 0.8;
      transition: transform 260ms ease, opacity 260ms ease;
    }
    .card:hover {
      transform: translateY(-2px);
      border-color: rgba(10, 132, 255, 0.14);
      box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09);
    }
    .card:hover::after {
      transform: scale(1.04);
      opacity: 1;
    }
    .card-sparkline {
      position: absolute;
      right: 18px;
      bottom: 18px;
      width: 124px;
      height: 40px;
      opacity: 0.18;
      pointer-events: none;
    }
    .card-sparkline path {
      fill: none;
      stroke: rgba(10, 132, 255, 0.55);
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .cards .card:nth-child(2) .card-sparkline path {
      stroke: rgba(16, 24, 40, 0.34);
    }
    .cards .card:nth-child(3) .card-sparkline path {
      stroke: rgba(10, 132, 255, 0.42);
    }
    .label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0;
      margin: 14px 0 12px;
    }
    .metric-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
    }
    .value {
      font-size: clamp(30px, 3vw, 38px);
      font-weight: 680;
      letter-spacing: -0.04em;
      color: var(--text);
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .value-unit {
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0;
    }
    .table-wrap {
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      overflow: auto;
      box-shadow: var(--shadow-card);
    }
    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 760px;
    }
    th, td {
      text-align: left;
      padding: 12px 10px;
      border-bottom: 1px solid var(--line);
      vertical-align: middle;
      font-size: 14px;
    }
    th {
      position: sticky;
      top: 0;
      z-index: 5;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0;
      background: rgba(248, 250, 252, 0.92);
      backdrop-filter: blur(12px);
      box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.06);
    }
    .col-model-cell {
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
    }
    thead .filter-row th {
      top: 40px;
      z-index: 4;
      padding: 8px 10px 10px;
      background: rgba(248, 250, 252, 0.97);
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }
    :root {
      --filter-h: 34px;
      --filter-py: 8px;
      --filter-px: 10px;
      --filter-fs: 12px;
      --filter-radius: 12px;
      --filter-border: 1px solid rgba(148, 163, 184, 0.35);
      --filter-bg: rgba(255, 255, 255, 0.94);
      --filter-fg: rgba(15, 23, 42, 0.88);
      --filter-ph: rgba(100, 116, 139, 0.75);
    }
    .col-filter {
      width: 100%;
      min-height: var(--filter-h);
      padding: var(--filter-py) var(--filter-px);
      border-radius: var(--filter-radius);
      border: var(--filter-border);
      background: var(--filter-bg);
      font-size: var(--filter-fs);
      color: var(--filter-fg);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }
    .col-filter::placeholder {
      color: var(--filter-ph);
    }
    .col-filter-row2 {
      margin-top: 8px;
    }
    .filter-stack {
      display: inline-grid;
      grid-template-columns: 54px 54px;
      justify-content: start;
      width: fit-content;
      gap: 6px;
    }
    .filter-stack-3 {
      display: grid;
      grid-template-columns: 0.65fr 0.45fr;
      gap: 8px;
    }
    th.col-load .filter-stack-3 {
      display: inline-grid;
      grid-template-columns: 54px 54px;
      justify-content: start;
      width: fit-content;
      gap: 6px;
    }
    .filter-io-load {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 8px;
      align-items: center;
    }
    .filter-mini {
      min-height: var(--filter-h);
      padding: var(--filter-py) var(--filter-px);
      border-radius: var(--filter-radius);
      border: var(--filter-border);
      background: var(--filter-bg);
      font-size: var(--filter-fs);
      color: var(--filter-fg);
    }
    .filter-mini::placeholder {
      color: var(--filter-ph);
    }
    .th-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .col-index {
      width: 32px;
      min-width: 32px;
      padding-left: 4px;
      padding-right: 2px;
      text-align: left;
    }
    /* Stable column widths: prevent auto-layout from shrinking columns when
       filters change the visible rows. Each column gets a min-width so the
       layout stays consistent regardless of tbody content length.
       Column 1 = select, 2 = index, 3 = Engine, 4 = Source, ... */
    table th:nth-child(3),  table td:nth-child(3)  { min-width: 72px; padding-left: 4px; padding-right: 8px; }  /* Engine */
    table th:nth-child(4),  table td:nth-child(4)  { min-width: 92px;  }  /* Source */
    table th:nth-child(5),  table td:nth-child(5)  { min-width: 230px; }  /* HF Model Name */
    table th:nth-child(6),  table td:nth-child(6)  { min-width: 150px; }  /* GPUs */
    table th:nth-child(7),  table td:nth-child(7)  { min-width: 190px; }  /* Dataset */
    table th:nth-child(8),  table td:nth-child(8)  { min-width: 108px; }  /* I/O Len */
    table th:nth-child(10), table td:nth-child(10) { min-width: 128px; }  /* Throughput */
    table th:nth-child(11), table td:nth-child(11) { min-width: 118px; }  /* Mean TTFT */
    table th:nth-child(12), table td:nth-child(12) { min-width: 118px; }  /* Mean TPOT */
    .col-gpus {
      white-space: nowrap;
    }
    .col-gpus .cell-input {
      min-width: 9rem;
      max-width: 16rem;
    }
    .th-label::before {
      content: "";
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: rgba(102, 112, 133, 0.55);
    }
    tbody tr {
      background: rgba(255, 255, 255, 0.72);
      transition: background 160ms ease, transform 160ms ease, box-shadow 180ms ease;
    }
    tbody tr:hover {
      background: rgba(248, 250, 252, 0.96);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(255, 255, 255, 0.72);
    }
    .engine {
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }
    .engine img {
      width: 96px;
      height: 28px;
      object-fit: contain;
      display: block;
    }
    .tag {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.01em;
      line-height: 1.4;
      border: 1px solid transparent;
      white-space: nowrap;
      transition: transform 140ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
    }
    .tag-official {
      color: #0b5cad;
      background: #eff6ff;
      border-color: #bfdbfe;
    }
    .tag-custom {
      color: #4b5563;
      background: #f9fafb;
      border-color: #e5e7eb;
    }
    .tag-personal {
      color: #7c3aed;
      background: #f5f3ff;
      border-color: #ddd6fe;
    }
    .tag-team {
      color: #047857;
      background: #ecfdf5;
      border-color: #a7f3d0;
    }
    .tag-unknown {
      color: #94a3b8;
      background: #f8fafc;
      border-color: #e2e8f0;
      font-weight: 500;
    }
    .tag-cluster {
      display: inline-flex;
      margin-left: 6px;
      vertical-align: middle;
    }
    .tag-warning-duplicate {
      color: #92400e;
      background: #fef3c7;
      border-color: #fbbf24;
    }
    .dup-group-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 8px;
      padding: 10px 16px;
      background: #fef3c7;
      border: 1px solid #fbbf24;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 600;
      color: #92400e;
    }
    .dup-group-banner.hidden { display: none; }
    .dup-group-clear {
      margin-left: 12px;
      padding: 5px 14px;
      border: 1px solid #d97706;
      border-radius: 999px;
      background: transparent;
      color: #92400e;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
    .dup-group-clear:hover {
      background: #fde68a;
    }
    .tag:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    }
    .engine-shell {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: none;
    }
    .muted { color: var(--muted); }
    .details {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.65;
      min-width: 220px;
      transition: transform 180ms ease, box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
    }
    .details > summary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      color: var(--accent);
      font-weight: 600;
      list-style: none;
      user-select: none;
      padding: 6px 10px;
      border-radius: 999px;
      transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 180ms ease;
    }
    .details > summary::-webkit-details-marker { display: none; }
    .details > summary::after {
      content: "";
      width: 7px;
      height: 7px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translateY(-1px);
      transition: transform 180ms ease, opacity 180ms ease;
      opacity: 0.8;
    }
    /* env-extra arrow — independent from parent .details, uses > to isolate */
    .env-extra > summary {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      color: var(--accent);
      font-weight: 600;
      list-style: none;
      user-select: none;
      padding: 4px 6px;
      border-radius: 6px;
      transition: background 160ms ease;
    }
    .env-extra > summary::-webkit-details-marker { display: none; }
    .env-extra > summary::after {
      content: "";
      width: 7px;
      height: 7px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translateY(-1px);
      transition: transform 180ms ease, opacity 180ms ease;
      opacity: 0.8;
    }
    .env-extra[open] > summary::after {
      transform: rotate(225deg) translateY(-1px);
    }
    .details code {
      color: #1e3a8a;
      word-break: normal;
      overflow-wrap: break-word;
    }
    .details a {
      color: #1d4ed8;
      text-decoration: none;
      word-break: break-all;
    }
    .details a:hover {
      text-decoration: underline;
    }
    .details-block {
      margin: 6px 0 10px;
      padding: 10px 12px;
      max-height: 220px;
      overflow: auto;
      white-space: pre-wrap;
      word-break: break-word;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(248, 250, 252, 0.85);
      color: var(--text);
      font-size: 12px;
      line-height: 1.55;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    .details[open] {
      position: relative;
      z-index: 20;
      width: 620px;
      max-width: min(620px, 74vw);
      padding: 14px 16px;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-md);
      box-shadow: 0 20px 44px rgba(15, 23, 42, 0.14);
      backdrop-filter: blur(16px);
      animation: details-fade-in 180ms ease;
    }
    .details[open] > summary {
      margin-bottom: 10px;
    }
    .details[open] > summary::after {
      transform: rotate(225deg) translateY(-1px);
    }
    .details[open] > div {
      animation: details-row-in 220ms ease both;
    }
    .details[open] > div:nth-of-type(2) { animation-delay: 18ms; }
    .details[open] > div:nth-of-type(3) { animation-delay: 34ms; }
    .details[open] > div:nth-of-type(4) { animation-delay: 50ms; }
    .details-editor {
      display: grid;
      gap: 8px;
      min-width: 320px;
    }
    .details-field-label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0;
      margin-top: 2px;
    }
    .details-editor textarea {
      width: 100%;
      min-height: 92px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 13px;
      color: var(--text);
      background: rgba(255, 255, 255, 0.96);
      resize: vertical;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    .warn { color: var(--warn); }
    .input-panel {
      margin-bottom: 22px;
    }
    .add-bench-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0 0 18px;
      padding: 10px 16px;
      background: transparent;
      border: 1px dashed rgba(16, 24, 40, 0.20);
      border-radius: 12px;
      color: rgba(16, 24, 40, 0.72);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.01em;
      cursor: pointer;
      transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
    }
    .add-bench-toggle:hover {
      background: rgba(16, 24, 40, 0.04);
      border-color: rgba(16, 24, 40, 0.32);
      color: rgba(16, 24, 40, 0.92);
    }
    .add-bench-toggle.hidden { display: none; }
    .add-bench-collapse {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border: none;
      background: transparent;
      font-size: 28px;
      line-height: 1;
      color: var(--muted);
      cursor: pointer;
      border-radius: 999px;
      transition: background 140ms ease, color 140ms ease;
    }
    .add-bench-collapse:hover {
      background: rgba(15, 23, 42, 0.06);
      color: var(--text);
    }
    .composer {
      --composer-min-height: clamp(680px, 74vh, 920px);
      display: grid;
      grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.8fr);
      gap: 18px;
      align-items: stretch;
    }
    .composer-main {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: minmax(0, 0.9fr) minmax(0, 1.35fr);
      column-gap: 16px;
      row-gap: 14px;
      min-height: var(--composer-min-height);
    }
    .composer-side {
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-height: var(--composer-min-height);
    }
    .composer-side .inspector-card {
      height: 100%;
    }
    .editor-card, .inspector-card {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.96) 100%);
      border: 1px solid var(--line);
      border-radius: 22px;
      box-shadow: var(--shadow-card);
    }
    .editor-card-wide {
      grid-column: 1 / -1;
      min-height: 0;
    }
    .editor-card-compact {
      min-height: 0;
    }
    .editor-card-compact .editor-body,
    .editor-card-wide .editor-body,
    .editor-card-compact .input-grid,
    .editor-card-wide .input-grid,
    .editor-card-compact .example-watermark,
    .editor-card-wide .example-watermark,
    .editor-card-compact .example-watermark textarea,
    .editor-card-wide .example-watermark textarea {
      height: 100%;
      min-height: 0;
    }
    .editor-card-compact .input-grid textarea {
      min-height: 136px;
    }
    .editor-card::before, .inspector-card::before {
      content: "";
      position: absolute;
      inset: 0 auto auto 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, rgba(10, 132, 255, 0.35), rgba(10, 132, 255, 0));
    }
    .editor-head, .inspector-head {
      padding: 16px 18px 12px;
    }
    .editor-kicker, .inspector-kicker {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .editor-title, .inspector-title {
      margin: 8px 0 0;
      font-size: 17px;
      line-height: 1.2;
      font-weight: 620;
      letter-spacing: -0.02em;
    }
    .inspector-head .inspector-title {
      margin: 0 0 10px;
    }
    .editor-title {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .editor-desc, .inspector-desc {
      margin: 6px 0 0;
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.55;
    }
    .editor-body {
      padding: 14px 18px 18px;
      flex: 1;
      min-height: 0;
    }
    .field-hint {
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
      letter-spacing: -0.01em;
    }
    .input-grid textarea {
      width: 100%;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid var(--line);
      color: var(--text);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      font-size: 14px;
      resize: vertical;
      min-height: 168px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
      display: block;
    }
    .example-watermark {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-md);
      min-height: 0;
    }
    .example-watermark::after {
      content: attr(data-example);
      position: absolute;
      inset: 16px 18px;
      display: block;
      overflow: auto;
      color: rgba(102, 112, 133, 0.44);
      font-size: 12px;
      line-height: 1.6;
      white-space: pre-wrap;
      word-break: break-word;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      pointer-events: none;
      z-index: 1;
    }
    .example-watermark.has-value::after,
    .example-watermark:focus-within::after {
      opacity: 0;
    }
    .example-watermark textarea {
      position: relative;
      z-index: 2;
      background: transparent;
    }
    .example-watermark textarea::placeholder {
      color: transparent;
    }
    .input-grid textarea#benchmarkResultInput {
      min-height: 250px;
    }
    .inspector-card {
      padding: 18px;
    }
    .inspector-panel {
      display: grid;
      gap: 14px;
    }
    .inspector-group {
      display: grid;
      gap: 8px;
      padding: 14px;
      border-radius: 18px;
      background: rgba(248, 250, 252, 0.82);
      border: 1px solid rgba(15, 23, 42, 0.05);
    }
    .inspector-group input,
    .inspector-group select {
      width: 100%;
      min-height: 52px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid var(--line);
      color: var(--text);
      border-radius: 14px;
      padding: 14px 16px;
      font-size: 14px;
      font-family: inherit;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }
    .inspector-label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0;
    }
    .quality-panel {
      border: 1px solid rgba(245, 158, 11, 0.22);
      background: rgba(255, 251, 235, 0.82);
    }
    .quality-panel.hidden {
      display: none;
    }
    .quality-summary {
      color: rgba(146, 64, 14, 0.95);
      font-size: 13px;
      line-height: 1.5;
      letter-spacing: -0.01em;
    }
    .quality-list {
      margin: 2px 0 0;
      padding-left: 18px;
      color: rgba(120, 53, 15, 0.95);
      font-size: 13px;
      line-height: 1.55;
    }
    .change-context {
      margin: 12px 0 0;
      font-size: 13px;
    }
    .change-context > summary {
      color: var(--muted);
      cursor: pointer;
      padding: 4px 0;
      user-select: none;
    }
    .change-context > summary:hover { color: var(--text); }
    .change-context input {
      display: block;
      width: 100%;
      margin-top: 8px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      font-size: 13px;
      background: rgba(255, 255, 255, 0.98);
    }
    .context-icon {
      display: inline-block;
      margin-left: 4px;
      font-size: 11px;
      color: var(--muted);
      cursor: help;
    }
    .context-icon:hover { color: var(--text); }
    .quality-list li + li {
      margin-top: 4px;
    }
    .inspector-advanced details {
      border-radius: 14px;
      border: 1px solid rgba(245, 158, 11, 0.26);
      background: rgba(255, 251, 235, 0.62);
      padding: 10px 12px;
    }
    .inspector-advanced summary {
      cursor: pointer;
      list-style: none;
      user-select: none;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0;
      color: rgba(71, 85, 105, 0.9);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .inspector-advanced summary::-webkit-details-marker { display: none; }
    .inspector-advanced summary::after {
      content: "";
      margin-left: auto;
      width: 7px;
      height: 7px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translateY(-1px);
      opacity: 0.7;
      transition: transform 180ms ease;
    }
    .inspector-advanced details[open] summary::after {
      transform: rotate(225deg) translateY(-1px);
    }
    .inspector-advanced .adv-desc {
      margin: 8px 0 10px;
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.55;
      letter-spacing: -0.01em;
    }
    .inspector-advanced textarea {
      min-height: 140px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    .inspector-advanced .required-badge {
      margin-left: 8px;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(245, 158, 11, 0.34);
      background: rgba(245, 158, 11, 0.12);
      color: rgba(146, 64, 14, 0.95);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }
    .inspector-advanced .example-watermark {
      width: 100%;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid rgba(245, 158, 11, 0.18);
    }
    .inspector-advanced .example-watermark textarea {
      width: 100%;
      min-height: 156px;
      padding: 12px 14px;
    }
    .inspector-advanced .probe-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.35);
      background: rgba(255, 255, 255, 0.8);
      color: rgba(15, 23, 42, 0.82);
      font-size: 12px;
      font-weight: 650;
      letter-spacing: -0.01em;
      width: fit-content;
    }
    .inspector-advanced .probe-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.8);
      box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
    }
    .inspector-advanced .probe-status.probe-ok {
      border-color: rgba(34, 197, 94, 0.35);
      background: rgba(220, 252, 231, 0.55);
      color: rgba(22, 101, 52, 0.95);
    }
    .inspector-advanced .probe-status.probe-ok .probe-status-dot {
      background: rgba(34, 197, 94, 0.95);
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    }
    .inspector-advanced .probe-status.probe-busy {
      border-color: rgba(10, 132, 255, 0.35);
      background: rgba(219, 234, 254, 0.55);
      color: rgba(30, 64, 175, 0.95);
    }
    .inspector-advanced .probe-status.probe-busy .probe-status-dot {
      background: rgba(10, 132, 255, 0.95);
      box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18);
      animation: pulse-dot 900ms ease-in-out infinite;
    }
    .inspector-advanced .probe-status.probe-err {
      border-color: rgba(220, 38, 38, 0.35);
      background: rgba(254, 226, 226, 0.55);
      color: rgba(185, 28, 28, 0.95);
    }
    .inspector-advanced .probe-status.probe-err .probe-status-dot {
      background: rgba(220, 38, 38, 0.9);
      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16);
    }
    .inspector-advanced .probe-server-row {
      display: flex;
      gap: 8px;
      align-items: center;
      margin: 10px 0 6px;
    }
    .inspector-advanced .probe-server-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      flex-shrink: 0;
    }
    .inspector-advanced .probe-server-input {
      flex: 1 1 0;
      min-width: 0;
      padding: 5px 10px;
      border-radius: 8px;
      border: 1px solid rgba(15, 23, 42, 0.12);
      background: rgba(255, 255, 255, 0.7);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 12px;
      color: var(--text);
      outline: none;
    }
    .inspector-advanced .probe-server-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .inspector-advanced .probe-copy-row {
      display: flex;
      gap: 10px;
      align-items: stretch;
      margin: 10px 0 12px;
    }
    .inspector-advanced .probe-oneliner {
      flex: 1 1 0;
      display: flex;
      align-items: center;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid rgba(220, 38, 38, 0.18);
      background: rgba(0, 0, 0, 0.04);
      font-size: 13px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      word-break: break-all;
      line-height: 1.5;
      color: rgba(30, 30, 30, 0.95);
    }
    .inspector-advanced .copy-btn {
      min-height: 44px;
      padding: 0 16px;
      border-radius: 12px;
      border: 1px solid rgba(220, 38, 38, 0.22);
      background: rgba(220, 38, 38, 0.08);
      color: rgba(185, 28, 28, 0.95);
      font-weight: 800;
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      white-space: nowrap;
      transition: transform 120ms ease, box-shadow 160ms ease;
    }
    .inspector-advanced .copy-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.12);
    }
    .inspector-advanced .copy-btn:active {
      transform: translateY(0);
    }
    .inspector-advanced .copy-btn.is-copied {
      background: rgba(34, 197, 94, 0.10);
      border-color: rgba(34, 197, 94, 0.32);
      color: rgba(22, 101, 52, 0.95);
    }
    .inspector-advanced .copy-btn.is-copy-failed {
      background: rgba(245, 158, 11, 0.12);
      border-color: rgba(245, 158, 11, 0.36);
      color: rgba(180, 83, 9, 0.98);
    }
    @keyframes pulse-dot {
      0%, 100% { transform: scale(1); opacity: 0.85; }
      50% { transform: scale(1.18); opacity: 1; }
    }
    .inspector-advanced details:has(textarea.missing-env) {
      border-color: rgba(245, 158, 11, 0.55);
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
    }
    .editor-card:has(textarea.missing-required) {
      border-color: rgba(220, 38, 38, 0.42);
      box-shadow: 0 18px 38px rgba(220, 38, 38, 0.10);
    }
    .editor-card:has(textarea.missing-required)::before {
      background: linear-gradient(90deg, rgba(220, 38, 38, 0.55), rgba(220, 38, 38, 0.0));
    }
    .editor-card .required-badge {
      margin-left: 0;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(220, 38, 38, 0.28);
      background: rgba(220, 38, 38, 0.08);
      color: rgba(185, 28, 28, 0.95);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      transform: translateY(-0.5px);
    }
    .input-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .input-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .input-row button {
      width: 100%;
      min-height: 52px;
      background: var(--accent);
      color: #ffffff;
      border: 1px solid var(--accent);
      border-radius: var(--radius-sm);
      padding: 0 16px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: var(--shadow-card);
    }
    .primary-action {
      position: relative;
      overflow: hidden;
    }
    .primary-action::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 80%);
      transform: translateX(-130%);
      transition: transform 420ms ease;
    }
    .primary-action:hover::after {
      transform: translateX(130%);
    }
    .primary-action:disabled,
    .primary-action.is-submitting,
    .primary-action.is-success {
      cursor: not-allowed;
      transform: none;
    }
    .primary-action.is-submitting {
      opacity: 0.78;
    }
    .primary-action.is-success {
      background: var(--success);
      border-color: var(--success);
      color: white;
    }
    .primary-action.is-success::after { transform: translateX(130%); }
    .toast-wrap {
      position: fixed;
      top: 24px;
      right: 24px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .toast {
      min-width: 260px;
      max-width: 420px;
      border-radius: 16px;
      padding: 14px 16px;
      border: 1px solid transparent;
      box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
      font-size: 13px;
      background: #ffffff;
      color: #0f172a;
    }
    .suggest-fab {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 9998;
      min-height: 48px;
      padding: 0 16px;
      border-radius: 999px;
      border: 1px solid rgba(10, 132, 255, 0.18);
      background: rgba(255, 255, 255, 0.94);
      color: var(--text);
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
      backdrop-filter: blur(18px);
      font-size: 13px;
      font-weight: 650;
      letter-spacing: -0.01em;
      cursor: pointer;
      transition: transform 160ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }
    .suggest-fab:hover {
      transform: translateY(-2px);
      border-color: rgba(10, 132, 255, 0.28);
      box-shadow: 0 22px 42px rgba(15, 23, 42, 0.14);
    }
    .suggest-panel {
      position: fixed;
      right: 24px;
      bottom: 84px;
      z-index: 9998;
      width: min(380px, calc(100vw - 32px));
      padding: 18px;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 22px 48px rgba(15, 23, 42, 0.16);
      backdrop-filter: blur(20px);
      transform-origin: bottom right;
      animation: details-fade-in 180ms ease;
    }
    .suggest-panel.hidden {
      display: none;
    }
    .suggest-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }
    .suggest-title {
      margin: 0;
      font-size: 16px;
      font-weight: 650;
      letter-spacing: -0.02em;
    }
    .suggest-desc {
      margin: 6px 0 0;
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.55;
    }
    .suggest-close {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(248, 250, 252, 0.92);
      color: var(--muted);
      cursor: pointer;
      box-shadow: none;
      min-height: 32px;
      padding: 0;
    }
    .suggest-body {
      display: grid;
      gap: 12px;
    }
    .suggest-body textarea,
    .suggest-body input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.94);
      color: var(--text);
      padding: 12px 14px;
      font-size: 14px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }
    .suggest-body textarea {
      min-height: 124px;
      resize: vertical;
      font-family: inherit;
      line-height: 1.55;
    }
    .suggest-meta {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }
    .suggest-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
    .suggest-save {
      min-height: 40px;
      padding: 0 14px;
      border-radius: 12px;
      border: 1px solid var(--accent);
      background: var(--accent);
      color: #fff;
      font-weight: 600;
    }
    .toast-success { border-color: #86efac; background: #f0fdf4; color: #166534; }
    .toast-warn { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
    .toast-error { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }
    .fix-btn {
      min-height: 36px;
      background: rgba(16, 24, 40, 0.94);
      color: #ffffff;
      border: 1px solid rgba(16, 24, 40, 0.94);
      border-radius: 12px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      min-width: 52px;
      writing-mode: horizontal-tb;
      box-shadow: var(--shadow-card);
      transition: transform 140ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease, opacity 180ms ease;
    }
    .save-btn {
      background: var(--accent);
      border-color: var(--accent);
      color: #ffffff;
    }
    .delete-btn {
      background: rgba(185, 28, 28, 0.96);
      border-color: rgba(185, 28, 28, 0.96);
      color: #ffffff;
    }
    .share-btn {
      background: transparent;
      border: 1px solid rgba(16, 24, 40, 0.18);
      color: rgba(16, 24, 40, 0.72);
      box-shadow: none;
    }
    .share-btn:hover {
      background: rgba(16, 24, 40, 0.04);
      border-color: rgba(16, 24, 40, 0.30);
      color: rgba(16, 24, 40, 0.92);
    }
    .unshare-btn {
      background: transparent;
      border: 1px solid rgba(180, 83, 9, 0.40);
      color: rgba(146, 64, 14, 0.95);
      box-shadow: none;
    }
    .unshare-btn:hover {
      background: rgba(180, 83, 9, 0.06);
      border-color: rgba(180, 83, 9, 0.60);
      color: rgba(120, 53, 15, 1);
    }
    .cell-input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 9px 10px;
      font-size: 13px;
      color: var(--text);
      background: rgba(255, 255, 255, 0.98);
    }
    .fix-actions {
      display: flex;
      gap: 8px;
    }
    .fix-shared {
      display: inline-flex;
      align-items: center;
      padding: 0 10px;
      height: 36px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
      color: rgba(15, 23, 42, 0.55);
      background: transparent;
      border: 1px dashed rgba(15, 23, 42, 0.20);
      letter-spacing: -0.01em;
      cursor: default;
    }
    .actions-cell {
      min-width: 200px;
      white-space: nowrap;
    }
    th.col-actions,
    td.col-actions {
      width: 0.1%;
      max-width: 240px;
      white-space: nowrap;
      vertical-align: middle;
      padding-right: 10px;
    }
    .cell-inline {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .cell-inline .cell-input {
      width: 92px;
    }
    .conc-edit-mid {
      opacity: 0.35;
      font-size: 14px;
      line-height: 1;
      user-select: none;
    }
    .load-edit .cell-input:not(.load-rate-input) {
      width: 3.25rem;
      min-width: 0;
      padding: 6px 8px;
      font-size: 12px;
    }
    th.col-load,
    td.col-load {
      min-width: 9.6rem;
      width: 9.6rem;
      max-width: 12rem;
      box-sizing: border-box;
      vertical-align: top;
    }
    .load-cell {
      font-size: 12px;
      line-height: 1.45;
      font-variant-numeric: tabular-nums;
    }
    .load-line {
      display: flex;
      align-items: baseline;
      gap: 0.25em;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    .load-line + .load-line {
      margin-top: 3px;
    }
    .load-k {
      color: var(--muted, #64748b);
      font-weight: 600;
      font-size: 11px;
      letter-spacing: 0.02em;
      user-select: none;
    }
    .load-v {
      font-weight: 400;
      color: var(--text);
    }
    .load-edit {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }
    .load-edit-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }
    .load-edit-row .load-k {
      min-width: 2.75rem;
    }
    .load-edit-row .cell-input.load-rate-input {
      flex: 1;
      min-width: 5rem;
      max-width: 10rem;
    }
    .hidden { display: none; }
    input:focus, select:focus, textarea:focus, button:focus {
      outline: none;
      border-color: rgba(10, 132, 255, 0.45);
      box-shadow: 0 0 0 4px var(--accent-soft);
    }
    button:hover {
      transform: translateY(-1px);
      transition: transform 140ms ease, box-shadow 140ms ease;
    }
    .fix-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    }
    .details summary:hover {
      background: rgba(10, 132, 255, 0.08);
      box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.08);
      transform: translateY(-1px);
    }
    th.col-details,
    td.col-details {
      position: sticky;
      right: 0;
      width: 0.1%;
      min-width: 0;
      max-width: 9.5rem;
      box-sizing: border-box;
      padding-left: 6px;
      padding-right: 12px;
      white-space: nowrap;
    }
    th.col-details {
      z-index: 7;
      background: rgba(248, 250, 252, 0.98);
      box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.06), -10px 0 18px rgba(248, 250, 252, 0.95);
    }
    td.col-details {
      z-index: 3;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: -10px 0 18px rgba(248, 250, 252, 0.96);
      vertical-align: top;
    }
    td.col-details .details[open] {
      white-space: normal;
      word-break: normal;
      overflow-wrap: break-word;
    }
    td.col-details .details:not([open]) {
      min-width: 0;
      max-width: 100%;
      margin: 0;
    }
    td.col-details .details summary {
      width: fit-content;
      max-width: 100%;
    }
    button:active, .fix-btn:active, .details summary:active {
      transform: translateY(0);
    }
    .details:hover {
      transform: translateY(-1px);
    }
    @keyframes details-fade-in {
      from {
        opacity: 0;
        transform: translateY(6px) scale(0.985);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    @keyframes details-row-in {
      from {
        opacity: 0;
        transform: translateY(4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    @media (max-width: 1220px) {
      .hero {
        grid-template-columns: 1fr;
      }
      .hero-side {
        width: 100%;
      }
      .controls {
        grid-template-columns: 1fr minmax(170px, 220px) auto;
      }
      .composer {
        grid-template-columns: 1fr;
        align-items: start;
      }
      .composer-main {
        grid-template-rows: auto;
        min-height: 0;
      }
      .composer-side {
        min-height: 0;
      }
    }
    @media (max-width: 980px) {
      .container {
        padding: 24px 18px 42px;
      }
      .section-shell {
        padding: 18px;
        border-radius: 24px;
      }
      .composer-main {
        grid-template-columns: 1fr;
      }
      .controls { grid-template-columns: 1fr; }
      .cards { grid-template-columns: 1fr; }
      .details[open] {
        width: auto;
        max-width: min(90vw, 620px);
      }
    }
    @media (max-width: 720px) {
      h1 {
        font-size: 34px;
      }
      .hero-desc {
        font-size: 15px;
      }
      .controls {
        grid-template-columns: 1fr;
      }
      .suggest-fab {
        right: 16px;
        bottom: 16px;
      }
      .suggest-panel {
        right: 16px;
        bottom: 72px;
      }
      th, td {
        padding: 14px 12px;
      }
    }

    /* Compare: row select column */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }
    th.col-select,
    td.col-select {
      width: 36px;
      min-width: 36px;
      padding-left: 10px;
      padding-right: 6px;
      text-align: center;
      vertical-align: middle;
    }
    .row-select {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      margin: 0;
      padding: 0;
      border-radius: 6px;
      border: 1.5px solid rgba(15, 23, 42, 0.22);
      background: #ffffff;
      box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
      cursor: pointer;
      position: relative;
      transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
    }
    .row-select:hover {
      border-color: rgba(10, 132, 255, 0.55);
    }
    .row-select:focus-visible {
      outline: none;
      box-shadow: 0 0 0 4px var(--accent-soft);
    }
    .row-select:checked {
      background: var(--accent);
      border-color: var(--accent);
      box-shadow: 0 2px 6px rgba(10, 132, 255, 0.28);
    }
    .row-select:checked::after {
      content: "";
      position: absolute;
      left: 5px;
      top: 1px;
      width: 5px;
      height: 10px;
      border: solid #ffffff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    .row-select:indeterminate {
      background: var(--accent);
      border-color: var(--accent);
      box-shadow: 0 2px 6px rgba(10, 132, 255, 0.28);
    }
    .row-select:indeterminate::after {
      content: "";
      position: absolute;
      left: 3px;
      right: 3px;
      top: 50%;
      height: 2px;
      margin-top: -1px;
      background: #ffffff;
      border-radius: 1px;
    }
    .row-select:active:not(:disabled) {
      transform: scale(0.92);
    }
    .row-select:disabled {
      cursor: not-allowed;
      opacity: 0.4;
      background: rgba(15, 23, 42, 0.04);
    }
    tr.is-selected td {
      background: rgba(10, 132, 255, 0.05);
    }
    tr.is-selected td.col-select {
      box-shadow: inset 2px 0 0 var(--accent);
    }
    /* Sticky cells must stay opaque when selected, otherwise the scrolled
       content underneath bleeds through (since the row tint is only 5% alpha). */
    tr.is-selected td.col-details {
      background: #f0f7ff;
      box-shadow: -10px 0 18px rgba(248, 250, 252, 0.96);
    }

    /* Compare: floating action button */
    .compare-fab {
      position: fixed;
      right: 168px;
      bottom: 84px;
      z-index: 9998;
      display: inline-flex;
      align-items: stretch;
      gap: 0;
      border-radius: 999px;
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
      overflow: hidden;
    }
    .compare-fab.hidden { display: none; }
    .compare-fab-main {
      min-height: 48px;
      padding: 0 18px;
      border: none;
      background: var(--accent);
      color: white;
      font-size: 13px;
      font-weight: 650;
      letter-spacing: -0.01em;
      cursor: pointer;
    }
    .compare-fab-main:hover { background: #0a76e6; }
    .compare-fab-clear {
      min-width: 44px;
      padding: 0 14px;
      border: none;
      background: rgba(10, 132, 255, 0.82);
      color: white;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
    }
    .compare-fab-clear:hover { background: rgba(10, 76, 168, 0.9); }

    /* Compare: modal */
    .compare-modal {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .compare-modal.hidden { display: none; }
    .compare-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.5);
      backdrop-filter: blur(3px);
    }
    .compare-modal-card {
      position: relative;
      width: min(1320px, 96vw);
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      background: var(--panel-solid);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
      overflow: hidden;
    }
    .compare-modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 22px 10px;
      border-bottom: 1px solid var(--line);
    }
    .compare-modal-title {
      font-size: 18px;
      font-weight: 650;
      letter-spacing: -0.01em;
    }
    .compare-modal-subtitle {
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.01em;
    }
    .compare-modal-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .compare-text-btn {
      border: 1px solid rgba(15, 23, 42, 0.12);
      background: white;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 600;
      padding: 8px 12px;
      border-radius: 999px;
      cursor: pointer;
    }
    .compare-text-btn:hover { background: rgba(15, 23, 42, 0.04); }
    .compare-modal-body {
      padding: 16px 22px 24px;
      overflow: auto;
    }
    .compare-empty {
      padding: 40px 16px;
      text-align: center;
      color: var(--muted);
    }

    .compare-section {
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(248, 250, 252, 0.55);
      overflow: hidden;
    }
    .compare-section > summary::-webkit-details-marker { display: none; }
    .compare-section > summary {
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 650;
      letter-spacing: 0.02em;
      color: var(--text-soft);
      cursor: pointer;
      user-select: none;
    }
    .compare-section[open] > summary {
      border-bottom: 1px solid var(--line);
      background: white;
    }
    .compare-section-body { padding: 6px 0 4px; overflow-x: auto; }

    .compare-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      table-layout: fixed;
    }
    .compare-head-table { margin-bottom: 8px; table-layout: fixed; }
    .compare-table th,
    .compare-table td {
      padding: 8px 12px;
      vertical-align: top;
      border-bottom: 1px solid rgba(15, 23, 42, 0.05);
      word-break: break-word;
    }
    .compare-field-label {
      width: 180px;
      min-width: 160px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0;
      background: rgba(248, 250, 252, 0.8);
      border-right: 1px solid rgba(15, 23, 42, 0.05);
      text-align: left;
    }
    .compare-field-spacer { background: transparent; border-right: none; }
    .compare-col-head {
      text-align: left;
      padding: 10px 12px 12px;
      border-bottom: 1px solid var(--line);
      background: white;
      vertical-align: top;
    }
    .compare-col-head-top {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      row-gap: 4px;
      font-weight: 650;
      letter-spacing: -0.01em;
    }
    .compare-col-logo {
      width: 18px;
      height: 18px;
      object-fit: contain;
      flex: 0 0 auto;
    }
    .compare-col-model {
      overflow-wrap: anywhere;
      word-break: normal;
      min-width: 0;
      flex: 1 1 auto;
    }
    .compare-col-head-meta {
      margin-top: 6px;
      display: flex;
      gap: 6px 8px;
      row-gap: 4px;
      flex-wrap: wrap;
      align-items: center;
      font-size: 11px;
      color: var(--muted);
    }
    .compare-col-id {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      color: var(--muted);
    }
    @media (max-width: 720px) {
      .compare-modal-card { width: 96vw; max-height: 94vh; }
      .compare-modal-body { padding: 12px 14px 18px; }
      .compare-col-head { padding: 8px 8px 10px; }
      .compare-field-label { width: 130px; min-width: 110px; }
      .compare-table th, .compare-table td { padding: 6px 8px; }
    }

    .compare-diff {
      background: rgba(253, 230, 138, 0.35);
    }
    .compare-best {
      position: relative;
      background: rgba(22, 163, 74, 0.08) !important;
      font-weight: 650;
    }
    .compare-best::after {
      content: "best";
      position: absolute;
      top: 4px;
      right: 6px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--success);
      text-transform: uppercase;
    }
    .compare-muted { color: var(--muted); }
    .compare-cmd-cell { padding: 6px 8px; }
    .compare-cmd {
      margin: 0;
      padding: 6px 4px;
      font-size: 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      background: rgba(15, 23, 42, 0.04);
      border-radius: 8px;
      overflow-x: auto;
      white-space: pre;
      max-height: 260px;
      overflow-y: auto;
      line-height: 1.55;
    }
    .compare-cmd-line {
      display: block;
      padding: 1px 6px;
      border-radius: 4px;
    }
    .compare-cmd-line-diff {
      background: rgba(253, 230, 138, 0.35);
    }

    /* ── Dark theme ─────────────────────────────────────────────────
       Activated by data-theme="dark" on <html>. Flips the core variable
       palette plus comprehensive overrides for every surface that
       hard-codes light colors. Light theme is the unchanged default.
    */
    :root[data-theme='dark'] {
      --bg: #0e1117;
      --bg-soft: #161b22;
      --panel: rgba(22, 27, 34, 0.92);
      --panel-solid: #161b22;
      --muted: #8b96a8;
      --text: #e6edf3;
      --text-soft: #c9d1d9;
      --line: rgba(240, 246, 252, 0.10);
      --line-strong: rgba(240, 246, 252, 0.16);
      --accent: #58a6ff;
      --accent-soft: rgba(88, 166, 255, 0.16);
      --success: #3fb950;
      --warn: #d29922;
      --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.45);
      --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.35);
      --filter-border: 1px solid rgba(240, 246, 252, 0.14);
      --filter-bg: rgba(22, 27, 34, 0.92);
      --filter-fg: rgba(230, 237, 243, 0.92);
      --filter-ph: rgba(139, 150, 168, 0.85);
      color-scheme: dark;
    }

    /* ── Body & chrome ── */
    [data-theme='dark'] body {
      background: var(--bg);
      color: var(--text);
    }
    [data-theme='dark'] .hero {
      background: rgba(22, 27, 34, 0.72);
      border-color: var(--line);
    }
    [data-theme='dark'] .space-switcher {
      background: rgba(22, 27, 34, 0.72);
      border-color: var(--line);
      box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
    }
    [data-theme='dark'] .space-btn {
      color: rgba(201, 209, 217, 0.62);
    }
    [data-theme='dark'] .space-btn:hover { color: var(--text-soft); }
    [data-theme='dark'] .space-btn.active {
      background: rgba(22, 27, 34, 0.96);
      color: var(--text);
      box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 6px 16px rgba(0,0,0,0.3);
    }

    /* ── Auth ── */
    [data-theme='dark'] .auth-btn {
      background: rgba(22, 27, 34, 0.88);
      border-color: var(--line-strong);
      color: var(--text);
      box-shadow: 0 10px 24px rgba(0,0,0,0.3);
    }
    [data-theme='dark'] .auth-btn.primary { background: var(--accent); color: #fff; }
    [data-theme='dark'] .user-menu-trigger {
      background: rgba(22, 27, 34, 0.88);
      border-color: var(--line-strong);
      color: var(--text);
      box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    }
    [data-theme='dark'] .user-menu-trigger:hover {
      background: rgba(30, 38, 48, 1);
      border-color: rgba(240,246,252,0.22);
    }
    [data-theme='dark'] .user-menu-popover {
      background: rgba(22, 27, 34, 0.98);
      border-color: var(--line);
      box-shadow: 0 18px 40px rgba(0,0,0,0.5);
    }
    [data-theme='dark'] .user-menu-item:hover { background: rgba(240,246,252,0.06); }
    [data-theme='dark'] .user-menu-divider { background: var(--line); }
    [data-theme='dark'] .auth-tabs { background: rgba(240,246,252,0.06); }
    [data-theme='dark'] .auth-tab.active {
      background: var(--panel-solid);
      color: var(--text);
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    [data-theme='dark'] .auth-field input {
      background: var(--bg-soft);
      border-color: var(--line-strong);
      color: var(--text);
    }
    [data-theme='dark'] .auth-form-error {
      background: rgba(220,38,38,0.12);
      border-color: rgba(220,38,38,0.3);
      color: #fca5a5;
    }
    [data-theme='dark'] .auth-form-error a { color: #fca5a5; }
    [data-theme='dark'] .auth-form-error a:hover { color: #fecaca; }
    [data-theme='dark'] .oauth-divider::before,
    [data-theme='dark'] .oauth-divider::after { background: var(--line); }

    /* ── Sections, panels, cards ── */
    [data-theme='dark'] .section-shell { background: var(--panel); border-color: var(--line); }
    [data-theme='dark'] .info-dot {
      background: rgba(22, 27, 34, 0.88);
      border-color: rgba(139,150,168,0.35);
    }
    [data-theme='dark'] .controls input,
    [data-theme='dark'] .controls select {
      background-color: rgba(22, 27, 34, 0.92);
      border-color: var(--line-strong);
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(240,246,252,0.06), 0 10px 24px rgba(0,0,0,0.3);
    }
    [data-theme='dark'] .controls input::placeholder { color: rgba(139,150,168,0.7); }
    [data-theme='dark'] .controls select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5.25 7.75L10 12.5l4.75-4.75' fill='none' stroke='%238b96a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    [data-theme='dark'] .controls button {
      background: rgba(201,209,217,0.94);
      color: #0e1117;
      border-color: transparent;
    }
    [data-theme='dark'] .card {
      background: linear-gradient(180deg, rgba(22,27,34,0.96) 0%, rgba(22,27,34,0.92) 100%);
      border-color: var(--line);
    }
    [data-theme='dark'] .editor-card,
    [data-theme='dark'] .inspector-card {
      background: linear-gradient(180deg, rgba(22,27,34,0.96) 0%, rgba(22,27,34,0.92) 100%);
      border-color: var(--line);
    }
    [data-theme='dark'] .inspector-group {
      background: rgba(240,246,252,0.04);
      border-color: var(--line);
    }
    [data-theme='dark'] .inspector-group input,
    [data-theme='dark'] .inspector-group select {
      background: rgba(22,27,34,0.88);
      border-color: var(--line);
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(240,246,252,0.05);
    }
    [data-theme='dark'] .input-grid textarea {
      background: rgba(22,27,34,0.88);
      border-color: var(--line);
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(240,246,252,0.05);
    }
    [data-theme='dark'] .example-watermark::after { color: rgba(180,192,210,0.72); }
    [data-theme='dark'] .probe-oneliner {
      background: rgba(240,246,252,0.05);
      color: var(--text-soft);
    }

    /* ── Table ── */
    [data-theme='dark'] .table-wrap {
      background: rgba(22,27,34,0.82);
      border-color: var(--line);
    }
    [data-theme='dark'] table { color: var(--text); }
    [data-theme='dark'] thead th {
      background: rgba(22,27,34,0.94);
      color: var(--muted);
      border-color: var(--line);
      box-shadow: inset 0 -1px 0 rgba(240,246,252,0.06);
    }
    [data-theme='dark'] thead .filter-row th {
      background: rgba(22,27,34,0.96);
      border-bottom-color: var(--line);
    }
    [data-theme='dark'] thead .filter-row select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5.25 7.75L10 12.5l4.75-4.75' fill='none' stroke='%238b96a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    [data-theme='dark'] tbody tr {
      background: rgba(22,27,34,0.62);
      border-color: var(--line);
    }
    [data-theme='dark'] tbody tr:hover { background: rgba(240,246,252,0.05); }
    [data-theme='dark'] tr.variant-child { background: rgba(240,246,252,0.03); }
    [data-theme='dark'] tr.is-selected td { background: rgba(88,166,255,0.10); }
    [data-theme='dark'] tr.is-selected td.col-details {
      background: rgba(22,27,34,0.96);
      box-shadow: -10px 0 18px rgba(0,0,0,0.4);
    }
    [data-theme='dark'] td.col-details {
      background: rgba(22,27,34,0.88);
      box-shadow: -10px 0 18px rgba(0,0,0,0.35);
    }
    [data-theme='dark'] th.col-details {
      background: rgba(22,27,34,0.96);
      box-shadow: inset 0 -1px 0 rgba(240,246,252,0.06), -10px 0 18px rgba(0,0,0,0.35);
    }
    [data-theme='dark'] .details[open] {
      background: rgba(22,27,34,0.98);
      border-color: var(--line-strong);
      box-shadow: 0 20px 44px rgba(0,0,0,0.5);
    }
    [data-theme='dark'] .details-block {
      background: rgba(240,246,252,0.04);
      border-color: var(--line);
    }
    [data-theme='dark'] .details code { color: #93c5fd; }
    [data-theme='dark'] .details a { color: #60a5fa; }

    /* ── Form inputs ── */
    [data-theme='dark'] .cell-input,
    [data-theme='dark'] input:not([type="checkbox"]):not([type="radio"]),
    [data-theme='dark'] textarea,
    [data-theme='dark'] select {
      background-color: var(--bg-soft);
      color: var(--text);
      border-color: var(--line);
    }
    [data-theme='dark'] input::placeholder,
    [data-theme='dark'] textarea::placeholder { color: var(--muted); }
    [data-theme='dark'] .col-filter {
      background-color: var(--filter-bg);
      border: var(--filter-border);
      color: var(--filter-fg);
      box-shadow: inset 0 1px 0 rgba(240,246,252,0.05);
    }
    [data-theme='dark'] .col-filter::placeholder { color: var(--filter-ph); }
    [data-theme='dark'] .filter-mini {
      background-color: var(--filter-bg);
      border: var(--filter-border);
      color: var(--filter-fg);
    }
    [data-theme='dark'] .filter-mini::placeholder { color: var(--filter-ph); }

    /* ── Tags ── */
    [data-theme='dark'] .tag-official { background: rgba(88,166,255,0.18); color: #79c0ff; border-color: rgba(88,166,255,0.3); }
    [data-theme='dark'] .tag-custom { background: rgba(139,150,168,0.15); color: #b0b8c4; border-color: rgba(139,150,168,0.25); }
    [data-theme='dark'] .tag-personal { background: rgba(63,185,80,0.18); color: #56d364; border-color: rgba(63,185,80,0.3); }
    [data-theme='dark'] .tag-team { background: rgba(210,153,34,0.18); color: #e3b341; border-color: rgba(210,153,34,0.3); }
    [data-theme='dark'] .tag-unknown { background: rgba(139,150,168,0.12); color: #8b96a8; border-color: rgba(139,150,168,0.2); }
    [data-theme='dark'] .tag-warning-duplicate { background: rgba(210,153,34,0.18); color: #e3b341; border-color: rgba(210,153,34,0.35); }

    /* ── Buttons ── */
    [data-theme='dark'] .fix-btn { background: rgba(201,209,217,0.92); color: #0e1117; border-color: transparent; }
    [data-theme='dark'] .fix-btn:hover { background: rgba(201,209,217,1); }
    [data-theme='dark'] .save-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
    [data-theme='dark'] .delete-btn { background: rgba(248,81,81,0.9); color: #fff; border-color: transparent; }
    [data-theme='dark'] .share-btn,
    [data-theme='dark'] .unshare-btn {
      background: transparent; color: var(--text-soft); border-color: var(--line-strong);
    }
    [data-theme='dark'] .share-btn:hover,
    [data-theme='dark'] .unshare-btn:hover { background: rgba(240,246,252,0.06); color: var(--text); }
    [data-theme='dark'] .add-bench-toggle {
      background: transparent; color: var(--text-soft); border-color: rgba(240,246,252,0.16);
    }
    [data-theme='dark'] .add-bench-toggle:hover {
      background: rgba(240,246,252,0.06); color: var(--text); border-color: rgba(240,246,252,0.28);
    }
    [data-theme='dark'] .add-bench-collapse { color: var(--muted); }
    [data-theme='dark'] .add-bench-collapse:hover { background: rgba(240,246,252,0.06); color: var(--text); }
    [data-theme='dark'] .fix-shared { color: var(--muted); border-color: var(--line-strong); }

    /* ── View toggle (flat / grouped) ── */
    [data-theme='dark'] .view-toggle {
      background: rgba(22,27,34,0.72);
      border-color: var(--line);
      box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
    }
    [data-theme='dark'] .view-toggle-option { color: rgba(201,209,217,0.62); }
    [data-theme='dark'] .view-toggle-option:hover { color: var(--text-soft); }
    [data-theme='dark'] .view-toggle-option:has(input:checked) {
      background: rgba(22,27,34,0.96);
      color: var(--text);
      box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 6px 16px rgba(0,0,0,0.3);
    }
    [data-theme='dark'] .variant-toggle {
      color: rgba(201,209,217,0.64);
      background: rgba(22,27,34,0.78);
      border-color: var(--line);
      box-shadow: inset 0 1px 0 rgba(240,246,252,0.06);
    }
    [data-theme='dark'] .variant-toggle:hover {
      color: var(--text-soft);
      background: rgba(22,27,34,0.96);
      border-color: var(--line-strong);
    }

    /* ── Export menu ── */
    [data-theme='dark'] .export-btn {
      background: rgba(22,27,34,0.88);
      border-color: var(--line-strong);
      color: var(--text-soft);
    }
    [data-theme='dark'] .export-btn:hover {
      background: rgba(88,166,255,0.08);
      border-color: rgba(88,166,255,0.4);
    }
    [data-theme='dark'] .export-btn[aria-expanded="true"] {
      background: rgba(88,166,255,0.10);
      border-color: rgba(88,166,255,0.5);
    }
    [data-theme='dark'] .export-menu {
      background: var(--panel-solid);
      border-color: var(--line);
      box-shadow: 0 18px 38px rgba(0,0,0,0.5);
    }
    [data-theme='dark'] .export-menu-item:hover { background: rgba(88,166,255,0.10); }

    /* ── Toast ── */
    [data-theme='dark'] .toast { background: var(--panel-solid); color: var(--text); border-color: var(--line); }
    [data-theme='dark'] .toast-success { background: rgba(22,27,34,0.98); border-color: #3fb950; color: #86efac; }
    [data-theme='dark'] .toast-warn { background: rgba(22,27,34,0.98); border-color: #d29922; color: #fcd34d; }
    [data-theme='dark'] .toast-error { background: rgba(22,27,34,0.98); border-color: #f87171; color: #fca5a5; }

    /* ── Quality / warning panels ── */
    [data-theme='dark'] .quality-panel {
      background: rgba(210,153,34,0.10);
      border-color: rgba(210,153,34,0.25);
    }
    [data-theme='dark'] .quality-summary { color: #e3b341; }
    [data-theme='dark'] .quality-list { color: #d29922; }
    [data-theme='dark'] .dup-group-banner {
      background: rgba(210,153,34,0.15);
      border-color: rgba(210,153,34,0.35);
      color: #e3b341;
    }
    [data-theme='dark'] .dup-group-clear { color: #e3b341; border-color: rgba(210,153,34,0.5); }
    [data-theme='dark'] .dup-group-clear:hover { background: rgba(210,153,34,0.18); }

    /* ── Suggestion panel ── */
    [data-theme='dark'] .suggest-fab {
      background: rgba(22,27,34,0.9);
      border-color: rgba(88,166,255,0.22);
      box-shadow: 0 18px 36px rgba(0,0,0,0.4);
    }
    [data-theme='dark'] .suggest-panel {
      background: rgba(22,27,34,0.98);
      border-color: var(--line);
      box-shadow: 0 22px 48px rgba(0,0,0,0.5);
    }
    [data-theme='dark'] .suggest-close { background: rgba(240,246,252,0.06); }
    [data-theme='dark'] .suggest-body textarea,
    [data-theme='dark'] .suggest-body input {
      background: rgba(22,27,34,0.88);
      border-color: var(--line);
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(240,246,252,0.05);
    }

    /* ── Change context ── */
    [data-theme='dark'] .change-context input { background: var(--bg-soft); color: var(--text); border-color: var(--line); }

    /* ── Advanced inspector ── */
    [data-theme='dark'] .inspector-advanced details {
      background: rgba(210,153,34,0.08);
      border-color: rgba(210,153,34,0.22);
    }
    [data-theme='dark'] .inspector-advanced summary { color: rgba(201,209,217,0.8); }
    [data-theme='dark'] .inspector-advanced .example-watermark {
      background: rgba(22,27,34,0.8);
      border-color: rgba(210,153,34,0.15);
    }
    [data-theme='dark'] .inspector-advanced .probe-status {
      background: rgba(22,27,34,0.72);
      border-color: var(--line-strong);
      color: var(--text-soft);
    }
    [data-theme='dark'] .inspector-advanced .probe-server-input {
      background: rgba(22,27,34,0.62);
      border-color: var(--line);
      color: var(--text);
    }

    /* ── Compare ── */
    [data-theme='dark'] .row-select {
      background: rgba(22,27,34,0.88);
      border-color: var(--line-strong);
    }
    [data-theme='dark'] .compare-section {
      background: rgba(240,246,252,0.03);
      border-color: var(--line);
    }
    [data-theme='dark'] .compare-section[open] > summary {
      background: var(--panel-solid);
      border-bottom-color: var(--line);
    }
    [data-theme='dark'] .compare-col-head {
      background: var(--panel-solid);
      border-bottom-color: var(--line);
    }
    [data-theme='dark'] .compare-field-label {
      background: rgba(22,27,34,0.8);
      border-right-color: var(--line);
    }
    [data-theme='dark'] .compare-text-btn {
      background: rgba(22,27,34,0.8);
      border-color: var(--line-strong);
      color: var(--text-soft);
    }
    [data-theme='dark'] .compare-text-btn:hover { background: rgba(240,246,252,0.06); }
    [data-theme='dark'] .compare-table th,
    [data-theme='dark'] .compare-table td { border-bottom-color: rgba(240,246,252,0.06); }
    [data-theme='dark'] .compare-cmd {
      background: rgba(240,246,252,0.05);
    }
    [data-theme='dark'] .compare-diff {
      background: rgba(210,153,34,0.18);
    }
    [data-theme='dark'] .compare-best {
      background: rgba(63,185,80,0.12) !important;
    }

    /* ── Auth modal ── */
    [data-theme='dark'] .auth-modal-card,
    [data-theme='dark'] .shortcuts-modal-card { background: var(--panel-solid); color: var(--text); border-color: var(--line); }
    [data-theme='dark'] .auth-modal-close:hover { background: rgba(240,246,252,0.08); }
    [data-theme='dark'] .shortcut-row kbd { background: rgba(240,246,252,0.06); border-color: var(--line-strong); color: var(--text); }

    /* ── API Tokens (dark) ── */
    [data-theme='dark'] .token-item { background: var(--bg); border-color: var(--line); }
    [data-theme='dark'] .token-revoke-btn:hover { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.35); color: #f87171; }
    [data-theme='dark'] .token-created-box { background: rgba(34, 197, 94, 0.07); border-color: rgba(34, 197, 94, 0.18); }
    [data-theme='dark'] .token-created-head { color: #4ade80; }
    [data-theme='dark'] .token-created-value { background: var(--bg-soft); }
    [data-theme='dark'] .token-copy-btn { background: var(--bg-soft); }
    [data-theme='dark'] .token-copy-btn:hover { background: var(--bg); }
    [data-theme='dark'] .token-name-input { background: var(--bg); color: var(--text); border-color: rgba(240,246,252,0.18); }
    [data-theme='dark'] .token-name-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

    /* ── Compare modal ── */
    [data-theme='dark'] .compare-modal-card { background: var(--panel-solid); color: var(--text); border-color: var(--line); }

    /* ── Context icon ── */
    [data-theme='dark'] .context-icon { color: var(--muted); }
    [data-theme='dark'] .context-icon:hover { color: var(--text); }

    /* ── Theme toggle button (header) ─────────────────────────────── */
    .theme-toggle {
      width: 32px;
      height: 32px;
      border: 1px solid var(--line-strong);
      background: transparent;
      color: var(--muted);
      border-radius: 999px;
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
    }
    .theme-toggle:hover { background: var(--accent-soft); color: var(--text); }

    .upload-inline-btn { cursor: pointer; font-size: 11px; color: var(--muted); margin-left: auto; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); background: transparent; user-select: none; }
    .upload-inline-btn:hover { color: var(--text); background: var(--hover); }
    .drop-target.dragging { outline: 2px dashed var(--accent, #4f8ef7); outline-offset: 2px; }

    .cli-hint-link { color: var(--accent, #4f8ef7); text-decoration: none; font-size: inherit; }
    .cli-hint-link:hover { text-decoration: underline; }
    .cli-hint-box { margin-top: 10px; padding: 12px 14px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; }
    .cli-hint-title { font-weight: 600; margin-bottom: 8px; }
    .cli-hint-steps { display: flex; flex-direction: column; gap: 5px; }
    .cli-hint-step { display: flex; align-items: baseline; gap: 8px; }
    .cli-hint-num { font-weight: 700; color: var(--accent, #4f8ef7); min-width: 14px; }
    .cli-hint-step code { font-family: monospace; font-size: 12px; background: var(--code-bg, rgba(0,0,0,.06)); padding: 1px 5px; border-radius: 3px; }
    .cli-hint-note { margin-top: 8px; color: var(--muted); font-size: 12px; }

    /* ── Timeline view ── */
    .view-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, 0.12);
      background: white;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.012em;
      cursor: pointer;
      white-space: nowrap;
      transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    }
    .view-btn:hover {
      background: var(--accent-soft);
      color: var(--accent);
      border-color: var(--accent);
    }
    .view-btn.active {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
      box-shadow: 0 2px 8px rgba(10, 132, 255, 0.28);
    }
    .timeline-panel {
      padding: 0 2px 16px;
    }
    .timeline-panel.hidden { display: none; }
    .timeline-metric-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }
    .tl-tab {
      padding: 5px 14px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    }
    .tl-tab:hover { color: var(--text-soft); border-color: var(--accent); }
    .tl-tab.active {
      background: var(--accent-soft);
      color: var(--accent);
      border-color: var(--accent);
    }
    .timeline-svg {
      width: 100%;
      height: 400px;
      display: block;
    }
    .tl-tooltip {
      position: fixed;
      z-index: 9999;
      padding: 8px 12px;
      border-radius: 8px;
      background: var(--panel-solid, #fff);
      border: 1px solid var(--line);
      box-shadow: 0 8px 24px rgba(15,23,42,0.14);
      font-size: 12px;
      color: var(--text);
      pointer-events: none;
      max-width: 260px;
      line-height: 1.55;
    }
    .tl-tooltip.hidden { display: none; }

    [data-theme='dark'] .view-btn {
      background: rgba(22,27,34,0.88);
      border-color: var(--line-strong);
      color: var(--text-soft);
    }
    [data-theme='dark'] .view-btn:hover {
      background: rgba(88,166,255,0.08);
      border-color: rgba(88,166,255,0.4);
      color: var(--accent);
    }
    [data-theme='dark'] .view-btn.active {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }
    [data-theme='dark'] .tl-tab {
      color: rgba(201,209,217,0.62);
      border-color: var(--line);
    }
    [data-theme='dark'] .tl-tab:hover { color: var(--text-soft); border-color: rgba(88,166,255,0.5); }
    [data-theme='dark'] .tl-tab.active {
      background: rgba(88,166,255,0.12);
      color: var(--accent);
      border-color: var(--accent);
    }
    [data-theme='dark'] .tl-tooltip {
      background: var(--panel-solid, #1c2128);
      border-color: var(--line);
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    }