/* ============================================================
   外贸内容工作台 · 明色主题（macOS 风格）
   移植自桌面端 agent/styles.py 与 agent/panels.py
   ============================================================ */

:root {
    /* 背景 / 卡片 */
    --bg:        #f5f5f7;   /* Apple 经典窗口背景 */
    --bg-soft:   #f6f8fa;   /* 工具栏 / 浅灰面 */
    --bg-card:   #ffffff;
    --bg-hover:  #ececf0;
    --border:    rgba(0, 0, 0, .08);
    --border-2:  #d0d7de;
    /* 文字 */
    --text:      #1d1d1f;
    --text-dim:  #57606a;
    --text-mute: #6e6e73;
    /* 强调色 */
    --accent:    #007aff;   /* Apple 蓝 */
    --accent-2:  #0969da;   /* GitHub 蓝（链接） */
    --focus:     #4cc2ff;   /* focus 蓝光 */
    --ok:        #2da44e;
    --warn:      #b45309;
    --bad:       #cf222e;
    /* 圆角 */
    --radius:    10px;
    --radius-sm: 7px;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --font: "SF Pro Display", "SF Pro Text", "Helvetica Neue",
            "Segoe UI Variable", "Segoe UI", "PingFang SC",
            "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font: 13.5px/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: #0a58c9; }

code, .mono { font-family: var(--mono); font-size: 12.5px; }

code {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    padding: 1px 5px;
    border-radius: 4px;
    color: #1f2328;
}

/* ── 滚动条（macOS 细条）────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.40); }
::-webkit-scrollbar-track { background: transparent; }

/* ── 布局骨架 ───────────────────────────────────────────── */

.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 22px 28px 60px;
    min-width: 0;
}

/* ── 顶部工具栏 ─────────────────────────────────────────── */

.topbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border-2);
    padding: 6px 12px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .2px;
    white-space: nowrap;
}

.brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--ok));
    box-shadow: 0 0 8px rgba(0, 122, 255, .5);
}

.brand-name { color: var(--text); }

.tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: #1f2328;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.tb-btn:hover { background: rgba(0, 0, 0, .06); color: var(--accent-2); }

.tb-btn.active {
    background: rgba(0, 122, 255, .12);
    border-color: rgba(0, 122, 255, .28);
    color: var(--accent);
    font-weight: 600;
}

.tb-project {
    font-weight: 700;
    font-size: 13.5px;
    color: #1f2328;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.tb-project:hover { color: var(--accent-2); }

.tb-sep {
    width: 1px;
    height: 20px;
    background: rgba(0, 0, 0, .12);
    margin: 0 6px;
    flex: 0 0 auto;
}

.tb-spacer { flex: 1; }

.tb-user {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, .10);
    background: rgba(0, 0, 0, .03);
    color: #1f2328;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-icon { width: 16px; text-align: center; opacity: .9; }

/* ── 配置中心条 ─────────────────────────────────────────── */

.cfgbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border-2);
    padding: 5px 12px;
}

.cfg-label {
    color: var(--text-mute);
    font-size: 12px;
    font-weight: 600;
    margin-right: 4px;
    white-space: nowrap;
}

.cfg-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 0, 0, .10);
    background: linear-gradient(180deg, #ffffff, #f5f5f7);
    color: #1f2328;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.cfg-btn:hover {
    background: linear-gradient(180deg, #f5f5f7, #e8e8ec);
    border-color: rgba(0, 0, 0, .16);
    color: var(--accent-2);
}
.cfg-btn.active {
    background: rgba(0, 122, 255, .12);
    border-color: rgba(0, 122, 255, .30);
    color: var(--accent);
}

/* ── Agent 卡片行 ───────────────────────────────────────── */

/* Agent 区折叠标题 */
.agent-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: linear-gradient(180deg, #ffffff, #f5f5f7);
    border-bottom: 1px solid var(--border-2);
    border-top: 1px solid var(--border-2);
    color: var(--text-dim);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.agent-toggle:hover { color: var(--accent-2); background: #f0f0f3; }
.agent-toggle .at-arrow { display: inline-block; transition: transform .15s; }
.agent-toggle.collapsed .at-arrow { transform: rotate(-90deg); }

.agent-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
    background: #ffffff;
    border-bottom: 1px solid var(--border-2);
    padding: 8px 12px;
}

.agent-divider {
    width: 1px;
    background: var(--border-2);
    margin: 0 12px;
    flex: 0 0 auto;
}

.agent-card {
    display: block;
    flex: 0 0 auto;
    min-width: 220px;
    max-width: 280px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 2px dashed var(--border-2);
    background: #ffffff;
    color: var(--text);
    text-decoration: none;
    transition: border-style .1s, box-shadow .12s;
}
.agent-card:hover { border-style: solid; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); color: var(--text); }

.ac-top { display: flex; align-items: center; gap: 6px; }
.ac-lock { color: var(--text-dim); font-size: 15px; line-height: 1; }
.ac-icon { font-size: 19px; line-height: 1; }
.ac-status { margin-left: auto; font-size: 13px; font-weight: 700; }

.ac-name-row { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.ac-name { font-weight: 700; font-size: 15px; color: var(--text); }

.ac-badge {
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    line-height: 1.5;
}

.ac-desc { color: var(--text-dim); font-size: 12px; margin-top: 2px; }

/* 独立区主题：紫=竞品分析 · 蓝=GEO关键词 · 玫红=SEO长尾词 · 琥珀=发布计划 */
.agent-card.purple { border-color: #8250df; background: #fbf7ff; }
.agent-card.purple .ac-status { color: #8250df; }
.agent-card.purple .ac-badge  { background: #f3e8ff; color: #8250df; }
.agent-card.purple:hover { border-color: #6639c0; }

.agent-card.blue { border-color: #2563eb; background: #eff6ff; }
.agent-card.blue .ac-status { color: #2563eb; }
.agent-card.blue .ac-badge  { background: #dbeafe; color: #2563eb; }
.agent-card.blue:hover { border-color: #1d4ed8; }

.agent-card.rose { border-color: #db2777; background: #fdf2f8; }
.agent-card.rose .ac-status { color: #db2777; }
.agent-card.rose .ac-badge  { background: #fce7f3; color: #db2777; }
.agent-card.rose:hover { border-color: #be185d; }

.agent-card.amber { border-color: #b45309; background: #fffbeb; }
.agent-card.amber .ac-status { color: #b45309; }
.agent-card.amber .ac-badge  { background: #fef3c7; color: #b45309; }
.agent-card.amber:hover { border-color: #92400e; }

/* 主流程卡片（主编） */
.agent-card.pipeline { border: 2px solid var(--border-2); background: #ffffff; }
.agent-card.pipeline .ac-status { color: #8c959f; }

/* ── 底部状态栏 ─────────────────────────────────────────── */

.statusbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(245, 245, 247, .96);
    border-top: 1px solid rgba(0, 0, 0, .08);
    color: var(--text-mute);
    font-size: 12px;
    padding: 5px 14px;
    position: sticky;
    bottom: 0;
    z-index: 40;
}
.sb-dot { color: var(--ok); font-size: 15px; line-height: 1; }
.sb-dot.bad { color: var(--bad); }
.sb-item { color: var(--text-dim); }
.sb-spacer { flex: 1; }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    border: 1px solid var(--border-2);
    background: #ffffff;
    color: var(--text-dim);
    white-space: nowrap;
}
.status-pill.ok  { color: #1a7f37; border-color: #aceebb; background: #dafbe1; }
.status-pill.bad { color: var(--bad); border-color: #ffcecb; background: #ffebe9; }

/* 底部状态栏内的可点击入口（如「📋 生成任务」） */
.sb-task { font-family: inherit; cursor: pointer; }
.sb-task:hover { color: var(--text); border-color: var(--accent); }

/* ── 页头 ───────────────────────────────────────────────── */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.page-head h1 { margin: 0 0 4px; font-size: 22px; font-weight: 650; letter-spacing: -.2px; }
.page-head .sub { margin: 0; color: var(--text-dim); font-size: 13.5px; }
.head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── 卡片 ───────────────────────────────────────────────── */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.grid .card { margin-bottom: 0; }

.card-title {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mute);
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, .012);
}

.card-body { padding: 14px 16px; }

/* ── 键值行 ─────────────────────────────────────────────── */

.kv {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .06);
}
.kv:last-child { border-bottom: none; }

.kv .k { flex: 0 0 92px; color: var(--text-mute); font-size: 12.5px; }
.kv .v { flex: 1; min-width: 0; word-break: break-all; font-size: 13px; }

/* ── 标签 ───────────────────────────────────────────────── */

.tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 20px;
    font-size: 11.5px;
    line-height: 1.7;
    border: 1px solid var(--border-2);
    background: var(--bg-soft);
    color: var(--text-dim);
}
.tag-ok   { color: #1a7f37; background: #dafbe1; border-color: #aceebb; }
.tag-bad  { color: var(--bad); background: #ffebe9; border-color: #ffcecb; }
.tag-soon { color: #9a6700; background: #fff8c5; border-color: #f5e08a; }
.tag-phase{ color: var(--accent-2); background: #ddf4ff; border-color: #b6e3ff; margin-right: 6px; }

/* ── 提示条 ─────────────────────────────────────────────── */

.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13.5px;
    border: 1px solid;
}
.alert-warn { color: #9a6700; background: #fff8c5; border-color: #f5e08a; }
.alert-bad  { color: #a40e26; background: #ffebe9; border-color: #ffcecb; }

.note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
}
.note-label { color: var(--text-mute); font-size: 12px; }

/* ── 芯片 ───────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid var(--border-2);
    font-size: 12.5px;
    color: var(--text-dim);
}
.chip-active {
    color: var(--accent);
    border-color: rgba(0, 122, 255, .45);
    background: rgba(0, 122, 255, .10);
    font-weight: 600;
}

/* ── 卡密套餐预设 ───────────────────────────────────────── */

.cc-pkg { cursor: pointer; font: inherit; font-size: 12.5px; text-align: left; line-height: 1.6; }
.cc-pkg-name  { font-weight: 600; color: var(--text); }
.cc-pkg-price { color: var(--accent); font-weight: 600; }
.cc-pkg-desc  { color: var(--text-mute); font-size: 11.5px; }
.cc-pkg.active { color: var(--accent); border-color: rgba(0, 122, 255, .45); background: rgba(0, 122, 255, .10); font-weight: 600; }
.cc-pkg.active .cc-pkg-name { color: var(--accent); }
.cc-calc {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--text-dim);
}
.cc-calc b { color: var(--text); font-weight: 600; }
.cc-calc .accent { color: var(--accent); font-weight: 600; }

/* ── 按钮 ───────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f5f5f7);
    border: 1px solid rgba(0, 0, 0, .10);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: linear-gradient(180deg, #f5f5f7, #e8e8ec); border-color: rgba(0, 0, 0, .16); color: var(--text); }
.btn:active { background: linear-gradient(180deg, #dcdce0, #e8e8ec); }

/* ── 功能清单 ───────────────────────────────────────────── */

.feature-list { margin: 0; padding-left: 20px; }
.feature-list li { padding: 3px 0; color: var(--text-dim); font-size: 13.5px; }

/* ── 新手教程 / 帮助中心：彩色主题 ───────────────────────── */

/* 顶部主卡：彩色渐变 */
.guide-hero {
    border: 0;
    background: linear-gradient(135deg, #6d5bd0 0%, #2563eb 58%, #0ea5e9 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(79, 70, 229, .22);
}
.guide-hero .card-title {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-bottom-color: rgba(255, 255, 255, .24);
}
.guide-hero .card-body p { color: rgba(255, 255, 255, .95); }
.guide-hero .muted { color: rgba(255, 255, 255, .82); }
.guide-hero .btn-primary { background: #fff; color: #4c3fb0; border-color: #fff; }
.guide-hero .btn-primary:hover { background: #f2effc; color: #3b2f96; }

/* Agent 教程卡：左侧彩色竖条 + 同色标题栏 */
.guide-agent { border-left: 4px solid var(--border); }
.guide-agent.purple { border-left-color: #8250df; }
.guide-agent.purple .card-title { color: #8250df; background: #f7f1ff; }
.guide-agent.blue   { border-left-color: #2563eb; }
.guide-agent.blue   .card-title { color: #2563eb; background: #eef4ff; }
.guide-agent.rose   { border-left-color: #db2777; }
.guide-agent.rose   .card-title { color: #db2777; background: #fdf1f7; }
.guide-agent.amber  { border-left-color: #b45309; }
.guide-agent.amber  .card-title { color: #b45309; background: #fff8e8; }

/* 快速入口：每条一个彩色圆点（文字仍为原色，避免花哨） */
.guide-links { list-style: none; padding-left: 4px; }
.guide-links > li { position: relative; padding-left: 20px; }
.guide-links > li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dot, #2563eb);
    opacity: .8;
}
.guide-links > li:nth-child(1) { --dot: #8250df; }
.guide-links > li:nth-child(2) { --dot: #2563eb; }
.guide-links > li:nth-child(3) { --dot: #0d9488; }
.guide-links > li:nth-child(4) { --dot: #db2777; }
.guide-links > li:nth-child(5) { --dot: #b45309; }

/* 常见问题：每条左侧彩色竖条 */
.guide-faq { list-style: none; padding-left: 0; }
.guide-faq > li {
    border-left: 3px solid #94a3b8;
    background: rgba(0, 0, 0, .016);
    border-radius: 0 6px 6px 0;
    padding: 8px 12px;
    margin-bottom: 8px;
}
.guide-faq > li:nth-child(1) { border-left-color: #f59e0b; }
.guide-faq > li:nth-child(2) { border-left-color: #ef4444; }
.guide-faq > li:nth-child(3) { border-left-color: #2563eb; }
.guide-faq > li:nth-child(4) { border-left-color: #0d9488; }

/* 教程弹层：5 步标题分色 */
.guide-steps > li:nth-child(1) > strong { color: #8250df; }
.guide-steps > li:nth-child(2) > strong { color: #2563eb; }
.guide-steps > li:nth-child(3) > strong { color: #0d9488; }
.guide-steps > li:nth-child(4) > strong { color: #db2777; }
.guide-steps > li:nth-child(5) > strong { color: #b45309; }

.muted { color: var(--text-mute); font-size: 13px; margin: 0; }

/* ── 错误页 ─────────────────────────────────────────────── */

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 90px 20px;
    gap: 14px;
}
.error-code { font-size: 54px; font-weight: 700; color: var(--text-mute); letter-spacing: 2px; }
.error-msg { color: var(--text-dim); margin-bottom: 8px; }

/* ============================================================
   P1 素材层 · 通用组件
   ============================================================ */

/* ── 表单控件 ───────────────────────────────────────────── */

.input, .select, .textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    padding: 8px 11px;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.input:hover, .select:hover, .textarea:hover { border-color: rgba(0, 0, 0, .22); }
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 1px var(--focus);
}
.input::placeholder, .textarea::placeholder { color: #a1a1a6; }
.textarea { resize: vertical; line-height: 1.7; min-height: 110px; }
.textarea.mono, .input.mono { font-family: var(--mono); font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.select { appearance: none; cursor: pointer; padding-right: 30px; }

.form-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-row .input { flex: 1; min-width: 180px; }
.form-row .select { flex: 0 0 auto; }

.field { margin-bottom: 12px; }
.field > label { display: block; font-size: 12px; color: var(--text-mute); margin-bottom: 5px; }

/* ── 工具条 ─────────────────────────────────────────────── */

.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, .012);
}
.toolbar .spacer { flex: 1; }
.toolbar .count { color: var(--text-mute); font-size: 12.5px; }

/* ── 按钮补充 ───────────────────────────────────────────── */

.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-primary {
    background: linear-gradient(180deg, #3b9bff, #007aff);
    border-color: #0066d6;
    color: #ffffff;
}
.btn-primary:hover { background: linear-gradient(180deg, #2f8fff, #0066d6); border-color: #0059bd; color: #ffffff; }
.btn-danger { background: #ffffff; border-color: rgba(207, 34, 46, .40); color: var(--bad); }
.btn-danger:hover { background: #ffebe9; border-color: var(--bad); color: #a40e26; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── 关键词列表 ─────────────────────────────────────────── */

/* 关键词页：两列固定等高（内容超出时内部滚动）
   注意：.split 在本文件更靠后定义了 align-items:start，会覆盖 .split-stretch 的
   stretch，所以高度直接写在卡片上，不依赖父级拉伸。 */
.split-stretch > .card { height: 460px; display: flex; flex-direction: column; }
.split-stretch > .card > .card-body { display: flex; flex-direction: column; min-height: 0; }
.split-stretch > .card > .card-body > .field { flex: 1; display: flex; flex-direction: column; }
.kw-list-body { flex: 1; min-height: 0; }
.kw-paste { flex: 1; min-height: 0; resize: none; }
/* 卡片内「填充剩余高度并内部滚动」的通用钩子（生成页模板/关键词列表） */
.split-fill { flex: 1; min-height: 0; }
.split-scroll { flex: 1; min-height: 0; overflow-y: auto; }

/* 窗口过矮或窄屏（单列堆叠）时，取消固定高度 */
@media (max-height: 820px) {
    .split-stretch > .card { height: 400px; }
}
@media (max-width: 980px) {
    .split-stretch > .card { height: auto; }
    .kw-paste { min-height: 160px; }
    .split-scroll, .kw-list { max-height: 360px; }
}

/* 生成页：左右两卡比默认再高 50px */
.gk-tall > .card { height: 510px; }
@media (max-height: 820px) {
    .gk-tall > .card { height: 450px; }
}

/* ── 发布计划页：左右两栏等高 + 内部滚动 ───────────────── */
/* 注意：.split 在本文件后部定义了 align-items:start，用双类提升优先级覆盖 */
.split.pp-split { align-items: stretch; }
.split.pp-split > div { display: flex; flex-direction: column; min-height: 0; height: 620px; }
.split.pp-split .tab-panel { flex: 1; min-height: 0; overflow-y: auto; }
/* 关键：面板内卡片撑满面板高度，卡片体内部滚动，两栏才真正等高 */
.split.pp-split .tab-panel.active { display: flex; }
.split.pp-split .tab-panel > .card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.split.pp-split .tab-panel > .card > .card-body { flex: 1; min-height: 0; overflow-y: auto; }

/* 左栏底部统一操作栏：跨 3 个 tab 始终可见，固定在面板下方 */
.pp-bottom-ops {
    flex: 0 0 auto;
    margin-top: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 -4px 12px rgba(15,23,42,.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pp-bottom-ops #pp-btn-plan,
.pp-bottom-ops #pp-btn-exec { width: 100%; }
.pp-progress { display: flex; align-items: center; gap: 8px; }
.pp-progress-bar { flex: 1; height: 10px; background: #eef1f6; border-radius: 6px; overflow: hidden; }
.pp-progress-bar > div { width: 0; height: 100%; background: #3b82f6; transition: width .25s; }
.pp-progress .muted { min-width: 44px; text-align: right; font-size: 12.5px; }

@media (max-height: 820px) {
    .split.pp-split > div { height: 520px; }
}
@media (max-width: 980px) {
    .split.pp-split > div { height: auto; }
    .split.pp-split .tab-panel { max-height: 480px; }
}

/* ── 生成工作台：彩色层次 ───────────────────────────────── */

/* 左卡「生成配置」紫色标题栏，「模板」琥珀标题栏 */
.gk-cfg-card > .card-title:nth-of-type(1) { color: #8250df; background: #f7f1ff; border-bottom-color: #e6dbff; }
.gk-cfg-card > .card-title.gk-tpl-title { color: #b45309; background: #fff8e8; border-bottom-color: #f3e3bd; }

/* 右卡「关键词」蓝色标题栏 */
.gk-kw-card > .card-title { color: #2563eb; background: #eef4ff; border-bottom-color: #d7e5fb; }

/* 模板 / 关键词条目：悬停与勾选高亮 */
#gk-tpls label:hover, .gk-item:hover { background: rgba(37, 99, 235, .06); }
#gk-tpls label:has(.gk-tpl:checked) { background: rgba(180, 83, 9, .08); }
.gk-item:has(.gk-check:checked) { background: rgba(37, 99, 235, .10); }
#gk-tpls input[type=checkbox], .gk-item input[type=checkbox] { accent-color: #2563eb; width: 15px; height: 15px; }
#gk-tpls input[type=checkbox] { accent-color: #b45309; }

/* 「已选」计数用主题蓝 */
#gk-selected { color: #2563eb; font-weight: 600; }

/* ── 指令与预览页：彩色层次 ─────────────────────────────── */

/* 页头占位符改为彩色胶囊 */
.pm-ph {
    display: inline-block;
    padding: 2px 9px;
    margin-right: 4px;
    border-radius: 999px;
    background: #f7f1ff;
    border: 1px solid #e6dbff;
    color: #8250df;
    font-size: 12px;
}
.pm-ph:nth-of-type(2) { background: #eef4ff; border-color: #d7e5fb; color: #2563eb; }
.pm-ph:nth-of-type(3) { background: #f0fdfa; border-color: #ccefe9; color: #0d9488; }
.pm-ph:nth-of-type(4) { background: #fff8e8; border-color: #f3e3bd; color: #b45309; }
.pm-ph:nth-of-type(5) { background: #fdf1f7; border-color: #f6d7e8; color: #db2777; }
.pm-ph:nth-of-type(6) { background: #eefaf0; border-color: #cdeed6; color: #15803d; }

/* 「选择指令」紫色标题栏 */
.pm-pick-card > .card-title { color: #8250df; background: #f7f1ff; border-bottom-color: #e6dbff; }
/* 「模板原文」蓝色标题栏 */
.pm-tpl-card > .card-title { color: #2563eb; background: #eef4ff; border-bottom-color: #d7e5fb; }
/* 「渲染结果」青色标题栏 */
.pm-out-card > .card-title { color: #0d9488; background: #f0fdfa; border-bottom-color: #ccefe9; }
/* 渲染结果字数徽标 */
#pm-len { color: #0d9488; }

/* 三个弹层头部淡彩 */
#pm-create-modal .modal-head { background: linear-gradient(135deg, #f0fdfa, #eef4ff); }
#pm-rename-modal .modal-head { background: linear-gradient(135deg, #eef4ff, #f4f2ff); }
#pm-content-modal .modal-head { background: linear-gradient(135deg, #f7f1ff, #fdf1f7); }

/* 「创作说明」卡片：分段标题 + 列表 + 小节底色 */
#pm-panel-guide .card-title { color: #0d9488; background: #f0fdfa; border-bottom-color: #ccefe9; }
.pm-guide-body { color: var(--text-dim); }
.pm-guide-sec { margin-bottom: 12px; }
.pm-guide-h {
    font-weight: 700;
    font-size: 13px;
    color: #8250df;
    background: #f7f1ff;
    border: 1px solid #e6dbff;
    border-radius: 6px;
    padding: 3px 10px;
    display: inline-block;
    margin-bottom: 6px;
}
.pm-guide-sec:nth-of-type(2) .pm-guide-h { color: #2563eb; background: #eef4ff; border-color: #d7e5fb; }
.pm-guide-sec:nth-of-type(3) .pm-guide-h { color: #0d9488; background: #f0fdfa; border-color: #ccefe9; }
.pm-guide-ul { margin: 4px 0 0 2px; padding-left: 18px; }
.pm-guide-ul li { margin: 4px 0; line-height: 1.65; }

/* ── 模型设置页：彩色层次 ───────────────────────────────── */

/* 「当前生效值」蓝色标题栏，「修改参数」紫色标题栏 */
.sm-view-card > .card-title { color: #2563eb; background: #eef4ff; border-bottom-color: #d7e5fb; }
.sm-edit-card > .card-title { color: #8250df; background: #f7f1ff; border-bottom-color: #e6dbff; }

/* 生效值：键名彩色圆点，值加浅底徽标 */
.sm-view-card .kv { padding: 6px 0; }
.sm-view-card .kv .k { position: relative; padding-left: 15px; color: var(--text-dim); }
.sm-view-card .kv .k::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot, #2563eb);
}
.sm-view-card .kv:nth-of-type(1) .k { --dot: #8250df; }
.sm-view-card .kv:nth-of-type(2) .k { --dot: #2563eb; }
.sm-view-card .kv:nth-of-type(3) .k { --dot: #0d9488; }
.sm-view-card .kv:nth-of-type(4) .k { --dot: #b45309; }
.sm-view-card .kv:nth-of-type(5) .k { --dot: #db2777; }
.sm-view-card .kv .v.mono {
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
}

/* 输入框聚焦时边框用主题紫 */
.sm-edit-card .input:focus, .sm-edit-card .select:focus { border-color: #8250df; box-shadow: 0 0 0 3px rgba(130, 80, 223, .12); }

/* 任务弹层：表头渐变；结果弹层：头部淡彩 */
#gk-tasks-modal .table thead th { background: linear-gradient(180deg, #f8f9ff, #edf0fa); color: #475569; }
#gk-tasks-modal .table tbody tr:hover { background: rgba(37, 99, 235, .05); }
#gk-modal .modal-head { background: linear-gradient(135deg, #f4f2ff, #eaf3ff); }
#gk-tasks-modal .modal-head { background: linear-gradient(135deg, #fff8e8, #f4f2ff); }

.kw-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; }
.kw-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    border-bottom: 1px dashed rgba(0, 0, 0, .06);
    font-size: 13.5px;
}
.kw-list li:last-child { border-bottom: none; }
.kw-list li:hover { background: var(--bg-soft); }
.kw-list input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; flex: 0 0 auto; }
.kw-text { flex: 1; min-width: 0; word-break: break-all; }
.kw-idx { flex: 0 0 34px; text-align: right; color: var(--text-mute); font-family: var(--mono); font-size: 11.5px; }
.kw-empty { justify-content: center; color: var(--text-mute); padding: 26px 16px; }

/* ── 关键词页：彩色层次 ─────────────────────────────────── */

/* 来源开关：选中态用主题紫，尺寸略放大以突出 */
.kw-src .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; font-size: 13px; }
.kw-src .chip-active {
    color: #8250df;
    border-color: rgba(130, 80, 223, .45);
    background: rgba(130, 80, 223, .10);
}

/* 列表卡：紫色标题栏 */
.kw-list-card > .card-title { color: #8250df; background: #f7f1ff; border-bottom-color: #e6dbff; }
/* 批量新增卡：青色标题栏 */
.kw-add-card > .card-title { color: #0d9488; background: #f0fdfa; border-bottom-color: #ccefe9; }

/* 关键词条目：序号徽标 + 悬停 / 选中高亮 */
.kw-list li:hover { background: rgba(130, 80, 223, .06); }
.kw-list li:has(.kw-check:checked) { background: rgba(130, 80, 223, .12); }
.kw-idx {
    flex: 0 0 auto;
    min-width: 32px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    text-align: center;
    font-family: var(--mono);
    font-size: 11.5px;
}
.kw-list li:has(.kw-check:checked) .kw-idx { background: #e9e3ff; color: #6d4bd0; }

/* 工具条「已选」计数用主题色 */
#kw-selected { color: #8250df; font-weight: 600; }

/* ── 数据表 ─────────────────────────────────────────────── */

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th {
    color: var(--text-mute);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    background: var(--bg-soft);
}
.table tbody tr:hover { background: var(--bg-soft); }
.table td.num { color: var(--text-mute); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.table td.actions { white-space: nowrap; }
.table .col-check { width: 34px; }
.table input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }

/* ── 下载文章（历史记录）：彩色层次 ─────────────────────── */

/* 页头统计胶囊 */
.hs-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.hs-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 9px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--hs, #2563eb);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--text-dim);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.hs-stat b { font-size: 17px; font-weight: 700; line-height: 1; color: var(--hs, #2563eb); }
.hs-stat.purple { --hs: #8250df; }
.hs-stat.blue   { --hs: #2563eb; }
.hs-stat.teal   { --hs: #0d9488; }
.hs-stat.amber  { --hs: #b45309; }

/* 文章列表：表头渐变 + 悬停 / 选中高亮 */
.hs-table thead th {
    background: linear-gradient(180deg, #f8f9ff, #edf0fa);
    color: #475569;
}
.hs-table tbody tr:hover { background: rgba(130, 80, 223, .07); }
.hs-table tbody tr:has(.hs-check:checked) { background: rgba(130, 80, 223, .12); }

/* 关键词胶囊 / 字符数徽标 */
.hs-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    border: 1px solid #dbeafe;
    color: #2563eb;
    font-size: 12.5px;
}
.hs-len {
    display: inline-block;
    min-width: 46px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    text-align: right;
}

/* 工具条「已选」计数用主题色 */
#hs-selected { color: #8250df; font-weight: 600; }

/* 详情弹层：头部淡彩 */
#hs-modal .modal-head { background: linear-gradient(135deg, #f4f2ff, #eaf3ff); }

/* 列表卡片增加最小高度，让一页 20 条有足够空间 */
section.card:has(.hs-table) { min-height: 560px; }
section.card:has(.hs-table) .card-body { min-height: 480px; }

/* ── 翻页条 ─────────────────────────────────────────────── */
.hs-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
}
.hs-pg-btn, .hs-pg-num {
    display: inline-flex;
    align-items: center;
    min-width: 32px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
    transition: all .15s;
}
.hs-pg-btn:hover, .hs-pg-num:hover { border-color: #8250df; color: #8250df; }
.hs-pg-num.active {
    background: #8250df;
    border-color: #8250df;
    color: #fff;
    font-weight: 600;
}
.hs-pg-btn.disabled {
    opacity: .4;
    pointer-events: none;
}
.hs-pg-gap { color: var(--text-dim); padding: 0 2px; }
.hs-pg-info { margin-left: auto; color: var(--text-dim); font-size: 12px; }
.hs-pg-jump { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 12px; color: var(--text-dim); }
.hs-pg-jump-input { width: 64px; height: 30px; padding: 0 8px; }

/* ── 标签页 ─────────────────────────────────────────────── */

.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid var(--border); }
.tab {
    padding: 7px 14px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--text-mute);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.tab:hover { color: var(--text); background: rgba(0, 0, 0, .04); }
.tab.active {
    color: var(--accent);
    background: var(--bg-card);
    border-color: var(--border);
    border-bottom: 2px solid var(--accent);
    font-weight: 600;
    position: relative;
    top: 1px;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── 代码 / 预览 ────────────────────────────────────────── */

.pre {
    margin: 0;
    padding: 14px 16px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: auto;
    max-height: 520px;
    color: #1f2328;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── 项目卡片 ───────────────────────────────────────────── */

.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.proj-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 15px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.proj-card.current { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(0, 122, 255, .32); }
.proj-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proj-name { font-size: 15px; font-weight: 600; }
.proj-meta { font-size: 12.5px; color: var(--text-mute); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.proj-meta.mono { font-family: var(--mono); font-size: 11.5px; word-break: break-all; }
.proj-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* ── 弹层 ───────────────────────────────────────────────── */

.modal-mask {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .35);
    z-index: 100;
}
.modal-mask.show { display: flex; }
.modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 860px;
    max-height: 86vh;
    background: var(--bg-card);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    overflow: hidden;
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 14px; font-weight: 600; }
.modal-body { padding: 16px; overflow: auto; }
.modal-foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.modal-close { background: none; border: none; color: var(--text-mute); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.modal-close:hover { color: var(--text); }

/* ── Toast ──────────────────────────────────────────────── */

.toast-wrap { position: fixed; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast {
    max-width: 380px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}
.toast.ok  { border-color: #aceebb; color: #1a7f37; background: #dafbe1; }
.toast.err { border-color: #ffcecb; color: #a40e26; background: #ffebe9; }

/* ── 分节 / 分栏 ────────────────────────────────────────── */

.section-title {
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    color: var(--text-mute);
    font-size: 12.5px;
    font-weight: 600;
}
.section-title:first-child { margin-top: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; } }

/* Agent 工作台：左右两列等高 —— 右侧「任务列表」与左侧表单同高
   （.split 在上面定义了 align-items:start，故用双类提高优先级覆盖） */
.split.split-eq { align-items: stretch; }
.split.split-eq > .card.ag-tasks-card { display: flex; flex-direction: column; }
.split.split-eq > .card.ag-tasks-card > .card-body { flex: 1; min-height: 0; overflow-y: auto; }

/* 双列表单：字段两列排布 */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
@media (max-width: 980px) { .field-grid { grid-template-columns: 1fr; } }

.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }

/* ── 算力中心：三卡横排 + 流水整行 ─────────────────────── */
.cr-cell { display: flex; flex-direction: column; }
.cr-cell .card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cr-cell .card-body .field:first-child { flex: 1; }
.cr-log-cell { grid-column: 1 / -1; }
@media (max-width: 980px) {
    .cr-cell { grid-column: 1 / -1; }
}

/* ── 响应式：小屏收起工具栏图标间距 ─────────────────────── */
@media (max-width: 760px) {
    .main { padding: 16px 14px 60px; }
    .tb-btn, .cfg-btn { font-size: 12.5px; padding: 5px 9px; }
    .agent-card { min-width: 180px; }
}

/* ── 卡密管理：移动端只显示 卡号 / 面额 / 售价 / 复制 ────── */
@media (max-width: 640px) {
    .cc-stats { grid-template-columns: repeat(2, 1fr) !important; }
    .cc-col-check, .cc-col-used, .cc-col-usedat,
    .cc-col-exp, .cc-col-batch { display: none; }
    .cc-m-hide { display: none !important; }
    .cc-col-code { word-break: break-all; }
    .cc-col-ops { white-space: nowrap; }
    #cc-f-status, #cc-f-batch { flex: 1 1 45%; }
}

/* ── 指令页左右布局：左=Tab预览(模板原文/渲染结果)，右=选择指令 ── */
.split.pm-split { align-items: stretch; }
.split.pm-split > div { display: flex; flex-direction: column; min-height: 0; height: 650px; max-height: calc(100vh - 190px); }
.split.pm-split .tab-panel { flex: 1; min-height: 0; overflow-y: auto; }
.split.pm-split .tab-panel.active { display: flex; }
.split.pm-split .tab-panel > .card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.split.pm-split .tab-panel > .card > .card-body { flex: 1; min-height: 0; overflow-y: auto; }
.split.pm-split > div > .card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.split.pm-split > div > .card > .card-body { flex: 1; min-height: 0; overflow-y: auto; }
@media (max-height: 820px) { .split.pm-split > div { height: 510px; } }
@media (max-width: 900px) {
    .split.pm-split { grid-template-columns: 1fr !important; }
    .split.pm-split > div { height: auto; }
    .split.pm-split .tab-panel { max-height: 480px; }
}

/* ── 指令模板归类徽章：系统=紫 / 已自定义=琥珀 / 我的=青 ── */
.tpl-badge {
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 0 6px;
    line-height: 1.6;
    white-space: nowrap;
}
.tpl-badge-system   { background: #f3e8ff; color: #8250df; }
.tpl-badge-modified { background: #fef3c7; color: #b45309; }
.tpl-badge-mine     { background: #cffafe; color: #0891b2; }

/* ── 开关（switch）：带勾选标记的 iOS 风格 ───────────────── */
/* 覆盖 .field > label 的 display:block / 间距，使开关可内联排列 */
.field > label.switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 0;
    font-size: 12px;
    color: var(--text-mute);
    user-select: none;
}
/* 原生 checkbox 视觉隐藏但保留可访问性 */
.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
/* 轨道 */
.switch .switch-slider {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    background: #d3d3da;
    border-radius: 12px;
    transition: background .22s ease;
}
/* 圆形滑块 */
.switch .switch-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .22s ease;
}
/* 勾选标记（开启后显示在轨道左侧） */
.switch .switch-slider::after {
    content: '✓';
    position: absolute;
    top: 0;
    left: 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    color: #fff;
    opacity: 0;
    transition: opacity .2s ease;
}
.switch input:checked + .switch-slider {
    background: linear-gradient(180deg, #3b9bff, #007aff);
}
.switch input:checked + .switch-slider::before {
    transform: translateX(20px);
}
.switch input:checked + .switch-slider::after {
    opacity: 1;
}
.switch input:focus-visible + .switch-slider {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, .28);
}
/* 状态文字：开启时高亮 */
.switch .switch-state.on { color: #007aff; font-weight: 600; }