/* ============================================================
   音乐表格视图 · 样式（合并后挂在 public/index.html 的 #view-table 容器上）
   ------------------------------------------------------------
   来源：原单文件工具「原神音乐表格.html」的 <style>（L27-200）+ body 骨架里的
   Tailwind 工具类。迁移到本系统后：
     · 颜色一律改用 theme.css 的设计令牌（var(--…)），浅色为默认、
       深色走 [data-theme="dark"]，不再写死深色面板；
     · 不再依赖 Tailwind CDN 与 Font Awesome 在线 CSS —— 工具类用本文件
       「垫层」精确复刻，图标用 mask-image + 内联 SVG 复刻；
     · 新增两个本项目专属组件：#sync-status 同步状态条、.btn-menu 导出下拉。

   作用域：除组件外，全部规则挂在 #view-table 下，避免影响「更新分析」页。
   ============================================================ */

/* ============================================================
   1. 视图容器（替代原 body 上的 bg-gray-900 text-gray-100 min-h-screen flex flex-col）
   ------------------------------------------------------------
   合并到单一页面后，页面骨架（.shell / .pagehead / 页尾）由 theme.css 负责，
   这里只保证 #view-table 自己是个普通的块级容器、文字色跟随主题。
   ============================================================ */
#view-table {
    color: var(--text-primary);
}

/* ============================================================
   2. 原 <style>（L27-200）自定义类 —— 结构原样保留，颜色改为令牌
   ============================================================ */
#view-table .scrollbar-thin {
    scrollbar-width: thin;
}

#view-table .scrollbar-thumb-rounded {
    scrollbar-color: var(--scroll-thumb) transparent;
}

#view-table .dark-glass-effect {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
}

#view-table .cell-content {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}

#view-table .copy-btn {
    opacity: 0;
    transition: opacity 0.2s ease;
}

#view-table tr:hover .copy-btn {
    opacity: 1;
}

#view-table .paste-area {
    min-height: 120px;
    font-family: inherit;
    transition: all 0.3s ease;
    scrollbar-width: none;
}

#view-table .paste-area::-webkit-scrollbar {
    display: none;
}

#view-table .paste-area:focus {
    outline: none;
    border-color: var(--action);
    box-shadow: 0 0 0 3px var(--glow-action);
}

#view-table .paste-area.drag-over {
    border-color: var(--action);
    background-color: var(--action-soft);
}

#view-table .table-tab-btn {
    display: inline-flex;
    align-items: center;
}

#view-table .table-tab-btn .delete-icon {
    display: none;
    margin-left: 8px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

#view-table .table-tab-btn.show-delete .delete-icon {
    display: inline-block;
}

#view-table .table-tab-btn.show-delete .delete-icon:hover {
    color: var(--accent-rose);
}

#view-table .error-row {
    background-color: rgba(var(--accent-rose-rgb), 0.1);
}

#view-table .error-row td {
    border-color: rgba(var(--accent-rose-rgb), 0.3);
}

#view-table .selected-row {
    background-color: rgba(var(--action-rgb), 0.18);
}

/* 行间插入提示：高度 0 的横线上挂一个居中按钮 */
#view-table .row-insert-hint {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

#view-table .row-insert-hint.show {
    opacity: 1;
}

#view-table .row-insert-hint::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background-color: var(--action);
    opacity: 0.75;
}

#view-table .row-insert-btn {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
    border-radius: var(--r-pill);
    border: none;
    font-family: inherit;
    cursor: pointer;
    background-color: var(--action);
    color: var(--btn-on-accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

#view-table .row-insert-hint.show .row-insert-btn {
    pointer-events: auto;
}

#view-table .row-insert-btn:hover {
    background-color: var(--action-alt);
}

#view-table .editable-cell {
    display: inline-block;
    min-width: 12px;
    outline: none;
    border-radius: 4px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#view-table .editable-cell:hover {
    background-color: var(--surface-hover);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

#view-table .group-record-field[data-override="1"] {
    background-color: rgba(var(--accent-gold-rgb), 0.12);
    box-shadow: inset 0 0 0 1px var(--accent-gold);
}

#view-table .editable-cell:focus {
    background-color: var(--action-soft);
    box-shadow: inset 0 0 0 1px var(--action);
}

#view-table .editable-cell.cell-block {
    display: block;
}

/* 普通表格每列给一个固定宽度：编辑框铺满整列，不再随内容长短缩成一条 */
#view-table .editable-cell[data-col] {
    display: block;
}

#view-table .editable-cell[data-col="0"] { min-width: 96px; }
#view-table .editable-cell[data-col="1"] { min-width: 224px; }
#view-table .editable-cell[data-col="2"] { min-width: 104px; }
#view-table .editable-cell[data-col="3"] { min-width: 256px; }
#view-table .editable-cell[data-col="4"] { min-width: 152px; }

#view-table .search-hit {
    background-color: rgba(var(--accent-gold-rgb), 0.4);
    color: var(--btn-on-gold);
    border-radius: 2px;
    padding: 0 2px;
}

#view-table thead tr {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* ============================================================
   3. table.js 生成、但原 <style> 未定义的自定义类（按令牌补齐最小外观）
   ============================================================ */
#view-table .tags-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#view-table .tag-primary {
    display: block;
    line-height: 1.5;
}

#view-table .music-name {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

#view-table .music-name-cn {
    color: var(--text-primary);
}

#view-table .music-name-en {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

#view-table .region-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    background: rgba(var(--accent-blue-rgb), 0.13);
    color: var(--accent-blue);
    border: 1px solid rgba(var(--accent-blue-rgb), 0.28);
    font-size: var(--fs-xs);
    white-space: nowrap;
}

#view-table .version-cell {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#view-table .music-info {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

#view-table .row-error-icon {
    color: var(--accent-rose);
}

#view-table .override-flag {
    color: var(--accent-gold);
    font-size: var(--fs-xs);
    margin-left: var(--sp-1);
}

#view-table input[type="checkbox"] {
    accent-color: var(--action);
}

/* 自检表里由 JS 拼出的组操作控件 */
#view-table .group-record-field { display: block; }

#view-table .group-standard-input {
    height: 28px;
    padding: 0 6px;
    font-size: var(--fs-xs);
}

#view-table .group-apply-btn,
#view-table .group-reset-btn,
#view-table .group-use-standard {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--fs-xs);
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

#view-table .group-apply-btn:hover,
#view-table .group-reset-btn:hover,
#view-table .group-use-standard:hover {
    border-color: var(--action-alt);
    color: var(--action-alt);
    background: var(--action-alt-soft);
}

/* ============================================================
   4. Tailwind 工具类垫层
   ------------------------------------------------------------
   只为「原骨架 + table.js」里真实出现过的 token 写规则（见交付说明），
   值对齐 Tailwind 默认尺度，颜色取自 theme 令牌。全部限定在 #view-table 内。
   ============================================================ */

/* ---------- 显示 / 定位 ---------- */
#view-table .block { display: block; }
#view-table .hidden { display: none !important; }
#view-table .flex { display: flex; }
#view-table .flex-col { flex-direction: column; }
#view-table .flex-wrap { flex-wrap: wrap; }
#view-table .flex-grow { flex-grow: 1; }
#view-table .flex-shrink-0 { flex-shrink: 0; }
#view-table .items-center { align-items: center; }
#view-table .items-start { align-items: flex-start; }
#view-table .items-end { align-items: flex-end; }
#view-table .justify-between { justify-content: space-between; }
#view-table .justify-center { justify-content: center; }

#view-table .relative { position: relative; }
#view-table .absolute { position: absolute; }
#view-table .fixed { position: fixed; }
#view-table .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
#view-table .top-1\/2 { top: 50%; }
#view-table .bottom-3 { bottom: 0.75rem; }
#view-table .bottom-6 { bottom: 1.5rem; }
#view-table .bottom-20 { bottom: 5rem; }
#view-table .left-4 { left: 1rem; }
#view-table .right-3 { right: 0.75rem; }
#view-table .right-6 { right: 1.5rem; }
#view-table .z-50 { z-index: 50; }
#view-table .invisible { visibility: hidden; }
#view-table .overflow-hidden { overflow: hidden; }
#view-table .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#view-table .cursor-pointer { cursor: pointer; }
#view-table .cursor-not-allowed { cursor: not-allowed; }
#view-table .container { width: 100%; max-width: var(--shell-max); margin-left: auto; margin-right: auto; }

/* ---------- 尺寸 ---------- */
#view-table .w-10 { width: 2.5rem; }
#view-table .w-12 { width: 3rem; }
#view-table .w-16 { width: 4rem; }
#view-table .w-24 { width: 6rem; }
#view-table .w-32 { width: 8rem; }
#view-table .w-40 { width: 10rem; }
#view-table .w-56 { width: 14rem; }
#view-table .w-full { width: 100%; }
#view-table .h-3 { height: 0.75rem; }
#view-table .h-10 { height: 2.5rem; }
#view-table .h-16 { height: 4rem; }
#view-table .h-full { height: 100%; }
#view-table .min-w-full { min-width: 100%; }
#view-table .min-h-screen { min-height: 100vh; }
#view-table .max-w-sm { max-width: 24rem; }
#view-table .max-w-md { max-width: 28rem; }

/* ---------- 间距 ---------- */
#view-table .p-0\.5 { padding: 0.125rem; }
#view-table .p-3 { padding: 0.75rem; }
#view-table .p-4 { padding: 1rem; }
#view-table .p-6 { padding: 1.5rem; }
#view-table .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
#view-table .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
#view-table .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
#view-table .px-4 { padding-left: 1rem; padding-right: 1rem; }
#view-table .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
#view-table .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
#view-table .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
#view-table .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
#view-table .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
#view-table .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
#view-table .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
#view-table .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
#view-table .pb-1 { padding-bottom: 0.25rem; }
#view-table .pl-11 { padding-left: 2.75rem; }
#view-table .pr-10 { padding-right: 2.5rem; }

#view-table .m-0 { margin: 0; }
#view-table .mx-auto { margin-left: auto; margin-right: auto; }
#view-table .mb-2 { margin-bottom: 0.5rem; }
#view-table .mb-3 { margin-bottom: 0.75rem; }
#view-table .mb-4 { margin-bottom: 1rem; }
#view-table .mb-6 { margin-bottom: 1.5rem; }
#view-table .mt-1 { margin-top: 0.25rem; }
#view-table .mt-2 { margin-top: 0.5rem; }
#view-table .mt-3 { margin-top: 0.75rem; }
#view-table .mt-8 { margin-top: 2rem; }
#view-table .ml-1 { margin-left: 0.25rem; }
#view-table .ml-2 { margin-left: 0.5rem; }
#view-table .ml-auto { margin-left: auto; }
#view-table .mr-1 { margin-right: 0.25rem; }
#view-table .mr-2 { margin-right: 0.5rem; }
#view-table .mr-3 { margin-right: 0.75rem; }

#view-table .gap-0\.5 { gap: 0.125rem; }
#view-table .gap-1 { gap: 0.25rem; }
#view-table .gap-2 { gap: 0.5rem; }
#view-table .gap-3 { gap: 0.75rem; }
#view-table .gap-4 { gap: 1rem; }
#view-table .space-x-1 > * + * { margin-left: 0.25rem; }
#view-table .space-x-2 > * + * { margin-left: 0.5rem; }
#view-table .space-x-3 > * + * { margin-left: 0.75rem; }

/* ---------- 排版 ---------- */
#view-table .text-left { text-align: left; }
#view-table .text-center { text-align: center; }
#view-table .text-xs { font-size: 0.75rem; line-height: 1rem; }
#view-table .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
#view-table .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
#view-table .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
#view-table .text-2xl { font-size: 1.5rem; line-height: 2rem; }
#view-table .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
#view-table .font-medium { font-weight: 500; }
#view-table .font-semibold { font-weight: 600; }
#view-table .font-bold { font-weight: 700; }
#view-table .font-mono { font-family: var(--font-mono); }
#view-table .uppercase { text-transform: uppercase; }
#view-table .tracking-wider { letter-spacing: 0.05em; }
#view-table .whitespace-nowrap { white-space: nowrap; }
#view-table .resize-none { resize: none; }

/* ---------- 前景色 ---------- */
#view-table .text-white { color: var(--btn-on-accent); }
#view-table .text-gray-100 { color: var(--text-primary); }
#view-table .text-gray-200 { color: var(--text-primary); }
#view-table .text-gray-300 { color: var(--text-primary); }
#view-table .text-gray-400 { color: var(--text-muted); }
#view-table .text-gray-500 { color: var(--text-muted); opacity: 0.85; }
#view-table .text-primary { color: var(--action); }
#view-table .text-success { color: var(--action-alt); }
#view-table .text-info { color: var(--accent-blue); }
#view-table .text-purple { color: var(--accent-violet); }
#view-table .text-warning { color: var(--accent-gold); }
#view-table .text-danger { color: var(--accent-rose); }
#view-table .placeholder-gray-500::placeholder { color: var(--text-muted); opacity: 0.7; }

/* ---------- 背景色 ---------- */
#view-table .bg-dark { background-color: var(--bg-deep); }
#view-table .bg-black\/50 { background-color: var(--overlay); }
#view-table .bg-gray-900 { background-color: var(--bg-deep); }
#view-table .bg-gray-900\/50 { background-color: var(--surface-soft); }
#view-table .bg-gray-900\/60 { background-color: var(--surface-soft); }
#view-table .bg-gray-800 { background-color: var(--surface-soft); }
#view-table .bg-gray-800\/60 { background-color: var(--surface-soft); }
#view-table .bg-gray-800\/90 { background-color: var(--card-bg); }
#view-table .bg-gray-800\/95 { background-color: var(--bg-mid); }
#view-table .bg-gray-700 { background-color: var(--surface-inset); }
#view-table .bg-gray-700\/50 { background-color: var(--surface-inset); }
#view-table .bg-gray-700\/60 { background-color: var(--surface-inset); }
#view-table .bg-gray-600 { background-color: var(--surface-hover); }
#view-table .bg-primary { background-color: var(--action); }
#view-table .bg-primary\/20 { background-color: rgba(var(--action-rgb), 0.2); }
#view-table .bg-success { background-color: var(--action-alt); }
#view-table .bg-info { background-color: var(--accent-blue); }
#view-table .bg-info\/20 { background-color: rgba(var(--accent-blue-rgb), 0.2); }
#view-table .bg-purple { background-color: var(--accent-violet); }
#view-table .bg-warning { background-color: var(--accent-gold); }
#view-table .bg-warning\/20 { background-color: rgba(var(--accent-gold-rgb), 0.2); }
#view-table .bg-danger { background-color: var(--accent-rose); }
#view-table .bg-danger\/20 { background-color: rgba(var(--accent-rose-rgb), 0.2); }

/* ---------- 边框 ---------- */
#view-table .border { border-width: 1px; border-style: solid; border-color: var(--border); }
#view-table .border-gray-600 { border-color: var(--border-strong); }
#view-table .border-gray-600\/60 { border-color: var(--border-strong); }
#view-table .border-gray-700 { border-color: var(--border); }
#view-table .border-gray-700\/50 { border-color: var(--border); }
#view-table .border-primary { border-color: var(--action); }
#view-table .border-warning { border-color: var(--accent-gold); }
#view-table .border-warning\/40 { border-color: rgba(var(--accent-gold-rgb), 0.4); }
#view-table .border-b { border-bottom-width: 1px; border-bottom-style: solid; }

#view-table .divide-y > * + * { border-top-width: 1px; border-top-style: solid; border-color: var(--border); }
#view-table .divide-gray-700 > * + * { border-color: var(--border); }

/* ---------- 圆角 / 阴影 ---------- */
#view-table .rounded { border-radius: 0.25rem; }
#view-table .rounded-md { border-radius: 0.375rem; }
#view-table .rounded-lg { border-radius: 0.5rem; }
#view-table .rounded-xl { border-radius: 0.75rem; }
#view-table .rounded-full { border-radius: 9999px; }
#view-table .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
#view-table .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
#view-table .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* ---------- 状态 / 变换 / 过渡 ---------- */
#view-table .opacity-0 { opacity: 0; }
#view-table .opacity-40 { opacity: 0.4; }
#view-table .opacity-50 { opacity: 0.5; }
#view-table .-translate-y-1\/2 { transform: translateY(-50%); }
#view-table .translate-y-full { transform: translateY(100%); }

#view-table .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
#view-table .transition-colors { transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
#view-table .duration-200 { transition-duration: 0.2s; }
#view-table .duration-300 { transition-duration: 0.3s; }

/* ---------- hover / focus ---------- */
#view-table .hover\:bg-gray-600:hover { background-color: var(--surface-hover); }
#view-table .hover\:bg-gray-700\/30:hover { background-color: var(--surface-hover); }
#view-table .hover\:bg-primary\/30:hover { background-color: rgba(var(--action-rgb), 0.3); }
#view-table .hover\:bg-primary\/90:hover { background-color: rgba(var(--action-rgb), 0.9); }
#view-table .hover\:bg-success\/90:hover { background-color: rgba(var(--action-alt-rgb), 0.9); }
#view-table .hover\:bg-info\/30:hover { background-color: rgba(var(--accent-blue-rgb), 0.3); }
#view-table .hover\:bg-info\/90:hover { background-color: rgba(var(--accent-blue-rgb), 0.9); }
#view-table .hover\:bg-purple\/90:hover { background-color: rgba(var(--accent-violet-rgb), 0.9); }
#view-table .hover\:bg-warning\/30:hover { background-color: rgba(var(--accent-gold-rgb), 0.3); }
#view-table .hover\:bg-warning\/90:hover { background-color: rgba(var(--accent-gold-rgb), 0.9); }
#view-table .hover\:bg-danger\/30:hover { background-color: rgba(var(--accent-rose-rgb), 0.3); }
#view-table .hover\:bg-danger\/90:hover { background-color: rgba(var(--accent-rose-rgb), 0.9); }

#view-table .hover\:text-white:hover { color: var(--text-primary); }
#view-table .hover\:text-gray-200:hover { color: var(--text-primary); }
#view-table .hover\:text-gray-300:hover { color: var(--text-primary); }
#view-table .hover\:text-primary:hover { color: var(--action); }
#view-table .hover\:border-gray-500:hover { border-color: var(--border-strong); }

#view-table .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
#view-table .focus\:border-primary:focus { border-color: var(--action); }
#view-table .focus\:ring-1:focus { box-shadow: 0 0 0 3px var(--glow-action); }
#view-table .focus\:ring-primary:focus { --tw-ring-color: var(--action); }

/* 表格单元格的 padding / 字号一律交给 theme.css 的 th、td 默认值，
   与原「更新分析」页的分析结果表完全一致 ⇒ 这里不再覆盖。 */

/* 搜索框：左右留出图标位（高度沿用 theme.css 的 38px，与分析页输入框一致） */
#view-table #search-input { padding-left: 2.75rem; padding-right: 2.5rem; }

/* ============================================================
   5. Font Awesome 图标复刻（mask-image + 内联 data-URI SVG）
   ------------------------------------------------------------
   不再加载 font-awesome CSS。.fa 基类用 currentColor 作为底色，
   具体图标只负责给 --fa-ico 一个 SVG 蒙版。仅覆盖实际用到的图标。
   ============================================================ */
#view-table .fa {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-image: var(--fa-ico);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--fa-ico);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

#view-table .fa.block { display: block; margin-left: auto; margin-right: auto; }

#view-table .fa-spin { animation: table-fa-spin 1s linear infinite; }
@keyframes table-fa-spin { to { transform: rotate(360deg); } }

#view-table .fa-arrow-up { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V5M12 5l-6 6M12 5l6 6'/%3E%3C/svg%3E"); }
#view-table .fa-bullseye { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E"); }
#view-table .fa-check { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
#view-table .fa-check-circle { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5.5'/%3E%3C/svg%3E"); }
#view-table .fa-check-square-o { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2.5'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5.5'/%3E%3C/svg%3E"); }
#view-table .fa-code { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E"); }
#view-table .fa-copy { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5'/%3E%3Cpath d='M5.5 15.5V6.5a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E"); }
#view-table .fa-database { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6'/%3E%3Cpath d='M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3C/svg%3E"); }
#view-table .fa-download { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M12 15l-4.5-4.5M12 15l4.5-4.5'/%3E%3Cpath d='M5 19.5h14'/%3E%3C/svg%3E"); }
#view-table .fa-eraser { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20H5l-2-2 9-9 5 5-4 4'/%3E%3Cpath d='M9 20h10'/%3E%3C/svg%3E"); }
#view-table .fa-exchange { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8h11l-3.5-3.5M17 16H6l3.5 3.5'/%3E%3C/svg%3E"); }
#view-table .fa-exclamation-circle { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.4v.2'/%3E%3C/svg%3E"); }
#view-table .fa-exclamation-triangle { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 17.3v.2'/%3E%3C/svg%3E"); }
#view-table .fa-files-o { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='11' height='14' rx='2'/%3E%3Cpath d='M5 8v9a3 3 0 0 0 3 3h8'/%3E%3C/svg%3E"); }
#view-table .fa-filter { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7.2V19l-4 2v-8.8z'/%3E%3C/svg%3E"); }
#view-table .fa-info-circle { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.6v.2'/%3E%3C/svg%3E"); }
#view-table .fa-list { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12'/%3E%3Cpath d='M4 6h.5M4 12h.5M4 18h.5'/%3E%3C/svg%3E"); }
#view-table .fa-minus-circle { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M7.5 12h9'/%3E%3C/svg%3E"); }
#view-table .fa-object-group { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8' rx='2'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2'/%3E%3C/svg%3E"); }
#view-table .fa-paste { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='2' width='6' height='4' rx='1.5'/%3E%3C/svg%3E"); }
#view-table .fa-plus { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
#view-table .fa-plus-circle { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
#view-table .fa-refresh { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0 1 13.7-5.6L20 8'/%3E%3Cpath d='M20 4v4h-4'/%3E%3Cpath d='M20 12a8 8 0 0 1-13.7 5.6L4 16'/%3E%3Cpath d='M4 20v-4h4'/%3E%3C/svg%3E"); }
#view-table .fa-search { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E"); }
#view-table .fa-search-plus { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8M8.5 11h5M11 8.5v5'/%3E%3C/svg%3E"); }
#view-table .fa-spinner { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E"); }
#view-table .fa-table { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9.5h18M3 14.5h18M9 4v16M15 4v16'/%3E%3C/svg%3E"); }
#view-table .fa-terminal { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M7 9.5l3 3-3 3M13 15.5h4'/%3E%3C/svg%3E"); }
#view-table .fa-times { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
#view-table .fa-times-circle { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E"); }
#view-table .fa-trash { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M9.5 7V5.2A1.2 1.2 0 0 1 10.7 4h2.6a1.2 1.2 0 0 1 1.2 1.2V7'/%3E%3Cpath d='M6.5 7l1 12.2A1.8 1.8 0 0 0 9.3 21h5.4a1.8 1.8 0 0 0 1.8-1.8L17.5 7'/%3E%3C/svg%3E"); }
#view-table .fa-upload { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5M12 5L7.5 9.5M12 5l4.5 4.5'/%3E%3Cpath d='M5 19.5h14'/%3E%3C/svg%3E"); }
#view-table .fa-wrench { --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }

/* ============================================================
   6. 组件（本项目专属，不写进 theme.css）
   ============================================================ */

/* ---------- 6.1 同步状态条 ---------- */
#sync-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

/* 状态点：颜色随状态走，给「可以点一下」一个视觉暗示 */
#sync-status::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}

#sync-status:hover { border-color: var(--border-strong); }

#sync-status[data-state="idle"] {
    color: var(--text-muted);
    border-color: var(--border);
    background: var(--surface-soft);
}

#sync-status[data-state="pending"] {
    color: var(--accent-gold);
    border-color: rgba(var(--accent-gold-rgb), 0.5);
    background: rgba(var(--accent-gold-rgb), 0.12);
}

#sync-status[data-state="saving"] {
    color: var(--text-muted);
    border-color: var(--border-strong);
    background: var(--surface-inset);
}

#sync-status[data-state="error"] {
    color: var(--accent-rose);
    border-color: rgba(var(--accent-rose-rgb), 0.5);
    background: rgba(var(--accent-rose-rgb), 0.12);
}

#sync-status[data-state="locked"] {
    color: var(--accent-gold);
    border-color: rgba(var(--accent-gold-rgb), 0.6);
    background: rgba(var(--accent-gold-rgb), 0.16);
}

#sync-status[data-state="conflict"] {
    color: var(--accent-rose);
    border-color: var(--accent-rose);
    background: rgba(var(--accent-rose-rgb), 0.16);
}

/* ---------- 6.2 导出下拉 ---------- */
.btn-menu {
    position: relative;
    display: inline-flex;
}

.btn-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 与同一行的 .btn.btn-tiny 对齐，避免只有它高出一截 */
    min-height: 28px;
    padding: 0 0.65rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: var(--grad-action);
    color: var(--btn-on-accent);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s ease;
}

.btn-menu-trigger::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.85;
}

.btn-menu-trigger:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--glow-action); }
.btn-menu-trigger:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

.btn-menu-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 80;
    min-width: 236px;
    max-width: calc(100vw - 2 * var(--sp-4));
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-mid);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    box-shadow: var(--card-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* 触发器与列表之间 8px 的「桥梁」：鼠标横穿空隙时不让菜单掉落 */
.btn-menu-list::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
}

.btn-menu:hover .btn-menu-list,
.btn-menu:focus-within .btn-menu-list,
.btn-menu.is-open .btn-menu-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-menu-note {
    margin: 0;
    padding: 4px 10px 6px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    white-space: nowrap;
}

.btn-menu-list > button[role="menuitem"] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: var(--r-sm);
    background: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--fs-md);
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-menu-list > button[role="menuitem"]:hover,
.btn-menu-list > button[role="menuitem"]:focus-visible {
    background: rgba(var(--action-rgb), 0.12);
    color: var(--action);
    outline: none;
}

.btn-menu-sep {
    height: 1px;
    margin: 5px 2px;
    background: var(--border);
}

.btn-menu-version {
    padding: 2px 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.btn-menu-version #export-version-display {
    white-space: nowrap;
    cursor: pointer;
}

.btn-menu-version #export-version-display:hover { color: var(--action-alt); }
.btn-menu-version #export-version-input { width: 100%; height: 30px; font-size: var(--fs-xs); }

/* ============================================================
   7. 响应式
   ============================================================ */
@media (max-width: 768px) {
    .btn-menu-list { min-width: 210px; }
    #sync-status { padding: 4px 12px; }
}