/* 设计 tokens 沿用 ToolDock / 拾字：Material Design 3 + teal 种子 */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
    "Microsoft YaHei UI", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-full: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --font-xs: 12px; --font-sm: 13px; --font-md: 15px; --font-lg: 16px;
  --e1: 0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --e2: 0 6px 16px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
}
:root, [data-theme="light"] {
  --primary:#006a6d; --on-primary:#fff; --primary-container:#9cf1f3; --on-primary-container:#002022;
  --secondary:#486366; --secondary-container:#cce8ea; --on-secondary-container:#041f21;
  --tertiary:#7b5806; --tertiary-container:#ffdfad;
  --error:#ba1a1a; --on-error:#fff; --success:#146c2e;
  --surface:#f7faf9; --sc-lowest:#fff; --sc-low:#f1f5f4; --sc:#ebefee; --sc-high:#e6eae9;
  --sc-highest:#e0e5e3; --on-surface:#171d1d; --on-surface-variant:#3f4949;
  --outline:#6f7979; --outline-variant:#bec8c8; --pressed:rgba(23,29,29,.08); --code-bg:#eef3f2;
}
[data-theme="dark"] {
  --primary:#82d5d7; --on-primary:#003739; --primary-container:#004f52; --on-primary-container:#c7f7f8;
  --secondary:#b0ccce; --secondary-container:#324b4d; --on-secondary-container:#cce8ea;
  --tertiary:#edbf6c; --tertiary-container:#5d4200;
  --error:#ffb4ab; --on-error:#690005; --success:#8dd697;
  --surface:#101414; --sc-lowest:#0b0f0f; --sc-low:#171c1b; --sc:#1c2020; --sc-high:#262a2a;
  --sc-highest:#313535; --on-surface:#dfe4e3; --on-surface-variant:#b8c2c2;
  --outline:#889392; --outline-variant:#3f4949; --pressed:rgba(223,228,227,.1); --code-bg:#141a1a;
  --e1: 0 2px 6px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --e2: 0 6px 16px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0; font-family: var(--font-sans); font-size: var(--font-md);
  background: var(--surface); color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
}
code, pre { font-family: var(--font-mono); }
a { color: var(--primary); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--outline-variant); border-radius: var(--r-full);
  border: 3px solid transparent; background-clip: content-box;
}

/* 顶栏 */
.appbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--outline-variant);
}
.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.avatar {
  width: 26px; height: 26px; border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
}
.brand-name { font-size: 15px; font-weight: 650; letter-spacing: .3px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--secondary-container); color: var(--on-secondary-container);
  font-size: var(--font-xs); font-weight: 500; white-space: nowrap;
}
.chip.warn { background: var(--tertiary-container); color: var(--tertiary); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--outline); flex: none; }
.chip.ok .dot { background: var(--success); }
.chip.err .dot { background: var(--error); }
.chip.busy .dot { background: var(--tertiary); }
.spacer { flex: 1; }
.seg {
  display: flex; padding: 2px; gap: 2px; border-radius: var(--r-full);
  background: var(--sc); border: 1px solid var(--outline-variant);
}
.seg-item {
  border: 0; background: transparent; color: var(--on-surface-variant);
  font: inherit; font-size: var(--font-xs); padding: 4px 11px;
  border-radius: var(--r-full); cursor: pointer; white-space: nowrap;
}
.seg-item:hover { background: var(--pressed); }
.seg-item.active { background: var(--primary-container); color: var(--on-primary-container); font-weight: 500; }

/* 页面：控制面板本体不滚动，模型列表在自己区域内部滚动 */
html, body { height: 100%; }
body { display: flex; flex-direction: column; overflow: hidden; }
.page {
  flex: 1; min-height: 0;
  max-width: 1180px; width: 100%; margin: 0 auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr)
    repeat(var(--balance-count, 2), minmax(0, 1fr))
    minmax(0, 0.75fr);
  gap: var(--sp-3);
  flex: none;
}
.top.no-route {
  grid-template-columns: minmax(0, 1.05fr)
    repeat(var(--balance-count, 2), minmax(0, 1fr));
}
.top.no-balances {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.75fr);
}
.top.no-balances.no-route { grid-template-columns: minmax(0, 1fr); }
.card {
  background: var(--sc-lowest); border: 1px solid var(--outline-variant);
  border-radius: var(--r-md); padding: 11px 13px; box-shadow: var(--e1);
  min-width: 0; display: flex; flex-direction: column;
}
.models-card { flex: 1; min-height: 0; }
.models-head { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.card-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 6px; }
.card-head h2 { margin: 0; font-size: 13px; font-weight: 600; }
.hint { color: var(--on-surface-variant); font-size: 11px; }
.muted { color: var(--on-surface-variant); }
.small { font-size: 11px; }
.big { font-size: 24px; font-weight: 650; letter-spacing: -.7px; line-height: 1.1; }
.sub { color: var(--on-surface-variant); font-size: 11px; margin-top: 3px; }
.progress {
  height: 7px; background: var(--sc-highest); border-radius: var(--r-full);
  overflow: hidden; margin: 8px 0 6px;
}
.progress > span {
  display: block; height: 100%; width: 0;
  background: var(--primary); border-radius: var(--r-full); transition: width .35s ease;
}
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
/* 余额卡片底部的说明 + 签到按钮：没有进度条时也要和上方内容留出间距 */
.balance-foot { margin-top: 8px; }
.packages { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pkg {
  background: var(--sc-low); border: 1px solid var(--outline-variant);
  border-radius: var(--r-xs); padding: 3px 7px; font-size: 11px;
  color: var(--on-surface-variant);
}
.badge {
  font-size: 10px; padding: 1px 7px; border-radius: var(--r-full);
  background: var(--secondary-container); color: var(--on-secondary-container);
  white-space: nowrap;
}
.badge.credit { background: var(--tertiary-container); color: var(--tertiary); }

/* 账号 */
.field-row { display: flex; gap: 6px; align-items: center; }
#providerSelect { flex: 0 1 38%; }
#accountSelect { flex: 1 1 auto; }
select, input {
  font: inherit; color: var(--on-surface); background: var(--sc);
  border: 1px solid var(--outline-variant); border-radius: var(--r-xs);
  padding: 6px 9px; outline: none; min-width: 0;
}
select { flex: 1; font-size: 13px; }
input:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}
/* 编辑器浮层：绝对定位在账号卡内，展开不推高布局 */
.account-card { position: relative; }
.editor {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--sc-lowest); border: 1px solid var(--outline-variant);
  border-radius: var(--r-md); box-shadow: var(--e2); padding: 10px 12px;
}
.editor[hidden] { display: none; }
.editor-form { display: flex; flex-direction: column; gap: 6px; }
.editor-actions { display: flex; gap: 6px; align-items: center; }
.editor-form input, .editor-form select { font-size: 12px; padding: 6px 8px; }
.editor-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.editor-fields .wide, .editor-form .wide { grid-column: 1 / -1; }
.editor-form button { align-self: flex-start; }
.form-hint {
  font-size: 11px; line-height: 1.5; color: var(--on-surface-variant);
  padding: 6px 8px; background: var(--sc-low); border-radius: var(--r-xs);
}
.form-hint strong { color: var(--primary); font-weight: 600; }
.login-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 6px 8px; border: 1px dashed var(--outline-variant);
  border-radius: 8px;
}
.login-row[hidden] { display: none; }
.login-link { font-size: 12px; color: var(--primary); }
.login-row .muted { flex-basis: 100%; }
.local-login-hint { font-size: 12px; }

/* 服务渠道（/v1 对话由哪个渠道服务、渠道内用哪个账号）；select 在纵向 flex
   卡片里会被全局 `select { flex: 1 }` 拉高，这里收回和账号下拉框一样高 */
.route-card select { flex: 0 0 auto; width: 100%; }
.route-hint { margin-top: 7px; line-height: 1.5; }
.route-mode-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-top: 7px;
}
.route-list {
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--outline-variant);
  display: flex; flex-direction: column; gap: 4px; max-height: 132px; overflow: auto;
}
.route-list[hidden] { display: none; }
.route-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.route-row .route-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

/* 按钮 */
.btn {
  font: inherit; font-size: var(--font-sm); border-radius: var(--r-full);
  border: 1px solid transparent; padding: 7px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background-color .15s ease, opacity .15s ease;
}
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.filled { background: var(--primary); color: var(--on-primary); box-shadow: var(--e1); }
.btn.filled:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 88%, black); }
.btn.tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn.tonal:hover:not(:disabled) { background: color-mix(in srgb, var(--secondary-container) 80%, var(--on-secondary-container)); }
.btn.outlined { background: transparent; border-color: var(--outline-variant); color: var(--on-surface); }
.btn.outlined:hover:not(:disabled) { background: var(--pressed); }
.btn.outlined.danger {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 40%, transparent);
}
.btn.outlined.danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--error) 12%, transparent);
}
.btn.sm { padding: 5px 10px; font-size: 12px; }

/* 模型 */
.model-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: var(--sp-2); align-content: start;
  overflow-y: auto; flex: 1; min-height: 0; margin-top: 8px; padding-right: 2px;
}
.model {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 10px 12px; border-radius: 11px;
  border: 1px solid var(--outline-variant); background: var(--sc-lowest);
}
.model.locked { opacity: .55; }
.model-id { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.model-meta { font-size: 10.5px; color: var(--on-surface-variant); }
.model-note { font-size: 10px; color: var(--primary); }
.model-top { display: flex; align-items: center; gap: 6px; width: 100%; }

/* 开关 */
.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--on-surface-variant); cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch .track {
  width: 32px; height: 18px; border-radius: var(--r-full);
  background: var(--sc-highest); position: relative; transition: background-color .2s ease;
}
.switch .track::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--sc-lowest); top: 2px; left: 2px; transition: transform .2s ease;
  box-shadow: var(--e1);
}
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::after { transform: translateX(14px); }

.warnings {
  border: 1px solid color-mix(in srgb, var(--error) 35%, transparent);
  background: color-mix(in srgb, var(--error) 8%, var(--sc-lowest));
  color: var(--error); border-radius: var(--r-xs); padding: 8px 12px;
  font-size: 11px; line-height: 1.6;
}
.footer {
  display: flex; align-items: center; gap: var(--sp-3); flex: none;
  color: var(--on-surface-variant); font-size: 11px; min-width: 0;
}
.footer code { font-size: 11px; }
.network-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.network-info a { color: var(--primary); text-decoration: none; }
.network-info a:hover { text-decoration: underline; }
.port-edit { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.port-edit input { width: 64px; padding: 4px 7px; font-size: 11px; }
.key-edit { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.key-edit code { color: var(--on-surface); user-select: all; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  background: var(--sc-highest); color: var(--on-surface);
  border: 1px solid var(--outline-variant); border-radius: var(--r-full);
  padding: 8px 16px; font-size: 12px; box-shadow: var(--e2);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 居中确认弹窗（替代系统 confirm） */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: color-mix(in srgb, #000 32%, transparent);
}
.modal-card {
  width: min(92vw, 340px);
  background: var(--sc-lowest); border: 1px solid var(--outline-variant);
  border-radius: var(--r-md); box-shadow: var(--e2); padding: 18px 20px 14px;
  animation: modal-in .16s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.modal-text { margin: 0; font-size: 13px; color: var(--on-surface-variant); line-height: 1.6; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* 模型卡复制按钮 */
.copy-btn {
  font: inherit; font-size: 10px; padding: 2px 9px; border-radius: var(--r-full);
  border: 1px solid var(--outline-variant); background: var(--sc);
  color: var(--on-surface-variant); cursor: pointer; white-space: nowrap;
  margin-left: auto; flex: none;
}
.copy-btn:hover { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; }
.copy-btn:active { transform: scale(.96); }

@media (max-width: 640px) {
  .top { grid-template-columns: 1fr; }
}