:root {
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  color: #17211e;
  background: #f4f7f6;
  font-synthesis: none;
  letter-spacing: 0;
  --ink: #17211e;
  --muted: #697672;
  --line: #dbe3e0;
  --surface: #ffffff;
  --surface-soft: #f0f4f2;
  --green: #147b61;
  --green-soft: #e2f3ed;
  --blue: #356b93;
  --blue-soft: #e8f1f7;
  --amber: #a26017;
  --amber-soft: #fff1dc;
  --red: #b8473e;
  --red-soft: #fbe9e7;
}

* { box-sizing: border-box; }
html, body, #root { margin: 0; min-width: 320px; min-height: 100%; }
body { min-height: 100vh; background: #f4f7f6; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; letter-spacing: 0; }
button, a, input, select, label { --wails-draggable: no-drag; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 226px minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 226px; background: #17211e; color: #dce7e3; padding: 24px 14px 18px; display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; gap: 11px; align-items: center; padding: 0 10px 25px; }
.brand-mark { width: 38px; height: 38px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: #1b8b6d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); flex: 0 0 auto; }
.brand strong { display: block; font-size: 16px; letter-spacing: 0; color: #fff; }
.brand span { display: block; margin-top: 2px; color: #8fa19b; font-size: 10px; text-transform: uppercase; }
.sidebar nav { display: grid; gap: 4px; }
.sidebar nav button { width: 100%; height: 42px; border: 0; border-radius: 6px; padding: 0 10px; display: grid; grid-template-columns: 20px 1fr auto 15px; gap: 9px; align-items: center; color: #9fb0aa; background: transparent; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.sidebar nav button svg { width: 17px; height: 17px; }
.sidebar nav button:hover { color: #fff; background: rgba(255,255,255,.055); }
.sidebar nav button.active { color: #fff; background: #26342f; box-shadow: inset 3px 0 #29a882; }
.sidebar nav button b { min-width: 22px; padding: 2px 6px; font-size: 11px; text-align: center; border-radius: 10px; background: rgba(255,255,255,.09); }
.nav-arrow { opacity: 0; }
.sidebar nav button.active .nav-arrow { opacity: .7; }
.sidebar-foot { margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; gap: 9px; color: #7fc8b2; }
.sidebar-foot strong, .sidebar-foot span { display: block; }
.sidebar-foot strong { font-size: 11px; color: #c7d8d2; }
.sidebar-foot span { margin-top: 2px; font-size: 9px; color: #74867f; }

.workspace { grid-column: 2; min-width: 0; padding: 0 30px 44px; }
.topbar { height: 88px; margin: 0 -30px; padding: 18px 30px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; --wails-draggable: drag; }
.topbar h1 { margin: 0; font-size: 20px; font-weight: 700; }
.topbar p { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.endpoint { height: 36px; max-width: 310px; border: 1px solid var(--line); background: var(--surface-soft); border-radius: 6px; padding: 0 10px; display: flex; align-items: center; gap: 7px; color: #40504b; font-family: Consolas, monospace; font-size: 11px; cursor: pointer; overflow: hidden; white-space: nowrap; }
.endpoint:hover { border-color: #aebdb8; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: #20a879; box-shadow: 0 0 0 3px #d7eee6; flex: 0 0 auto; }
.icon-button, .row-actions button, .drawer-head button, .connection-strip button, .secret-box button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 6px; background: #fff; display: inline-grid; place-items: center; cursor: pointer; }
.icon-button:hover, .row-actions button:hover { background: var(--surface-soft); border-color: #bac8c3; }
.primary-button, .secondary-button { height: 36px; border-radius: 6px; padding: 0 13px; display: inline-flex; gap: 7px; align-items: center; justify-content: center; border: 1px solid transparent; cursor: pointer; font-size: 12px; font-weight: 650; white-space: nowrap; }
.primary-button { background: #147b61; color: #fff; border-color: #147b61; }
.primary-button:hover { background: #0e6952; }
.primary-button:disabled { opacity: .6; cursor: wait; }
.secondary-button { color: #364640; background: #fff; border-color: var(--line); }
.secondary-button:hover { background: var(--surface-soft); }
.secondary-button:disabled { opacity: .5; cursor: not-allowed; }
.full { width: 100%; }

.error-banner { margin: 16px 0 -4px; min-height: 38px; padding: 8px 11px; display: flex; gap: 8px; align-items: center; border: 1px solid #efc4bf; background: var(--red-soft); color: #8f342d; border-radius: 6px; font-size: 12px; }
.error-banner span { flex: 1; }
.error-banner button { border: 0; background: none; color: inherit; cursor: pointer; }

.metrics-band { margin: 24px 0 28px; min-height: 100px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; display: grid; grid-template-columns: repeat(4, 1fr); }
.metric { display: flex; align-items: center; gap: 13px; padding: 17px 20px; border-right: 1px solid var(--line); min-width: 0; }
.metric:last-child { border-right: 0; }
.metric-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; background: var(--blue-soft); color: var(--blue); }
.metric-icon svg { width: 18px; }
.metric.good .metric-icon { background: var(--green-soft); color: var(--green); }
.metric.warn .metric-icon { background: var(--amber-soft); color: var(--amber); }
.metric span, .metric strong, .metric small { display: block; }
.metric span { color: var(--muted); font-size: 10px; }
.metric strong { margin-top: 3px; font-size: 21px; color: var(--ink); }
.metric small { margin-top: 2px; font-size: 9px; color: #8b9793; }

.pool-section, .content-section { width: 100%; }
.content-section { padding-top: 27px; }
.section-head { min-height: 42px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 13px; }
.section-head h2 { margin: 0; font-size: 15px; }
.section-head span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.section-actions { display: flex; align-items: center; gap: 8px; }
.bulk-test-actions { display: flex; align-items: center; gap: 8px; }
.bulk-test-actions > .model-picker { width: 240px; }
.bulk-test-actions input { height: 36px; }
.probe-actions { display: flex; align-items: center; gap: 14px; }
.auto-test-times { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 3px 8px; color: var(--muted); white-space: nowrap; }
.auto-test-times svg { grid-row: 1 / 3; color: #7d8b86; }
.auto-test-times span { grid-column: 2 / 4; margin: 0; font-size: 8px; }
.auto-test-times b { color: #55645f; font-size: 9px; font-weight: 650; }
.filter-row { display: flex; gap: 4px; margin-bottom: 10px; overflow-x: auto; }
.filter-row button { height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; white-space: nowrap; }
.filter-row button:hover { background: #eaf0ee; }
.filter-row button.active { background: #fff; color: #1e5f4e; border-color: var(--line); box-shadow: 0 1px 2px rgba(24,42,35,.04); }

.table-wrap { width: 100%; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
table { width: 100%; min-width: 990px; border-collapse: collapse; table-layout: fixed; }
th { height: 38px; padding: 0 13px; background: #f7f9f8; border-bottom: 1px solid var(--line); color: #78847f; font-size: 9px; font-weight: 650; text-align: left; text-transform: uppercase; }
td { height: 72px; padding: 9px 13px; border-bottom: 1px solid #e7ecea; color: #34413d; font-size: 11px; vertical-align: middle; overflow: hidden; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcfc; }
.disabled-row { opacity: .54; }
th:nth-child(1) { width: 25%; } th:nth-child(2) { width: 12%; } th:nth-child(3) { width: 10%; } th:nth-child(4) { width: 13%; } th:nth-child(5) { width: 12%; } th:nth-child(6) { width: 15%; } th:nth-child(7) { width: 13%; }
td strong, td small { display: block; }
td small { margin-top: 5px; color: #8b9793; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upstream-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.provider-icon { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 6px; display: grid; place-items: center; background: #e6eef3; color: #315e7a; font-size: 9px; font-weight: 750; }
.provider-icon.sub2api { background: #e1f1ec; color: #0f7458; }
.provider-icon.new-api { background: #f0e9f5; color: #765289; }
.provider-icon.anthropic { background: #f6ece5; color: #8a5639; }
.upstream-name > div:last-child { min-width: 0; }
.upstream-name strong { color: var(--ink); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upstream-name a { margin-top: 4px; color: #72807b; display: flex; align-items: center; gap: 3px; text-decoration: none; font-size: 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.upstream-name a:hover { color: var(--blue); }
.ratio { display: inline !important; color: var(--ink); font-size: 12px; }
.rate-breakdown { color: #65736e !important; }
.tier { margin-left: 6px; padding: 2px 5px; border-radius: 4px; font-size: 8px; font-weight: 650; white-space: nowrap; }
.tier.economy { background: var(--green-soft); color: var(--green); }
.tier.balanced { background: var(--blue-soft); color: var(--blue); }
.tier.premium { background: var(--amber-soft); color: var(--amber); }
.pool-tags { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.pool-tag { padding: 2px 5px; border-radius: 4px; background: var(--green-soft); color: var(--green); font-size: 8px; font-weight: 650; white-space: nowrap; }
.pool-tag.muted { background: #edf1f0; color: #78857f; }
.success-cell { display: flex; align-items: center; gap: 7px; }
.success-cell strong { width: 29px; font-size: 10px; }
.bar { width: 52px; height: 4px; border-radius: 4px; background: #e4ebe8; overflow: hidden; }
.bar i { display: block; height: 100%; background: #2a9876; }
.usage-cell { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.usage-cell:hover strong { color: var(--green); }
.usage-cell strong { color: var(--ink); font-size: 11px; }
.usage-cell small { margin-top: 4px; color: var(--muted); }
.concurrency-cell { min-width: 126px; display: grid; grid-template-columns: 8px auto; align-items: center; column-gap: 5px; color: #7b8984; }
.concurrency-cell i { grid-row: 1 / 3; width: 7px; height: 7px; border-radius: 50%; background: #a4afab; box-shadow: 0 0 0 3px #edf1f0; }
.concurrency-cell strong { color: #586761; font-size: 12px; line-height: 1; }
.concurrency-cell span { margin-top: 3px; font-size: 8px; white-space: nowrap; }
.concurrency-cell.active { color: var(--green); }
.concurrency-cell.active i { background: #20a879; box-shadow: 0 0 0 3px #dff2eb; }
.concurrency-cell.active strong { color: var(--green); }
.latency { display: grid; gap: 5px; }
.latency span { display: flex; align-items: center; gap: 5px; white-space: nowrap; color: #4f5f59; font-size: 9px; }
.latency svg { color: #84918c; }
.latency b { margin-left: 2px; padding: 2px 4px; border-radius: 4px; background: #edf1f0; color: #6e7b76; font-size: 8px; font-weight: 650; }
.conversation-latency.quality b { background: var(--green-soft); color: var(--green); }
.conversation-latency.usable b { background: var(--amber-soft); color: var(--amber); }
.conversation-latency.slow b { background: var(--red-soft); color: var(--red); }
.conversation-latency.circuit_open b { background: var(--red-soft); color: var(--red); }
.status { border: 0; background: transparent; padding: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 650; cursor: pointer; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #8d9995; box-shadow: 0 0 0 3px #eef1f0; }
.status.healthy { color: var(--green); }.status.healthy i { background: #22a67d; box-shadow: 0 0 0 3px var(--green-soft); }
.status.degraded { color: var(--amber); }.status.degraded i { background: #d49a32; box-shadow: 0 0 0 3px var(--amber-soft); }
.status.unknown { color: #71807b; }.status.unknown i { background: #8d9995; box-shadow: 0 0 0 3px #eef1f0; }
.status.circuit_open { color: var(--red); }.status.circuit_open i { background: #d4584f; box-shadow: 0 0 0 3px var(--red-soft); }
.last-error { max-width: 140px; color: #a64b43 !important; }
.row-actions { display: flex; justify-content: flex-end; gap: 4px; }
.row-actions button { width: 28px; height: 28px; border-color: transparent; background: transparent; color: #71807b; }
.row-actions button.danger:hover { color: var(--red); background: var(--red-soft); }
.url-link { color: #315f7e; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-size: 10px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.url-link:hover { color: #174866; text-decoration: underline; }
.endpoint-cell { min-width: 0; }
.endpoint-cell code { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.endpoint-cell span { margin-top: 5px; display: flex; align-items: center; gap: 4px; color: #83908b; font-size: 8px; }
.platform-status { display: inline-flex; align-items: center; gap: 6px; color: #78857f; font-size: 10px; }
.platform-status i { width: 7px; height: 7px; border-radius: 50%; background: #9ba6a2; }
.platform-status.enabled { color: var(--green); }
.platform-status.enabled i { background: #23a67e; box-shadow: 0 0 0 3px var(--green-soft); }
.compact-toggle { min-width: 68px; padding: 0; display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: #74817c; cursor: pointer; }
.compact-toggle:disabled { opacity: .55; cursor: wait; }
.compact-toggle > span { width: 30px; height: 17px; flex: 0 0 auto; padding: 2px; border-radius: 10px; background: #c5d0cc; transition: background .15s; }
.compact-toggle > span i { display: block; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.compact-toggle > b { font-size: 9px; font-weight: 650; white-space: nowrap; }
.compact-toggle.on { color: var(--green); }
.compact-toggle.on > span { background: #1b8b6d; }
.compact-toggle.on > span i { transform: translateX(13px); }
.platform-table { min-width: 1280px; }
.platform-table th:nth-child(1) { width: 15%; }
.platform-table th:nth-child(2) { width: 11%; }
.platform-table th:nth-child(3) { width: 19%; }
.platform-table th:nth-child(4) { width: 10%; }
.platform-table th:nth-child(5) { width: 10%; }
.platform-table th:nth-child(6) { width: 8%; }
.platform-table th:nth-child(7) { width: 9%; }
.platform-table th:nth-child(8) { width: 18%; }
.platform-usage-band { margin-bottom: 13px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f7faf9; }
.platform-usage-band > div { min-width: 0; padding: 13px 16px; border-right: 1px solid var(--line); }
.platform-usage-band > div:last-child { border-right: 0; }
.platform-usage-band span, .platform-usage-band strong, .platform-usage-band small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-usage-band span { color: var(--muted); font-size: 9px; }
.platform-usage-band strong { margin-top: 4px; color: var(--ink); font-size: 18px; }
.platform-usage-band small { margin-top: 3px; color: #87938f; font-size: 8px; }
.platform-balance-button { max-width: 100%; padding: 4px 6px; border: 0; border-radius: 4px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.platform-balance-button:hover { background: var(--green-soft); }
.platform-balance-button strong, .platform-balance-button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-balance-button small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.pool-section table { min-width: 1240px; }
.key-table { min-width: 1460px; }
.key-table th:nth-child(1) { width: 42px; }
.key-table th:nth-child(2) { width: 145px; }
.key-table th:nth-child(3) { width: 130px; }
.key-table th:nth-child(4) { width: 120px; }
.key-table th:nth-child(5) { width: 170px; }
.key-table th:nth-child(6) { width: 85px; }
.key-table th:nth-child(7) { width: 130px; }
.key-table th:nth-child(8) { width: 85px; }
.key-table th:nth-child(9) { width: 145px; }
.key-table th:nth-child(10) { width: 95px; }
.key-table th:nth-child(11) { width: 210px; }
.key-table input[type="checkbox"] { width: 16px; height: 16px; padding: 0; accent-color: var(--green); cursor: pointer; }
.key-table .select-col { text-align: center; }
.key-table td:first-child { text-align: center; }
.empty-state { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #84918c; }
.empty-state svg { margin-bottom: 12px; color: #9eaaa6; }
.empty-state strong { color: #43524d; font-size: 12px; }
.empty-state span { margin-top: 5px; font-size: 10px; }

.connection-strip { height: 55px; margin: 0 0 14px; padding: 8px 10px 8px 14px; border: 1px solid var(--line); border-radius: 7px; background: #eaf1ef; display: flex; align-items: center; gap: 10px; }
.connection-strip > div { min-width: 0; flex: 1; }
.connection-strip span { display: block; color: #71807b; font-size: 8px; text-transform: uppercase; }
.connection-strip code { display: block; margin-top: 4px; color: #214f42; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
code { padding: 2px 5px; border-radius: 3px; background: #edf2f0; color: #42514c; font-family: Consolas, monospace; font-size: 10px; }
.policy, .request-result { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 4px; background: var(--blue-soft); color: var(--blue); font-size: 9px; }
.policy.bound { background: var(--green-soft); color: var(--green); }
.request-result.ok { background: var(--green-soft); color: var(--green); }
.request-result.fail { background: var(--red-soft); color: var(--red); }

.pool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pool-range-warning { min-height: 44px; margin: 0 0 12px; padding: 8px 9px 8px 11px; display: flex; align-items: center; gap: 9px; border: 1px solid #e8c98f; border-radius: 6px; background: #fff8e8; color: #76551e; font-size: 10px; line-height: 1.5; }
.pool-range-warning > span { flex: 1; }
.pool-range-warning .secondary-button { flex: none; height: 30px; }
.pool-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.pool-card.disabled { opacity: .62; background: #f5f7f6; }
.pool-card-head { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.pool-card-icon { width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.pool-card-head strong, .pool-card-head span { display: block; }
.pool-card-head strong { font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pool-card-head > div:nth-child(2) span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.pool-state { padding: 3px 6px; border-radius: 4px; background: #edf1f0; color: #71807b; font-size: 8px; }
.pool-state.enabled { background: var(--green-soft); color: var(--green); }
.pool-card > p { min-height: 30px; margin: 14px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.pool-card-stats { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--line); }
.pool-card-stats > div { padding: 11px 0; }
.pool-card-stats > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.pool-card-stats span, .pool-card-stats strong { display: block; }
.pool-card-stats span { color: var(--muted); font-size: 8px; }
.pool-card-stats strong { margin-top: 3px; font-size: 15px; }
.pool-card-actions { margin-top: 12px; display: flex; justify-content: flex-end; gap: 6px; }
.pool-card-actions .icon-button.danger:hover { color: var(--red); background: var(--red-soft); border-color: #efcbc8; }
.key-pool-section { padding-top: 24px; }
.filter-row.compact { margin: 0; max-width: 55%; }
.assignment-bar { min-height: 52px; margin-bottom: 10px; padding: 7px 9px 7px 13px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 7px; background: #edf3f1; }
.assignment-bar > span { margin-right: auto; color: #5e6d68; font-size: 10px; white-space: nowrap; }
.assignment-bar > span strong { color: var(--ink); }
.assignment-bar select { width: min(280px, 30vw); height: 36px; background: #fff; }
.platform-detail-head > div { min-width: 0; }
.platform-detail-head > div > span { display: flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.back-button { margin: 0 0 9px; padding: 0; border: 0; background: transparent; color: var(--green); display: inline-flex; align-items: center; gap: 5px; font-size: 10px; cursor: pointer; }
.back-button:hover { color: #0d5e49; }

.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(15,27,23,.42); display: flex; justify-content: flex-end; --wails-draggable: no-drag; }
.drawer { width: min(500px, 100vw); height: 100%; overflow: auto; background: #fff; box-shadow: -12px 0 34px rgba(15,27,23,.14); }
.drawer-head { height: 82px; padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.drawer-head h2, .dialog h2 { margin: 0; font-size: 17px; }
.drawer-head p, .dialog p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.drawer-head button { border: 0; }
.drawer form { padding: 20px 22px; }
label { display: block; margin-bottom: 15px; }
label > span { display: block; margin-bottom: 6px; color: #53615c; font-size: 10px; font-weight: 650; }
input, select { width: 100%; height: 38px; border: 1px solid #ccd7d3; border-radius: 5px; background: #fff; color: var(--ink); padding: 0 10px; outline: none; font-size: 11px; }
textarea { width: 100%; min-height: 58px; resize: vertical; border: 1px solid #ccd7d3; border-radius: 5px; background: #fff; color: var(--ink); padding: 9px 10px; outline: none; font: inherit; font-size: 11px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: #348a70; box-shadow: 0 0 0 3px #e2f1ec; }
input::placeholder { color: #a4afab; }
.field-hint { display: block; margin-top: 5px; color: #84918c; font-size: 9px; }
.pool-range-hint { display: block; margin: -7px 0 15px; color: #65736e; font-size: 9px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-divider { height: 26px; margin: 4px 0 14px; border-top: 1px solid var(--line); position: relative; }
.form-divider span { position: absolute; top: -7px; left: 0; padding-right: 8px; background: #fff; color: #82908b; font-size: 9px; }
.number-input { display: flex; align-items: center; }
.number-input input { border-radius: 5px 0 0 5px; }
.number-input b { height: 38px; width: 36px; display: grid; place-items: center; border: 1px solid #ccd7d3; border-left: 0; border-radius: 0 5px 5px 0; background: var(--surface-soft); font-size: 10px; }
.toggle-row { min-height: 45px; display: flex; justify-content: space-between; align-items: center; }
.toggle-row span, .toggle-row small { display: block; }
.toggle-row span { margin: 0; }
.toggle-row small { margin-top: 4px; color: #8b9793; font-size: 9px; }
.toggle-row input { appearance: none; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 11px; background: #c5d0cc; position: relative; cursor: pointer; }
.toggle-row input::after { content: ""; position: absolute; width: 16px; height: 16px; top: 2px; left: 2px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle-row input:checked { background: #1b8b6d; }
.toggle-row input:checked::after { left: 18px; }
.drawer-actions { position: sticky; bottom: -20px; margin: 25px -22px -20px; padding: 13px 22px; display: flex; justify-content: flex-end; gap: 8px; background: #fff; border-top: 1px solid var(--line); }

.key-manager { width: min(620px, 100vw); }
.key-manager-body { padding: 20px 22px 24px; }
.inline-error { min-height: 38px; margin-bottom: 14px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid #efc4bf; border-radius: 6px; background: var(--red-soft); color: #8f342d; font-size: 10px; }
.key-manager-toolbar, .manual-entry, .remote-create > div:first-child { display: flex; align-items: center; gap: 10px; }
.key-manager-toolbar { margin-bottom: 10px; }
.key-manager-toolbar > div, .manual-entry > div, .remote-create > div:first-child { min-width: 0; flex: 1; }
.key-manager-toolbar strong, .key-manager-toolbar span, .manual-entry strong, .manual-entry span, .remote-create strong, .remote-create span { display: block; }
.key-manager-toolbar strong, .manual-entry strong, .remote-create strong { color: var(--ink); font-size: 11px; }
.key-manager-toolbar span, .manual-entry span, .remote-create span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.manager-loading, .manager-empty { min-height: 176px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1px dashed #d5dfdb; border-radius: 6px; color: #7b8883; font-size: 10px; }
.interactive-login { padding: 16px; border: 1px solid #d7dfdc; border-radius: 6px; background: #f8faf9; }
.interactive-login-head { margin-bottom: 14px; display: flex; align-items: flex-start; gap: 10px; }
.interactive-login-head > svg { flex: 0 0 auto; margin-top: 1px; color: var(--green); }
.interactive-login-head strong, .interactive-login-head span { display: block; }
.interactive-login-head strong { color: var(--ink); font-size: 12px; }
.interactive-login-head span { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.interactive-login > a { width: 100%; justify-content: center; text-decoration: none; }
.interactive-login label { margin-top: 12px; }
.interactive-login > button { width: 100%; margin-top: 4px; justify-content: center; }
.token-help { margin-top: 12px; padding: 9px 10px; border-left: 3px solid #8dbcae; background: #eef4f2; color: #60706a; font-size: 9px; line-height: 1.6; }
.token-help code { color: #286652; }
.discovered-list { max-height: 330px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.discovered-key { min-height: 62px; margin: 0; padding: 9px 11px; display: grid; grid-template-columns: minmax(0, 1fr) 132px 48px 68px; align-items: center; gap: 10px; border-bottom: 1px solid #e8edeb; }
.discovered-key:last-child { border-bottom: 0; }
.discovered-key:hover { background: #f8faf9; }
.discovered-key.imported { background: #f8faf9; }
.discovered-key > div { min-width: 0; }
.discovered-key strong { display: block; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.discovered-key code { display: inline-block; max-width: 100%; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #39715f; }
.discovered-key > b { padding: 3px 5px; border-radius: 4px; background: var(--green-soft); color: var(--green); font-size: 8px; text-align: center; }
.discovered-key.imported > b { background: #edf1f0; color: #73807b; }
.discovered-ratio { color: #52615c; font-size: 10px; text-align: right; white-space: nowrap; }
.discovered-ratio strong, .discovered-ratio small { display: block; }
.discovered-ratio strong { color: var(--ink); font-size: 11px; }
.discovered-ratio small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.manager-import-bar { min-height: 54px; padding: 9px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.manager-import-bar > span { color: var(--muted); font-size: 9px; }
.remote-create, .manual-entry { margin-top: 15px; padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: #f8faf9; }
.remote-create > div:last-child { margin-top: 11px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.remote-create label { margin: 0; }
.manual-entry { display: flex; align-items: center; gap: 12px; }

.overlay:has(.dialog) { justify-content: center; align-items: center; padding: 16px; }
.dialog { width: min(420px, 100%); padding: 25px; border-radius: 8px; background: #fff; box-shadow: 0 20px 60px rgba(15,27,23,.25); text-align: center; }
.dialog-icon { width: 42px; height: 42px; margin: 0 auto 13px; border-radius: 7px; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }
.dialog-icon svg { width: 20px; }
.dialog form { margin-top: 19px; text-align: left; }
.dialog-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 8px; }
.secret-box { min-height: 45px; margin: 18px 0; padding: 7px 7px 7px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid #b8d9ce; border-radius: 6px; background: #eef8f4; text-align: left; }
.secret-box code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: none; color: #155d49; }
.secret-box button { flex: 0 0 auto; }
.secret-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.secret-actions a { text-decoration: none; }

.test-overlay { justify-content: center; align-items: center; padding: 16px; }
.conversation-test { width: min(620px, 100%); max-height: calc(100vh - 32px); padding: 0; overflow: auto; text-align: left; }
.test-head { min-height: 72px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.test-head h2 { margin: 0; font-size: 17px; }
.test-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.test-route { min-height: 68px; margin: 16px 20px 0; padding: 10px 12px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 6px; background: #f7f9f8; }
.test-route > div:nth-child(2) { min-width: 0; }
.test-route strong, .test-route span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.test-route strong { font-size: 11px; }
.test-route span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.test-state { padding: 4px 7px; border-radius: 4px; background: #edf1f0; color: #6f7d78; font-size: 9px; }
.test-state.running { background: var(--blue-soft); color: var(--blue); }
.test-state.success { background: var(--green-soft); color: var(--green); }
.test-state.error { background: var(--red-soft); color: var(--red); }
.test-form { padding: 16px 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.test-form label:last-child { grid-column: 1 / -1; }
.model-control { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 6px; }
.model-control .icon-button { width: 36px; height: 36px; border: 1px solid var(--line); background: #fff; }
.model-picker { position: relative; min-width: 0; text-align: left; }
.model-picker-control { position: relative; }
.model-picker-control input { padding-right: 35px; min-width: 0; }
.model-picker-toggle { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 32px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; }
.model-picker-popup { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; width: max(100%, 300px); max-width: calc(100vw - 70px); background: #fff; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 10px 30px #142e2426; overflow: hidden; }
.model-picker-caption { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 10px; }
.model-picker-caption span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.model-picker-popup [role="listbox"] { max-height: 270px; overflow: auto; }
.model-picker-popup [role="option"] { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px; border: 0; border-radius: 0; background: #fff; color: var(--ink); text-align: left; font-size: 11px; }
.model-picker-popup [role="option"]:hover, .model-picker-popup [role="option"].highlighted { background: #edf6f1; }
.model-picker-popup [role="option"] > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.model-picker-popup [role="option"] small { flex-shrink: 0; color: var(--muted); font-size: 9px; }
.model-picker-empty { padding: 14px 10px; color: var(--muted); font-size: 10px; }
.test-model-field > span { display: block; margin-bottom: 7px; color: var(--ink); font-size: 10px; font-weight: 600; }
.test-model-field { margin-bottom: 14px; }
.model-test-results { margin: 0 20px 12px; border: 1px solid var(--line); border-radius: 6px; max-height: 290px; overflow: auto; }
.model-test-summary { padding: 10px 12px; background: #f7f9f8; font-size: 10px; position: sticky; top: 0; }
.model-test-summary span { display: block; margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.model-test-result { padding: 10px 12px; border-top: 1px solid var(--line); font-size: 10px; }
.model-test-result-head { display: flex; justify-content: space-between; gap: 10px; }
.model-test-result-head code { overflow-wrap: anywhere; }
.model-test-result-head b { flex-shrink: 0; color: var(--muted); }
.model-test-result.success b { color: var(--green); }
.model-test-result.error b, .model-test-error { color: var(--red); }
.model-test-result.running b { color: var(--blue); }
.model-test-metrics { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; color: var(--muted); }
.model-test-error { margin: 7px 0 0; overflow-wrap: anywhere; }
.model-test-result details { margin-top: 7px; }
.model-test-result summary { cursor: pointer; color: var(--green); }
.model-test-result pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; max-height: 160px; overflow: auto; }
.model-test-results + .test-console { min-height: 70px; max-height: 120px; }
.test-latencies { min-height: 43px; padding: 0 20px 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.test-latencies span { min-width: 0; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }
.test-latencies svg { color: #6e8d83; }
.test-latencies strong { color: var(--ink); white-space: nowrap; }
.test-console { min-height: 150px; max-height: 260px; margin: 0 20px; overflow: auto; border-radius: 6px; background: #111d2e; color: #d8e3ef; font: 10px/1.65 Consolas, monospace; }
.test-log { padding: 13px 14px; }
.test-log span { display: block; }
.test-log span::before { content: "✓"; margin-right: 7px; color: #31c995; }
.test-log .testing-line::before { content: "…"; color: #6fb8ed; }
.test-log .error-line { color: #ffd8d4; }
.test-log .error-line::before { content: "×"; color: #ff7e74; }
.test-response { padding: 11px 14px 13px; border-top: 1px solid #314055; }
.test-response b { color: #72d5b1; font-size: 9px; }
.test-response pre { margin: 6px 0 0; color: #f1f5f9; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.conversation-test > .dialog-actions { position: sticky; bottom: 0; z-index: 2; margin: 0; padding: 15px 20px 18px; border-top: 1px solid var(--line); background: #fff; flex-wrap: wrap; }
.settings-dialog { max-height: calc(100vh - 32px); overflow: auto; }
.settings-dialog .model-setting { grid-column: 1 / -1; }
.settings-toggle { min-height: 58px; grid-column: 1 / -1; padding: 10px 12px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.settings-toggle > div > span, .settings-toggle > div > small { display: block; }
.settings-toggle > div > span { color: var(--ink); font-size: 10px; font-weight: 650; }
.settings-toggle > div > small { margin-top: 4px; color: var(--muted); font-size: 9px; }

.update-overlay { justify-content: center; align-items: center; padding: 16px; }
.update-dialog { width: min(620px, 100%); max-height: calc(100vh - 32px); padding: 0; overflow: auto; text-align: left; }
.update-error { margin: 16px 20px 0; }
.update-current { min-height: 78px; padding: 16px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.update-current > svg { flex: 0 0 auto; color: var(--green); }
.update-current span, .update-current strong, .update-current small { display: block; }
.update-current span { color: var(--muted); font-size: 9px; }
.update-current strong { margin-top: 4px; color: var(--ink); font-size: 16px; }
.update-current small { margin-top: 3px; color: #87938f; font-size: 9px; }
.update-upload, .staged-update { padding: 18px 20px 20px; }
.update-upload .dialog-actions { margin-bottom: 0; }
.file-input { height: auto; min-height: 42px; padding: 7px; }
.file-input::file-selector-button { height: 27px; margin-right: 9px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: #40504b; cursor: pointer; }
.update-section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.update-section-title strong, .update-section-title span { display: block; }
.update-section-title strong { color: var(--ink); font-size: 14px; }
.update-section-title span { margin-top: 4px; color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.update-section-title b { padding: 4px 7px; border-radius: 4px; background: var(--green-soft); color: var(--green); font-size: 9px; white-space: nowrap; }
.staged-update dl { margin: 17px 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.staged-update dl > div { min-width: 0; padding: 11px 0; }
.staged-update dt { color: var(--muted); font-size: 9px; }
.staged-update dd { margin: 4px 0 0; overflow: hidden; color: var(--ink); font: 10px Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.update-actions { display: flex; justify-content: flex-end; gap: 8px; }
.restart-state { min-height: 250px; padding: 45px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.restart-state > svg { color: var(--green); }
.restart-state h2 { margin: 17px 0 0; }
.restart-state p { max-width: 390px; margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; text-align: center; }

.stats-overlay { justify-content: center; align-items: center; padding: 16px; }
.key-stats-dialog { width: min(780px, 100%); max-height: calc(100vh - 32px); padding: 0; overflow: auto; text-align: left; }
.stats-loading { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 10px; }
.stats-error { margin: 18px 20px; }
.stats-live { min-height: 42px; padding: 10px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stats-live span { display: inline-flex; align-items: center; gap: 7px; color: #71807b; font-size: 10px; }
.stats-live span i { width: 7px; height: 7px; border-radius: 50%; background: #9ba6a2; }
.stats-live span.active { color: var(--green); font-weight: 650; }
.stats-live span.active i { background: #20a879; box-shadow: 0 0 0 3px #dff2eb; }
.stats-live small { color: var(--muted); font-size: 9px; }
.stats-period { padding: 10px 20px 0; display: flex; gap: 4px; }
.stats-period button { min-width: 52px; height: 28px; padding: 0 12px; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; font-size: 9px; }
.stats-period button.active { border-color: #a8d8c8; background: #eaf6f1; color: #147758; font-weight: 700; }
.stats-summary { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.stats-summary > div { min-width: 0; padding: 16px 18px; border-right: 1px solid var(--line); }
.stats-summary > div:last-child { border-right: 0; }
.stats-summary span, .stats-summary strong, .stats-summary small { display: block; }
.stats-summary span { color: var(--muted); font-size: 9px; }
.stats-summary strong { margin-top: 5px; color: var(--ink); font-size: 19px; }
.stats-summary small { margin-top: 4px; overflow: hidden; color: #87938f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.stats-chart, .stats-daily { padding: 16px 20px 0; }
.stats-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stats-section-title strong { font-size: 11px; }
.stats-section-title span { color: var(--muted); font-size: 8px; }
.usage-chart { height: 112px; margin-top: 11px; padding: 8px 4px 0; display: grid; grid-template-columns: repeat(30, minmax(3px, 1fr)); align-items: end; gap: 3px; border-bottom: 1px solid #cad5d1; background: linear-gradient(to bottom, transparent 49%, #edf1f0 50%, transparent 51%); }
.usage-bar-slot { height: 100%; display: flex; align-items: flex-end; }
.usage-bar-slot i { width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; background: #2b8f72; }
.stats-table-wrap { max-height: 230px; margin-top: 10px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.stats-table-wrap table { min-width: 560px; }
.stats-table-wrap th { position: sticky; top: 0; z-index: 1; }
.stats-table-wrap td { height: 38px; }
.key-stats-dialog > .dialog-actions { margin: 0; padding: 15px 20px 18px; }

.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: #e9efed; }
.login-screen form { width: min(380px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 12px 35px rgba(22,41,34,.08); }
.login-screen .brand-mark { margin-bottom: 18px; }
.login-screen h1 { margin: 0; font-size: 22px; }
.login-screen p { margin: 6px 0 22px; color: var(--muted); font-size: 11px; }

.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 72px minmax(0,1fr); }
  .sidebar { width: 72px; padding-inline: 10px; }
  .brand { padding-inline: 7px; }
  .brand > div:last-child, .sidebar nav button span, .sidebar nav button b, .sidebar-foot div, .nav-arrow { display: none; }
  .sidebar nav button { display: grid; grid-template-columns: 1fr; place-items: center; padding: 0; }
  .sidebar-foot { justify-content: center; }
  .workspace { grid-column: 2; padding-inline: 20px; }
  .topbar { margin-inline: -20px; padding-inline: 20px; }
  .metrics-band { grid-template-columns: 1fr 1fr; }
  .pool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assignment-bar { flex-wrap: wrap; }
  .assignment-bar > span { width: 100%; }
  .assignment-bar select { width: min(360px, 100%); flex: 1; }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 720px) {
  .app-shell { display: block; padding-bottom: 58px; }
  .sidebar { position: fixed; inset: auto 0 0; width: 100%; height: 58px; padding: 6px 10px; flex-direction: row; align-items: center; z-index: 50; }
  .brand, .sidebar-foot { display: none; }
  .sidebar nav { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
  .sidebar nav button { height: 46px; display: flex; flex-direction: column; justify-content: center; gap: 2px; font-size: 8px; }
  .sidebar nav button span { display: block; }
  .workspace { padding: 0 12px 28px; }
  .topbar { height: auto; min-height: 78px; margin: 0 -12px; padding: 12px; gap: 10px; align-items: flex-start; }
  .topbar h1 { font-size: 17px; }
  .topbar p { display: none; }
  .endpoint { display: none; }
  .primary-button { padding-inline: 10px; }
  .top-actions .primary-button { font-size: 0; width: 36px; padding: 0; }
  .metrics-band { margin: 14px 0 21px; grid-template-columns: 1fr 1fr; }
  .metric { padding: 12px; gap: 9px; }
  .metric-icon { width: 31px; height: 31px; }
  .metric strong { font-size: 17px; }
  .section-head { align-items: center; }
  .section-head span { max-width: 220px; }
  .content-section > .section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .platform-usage-band { grid-template-columns: 1fr 1fr; }
  .platform-usage-band > div:nth-child(2) { border-right: 0; }
  .platform-usage-band > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section-actions { width: 100%; }
  .section-actions > * { flex: 1; }
  .pool-section .section-head { align-items: flex-start; flex-direction: column; }
  .probe-actions { width: 100%; align-items: flex-start; flex-direction: column; gap: 8px; }
  .bulk-test-actions { width: 100%; }
  .bulk-test-actions > .model-picker { min-width: 0; flex: 1; }
  .table-wrap { border-radius: 5px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .pool-grid { grid-template-columns: 1fr; }
  .pool-range-warning { align-items: flex-start; flex-wrap: wrap; }
  .pool-range-warning .secondary-button { width: 100%; }
  .filter-row.compact { max-width: 100%; width: 100%; }
  .key-pool-section .section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .assignment-bar { align-items: stretch; }
  .assignment-bar select { width: 100%; flex: 0 0 100%; }
  .assignment-bar .primary-button, .assignment-bar .secondary-button { flex: 1; font-size: 10px; }
  .key-manager-body { padding: 16px 14px 22px; }
  .discovered-key { grid-template-columns: minmax(0, 1fr) 48px 68px; }
  .discovered-key > b { display: none; }
  .manager-import-bar, .manual-entry { align-items: stretch; flex-direction: column; }
  .manager-import-bar .primary-button, .manual-entry .secondary-button { width: 100%; }
  .conversation-test { max-height: calc(100vh - 20px); }
  .test-form { grid-template-columns: 1fr; }
  .test-form label:last-child { grid-column: auto; }
  .test-latencies { grid-template-columns: 1fr; gap: 5px; }
  .stats-summary { grid-template-columns: 1fr 1fr; }
  .stats-summary > div:nth-child(2) { border-right: 0; }
  .stats-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stats-live { align-items: flex-start; flex-direction: column; }
  .usage-chart { gap: 2px; }
  .secret-actions { grid-template-columns: 1fr; }
}