/* 1. 基础与变量 */
html { font-size:16px; }
html, body { height:100%; overflow-x:hidden; }

:root {
  /* 语义色 */
  --fc-color-primary:#2563eb;
  --fc-color-primary-hover:#1d4ed8;
  --fc-color-primary-active:#194ec0;

  --fc-color-success:#10B981;
  --fc-color-success-hover:#0ea373;
  --fc-color-success-active:#0c8d63;

  --fc-color-danger:#dc2626;
  --fc-color-danger-hover:#b91c1c;
  --fc-color-danger-active:#991b1b;

  --fc-color-info:#2563eb;

  /* 旧别名 */
  --brand-green:#10B981;
  --brand-green-hover:#0ea373;
  --brand-green-dark:#198f63;
  --brand-green-dark-hover:#147452;
  --danger:#dc2626;
  --danger-hover:#b91c1c;
  --primary:#2563eb;
  --primary-hover:#1d4ed8;
  --primary-dark:#194ec0;
  --muted:#6b7280;

  /* 基础色与结构变量 */
  --bg-primary:#f9fafb;
  --bg-secondary:#ffffff;
  --text-primary:#1f2937;
  --text-secondary:#4b5563;
  --border-color:#e5e7eb;
  --shadow-color:rgba(0,0,0,0.12);
  --transition-speed:0.28s;

  /* 动态暗色渐变占位：默认无（light 模式不会显示） */
  --dark-rand-gradient:none;
  /* 暗色主题时 JS 会写入 --dark-rand-base 作为真正的底色（导出等回退） */
  --dark-rand-base:#111827;

  --transition-speed:0.28s;

  --toast-bg:#ffffff;
  --toast-border:#e5e7eb;
  --toast-text:#1f2937;
  --toast-success:#059669;
  --toast-error:#dc2626;
  --toast-loading:#2563eb;

  --control-height:46px;
  --control-radius:10px;
  --control-h-padding:14px;
  --control-btn-h-padding:18px;
  --form-row-gap:16px;

  --content-left-gutter:25px;
  --content-right-gutter:25px;
  --content-bottom-gap:12px;
  --bottom-title-gap:10px;

  --sidebar-footer-h:32px;
  --footer-v-pad:16px;
  --sbw:16px;

  --item-like-w:24px;
  --item-remove-w:16px;
  --item-actions-gap:12px;

  --action-restore-col-w:16px;
  --action-like-col-w:24px;
  --action-add-col-w:16px;
  --action-gap:12px;

  --seg-btn-w:80px;
  --gesture-close-zone-width:24px;

  --tooltip-bg:#ffffff;
  --tooltip-text:#1f2937;
  --tooltip-border:rgba(0,0,0,.18);
  --tooltip-shadow:0 8px 24px rgba(0,0,0,.18);
}

[data-theme="dark"] {
  --bg-primary:#111827;
  --bg-secondary:#1f2937c3;
  --text-primary:#f3f4f6;
  --text-secondary:#d1d5db;
  --border-color:#374151;
  --shadow-color:rgba(0,0,0,0.55);

  --toast-bg:#1f2937;
  --toast-border:#374151;
  --toast-text:#f3f4f6;

  --tooltip-bg:#1f2937;
  --tooltip-text:#f3f4f6;
  --tooltip-border:rgba(255,255,255,.14);
  --tooltip-shadow:0 8px 28px rgba(0,0,0,.45);
}

/* ===== 修改：拆分背景，允许注入渐变 ===== */
body {
  /* 基础底色：亮色使用 --bg-primary；暗色时 JS 会把 --dark-rand-base 改成深色并保留在 background-color */
  background-color:var(--bg-primary)!important;
  /* 渐变层：默认 none，暗色模式 JS 写入 --dark-rand-gradient */
  background-image:var(--dark-rand-gradient)!important;
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;

  color:var(--text-primary);
  font-family:system-ui,-apple-system,"Segoe UI","Helvetica Neue","Microsoft YaHei",Arial,sans-serif;
  transition:background-color .5s, color .3s;
  /* 给渐变出现一个轻微淡入体验 */
  animation:fc-bg-fade-in .6s ease;
}

@keyframes fc-bg-fade-in {
  from { opacity:0; }
  to { opacity:1; }
}

/* Tailwind 适配覆写 */
.bg-white { background:var(--bg-secondary)!important; }
.text-gray-600,.text-gray-500,.text-gray-700 { color:var(--text-secondary)!important; }
.border-gray-200,.border-gray-300 { border-color:var(--border-color)!important; }
.shadow-md { box-shadow:0 4px 10px var(--shadow-color)!important; }
a, button { color:var(--text-primary); }

/* 2. 表单与输入 */
.fc-form-grid { display:grid; grid-template-columns:1fr; row-gap:var(--form-row-gap); }
.fc-form-row label { display:block; margin-bottom:6px; font-size:14px; }

.fc-field,
.fc-btn,
.fc-select {
  box-sizing:border-box;
  height:var(--control-height)!important;
  padding:0 var(--control-h-padding)!important;
  border:1px solid var(--border-color);
  border-radius:var(--control-radius);
  background-color:var(--bg-secondary);
  color:var(--text-primary);
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  font-weight:500;
  transition:.18s;
}
select.fc-field {
  appearance:none;
  background:
    var(--bg-secondary)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 12px center / 14px 14px;
  padding-right:40px!important;
}
[data-theme="dark"] select.fc-field {
  background:
    var(--bg-secondary)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 12px center / 14px 14px!important;
  padding-right:40px!important;
}
select.fc-field::-ms-expand { display:none; }

.fc-field:focus,
.fc-select:focus,
.fc-btn:focus {
  outline:none;
  border-color:var(--fc-color-primary);
  box-shadow:0 0 0 2px rgba(59,130,246,.35);
}

input.fc-field, select.fc-field { appearance:none; }
input.fc-field::-webkit-inner-spin-button,
input.fc-field::-webkit-outer-spin-button { appearance:none; margin:0; }
input.fc-field[type=number] { -moz-appearance:textfield; }

[data-theme="dark"] .fc-field,
[data-theme="dark"] .fc-select {
  background:var(--bg-secondary)!important;
  border-color:var(--border-color)!important;
  color:var(--text-primary)!important;
}

/* 3. 按钮 */
.fc-btn {
  cursor:pointer;
  padding:0 var(--control-btn-h-padding)!important;
  justify-content:center;
  font-weight:600;
  letter-spacing:.5px;
  font-size:14px;
  background:var(--fc-color-primary);
  color:#fff;
  border-color:var(--fc-color-primary);
  transition:background .2s;
}
.fc-btn:hover { background:var(--fc-color-primary-hover); }
.fc-btn:active { background:var(--fc-color-primary-active); }

.fc-btn--primary { background:var(--fc-color-primary)!important; border-color:var(--fc-color-primary)!important; color:#fff!important; }
.fc-btn--primary:hover { background:var(--fc-color-primary-hover)!important; }
.fc-btn--primary:active { background:var(--fc-color-primary-active)!important; }

.fc-btn--success { background:var(--fc-color-success)!important; border-color:var(--fc-color-success)!important; color:#fff!important; }
.fc-btn--success:hover { background:var(--fc-color-success-hover)!important; }
.fc-btn--success:active { background:var(--fc-color-success-active)!important; }

.fc-btn--danger { background:var(--fc-color-danger)!important; border-color:var(--fc-color-danger)!important; color:#fff!important; }
.fc-btn--danger:hover { background:var(--fc-color-danger-hover)!important; }
.fc-btn--danger:active { background:var(--fc-color-danger-active)!important; }

[data-theme="dark"] .fc-btn,
[data-theme="dark"] .fc-btn--primary { background:var(--fc-color-primary)!important; }
[data-theme="dark"] .fc-btn:hover,
[data-theme="dark"] .fc-btn--primary:hover { background:var(--fc-color-primary-hover)!important; }
[data-theme="dark"] .fc-btn--success { background:var(--brand-green-dark)!important; }
[data-theme="dark"] .fc-btn--success:hover { background:var(--brand-green-dark-hover)!important; }
[data-theme="dark"] .fc-btn--danger { background:var(--fc-color-danger)!important; }
[data-theme="dark"] .fc-btn--danger:hover { background:var(--fc-color-danger-hover)!important; }

/* 4. 小型添加按钮 / 图标按钮 */
.fc-btn-icon-add {
  background:transparent!important;
  color:var(--fc-color-success)!important;
  border:none;
  border-radius:6px;
  padding:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:color .2s, transform .2s;
  font-size:14px;
}
.fc-btn-icon-add i { font-size:18px; line-height:1; }
.fc-btn-icon-add:hover { transform:translateY(-1px); color:var(--fc-color-success-hover)!important; }
.fc-btn-icon-add[data-mode="remove"] { color:var(--fc-color-danger)!important; }
.fc-btn-icon-add[data-mode="remove"]:hover { color:var(--fc-color-danger-hover)!important; }

[data-theme="dark"] .fc-btn-icon-add { color:var(--brand-green-dark)!important; }
[data-theme="dark"] .fc-btn-icon-add:hover { color:var(--brand-green-dark-hover)!important; }
[data-theme="dark"] .fc-btn-icon-add[data-mode="remove"] { color:var(--fc-color-danger)!important; }
[data-theme="dark"] .fc-btn-icon-add[data-mode="remove"]:hover { color:#ef4444!important; }

.fc-icon-restore { color:var(--fc-color-success)!important; }
.fc-icon-restore:hover { color:var(--fc-color-success-hover)!important; }
[data-theme="dark"] .fc-icon-restore { color:var(--brand-green-dark)!important; }
[data-theme="dark"] .fc-icon-restore:hover { color:var(--brand-green-dark-hover)!important; }

.fc-icon-remove { color:var(--fc-color-danger)!important; }
.fc-icon-remove:hover { color:var(--fc-color-danger-hover)!important; }

/* 5. Tabs / Segmented */
.fc-tabs {
  display:flex;
  gap:.5rem;
  border-bottom:2px solid var(--border-color);
  margin-bottom:1rem;
}
.fc-tabs__item {
  padding:.7rem 1.2rem;
  cursor:pointer;
  font-weight:700;
  color:var(--text-secondary);
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:.25s;
  user-select:none;
  font-size:16px;
  letter-spacing:.5px;
}
.fc-tabs__item:hover { color:var(--text-primary); }
.fc-tabs__item.active {
  color:#3B82F6;
  border-bottom-color:#3B82F6;
}
.fc-tabs[data-tab-group="sidebar-top"],
.fc-tabs[data-tab-group="left-panel"] { gap:0!important; }
.fc-tabs[data-tab-group="sidebar-top"] .fc-tabs__item,
.fc-tabs[data-tab-group="left-panel"] .fc-tabs__item {
  flex:1 1 0; text-align:center;
}

.fc-seg {
  position:relative;
  display:inline-flex;
  gap:0;
  padding:3px;
  border:1px solid var(--border-color);
  border-radius:9999px;
  background:var(--bg-secondary);
}
.fc-seg__btn {
  position:relative;
  z-index:1;
  padding:6px 12px;
  border-radius:9999px;
  font-weight:600;
  color:var(--text-secondary);
  background:none;
  border:none;
  cursor:pointer;
  transition:.2s;
  font-size:13px;
}
.fc-seg__btn.is-active { color:var(--text-primary); }
.fc-seg__thumb {
  position:absolute;
  inset:3px auto 3px 3px;
  width:calc(50% - 3px);
  border-radius:9999px;
  background:rgba(59,130,246,.12);
  transition:transform .25s ease;
}
.fc-seg[data-active$="likes-panel"] .fc-seg__thumb { transform:translateX(100%); }
[data-theme="dark"] .fc-seg__thumb { background:rgba(95,163,255,.14); }

.fc-tabs__subseg {
  display:flex;
  align-items:center;
  gap:.5rem;
  min-height:42px;
  flex:0 0 auto;
}
.fc-tabs__subseg .fc-seg { flex:0 0 auto; white-space:nowrap; touch-action:pan-x pan-y; }
.fc-tabs__subseg .fc-seg .fc-seg__btn {
  flex:0 0 var(--seg-btn-w);
  min-width:var(--seg-btn-w);
  text-align:center;
}

/* 6. 排行 / 表格 */
.fc-rank-panel { display:none; animation:fadePanel .25s ease; }
.fc-rank-panel.active { display:block; }
@keyframes fadePanel { from { opacity:0; transform:translateY(8px);} to {opacity:1; transform:translateY(0);} }

.fc-rank-scroll {
  max-height:360px;
  overflow:auto;
  padding-top:0;
  background:transparent;
  scrollbar-gutter:stable both-edges;
}
.fc-rank-scroll::-webkit-scrollbar { width:8px; }
.fc-rank-scroll::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:4px; }
.fc-rank-scroll::-webkit-scrollbar-thumb:hover { background:var(--text-secondary); }

.fc-rank-table { width:100%; border-collapse:separate; border-spacing:0; }
.fc-rank-table th,
.fc-rank-table td {
  padding:.6rem;
  vertical-align:middle;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fc-rank-table th {
  text-align:left;
  font-weight:600;
  letter-spacing:.5px;
}
.fc-rank-table th:last-child,
.fc-rank-table td:last-child {
  text-align:center;
  width:60px;
  position:sticky;
  right:0;
  background:var(--bg-secondary);
}
.fc-rank-table td:last-child { padding:8px; }
.fc-rank-cell, .fc-rank-table th.fc-rank-header { width:56px; text-align:center; }

.fc-rank-table thead th {
  position:sticky;
  top:0;
  z-index:8;
  background:var(--bg-secondary);
  box-shadow:0 2px 3px -1px rgba(0,0,0,.08);
}
[data-theme="dark"] .fc-rank-table thead th {
  box-shadow:0 2px 3px -1px rgba(0,0,0,.45);
}
.fc-rank-table tr:hover { background:rgba(60,120,255,.05); }
[data-theme="dark"] .fc-rank-table tr:hover { background:#2a3545!important; }

.fc-rank-table .fa-medal.gold { color:#FFD700!important; }
.fc-rank-table .fa-medal.silver { color:#C0C0C0!important; }
.fc-rank-table .fa-medal.bronze { color:#CD7F32!important; }

.fc-marquee-cell { overflow:hidden; }
.fc-marquee-inner,
#sidebar .fan-item .fc-sidebar-marquee-inner,
#recentLikesList .fc-recent-marquee-inner {
  display:inline-block;
  will-change:transform;
  transition:transform .35s ease;
}

/* 右侧卡片遮罩 */

.fc-right-card .fc-rank-table thead th:last-child {
  top:0;
  z-index:11;
  box-shadow:0 2px 3px -1px rgba(0,0,0,.45);
}

.fc-right-card .fc-rank-table td:last-child {
  background:linear-gradient(to left,
    transparent 30px,
    rgba(0,0,0,0) 50px);
}
.fc-right-card .fc-rank-box { position:relative; }
.fc-right-card .fc-rank-box::after {
  content:"";
  position:absolute;
  top:0; right:-2px; bottom:0;
  width:calc(var(--sbw) + 3px);
  background:transparent;
  pointer-events:none;
  z-index:20;
}

/* 7. 主题切换按钮 */
.fc-theme-toggle {
  position:fixed;
  top:10px; right:25px;
  z-index:1000;
  background:var(--bg-secondary);
  border:1px solid var(--border-color);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 6px var(--shadow-color);
  width:44px;
  height:44px;
  border-radius:50%;
  transition:background .25s, transform .25s;
}
.fc-theme-toggle:active { transform:scale(.95); }

/* 8. Toast */
#toastContainer {
  position:fixed;
  top:12px; left:50%;
  transform:translateX(-50%);
  z-index:2000;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:clamp(260px,60vw,520px);
  pointer-events:none;
}
.fc-toast {
  background:var(--toast-bg);
  color:var(--toast-text);
  border:1px solid var(--toast-border);
  box-shadow:0 4px 12px rgba(0,0,0,0.18);
  padding:.75rem 1rem;
  border-radius:10px;
  font-size:14px;
  line-height:1.3;
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  opacity:0;
  transform:translateY(-8px);
  animation:toast-in .35s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events:auto;
  position:relative;
}
.fc-toast--success { border-color:var(--toast-success)!important; }
.fc-toast--error   { border-color:var(--toast-error)!important; }
.fc-toast--loading { border-color:var(--toast-loading)!important; }
.fc-toast__close { position:absolute; top:4px; right:8px; cursor:pointer; font-weight:600; }
@keyframes toast-in { to { opacity:1; transform:translateY(0); } }
@keyframes toast-out { to { opacity:0; transform:translateY(-6px); } }

/* 9. Tooltip */
#appTooltip {
  position:fixed;
  z-index:3000;
  max-width:min(70vw,320px);
  padding:8px 10px;
  font-size:12px;
  line-height:1.35;
  color:var(--tooltip-text);
  background:var(--tooltip-bg);
  border:1px solid var(--tooltip-border);
  border-radius:8px;
  box-shadow:var(--tooltip-shadow);
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-6px);
  transition:opacity .15s ease, transform .15s ease;
  white-space:normal;
}
#appTooltip[data-show="1"] { opacity:1; transform:translate(-50%,0); }
#appTooltip::after {
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:-6px;
  border-width:6px 6px 0 6px;
  border-style:solid;
  border-color:var(--tooltip-bg) transparent transparent transparent;
}
#appTooltip[data-placement="bottom"]::after {
  top:-6px; bottom:auto;
  border-width:0 6px 6px 6px;
  border-color:transparent transparent var(--tooltip-bg) transparent;
}

/* 10. 文本/辅助标签 */
.fc-condition-label {
  font-size:14px;
  color:#555;
  margin:4px 0 8px 2px;
  line-height:1.3;
  opacity:.9;
  letter-spacing:.5px;
  font-weight:500;
}
[data-theme="dark"] .fc-condition-label { color:var(--text-secondary); }

.fc-clear-confirm { display:flex; gap:.5rem; }
.fc-clear-confirm button {
  flex:1;
  font-size:14px;
  padding:.55rem .75rem;
  border-radius:8px;
  font-weight:500;
}

.share-fail-url { word-break:break-all; white-space:normal; font-family:monospace; }

/* 11. 侧栏结构 */
#sidebar {
  position:fixed;
  top:0; left:0;
  height:100vh;
  width:450px;
  background:var(--bg-secondary);
  border-right:1px solid var(--border-color);
  box-shadow:2px 0 10px var(--shadow-color);
  z-index:50;
  display:flex;
  flex-direction:column;
  transform:translateX(0);
  transition:transform var(--transition-speed) ease, width .12s ease;
  overflow:hidden;
}
#sidebar.collapsed { transform:translateX(-100%); }

#sidebar-resizer {
  position:absolute;
  top:0; right:0;
  width:6px;
  height:100%;
  cursor:ew-resize;
  z-index:70;
  pointer-events:auto;
  touch-action:none;
}
#sidebar-resizer:hover { background:rgba(0,0,0,.08); }

.fc-sidebar-panel { display:flex; flex-direction:column; overflow:hidden; }

.fc-sidebar-panel__content {
  --sp-pad-top:8px;
  --sp-pad-x:0;
  --sp-pad-bottom:24px;
  flex-grow:1;
  padding:var(--sp-pad-top) var(--sp-pad-x) var(--sp-pad-bottom);
  scrollbar-color:var(--border-color) var(--bg-secondary);
}
#top-panel .fc-sidebar-panel__content { overflow-y:hidden!important; overflow-x:hidden!important; }
#top-panel .fc-tab-container { min-height:0!important; }
#bottom-panel { transition:flex-basis .35s ease, height .35s ease; }

#sidebar-header {
  padding:14px 18px 10px;
  position:relative;
}
#sidebar-header::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--border-color);
  pointer-events:none;
}

/* 顶部 Tab 底线缩进 */
#top-panel .fc-sidebar-panel__content > nav.fc-tabs {
  position:relative;
  margin:0;
  padding:0 var(--content-left-gutter);
  padding-top:0;
  border-bottom:none;
}
#top-panel .fc-sidebar-panel__content > nav.fc-tabs::after {
  content:"";
  position:absolute;
  bottom:0;
  left:var(--content-left-gutter);
  right:var(--content-left-gutter);
  height:2px;
  background:var(--border-color);
}

/* 顶部水平滑动容器 */
#sidebar-top-container {
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;
  position:relative;
  width:100%;
  height:200px;
}
#sidebar-top-wrapper {
  display:flex;
  width:auto;
  min-width:100%;
  height:100%;
}
#sidebar-top-wrapper .fc-tab-pane {
  flex:0 0 100%;
  width:100%;
  height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding-left:0;
  padding-right:0;
}

/* Splitter */
#sidebar-splitter {
  position:relative;
  height:12px;
  background:var(--bg-primary);
  z-index:200;
  isolation:isolate;
}
#sidebar-splitter .fc-splitter-handle {
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:72px;
  height:24px;
  border-radius:9999px;
  background:var(--bg-secondary);
  border:1px solid var(--border-color);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  cursor:ns-resize;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  touch-action:none;
}
#sidebar-splitter .fc-splitter-handle::before {
  content:"";
  width:26px;
  height:10px;
  border-radius:9999px;
  background:repeating-linear-gradient(
    to bottom,
    var(--border-color) 0px, var(--border-color) 1px,
    transparent 1px, transparent 4px
  );
  opacity:.75;
}
#sidebar-splitter .fc-splitter-handle:hover {
  border-color:#93c5fd;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
#sidebar-splitter .fc-splitter-handle:active { transform:translate(-50%,-50%) scale(.98); }
@media (hover:none) and (pointer:coarse) {
  #sidebar-splitter .fc-splitter-handle { width:92px; height:30px; }
}

/* 下半区布局 */
#bottom-panel {
  display:grid!important;
  grid-template-rows:auto 1fr auto!important;
  min-height:0!important;
}
#bottom-panel .fc-sidebar-panel__content {
  grid-row:1 / 3!important;
  display:grid!important;
  grid-template-rows:auto 1fr!important;
  min-height:0!important;
  padding:0!important;
}
#bottom-panel .fc-sidebar-panel__content > h2 {
  position:sticky;
  padding-top:8px;
  z-index:60;
  background:var(--bg-secondary);
  margin:0 0 var(--bottom-title-gap)!important;
  padding-left:var(--content-left-gutter)!important;
  padding-right:var(--content-right-gutter)!important;
  font-weight:600;
}
#selectedFansList {
  grid-row:2!important;
  min-height:0!important;
  overflow-y:auto!important;
  padding-left:var(--content-left-gutter)!important;
  padding-right:max(0px, calc(var(--content-right-gutter) - var(--sbw)))!important;
  padding-bottom:var(--content-bottom-gap)!important;
  scrollbar-gutter:stable;
}
#clearAllContainer.fc-sticky-footer {
  position:static!important;
  grid-row:3!important;
  background:var(--bg-secondary);
  border-top:1px solid var(--border-color);
  padding:var(--footer-v-pad) var(--content-left-gutter)!important;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  z-index:10;
}
#clearAllContainer #clearAllBtn { width:100%; }

#top-panel #recentlyRemovedList,
#top-panel #recentLikesList {
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  padding-left:var(--content-left-gutter)!important;
  padding-right:max(0px, calc(var(--content-right-gutter) - var(--sbw)))!important;
  padding-top:var(--content-bottom-gap);
  scrollbar-gutter:stable;
}
#top-panel #recentlyRemovedList .fan-item {
  display:grid!important;
  grid-template-columns:1fr var(--action-restore-col-w);
  align-items:center;
  column-gap:var(--action-gap);
}
#top-panel #recentlyRemovedList .fan-item .fc-icon-restore {
  width:var(--action-restore-col-w)!important;
  display:flex; justify-content:center;
  margin:0;
}

#top-panel .recent-like-group .actions {
  display:grid!important;
  grid-template-columns:var(--action-like-col-w) var(--action-add-col-w);
  column-gap:var(--action-gap);
  justify-content:end;
  align-items:center;
  pointer-events:auto;
  position:relative;
  z-index:1;
}
#top-panel .recent-like-group .actions .like-button,
#top-panel .recent-like-group .actions .fc-btn-icon-add {
  display:flex!important;
  justify-content:center;
  margin:0!important;
}
#top-panel .recent-like-group .actions .like-button { width:var(--action-like-col-w)!important; }
#top-panel .recent-like-group .actions .fc-btn-icon-add {
  width:var(--action-add-col-w)!important;
  height:28px;
  padding:0;
}

/* Fan item icons grid */
#selectedFansList .flex.items-center.flex-shrink-0 {
  display:grid!important;
  grid-template-columns:var(--item-like-w) var(--item-remove-w);
  column-gap:var(--item-actions-gap);
  justify-content:end;
  align-items:center;
  min-width:calc(var(--item-like-w) + var(--item-remove-w) + var(--item-actions-gap));
}
#selectedFansList .like-button,
#selectedFansList .fc-icon-remove {
  display:flex;
  justify-content:center;
  align-items:center;
}
#selectedFansList .like-button { width:var(--item-like-w)!important; margin-right:0!important; }
#selectedFansList .fc-icon-remove { width:var(--item-remove-w)!important; }

#sidebar .fan-item .truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 侧栏浮动主按钮 */
#sidebar-toggle {
  all:unset;
  position:fixed;
  top:10px; left:10px;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--bg-secondary);
  border:1px solid var(--border-color);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 6px var(--shadow-color);
  z-index:1100;
  transition:background .25s, border-color .25s, box-shadow .25s, transform .2s;
}
#sidebar-toggle .icon-sidebar {
  position:relative;
  width:20px; height:20px;
  display:block;
  box-sizing:border-box;
  border:2px solid currentColor;
  border-radius:4px;
  background:linear-gradient(to right, rgba(128,128,128,0.5) 0 30%, transparent 0 100%);
}
#sidebar-toggle .icon-sidebar::before {
  content:"";
  position:absolute;
  top:0; bottom:0; left:30%;
  width:0;
  border-left:2px solid currentColor;
}
#sidebar-toggle:focus { outline:none; box-shadow:0 2px 6px var(--shadow-color); }
#sidebar-toggle:active { transform:scale(.95); }
[data-theme="dark"] #sidebar-toggle {
  background:var(--bg-secondary);
  border-color:var(--border-color);
}

/* Overlay 模式 */
.sidebar-overlay-mode #sidebar {
  width:100vw;
  max-width:100vw;
  left:0; top:0;
  height:100vh;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  z-index:300;
}
.sidebar-overlay-mode #sidebar:not(.collapsed) { transform:translateX(0); }
.sidebar-overlay-mode #main-content { margin-left:0; transform:none; }
.sidebar-overlay-backdrop {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.38);
  backdrop-filter:saturate(120%) blur(8px);
  z-index:250;
  opacity:0;
  transition:opacity .25s ease;
}
.sidebar-overlay-backdrop.is-visible { opacity:1; }

#sidebar-gesture-close-zone {
  position:absolute;
  top:0; right:0;
  width:var(--gesture-close-zone-width);
  height:100%;
  z-index:350;
  touch-action:none;
  cursor:ew-resize;
  background:linear-gradient(to left, rgba(80,80,80,0.4), rgba(80,80,80,0));
}

/* 顶部 Tab 补丁 */
#top-panel .fc-tabs .fc-tabs__item { margin-bottom:0!important; }
#top-panel .fc-tabs .fc-tabs__item.active { border-bottom-color:#3B82F6!important; z-index:60; }

/* 12. 主内容 / Tab 容器 */
#main-content { margin-left:0; transition:margin-left var(--transition-speed) ease; }

.fc-tab-container { overflow:hidden; position:relative; min-height:460px; }
.fc-tab-wrapper { display:flex; width:200%; transition:transform .45s cubic-bezier(.4,0,.2,1); }
.fc-tab-pane { width:50%; flex-shrink:0; padding:0 2px; }

/* 左侧横滑 */
#left-panel-container {
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
  scrollbar-width:none;
  touch-action:pan-x pan-y;
}
#left-panel-container::-webkit-scrollbar { display:none; }
#left-panel-wrapper {
  display:flex;
  width:auto;
  min-width:100%;
  height:100%;
}
#left-panel-wrapper .fc-tab-pane {
  flex:0 0 100%;
  width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

/* 右侧卡片增强 */
.fc-right-card { display:flex; flex-direction:column; }
.fc-right-card .fc-tab-container { flex:1; min-height:0; }
.fc-right-card .fc-tab-pane { height:100%; display:flex; flex-direction:column; }
.fc-right-card .fc-rank-box { flex:1; min-height:0; padding-top:0; }
.fc-right-card .fc-rank-panel.active { display:flex; flex-direction:column; flex:1; min-height:0; }
.fc-right-card .fc-rank-scroll { flex:1; max-height:none; overflow:auto; }
.fc-right-card > nav.fc-tabs { margin-bottom:6px; }

#query-count-display {
  position:absolute;
  top:0; right:0;
  z-index:10;
  font-size:12px;
  color:#666;
  background:rgba(255,255,255,0);
  padding:2px 8px;
}

/* 搜索建议 */
#searchSuggestions {
  font-size:14px;
  line-height:1.4;
  background:var(--bg-secondary);
  color:var(--text-primary);
  border:1px solid var(--border-color);
  border-radius:8px;
  overflow:hidden;
  z-index:100;
}
#searchSuggestions > div { padding:8px 12px; cursor:pointer; }
#searchSuggestions > div:hover { background:rgba(59,130,246,.08); }
[data-theme="dark"] #searchSuggestions > div:hover { background:#2a3545; }

/* 图表容器 */
.fc-chart-container {
  position:relative!important;
  min-height:0!important;
  height:clamp(480px,62vh,720px)!important;
  background:var(--bg-secondary)!important;
}
#chartRoot, #chartFrame { height:100%!important; }
#chartFrame { display:block; }

/* Info 按钮 */
.fc-info-btn {
  width:24px; height:24px;
  opacity:.55;
  transition:opacity .25s ease, transform .25s ease;
}
.fc-info-btn:hover,
.fc-info-btn:focus {
  opacity:1;
  transform:translateY(-2px);
}
.fc-info-btn:focus {
  outline:none;
  box-shadow:0 0 0 2px rgba(0,0,0,.12);
}

/* 强制竖排 (自适应) */
.fc-force-col { flex-direction:column!important; }
.fc-force-col > * {
  width:100%!important;
  max-width:100%!important;
  transition:width .25s, flex .25s;
}
@media (min-width:1024px){
  .fc-force-col > * { width:100%!important; }
}

/* 最近点赞标题遮罩 */
#recentLikesList .fc-group-header {
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}
#recentLikesList .fc-group-header .fc-title-wrap {
  position:relative;
  flex:1 1 auto;
  min-width:0;
}
#recentLikesList .fc-group-header .fc-title-wrap .truncate {
  position:relative;
  z-index:3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#recentLikesList .fc-group-header .fc-title-wrap::before {
  content:"";
  position:absolute;
  top:0; bottom:0; left:0;
  width:var(--title-w, 0px);
  background:var(--bg-secondary);
  z-index:1;
}
#recentLikesList .fc-group-header .fc-title-wrap::after {
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:var(--title-w, 0px);
  width:var(--fade-w, 28px);
  background:linear-gradient(to right, var(--bg-secondary) 0%, rgba(0,0,0,0) 100%);
  z-index:2;
}
#recentLikesList .fc-group-header .fc-meta-right {
  position:absolute;
  right:0; top:0; bottom:0;
  display:flex;
  align-items:center;
  white-space:nowrap;
  text-align:right;
  pointer-events:none;
  overflow:hidden;
  text-overflow:clip;
  z-index:0;
}
#recentLikesList .scenario-row .scenario-text {
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 响应式 ≤600px */
@media (max-width:600px) {
  .fc-tabs {
    flex-wrap:wrap;
    row-gap:8px;
    column-gap:10px;
    align-items:flex-start;
  }
  .fc-tabs .flex-1 { display:none; }
  .fc-tabs .fc-tabs__item {
    flex:1 1 calc(50% - 10px);
    text-align:center;
    padding:.55rem .8rem;
    font-size:15px;
  }
  .fc-tabs__subseg {
    order:3;
    flex:1 1 100%;
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:2px;
  }
  .fc-right-card > nav.fc-tabs { margin-bottom:4px; }
  .fc-right-card .fc-rank-box { padding-top:0; }
}

.fc-right-card.rp-narrow > nav.fc-tabs {
  flex-wrap:wrap;
  row-gap:8px;
  column-gap:10px;
  align-items:flex-start;
}
.fc-right-card.rp-narrow > nav.fc-tabs .flex-1 { display:none; }
.fc-right-card.rp-narrow > nav.fc-tabs .fc-tabs__item {
  flex:1 1 calc(50% - 10px);
  text-align:center;
  padding:.55rem .8rem;
  font-size:15px;
}
.fc-right-card.rp-narrow .fc-tabs__subseg {
  order:3;
  flex:1 1 100%;
  width:100%;
  display:flex;
  justify-content:center;
  margin-top:2px;
}
.fc-right-card.rp-narrow .fc-rank-box { padding-top:0; }

/* 拖拽垂直分隔时关闭动画 */
body.is-vert-dragging #bottom-panel { transition:none!important; }

/* 13. 工具色类 */
.fc-bg-primary { background:var(--fc-color-primary)!important; color:#fff!important; }
.fc-bg-success { background:var(--fc-color-success)!important; color:#fff!important; }
.fc-bg-danger  { background:var(--fc-color-danger)!important; color:#fff!important; }

.fc-text-primary { color:var(--fc-color-primary)!important; }
.fc-text-success { color:var(--fc-color-success)!important; }
.fc-text-danger  { color:var(--fc-color-danger)!important; }

/* 徽章 */
.fc-badge {
  display:inline-flex;
  align-items:center;
  font-size:12px;
  line-height:1;
  padding:4px 8px;
  border-radius:9999px;
  font-weight:500;
  background:var(--bg-secondary);
  border:1px solid var(--border-color);
  color:var(--text-secondary);
}
.fc-badge--primary { background:rgba(37,99,235,.1); color:var(--fc-color-primary); }
.fc-badge--success { background:rgba(16,185,129,.12); color:var(--fc-color-success); }
.fc-badge--danger  { background:rgba(220,38,38,.12); color:var(--fc-color-danger); }

/* 窄屏按钮 */
@media (max-width:1366px) {
  :root {
    --quick-add-size-narrow: 26px;
    --quick-add-bg-narrow: var(--bg-secondary);
    --quick-add-shadow-narrow: 0 3px 8px rgba(0, 0, 0, 0.388), 0 0 0 0 rgba(0, 0, 0, 0);
    --quick-add-shadow-narrow-hover: 0 5px 14px rgba(0, 0, 0, 0.34), 0 0 0 0 rgba(0, 0, 0, 0);
  }

  .fc-btn-icon-add {
    width: var(--quick-add-size-narrow) !important;
    height: var(--quick-add-size-narrow) !important;
    padding: 0 !important;
    background: var(--quick-add-bg-narrow) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 50% !important;
    box-shadow: var(--quick-add-shadow-narrow) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    position: relative;
    transition: background .25s, box-shadow .25s, transform .2s;
  }

    #recentLikesList .recent-like-group .actions .fc-btn-icon-add {
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;

  }
}

:root {
  --toast-glass-bg: rgba(255,255,255,0.70);
  --toast-glass-border: rgba(255,255,255,0.55);
  --toast-glass-shadow: 0 4px 18px -2px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
}
[data-theme="dark"] {
  --toast-glass-bg: rgba(31,41,55,0.58);
  --toast-glass-border: rgba(255,255,255,0.10);
  --toast-glass-shadow: 0 4px 22px -4px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.06);
}


/*Toast 毛玻璃效果*/
.fc-toast {
  background: var(--toast-glass-bg) !important;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid var(--toast-glass-border) !important;
  box-shadow: var(--toast-glass-shadow) !important;

  display: flex;
  align-items: center;            
  gap: .65rem;
  padding: .85rem 1.05rem;
  line-height: 1.35;
  border-radius: 14px;            
  position: relative;
  transition: background .25s ease, box-shadow .25s ease;
}

.fc-toast .icon,
.fc-toast i.icon,
.fc-toast > i.fa-solid,
.fc-toast > i.fa-regular {
  line-height: 1;                 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-size: 20px;                
  min-width: 20px;
  margin-top: 2px;
  transform: translateY(-1px);    
}

.fc-toast .msg {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  white-space: normal;
  font-size: 14px;
  font-weight: 500;
}

.fc-toast__close {
  top: 6px;
  right: 8px;
  font-size: 16px;
  line-height: 1;
  opacity: .55;
  transition: opacity .2s;
}
.fc-toast__close:hover { opacity: .95; }

.fc-toast--success { border-color: rgba(16,185,129,0.6) !important; }
.fc-toast--error   { border-color: rgba(220,38,38,0.6) !important; }
.fc-toast--loading { border-color: rgba(37,99,235,0.60) !important; }

@keyframes toast-in {
  from { opacity:0; transform:translateY(-8px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes toast-out {
  to { opacity:0; transform:translateY(-6px) scale(.96); }
}