/* Inter font: preloaded in HTML , display: optional to avoid FOUT */
@font-face {
font-family: 'Inter';
font-display: optional;
src: local('Inter');
}
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg-canvas: #0B0F17;
--bg-surface: #131822;
--bg-elevated: #182028;
--bg-hover: #1e2a34;
--bg-selected: color-mix(in srgb, #58a6ff 6%, #131822);
--bg-glass: rgba(19, 24, 34, 0.75);
--border: rgba(255,255,255,0.04);
--border-hover: rgba(255,255,255,0.12);
--border-active: rgba(88,166,255,0.4);
--text-primary: #e2e8f0;
--text-secondary: #8b9db5;
--text-muted: #566a80;
--accent: #58a6ff;
--green: #4ade80;
--red: #f87171;
--orange: #fb923c;
--yellow: #d29922;
--purple: #a78bfa;
--font-mono: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
--radius-sm: 6px;
--radius: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.05), 0 12px 24px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.05);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.2), 0 4px 6px -2px rgba(0,0,0,0.1);
--shadow-card: 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 0 1px rgba(255,255,255,0.05);
--shadow-card-hover: 0 4px 6px -1px rgba(0,0,0,0.05), 0 12px 24px -4px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 0 1px rgba(255,255,255,0.08);
--shadow-glow: 0 0 16px rgba(88,166,255,0.15);
--dur-fast: 140ms;
--dur: 220ms;
--dur-slow: 380ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in: cubic-bezier(0.55, 0, 1, 0.45);
--ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.2);
--transition: var(--dur) var(--ease-out);
--transition-slow: var(--dur-slow) var(--ease-out);
--spring: 0.5s var(--ease-spring);
}
[data-theme="light"] {
--bg-canvas: #f5f7fa;
--bg-surface: #ffffff;
--bg-elevated: #f0f2f5;
--bg-hover: #e8ebef;
--bg-selected: color-mix(in srgb, #2563eb 5%, #ffffff);
--bg-glass: rgba(255, 255, 255, 0.88);
--border: rgba(0,0,0,0.08);
--border-hover: rgba(0,0,0,0.15);
--border-active: rgba(37,99,235,0.4);
--text-primary: #1a1f2e;
--text-secondary: #4a5568;
--text-muted: #8494a7;
--accent: #2563eb;
--green: #16a34a;
--red: #dc2626;
--orange: #ea580c;
--yellow: #a16207;
--purple: #7c3aed;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.02);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
--shadow-card: 0 2px 8px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(0,0,0,0.04);
--shadow-card-hover: 0 4px 6px -1px rgba(0,0,0,0.03), 0 12px 24px -4px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.06);
--shadow-glow: 0 0 16px rgba(37,99,235,0.12);
}
html { scroll-behavior: smooth; }
/* ---------- Theme switch ---------- */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 9999; }
/* 只过渡真正换色的三个属性。box-shadow/fill/stroke 加进来等于让上千个节点
同时重绘阴影，切换到一半必然掉帧；这三者直接跟着新主题瞬切，肉眼看不出来 */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
transition-property: background-color, border-color, color !important;
transition-duration: 260ms !important;
transition-timing-function: var(--ease-out) !important;
transition-delay: 0s !important;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
background: var(--bg-canvas);
color: var(--text-primary);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
*:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--accent);
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--radius); }
*:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14) !important; }
::selection { background: rgba(88,166,255,0.25); }
.main, .account-list, .modal-content, .log-container, .check-status-body, .cleanup-list { scrollbar-gutter: stable; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: transparent; }
[data-theme="light"] *:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22) !important; }
[data-theme="light"] ::selection { background: rgba(37,99,235,0.2); }
[data-theme="light"] .btn-primary { color: #fff; }
[data-theme="light"] .btn-primary:hover { background: #3b82f6; box-shadow: 0 4px 16px rgba(37,99,235,0.25); }
[data-theme="light"] .btn-deploy { color: #fff; }
[data-theme="light"] .btn-deploy:hover { box-shadow: 0 6px 24px rgba(37,99,235,0.2); }
[data-theme="light"] .btn-add { border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .btn-add:hover { background: rgba(37,99,235,0.04); }
[data-theme="light"] .batch-deploy-btn { color: #fff; }
[data-theme="light"] .modal { background: rgba(0,0,0,0.15); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
[data-theme="light"] .modal-content { box-shadow: 0 24px 80px rgba(0,0,0,0.15); }
[data-theme="light"] .sidebar { box-shadow: 4px 0 24px rgba(0,0,0,0.06); }
[data-theme="light"] .model-chip.selected { background: color-mix(in srgb, var(--accent) 7%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); }
[data-theme="light"] .toast { color: inherit; }
[data-theme="light"] .toast.success { background: rgba(240,253,244,0.95); border-left-color: #16a34a; color: #15803d; }
[data-theme="light"] .toast.error { background: rgba(254,242,242,0.95); border-left-color: #dc2626; color: #b91c1c; }
[data-theme="light"] .toast.warn { background: rgba(254,252,232,0.95); border-left-color: #ca8a04; color: #a16207; }
[data-theme="light"] .toast.info { background: rgba(239,246,255,0.95); border-left-color: #2563eb; color: #1d4ed8; }
[data-theme="light"] .toggle-slider:before { box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
[data-theme="light"] .deploy-section { box-shadow: 0 12px 40px -14px rgba(0,0,0,0.18); }
[data-theme="light"] .btn-deploy { background: var(--text-primary); color: #fff; }
[data-theme="light"] .region-block { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .region-block:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .batch-deploy-btn:hover { background: #3b82f6; box-shadow: 0 4px 16px rgba(37,99,235,0.22); }
[data-theme="light"] .acc-btn { background: rgba(0, 0, 0, 0.03); color: var(--text-primary); }
[data-theme="light"] .credentials-panel { background: rgba(0, 0, 0, 0.025); border: 1px solid rgba(0, 0, 0, 0.05); }
[data-theme="light"] .cred-btn { border-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .cred-btn:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.15); }
[data-theme="light"] .deploy-tag { background: rgba(0, 0, 0, 0.025); border: 1px solid rgba(0, 0, 0, 0.06); }
[data-theme="light"] .deploy-tag:hover { background: rgba(0, 0, 0, 0.05); }
[data-theme="light"] .skeleton::after { background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.04) 50%, transparent 100%); }
/* Theme Toggle */
.theme-toggle {
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border: 1px solid var(--border); background: transparent;
border-radius: 8px; cursor: pointer; color: var(--text-muted);
font-size: 15px; transition: all var(--transition); flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--border-hover); color: var(--text-primary); background: var(--bg-elevated); }
.container { display: flex; min-height: 100vh; }
/* ======== Sidebar ======== */
.sidebar {
/* 宽屏把主区多余的留白让给侧栏（主区本身有 max-width:1024px 限制），窄屏退回 320。
下限按「账号名 + 两个徽章不换行、筛选 chip 一行放得下」定的 */
width: clamp(320px, 26vw, 440px); flex-shrink: 0; background: var(--bg-surface);
padding: 20px 16px 16px; display: flex; flex-direction: column;
/* 这里不要加 backdrop-filter：--bg-surface 是不透明色，模糊看不见，
却会让整根侧栏变成 backdrop root，主题切换重绘时被迫重新光栅化一整层 */
position: relative;
box-shadow: var(--shadow-lg); z-index: 10;
margin: 12px; border-radius: 16px;
border: 1px solid var(--border); height: calc(100vh - 24px);
}
.logo {
display: flex; align-items: center; justify-content: space-between;
padding: 0 6px; margin-bottom: 18px;
font-size: 16px; font-weight: 600; letter-spacing: -0.3px; color: var(--text-primary);
}
.logo-inner { display: flex; align-items: center; gap: 12px; }
.stats {
display: flex; gap: 1px; margin-bottom: 14px;
background: var(--border); border-radius: var(--radius); overflow: hidden;
}
/* 侧栏是 flex column：只有账号列表可伸缩，其余不许被压扁 */
.logo, .stats, .section-title, .account-search, .sidebar-actions { flex-shrink: 0; }
.stat-item { text-align: center; flex: 1; padding: 8px 10px; background: var(--bg-elevated); }
.stat-value {
font-size: 17px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.5px; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat-label {
font-size: 10px; color: var(--text-muted); margin-top: 2px;
letter-spacing: 0.06em; font-weight: 500; text-transform: uppercase;
}
.section-title {
font-size: 12px; color: var(--text-secondary); margin-bottom: 6px;
display: flex; align-items: center; gap: 6px;
letter-spacing: -0.02em; font-weight: 600;
}
/* ---------- Account search ---------- */
.account-search { position: relative; margin-bottom: 6px; }
/* 分类 chips：横向可滚动，账号多起来时不挤占列表高度 */
.account-chips {
display: flex; gap: 4px; margin-bottom: 6px; flex-shrink: 0;
overflow-x: auto; scrollbar-width: none; padding-bottom: 1px;
}
.account-chips::-webkit-scrollbar { display: none; }
.account-chips:empty { display: none; }
.account-chip {
flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; cursor: pointer;
background: transparent; border: 1px solid var(--border);
color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 500;
white-space: nowrap; transition: all var(--transition);
}
.account-chip:hover { border-color: var(--border-hover); color: var(--text-secondary); }
.account-chip.active { border-color: var(--accent); color: var(--accent); background: var(--bg-selected); }
/* 常态一律中性：紫色只在选中时出现，跟列表里的 Tier 1 徽章呼应，
常态就上色的话「紫=付费层级」和「高亮=已选中」会互相冒充 */
.account-chip.tone-purple.active {
border-color: var(--purple); color: var(--purple);
background: color-mix(in srgb, var(--purple) 12%, transparent);
}
/* Used 是「已消耗」，选中态也保持中性灰，不跟蓝（选中）绿（在用）抢注意力 */
.account-chip.tone-muted.active {
border-color: var(--text-muted); color: var(--text-muted);
background: rgba(148, 163, 184, 0.1);
}
/* 间距给到 5px：标签本身以数字结尾时（Tier 1）3px 会读成 "Tier 17" */
.account-chip .chip-count { opacity: 0.6; margin-left: 5px; font-variant-numeric: tabular-nums; }
.account-search-icon {
position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
color: var(--text-muted); display: flex; pointer-events: none;
}
.account-search input {
width: 100%; padding: 7px 10px 7px 28px;
background: var(--bg-elevated); border: 1px solid var(--border);
border-radius: var(--radius); color: var(--text-primary); font: inherit; font-size: 12px;
transition: border-color var(--transition), box-shadow var(--transition);
}
.account-search input::placeholder { color: var(--text-muted); }
.account-search input:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}
.account-search input::-webkit-search-cancel-button { cursor: pointer; }
.account-list {
flex: 1; overflow-y: auto;
mask-image: linear-gradient(to bottom, transparent, black 12px, black calc(100% - 12px), transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, black 12px, black calc(100% - 12px), transparent);
padding-top: 4px; padding-bottom: 4px;
}
.account-item {
padding: 10px 12px; border: none; border-radius: var(--radius);
margin-bottom: 4px; cursor: pointer;
transition: background var(--transition), color var(--transition);
background: transparent; position: relative;
display: flex; align-items: center; gap: 10px; overflow: hidden;
}
.account-item:hover { background: var(--bg-elevated); }
/* 不透明的选中背景：悬浮操作条要用同一个色值做渐隐遮罩，半透明色会露出底色 */
.account-item.selected { background: var(--bg-selected); }
.account-item.selected::before {
content: ''; position: absolute; left: 0; top: 15%; height: 70%;
width: 3px; background: var(--accent); border-radius: 0 4px 4px 0;
}
.account-item-left { display: flex; align-items: center; gap: 8px; }
.account-item-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.account-item-header { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* 名字优先：徽章先收缩，账号名尽量完整显示（之前徽章不收缩，名字被压成 "azur…"） */
.account-item .name {
font-weight: 500; font-size: 13px; color: var(--text-primary);
display: flex; align-items: baseline; white-space: nowrap;
flex: 0 1 auto; min-width: 0;
}
/* 头部收缩省略、尾部永远可见：同前缀的自动生成名靠尾部区分。
white-space: pre 是必须的——切点落在空格上时 nowrap 会把这个行尾空格折掉，
"08-07 14:53:56" 会显示成 "08-0714:53:56" */
.account-item .name-head { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; white-space: pre; }
.account-item .name-tail { flex: 0 0 auto; white-space: pre; }
/* 徽章紧跟名字左对齐、不拉伸到右边缘——右侧留给悬浮的操作按钮条，
否则 .account-actions 的渐隐遮罩会把徽章削掉一半 */
.account-item .account-badges {
display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
}
.account-item .info { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
/* 部署统计不许折行（折了行高就参差不齐） */
.account-item .deploy-text { white-space: nowrap; flex: 0 0 auto; }
.account-badge {
font-size: 9px; padding: 2px 6px; border-radius: 4px;
font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase;
white-space: nowrap; flex-shrink: 0;
}
/* 列表里的层级徽章保持 "Free" / "Tier 1" 原样大小写，视觉重量压到账号名之下 */
.account-item .account-badge {
text-transform: none; font-weight: 500; font-size: 10px; letter-spacing: 0;
}
.account-badge.sub-active { background: rgba(34, 197, 94, 0.1); color: var(--green); }
.account-badge.sub-disabled { background: rgba(239, 68, 68, 0.1); color: var(--red); }
.account-badge.loading { background: rgba(148, 163, 184, 0.1); color: var(--text-muted); }
.account-badge.tier-free { background: rgba(148, 163, 184, 0.12); color: var(--text-muted); }
.account-badge.tier-paid { background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple); }
/* 行里已经有绿点（订阅）、紫徽章（层级）、绿字（部署数），已用标记再上色就是第四种颜色打架，
所以列表行不加徽章，只靠明暗降权区分；这个灰徽章只用在顶部 target 栏 */
.account-badge.used-state { background: rgba(148, 163, 184, 0.14); color: var(--text-muted); }
/* 已用账号主要靠「沉到列表底部 + 一条分组线」区分（见 app.js renderAccountList），
行内只把账号名降一档色阶。不用整行 opacity：那会把绿点和 tier 徽章一起冲淡，
同一个绿点在列表里出现两种深浅，颜色系统就失效了；而且混排时明暗交错，
眼睛扫列表要反复对焦，hover 从 0.6 跳回 1.0 也是一次很重的全行亮度跳变 */
.account-item.used .name { color: var(--text-secondary); }
.account-item.used .status-dot { opacity: 0.5; }
/* 只看已用列表时整屏都是同一档，降权不再传递信息，恢复正常色阶 */
.account-list.filter-used .account-item.used .name { color: var(--text-primary); }
.account-list.filter-used .account-item.used .status-dot { opacity: 1; }
/* tag 是这批自动生成名里唯一由人起的名字，需要形状上的存在感；但行里已有绿点、
紫徽章、绿字，再上色就是第四种颜色，所以用描边而不是填充来区分 */
.account-item .account-tag {
font-size: 10px; line-height: 1.4; padding: 1px 5px; border-radius: 4px;
border: 1px solid var(--border-hover); color: var(--text-secondary);
white-space: nowrap; flex-shrink: 0;
max-width: 88px; overflow: hidden; text-overflow: ellipsis;
}
/* 已用分组线兼折叠开关：过滤到只剩一侧时由 filterAccounts 隐藏 */
.account-divider {
display: flex; align-items: center; gap: 6px;
width: calc(100% - 8px); margin: 10px 4px 6px; padding: 0 8px;
background: none; border: none; font: inherit;
font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
color: var(--text-muted); cursor: pointer; user-select: none;
transition: color var(--transition);
}
.account-divider:hover { color: var(--text-secondary); }
.account-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.account-divider.hidden { display: none; }
.account-divider-caret { flex: 0 0 auto; transition: transform var(--transition); }
.account-list.used-collapsed .account-divider-caret { transform: rotate(-90deg); }
.account-list.used-collapsed .account-item.used { display: none; }
/* 选中的那个即使折叠也留着，否则顶部 target 栏指着一个列表里看不见的账号 */
.account-list.used-collapsed .account-item.used.selected { display: flex; }
/* 只看已用时折叠会把整屏清空，这时忽略折叠态 */
.account-list.filter-used.used-collapsed .account-item.used { display: flex; }
/* Buttons */
.btn {
padding: 9px 16px; border: none; border-radius: 8px; font-size: 13px;
cursor: pointer; font-weight: 500;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
display: flex; align-items: center; justify-content: center; gap: 6px;
position: relative; overflow: hidden;
}
.btn:active { transform: translateY(1px); transition-duration: var(--dur-fast); }
.btn:disabled, .mini-btn:disabled {
opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none;
}
.btn:disabled:hover, .mini-btn:disabled:hover {
transform: none; box-shadow: none; background: inherit; border-color: var(--border);
}
/* .btn-loading 已有自己的 opacity，不要被 :disabled 覆盖成更淡 */
.btn.btn-loading:disabled { opacity: 0.7; cursor: default; }
.acc-btn:active, .modal-close:active, .theme-toggle:active,
.refresh-btn:active, .select-all-btn:active, .mini-btn:active,
.cred-btn:active, .batch-btn:active { transform: scale(0.94); }
.btn-primary { background: var(--accent); color: #0a0e14; font-weight: 600; }
.btn-primary:hover { background: #6db8ff; box-shadow: 0 4px 16px rgba(88, 166, 255, 0.25); }
.btn-secondary { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); }
.btn-secondary:hover { border-color: var(--border-hover); color: var(--text-primary); background: var(--bg-hover); }
.btn-sm { font-size: 11px; padding: 6px 12px; }
.btn-add {
width: 100%; margin-top: 8px; background: transparent;
border: 1px dashed rgba(255,255,255,0.08); color: var(--text-muted); font-size: 12px;
}
.btn-add:hover { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.04); border-style: solid; }
/* Settings Dropdown */
.settings-dropdown { position: relative; }
.btn-settings {
width: 100%; background: var(--bg-elevated); border: 1px solid var(--border);
color: var(--text-secondary); font-size: 12px; padding: 8px 12px;
border-radius: 8px; cursor: pointer; font-weight: 500;
display: flex; align-items: center; gap: 8px;
transition: all var(--transition);
}
.btn-settings:hover { border-color: var(--border-hover); color: var(--text-primary); background: var(--bg-hover); }
.btn-settings .settings-chevron {
margin-left: auto; color: var(--text-muted); transition: transform 0.25s var(--ease-out);
}
.settings-dropdown.open .btn-settings .settings-chevron { transform: rotate(180deg); }
.settings-dropdown.open .btn-settings { border-color: var(--border-hover); background: var(--bg-hover); }
.settings-dots {
display: flex; align-items: center; gap: 4px; margin-left: 2px;
}
.settings-dots .dot {
width: 5px; height: 5px; border-radius: 50%;
}
.settings-dots .dot.green { background: var(--green); box-shadow: 0 0 6px rgba(74,222,128,0.4); }
.settings-menu {
display: none; position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
background: var(--bg-surface); border: 1px solid var(--border-hover);
border-radius: var(--radius-md); overflow: hidden;
box-shadow: var(--shadow-lg); z-index: 500;
opacity: 0; transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.settings-dropdown.open .settings-menu {
display: block; opacity: 1; transform: translateY(0);
animation: settingsMenuIn 0.2s ease forwards;
}
@keyframes settingsMenuIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.settings-menu button {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 10px 14px; background: transparent; border: none;
color: var(--text-primary); font-size: 12px; cursor: pointer;
text-align: left; transition: background var(--transition);
}
.settings-menu button:hover { background: var(--bg-hover); }
.settings-menu button + button { border-top: 1px solid var(--border); }
.settings-menu-icon {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 7px;
background: var(--bg-elevated); color: var(--text-muted); flex-shrink: 0;
}
.settings-menu button:hover .settings-menu-icon { color: var(--accent); }
.settings-menu-label {
display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0;
font-weight: 500;
}
.settings-menu-desc {
font-size: 10px; color: var(--text-muted); font-weight: 400;
}
.settings-menu-badge {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.settings-menu-badge.active {
background: var(--green); box-shadow: 0 0 6px rgba(74,222,128,0.4);
}
[data-theme="light"] .settings-menu { box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
[data-theme="light"] .settings-menu-icon { background: var(--bg-elevated); }
/* ======== Main Content ======== */
.main {
flex: 1; padding: 48px 64px; overflow-y: auto;
background: var(--bg-surface); margin: 12px 12px 12px 0;
border-radius: 16px; border: 1px solid var(--border);
box-shadow: var(--shadow-lg); height: calc(100vh - 24px);
}
.main > * { max-width: 1024px; margin-left: auto; margin-right: auto; }
.page-title { font-size: 24px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.03em; color: var(--text-primary); }
/* ---------- Deployment target bar ---------- */
.deploy-target {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-bottom: 24px; padding: 9px 14px;
background: var(--bg-elevated); border: 1px solid var(--border);
border-radius: 10px; font-size: 13px;
}
.deploy-target.is-empty { border-style: dashed; }
.deploy-target-label {
font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--text-muted);
}
.deploy-target-account { font-weight: 600; color: var(--text-primary); }
.deploy-target.is-empty .deploy-target-account { font-weight: 500; color: var(--text-muted); }
.deploy-target-badges { display: flex; align-items: center; gap: 4px; }
.deploy-target-arrow { color: var(--text-muted); }
.deploy-target-region { font-weight: 600; color: var(--accent); }
.deploy-target-tag {
font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 500;
background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple);
}
/* Region Select (Dropdown) */
.region-section { margin-bottom: 28px; position: relative; z-index: 100; }
.region-select { position: relative; }
.region-select-trigger {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; width: 100%;
background: var(--bg-elevated); border: 1px solid var(--border);
border-radius: 10px; cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
}
.region-select-trigger:hover { border-color: var(--border-hover); }
.region-select.open .region-select-trigger { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(88,166,255,0.1); }
.region-select-label {
font-size: 11px; color: var(--text-muted); font-weight: 500;
letter-spacing: 0.02em;
}
.region-select-value {
flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary);
text-align: left;
}
.region-select-chevron {
color: var(--text-muted); transition: transform 0.25s var(--ease-out); flex-shrink: 0;
}
.region-select.open .region-select-chevron { transform: rotate(180deg); }
/* Region Dropdown Menu */
.region-select-menu {
display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
background: var(--bg-surface); border: 1px solid var(--border-hover);
border-radius: var(--radius-md); z-index: 500;
box-shadow: var(--shadow-lg);
opacity: 0; transform: translateY(-4px);
padding: 10px 12px;
display: none; grid-template-columns: repeat(4, 1fr);
gap: 4px 16px;
}
.region-select.open .region-select-menu {
display: grid; opacity: 1; transform: translateY(0);
animation: regionMenuIn 0.2s ease forwards;
}
@keyframes regionMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.region-menu-group {
padding: 4px 0;
}
.region-menu-group-label {
font-size: 10px; color: var(--text-muted); font-weight: 600;
letter-spacing: 0.05em; text-transform: uppercase;
padding: 2px 8px 6px; user-select: none;
}
.region-menu-item {
display: block; width: 100%; padding: 5px 8px; border: none;
background: transparent; color: var(--text-secondary); font-size: 12px;
font-weight: 500; cursor: pointer; text-align: left;
border-radius: 6px;
transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.region-menu-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.region-menu-item.active {
color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.region-menu-item.active::before {
content: ''; display: inline-block; width: 5px; height: 5px;
border-radius: 50%; background: var(--accent); margin-right: 6px;
box-shadow: 0 0 6px rgba(88,166,255,0.3); vertical-align: middle;
}
[data-theme="light"] .region-select.open .region-select-trigger { box-shadow: 0 0 0 2px rgba(37,99,235,0.1); }
[data-theme="light"] .region-select-menu { box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
[data-theme="light"] .region-menu-item.active { background: color-mix(in srgb, var(--accent) 5%, transparent); }
/* Info Banner */
.info-banner {
padding: 2px 0 2px 12px; background: transparent; border: none;
border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
border-radius: 0; font-size: 12px; color: var(--text-secondary);
margin-bottom: 24px; display: flex; align-items: center; gap: 10px;
line-height: 1.5; box-shadow: none;
}
.info-banner .icon { color: var(--accent); flex-shrink: 0; display: flex; align-items: center; opacity: 0.85; }
/* Model Select */
.models-section { margin-bottom: 28px; }
.models-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.models-header .models-actions { opacity: 0.6; transition: opacity var(--transition); }
.models-header:hover .models-actions,
.models-header:focus-within .models-actions { opacity: 1; }
.models-title { font-size: 13px; color: var(--text-secondary); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.models-count {
color: var(--green); font-size: 12px; font-weight: 600;
background: rgba(74,222,128,0.08); padding: 2px 8px;
border-radius: 10px; font-variant-numeric: tabular-nums;
}
.models-actions { display: flex; gap: 6px; align-items: center; }
.refresh-btn {
padding: 5px 12px; background: transparent; border: 1px solid var(--border);
color: var(--text-muted); border-radius: 6px; cursor: pointer;
font-size: 11px; font-weight: 500; transition: all var(--transition);
}
.refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
.refresh-btn.danger { color: var(--red); border-color: rgba(248,113,113,0.25); }
.refresh-btn.danger:hover { border-color: var(--red); }
.refresh-btn:disabled { cursor: default; opacity: 0.6; }
.refresh-btn:disabled:hover { border-color: var(--border); color: var(--text-muted); }
.section-title-actions { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.section-title-actions .refresh-btn { padding: 3px 8px; font-size: 10px; }
/* Model Groups */
.model-group {
margin-bottom: 10px; border: 1px solid var(--border);
border-radius: var(--radius-lg); overflow: hidden;
transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
box-shadow: var(--shadow-sm); background: var(--bg-elevated);
}
.model-group:hover { box-shadow: var(--shadow-md); border-color: var(--border-hover); }
.model-group-header {
padding: 12px 16px; background: transparent;
display: flex; justify-content: space-between; align-items: center;
cursor: pointer; transition: background var(--transition); user-select: none;
}
.model-group-header:hover { background: var(--bg-hover); }
.model-group-title { font-weight: 600; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.model-group-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.model-group-count {
background: var(--bg-hover); padding: 2px 8px; border-radius: 10px;
font-size: 10px; color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums;
}
.model-group-right { display: flex; align-items: center; gap: 8px; }
.model-group-selected { color: var(--green); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.select-all-btn {
padding: 2px 8px; font-size: 10px; background: transparent;
border: 1px solid var(--border); color: var(--text-muted);
border-radius: 4px; cursor: pointer; transition: all var(--transition); font-weight: 500;
}
.select-all-btn:hover { border-color: var(--accent); color: var(--accent); }
.model-group-collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--spring); }
.model-group.collapsed .model-group-collapse { grid-template-rows: 0fr; }
.model-group-body {
padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 6px;
overflow: hidden; min-height: 0;
transition: padding var(--spring), opacity 0.2s ease; opacity: 1;
}
.model-group.collapsed .model-group-body { padding-top: 0; padding-bottom: 0; opacity: 0; }
.model-chip {
padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px;
cursor: pointer; font-size: 12px;
transition: border-color 0.25s ease, background 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
display: flex; align-items: center; gap: 5px;
background: transparent; color: var(--text-secondary);
font-weight: 500; position: relative;
}
.model-chip:hover { border-color: var(--border-hover); color: var(--text-primary); background: var(--bg-elevated); }
.model-chip:active { opacity: 0.8; }
.model-chip.selected {
border-color: color-mix(in srgb, var(--accent) 38%, transparent);
background: color-mix(in srgb, var(--accent) 9%, transparent);
color: var(--accent); box-shadow: none;
}
.model-chip .version {
font-size: 10px; color: var(--text-muted); font-weight: 400; opacity: 0.7;
transition: opacity var(--dur-fast) var(--ease-out);
}
.model-chip:hover .version { opacity: 1; }
/* Selected Models */
.selected-models-section {
background: var(--bg-surface); border: none; border-radius: var(--radius-lg);
padding: 20px; margin-bottom: 24px;
animation: slideDown var(--spring) forwards; box-shadow: var(--shadow-card);
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.selected-models-title {
font-size: 12px; color: var(--text-secondary); margin-bottom: 12px;
letter-spacing: -0.1px; font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.selected-models-title .hint {
font-size: 10px; text-transform: none; letter-spacing: 0;
font-weight: 400; color: var(--text-muted); opacity: 0.7;
}
.selected-model-item {
display: flex; align-items: center; gap: 10px; padding: 9px 12px;
background: var(--bg-elevated); border-radius: 8px; margin-bottom: 4px;
flex-wrap: wrap; transition: background var(--transition);
}
.selected-model-item:hover { background: var(--bg-hover); }
.selected-model-item:last-child { margin-bottom: 0; }
.selected-model-name { flex: 1; font-weight: 500; min-width: 120px; font-size: 13px; }
.selected-model-tpm { display: flex; align-items: center; gap: 6px; }
.selected-model-tpm input, .selected-model-deploy-name input {
padding: 5px 8px; background: var(--bg-canvas); border: 1px solid var(--border);
border-radius: 6px; color: var(--text-primary); font-size: 12px;
transition: border-color var(--transition), box-shadow var(--transition);
}
.selected-model-tpm input { width: 70px; text-align: center; font-variant-numeric: tabular-nums; }
.selected-model-deploy-name input { width: 180px; }
.selected-model-tpm input:focus, .selected-model-deploy-name input:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(88,166,255,0.1);
}
.selected-model-deploy-name { display: flex; align-items: center; gap: 6px; }
.selected-model-deploy-name input.modified { border-color: var(--orange); color: var(--orange); }
.field-label { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.selected-model-remove {
color: var(--text-muted); cursor: pointer; padding: 4px 6px;
font-size: 12px; border-radius: 6px; transition: all var(--transition); opacity: 0.5;
}
.selected-model-item:hover .selected-model-remove,
.selected-model-item:focus-within .selected-model-remove { opacity: 1; }
.selected-model-remove:hover { color: var(--red); background: rgba(248,113,113,0.1); }
/* Deploy Button (Floating Pill) */
.deploy-section {
display: flex; gap: 8px; padding: 8px 16px;
margin: 32px auto 24px auto; width: fit-content;
align-items: center; justify-content: center;
position: sticky; bottom: 24px;
background: var(--bg-glass);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--border); border-radius: 100px;
box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.5);
z-index: 40; transition: box-shadow var(--dur-slow) var(--ease-out);
}
.btn-deploy {
padding: 8px 0; width: 160px; background: var(--text-primary);
color: var(--bg-canvas); font-size: 13px; font-weight: 600;
letter-spacing: -0.2px; border-radius: 100px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all var(--transition);
border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.btn-deploy:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); background: var(--accent); color: #fff; }
.btn-deploy:active { transform: translateY(0) scale(0.98); }
.btn-dual-region {
padding: 8px 0; width: 140px; background: var(--bg-elevated);
border: 1px solid var(--border); color: var(--text-primary);
font-size: 13px; font-weight: 500; border-radius: 100px;
box-shadow: var(--shadow-sm); cursor: pointer; transition: all var(--transition);
display: flex; align-items: center; justify-content: center;
}
.btn-dual-region:hover { border-color: var(--border-hover); background: var(--bg-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Quick Deploy Dropdown */
.dropdown { position: relative; display: flex; align-items: stretch; }
.btn-oneclick-trigger {
padding: 8px 0; width: 140px; background: transparent;
border: 1px solid transparent; color: var(--text-muted);
font-size: 13px; font-weight: 500; white-space: nowrap;
border-radius: 100px; cursor: pointer; transition: all var(--transition);
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-oneclick-trigger::before { content: ''; width: 12px; display: block; }
.btn-oneclick-trigger:hover { color: var(--text-primary); background: var(--bg-elevated); border-color: var(--border); }
.dropdown-menu {
display: none; position: absolute; bottom: calc(100% + 6px); left: 0;
background: var(--bg-glass); border: 1px solid var(--border-hover);
border-radius: var(--radius); min-width: 180px; z-index: 500;
overflow: hidden; box-shadow: var(--shadow-lg);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown-menu.open { display: block; opacity: 1; transform: translateY(0); animation: dropdownIn 0.2s ease forwards; }
@keyframes dropdownIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-menu button {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 10px 14px; background: transparent; border: none;
color: var(--text-primary); font-size: 12px; cursor: pointer;
text-align: left; transition: background var(--transition);
}
.dropdown-menu button:hover { background: var(--bg-hover); }
.dropdown-menu .menu-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.dropdown-menu .menu-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
/* Account Actions */
.account-actions {
display: flex; gap: 2px; position: absolute; right: 8px; top: 50%;
transform: translateY(-50%); background: var(--bg-elevated);
padding-left: 12px; box-shadow: -16px 0 16px var(--bg-elevated);
opacity: 0; transition: opacity 0.2s ease; z-index: 10;
}
/* 选中行背景不同（.selected 在 :hover 之后声明，悬浮时仍是 --bg-selected），
遮罩色必须跟着变，否则悬浮选中行时会露出一块色差 */
.account-item.selected .account-actions {
background: var(--bg-selected); box-shadow: -16px 0 16px var(--bg-selected);
}
.account-item:hover .account-actions,
.account-item:focus-within .account-actions { opacity: 1; }
.acc-btn {
width: 26px; height: 26px; background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
color: var(--text-primary); transition: all 0.2s ease;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; line-height: 1;
}
.acc-btn:hover { background: var(--bg-hover); border-color: var(--border-hover); }
.acc-btn.danger:hover { background: rgba(248, 113, 113, 0.12); color: var(--red); border-color: rgba(248, 113, 113, 0.3); }
.acc-btn.accent:hover { background: rgba(88, 166, 255, 0.12); color: var(--accent); border-color: rgba(88, 166, 255, 0.3); }
/* 已标记时按钮常亮，兼作「当前是已用状态」的第二处提示（行降权了，徽章可能被操作条遮住） */
.acc-btn.js-used.active { background: rgba(34, 197, 94, 0.12); color: var(--green); border-color: rgba(34, 197, 94, 0.32); }
/* ======== Modal ======== */
.modal {
display: none; position: fixed; top: 0; left: 0;
width: 100%; height: 100%; background: rgba(0,0,0,0.55);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
z-index: 1000; justify-content: center; align-items: center;
opacity: 0; transition: opacity 0.25s ease;
}
.modal.show { display: flex; animation: modalBgIn 0.25s ease forwards; }
.modal.closing { display: flex; animation: modalBgOut 0.25s ease forwards; }
@keyframes modalBgIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalBgOut { from { opacity: 1; } to { opacity: 0; } }
.modal-content {
background: var(--bg-surface); border: 1px solid var(--border-hover);
border-radius: 16px; padding: 28px; width: 500px; max-width: 90%;
max-height: 85vh; overflow-y: auto;
box-shadow: 0 24px 80px rgba(0,0,0,0.5);
animation: modalContentIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.modal.closing .modal-content { animation: modalContentOut 0.2s var(--ease-in) forwards; }
@keyframes modalContentIn { from { opacity: 0; transform: scale(0.96) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes modalContentOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.92) translateY(12px); } }
.modal-sm { width: 480px; }
.modal-md { width: 540px; }
.modal-lg { width: 600px; }
.modal-xl { width: 680px; }
.modal-apikey { width: 660px; }
.modal-tall { max-height: 85vh; }
.modal-tall-sm { max-height: 80vh; }
.modal-title {
font-size: 17px; font-weight: 600; margin-bottom: 22px;
display: flex; align-items: center; gap: 10px; letter-spacing: -0.03em;
}
.modal-close {
margin-left: auto; background: none; border: none;
color: var(--text-muted); cursor: pointer; padding: 6px;
border-radius: 6px; transition: all var(--transition);
display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.form-group { margin-bottom: 16px; position: relative; }
.form-group label {
display: block; font-size: 12px; color: var(--text-secondary);
margin-bottom: 6px; font-weight: 500; letter-spacing: 0.02em;
}
.form-group input, .form-group textarea, .form-group select {
width: 100%; padding: 9px 12px; background: var(--bg-elevated);
border: 1px solid var(--border); border-radius: 8px;
color: var(--text-primary); font-size: 13px;
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(88,166,255,0.1);
background: color-mix(in srgb, var(--bg-elevated) 95%, var(--accent) 5%);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); }
/* 渠道代理选择器：默认只有一行下拉。选中已存代理时下方补一行只读地址，
选 Custom 时才展开输入框 */
.proxy-field-row { display: flex; gap: 8px; align-items: center; }
.proxy-field-row select { flex: 1; min-width: 0; }
.proxy-field-summary {
display: flex; align-items: center; gap: 6px; margin-top: 6px;
font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.proxy-field-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proxy-field-sep { flex-shrink: 0; }
.proxy-field-check {
flex-shrink: 0; background: none; border: none; padding: 0;
font-family: inherit; font-size: 11px; color: var(--accent); cursor: pointer;
}
.proxy-field-check:hover { text-decoration: underline; }
.proxy-field-check:disabled { color: var(--text-muted); cursor: default; text-decoration: none; }
.proxy-field-custom { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.proxy-field-custom input { flex: 1; min-width: 0; }
.proxy-field-btn { white-space: nowrap; padding: 6px 12px; font-size: 12px; }
.float-group { position: relative; margin-bottom: 16px; }
.float-group input {
width: 100%; padding: 18px 12px 8px; background: var(--bg-elevated);
border: 1px solid var(--border); border-radius: 8px;
color: var(--text-primary); font-size: 13px;
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.float-group input:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(88,166,255,0.1);
background: color-mix(in srgb, var(--bg-elevated) 95%, var(--accent) 5%);
}
.float-group label {
position: absolute; left: 12px; top: 50%; font-size: 13px;
color: var(--text-muted); pointer-events: none;
transform: translateY(-50%); transform-origin: left center;
transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
will-change: transform; backface-visibility: hidden;
font-weight: 400; letter-spacing: 0.02em;
}
.float-group input:focus ~ label,
.float-group input:not(:placeholder-shown) ~ label {
transform: translate(0, calc(-50% - 9px)) scale(0.78);
color: var(--accent); font-weight: 500;
}
.btn-group { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }
/* Form utilities */
.form-hint { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.input-with-action { display: flex; gap: 6px; }
.input-with-action input { flex: 1; }
.input-mono { font-family: var(--font-mono); font-size: 12px; }
.monospace { font-family: var(--font-mono); }
.text-hint-inline { font-size: 9px; opacity: 0.7; }
.panel-title-accent { color: var(--accent); font-size: 12px; }
/* Execution Log */
.log-container {
background: var(--bg-canvas); border: 1px solid var(--border);
border-radius: var(--radius); padding: 14px;
font-family: var(--font-mono);
font-size: 11px; line-height: 1.8; max-height: 350px; overflow-y: auto;
}
.log-line {
margin-bottom: 1px; white-space: pre-wrap; word-break: break-all;
padding: 1px 0; opacity: 0; animation: logLineIn 0.15s ease forwards;
}
@keyframes logLineIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
.log-ok { color: var(--green); }
.log-error { color: var(--red); }
.log-warn { color: var(--yellow); }
.log-info { color: var(--text-muted); }
/* Result Card */
.result-card { background: var(--bg-surface); border: 1px solid rgba(74, 222, 128, 0.2); border-radius: var(--radius); padding: 16px; margin-top: 14px; }
.result-title { color: var(--green); font-weight: 600; margin-bottom: 12px; font-size: 14px; }
.result-item { font-size: 12px; margin-bottom: 6px; }
.result-value { color: var(--accent); word-break: break-all; }
/* Deployment Cards */
.deployment-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; transition: opacity 0.3s ease; }
.deployment-cards.fade-enter { animation: fadeContentIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fadeContentIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* LLM API */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
background-color: var(--bg-hover); transition: .3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 22px;
}
.toggle-slider:before {
position: absolute; content: ""; height: 16px; width: 16px;
left: 3px; bottom: 3px; background-color: white;
transition: .3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
input:checked + .toggle-slider { background-color: var(--accent); }
input:checked + .toggle-slider:before { transform: translateX(22px); }
.info-box {
background: var(--bg-canvas); border: 1px solid var(--border);
border-radius: 8px; padding: 12px; font-size: 11px;
color: var(--text-muted); margin-top: 12px; line-height: 1.7;
}
.info-box .info-title { color: var(--accent); font-weight: 600; margin-bottom: 6px; font-size: 12px; }
/* Toast */
.toast-container {
position: fixed; top: 20px; right: 20px; z-index: 9999;
display: flex; flex-direction: column; align-items: flex-end;
gap: 8px; pointer-events: none; max-width: 400px;
}
.toast {
padding: 10px 16px; border-radius: 10px; font-size: 13px; color: white;
pointer-events: auto; animation: toastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-lg);
word-break: break-word; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
line-height: 1.5; border: 1px solid rgba(255,255,255,0.1);
}
[data-theme="light"] .toast { border: 1px solid rgba(0,0,0,0.08); }
.toast.success { background: rgba(26, 71, 42, 0.85); }
.toast.error { background: rgba(74, 20, 20, 0.85); }
.toast.warn { background: rgba(61, 42, 0, 0.85); }
.toast.info { background: rgba(13, 41, 69, 0.85); }
.toast.toast-exit { animation: toastSlideOut 0.35s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes toastSlideIn { from { transform: translateX(40px) scale(0.95); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes toastSlideOut { from { transform: translateX(0) scale(1); opacity: 1; } to { transform: translateX(40px) scale(0.95); opacity: 0; } }
/* Button Loading */
.btn-loading { pointer-events: none; opacity: 0.7; }
.btn-spinner {
display: inline-block; width: 12px; height: 12px;
border: 2px solid transparent; border-top-color: currentColor;
border-radius: 50%; animation: btnSpin 0.6s linear infinite;
vertical-align: middle; margin-left: 4px;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
/* Group Arrow */
.group-arrow {
display: inline-flex; align-items: center; justify-content: center;
transition: transform var(--spring); color: var(--text-muted);
}
.model-group.collapsed .group-arrow { transform: rotate(-90deg); }
/* Page Load Animation */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.main > * { animation: fadeInUp 0.5s var(--ease-out) both; }
.main > *:nth-child(1) { animation-delay: 0.02s; }
.main > *:nth-child(2) { animation-delay: 0.09s; }
.main > *:nth-child(3) { animation-delay: 0.16s; }
.main > *:nth-child(4) { animation-delay: 0.23s; }
.main > *:nth-child(5) { animation-delay: 0.30s; }
.main > *:nth-child(6) { animation-delay: 0.37s; }
.main > *:nth-child(7) { animation-delay: 0.44s; }
.main > *:nth-child(8) { animation-delay: 0.51s; }
/* Sidebar Actions */
.sidebar-actions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 8px; }
.batch-bar { display: none; gap: 6px; }
.batch-bar.show { display: flex; }
.batch-btn {
flex: 1; padding: 7px 10px; background: var(--bg-elevated);
border: 1px solid var(--border); color: var(--text-muted);
border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 500;
transition: all var(--transition);
}
.batch-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.batch-btn.danger { border-color: rgba(248,113,113,0.2); color: var(--red); }
.batch-btn.danger:hover { border-color: var(--red); background: rgba(248,113,113,0.04); }
.batch-deploy-btn {
display: none; padding: 10px 16px; background: var(--accent); color: #0a0e14;
font-weight: 600; border-radius: 8px; border: none; font-size: 12px; cursor: pointer;
transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.batch-deploy-btn.show { display: flex; align-items: center; justify-content: center; gap: 6px; }
.batch-deploy-btn:hover { background: #6db8ff; box-shadow: 0 4px 16px rgba(88,166,255,0.22); }
.batch-deploy-btn:active { transform: translateY(1px); }
/* Deployed Section */
.deployed-section { margin-top: 28px; }
.deployed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.deployed-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.deployed-title {
font-size: 12px; color: var(--text-secondary); letter-spacing: -0.1px;
font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.deployed-count { font-size: 11px; color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.region-block {
background: var(--bg-surface); border: 1px solid var(--border);
border-radius: 10px; padding: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
animation: slideUpFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.region-block:hover { border-color: var(--border-hover); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
@keyframes slideUpFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.region-block-header {
font-size: 13px; color: var(--text-primary); font-weight: 600; margin-bottom: 10px;
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.region-name { display: inline-flex; align-items: center; gap: 6px; }
.region-icon { opacity: 0.5; flex-shrink: 0; }
.region-block-actions {
display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
opacity: 0.75; transition: opacity 0.2s ease;
}
.region-block:hover .region-block-actions,
.region-block:focus-within .region-block-actions { opacity: 1; }
.mini-btn {
padding: 4px 10px; font-size: 11px; background: transparent;
border: 1px solid var(--border); color: var(--text-muted);
border-radius: 12px; cursor: pointer; transition: all var(--transition);
display: inline-flex; align-items: center;
}
.mini-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.mini-status { font-size: 10px; padding: 3px 8px; border-radius: 10px; font-weight: 500; }
.mini-status.green { color: var(--green); background: rgba(74, 222, 128, 0.08); }
.mini-btn.accent { border-color: rgba(88,166,255,0.2); color: var(--accent); }
.mini-btn.accent:hover { border-color: var(--accent); }
.mini-btn.purple { border-color: rgba(167,139,250,0.2); color: var(--purple); }
.mini-btn.purple:hover { border-color: var(--purple); }
.mini-btn.danger { border-color: rgba(248,113,113,0.15); color: var(--text-muted); opacity: 0.5; transition: opacity 0.15s, border-color 0.15s, color 0.15s; padding: 4px 6px; }
.region-block:hover .mini-btn.danger,
.region-block:focus-within .mini-btn.danger { opacity: 1; }
.mini-btn.danger:hover { border-color: var(--red); color: var(--red); }
.credentials-panel {
background: rgba(0, 0, 0, 0.1); border-radius: 8px;
padding: 8px 12px; margin-bottom: 10px;
border: 1px solid rgba(255, 255, 255, 0.04);
}
.cred-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.cred-label { font-size: 11px; color: var(--text-muted); width: 60px; flex-shrink: 0; }
.cred-value { font-size: 12px; color: var(--text-primary); flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cred-actions { display: flex; gap: 4px; }
.cred-btn {
background: transparent; border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text-muted); cursor: pointer; padding: 2px 8px;
border-radius: 4px; font-size: 10px; transition: all 0.2s;
white-space: nowrap; flex-shrink: 0;
}
.cred-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); border-color: rgba(255, 255, 255, 0.15); }
.section-mini-title { font-size: 10px; color: var(--text-muted); letter-spacing: 0.05em; margin-bottom: 6px; font-weight: 600; }
.deploy-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.deploy-tag {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 500;
transition: background 0.15s ease;
background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06);
color: var(--text-secondary);
}
.deploy-tag:hover { background: rgba(255, 255, 255, 0.08); }
.deploy-tag-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.deploy-tag.success .deploy-tag-dot { background: var(--green); box-shadow: 0 0 6px rgba(74, 222, 128, 0.35); }
.deploy-tag.failed .deploy-tag-dot { background: var(--red); box-shadow: 0 0 6px rgba(248, 113, 113, 0.35); }
/* 免部署模型：无需创建 deployment 即可调用 */
.deploy-tag.preprovisioned .deploy-tag-dot { background: transparent; box-shadow: none; border: 1px solid var(--green); }
.deploy-tag-del {
opacity: 0.45; margin-left: 2px; cursor: pointer; font-size: 10px; line-height: 1;
color: var(--text-muted); transition: opacity 0.15s, color 0.15s;
}
.deploy-tag:hover .deploy-tag-del { opacity: 1; }
.deploy-tag-del:hover { color: var(--red); }
/* Modal Panel */
.panel { padding: 12px 14px; background: var(--bg-elevated); border-radius: 8px; margin-bottom: 14px; }
.panel-title { font-weight: 500; margin-bottom: 4px; font-size: 13px; }
.panel-desc { font-size: 11px; color: var(--text-muted); }
.panel-row { display: flex; align-items: center; justify-content: space-between; }
/* Code Block */
.code-block {
background: var(--bg-canvas); border: 1px solid var(--border);
padding: 10px 12px; border-radius: 6px;
font-family: var(--font-mono);
font-size: 11px; color: var(--text-primary);
overflow-x: auto; white-space: pre-wrap; word-break: break-all; line-height: 1.6;
}
/* Cleanup Options */
.type-btn-group { display: flex; flex-wrap: wrap; gap: 8px; }
.type-btn {
padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border);
background: var(--bg-elevated); color: var(--text-secondary);
cursor: pointer; font-size: 12px; font-weight: 500; transition: all var(--transition);
}
.type-btn:hover { border-color: var(--border-hover); color: var(--text-primary); background: var(--bg-hover); }
.type-btn.claude:hover { border-color: rgba(249,115,22,0.4); color: var(--orange); }
.type-btn.gpt:hover { border-color: rgba(88,166,255,0.4); color: var(--accent); }
.type-btn.deepseek:hover { border-color: rgba(34,197,94,0.4); color: #22c55e; }
.type-btn.all:hover { border-color: rgba(167,139,250,0.4); color: var(--purple); }
.type-btn.empty:hover { border-color: rgba(148,163,184,0.5); color: var(--text-primary); }
/* Status Dot */
/* 状态点 = 订阅状态（唯一语义）：绿 active / 红 disabled / 灰 未知或查询中 */
.status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.status-dot.active, .status-dot.online { background: var(--green); }
.status-dot.disabled { background: var(--red); }
.status-dot.unknown { background: var(--text-muted); opacity: 0.45; }
.status-dot.loading { background: var(--text-muted); opacity: 0.45; animation: dot-pulse 1.2s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.7; } }
/* Filter / incremental render helper */
.account-item.hidden, .region-block.hidden { display: none !important; }
/* Account Checkbox */
.acc-checkbox { cursor: pointer; width: 14px; height: 14px; flex-shrink: 0; accent-color: var(--accent); }
/* Loading State */
.loading-state { text-align: center; padding: 40px; color: var(--text-muted); }
.loading-state .spinner {
width: 20px; height: 20px; border: 2px solid var(--border);
border-top-color: var(--accent); border-radius: 50%;
animation: btnSpin 0.7s linear infinite; margin: 0 auto 12px;
}
/* Skeleton Screen */
.skeleton { background: var(--bg-elevated); border-radius: 6px; position: relative; overflow: hidden; }
.skeleton::after {
content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
animation: skeletonPulse 1.8s ease-in-out infinite;
}
@keyframes skeletonPulse { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.skeleton-row { display: flex; gap: 10px; padding: 11px 12px; align-items: center; }
.skeleton-circle { width: 14px; height: 14px; border-radius: 50%; }
.skeleton-line { height: 12px; flex: 1; border-radius: 4px; }
.skeleton-line.short { flex: 0.4; }
/* Empty State */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.empty-state-icon {
width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 12px;
background: var(--bg-elevated); display: flex; align-items: center; justify-content: center;
color: var(--text-muted);
}
.empty-state-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.empty-state-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.empty-state-sm { padding: 16px 8px; }
.empty-state-sm .empty-state-icon { width: 36px; height: 36px; border-radius: 10px; }
/* ===== Utility classes (replaced inline styles) ===== */
.d-none { display: none; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 14px; }
.mt-4 { margin-top: 16px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 14px; }
.fw-600 { font-weight: 600; }
.text-green { color: var(--green); }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.divider { border: none; border-top: 1px solid var(--border); margin: 0 0 16px; }
.section-header-row {
font-size: 12px; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}
.execute-status { font-size: 12px; margin-left: 8px; }
.check-status-account { font-size: 13px; color: var(--accent); margin-left: 8px; }
.check-status-body { max-height: 60vh; overflow-y: auto; }
.cleanup-header {
margin-bottom: 10px; color: var(--text-muted); font-size: 12px;
display: flex; justify-content: space-between; align-items: center;
}
.cleanup-select-all { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.cleanup-list { max-height: 50vh; overflow-y: auto; }
.batch-summary { color: var(--text-muted); font-size: 12px; margin-bottom: 8px; }
.batch-account-list { max-height: 140px; overflow-y: auto; }
.concurrency-control { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.concurrency-slider {
flex: 1; height: 6px; -webkit-appearance: none; appearance: none;
background: var(--border); border-radius: 3px; outline: none; cursor: pointer;
}
.concurrency-slider::-webkit-slider-thumb {
-webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
background: var(--accent); cursor: pointer; border: 2px solid var(--bg-elevated);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.concurrency-slider::-moz-range-thumb {
width: 18px; height: 18px; border-radius: 50%;
background: var(--accent); cursor: pointer; border: 2px solid var(--bg-elevated);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.concurrency-value {
min-width: 28px; text-align: center; font-weight: 700; font-size: 16px;
color: var(--accent); background: var(--bg-elevated); border-radius: 6px;
padding: 2px 8px; border: 1px solid var(--border);
}
/* JS-rendered template classes */
.panel-region-title { font-weight: 500; color: var(--accent); margin-bottom: 8px; font-size: 13px; }
.panel-compact { margin-bottom: 10px; }
.check-status-sub {
font-size: 12px; color: var(--text-muted); margin-bottom: 14px;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.check-status-summary {
font-size: 11px; color: var(--text-muted); margin-bottom: 8px;
}
.cleanup-label {
display: flex; align-items: center; gap: 8px;
padding: 5px 0; font-size: 12px; cursor: pointer;
}
.batch-account-item { padding: 5px 0; font-size: 12px; color: var(--text-primary); }
.site-card {
border: 1px solid var(--border); border-radius: 8px;
padding: 14px; margin-bottom: 12px;
}
.site-card-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.site-card-header-left { display: flex; align-items: center; gap: 8px; flex: 1; }
.site-card-header-left input { width: 160px; font-weight: 600; }
.site-form-row { display: flex; align-items: flex-end; gap: 10px; }
.site-form-row > .form-group { flex: 1; margin-bottom: 0; }
.site-toggle-group { display: flex; align-items: center; gap: 6px; padding-bottom: 2px; }
.site-toggle-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
/* ---- Push modal: target site picker ---- */
.push-site-list {
border: 1px solid var(--border); border-radius: 8px;
max-height: 190px; overflow-y: auto; padding: 4px;
}
/* 选择器带上 .push-site-list，压过 .form-group label/input 的默认块级+满宽样式 */
.push-site-list .push-site-row {
display: flex; align-items: center; gap: 8px; margin: 0;
padding: 6px 8px; border-radius: 6px; cursor: pointer;
font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: normal;
}
.push-site-list .push-site-row:hover { background: var(--bg-hover, rgba(127, 127, 127, .1)); }
.push-site-list .push-site-row input[type="checkbox"] {
width: 14px; height: 14px; flex-shrink: 0; margin: 0; padding: 0; cursor: pointer;
}
.push-site-name { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.push-site-badge {
flex-shrink: 0; font-size: 10px; line-height: 1.6; padding: 0 6px;
border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted);
}
.push-site-badge-off { color: #e67e22; border-color: #e67e22; }
.push-site-warn { flex-shrink: 0; font-size: 10px; color: #e74c3c; }
.push-site-url {
margin-left: auto; font-family: var(--font-mono); font-size: 10px;
color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.push-site-row-warn .push-site-name { color: var(--text-muted); }
.push-site-actions { display: flex; gap: 6px; margin-top: 8px; }
.apikey-panel-endpoint { font-size: 12px; margin-bottom: 5px; }
.apikey-panel-key { font-size: 12px; margin-bottom: 5px; }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-primary-color { color: var(--text-primary); }
.text-mono-break { color: var(--text-primary); word-break: break-all; white-space: pre-line; }
.no-records { color: var(--text-muted); text-align: center; padding: 20px; font-size: 12px; }
.result-item-mt { margin-top: 8px; }
.local-records-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.local-records-label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.local-record-row { font-size: 11px; margin-bottom: 5px; }
/* 触屏设备没有 hover，悬浮才显形的操作会永远发现不了 */
@media (hover: none) {
.account-actions,
.models-header .models-actions,
.region-block-actions,
.mini-btn.danger,
.selected-model-remove,
.deploy-tag-del { opacity: 1; }
}
/* ---------- Confirm dialog ---------- */
.confirm-message {
font-size: 13px; line-height: 1.6; color: var(--text-secondary);
white-space: pre-line;
}
.btn-danger { background: var(--red); color: #fff; font-weight: 600; }
.btn-danger:hover { background: var(--red); filter: brightness(1.1); box-shadow: 0 4px 16px rgba(248,113,113,0.25); }
/* ---------- Log viewer ---------- */
.log-wrap { position: relative; }
.log-jump {
position: absolute; right: 14px; bottom: 12px;
padding: 4px 10px; font-size: 11px; font-weight: 500;
background: var(--accent); color: #0a0e14; border: none;
border-radius: 12px; cursor: pointer; box-shadow: var(--shadow-lg);
animation: fadeInUp 0.2s var(--ease-out);
}
[data-theme="light"] .log-jump { color: #fff; }
/* 长表单弹窗里标题和操作按钮不应随内容滚走 */
.modal-content > .modal-title {
position: sticky; top: -28px; z-index: 2;
background: var(--bg-surface); margin: -28px -28px 22px; padding: 28px 28px 14px;
border-bottom: 1px solid var(--border);
}
.modal-content > .btn-group:last-child {
position: sticky; bottom: -28px; z-index: 2;
background: var(--bg-surface); margin: 22px -28px -28px; padding: 14px 28px 28px;
border-top: 1px solid var(--border);
}
/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ==================== Responsive ==================== */
/* 弹窗固定像素宽 → 永远给视口留出边距 */
.modal-sm { width: min(480px, 100% - 32px); }
.modal-md { width: min(540px, 100% - 32px); }
.modal-lg { width: min(600px, 100% - 32px); }
.modal-xl { width: min(680px, 100% - 32px); }
.modal-apikey { width: min(660px, 100% - 32px); }
@media (max-width: 1100px) {
.main { padding: 32px 28px; }
.region-select-menu { grid-template-columns: repeat(3, 1fr); }
}
/* 侧栏与主区并排放不下了 → 改为上下堆叠 */
@media (max-width: 900px) {
.container { flex-direction: column; min-height: 0; }
.sidebar {
width: auto; height: auto; max-height: none;
margin: 12px 12px 0; box-shadow: var(--shadow-md);
}
/* 桌面布局用 margin-top:auto 把操作区顶到底部；堆叠后侧栏应贴合内容 */
.sidebar-actions { margin-top: 10px; }
.account-list { flex: 0 1 auto; max-height: 38vh; }
.main { height: auto; margin: 12px; padding: 28px 20px; }
.region-select-menu { grid-template-columns: repeat(2, 1fr); }
.page-title { font-size: 21px; }
}
@media (max-width: 640px) {
.sidebar { margin: 8px 8px 0; padding: 16px 12px 12px; }
.main { margin: 8px; padding: 20px 14px; }
.region-select-menu { grid-template-columns: 1fr; max-height: 60vh; overflow-y: auto; }
/* 部署药丸条：固定宽按钮改为等分 */
.deploy-section { flex-wrap: wrap; width: auto; border-radius: var(--radius-lg); padding: 10px 12px; }
.btn-deploy, .btn-dual-region, .btn-oneclick-trigger { width: auto; flex: 1; min-width: 96px; }
.dropdown { flex: 1; }
.dropdown-menu { left: auto; right: 0; }
/* 已选模型行：横排放不下，改为纵向堆叠 */
.selected-model-item { align-items: stretch; flex-direction: column; gap: 8px; }
.selected-model-deploy-name, .selected-model-tpm { justify-content: space-between; }
.selected-model-deploy-name input { width: 100%; flex: 1; }
.selected-model-tpm input { width: 90px; }
.selected-model-remove { align-self: flex-end; }
/* 弹窗贴底展示，减少内边距 */
.modal { align-items: flex-end; }
.modal-content {
width: 100%; max-width: 100%; max-height: 92vh;
border-radius: 16px 16px 0 0; padding: 20px;
}
.modal-content > .modal-title { top: -20px; margin: -20px -20px 16px; padding: 20px 20px 12px; }
.modal-content > .btn-group:last-child { bottom: -20px; margin: 16px -20px -20px; padding: 12px 20px 20px; }
.btn-group { flex-wrap: wrap; }
.modal-sm, .modal-md, .modal-lg, .modal-xl, .modal-apikey { width: 100%; }
.cred-row { flex-wrap: wrap; gap: 6px; }
.cred-value { flex-basis: 100%; }
}