/* ============================================================
 * ui-polish.css — 统一控件美化补丁
 *
 * 存在的原因：
 *  1) 世界书面板（worldbook.js）整套 DOM 用的是 wb-* 类，此前项目里
 *     没有任何一条规则定义过它们 —— 于是输入框 / 下拉框全部退化成
 *     浏览器默认白底控件，在深色弹窗里非常刺眼（「输入框好丑」的根因）。
 *  2) 设置弹窗里大量 <input> 不在 .form-group 直接子层（例如包在
 *     <div class="form-group"><div><label>… 的网格里、或 modal-body 裸放），
 *     原选择器 `.form-group input` 覆盖不到，同样是白底默认样式。
 *  3) 快捷键录入行、kbd、按钮 ghost 变体缺少定义。
 *
 * 两条硬约束：
 *  A. 只「补外观」不「改布局」——大范围规则一律不写 width，
 *     避免把别的模块用内联 style / 专属类精心调过的窄控件
 *     （气泡字号、TTS 语速、群聊数值框…）撑成整行。
 *  B. 大范围规则用 :where() 把特异性压到 0-0-0，保证任何既有的
 *     更具体规则都能自然覆盖，不会出现「补丁反过来打趴老界面」。
 * ============================================================ */

/* ---------- 0. 变量（复用主线程 token，缺省时兜底） ---------- */
:root {
    --ui-field-bg: #32353f;
    --ui-field-bg-hover: #383b45;
    --ui-field-border: #454a57;
    --ui-field-text: #ececf1;
    --ui-field-placeholder: #8b90a0;
    --ui-focus-ring: 0 0 0 3px rgba(var(--accent-gold-rgb, 230, 199, 138), .18);
    --ui-radius: 9px;
}

body.light-theme {
    --ui-field-bg: #fffdf9;
    --ui-field-bg-hover: #ffffff;
    --ui-field-border: #d3c6b1;
    --ui-field-text: #2b2f3a;
    --ui-field-placeholder: #9a8b74;
}

/* ---------- 1. 通用 form-input（部分动态面板使用，此前无任何定义） ---------- */
:where(.form-input) {
    box-sizing: border-box;
    padding: 9px 11px;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-field-border);
    background-color: var(--ui-field-bg);
    color: var(--ui-field-text);
    font-family: inherit;
    font-size: .92em;
    line-height: 1.5;
    outline: none;
    transition: border-color .18s, box-shadow .18s, background-color .18s;
}
:where(.form-input):focus { border-color: var(--accent-gold); box-shadow: var(--ui-focus-ring); }
:where(.form-input)::placeholder { color: var(--ui-field-placeholder); }

/* ---------- 2. 弹窗 / 设置面板内的裸控件统一 ----------
   注意：不要用 :not(:hidden) —— :hidden 是 jQuery 专属伪类，
   浏览器 CSS 不认识，写进 :not() 会让整条选择器直接作废。 */
.modal-body :where(input):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [hidden])),
.modal-body :where(textarea),
.modal-body :where(select),
.tab-content :where(input):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [hidden])),
.tab-content :where(textarea),
.tab-content :where(select) {
    box-sizing: border-box;
    padding: 9px 11px;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-field-border);
    background-color: var(--ui-field-bg);
    color: var(--ui-field-text);
    font-family: inherit;
    font-size: .92em;
    line-height: 1.5;
    outline: none;
    min-width: 0;
    transition: border-color .18s, box-shadow .18s, background-color .18s;
}

/* hover/focus 同样只作用于「文本类」控件，别去改滑块和复选框的原生外观 */
.modal-body :where(textarea, select):hover,
.tab-content :where(textarea, select):hover,
.modal-body :where(input):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [hidden])):hover,
.tab-content :where(input):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [hidden])):hover {
    background-color: var(--ui-field-bg-hover);
    border-color: #565c6b;
}

.modal-body :where(textarea, select):focus,
.tab-content :where(textarea, select):focus,
.modal-body :where(input):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [hidden])):focus,
.tab-content :where(input):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [hidden])):focus {
    border-color: var(--accent-gold);
    box-shadow: var(--ui-focus-ring);
    background-color: var(--ui-field-bg-hover);
}

.modal-body :where(input, textarea)::placeholder,
.tab-content :where(input, textarea)::placeholder {
    color: var(--ui-field-placeholder);
    opacity: 1;
}

.modal-body :where(input, textarea, select):disabled,
.tab-content :where(input, textarea, select):disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* select：统一一个金色下拉箭头，去掉各浏览器风格差异 */
.modal-body :where(select),
.tab-content :where(select) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6c78a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 15px 15px;
    cursor: pointer;
}

/* textarea 统一可纵向拉伸 */
.modal-body :where(textarea),
.tab-content :where(textarea) { resize: vertical; min-height: 46px; }

/* 复选 / 单选：跟金色主题一致 */
.modal-body :where(input[type="checkbox"], input[type="radio"]),
.tab-content :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--accent-gold);
    cursor: pointer;
}

/* range 滑块主题化（不动宽高，避免破坏既有滑块排版） */
.modal-body :where(input[type="range"]),
.tab-content :where(input[type="range"]) { accent-color: var(--accent-gold); cursor: pointer; }

/* color 拾色器 */
.modal-body :where(input[type="color"]),
.tab-content :where(input[type="color"]) {
    padding: 3px;
    border: 1px solid var(--ui-field-border);
    border-radius: var(--ui-radius);
    background: var(--ui-field-bg);
    cursor: pointer;
}

/* file 选择器：默认控件在深色背景里几乎看不见 */
.modal-body :where(input[type="file"]),
.tab-content :where(input[type="file"]) {
    color: var(--ui-field-text);
    font-size: .84em;
    padding: 8px;
    border: 1px dashed var(--ui-field-border);
    border-radius: var(--ui-radius);
    background: rgba(255, 255, 255, .02);
    cursor: pointer;
}
.modal-body :where(input[type="file"])::file-selector-button,
.tab-content :where(input[type="file"])::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: none;
    border-radius: 7px;
    background: #4a4f5d;
    color: #fff;
    font-family: inherit;
    font-size: .92em;
    cursor: pointer;
    transition: background .18s;
}
.modal-body :where(input[type="file"])::file-selector-button:hover,
.tab-content :where(input[type="file"])::file-selector-button:hover { background: var(--accent-gold); color: #23252d; }

/* ---------- 3. 世界书面板（wb-*） ---------- */

/* 3.1 空态 */
.wb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 18px;
    text-align: center;
    color: var(--text-secondary, #aaa);
    font-size: .88em;
    line-height: 1.7;
    border: 1px dashed #4a4f5b;
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}
.wb-empty i { font-size: 34px; opacity: .35; }
.wb-empty p { margin: 0; }
.wb-empty--inline { padding: 26px 16px; }

/* 3.2 书卡片 */
.wb-book-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 13px 14px;
    margin-bottom: 10px;
    border: 1px solid #3d414d;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
    transition: border-color .2s, box-shadow .2s;
}
.wb-book-card:hover { border-color: rgba(var(--accent-gold-rgb), .5); box-shadow: 0 4px 18px rgba(0, 0, 0, .28); }
.wb-book-card.is-off { opacity: .55; filter: saturate(.6); }
.wb-book-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wb-book-name { color: var(--accent-gold); font-size: 1em; }
.wb-book-scope { color: var(--text-muted, #888); font-size: .78em; }
.wb-book-count { margin-left: auto; color: #9aa1b2; font-size: .74em; white-space: nowrap; }
.wb-book-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-book-actions .btn { padding: 6px 11px; font-size: .8em; border-radius: 8px; }
.wb-btn-del:hover { border-color: #e57373; color: #e57373; }

/* 3.3 标签 */
.wb-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72em;
    line-height: 1.7;
    border: 1px solid rgba(var(--accent-gold-rgb), .45);
    color: var(--accent-gold);
    background: rgba(var(--accent-gold-rgb), .1);
    white-space: nowrap;
}

/* 3.4 开关 */
.wb-switch { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.wb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.wb-switch-track {
    width: 38px;
    height: 21px;
    border-radius: 999px;
    background: #4b505d;
    border: 1px solid #565c6b;
    position: relative;
    transition: background .22s, border-color .22s;
}
.wb-switch-track i {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #cfd3dd;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), background .22s;
}
.wb-switch input:checked + .wb-switch-track { background: rgba(var(--accent-gold-rgb), .35); border-color: var(--accent-gold); }
.wb-switch input:checked + .wb-switch-track i { transform: translateX(17px); background: var(--accent-gold); }
.wb-switch input:focus-visible + .wb-switch-track { box-shadow: var(--ui-focus-ring); }
.wb-switch--sm .wb-switch-track { width: 32px; height: 18px; }
.wb-switch--sm .wb-switch-track i { width: 12px; height: 12px; }
.wb-switch--sm input:checked + .wb-switch-track i { transform: translateX(14px); }

/* 3.5 世界书专用控件
   小弹窗（.wb-mini-body）与条目编辑器（.wb-editor-modal）里存在
   既无 wb-input 类、也不在 .form-group 下的裸控件（#wb-name-input、
   #wb-scope-select、#wb-target-select…），一并纳入美化范围。 */
.wb-mini-body :where(input):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [hidden])),
.wb-mini-body :where(select, textarea),
.wb-editor-modal :where(input):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [hidden])),
.wb-editor-modal :where(select, textarea) {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-field-border);
    background-color: var(--ui-field-bg);
    color: var(--ui-field-text);
    font-family: inherit;
    font-size: .88em;
    line-height: 1.5;
    outline: none;
    min-width: 0;
    transition: border-color .18s, box-shadow .18s, background-color .18s;
}

.wb-input,
.wb-select,
.wb-textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-field-border);
    background-color: var(--ui-field-bg);
    color: var(--ui-field-text);
    font-family: inherit;
    font-size: .88em;
    line-height: 1.5;
    outline: none;
    transition: border-color .18s, box-shadow .18s, background-color .18s;
}

/* hover / focus 统一态 */
.wb-mini-body :where(input, select, textarea):hover,
.wb-editor-modal :where(input, select, textarea):hover,
.wb-input:hover, .wb-select:hover, .wb-textarea:hover {
    background-color: var(--ui-field-bg-hover);
    border-color: #565c6b;
}
.wb-mini-body :where(input, select, textarea):focus,
.wb-editor-modal :where(input, select, textarea):focus,
.wb-input:focus, .wb-select:focus, .wb-textarea:focus {
    border-color: var(--accent-gold);
    box-shadow: var(--ui-focus-ring);
    background-color: var(--ui-field-bg-hover);
}
.wb-mini-body :where(input, textarea)::placeholder,
.wb-editor-modal :where(input, textarea)::placeholder,
.wb-input::placeholder,
.wb-textarea::placeholder { color: var(--ui-field-placeholder); opacity: 1; }

/* textarea：条目内容框要能纵向拉伸（autoGrow 会写内联 height，故不锁 min-height） */
.wb-mini-body :where(textarea),
.wb-editor-modal :where(textarea),
.wb-textarea { resize: vertical; }

/* 数字框保持窄身：全书深度框与条目深度框都带 wb-input--num；
   小弹窗里目前没有 number，一并给同样的窄宽度以免将来出现整行数字框。 */
.wb-input--num { width: 66px; flex: 0 0 auto; text-align: center; }
.wb-mini-body :where(input[type="number"]),
.wb-editor-modal :where(input[type="number"]) { width: 66px; text-align: center; }

/* 条目卡片头部是 flex 行：这里的控件靠 flex 伸缩，不吃 width:100% */
.wb-entry-head > :where(input, select) { width: auto; }
.wb-entry-name { flex: 1 1 190px; font-weight: 600; }
.wb-toolbar-field :where(input) { width: 66px; }
/* 上面那条 width:auto 会连带把「深度」数字框也放宽，这里补回窄尺寸。
   写在后面是为了在同特异性 (0,1,0) 下按「后出现者优先」胜出。 */
.wb-entry-head > .wb-input--num { width: 66px; flex: 0 0 auto; }

/* 下拉箭头 */
.wb-select,
.wb-mini-body :where(select),
.wb-editor-modal :where(select) {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 28px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6c78a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px 14px;
}
.wb-mini-body option, .wb-editor-modal option, .wb-select option { background: #2d303a; color: #ececf1; }
.wb-select--strat { flex: 0 0 auto; min-width: 126px; }
.wb-select--pos { flex: 0 0 auto; min-width: 118px; }
.wb-select--strat option[value="constant"] { color: #7fc4ff; }
.wb-select--strat option[value="normal"] { color: #8fd18f; }
.wb-select--strat option[value="selective"] { color: #f0d48a; }

/* 3.6 表单字段组（弹窗内） */
.wb-field { margin-bottom: 14px; }
.wb-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: .82em;
    color: #a8afc0;
    letter-spacing: .01em;
}
.wb-field--inline { display: grid; grid-template-columns: 74px 1fr; align-items: start; gap: 10px; margin-bottom: 9px; }
.wb-field--inline > label { margin: 0; padding-top: 9px; }
.wb-row { display: flex; gap: 12px; }
.wb-row--2 > .wb-field { flex: 1 1 0; min-width: 0; }
.wb-req {
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(229, 115, 115, .16);
    color: #ef8a8a;
    font-size: .82em;
    font-weight: 600;
}
.wb-hint-inline { color: var(--text-muted, #888); font-size: .85em; font-weight: 400; }
.wb-dialog-hint {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    margin: 4px 0 0;
    padding: 9px 11px;
    border-radius: 9px;
    border-left: 2px solid rgba(var(--accent-gold-rgb), .55);
    background: rgba(var(--accent-gold-rgb), .07);
    color: #b9bfd0;
    font-size: .78em;
    line-height: 1.6;
}
.wb-dialog-hint i { color: var(--accent-gold); flex: 0 0 auto; }
.wb-dialog-hint b { color: var(--accent-gold); }

/* 3.7 小弹窗（创建书 / 新建条目 / 确认删除） */
.wb-mini-mask {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(8, 9, 12, .72);
    backdrop-filter: blur(3px);
    animation: wbMiniFade .18s ease-out;
}
.wb-mini-panel {
    width: min(520px, 96vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    border: 1px solid #454a57;
    border-radius: 14px;
    background: linear-gradient(180deg, #32353f, #2b2e37);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    animation: wbMiniUp .22s cubic-bezier(.2, .8, .3, 1);
}
.wb-mini-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid #3d414d;
    flex: 0 0 auto;
}
.wb-mini-head h3 { margin: 0; font-size: 1.05em; color: var(--accent-gold); }
.wb-mini-x {
    background: none;
    border: none;
    color: #9aa1b2;
    font-size: 1.35em;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
    transition: color .18s, background .18s;
}
.wb-mini-x:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.wb-mini-body { padding: 18px; overflow-y: auto; flex: 1 1 auto; }
.wb-mini-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 13px 18px;
    border-top: 1px solid #3d414d;
    flex: 0 0 auto;
}
@keyframes wbMiniFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wbMiniUp { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* 3.8 条目编辑器：工具栏吸顶
   （用户点名：「添加条目」要跟「完成并关闭」一样常驻顶部，
     条目一多就不用自己先滑到底创建、再滑回顶部编辑。） */
.wb-editor-modal { z-index: 10001; }
.wb-editor-modal .modal-content { overflow: hidden; }
.wb-editor-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.12em; min-width: 0; }
.wb-editor-title i { color: var(--accent-gold); }
.wb-editor-bookname { color: var(--accent-gold); }
.wb-editor-scope { color: var(--text-muted, #888); font-size: .72em; }
.wb-editor-body { padding: 0; }
/* 上面刻意不再写 display:flex; flex-direction:column ——
   flex 子项默认 flex-shrink:1，会把条目列表压缩到刚好填满容器，
   于是容器永远不溢出；而 sticky 只有在「真的发生溢出」时才会吸顶，
   表现就是「添加条目那一排跟着内容一起滚走」。保持块级流式即可。 */

.wb-editor-toolbar {
    position: sticky;
    top: 0;
    z-index: 6;
    flex: 0 0 auto;
    padding: 14px 20px 12px;
    border-bottom: 1px solid #3d414d;
    background: linear-gradient(180deg, #343843 0%, #2f323b 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.wb-toolbar-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wb-toolbar-field { display: flex; align-items: center; gap: 9px; }
.wb-toolbar-field > label { margin: 0; font-size: .82em; color: #a8afc0; white-space: nowrap; }
.wb-toolbar-hint { margin: 0; flex: 1 1 210px; min-width: 0; color: var(--text-muted, #888); font-size: .74em; line-height: 1.5; }
.wb-toolbar-actions { display: flex; gap: 9px; margin-left: auto; flex: 0 0 auto; }
.wb-toolbar-actions .btn { padding: 7px 14px; font-size: .84em; border-radius: 9px; }

.wb-toolbar-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed rgba(66, 70, 82, .9);
    color: #979eb0;
    font-size: .76em;
}
.wb-toolbar-stat b { color: #dfe3ec; font-weight: 600; }
.wb-autosave { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: #7cb87c; opacity: .9; }

.wb-entry-list { padding: 14px 20px 22px; display: flex; flex-direction: column; gap: 11px; }

/* 卡片必须是 flex:0 0 auto：列表容器用 flex 排布只是为了拿 gap 间距，
   若允许收缩，条目一多卡片会被压扁、内容框直接看不见也点不到。 */
.wb-entry-list > .wb-entry-card { flex: 0 0 auto; }

/* 3.9 条目卡片 */
.wb-entry-card {
    border: 1px solid #3f4450;
    border-radius: 12px;
    background: rgba(255, 255, 255, .028);
    padding: 10px 12px 12px;
    transition: border-color .18s, background .18s;
}
.wb-entry-card:hover { border-color: rgba(var(--accent-gold-rgb), .4); }
.wb-entry-card.is-disabled { opacity: .5; }
.wb-entry-card.is-disabled .wb-entry-head { filter: grayscale(.5); }
.wb-entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-entry-index {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(var(--accent-gold-rgb), .14);
    color: var(--accent-gold);
    font-size: .74em;
    font-weight: 600;
}
.wb-entry-depth { display: inline-flex; align-items: center; gap: 5px; color: #98a0b0; font-size: .76em; white-space: nowrap; }
.wb-entry-order { display: inline-flex; gap: 2px; }
.wb-entry-del { flex: 0 0 auto; width: 34px; justify-content: center; padding: 5px 0; }
.wb-entry-del:hover { border-color: #e57373; color: #e57373; }
.wb-entry-fields { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #424652; }

.wb-icon-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #4b5060;
    border-radius: 7px;
    background: transparent;
    color: #a8afc0;
    font-size: 1.05em;
    cursor: pointer;
    transition: border-color .16s, color .16s, background .16s;
}
.wb-icon-btn:hover:not(:disabled) { border-color: var(--accent-gold); color: var(--accent-gold); background: rgba(var(--accent-gold-rgb), .1); }
.wb-icon-btn:disabled { opacity: .3; cursor: not-allowed; }

/* 世界书列表滚动条（列表容器带内联 overflow-y，这里只补观感） */
#worldbook-list { padding-right: 4px; }
#worldbook-list::-webkit-scrollbar { width: 6px; }
#worldbook-list::-webkit-scrollbar-thumb { background: #555a68; border-radius: 3px; }

/* ---------- 4. 快捷键设置行 ---------- */
.shortcut-row > label { display: block; margin-bottom: 7px; color: #a8afc0; font-size: .86em; }
.shortcut-input-wrap { display: flex; gap: 8px; align-items: stretch; }
/* 特异性要点：style.css 的 `.form-group input`（0,1,1）带着 width:100%，
   若这里写成 `:where(...)`（0,1,0）就会被它压过，输入框撑满整行、
   把右侧两个按钮挤出去。故用 .form-group 前缀抬到 (0,3,0)。 */
.form-group .shortcut-input-wrap .shortcut-setting-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .04em;
}
.shortcut-setting-input.capturing {
    border-color: var(--accent-gold);
    box-shadow: var(--ui-focus-ring);
    background: rgba(var(--accent-gold-rgb), .08);
    color: var(--accent-gold);
}
.shortcut-input-wrap .btn { flex: 0 0 auto; padding: 0 12px; }
.field-hint { display: block; margin-top: 6px; color: var(--text-muted, #888); font-size: .74em; line-height: 1.6; }

/* 帮助面板脚注 + 浏览器保留键警示 */
.shortcut-help-note {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    margin: 16px 0 0;
    padding: 9px 11px;
    border-radius: 9px;
    border-left: 2px solid rgba(var(--accent-gold-rgb), .5);
    background: rgba(var(--accent-gold-rgb), .07);
    color: #b9bfd0;
    font-size: .76em;
    line-height: 1.6;
}
.shortcut-help-note i { color: var(--accent-gold); flex: 0 0 auto; }
.shortcut-list li .shortcut-reserved {
    font-style: normal;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(229, 115, 115, .16);
    color: #ef8a8a;
    font-size: .82em;
}

kbd {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    margin: 0 2px;
    border: 1px solid #4d5364;
    border-bottom-width: 2px;
    border-radius: 5px;
    background: #3b3f4b;
    color: #e8eaf1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
}
body.light-theme kbd { background: #fff; border-color: #cdbb9f; color: #33291c; }

/* ghost 按钮（工具条上的图标按钮） */
.btn-ghost {
    background: transparent;
    border: 1px solid #4b5060;
    color: #a8afc0;
    transition: border-color .16s, color .16s, background .16s;
}
.btn-ghost:hover { border-color: var(--accent-gold); color: var(--accent-gold); background: rgba(var(--accent-gold-rgb), .09); }

/* ---------- 5. 浅色主题微调 ---------- */
/* style.css 的 `body.light-theme .form-group input`（特异性 0,2,2）盖过了暗色
   主题那套 hover/focus（0,2,1），会让浅色下「聚焦边框不变色、内阴影吃掉光晕、
   hover 边框还是灰的」。这里用 (0,3,1) 把交互反馈拿回来。 */
body.light-theme .form-group input:focus,
body.light-theme .form-group select:focus,
body.light-theme .form-group textarea:focus,
body.light-theme .modal-body input:focus,
body.light-theme .modal-body select:focus,
body.light-theme .modal-body textarea:focus,
body.light-theme .tab-content input:focus,
body.light-theme .tab-content select:focus,
body.light-theme .tab-content textarea:focus {
    border-color: var(--accent-gold);
    background-color: #ffffff;
    box-shadow: var(--ui-focus-ring);
}
body.light-theme .form-group input:hover,
body.light-theme .form-group select:hover,
body.light-theme .form-group textarea:hover,
body.light-theme .modal-body input:hover,
body.light-theme .modal-body select:hover,
body.light-theme .modal-body textarea:hover,
body.light-theme .tab-content input:hover,
body.light-theme .tab-content select:hover,
body.light-theme .tab-content textarea:hover {
    background-color: #ffffff;
    border-color: #bfae91;
}

body.light-theme .wb-mini-panel { background: linear-gradient(180deg, #fffdf8, #f8f2e6); border-color: #d3c6b1; }
body.light-theme .wb-mini-head,
body.light-theme .wb-mini-foot { border-color: #e2d7c4; }
body.light-theme .wb-mini-x { color: #8a7760; }
body.light-theme .wb-editor-toolbar { background: linear-gradient(180deg, #fbf6ec, #f5eee0); border-color: #e2d7c4; }
body.light-theme .wb-toolbar-stat { color: #6b7180; }
body.light-theme .wb-toolbar-stat b { color: #2b2f3a; }
body.light-theme .wb-book-card,
body.light-theme .wb-entry-card { background: rgba(255, 255, 255, .62); border-color: #e0d5c2; }
body.light-theme .wb-mini-body option,
body.light-theme .wb-editor-modal option,
body.light-theme .wb-select option { background: #fffdf8; color: #2b2f3a; }
body.light-theme .wb-mini-body :where(select),
body.light-theme .wb-editor-modal :where(select),
body.light-theme .wb-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2802f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
body.light-theme .wb-empty { border-color: #ddd0b9; background: rgba(255, 255, 255, .5); color: #6b7180; }
body.light-theme .btn-ghost { border-color: #d3c6b1; color: #6b7180; }
body.light-theme .modal-body :where(input[type="file"])::file-selector-button,
body.light-theme .tab-content :where(input[type="file"])::file-selector-button { background: #efe6d5; color: #33291c; }

/* ---------- 6. 移动端收敛 ---------- */
@media (max-width: 640px) {
    .wb-toolbar-actions { margin-left: 0; width: 100%; }
    .wb-toolbar-actions .btn { flex: 1 1 0; justify-content: center; }
    .wb-toolbar-stat { font-size: .72em; }
    .wb-autosave { display: none; }
    .wb-field--inline { grid-template-columns: 1fr; gap: 4px; }
    .wb-field--inline > label { padding-top: 0; }
    .wb-entry-name { flex-basis: 100%; }
    .wb-editor-toolbar { padding: 12px 14px 10px; }
    .wb-entry-list { padding: 12px 14px 18px; }
    .wb-select--strat, .wb-select--pos { flex: 1 1 46%; min-width: 0; }
    .wb-mini-panel { width: 98vw; }
    .wb-row { flex-direction: column; gap: 0; }
}

/* 帮助面板要能从「设置」等其它弹窗之上唤出（按 ? 时焦点往往还在设置弹窗里）。
   两者同为 .modal-overlay（z-index:1000），而 #shortcut-help-modal 在 DOM 里
   排在 #ai-settings-modal 之前 —— 后面的同级元素绘制在上层，于是帮助面板被
   设置弹窗整个盖住，表现就是「按了 ? 什么也没发生」。抬高一层解决。 */
#shortcut-help-modal { z-index: 1600; }

/* 尊重「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
    .wb-mini-mask, .wb-mini-panel { animation: none; }
    .wb-input, .wb-select, .wb-textarea, .btn-ghost, .wb-switch-track i { transition: none; }
}

/* ============================================================
 * 12. 功能专用模型面板（设置 → AI 配置 → 功能专用模型）
 *     以及编辑角色页的「提示词优化器」
 *     —— 两块都默认折叠，靠 <details> 控制，样式与深色面板统一。
 * ============================================================ */

/* ---------- 12.1 功能专用模型 ---------- */
.fm-block .fm-item {
    border: 1px solid var(--ui-field-border, #454a57);
    border-radius: 10px;
    background: rgba(255, 255, 255, .025);
    margin-bottom: 8px;
    overflow: hidden;
}
.fm-block .fm-item > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: .9em;
    color: var(--ui-field-text, #ececf1);
    transition: background .18s;
}
.fm-block .fm-item > summary::-webkit-details-marker { display: none; }
.fm-block .fm-item > summary:hover { background: rgba(230, 199, 138, .08); }
.fm-block .fm-item > summary > i { color: var(--accent-gold, #e6c78a); }
.fm-block .fm-item > summary > span { flex: 0 0 auto; font-weight: 600; }
.fm-block .fm-item .fm-state {
    margin-left: auto;
    font-style: normal;
    font-size: .78em;
    color: #8b90a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
}
.fm-block .fm-item .fm-state.fm-state-on { color: #72d572; }
.fm-block .fm-item .fm-body {
    padding: 4px 12px 12px;
    border-top: 1px dashed rgba(255, 255, 255, .1);
}
.fm-block .fm-hint { margin: 8px 0 10px; font-size: .78em; color: #8b90a0; line-height: 1.6; }
.fm-block .fm-adv {
    margin-top: 4px;
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(0, 0, 0, .12);
}
.fm-block .fm-adv > summary {
    padding: 7px 10px;
    cursor: pointer;
    list-style: none;
    font-size: .8em;
    color: #9aa0b0;
    user-select: none;
}
.fm-block .fm-adv > summary::-webkit-details-marker { display: none; }
.fm-block .fm-adv > summary:hover { color: var(--accent-gold, #e6c78a); }
.fm-block .fm-adv .fm-body { padding: 2px 10px 10px; border-top: 0; }
.fm-block .fm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- 12.2 提示词优化器（编辑角色页） ---------- */
.prompt-doctor { margin-top: 10px; }
.prompt-doctor-block {
    border: 1px solid var(--ui-field-border, #454a57);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(230, 199, 138, .05), rgba(255, 255, 255, .02));
    overflow: hidden;
}
.prompt-doctor-block > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: .9em;
    font-weight: 600;
    color: var(--accent-gold, #e6c78a);
    transition: background .18s;
}
.prompt-doctor-block > summary::-webkit-details-marker { display: none; }
.prompt-doctor-block > summary:hover { background: rgba(230, 199, 138, .1); }
.prompt-doctor-block > summary .pd-model {
    margin-left: auto;
    font-style: normal;
    font-weight: 400;
    font-size: .78em;
    color: #8b90a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 48%;
}
.prompt-doctor-block > summary .pd-model b { color: #9fd3ff; font-weight: 600; }
.prompt-doctor-block .pd-inner { padding: 4px 12px 12px; }
.prompt-doctor-block .pd-tip { margin: 6px 0 10px; font-size: .78em; color: #9aa0b0; line-height: 1.7; }
.prompt-doctor-block .pd-note-label { display: block; font-size: .8em; color: #9aa0b0; margin-bottom: 4px; }
.prompt-doctor-block .pd-note { width: 100%; margin-bottom: 8px; }
.prompt-doctor-block .pd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.prompt-doctor-block .pd-result { margin-top: 12px; }
.prompt-doctor-block .pd-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.prompt-doctor-block .pd-col { display: flex; flex-direction: column; min-width: 0; }
.prompt-doctor-block .pd-col-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78em;
    color: #9aa0b0;
    margin-bottom: 5px;
}
.prompt-doctor-block .pd-col-head i { color: var(--accent-gold, #e6c78a); }
.prompt-doctor-block .pd-col textarea {
    width: 100%;
    min-height: 210px;
    max-height: 46vh;
    resize: vertical;
    font-size: .82em;
    line-height: 1.7;
    font-family: inherit;
}
.prompt-doctor-block .pd-notes { margin-top: 10px; }
.prompt-doctor-block .pd-notes-body {
    margin: 0;
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .18);
    color: #cfd3de;
    font-family: inherit;
    font-size: .8em;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 170px;
    overflow: auto;
}
.prompt-doctor-block .pd-confirm { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.prompt-doctor-block .pd-result[hidden] { display: none; }
.prompt-doctor-block .pd-actions [hidden],
.prompt-doctor-block [data-pd-close][hidden] { display: none; }

/* 移动端：角色弹窗里两栏改单栏，避免文本框被挤成一条缝 */
@media (max-width: 720px) {
    .prompt-doctor-block .pd-cols { grid-template-columns: 1fr; }
    .prompt-doctor-block .pd-col textarea { min-height: 140px; }
}

body.light-theme .prompt-doctor-block,
body.light-theme .fm-block .fm-item { border-color: #d3c6b1; background: rgba(0, 0, 0, .02); }
body.light-theme .prompt-doctor-block .pd-notes-body { background: #fffdf9; color: #3b4050; border-color: #e0d6c4; }
body.light-theme .fm-block .fm-adv { background: rgba(0, 0, 0, .03); border-color: #e0d6c4; }

/* ---------- 12.3 知识库文档预览 / 编辑弹窗 ---------- */
/* 它是在「系统设置」弹窗之上打开的二级弹窗，必须盖住设置弹窗（两者默认同为 1000） */
#kb-doc-modal { z-index: 1400; }
.kb-doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid var(--ui-field-border, #454a57);
    background: rgba(255, 255, 255, .03);
    font-size: .78em;
    color: #9aa0b0;
}
.kb-doc-meta span { white-space: nowrap; }
.kb-doc-meta a { color: #9fd3ff; text-decoration: none; }
.kb-doc-meta a:hover { text-decoration: underline; }
.kb-doc-modal textarea#kb-doc-content {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.kb-file-row:hover {
    background: rgba(230, 199, 138, .09) !important;
    border-color: rgba(230, 199, 138, .3) !important;
}

/* ---------- 12.4 自定义加载界面（实验室） ---------- */
.boot-preview {
    position: relative;
    width: 100%;
    height: 168px;
    border-radius: 10px;
    border: 1px dashed var(--ui-field-border, #454a57);
    background: repeating-conic-gradient(rgba(255, 255, 255, .04) 0% 25%, transparent 0% 50%) 50% / 18px 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.boot-preview img,
.boot-preview video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.boot-preview.cover img,
.boot-preview.cover video { width: 100%; height: 100%; object-fit: cover; }
.boot-preview .boot-empty { font-size: .8em; color: #8b90a0; }
.boot-preview.is-video video { outline: none; }
.boot-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.boot-row .btn, .boot-row input[type="text"], .boot-row input[type="url"] { flex: 1 1 auto; min-width: 0; }
.boot-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.boot-hint { font-size: .76em; color: #8b90a0; line-height: 1.7; margin-top: 8px; }
.boot-hint b { color: var(--accent-gold, #e6c78a); }

/* ---------- 12.5 加载界面本体（index.html 顶部 #boot-splash） ---------- */
#boot-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #14161d;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .34s ease, visibility 0s linear .34s;
}
#boot-splash.boot-show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .34s ease; }
#boot-splash .boot-slot { position: absolute; inset: 0; }
#boot-splash .boot-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #14161d;
}
#boot-splash .boot-media.contain { object-fit: contain; }
#boot-splash .boot-dim { position: absolute; inset: 0; background: rgba(10, 11, 16, .35); pointer-events: none; }
/* 副标题：改为脱离文档流的绝对定位，位置由 #boot-splash[data-caption-pos] 决定。
   原先它是 flex item（position:relative），被父级 align-items:center 拉到画面正中，
   与设置里「显示在画面下方」的描述相互矛盾，也和进度条抢位置。 */
#boot-splash .boot-caption {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 760px);
    z-index: 2;
    text-align: center;
    color: #fff;
    font-size: clamp(.85em, 2.4vw, 1.05em);
    letter-spacing: .12em;
    padding: 0 24px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
    pointer-events: none;
    transition: opacity .3s ease;
}
/* --boot-bars-bottom 必须定义在 #boot-splash 自身上：
   原先写在 .boot-bars 规则里，只对进度条元素生效，
   .boot-caption（#boot-splash 的直接子元素、并非 .boot-bars 的后代）取不到该变量，
   导致 bottom: calc(var(--boot-bars-bottom) + 18px) 整条声明在计算值阶段失效，
   top/bottom 双双 auto → 绝对定位元素退回静态位置，而静态位置又被父级
   align-items:center 拉到画面正中 —— 这就是「副标题选了显示在下方却出现在中间」的原因。 */
#boot-splash { --boot-bars-bottom: clamp(26px, 8vh, 72px); }
#boot-splash .boot-bars { bottom: var(--boot-bars-bottom); }
#boot-splash[data-caption-pos="bottom"] .boot-caption,
#boot-splash:not([data-caption-pos]) .boot-caption {
    top: auto;
    bottom: calc(var(--boot-bars-bottom) + 18px);
}
#boot-splash[data-caption-pos="middle"] .boot-caption {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
}
#boot-splash[data-caption-pos="top"] .boot-caption {
    top: calc(var(--boot-bars-bottom) - 6px);
    bottom: auto;
}
#boot-splash .boot-bars {
    position: absolute;
    left: 50%;
    bottom: clamp(26px, 8vh, 72px);
    transform: translateX(-50%);
    width: min(190px, 42vw);
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
    z-index: 2;
}
#boot-splash .boot-bars i {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #e6c78a, transparent);
    animation: bootSlide 1.25s ease-in-out infinite;
}
@keyframes bootSlide { 0% { transform: translateX(-110%) } 100% { transform: translateX(280%) } }
#boot-splash .boot-skip {
    position: absolute;
    right: 18px;
    bottom: 16px;
    z-index: 3;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(0, 0, 0, .35);
    color: rgba(255, 255, 255, .78);
    font-size: .78em;
    cursor: pointer;
}
#boot-splash .boot-skip:hover { background: rgba(0, 0, 0, .55); color: #fff; }
body.compatibility-mode #boot-splash .boot-bars i { animation: none; width: 100%; }
body.compatibility-mode #boot-splash { transition: none; }

/* ============================================================
 * 13. 插件参数：长文本参数用 textarea（上下文压缩器的「压缩提示词」）
 *     原 .plugin-params 是 auto-fit 网格，长提示词被挤成一小格完全没法编辑，
 *     这里让含 textarea 的那一格独占整行。
 * ============================================================ */
/* 不用 :has()（旧内核不支持会导致整条规则失效），改由 JS 直接加 .plugin-param-wide */
.plugin-params .plugin-param-wide {
    grid-column: 1 / -1;
}
.plugin-params textarea {
    display: block;
    width: 100%;
    margin-top: 5px;
    box-sizing: border-box;
    min-height: 84px;
    resize: vertical;
    line-height: 1.7;
    font-size: .84em;
    font-family: inherit;
}

/* ============================================================
 * 14. 分组管理界面（#group-manager-modal，右键 / 长按分组标题进入）
 *     替代原来的两次原生 prompt。列表每行 = 组名 + 角色数 + 重命名 / 删除，
 *     底部一个「新建分组」。样式对齐站内 .modal-* / .friend-group-option 语言，
 *     但操作按钮做成正方形图标按钮，比原生弹窗好点得多（移动端尤其明显）。
 * ============================================================ */
#group-manager-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gm-hint {
    font-size: .8em;
    line-height: 1.65;
    color: #98a0b3;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(230, 199, 138, .07);
    border: 1px solid rgba(230, 199, 138, .18);
}
.gm-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    /* 分组可能很多：限高滚动，避免把弹窗顶出屏幕 */
    max-height: min(46vh, 340px);
    overflow-y: auto;
    padding-right: 2px;
}
.gm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #32353f;
    border: 1px solid transparent;
    transition: background .16s ease, border-color .16s ease;
}
.gm-item:hover { background: #3b3f4a; }
/* 从哪个分组标题进来的，那一条高亮一下，视线不用重新找 */
.gm-item.is-focused {
    border-color: rgba(230, 199, 138, .55);
    background: rgba(230, 199, 138, .09);
}
.gm-name {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1 1 auto;
    font-size: .92em;
    font-weight: 500;
    /* 组名过长时省略号，别把右边的按钮挤没 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gm-name i { color: var(--accent-gold, #e6c78a); flex: 0 0 auto; }
.gm-count {
    flex: 0 0 auto;
    font-size: .76em;
    color: #8b90a0;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
}
.gm-ops { flex: 0 0 auto; display: inline-flex; gap: 6px; margin-left: auto; }
.gm-op {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    color: inherit;
    font-size: .95em;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, transform .12s ease;
}
.gm-op:hover:not(:disabled) { background: rgba(230, 199, 138, .16); color: var(--accent-gold, #e6c78a); }
.gm-op:active:not(:disabled) { transform: scale(.94); }
.gm-op-danger:hover:not(:disabled) { background: rgba(255, 90, 90, .18); color: #ff8b8b; border-color: rgba(255, 90, 90, .35); }
.gm-op:disabled { opacity: .32; cursor: not-allowed; }
.gm-empty { text-align: center; color: #7d8291; font-size: .85em; padding: 18px 0; }
.gm-create-btn { width: 100%; justify-content: center; gap: 6px; }

/* 移动端：按钮加大到 34px（拇指更好按），组名仍可省略号 */
@media (max-width: 768px) {
    .gm-list { max-height: 42vh; }
    .gm-item { padding: 8px 10px; gap: 8px; }
    .gm-op { width: 34px; height: 34px; }
    .gm-count { font-size: .7em; padding: 2px 6px; }
    /* 窄屏下说明文字压一小即可，不必占掉半个屏幕 */
    .gm-hint { font-size: .74em; line-height: 1.55; }
}

body.light-theme .gm-item { background: #f2f3f7; }
body.light-theme .gm-item:hover { background: #e9ebf1; }
body.light-theme .gm-item.is-focused { background: rgba(230, 199, 138, .16); }
body.light-theme .gm-count { background: rgba(0, 0, 0, .06); color: #6b7180; }
body.light-theme .gm-op { background: rgba(0, 0, 0, .04); border-color: rgba(0, 0, 0, .14); }
body.light-theme .gm-name i { color: #b8912f; }