:root {
  --ink: #29263b;
  --ink-soft: #504c67;
  --muted: #8c879d;
  --line: rgba(75, 72, 105, 0.12);
  --line-strong: rgba(75, 72, 105, 0.2);
  --accent: #6d5cb5;
  --accent-strong: #584797;
  --accent-soft: #eeeafd;
  --sea: #527d8d;
  --success: #4e866d;
  --danger: #a65858;
  --surface: rgba(255, 255, 255, 0.78);
  --shadow: 0 22px 70px rgba(54, 50, 80, 0.09);
  --serif: "Noto Serif SC", "Songti SC", Georgia, serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 4%, rgba(226, 239, 241, 0.8), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(235, 229, 248, 0.8), transparent 27%),
    linear-gradient(160deg, #f8f8f7, #f1f2f7 55%, #eef3f4);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { border: 0; }
.connections-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px clamp(18px, 4vw, 54px);
  border-bottom: 1px solid var(--line);
  background: rgba(248, 248, 250, 0.78);
  backdrop-filter: blur(20px);
}
.connections-brand { display: flex; align-items: center; gap: 12px; }
.connections-brand > span {
  width: 43px; height: 43px; display: grid; place-items: center;
  border: 1px solid rgba(105, 91, 180, 0.2); border-radius: 15px;
  color: var(--accent); background: rgba(255, 255, 255, 0.75); font-size: 21px;
}
.connections-brand small, .connections-brand strong { display: block; }
.connections-brand small { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.connections-brand strong { margin-top: 2px; font-family: var(--serif); font-size: 19px; letter-spacing: .04em; }
.connections-header nav { display: flex; align-items: center; gap: 5px; }
.connections-header nav a, .connections-header nav button {
  min-height: 38px; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border: 1px solid transparent; border-radius: 12px;
  color: var(--ink-soft); background: transparent; cursor: pointer; font-size: 12px;
}
.connections-header nav a:hover, .connections-header nav button:hover { border-color: var(--line); background: rgba(255,255,255,.7); }
.connections-shell { width: min(1280px, calc(100% - 30px)); margin: 0 auto; padding: 38px 0 60px; }
.connections-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 24px; padding: 0 5px; }
.eyebrow, .panel-heading p { margin: 0; color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.connections-intro h1 { margin: 5px 0 9px; font-family: var(--serif); font-size: clamp(27px, 4vw, 42px); font-weight: 600; }
.connections-intro > div:first-child > p:last-child { max-width: 670px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.security-note { max-width: 310px; display: grid; grid-template-columns: 38px 1fr; gap: 11px; padding: 14px; border: 1px solid rgba(82,125,141,.16); border-radius: 18px; background: rgba(235,244,245,.7); }
.security-note > i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: var(--sea); background: rgba(255,255,255,.72); font-size: 18px; }
.security-note p, .security-note strong, .security-note span { display: block; margin: 0; }
.security-note strong { font-size: 11px; }.security-note span { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.connection-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.connection-kinds article { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 12px; align-items: center; padding: 15px 17px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.56); }
.connection-kinds small,.connection-kinds strong,.connection-kinds p { display: block; margin: 0; }.connection-kinds small { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .13em; }.connection-kinds strong { margin-top: 2px; font-family: var(--serif); font-size: 15px; }.connection-kinds p { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.kind-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; font-size: 21px; }.kind-icon.is-api { color: var(--accent); background: var(--accent-soft); }.kind-icon.is-local { color: var(--sea); background: rgba(225,239,241,.78); }
.connections-grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(340px, .78fr); gap: 16px; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(18px); overflow: hidden; }
.panel-heading { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 21px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 3px 0 0; font-family: var(--serif); font-size: 20px; font-weight: 600; }
.connections-panel { grid-row: span 2; }
.connection-list { min-height: 480px; padding: 12px; }
.connection-card { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 13px; align-items: center; padding: 15px; border: 1px solid transparent; border-radius: 19px; }
.connection-card + .connection-card { margin-top: 5px; }
.connection-card:hover { border-color: var(--line); background: rgba(255,255,255,.65); }
.provider-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.connection-copy { min-width: 0; }.connection-title { display: flex; align-items: center; gap: 8px; }
.connection-title strong { font-size: 13px; }.connection-copy > span, .connection-copy > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-copy > span { margin-top: 3px; color: var(--ink-soft); font-size: 10px; }.connection-copy > small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.connection-copy > .connection-error { color: #a84e57; }
.connection-balance { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 8px; border-radius: 999px; color: var(--sea); background: rgba(82,125,141,.09); font-size: 9px; font-weight: 650; }
.connection-balance.is-error { color: var(--danger); background: rgba(166,88,88,.08); }.connection-balance span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-actions { display: flex; gap: 4px; }.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--muted); background: transparent; cursor: pointer; }
.icon-button:hover { color: var(--accent); background: var(--accent-soft); }.icon-button.is-danger:hover { color: var(--danger); background: rgba(166,88,88,.08); }
.connection-status, .status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; color: var(--muted); background: rgba(83,79,107,.07); font-size: 8px; font-weight: 600; }
.connection-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.connection-status.is-ready { color: var(--success); background: rgba(78,134,109,.1); }.connection-status.is-error { color: var(--danger); background: rgba(166,88,88,.09); }
.connection-form, .assignment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 21px; }
.connection-form label, .assignment-form label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 10px; }
.connection-form input, .connection-form select, .assignment-form input, .assignment-form select, .assignment-form textarea { width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 13px; color: var(--ink); background: rgba(255,255,255,.78); outline: none; }
.assignment-form textarea { min-height: 88px; resize: vertical; line-height: 1.65; }
.connection-form input:focus, .connection-form select:focus, .assignment-form input:focus, .assignment-form select:focus, .assignment-form textarea:focus { border-color: rgba(105,91,180,.46); box-shadow: 0 0 0 3px rgba(105,91,180,.08); }
.connection-form input[readonly], .assignment-form input[readonly] { color: var(--muted); background: rgba(238,238,242,.72); }
.field-wide { grid-column: 1 / -1; }.credential-state { margin: -5px 0 0; color: var(--muted); font-size: 9px; }.credential-state.is-saved { color: var(--success); }
.provider-save-note { display: flex; align-items: center; gap: 7px; margin: -4px 0 0; padding: 9px 11px; border: 1px solid rgba(82,125,141,.13); border-radius: 12px; color: var(--muted); background: rgba(235,244,245,.46); font-size: 9px; line-height: 1.55; }
.provider-catalog-note { margin: -5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.form-section-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 5px; color: var(--ink); }.form-section-label span { font-size: 11px; font-weight: 700; }.form-section-label small { color: var(--muted); font-size: 8px; font-weight: 400; }
.model-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.model-label-row button { padding: 2px 0; color: var(--accent); background: transparent; cursor: pointer; font-size: 9px; }
.model-discovery { display: flex; align-items: center; gap: 6px; margin: -5px 0 0; color: var(--muted); font-size: 9px; }
.compatibility-note { margin: -5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.model-discovery.is-loading { color: var(--sea); }.model-discovery.is-ready { color: var(--success); }.model-discovery.is-error { color: var(--danger); }
.saved-models-field { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 8px; }.keep-model-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--accent); background: rgba(255,255,255,.76); cursor: pointer; }.keep-model-button:hover,.keep-model-button:focus-visible { border-color: rgba(105,91,180,.28); background: var(--accent-soft); outline: none; }.saved-models { min-height: 36px; display: flex; flex-wrap: wrap; gap: 7px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.54); }.saved-models:empty { display: none; }.saved-model-chip { max-width: 100%; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 9px; }.saved-model-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.saved-model-chip button { width: 18px; height: 18px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border-radius: 50%; color: inherit; background: rgba(255,255,255,.66); cursor: pointer; }
.balance-settings { border: 1px solid rgba(82,125,141,.14); border-radius: 16px; background: rgba(235,244,245,.38); overflow: hidden; }.balance-settings > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; color: var(--ink-soft); cursor: pointer; list-style: none; }.balance-settings > summary::-webkit-details-marker { display: none; }.balance-settings > summary > span { display: inline-flex; align-items: center; gap: 8px; }.balance-settings > summary i { color: var(--sea); font-size: 17px; }.balance-settings > summary strong { font-size: 10px; }.balance-settings > summary small { color: var(--muted); font-size: 8px; }.balance-settings[open] > summary { border-bottom: 1px solid rgba(82,125,141,.12); background: rgba(255,255,255,.42); }.balance-settings-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 13px; }.balance-settings-body > label:not(.switch-row) { display: grid; gap: 6px; }.balance-security-note { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 9px 10px; border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.58); font-size: 8px; line-height: 1.55; }.balance-security-note i { margin-top: 1px; color: var(--sea); }
.switch-row { grid-template-columns: auto 1fr !important; align-items: center; cursor: pointer; }.switch-row input { width: 17px; min-height: 17px; accent-color: var(--accent); }.switch-row strong, .switch-row small { display: block; }.switch-row small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.primary-button, .secondary-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: 13px; cursor: pointer; font-size: 11px; }
.primary-button { color: white; background: linear-gradient(145deg,var(--accent),var(--accent-strong)); box-shadow: 0 9px 24px rgba(86,71,159,.18); }.secondary-button { color: var(--ink-soft); border: 1px solid var(--line); background: rgba(255,255,255,.7); }
.primary-button:disabled, .secondary-button:disabled { cursor: wait; opacity: .55; }
.resident-settings-link { grid-column: 1 / -1; display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 18px 21px; }
.resident-settings-link > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; color: var(--accent); background: var(--accent-soft); font-size: 23px; }
.resident-settings-link p,.resident-settings-link h2,.resident-settings-link small { display: block; margin: 0; }.resident-settings-link p { color: var(--accent); font-size: 8px; font-weight: 700; letter-spacing: .14em; }.resident-settings-link h2 { margin-top: 2px; font-family: var(--serif); font-size: 18px; font-weight: 600; }.resident-settings-link small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.assignment-panel { grid-column: 1 / -1; }
.assignment-layout { display: grid; grid-template-columns: minmax(250px,.72fr) minmax(0,1.28fr); min-height: 380px; }
.agent-route-list { padding: 12px; border-right: 1px solid var(--line); }
.agent-route-card { width: 100%; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 12px; border: 1px solid transparent; border-radius: 16px; color: var(--ink); background: transparent; cursor: pointer; text-align: left; }.agent-route-card + .agent-route-card { margin-top: 5px; }.agent-route-card:hover { background: rgba(255,255,255,.6); }.agent-route-card.is-selected { border-color: rgba(105,91,180,.18); background: var(--accent-soft); }.agent-route-card > i { color: var(--muted); }
.route-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--accent-strong); background: rgba(255,255,255,.8); font-family: var(--serif); font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--line); }
.agent-route-copy,.agent-route-copy strong,.agent-route-copy span,.agent-route-copy small { display: block; min-width: 0; }.agent-route-copy strong { font-size: 11px; }.agent-route-copy span { margin-top: 2px; color: var(--ink-soft); font-size: 9px; }.agent-route-copy small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.assignment-form { grid-template-columns: 1fr; align-content: start; }
.route-editor-heading { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }.route-editor-heading .route-avatar { width: 44px; height: 44px; }.route-editor-heading small,.route-editor-heading strong,.route-editor-heading p { display: block; margin: 0; }.route-editor-heading small { color: var(--muted); font-size: 8px; }.route-editor-heading strong { margin-top: 2px; font-family: var(--serif); font-size: 17px; }.route-editor-heading p { margin-top: 3px; color: var(--muted); font-size: 8px; }
.assistant-tabs { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 15px; background: rgba(238,238,243,.58); }
.assistant-tabs button { flex: 1; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 11px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; }
.assistant-tabs button[aria-selected="true"] { color: var(--accent-strong); background: rgba(255,255,255,.9); box-shadow: 0 5px 16px rgba(61,55,91,.07); }
.assistant-pane { display: grid; gap: 14px; }
.assistant-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.assistant-fields label,.assistant-pane > label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 10px; }
.route-mode-note { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); background: rgba(245,245,247,.7); }.route-mode-note > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.72); font-size: 16px; }.route-mode-note p,.route-mode-note strong,.route-mode-note span { display: block; margin: 0; }.route-mode-note strong { color: var(--ink-soft); font-size: 10px; }.route-mode-note span { margin-top: 2px; font-size: 8px; line-height: 1.5; }.route-mode-note.is-local { color: var(--sea); border-color: rgba(82,125,141,.15); background: rgba(235,244,245,.58); }.route-mode-note.is-api { color: var(--accent); border-color: rgba(105,91,180,.14); background: rgba(238,234,253,.48); }
.api-route-fields { display: grid; grid-template-columns: 1fr; gap: 12px; }.api-route-fields .form-section-label { grid-column: 1 / -1; }.api-route-fields label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 10px; }
.fallback-settings { padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(250,250,251,.62); }
.fallback-settings summary { color: var(--ink-soft); cursor: pointer; font-size: 10px; font-weight: 600; }
.fallback-settings label { margin-top: 11px; }
.prompt-intro { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: center; padding: 12px; border: 1px solid rgba(105,91,180,.14); border-radius: 14px; color: var(--accent); background: rgba(238,234,253,.48); }
.prompt-intro > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.72); font-size: 17px; }
.prompt-intro p,.prompt-intro strong,.prompt-intro span { display: block; margin: 0; }.prompt-intro strong { color: var(--ink-soft); font-size: 10px; }.prompt-intro span { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.assistant-save { justify-self: end; }
.assignment-summary { padding: 12px 13px; border: 1px solid rgba(82,125,141,.14); border-radius: 14px; color: var(--muted); background: rgba(235,244,245,.58); font-size: 9px; line-height: 1.6; }
.empty-state { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; }.empty-state i { font-size: 27px; }.empty-state p { max-width: 280px; font-size: 11px; line-height: 1.7; }
.empty-state.is-compact { min-height: 150px; padding: 20px; }.empty-state.is-compact i { font-size: 22px; }.empty-state.is-compact p { margin-bottom: 0; font-size: 9px; }
.connections-toast { position: fixed; z-index: 50; right: 22px; bottom: 22px; max-width: min(380px,calc(100vw - 40px)); padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: 14px; color: var(--ink-soft); background: rgba(255,255,255,.96); box-shadow: 0 18px 48px rgba(45,43,70,.17); font-size: 11px; }.connections-toast.is-error { color: var(--danger); }
@media (max-width: 900px) { .connections-grid { grid-template-columns: 1fr; }.connections-panel { grid-row: auto; }.resident-settings-link { grid-column: 1; }.connections-intro { align-items: stretch; flex-direction: column; }.security-note { max-width: none; } }
@media (max-width: 620px) { .connections-header { min-height: 66px; padding: 9px 13px; }.connections-header nav span { display: none; }.connections-header nav a,.connections-header nav button { width: 36px; justify-content: center; padding: 0; }.connections-shell { width: calc(100% - 16px); padding: 24px 0 42px; }.connections-intro h1 { font-size: 27px; }.connection-kinds { grid-template-columns: 1fr; }.connection-kinds article { padding: 13px; }.panel { border-radius: 20px; }.panel-heading { padding: 15px; }.connection-form { grid-template-columns: 1fr; padding: 15px; }.field-wide { grid-column: 1; }.connection-card { grid-template-columns: 39px minmax(0,1fr); padding: 12px 8px; }.provider-mark { width: 39px; height: 39px; }.connection-actions { grid-column: 2; justify-content: flex-end; }.balance-settings-body { grid-template-columns: 1fr; }.balance-settings > summary small { display: none; }.form-actions { flex-direction: column-reverse; }.form-actions button { width: 100%; }.resident-settings-link { grid-template-columns: 44px minmax(0,1fr); padding: 15px; }.resident-settings-link > span { width: 44px; height: 44px; }.resident-settings-link > a { grid-column: 1 / -1; width: 100%; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* 供应商卡片折叠(兮兮 2026-08-21):默认只显示摘要行,点开看详情 */
.connection-card.is-collapsible { display: block; padding: 6px; }
.connection-summary { width: 100%; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 13px; align-items: center; padding: 9px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 14px; font: inherit; color: inherit; }
.connection-summary:hover { background: rgba(255,255,255,.5); }
.connection-chevron { color: var(--muted); transition: transform .15s ease; }
.connection-card.is-open .connection-chevron { transform: rotate(180deg); }
.connection-detail { padding: 4px 9px 9px 66px; }
.connection-detail > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; }
.connection-detail .connection-actions { margin-top: 8px; }
.connection-models { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; align-items: center; }
.connection-models > small { color: var(--muted); font-size: 9px; margin-right: 2px; }
.connection-models > span { padding: 3px 8px; border-radius: 999px; background: rgba(82,125,141,.08); color: var(--ink-soft); font-size: 9px; }
@media (max-width: 620px) { .connection-detail { padding-left: 9px; } }
.fallback-section { display: grid; gap: 8px; color: var(--ink-soft); font-size: 10px; }
.fallback-section-title { font-weight: 600; }
.fallback-list { display: grid; gap: 8px; }
.fallback-list:empty { display: none; }
.fallback-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fallback-row select, .fallback-row input { flex: 1 1 150px; width: auto; }
.fallback-row .icon-button { flex: 0 0 34px; }