/* OCRProxy Design System — Single Token Source
 *
 * 主色：#1664FF（brand blue）— 唯一 canonical primary color。
 * 所有语义别名从 --khc-* 调色板派生，禁止在 CSS 其他地方硬编码色值。
 *
 * DEPRECATED aliases below map to their canonical names for backward
 * compatibility with existing rules; new code MUST use the --color-* vocabulary.
 */
:root {
  /* ── Palette (底层调色板，只读，不改) ────────────────────── */
  --khc-primary-50:   #E6EEFF;
  --khc-primary-100:  #C5D7FF;
  --khc-primary-200:  #98B8FF;
  --khc-primary-300:  #6B99FF;
  --khc-primary-400:  #3F7AFF;
  --khc-primary-500:  #1664FF;  /* canonical brand blue */
  --khc-primary-600:  #0F54E0;
  --khc-primary-700:  #0B43B8;
  --khc-primary-800:  #083185;
  --khc-primary-900:  #06205C;

  --khc-neutral-50:   #F8FAFC;
  --khc-neutral-100:  #F1F5F9;
  --khc-neutral-200:  #E2E8F0;
  --khc-neutral-300:  #CBD5E1;
  --khc-neutral-400:  #94A3B8;
  --khc-neutral-500:  #64748B;
  --khc-neutral-600:  #475569;
  --khc-neutral-700:  #334155;
  --khc-neutral-800:  #1E293B;
  --khc-neutral-900:  #0F172A;

  --khc-success-50:   #ECFDF5;
  --khc-success-500:  #10B981;
  --khc-success-600:  #059669;
  --khc-success-soft: var(--khc-success-50);

  --khc-warning-50:   #FFFBEB;
  --khc-warning-500:  #F59E0B;
  --khc-warning-600:  #D97706;
  --khc-warning-soft: var(--khc-warning-50);

  --khc-danger-50:    #FEF2F2;
  --khc-danger-500:   #EF4444;
  --khc-danger-600:   #DC2626;
  --khc-danger-soft:  var(--khc-danger-50);

  /* protocol semantic hues */
  --khc-violet-soft:  #F3E8FF;
  --khc-violet-500:   #8B5CF6;
  --khc-violet-600:   #7E22CE;
  --khc-teal-soft:    #F0FDFA;
  --khc-teal-600:     #0F766E;
  --khc-sky-soft:     #F0F9FF;
  --khc-sky-700:      #0369A1;

  /* ── Semantic aliases (唯一对外消费入口) ────────────────── */
  --color-primary:        var(--khc-primary-500);
  --color-primary-hover:  var(--khc-primary-600);
  --color-primary-soft:   var(--khc-primary-50);
  --color-primary-border: var(--khc-primary-100);

  --color-success:        var(--khc-success-600);
  --color-success-soft:   var(--khc-success-soft);
  --color-success-border: #BBF7D0;

  --color-warning:        var(--khc-warning-600);
  --color-warning-soft:   var(--khc-warning-soft);
  --color-warning-border: #FDE68A;

  --color-danger:         var(--khc-danger-600);
  --color-danger-soft:    var(--khc-danger-soft);
  --color-danger-border:  #FECACA;

  --color-violet:         var(--khc-violet-600);
  --color-violet-soft:    var(--khc-violet-soft);
  --color-teal:           var(--khc-teal-600);
  --color-teal-soft:      var(--khc-teal-soft);
  --color-sky:            var(--khc-sky-700);
  --color-sky-soft:       var(--khc-sky-soft);

  /* 基础 surface */
  --bg: var(--surface);              /* alias for body bg */
  --bg-subtle: var(--surface-muted);
  --bg-card: var(--surface);
  --surface:          #FFFFFF;
  --surface-muted:     #F5F8FF;
  --surface-inverse:   var(--khc-neutral-900);

  /* 文本 */
  --text:              var(--khc-neutral-900);
  --text-secondary:    var(--khc-neutral-600);
  --text-tertiary:     var(--khc-neutral-500);
  --text-muted:        var(--khc-neutral-500);

  /* 边框 */
  --border:            #D6DEE8;
  --border-subtle:     #E3E9F2;
  --border-strong:     #B8C4D6;

  /* ── Shape & Layout ─────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* 4px base spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Component sizing */
  --ctrl-height-sm: 28px;
  --ctrl-height-md: 32px;
  --row-height:     52px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow:     0 2px 8px rgba(16, 24, 40, 0.07);
  --shadow-md:  0 8px 22px rgba(16, 24, 40, 0.09);
  --shadow-lg:  0 20px 52px rgba(16, 24, 40, 0.13);

  /* ── Typography ─────────────────────────────────────────── */
  --font:           'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:      'SF Mono', 'Roboto Mono', Menlo, Monaco, Consolas, monospace;
  --text-xs:        12px;
  --text-sm:        13px;
  --text-md:        14px;
  --text-lg:        16px;
  --text-xl:        20px;

  /* ── Motion ─────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-base: 180ms;

  /* ═══════════════════════════════════════════════════════ */
  /* DEPRECATED aliases — 映射到 canonical 名，用于渐进迁移 */
  /* ═══════════════════════════════════════════════════════ */
  --primary:          var(--color-primary);
  --primary-hover:    var(--color-primary-hover);
  --primary-soft:     var(--color-primary-soft);
  --primary-border:   var(--color-primary-border);
  --success:          var(--color-success);
  --success-soft:     var(--color-success-soft);
  --success-border:   var(--color-success-border);
  --warn:             var(--color-warning);
  --warn-soft:        var(--color-warning-soft);
  --warn-border:      var(--color-warning-border);
  --error:            var(--color-danger);
  --error-soft:       var(--color-danger-soft);
  --error-border:     var(--color-danger-border);

  --c-bg:             var(--bg-subtle);
  --c-surface:        var(--surface);
  --c-surface-muted:  var(--surface-muted);
  --c-border:         var(--border);
  --c-border-strong:  var(--border-strong);
  --c-text:           var(--text);
  --c-text-muted:     var(--text-secondary);
  --c-text-subtle:    var(--text-tertiary);
  --c-primary:        var(--color-primary);
  --c-primary-hover:  var(--color-primary-hover);
  --c-primary-soft:   var(--color-primary-soft);
  --c-success:        var(--color-success);
  --c-success-soft:   var(--color-success-soft);
  --c-warning:        var(--color-warning);
  --c-warning-soft:   var(--color-warning-soft);
  --c-danger:         var(--color-danger);
  --c-danger-soft:    var(--color-danger-soft);
  --c-info:           var(--color-primary);
  --c-info-soft:      var(--color-primary-soft);
  --c-violet:         var(--color-violet);
  --c-violet-soft:    var(--color-violet-soft);
  --c-teal:           var(--color-teal);
  --c-teal-soft:      var(--color-teal-soft);
  --c-sky:            var(--color-sky);
  --c-sky-soft:       var(--color-sky-soft);

  --sp-1: var(--space-1); --sp-2: var(--space-2); --sp-3: var(--space-3); --sp-4: var(--space-4);
  --sp-5: var(--space-5); --sp-6: var(--space-6); --sp-8: var(--space-8); --sp-10: var(--space-10); --sp-12: var(--space-12);
  --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg); --r-pill: var(--radius-pill);
  --fs-xs: var(--text-xs); --fs-sm: var(--text-sm); --fs-md: var(--text-md); --fs-lg: var(--text-lg); --fs-xl: var(--text-xl);
  --sh-sm: var(--shadow-sm); --sh-md: var(--shadow-md); --sh-modal: var(--shadow-lg);
}
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg-subtle); -webkit-font-smoothing: antialiased; }
    button, input, select, textarea { font: inherit; color: inherit; }
    button { cursor: pointer; border: none; background: none; }
    a { color: var(--primary); text-decoration: none; }
    a:hover { color: var(--primary-hover); }

    /* HTML5 Standard Hidden Support */
    [hidden] { display: none !important; }

    /* Architecture Visibility (Pure Negative: only hide, never force display on visible cards/elements) */
    body.arch-edgeone [data-arch="vm"] { display: none !important; }
    body.arch-vm [data-arch="edgeone"],
    body:not(.arch-edgeone) [data-arch="edgeone"] { display: none !important; }

    /* Login */
    .login-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(15,23,42,0.6); backdrop-filter: blur(4px); z-index: 1000; }
    .login-box { width: 380px; max-width: calc(100vw - 32px); padding: 36px 32px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
    .login-box h2 { font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
    .login-box p { color: var(--text-secondary); font-size: 13px; margin-bottom: 24px; }

    /* Layout */
    .app { display: none; min-height: 100vh; }
    .appbar { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); padding: 0 24px; height: 48px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow-sm); }
    .brand-title { font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; white-space: nowrap; }
    .brand-logo { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--khc-primary-500), var(--khc-primary-700)); color: #fff; font-weight: 700; font-size: 16px; }
    .brand-badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-weight: 500; border: 1px solid var(--primary-border); }
    .appbar nav { display: flex; gap: 4px; margin-left: auto; }
    .appbar nav button { padding: 6px 14px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; font-weight: 500; transition: all .15s; white-space: nowrap; }
    .appbar nav button:hover { background: var(--khc-neutral-100); color: var(--text); }
    .appbar nav button.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
    .appbar .actions { display: flex; gap: 8px; align-items: center; }
    .main { max-width: 1184px; margin: 0 auto; padding: 24px 20px; }

    /* Panels */
    .panel { display: none; }
    .panel.active { display: block; animation: fadeIn .15s ease-out; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

    /* Section */
    .section { margin-bottom: 28px; }
    .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
    .section-title { font-size: 16px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
    .section-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

    /* Cards */
    .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 16px; transition: box-shadow .15s; }
    .card:hover { box-shadow: var(--shadow); }
    .card-pad { padding: 20px 24px; }
    .card-head { padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--khc-neutral-50); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .card-head h3 { font-size: 14px; font-weight: 600; color: var(--text); }
    .card-head .meta { font-size: 12px; color: var(--text-secondary); }

    /* Buttons */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 14px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); font-size: 13px; font-weight: 500; color: var(--text); box-shadow: var(--shadow-sm); transition: all .15s; user-select: none; }
    .btn:hover:not(:disabled) { background: var(--khc-neutral-100); border-color: var(--border-strong); }
    .btn:active:not(:disabled) { transform: scale(0.98); }
    .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }
    .khc-icon { display: inline-block; vertical-align: -0.15em; stroke: currentColor; flex-shrink: 0; }

    /* Forms */
    .form-group { margin-bottom: 16px; }
    .form-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
    .form-control { width: 100%; height: 40px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 14px; outline: none; background: var(--bg); transition: border-color .15s, box-shadow .15s; }
    .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,100,255,0.12); }
    .form-control::placeholder { color: var(--text-tertiary); }
    /* 彻底去除所有数字输入框原生上下小箭头，确保纯键盘打字体验 */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
      appearance: none !important;
      display: none !important;
      margin: 0 !important;
    }
    input[type="number"] {
      -moz-appearance: textfield;
      appearance: textfield;
    }
    select.form-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
    .checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; user-select: none; }
    .checkbox input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }

    /* Tables */
    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
    th { font-size: 12px; font-weight: 500; color: var(--text-secondary); background: var(--khc-neutral-50); }
    tbody tr { transition: background .15s; }
    tbody tr:hover { background: var(--khc-neutral-100); }
    tbody tr:last-child td { border-bottom: none; }
    td.mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
    .model-card table { table-layout: fixed; width: 100%; }
    .model-card th, .model-card td { box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; padding: 6px 12px; vertical-align: middle; }
    .model-card .card-head { padding: 9px 16px; }
    /* Narrow viewports: long names/upstream IDs ellipsize instead of widening the card;
       the action column stays pinned while the key table scrolls horizontally. */
    .model-card .card-head > div:first-child { min-width: 0; max-width: 100%; }
    .model-card .model-id > span:first-child { overflow-wrap: anywhere; }
    .model-card .model-id .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .model-card tbody tr { background: var(--bg-card, #fff); }
    .model-card th:last-child, .model-card td:last-child { position: sticky; right: 0; box-shadow: -1px 0 0 var(--border); }
    .model-card thead th:last-child { background: var(--khc-neutral-50); }
    .model-card tbody td:last-child { background: inherit; }
    .proto-list { display: flex; flex-direction: column; gap: 12px; padding: 10px 12px; background: var(--bg-subtle); border-radius: var(--radius-sm); border: 1px solid var(--border); }
    /* 两行式：第一行协议开关，第二行整宽端点地址（地址太长，挤在一行看不清） */
    .proto-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
    .proto-row .proto-toggle { min-width: 0; }
    .proto-row .form-control { width: 100%; }
    #listAvailableModels { min-width: 0; max-width: 100%; }
    #listAvailableModels .model-chip-clickable { max-width: 100%; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
    #listAvailableModels .model-chip-clickable > span:first-child { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
    .brand-title { min-width: 0; max-width: 100%; }
    .brand-title .brand-badge { flex-shrink: 1; min-width: 0; }
    .model-card .btn-icon.btn-sm { width: 26px; height: 26px; }
    .model-card .btn-sm { height: 26px; padding: 2px 8px; font-size: 12px; }

    /* Badges */
    .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; line-height: 1.4; white-space: nowrap; flex-shrink: 0; min-width: 24px; }
    .badge-neutral { background: var(--khc-neutral-100); color: var(--text-tertiary); }
    .badge-success { background: var(--khc-success-50); color: var(--success); }
    .badge-warn, .badge-warning { background: var(--khc-warning-50); color: var(--warn); border: 1px solid rgba(245,158,11,0.25); }
    .badge-error { background: var(--khc-danger-50); color: var(--error); }
    .badge-primary { background: var(--primary-soft); color: var(--primary); }
    .badge-purple { background: #f3e8ff; color: #7e22ce; border: 1px solid rgba(126,34,206,0.2); }

    /* Stats Grid */
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
    #agentStatsGrid { grid-template-columns: repeat(3, 1fr); }
    .stat { padding: 16px 20px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
    .stat-label { font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-bottom: 4px; }
    .stat-value { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; }
    .stat-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
    .bar-list { display: flex; flex-direction: column; gap: 12px; }
    .bar-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
    .bar-row .name { width: 90px; color: var(--text-secondary); font-weight: 500; }
    .bar-row .track { flex: 1; height: 10px; background: var(--bg-subtle); border-radius: 5px; overflow: hidden; }
    .bar-row .fill { height: 100%; border-radius: 5px; transition: width .3s ease; }
    .bar-row .num { width: 60px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-family: var(--font-mono); }

    /* Model chip (Top 3 strip) */
    .model-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card); padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 12px; }
    .model-chip .rank { font-weight: 600; color: var(--text-secondary); }
    .model-chip .latency { color: var(--text-secondary); font-size: 11px; }

    /* Provider list */
    .provider-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border); gap: 16px; background: #fff; }
    .provider-row:last-child { border-bottom: none; }
    .provider-main-info { flex: 1; min-width: 0; }
    .provider-name { font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
    .provider-url { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; margin-top: 4px; }
    .provider-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; margin-top: 2px; }
    .provider-actions button, .provider-actions .btn { white-space: nowrap !important; flex-shrink: 0 !important; }
    .key-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
    .key-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; background: var(--khc-neutral-100); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }

    /* Settings grid & grouped cards */
    .settings-group { margin-bottom: 24px; }
    .setting-item { display: flex; flex-direction: column; gap: 4px; }
    .setting-item .hint { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
    .toggle-card { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
    .toggle-card-info h4 { font-size: 13px; font-weight: 600; color: var(--text); }
    .toggle-card-info p { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

    /* Modal */
    body.modal-open { overflow: hidden !important; }
    .modal { position: fixed; inset: 0; background: rgba(15,23,42,0.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; overscroll-behavior: contain; }
    .modal.show { display: flex; animation: fadeIn .15s ease-out; }
    #keyModal, #probedListModal, #deleteConfirmModal { z-index: 1200; }
    .modal-box { width: 480px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: var(--bg); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--border); overscroll-behavior: contain; }
    .modal-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
    .modal-head h3 { font-size: 15px; font-weight: 600; color: var(--text); }
    .modal-body { padding: 20px; overscroll-behavior: contain; }
    .modal-foot { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--khc-neutral-50); display: flex; justify-content: flex-end; gap: 8px; }
    .modal-close { background: none; border: none; font-size: 18px; color: var(--text-secondary); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
    .modal-close:hover { background: var(--khc-neutral-100); color: var(--text); }

    /* Toast */
    .toast-container { position: fixed; top: 64px; right: 20px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
    .toast { pointer-events: auto; padding: 10px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; transform: translateX(120%); transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1); }
    .toast.show { transform: translateX(0); }
    .toast.ok { border-left: 4px solid var(--success); color: var(--text); }
    .toast.err { border-left: 4px solid var(--error); color: var(--text); }
    .toast.info { border-left: 4px solid var(--primary); color: var(--text); }

    /* Tabs inside page */
    .subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
    .subtabs button { padding: 8px 16px; font-size: 13px; font-weight: 500; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s; }
    .subtabs button:hover { color: var(--text); }
    .subtabs button.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

    /* Alphabet Nav Rail & Group Dividers */
    .alphabet-nav-rail {
      /* 默认隐藏；providers.js 在分组数 >1 时显式置为 display:block */
      display: none;
      position: sticky;
      top: 72px;
      width: 36px;
      flex-shrink: 0;
      max-height: calc(100vh - 90px);
      overflow-y: auto;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      box-shadow: 0 1px 4px rgba(0,0,0,0.05);
      padding: 6px 3px;
      scrollbar-width: none;
    }
    .alphabet-nav-rail::-webkit-scrollbar { display: none; }
    .alpha-rail-inner { display: flex; flex-direction: column; align-items: center; gap: 3px; }
    .alpha-rail-btn {
      width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; font-family: var(--font-mono);
      color: var(--text-secondary); cursor: pointer; border: none; background: transparent; transition: all 0.15s ease;
      user-select: none;
    }
    .alpha-rail-btn:hover { background: var(--primary-soft); color: var(--primary); transform: scale(1.12); }
    .alpha-rail-btn:active { background: var(--primary); color: #fff; }
    .alpha-divider {
      display: flex; align-items: center; gap: 10px; margin: 16px 0 8px 0;
      scroll-margin-top: 80px; border-radius: var(--radius-sm); transition: all 0.3s ease;
    }
    .alpha-divider:first-child { margin-top: 0; }
    .alpha-char-badge {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 24px; height: 24px; padding: 0 5px; background: var(--primary); color: #fff;
      font-family: var(--font-mono); font-weight: 700; font-size: 12px; border-radius: var(--radius-sm);
    }
    .alpha-divider-meta { font-size: 11px; color: var(--text-secondary); font-weight: 500; }
    .alpha-divider-line { flex: 1; height: 1px; background: var(--border); }
    @keyframes alphaFlash {
      0% { outline: 2px solid var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
      100% { outline: 2px solid transparent; box-shadow: none; }
    }
    .alpha-target-highlight { animation: alphaFlash 1.2s ease-out; }

    /* Capsule Selectors (Extreme 3-Click Flow) */
    .capsule-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .capsule-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px; border-radius: 20px;
      border: 1px solid var(--border); background: var(--bg);
      color: var(--text); font-size: 13px; font-weight: 500;
      cursor: pointer; user-select: none; transition: all 0.15s ease;
    }
    .capsule-btn:hover {
      border-color: var(--primary); background: var(--primary-soft); color: var(--primary);
    }
    .capsule-btn.active {
      border-color: var(--primary); background: var(--primary); color: #fff;
      font-weight: 600; box-shadow: 0 2px 6px rgba(22, 100, 255, 0.25);
    }
    .capsule-btn.active .badge {
      background: rgba(255, 255, 255, 0.25); color: #fff; border: none;
    }

    .key-capsule {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: 16px;
      border: 1px solid var(--border); background: var(--bg);
      font-size: 12px; cursor: pointer; user-select: none; transition: all 0.15s ease;
    }
    .key-capsule:hover {
      border-color: var(--primary);
    }
    .key-capsule.checked {
      border-color: var(--primary); background: var(--primary-soft);
      color: var(--primary); font-weight: 600;
    }

    /* Standardized Protocol Badges */
    .proto-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 600; padding: 2px 7px;
      border-radius: 4px; line-height: 1.2;
    }
    .proto-openai {
      background: rgba(16, 185, 129, 0.12); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3);
    }
    .proto-anthropic {
      background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3);
    }

    /* Probed Modal Items */
    .probed-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
      background: var(--bg); cursor: pointer; transition: all 0.15s ease;
    }
    .probed-item:hover {
      border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px);
    }

    .model-capsule {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 5px 12px; border-radius: 16px;
      border: 1px solid var(--border); background: var(--bg);
      font-size: 12px; cursor: pointer; user-select: none; transition: all 0.15s ease;
    }
    .model-capsule:hover {
      border-color: var(--primary); background: var(--primary-soft);
      color: var(--primary); transform: translateY(-1px);
    }
    .model-capsule.active {
      border-color: var(--primary); background: var(--primary);
      color: #fff; font-weight: 600;
    }

    /* Spinners & Loaders */
    .spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(0,0,0,0.15); border-top-color: currentColor; border-radius: 50%; animation: spin 0.6s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Empty state */
    .empty { padding: 40px 20px; text-align: center; color: var(--text-secondary); font-size: 13px; }
    .hint-box { padding: 12px 16px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 16px; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }

    /* Utility */
    .flex { display: flex; }
    .flex-between { display: flex; justify-content: space-between; align-items: center; }
    .gap-2 { gap: 8px; }
    .gap-3 { gap: 12px; }
    .mt-1 { margin-top: 4px; }
    .mt-2 { margin-top: 8px; }
    .mt-3 { margin-top: 12px; }
    .mb-1 { margin-bottom: 4px; }
    .mb-2 { margin-bottom: 8px; }
    .mb-3 { margin-bottom: 12px; }
    .text-secondary { color: var(--text-secondary); }
    .text-sm { font-size: 12px; }
    .mono { font-family: var(--font-mono); }
    .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ── Compact Gateway Strip ── */
    .gateway-card {
      background: var(--bg-card, #FFFFFF);
      border: 1px solid var(--border, #E2E8F0);
      border-radius: var(--radius-md, 8px);
      padding: 16px 20px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .gateway-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 6px 0;
    }
    .gateway-row--border-bottom { border-bottom: 1px solid var(--border); padding-bottom: 10px; }
    .gateway-row--pad-vertical  { border-bottom: 1px solid var(--border); padding: 10px 0; }
    .gateway-row--pad-top-start { padding-top: 10px; align-items: flex-start; }
    .gateway-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary, #475569);
      width: 120px;
      flex-shrink: 0;
    }
    .gateway-label--aligned { padding-top: 2px; }
    .gateway-val {
      font-family: var(--font-mono, monospace);
      font-size: 12px;
      color: var(--text, #0F172A);
      word-break: break-all;
    }
    .model-chip-clickable {
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .model-chip-clickable:hover {
      transform: translateY(-1px);
      filter: brightness(1.1);
    }

    @media (max-width: 860px) {
      .appbar { flex-wrap: wrap; padding: 12px 16px; height: auto; min-height: 48px; gap: 8px; }
      .appbar nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
      .main { padding: 16px; }
      .stats-grid, .settings-grid { grid-template-columns: 1fr; }
      .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    }

    /* Compact Settings Styles */
    .form-control.form-control-compact {
      height: 32px;
      padding: 4px 10px;
      font-size: 13px;
      line-height: 1.4;
    }
    .settings-card {
      padding: 18px 20px;
    }
    .settings-group-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text, var(--color-text-1));
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .settings-group-title::before {
      content: "";
      display: inline-block;
      width: 3px;
      height: 13px;
      background: var(--primary, var(--color-primary));
      border-radius: 2px;
    }
    .settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-3, 12px) var(--space-4, 16px);
      align-items: stretch;
    }
    @media (max-width: 840px) {
      .settings-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    .settings-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 8px 14px;
      background: var(--bg-subtle, var(--khc-neutral-50));
      border: 1px solid var(--border, var(--khc-neutral-200));
      border-radius: var(--radius-sm, 2px);
      min-height: var(--row-height, 52px);
      height: auto;
      box-sizing: border-box;
    }
    .settings-row.settings-row-full {
      grid-column: 1 / -1;
      width: 100%;
    }
    .settings-row-label {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      flex: 1 1 50%;
      min-width: 0;
    }
    .settings-row-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text, var(--khc-neutral-900));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.4;
    }
    .settings-row-hint {
      font-size: 11px;
      color: var(--text-secondary, var(--khc-neutral-600));
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .settings-row-ctrl {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex: 0 1 clamp(160px, 40%, 280px);
      min-width: 0;
      white-space: nowrap;
    }
    .settings-row.settings-row-full .settings-row-ctrl {
      flex: 0 1 clamp(280px, 50%, 540px);
    }
    .settings-row-ctrl.mode-schedule-ctrl input[type="time"] {
      width: 96px;
      flex: 0 0 auto;
      height: 32px;
      font-size: 13px;
    }
    /* Key row stretching (PROXY_API_KEY, Vault Token, etc.) */
    .settings-row.settings-row-key .settings-row-label {
      flex: 0 0 auto;
      min-width: 200px;
      max-width: 340px;
    }
    .settings-row.settings-row-key .settings-row-ctrl {
      flex: 1 1 auto;
      max-width: none;
      width: auto;
    }
    .settings-row.settings-row-key .settings-row-ctrl input[type="text"],
    .settings-row.settings-row-key .settings-row-ctrl input[type="password"] {
      flex: 1 1 auto;
      width: 100%;
      min-width: 180px;
    }
    .settings-row-ctrl select {
      width: 100%;
      height: 32px;
      padding: 4px 8px;
      font-size: 13px;
      border: 1px solid var(--border-strong, #CBD5E1);
      border-radius: var(--radius-sm, 2px);
      background: #fff;
      color: var(--text);
      outline: none;
    }
    .settings-row .settings-row-ctrl input[type="number"] {
      width: 80px;
      height: 32px;
      text-align: right;
      padding: 4px 8px;
      font-family: var(--font-mono);
      font-size: 13px;
      border: 1px solid var(--border-strong, #CBD5E1);
      border-radius: var(--radius-sm, 2px);
      background: #fff;
      color: var(--text);
      outline: none;
      flex-shrink: 0;
    }
    .settings-row-ctrl input[type="text"],
    .settings-row-ctrl input[type="password"] {
      height: 32px;
      padding: 4px 8px;
      font-size: 13px;
    }
    .settings-row-ctrl .unit {
      font-size: 12px;
      color: var(--text-secondary);
      min-width: 16px;
      text-align: left;
      flex-shrink: 0;
    }

    @media (max-width: 640px) {
      .settings-row {
        flex-wrap: wrap;
        height: auto;
        min-height: 52px;
        padding: 10px 12px;
        gap: 8px;
      }
      .settings-row-label {
        flex: 1 1 100%;
        white-space: normal;
      }
      .settings-row-title,
      .settings-row-hint {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
      }
      .settings-row-ctrl {
        flex: 1 1 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        max-width: none;
      }
      .settings-row-ctrl select,
      .settings-row-ctrl input[type="text"],
      .settings-row-ctrl input[type="password"] {
        width: 100%;
      }
      .settings-row.settings-row-key .settings-row-label {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
      }
      .settings-row.settings-row-key .settings-row-ctrl input[type="text"],
      .settings-row.settings-row-key .settings-row-ctrl input[type="password"] {
        min-width: 0;
      }
      .provider-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      .provider-actions {
        justify-content: flex-start;
        margin-left: 0;
      }
    }

    /* §4 Console v2 component layer (ui.js) */
    .btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
    .btn--primary:hover:not(:disabled) { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
    .btn--secondary { background: var(--c-surface); color: var(--c-text-muted); border-color: var(--c-border); }
    .btn--secondary:hover:not(:disabled) { background: var(--c-bg); border-color: var(--c-border-strong); color: var(--c-text); }
    .btn--ghost { background: transparent; color: var(--c-text-muted); border-color: transparent; }
    .btn--ghost:hover:not(:disabled) { background: var(--c-bg); color: var(--c-text); }
    .btn--danger { background: var(--c-danger-soft); color: var(--c-danger); border-color: var(--c-danger-soft); }
    .btn--danger:hover:not(:disabled) { background: var(--c-danger); color: #fff; }
    .btn--warn { background: var(--c-warning-soft); color: var(--c-warning); border-color: var(--c-warning-border); }
    .btn--warn:hover:not(:disabled) { background: var(--c-warning); color: #fff; }
    .btn--sm { padding: 4px 10px; font-size: var(--fs-xs); height: 28px; }
    .btn--xs { padding: 2px 7px; font-size: 11px; height: 22px; line-height: 1; border-radius: var(--r-sm); }
    .btn--icon { padding: 0; width: 28px; height: 28px; justify-content: center; }
    .badge--neutral { background: var(--c-bg); color: var(--c-text-subtle); }
    .badge--primary { background: var(--c-primary-soft); color: var(--c-primary); }
    .badge--success { background: var(--c-success-soft); color: var(--c-success); }
    .badge--warning { background: var(--c-warning-soft); color: var(--c-warning); }
    .badge--danger { background: var(--c-danger-soft); color: var(--c-danger); }
    .badge--info { background: var(--c-info-soft); color: var(--c-info); }
    .badge--violet { background: var(--c-violet-soft); color: var(--c-violet); }
    .badge--teal { background: var(--c-teal-soft); color: var(--c-teal); }
    .badge--sky { background: var(--c-sky-soft); color: var(--c-sky); }
    .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
    .dot--neutral { background: var(--c-text-subtle); }
    .dot--primary { background: var(--c-primary); }
    .dot--success { background: var(--c-success); }
    .dot--warning { background: var(--c-warning); }
    .dot--danger { background: var(--c-danger); }
    .dot--info { background: var(--c-info); }
    .dot--violet { background: var(--c-violet); }
    .dot--teal { background: var(--c-teal); }
    .dot--sky { background: var(--c-sky); }
    .capsule { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-surface-muted); border: 1px solid var(--c-border); font-size: var(--fs-xs); color: var(--c-text-muted); }
    .capsule__label { font-family: var(--font-mono); }
    .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
    .page-header__title { font-size: var(--fs-xl); line-height: 1.3; font-weight: 700; color: var(--c-text); }
    .page-header__desc { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-muted); }
    .page-header__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
    .card__head { padding: 14px 20px; border-bottom: 1px solid var(--c-border); display: flex; justify-content: space-between; gap: var(--sp-3); }
    .card__title { font-size: var(--fs-md); font-weight: 600; color: var(--c-text); }
    .card__sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--c-text-subtle); }
    .card__body { padding: 20px; }
    .field { display: flex; flex-direction: column; gap: var(--sp-1); }
    .field__label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-muted); }
    .field__required { color: var(--c-danger); }
    .field__hint { font-size: var(--fs-xs); color: var(--c-text-subtle); }
    .field__error { font-size: var(--fs-xs); color: var(--c-danger); }
    .empty:not(td) { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-4); color: var(--c-text-subtle); text-align: center; }
    .empty__title { font-size: var(--fs-md); color: var(--c-text-muted); }
    .empty__desc { font-size: var(--fs-xs); }

    /* Gateway hint / runtime tip variants */
    .hint-box--routing-tip { color: var(--text); background: var(--bg-subtle); border: 1px dashed var(--primary); padding: 6px 10px; font-size: 11px; }
    .hint-box--preview { line-height: 1.7; }


    /* §5 P1 shell / shared visual overrides */
    body { background: var(--c-bg); color: var(--c-text); }
    .appbar { height: 56px; padding: 0 24px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); box-shadow: var(--sh-sm); gap: 20px; }
    .brand-title { font-size: 15px; letter-spacing: -0.01em; }
    .brand-logo { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--c-primary), #1E40AF); box-shadow: 0 2px 8px rgba(37,99,235,.28); }
    .appbar nav { gap: 2px; background: var(--c-surface-muted); padding: 3px; border-radius: var(--r-pill); }
    .appbar nav button { padding: 6px 14px; border-radius: var(--r-pill); color: var(--c-text-muted); font-size: 13px; }
    .appbar nav button:hover { background: var(--c-surface); color: var(--c-text); }
    .appbar nav button.active { background: var(--c-surface); color: var(--c-primary); box-shadow: var(--sh-sm); }
    .main { max-width: 1200px; padding: 28px 24px 48px; }
    .page-header { padding: 4px 0 0; margin-bottom: 20px; }
    .page-header__title { font-size: 24px; letter-spacing: -0.02em; }
    .page-header__desc { font-size: 13px; color: var(--c-text-muted); max-width: 760px; }
    .card { border-radius: var(--r-lg); border-color: var(--c-border); box-shadow: var(--sh-sm); }
    .card:hover { box-shadow: var(--sh-md); }
    .section-head { margin-bottom: 12px; }
    .section-title { font-size: 15px; }
    .section-desc { font-size: 12px; color: var(--c-text-muted); }
    .form-control { border-radius: var(--r-sm); border-color: var(--c-border); background: var(--c-surface); }
    .form-control:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.14); outline: none; }
    .btn { border-radius: var(--r-sm); font-weight: 600; letter-spacing: -0.01em; }
    .btn--primary { box-shadow: 0 1px 2px rgba(22,100,255,.28); }
    .btn--sm { border-radius: var(--r-sm); }
    .badge { border-radius: var(--r-pill); font-weight: 600; }
    .key-chip, .key-capsule { border-radius: var(--r-pill); background: var(--c-surface-muted); border-color: var(--c-border); }
    .modal-box { border-radius: var(--r-lg); border-color: var(--c-border); box-shadow: var(--sh-modal); }
    .modal-head { padding: 16px 20px; }
    .modal-foot { background: var(--c-surface-muted); border-color: var(--c-border); }
    .toast { border-radius: var(--r-md); box-shadow: var(--sh-md); border-color: var(--c-border); }
    .login-overlay { background: rgba(15,23,42,.48); backdrop-filter: blur(10px); }
    .login-box { width: 400px; padding: 32px; border-radius: var(--r-lg); border-color: var(--c-border); }
    .login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
    .login-brand h2 { font-size: 22px; margin: 0; }
    .login-brand p { margin: 2px 0 0; font-size: 12px; color: var(--c-text-subtle); letter-spacing: .08em; text-transform: uppercase; }
    .login-box .field { margin-bottom: 14px; }
    .login-box .btn--block { width: 100%; justify-content: center; margin-top: 8px; padding: 9px 12px; }
    .login-error { margin-top: 12px; padding: 9px 10px; border-radius: var(--r-sm); background: var(--c-danger-soft); border: 1px solid var(--c-danger-soft); color: var(--c-danger); font-size: 12px; text-align: center; }
    .btn--block { width: 100%; justify-content: center; }
    .table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-subtle); background: var(--c-surface-muted); }
    .table td { border-color: var(--c-border); }
    .tnum { font-variant-numeric: tabular-nums; }
    .mono { font-family: var(--font-mono); }
    .muted { color: var(--c-text-muted); }
    .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .is-hidden { display: none !important; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    @media (max-width: 720px) {
      .main { padding: 20px 14px 40px; }
      .appbar { padding: 10px 14px; height: auto; }
      .page-header__title { font-size: 21px; }
    }


    /* P0 form primitives */
    .switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-muted); cursor: pointer; }
    .switch input { position: absolute; opacity: 0; pointer-events: none; }
    .switch__track { width: 34px; height: 20px; border-radius: 999px; background: var(--c-border-strong); position: relative; transition: background var(--dur-fast); flex-shrink: 0; }
    .switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: transform var(--dur-fast); }
    .switch input:checked + .switch__track { background: var(--c-primary); }
    .switch input:checked + .switch__track::after { transform: translateX(14px); }
    .segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--c-surface-muted); border: 1px solid var(--c-border); }
    .segmented__item { border: 0; background: transparent; padding: 5px 12px; border-radius: var(--r-pill); font-size: 12px; color: var(--c-text-muted); cursor: pointer; }
    .segmented__item.is-active { background: var(--c-surface); color: var(--c-primary); box-shadow: var(--sh-sm); font-weight: 600; }


    /* §5 Readability: model tables + select affordance + settings grouping */
    #agentModelsBox table, #kbModelsBox table, .model-card table { font-size: 14px; }
    #agentModelsBox th, #kbModelsBox th, .model-card th {
      padding: 12px 16px; font-size: 12px; letter-spacing: .03em;
    }
    #agentModelsBox td, #kbModelsBox td, .model-card td {
      padding: 12px 16px; font-size: 14px; line-height: 1.45;
    }
    .model-card .card-head { padding: 13px 20px; }
    .model-card .card-head h3, .model-card .card-head .section-title { font-size: 15px; }
    .model-card .model-id > span:first-child { font-size: 14px; }
    .model-card .btn--sm { height: 30px; padding: 4px 10px; font-size: 12.5px; }
    .model-card .key-chip { padding: 4px 10px; font-size: 12.5px; }
    .model-card .badge { font-size: 11.5px; }
    .model-card .table-wrap { border-top: 1px solid var(--c-border); }

    select.form-control, select.form-control-compact {
      cursor: pointer;
      padding-right: 42px;
      min-height: 38px;
      appearance: none;
      -webkit-appearance: none;
      background-color: var(--c-surface);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 13px center;
      background-size: 16px;
      border-color: var(--c-border-strong);
      box-shadow: inset 0 1px 1px rgba(16,24,40,.03);
    }
    select.form-control:hover, select.form-control-compact:hover { border-color: var(--c-primary); }
    select.form-control:focus, select.form-control-compact:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
    .settings-row-ctrl select { min-height: 38px; }
    select.form-control-compact { height: 38px; background-color: var(--c-surface-muted); }

    /* Settings: card separation + calmer action rows */
    .settings-card + .settings-card { margin-top: 20px; }
    .settings-card .settings-group-title { padding-bottom: 12px; }
    .settings-card .settings-row { padding-top: 12px; padding-bottom: 12px; }
    .settings-card .settings-row-full { border-top: 1px solid var(--c-border); margin-top: 4px; padding-top: 16px; }
    .settings-card .settings-row-full:first-of-type { border-top: 0; margin-top: 0; }
    .settings-card .settings-row-ctrl { justify-content: flex-end; flex-wrap: wrap; }
    .settings-card .settings-row-ctrl .btn { margin-left: 2px; }

    /* §4 Unified custom dialogs (replaces native alert/confirm) */
    .ui-dialog-overlay { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,23,42,.48); backdrop-filter: blur(6px); }
    .ui-dialog { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-modal); animation: uiDialogIn .16s ease-out; }
    @keyframes uiDialogIn { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
    .ui-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--c-border); }
    .ui-dialog__title { font-size: 15px; font-weight: 700; color: var(--c-text); }
    .ui-dialog__close { border: 0; background: transparent; color: var(--c-text-subtle); font-size: 20px; line-height: 1; width: 28px; height: 28px; border-radius: var(--r-sm); cursor: pointer; }
    .ui-dialog__close:hover { background: var(--c-surface-muted); color: var(--c-text); }
    .ui-dialog__body { padding: 20px; color: var(--c-text-muted); font-size: 13px; line-height: 1.65; }
    .ui-dialog__desc { margin: 0; white-space: pre-wrap; }
    .ui-dialog__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--c-border); background: var(--c-surface-muted); }
    .oauth-device-code { font-family: var(--font-mono); font-size: 26px; font-weight: 700; letter-spacing: .08em; text-align: center; color: var(--c-text); background: var(--c-surface-muted); border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); padding: 14px; margin: 10px 0; user-select: all; }
    .oauth-device-link { display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap; }
    .oauth-device-url { flex: 1 1 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface-muted); font-family: var(--font-mono); font-size: 12px; line-height: 1.55; word-break: break-all; user-select: all; color: var(--c-text); }
    .oauth-device-step { margin: 14px 0 6px; font-size: 12px; font-weight: 700; color: var(--c-text-muted); }
    .oauth-device-status { margin-top: 14px; font-size: 12px; color: var(--c-text-subtle); }

/* ════════════════════════════════════════════════════════════════
 * Inline-style migration classes (consolidate old style="..." attrs)
 * 所有旧 HTML 里的内联 style 迁移目标。新代码应该直接用这些类。
 * ════════════════════════════════════════════════════════════════ */

/* Modal body sizing variants (替代 modal-box 上的 max-width/max-height 内联) */
.modal-box--560  { max-width: 560px; max-height: 90vh; overflow-y: auto; }
.modal-box--540  { max-width: 540px; max-height: 85vh; overflow-y: auto; }
.modal-box--520  { max-width: 520px; max-height: 90vh; overflow-y: auto; }
.modal-box--660  { max-width: 660px; max-height: 92vh; overflow-y: auto; }
.modal-box--probe{ max-width: 540px; max-height: 85vh; display: flex; flex-direction: column; }

/* 3-step Wizard row — ①②③ 每步统一用这个包裹 */
.wizard-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.wizard-row--last { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wizard-row__title { font-weight: 700; margin-bottom: 0; }
.wizard-row__sub   { font-weight: normal; }
.wizard-proto-info { margin: 8px 0 12px; min-height: 24px; display: flex; align-items: center; gap: 6px; }
.wizard-capsule-row { padding: 10px; background: var(--bg-subtle); border-radius: var(--radius-sm); border: 1px solid var(--border); min-height: 46px; }
.wizard-box { background: var(--bg); padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.wizard-box__label { font-size: 12px; margin-bottom: 4px; }

/* Runtime control boxes — Vault / Vertex / OAuth / KHCS diag 统一形态 */
.runtime-box { padding: 10px 12px; background: var(--bg-subtle); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.runtime-box--vault    { display: none; margin-bottom: 12px; }
.runtime-box--vertex   { display: none; margin-top: 12px; margin-bottom: 12px; padding: 12px 14px; }
.runtime-box--oauth    { display: none; }
.runtime-box--diag     { display: none; margin-top: 10px; }
.runtime-box__title    { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.runtime-box__title--gap { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.runtime-box__desc     { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.runtime-box__hint     { font-size: 11px; margin-top: 6px; }

/* Row hint box — 用于 manual timeout/cooldown */
.row-hint-box { padding: 10px 12px; background: var(--bg-subtle); border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; }

/* grid-column full-span hidden sections */
.grid-span-hidden { grid-column: 1 / -1; display: none; }
.grid-span-hidden--diag { grid-column: 1 / -1; display: none; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-subtle); font-size: 12px; line-height: 1.6; }

/* raw JSON details block */
.rawjson-details { border: 1px dashed var(--border); background: var(--bg-subtle); padding: 10px 14px; }
.rawjson-summary { font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.rawjson-summary__main { display: inline-flex; align-items: center; gap: 6px; }
.rawjson-summary__sub  { font-size: 11px; font-weight: 400; color: var(--text-secondary); }
.rawjson-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.rawjson-editor { min-height: 360px; font-family: var(--font-mono); font-size: 12px; width: 100%; background: #0f172a; color: #e2e8f0; border-radius: 6px; padding: 12px; border: 1px solid #1e293b; }
.rawjson-err { display: none; margin-top: 8px; color: var(--error); font-size: 12px; }
.rawjson-wrap { margin-top: 12px; }

/* Probed Model modal */
.probed-modal__head { display: flex; align-items: center; gap: 8px; }
.probed-modal__title { margin: 0; font-size: 15px; }
.probed-modal__panel-head { padding: 12px 16px 8px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.probed-modal__body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.probed-modal__list { display: flex; flex-direction: column; gap: 6px; }

/* Import confirm modal */
.import-preview { line-height: 1.7; }
.import-modes { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.import-mode__label { font-weight: 600; color: var(--text); }

/* Dashboard / overview layout */
.list-models-wrap { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.agent-strip { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; min-height: 74px; }

/* Providers box / agents panel */
.providers-layout { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.providers-box { flex: 1; min-width: 0; padding: 12px 16px; }
.agents-panel { display: contents; }

/* Log filter bar override */
.log-filter-bar { border-bottom: none; margin-bottom: 0; gap: 4px; }

/* Settings form helpers */
.settings-key-row { display: flex; align-items: center; gap: 14px; }
.settings-vault-row { position: relative; }
.settings-vault-token-input { padding-right: 32px; }
.settings-vault-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 2px; color: var(--text-secondary); }
.settings-vault-badge { font-size: 10px; padding: 2px 6px; display: none; }
.settings-schedule-checkbox { font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.settings-schedule-checkbox__input { width: 16px; height: 16px; cursor: pointer; }
.settings-schedule-checkbox__label { font-weight: 600; }
.settings-readonly-input { width: 100%; background: var(--bg-subtle); color: var(--text-secondary); cursor: not-allowed; }

/* OAuth hint inline */
.oauth-provider-hint { margin-top: 8px; font-size: 11px; color: var(--text-secondary); line-height: 1.55; }
.oauth-desc { display: none; margin-top: 6px; font-size: 12px; color: var(--text-secondary); padding: 8px 12px; background: var(--bg-subtle); border-radius: var(--radius-sm); border: 1px solid var(--border); line-height: 1.5; }

/* Provider / Key modal hints */
.form-group--mt-14 { margin-top: 14px; }
.form-label--fs-12  { font-size: 12px; font-weight: 600; }
.form-label--error  { color: var(--error); font-weight: bold; }
.form-label--sub    { font-size: 11px; }
.form-hint--fs-11   { font-size: 11px; margin-top: 6px; }
.form-hint--inline  { font-size: 11px; margin-top: 6px; line-height: 1.4; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.form-hint--proto   { font-size: 11px; margin-top: 6px; min-height: 14px; }
.form-hint--pb-6    { font-size: 12px; padding: 6px 10px; background: var(--bg-subtle); border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* Vertex inline group helpers */
.vertex-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.vertex-title__inner { display: inline-flex; align-items: center; gap: 6px; }
.vertex-url { word-break: break-all; }

/* End-of-form action bars */
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 20px; padding: 16px 0; border-top: 1px solid var(--border); }
.form-actions__probe { display: inline-flex; align-items: center; gap: 4px; }
.form-actions__save  { display: inline-flex; align-items: center; gap: 6px; }

/* Settings misc */
.manual-routing-tip { padding: 10px 12px; background: var(--bg-subtle); border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; }
.settings-row--grid-full { grid-column: 1 / -1; }
.probe-btn-icon { display: inline-flex; align-items: center; gap: 4px; }

/* Misc tiny helpers */
.span-nowrap { white-space: nowrap; }
.span-fs-600 { font-weight: 600; }
.span-warn-mr-4 { margin-right: 4px; }
.span-inline-flex-6 { display: inline-flex; align-items: center; gap: 6px; }
.span-inline-flex-4 { display: inline-flex; align-items: center; gap: 4px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-8  { margin-top: 8px; }

/* Lightweight layout utilities */
.flex { display: flex; }
.flex-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }