:root {
    --bg: #ffffff;
    --bg-alt: #f6f7f9;
    --bg-hover: #eef1f5;
    --border: #d8dde3;
    --text: #1c1f23;
    --text-dim: #5a6571;
    --text-faint: #8a96a3;
    --link: #2563eb;
    --link-hover: #1d4ed8;
    --accent: #2563eb;
    --warn-bg: #fff7ed;
    --warn-border: #fb923c;
    --warn-text: #9a3412;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    background: var(--bg); color: var(--text);
    font-size: 14px; line-height: 1.5;
  }
  a { color: var(--link); text-decoration: none; }
  a:hover { color: var(--link-hover); text-decoration: underline; }

  /* 顶部条 */
  header {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    padding: 10px 20px;
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap;
    position: sticky; top: 0; z-index: 30;
  }
  header .logo { font-weight: 700; font-size: 18px; }
  header .logo .small { font-weight: 400; color: var(--text-dim); font-size: 13px; margin-left: 6px; }
  header .logo .data-version {
    font-weight: 400; font-size: 11px; color: var(--text-faint);
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
  }
  header .logo .data-version:empty { display: none; }
  header .search { flex: 1; min-width: 200px; max-width: 500px; position: relative; }
  header .search input {
    width: 100%; padding: 6px 10px 6px 30px;
    border: 1px solid var(--border); border-radius: 4px;
    font-size: 14px; background: white; outline: none; font-family: inherit;
  }
  header .search input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
  }
  header .search::before {
    content: '🔍'; position: absolute; left: 8px; top: 50%;
    transform: translateY(-50%); font-size: 12px; opacity: 0.6;
  }
  header .stat { font-size: 13px; color: var(--text-dim); }
  header .stat b { color: var(--text); font-weight: 600; }

  /* 版本切换器 */
  .version-switcher {
    position: relative;
  }
  .version-btn {
    display: flex; align-items: center; gap: 6px;
    background: white; border: 1px solid var(--border);
    border-radius: 4px; padding: 5px 10px;
    font-family: inherit; font-size: 12px; color: var(--text-dim);
    cursor: pointer;
  }
  .version-btn:hover { border-color: var(--accent); color: var(--text); }
  .version-btn.is-old {
    background: var(--warn-bg);
    border-color: var(--warn-border);
    color: var(--warn-text);
  }
  .version-btn .v-label {
    font-weight: 600;
    color: var(--text);
  }
  .version-btn.is-old .v-label { color: var(--warn-text); }
  .version-btn .v-caret { color: var(--text-faint); font-size: 10px; }
  .version-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 280px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 50;
    display: none;
  }
  .version-dropdown.open { display: block; }
  .version-dropdown .v-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 11px; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 600;
    background: var(--bg-alt);
  }
  .version-item {
    display: block;
    width: 100%;
    background: none; border: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
  }
  .version-item:last-child { border-bottom: none; }
  .version-item:hover { background: var(--bg-hover); }
  .version-item.active { background: rgba(37,99,235,0.06); }
  .version-item .v-name {
    font-weight: 600; color: var(--text); font-size: 14px;
    display: flex; align-items: center; gap: 6px;
  }
  .version-item .v-tag {
    font-size: 10px; padding: 1px 6px; border-radius: 8px;
    background: var(--accent); color: white;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .version-item .v-meta {
    font-size: 12px; color: var(--text-faint); margin-top: 3px;
  }
  .version-item .v-note {
    font-size: 12px; color: var(--text-dim); margin-top: 4px;
    font-style: italic;
  }

  /* 旧版本提醒条 */
  .old-version-banner {
    background: var(--warn-bg);
    border-bottom: 1px solid var(--warn-border);
    color: var(--warn-text);
    padding: 8px 20px;
    font-size: 13px;
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 51px; z-index: 20;
  }
  .old-version-banner a {
    color: var(--warn-text);
    text-decoration: underline;
    font-weight: 600;
    margin-left: auto;
    cursor: pointer;
  }

  /* 主布局 */
  .layout { display: flex; min-height: calc(100vh - 51px); }
  aside {
    width: 220px; flex-shrink: 0;
    background: var(--bg-alt);
    border-right: 1px solid var(--border);
    padding: 16px 0;
    position: sticky;
    top: 51px;
    height: calc(100vh - 51px);
    overflow-y: auto;
  }
  .sidebar-close {
    display: none;       /* 桌面端隐藏 */
    margin: 0 16px 14px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text-dim);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
  }
  .sidebar-close:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  aside h3 {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-faint); margin: 0 0 6px;
    padding: 0 16px; font-weight: 600;
  }
  aside h3:not(:first-child) { margin-top: 20px; }
  aside ul { list-style: none; margin: 0; padding: 0; }
  aside li button {
    display: flex; width: 100%; align-items: center; gap: 8px;
    padding: 5px 16px 5px 12px;
    background: none; border: none;
    border-left: 3px solid transparent;
    text-align: left; font-family: inherit;
    font-size: 13px; color: var(--text); cursor: pointer;
  }
  aside li button:hover { background: var(--bg-hover); }
  aside li button[aria-pressed="true"] {
    background: white;
    border-left-color: var(--accent-color, var(--accent));
    font-weight: 600;
  }
  aside li button .count {
    margin-left: auto; color: var(--text-faint);
    font-size: 11px; font-variant-numeric: tabular-nums;
  }
  aside li button .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-color, transparent);
    flex-shrink: 0;
  }
  main { flex: 1; padding: 20px 24px; min-width: 0; }

  /* 工具栏 */
  .toolbar {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .breadcrumb { font-size: 13px; color: var(--text-dim); }
  .breadcrumb b { color: var(--text); }
  .toolbar .spacer { flex: 1; }
  .view-switch {
    display: flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
  }
  .view-switch button {
    background: white; border: none; padding: 5px 12px;
    cursor: pointer; font-family: inherit; font-size: 12px; color: var(--text-dim);
    border-right: 1px solid var(--border);
  }
  .view-switch button:last-child { border-right: none; }
  .view-switch button[aria-pressed="true"] { background: var(--accent); color: white; }
  .view-switch button:hover:not([aria-pressed="true"]) { background: var(--bg-hover); }

  /* 分组 */
  .group { margin-bottom: 32px; }
  .group h2 {
    font-size: 15px; font-weight: 600; margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--accent-color, var(--accent));
    display: inline-block; padding-right: 12px;
  }
  .group h2 .num {
    font-weight: 400; color: var(--text-faint); font-size: 12px; margin-left: 8px;
  }

  /* 网格 */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  .card-tile {
    background: white; border: 1px solid var(--border);
    border-radius: 4px; overflow: hidden; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .card-tile:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .card-tile .thumb {
    aspect-ratio: 3 / 4; background: var(--bg-alt);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    padding: 4px;
  }
  .card-tile .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
  .card-tile .info { padding: 6px 8px; border-top: 1px solid var(--border); font-size: 12px; }
  .card-tile .info .name {
    color: var(--text); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .card-tile .info .type { font-size: 11px; margin-top: 1px; }

  /* 表格 */
  table.list { width: 100%; border-collapse: collapse; background: white; font-size: 13px; }
  table.list th, table.list td {
    text-align: left; padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
  }
  table.list th {
    background: var(--bg-alt); font-weight: 600;
    color: var(--text-dim); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border);
  }
  table.list tr:hover td { background: var(--bg-hover); cursor: pointer; }
  table.list td.thumb-cell { width: 40px; padding: 4px 8px; }
  table.list td.thumb-cell img {
    width: 30px; height: 40px; object-fit: cover;
    background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: 2px; display: block;
  }
  table.list td.name-cell { font-weight: 500; }
  table.list .pill {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    font-size: 11px; background: white; border: 1px solid;
  }

  /* 空状态 */
  .empty { padding: 60px 20px; text-align: center; color: var(--text-faint); }
  .empty h3 { color: var(--text-dim); margin: 0 0 6px; font-weight: 500; }
  .empty code {
    background: var(--bg-alt); padding: 2px 6px; border-radius: 3px;
    font-family: ui-monospace, monospace; font-size: 12px;
    border: 1px solid var(--border);
  }

  /* 模态框 */
  .modal-bg {
    position: fixed; inset: 0; background: rgba(28,31,35,0.6);
    z-index: 100; display: none;
    align-items: center; justify-content: center; padding: 20px;
  }
  .modal-bg.open { display: flex; }
  .modal {
    background: white; border-radius: 6px; overflow: hidden;
    max-width: 900px; width: 100%; max-height: 90vh;
    display: flex; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  }
  .modal .img-side {
    flex: 0 0 380px; background: var(--bg-alt);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .modal .img-side img { max-width: 100%; max-height: 86vh; object-fit: contain; display: block; padding: 8px; }
  .modal .info-side { flex: 1; padding: 24px; overflow-y: auto; position: relative; }
  .modal .info-side h3 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
  .modal .info-side .subtitle { color: var(--text-dim); font-size: 13px; margin-bottom: 16px; }
  .modal .meta-table { width: 100%; font-size: 13px; border-top: 1px solid var(--border); }
  .modal .meta-table tr td { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .modal .meta-table tr td:first-child { color: var(--text-dim); width: 90px; font-weight: 500; }
  .modal .close-btn {
    position: absolute; top: 12px; right: 12px;
    background: none; border: 1px solid var(--border);
    width: 30px; height: 30px; border-radius: 50%;
    cursor: pointer; font-size: 16px; color: var(--text-dim);
  }
  .modal .close-btn:hover { background: var(--bg-hover); color: var(--text); }

  /* 筛选按钮 (仅手机端可见) */
  .filter-toggle {
    display: none;
    align-items: center; gap: 6px;
    background: white; border: 1px solid var(--border);
    border-radius: 4px; padding: 6px 10px;
    font-family: inherit; font-size: 13px; color: var(--text);
    cursor: pointer;
  }
  .filter-toggle:hover { border-color: var(--accent); }
  .filter-toggle .bars { font-size: 14px; line-height: 1; }

  /* 抽屉遮罩 */
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(28,31,35,0.4);
    z-index: 24;
  }
  .sidebar-backdrop.open { display: block; }

  /* ============ 卡组系统 ============ */

  /* 模态框里的加入卡组控件 */
  .deck-controls {
    display: flex; align-items: center; gap: 10px;
    padding: 12px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 16px;
  }
  .deck-controls-label {
    font-size: 13px; color: var(--text-dim); font-weight: 500;
  }
  .deck-controls-hint {
    font-size: 13px; color: var(--text-dim);
  }
  .deck-btn {
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px; line-height: 1;
    color: var(--text);
    font-family: inherit;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .deck-btn:hover { border-color: var(--accent); color: var(--accent); }
  .deck-btn.minus:disabled, .deck-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
  }
  .deck-btn.minus:disabled:hover { border-color: var(--border); color: var(--text); }
  .deck-count {
    min-width: 28px; text-align: center;
    font-size: 16px; font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* 悬浮球 */
  .deck-fab {
    position: fixed;
    right: 24px; bottom: 24px;
    z-index: 40;
    display: flex; align-items: center; gap: 8px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 999px;
    padding: 12px 18px;
    font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(37,99,235,0.35), 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .deck-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37,99,235,0.45), 0 4px 6px rgba(0,0,0,0.12);
  }
  .deck-fab-count {
    background: white; color: var(--accent);
    border-radius: 999px;
    min-width: 22px; height: 22px;
    padding: 0 7px;
    font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums;
  }
  .deck-fab.has-cards { animation: pop-once 0.3s ease; }
  @keyframes pop-once {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }

  /* 卡组抽屉 */
  .deck-drawer-bg {
    position: fixed; inset: 0;
    background: rgba(28,31,35,0.4);
    z-index: 49;
    display: none;
  }
  .deck-drawer-bg.open { display: block; }
  .deck-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 420px; max-width: 100vw;
    background: white;
    box-shadow: -4px 0 16px rgba(0,0,0,0.1);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 50;
    display: flex; flex-direction: column;
  }
  .deck-drawer.open { transform: translateX(0); }
  .deck-drawer-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
  }
  .deck-drawer-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
  .deck-drawer-stats {
    padding: 12px 20px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    font-size: 13px; color: var(--text-dim);
    flex-shrink: 0;
  }
  .deck-drawer-stats b {
    color: var(--accent); font-size: 16px; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .deck-drawer-actions {
    padding: 12px 20px;
    display: flex; gap: 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .deck-action {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit; font-size: 13px;
    color: var(--text);
    transition: all 0.15s;
  }
  .deck-action:hover { border-color: var(--accent); color: var(--accent); }
  .deck-action.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
  }
  .deck-action.primary:hover { background: var(--link-hover); border-color: var(--link-hover); color: white; }
  .deck-action.danger { color: #b91c1c; }
  .deck-action.danger:hover { border-color: #b91c1c; color: #b91c1c; }
  .deck-action:disabled { opacity: 0.5; cursor: not-allowed; }
  .deck-drawer-body {
    flex: 1; overflow-y: auto;
    padding: 12px 0;
  }
  .deck-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-faint);
  }
  .deck-group {
    margin-bottom: 16px;
  }
  .deck-group-title {
    padding: 6px 20px;
    font-size: 12px; font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
  }
  .deck-group-dot {
    width: 8px; height: 8px; border-radius: 50%;
  }
  .deck-group-count {
    margin-left: auto;
    color: var(--text-faint);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  .deck-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.1s;
  }
  .deck-item:hover { background: var(--bg-alt); }
  .deck-item-thumb {
    width: 36px; height: 48px; flex-shrink: 0;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .deck-item-thumb img {
    max-width: 100%; max-height: 100%; object-fit: contain;
  }
  .deck-item-info {
    flex: 1; min-width: 0;
  }
  .deck-item-name {
    font-size: 13px; font-weight: 500;
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .deck-item-type {
    font-size: 11px; color: var(--text-faint);
    margin-top: 2px;
  }
  .deck-item-controls {
    display: flex; align-items: center; gap: 4px;
    flex-shrink: 0;
  }
  .deck-item-controls .deck-btn {
    width: 26px; height: 26px;
    font-size: 14px;
  }
  .deck-item-controls .deck-count {
    min-width: 22px;
    font-size: 14px;
  }

  /* 导出对话框 */
  .export-dialog-bg {
    position: fixed; inset: 0;
    background: rgba(28,31,35,0.6);
    z-index: 110;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
  }
  .export-dialog-bg.open { display: flex; }
  .export-dialog {
    background: white;
    border-radius: 8px;
    width: 100%; max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  }
  .export-dialog h2 {
    margin: 0 0 12px;
    font-size: 20px; font-weight: 600;
  }
  .export-hint {
    color: var(--text-dim); font-size: 13px;
    margin: 0 0 10px;
  }
  .export-field {
    margin-bottom: 14px;
  }
  .export-field label {
    display: block;
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 6px;
  }
  .export-field-hint {
    font-weight: 400;
    color: var(--text-faint);
    font-size: 12px;
  }
  #export-note-input, #export-style-input, #export-band-select, #export-desc-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    background: white;
    color: var(--text);
  }
  #export-desc-input {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
  }
  #export-note-input:focus, #export-style-input:focus,
  #export-band-select:focus, #export-desc-input:focus {
    border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
  }
  .export-output-wrap {
    margin-bottom: 16px;
  }
  .export-output-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
  }
  .export-output-bar .deck-action {
    flex: 0 0 auto;
  }
  #export-output {
    width: 100%;
    min-height: 240px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    background: var(--bg-alt);
    resize: vertical;
    outline: none;
  }
  .export-actions {
    display: flex; gap: 8px; justify-content: flex-end;
  }
  .export-actions .deck-action { flex: 0 0 auto; min-width: 100px; }

  /* 复制成功提示 */
  .copy-success {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(28,31,35,0.92);
    color: white;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 200;
    pointer-events: none;
    animation: toast 1.6s ease forwards;
  }
  @keyframes toast {
    0%   { opacity: 0; transform: translate(-50%, -40%); }
    20%  { opacity: 1; transform: translate(-50%, -50%); }
    80%  { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -50%); }
  }

  @media (max-width: 720px) {
    /* ============ 顶栏: 紧凑布局 ============ */
    header {
      padding: 8px 10px;
      gap: 8px;
    }
    header .logo {
      font-size: 16px;
      flex: 0 0 auto;
    }
    header .logo .small { display: none; }       /* "Card Wiki" 副标题省略 */
    header .logo .data-version {
      font-size: 10px;
      padding: 1px 5px;
      margin-left: 4px;
    }
    header .search {
      flex: 1 1 100%;
      order: 10;            /* 搜索框换行到第二行 */
      min-width: 0;
      max-width: none;
    }
    header .stat { display: none; }
    .nav-btn {
      padding: 5px 8px !important;
      font-size: 12px !important;
    }
    .filter-toggle {
      display: inline-flex;
      padding: 5px 10px;
    }
    .filter-toggle .lbl { display: none; }       /* 只显示 ☰ 图标 */

    /* ============ 侧边栏: 抽屉式 ============ */
    aside {
      display: block;
      position: fixed;
      top: 0; left: 0; bottom: 0;
      width: 270px; max-width: 80vw;
      height: 100vh;
      transform: translateX(-100%);
      transition: transform 0.25s ease;
      z-index: 40;
      box-shadow: 4px 0 16px rgba(0,0,0,0.15);
      padding-top: 50px;       /* 给关闭按钮留位置 */
    }
    aside.open { transform: translateX(0); }
    .sidebar-close {
      display: block !important;
    }
    .sidebar-backdrop {
      background: rgba(0, 0, 0, 0.5);
      z-index: 35;
    }

    /* ============ 主区域 ============ */
    main { padding: 10px; }
    .layout { display: block; }    /* 不再 flex,sidebar 改为 fixed 之后 main 直接占满 */

    /* ============ 工具栏: 紧凑 ============ */
    .toolbar {
      gap: 6px;
      padding: 8px 0;
      font-size: 12px;
    }
    .toolbar button { padding: 4px 8px !important; font-size: 12px !important; }

    /* ============ 卡片网格 ============ */
    .grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }
    .card { font-size: 12px; }
    .card .card-meta { padding: 6px 8px; }
    .card .name { font-size: 12px; }
    .card .meta-tags { gap: 4px; font-size: 10px; }

    /* ============ 模态框 ============ */
    .modal-bg { padding: 0; }
    .modal {
      flex-direction: column;
      max-height: 100vh;
      max-width: 100vw;
      border-radius: 0;
      width: 100%;
      height: 100vh;
    }
    .modal .img-side {
      flex: 0 1 auto;
      max-height: 50vh;
      min-height: 0;
      padding: 10px;
    }
    .modal .img-side img { max-height: 48vh; }
    .modal .info-side {
      flex: 1 1 auto;
      padding: 14px;
      overflow-y: auto;
    }
    .modal .info-side h2 { font-size: 18px; }

    /* ============ 卡组抽屉 ============ */
    .deck-fab {
      bottom: 12px; right: 12px;
      padding: 10px 14px;
      font-size: 13px;
    }
    .deck-fab .deck-fab-label { display: none; }
    .deck-drawer {
      width: 100vw;
      max-width: 100vw;
    }

    /* ============ 卡组库 ============ */
    .library-bg { padding: 0; }
    .library {
      max-height: 100vh;
      border-radius: 0;
      width: 100%;
      height: 100vh;
    }
    .library-head, .library-filters, .library-body {
      padding-left: 12px; padding-right: 12px;
    }
    .library-filters {
      gap: 6px;
      flex-wrap: wrap;
    }
    .library-filters .lib-refresh { margin-left: 0; }
    .deck-card { padding: 12px; }
    .deck-card-title { font-size: 14px; }
    .deck-card-actions {
      gap: 6px;
      flex-wrap: wrap;
    }
    .deck-card-action {
      padding: 4px 8px;
      font-size: 11px;
    }

    /* ============ 卡组详情弹窗 ============ */
    .deck-detail-bg { padding: 0; }
    .deck-detail {
      max-height: 100vh;
      width: 100%;
      height: 100vh;
      border-radius: 0;
    }
    .deck-detail-foot {
      flex-wrap: wrap;
      gap: 6px;
    }

    /* ============ 导出对话框 ============ */
    .export-bg { padding: 0; }
    .export-dialog {
      padding: 12px;
      width: 100%;
      max-height: 100vh;
      height: 100vh;
      border-radius: 0;
      max-width: 100vw;
    }

    /* ============ 顶栏版本切换 ============ */
    .version-switcher { font-size: 12px; }
    .version-btn { padding: 4px 8px; font-size: 12px; }
  }

  @media (max-width: 480px) {
    /* 更小屏幕进一步压缩 */
    header { padding: 6px 8px; gap: 6px; }
    header .logo { font-size: 14px; }
    main { padding: 8px; }
    .grid { gap: 6px; }
    .deck-fab { padding: 9px 12px; font-size: 12px; }
  }

  /* ============ 主/副卡组 Tab ============ */
  .deck-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg-alt);
  }
  .deck-tab {
    flex: 1;
    padding: 10px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-dim);
    border-bottom: 2px solid transparent;
    transition: all 0.12s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .deck-tab:hover { color: var(--text); background: var(--bg); }
  .deck-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: white;
    font-weight: 600;
  }
  .deck-tab-count {
    font-size: 11px;
    background: var(--bg-alt);
    color: var(--text-dim);
    padding: 1px 7px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
  }
  .deck-tab.active .deck-tab-count {
    background: var(--accent);
    color: white;
  }
  /* 主卡组 +/- 旁边的小提示, 显示当前在哪个卡组 */
  .deck-controls-target {
    font-size: 11px;
    color: var(--text-faint);
    margin-left: 6px;
    padding: 2px 6px;
    background: var(--bg-alt);
    border-radius: 3px;
  }
  .deck-controls-target.sub {
    color: #16a34a;
    background: #ecfdf5;
  }
  /* 卡详情里的关联卡牌区域 */  .related-cards-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .related-cards-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
  }
  .related-cards-grid {
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .related-card-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 5px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.12s;
    font-size: 12px;
    color: var(--text);
  }
  .related-card-chip:hover {
    border-color: var(--accent);
    background: white;
    color: var(--accent);
  }
  .related-card-chip img {
    width: 24px; height: 32px;
    object-fit: cover;
    border-radius: 2px;
  }
  .related-cards-edit-btn {
    margin-left: auto;
    font-size: 11px;
    padding: 3px 10px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    color: #92400e;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
  }
  .related-cards-edit-btn:hover { background: #fde68a; }
  .related-cards-empty {
    font-size: 12px;
    color: var(--text-faint);
    padding: 8px 0;
  }

  /* ============ 机制标签 ============ */
  .card-tags-list {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 4px 0;
  }
  .card-tag-chip {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 500;
    color: white;
    background: var(--tc, #64748b);
    line-height: 1.4;
  }
  .card-tag-chip.removable {
    cursor: pointer;
    transition: opacity 0.1s;
  }
  .card-tag-chip.removable:hover {
    opacity: 0.75;
  }
  .card-tag-chip.clickable {
    cursor: pointer;
    background: white;
    color: var(--tc, #64748b);
    border: 1px dashed var(--tc, #64748b);
    transition: all 0.1s;
  }
  .card-tag-chip.clickable:hover {
    background: var(--tc, #64748b);
    color: white;
    border-style: solid;
  }
  .card-tags-empty {
    font-size: 12px;
    color: var(--text-faint);
    padding: 8px 0;
  }
  .card-effect-empty {
    font-size: 12px;
    color: var(--text-faint);
    padding: 8px 0;
  }
  /* 涉及的状态/地块 chip */
  #card-terms-container { display: flex; flex-wrap: wrap; gap: 8px; }
  .term-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 12px;
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
    cursor: help;
    border: 1.5px solid;
    user-select: none;
    transition: transform 0.12s;
  }
  .term-chip:hover { transform: translateY(-1px); }
  .term-chip { cursor: pointer; }

  /* 可下钻术语面板 */
  .term-panel {
    position: fixed; z-index: 100001; display: none;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    overflow: hidden;
    min-width: 240px;
  }
  .tp-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--card-bg, rgba(0,0,0,0.02));
  }
  .tp-back, .tp-close {
    border: 0; background: transparent; cursor: pointer;
    font-size: 18px; line-height: 1; color: var(--text-faint, #94a3b8);
    padding: 2px 6px; border-radius: 6px;
  }
  .tp-back:hover, .tp-close:hover { background: rgba(0,0,0,0.06); color: var(--text); }
  .tp-back-placeholder { width: 22px; display: inline-block; }
  .tp-name { font-weight: 800; font-size: 15px; color: var(--text); flex: 0 0 auto; }
  .tp-kind {
    font-size: 11px; font-weight: 700; color: #fff;
    padding: 2px 8px; border-radius: 999px; margin-left: auto;
  }
  .tp-kind.tp-status { background: #8b5cf6; }
  .tp-kind.tp-abnormal { background: #dc2626; }
  .tp-kind.tp-tile { background: #0ea5e9; }
  .tp-close { margin-left: 4px; }
  .tp-body {
    padding: 12px 14px; font-size: 14px; line-height: 1.7;
    color: var(--text); white-space: pre-wrap;
  }
  .term-inline-link {
    color: var(--pink, #ff5da2); font-weight: 700;
    cursor: pointer; border-bottom: 1.5px dashed currentColor;
  }
  .term-inline-link:hover { opacity: 0.75; }
  .term-status { color: #8b5cf6; border-color: #8b5cf6; background: rgba(139,92,246,0.08); }
  .term-abnormal { color: #dc2626; border-color: #dc2626; background: rgba(220,38,38,0.08); }
  .term-tile   { color: #0ea5e9; border-color: #0ea5e9; background: rgba(14,165,233,0.08); }
  .term-kind {
    font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 6px;
    background: currentColor;
  }
  .term-owner { font-weight: 600; opacity: 0.7; font-size: 12px; }
  .term-kind { color: #fff; }
  .term-status .term-kind { background: #8b5cf6; }
  .term-abnormal .term-kind { background: #dc2626; }
  .term-tile .term-kind { background: #0ea5e9; }
  .term-tooltip {
    position: fixed; z-index: 100000; display: none;
    background: #1e293b; color: #f1f5f9;
    font-size: 13px; line-height: 1.6;
    padding: 10px 14px; border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
    pointer-events: none;
  }

  .card-effect-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    background: var(--card-bg, rgba(0,0,0,0.03));
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 12px 14px;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .effect-card-link {
    color: var(--pink, #ff5da2);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1.5px dashed currentColor;
  }
  .effect-card-link:hover { opacity: 0.75; }


  /* 标签编辑器 */
  .tag-editor-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 140;
    align-items: center; justify-content: center;
    padding: 20px;
  }
  .tag-editor-bg.open { display: flex; }
  .tag-editor {
    background: white;
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
  }
  .tag-editor h3 {
    margin: 0 0 14px;
    font-size: 16px;
  }
  .tag-editor .section-title {
    font-size: 12px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin: 12px 0 6px;
  }
  .tag-editor .tag-input-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
  }
  .tag-editor .tag-input-bar input {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
  }
  .tag-editor .tag-input-bar button {
    padding: 7px 14px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    cursor: pointer;
  }
  .tag-editor-foot {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .tag-editor-foot button {
    flex: 1;
    padding: 8px 14px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
  }
  .tag-editor-foot .cancel {
    background: white;
    border: 1px solid var(--border);
    color: var(--text);
  }
  .tag-editor-foot .save {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: white;
  }

  /* ============ 版本记录 ============ */  .changelog-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: none; z-index: 150;
    align-items: stretch; justify-content: flex-end;
  }
  .changelog-bg.open { display: flex; }
  .changelog {
    background: var(--bg);
    width: 680px; max-width: 100vw;
    height: 100vh;
    display: flex; flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  }
  .changelog-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
  }
  .changelog-head h2 { flex: 1; margin: 0; font-size: 18px; }
  .changelog-close {
    background: none; border: none; font-size: 24px;
    cursor: pointer; color: var(--text-dim); padding: 0 4px;
  }
  .changelog-body {
    flex: 1; overflow-y: auto;
    padding: 20px;
    display: flex; flex-direction: column; gap: 16px;
  }
  .changelog-entry {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }
  .changelog-entry.is-current {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
  }
  .changelog-entry-head {
    padding: 12px 16px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  }
  .changelog-version {
    font-size: 15px; font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }
  .changelog-date {
    font-size: 12px; color: var(--text-faint);
  }
  .changelog-entry-title {
    font-size: 14px; font-weight: 600;
    flex: 1;
  }
  .changelog-current-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--accent);
    color: white;
    border-radius: 10px;
    font-weight: 600;
  }
  .changelog-entry-body {
    padding: 12px 16px;
  }
  .changelog-desc {
    font-size: 13px;
    color: var(--text);
    line-height: 1.7;
    white-space: pre-wrap;
    margin: 0 0 10px;
  }
  .changelog-download {
    display: inline-block;
    padding: 6px 14px;
    background: var(--accent);
    color: white;
    border-radius: 5px;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
  }
  .changelog-download:hover { opacity: 0.85; }
  .changelog-entry-foot {
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end;
  }
  .changelog-edit-btn {
    font-size: 12px;
    padding: 3px 10px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    color: #92400e;
    border-color: #fbbf24;
    background: #fef3c7;
    font-family: inherit;
  }
  .changelog-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-faint);
    font-size: 14px;
  }

  /* 版本记录编辑器 */
  .changelog-editor-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: none; z-index: 160;
    align-items: center; justify-content: center;
    padding: 20px;
  }
  .changelog-editor-bg.open { display: flex; }
  .changelog-editor {
    background: white; border-radius: 8px;
    max-width: 560px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    padding: 20px;
  }
  .changelog-editor h3 { margin: 0 0 16px; font-size: 16px; }
  .cle-field {
    margin-bottom: 12px;
  }
  .cle-field label {
    display: block;
    font-size: 13px; font-weight: 500;
    margin-bottom: 4px;
    color: var(--text);
  }
  .cle-field input, .cle-field textarea {
    width: 100%; padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit; font-size: 13px;
    box-sizing: border-box;
    resize: vertical;
  }

  @media (max-width: 720px) {
    .changelog { width: 100vw; border-radius: 0; }
    .changelog-editor { max-width: 100%; }
  }

  /* ============ 批量管理界面 ============ */
  .batch-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 150;
    align-items: stretch; justify-content: stretch;
    overflow: hidden;   /* 背景层不滚动 */
  }
  .batch-bg.open { display: flex; }
  .batch {
    background: white;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;   /* 容器不滚动,只有 body 滚 */
    min-height: 0;
  }
  .batch-head {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-alt);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .batch-tabs {
    display: flex;
    gap: 4px;
  }
  .batch-tab {
    padding: 6px 14px;
    border: 1px solid var(--border);
    background: white;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-dim);
  }
  .batch-tab.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }
  .batch-dirty-info {
    flex: 1;
    font-size: 13px;
    color: var(--text-dim);
  }
  .batch-dirty-info.has-changes {
    color: #d97706;
    font-weight: 600;
  }
  .batch-save-btn {
    padding: 7px 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    cursor: pointer;
    font-weight: 600;
  }
  .batch-save-btn:disabled {
    background: var(--border);
    cursor: not-allowed;
  }
  .batch-close-btn {
    background: none; border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-dim);
    padding: 0 4px;
  }
  .batch-filters {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--bg);
  }
  .batch-filters input, .batch-filters select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
  }
  .batch-filters input { min-width: 200px; }
  .batch-only-empty {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
  }
  .batch-stats {
    padding: 8px 20px;
    font-size: 12px;
    color: var(--text-faint);
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
  }
  .batch-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 0;   /* 关键: 防止 flex 子项撑破容器产生第二个滚动条 */
  }
  /* 标签管理面板 */
  .tagmgr-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 20px;
  }
  .tagmgr-intro {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.7;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
  }
  .tagmgr-add {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
  .tagmgr-add input[type="text"] {
    flex: 1; min-width: 160px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit; font-size: 14px;
  }
  .tagmgr-add input[type="color"] {
    width: 44px; height: 38px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    padding: 2px;
    background: white;
  }
  .tagmgr-add button {
    padding: 8px 18px;
    background: var(--accent); color: white;
    border: none; border-radius: 6px;
    font-family: inherit; font-weight: 600; cursor: pointer;
    white-space: nowrap;
  }
  .tagmgr-list {
    display: flex; flex-direction: column; gap: 8px;
  }
  .tagmgr-item {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: white;
  }
  .tagmgr-item .tm-chip {
    display: inline-flex; align-items: center;
    padding: 4px 14px;
    border-radius: 999px;
    color: white; font-size: 13px; font-weight: 600;
    min-width: 60px; justify-content: center;
  }
  .tagmgr-item .tm-name {
    flex: 1;
    font-size: 14px; font-weight: 500;
  }
  .tagmgr-item .tm-count {
    font-size: 12px; color: var(--text-faint);
  }
  .tagmgr-item input[type="color"] {
    width: 40px; height: 34px;
    border: 1px solid var(--border);
    border-radius: 6px; cursor: pointer; padding: 2px;
    background: white;
  }
  .tagmgr-item .tm-del {
    padding: 6px 12px;
    background: #fef2f2; color: #dc2626;
    border: 1px solid #fca5a5; border-radius: 6px;
    font-family: inherit; font-size: 13px; cursor: pointer;
  }
  .tagmgr-item .tm-del:hover { background: #fee2e2; }
  .tagmgr-empty {
    text-align: center; padding: 40px; color: var(--text-faint);
  }
  .batch-row {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    gap: 14px;
  }
  .batch-row:hover { background: var(--bg-hover); }
  .batch-row.modified {
    background: #fef3c7;
  }
  .batch-row.modified:hover { background: #fde68a; }
  .batch-row img {
    width: 50px; height: 70px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--bg-alt);
  }
  .batch-row-info {
    flex: 0 0 220px;
    min-width: 0;
  }
  .batch-row-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .batch-row-meta {
    font-size: 11px;
    color: var(--text-faint);
  }
  .batch-row-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .batch-add-btn {
    padding: 4px 10px;
    background: white;
    border: 1px dashed var(--border);
    border-radius: 11px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    font-family: inherit;
  }
  .batch-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    border-style: solid;
  }
  /* 批量管理时的标签 chip - 复用 card-tag-chip 但加个移除按钮 */
  .batch-row .card-tag-chip {
    padding-right: 4px;
  }
  .batch-row .card-tag-chip .chip-remove {
    margin-left: 5px;
    padding: 0 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
  }
  .batch-row .card-tag-chip .chip-remove:hover {
    background: rgba(255,255,255,0.5);
  }

  /* 添加标签下拉菜单 */
  .batch-add-menu {
    position: absolute;
    background: white;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 200;
    padding: 10px;
    min-width: 260px;
    max-width: 360px;
  }
  .batch-add-menu input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    margin-bottom: 8px;
  }
  .batch-add-menu-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
  }
  .batch-add-menu-presets .card-tag-chip.clickable {
    font-size: 12px;
  }
  .batch-add-menu-empty {
    font-size: 12px;
    color: var(--text-faint);
    padding: 6px;
    text-align: center;
  }

  /* 批量管理界面手机适配 */
  @media (max-width: 720px) {
    .batch-head {
      padding: 8px 12px;
      gap: 6px;
      flex-wrap: wrap;
    }
    .batch-tabs { gap: 2px; }
    .batch-tab { padding: 4px 10px; font-size: 12px; }
    .batch-dirty-info { font-size: 11px; flex: 1 1 100%; order: 10; }
    .batch-save-btn { padding: 6px 10px; font-size: 12px; }
    .batch-filters { padding: 8px 12px; gap: 6px; }
    .batch-filters input { min-width: 0; flex: 1 1 100%; }
    .batch-row { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
    .batch-row img { width: 40px; height: 56px; }
    .batch-row-info { flex: 0 0 140px; }
    .batch-row-name { font-size: 13px; }
    .batch-row-content { flex: 1 1 100%; }
  }

  /* 关联卡牌编辑器 */
  .relation-editor-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 140;
    align-items: center; justify-content: center;
    padding: 20px;
  }
  .relation-editor-bg.open { display: flex; }
  .relation-editor {
    background: white;
    border-radius: 8px;
    width: 100%; max-width: 600px;
    max-height: 85vh;
    display: flex; flex-direction: column;
  }
  .relation-editor-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
  }
  .relation-editor-head h3 { margin: 0; font-size: 15px; flex: 1; }
  .relation-editor-body {
    flex: 1; overflow-y: auto;
    padding: 14px 18px;
  }
  .relation-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 14px;
    margin-bottom: 12px;
    font-family: inherit;
    outline: none;
  }
  .relation-search:focus { border-color: var(--accent); }
  .relation-current-list {
    margin-bottom: 14px;
    padding: 10px;
    background: var(--bg-alt);
    border-radius: 5px;
    min-height: 40px;
  }
  .relation-current-empty {
    color: var(--text-faint);
    font-size: 12px;
    text-align: center;
    padding: 6px 0;
  }
  .relation-pick-list {
    max-height: 350px;
    overflow-y: auto;
  }
  .relation-pick-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .relation-pick-item:hover { background: var(--bg-alt); }
  .relation-pick-item.selected {
    background: #eff6ff;
    border-color: var(--accent);
  }
  .relation-pick-item img {
    width: 28px; height: 38px;
    object-fit: cover;
    border-radius: 2px;
  }
  .relation-pick-name { flex: 1; }
  .relation-pick-meta { font-size: 11px; color: var(--text-faint); }
  .relation-editor-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    display: flex; gap: 8px; justify-content: flex-end;
  }

  /* ============ 卡组库 ============ */
  .nav-btn {
    background: white;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
    white-space: nowrap;
  }
  .nav-btn:hover { background: var(--bg-alt); border-color: var(--accent); color: var(--accent); }

  .library-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    z-index: 120;
    align-items: flex-start; justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
  }
  .library-bg.open { display: flex; }
  .library {
    background: white;
    border-radius: 10px;
    width: 100%; max-width: 1100px;
    min-height: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    display: flex; flex-direction: column;
    max-height: calc(100vh - 80px);
  }
  .library-head {
    padding: 18px 24px 12px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
  }
  .library-head h2 { margin: 0; font-size: 18px; }
  .library-head .lib-count { color: var(--text-faint); font-size: 13px; }
  .library-head .lib-close {
    margin-left: auto;
    background: none; border: none;
    font-size: 24px; color: var(--text-faint);
    cursor: pointer; padding: 0 4px;
  }
  .library-head .lib-close:hover { color: var(--text); }

  .library-filters {
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-alt);
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  }
  .library-filters select,
  .library-filters input {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 13px;
    background: white;
    font-family: inherit;
    outline: none;
  }
  .library-filters select:focus,
  .library-filters input:focus { border-color: var(--accent); }
  .library-filters label { font-size: 12px; color: var(--text-dim); font-weight: 600; }
  .library-filters .sep { color: var(--text-faint); margin: 0 4px; }
  .library-filters .lib-refresh {
    margin-left: auto;
    background: none; border: 1px solid var(--border);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-dim);
  }
  .library-filters .lib-refresh:hover { border-color: var(--accent); color: var(--accent); }

  .library-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px 24px;
  }
  .library-loading,
  .library-empty,
  .library-error {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-faint);
    font-size: 14px;
  }
  .library-error { color: #b91c1c; }
  .library-error .retry {
    margin-top: 12px;
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid currentColor;
    border-radius: 5px;
    cursor: pointer;
    color: var(--accent);
    border-color: var(--accent);
  }
  .deck-list { display: flex; flex-direction: column; gap: 10px; }
  .deck-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    background: white;
    transition: border-color 0.12s, box-shadow 0.12s;
  }
  .deck-card:hover { border-color: #b9c2cc; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
  .deck-card-head {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 6px;
  }
  .deck-card-title {
    font-size: 15px; font-weight: 600; color: var(--text);
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .deck-card-meta {
    font-size: 12px; color: var(--text-faint);
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 8px;
  }
  .deck-card-meta .author { color: var(--text-dim); }
  .deck-card-meta .sep { color: var(--border); }
  .deck-card-tags {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .deck-tag {
    font-size: 11px;
    padding: 2px 9px;
    border-radius: 10px;
    border: 1px solid var(--border);
    color: var(--text-dim);
    background: var(--bg-alt);
  }
  .deck-tag.band {
    border-color: #6c83b8; color: #6c83b8;
    background: #eef3fc;
  }
  .deck-tag.style {
    border-color: #16a34a; color: #16a34a;
    background: #ecfdf5;
  }
  .deck-card-desc {
    font-size: 13px; color: var(--text-dim);
    line-height: 1.45;
    margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .deck-card-actions {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  }
  .deck-card-action {
    background: white;
    border: 1px solid var(--border);
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--text-dim);
    font-family: inherit;
    transition: all 0.1s;
  }
  .deck-card-action:hover { border-color: var(--accent); color: var(--accent); }
  .deck-card-action.like {
    display: inline-flex; align-items: center; gap: 5px;
  }
  .deck-card-action.like.liked {
    border-color: #f43f5e; color: #f43f5e;
    background: #fff1f3;
  }
  .deck-card-action.like .heart { font-size: 13px; }
  .deck-card-action.detail { color: var(--accent); border-color: var(--accent); }
  .deck-card-action.detail:hover { background: var(--accent); color: white; }
  .deck-card-action.danger {
    color: #b91c1c;
    border-color: #fca5a5;
    background: #fef2f2;
  }
  .deck-card-action.danger:hover {
    background: #b91c1c;
    color: white;
    border-color: #b91c1c;
  }
  .deck-version {
    font-size: 11px;
    color: var(--text-faint);
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-alt);
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .deck-version.stale {
    color: #92400e;
    border-color: #fbbf24;
    background: #fef3c7;
  }

  .deck-detail-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    display: none;
    z-index: 130;
    align-items: center; justify-content: center;
    padding: 20px;
  }
  .deck-detail-bg.open { display: flex; }
  .deck-detail {
    background: white;
    border-radius: 8px;
    width: 100%; max-width: 700px;
    max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  }
  .deck-detail-head {
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
  }
  .deck-detail-head h3 { margin: 0; font-size: 16px; flex: 1; }
  .deck-detail-head .close {
    background: none; border: none; font-size: 22px;
    color: var(--text-faint); cursor: pointer;
  }
  .deck-detail-body {
    flex: 1; overflow-y: auto;
    padding: 16px 22px;
  }
  .deck-detail-text {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 10px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.55;
    background: var(--bg-alt);
    color: var(--text);
    resize: vertical;
    min-height: 320px;
  }
  .deck-detail-foot {
    padding: 12px 22px;
    border-top: 1px solid var(--border);
    display: flex; gap: 8px; justify-content: flex-end;
  }

  .upload-status {
    margin: 10px 0;
    padding: 10px 14px;
    border-radius: 5px;
    font-size: 13px;
    display: none;
  }
  .upload-status.show { display: block; }
  .upload-status.success { background: #ecfdf5; color: #047857; border: 1px solid #6ee7b7; }
  .upload-status.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }
  .upload-status.info { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }

  @media (max-width: 720px) {
    .library-bg { padding: 0; }
    .library {
      max-height: 100vh;
      border-radius: 0;
    }
    .library-head, .library-filters, .library-body { padding-left: 14px; padding-right: 14px; }
    .library-filters { gap: 8px; }
    .library-filters .lib-refresh { margin-left: 0; }
  }