/* =========================================================
   右侧居中悬浮快捷栏（积分规则 / 捐赠本站）
   全站前台页面由 fragments/site :: footer 统一输出。
   使用独立的不透明主题令牌，避免深色主题 --panel 半透明导致的文字重影。
   ========================================================= */

:root {
  --yy-dock-bg: #101827;
  --yy-dock-line: rgba(255, 255, 255, .14);
  --yy-dock-text: #e9eefb;
  --yy-dock-muted: #97a3ba;
  --yy-dock-accent: #3ddcff;
  --yy-dock-hover: rgba(61, 220, 255, .10);
  --yy-dock-warm: linear-gradient(135deg, rgba(255, 122, 160, .18), rgba(255, 186, 92, .16));
  --yy-dock-warm-line: rgba(255, 155, 120, .45);
  --yy-dock-shadow: 0 14px 36px rgba(0, 0, 0, .34);
}

html[data-theme="frost"],
html[data-theme="paper"],
html[data-theme="blush"] {
  --yy-dock-bg: #ffffff;
  --yy-dock-line: rgba(18, 30, 52, .13);
  --yy-dock-text: #1c2637;
  --yy-dock-muted: #64708a;
  --yy-dock-accent: #0e7fa8;
  --yy-dock-hover: rgba(14, 127, 168, .08);
  --yy-dock-warm: linear-gradient(135deg, rgba(255, 138, 168, .16), rgba(255, 190, 100, .18));
  --yy-dock-warm-line: rgba(214, 108, 88, .42);
  --yy-dock-shadow: 0 14px 34px rgba(28, 40, 64, .16);
}

.yy-dock {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  pointer-events: none;
  font-family: var(--font, system-ui, sans-serif);
}

.yy-dock-panel {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 13px 10px 9px;
  background: var(--yy-dock-bg);
  border: 1px solid var(--yy-dock-line);
  border-right: 0;
  border-radius: 14px 0 0 14px;
  box-shadow: var(--yy-dock-shadow);
}

/* 关闭状态由 <html data-dock="closed"> 驱动：head 中的内联脚本会在首屏渲染前设置 */
html[data-dock="closed"] .yy-dock-panel { display: none; }

.yy-dock-close {
  position: absolute;
  top: -9px;
  left: -9px;
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--yy-dock-line);
  background: var(--yy-dock-bg);
  color: var(--yy-dock-muted);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

.yy-dock-close:hover {
  color: var(--yy-dock-accent);
  border-color: var(--yy-dock-accent);
  transform: rotate(90deg);
}

.yy-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 54px;
  min-height: 62px;
  padding: 8px 4px;
  border: 1px solid var(--yy-dock-line);
  border-radius: 11px;
  color: var(--yy-dock-text);
  background: transparent;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .3px;
  text-align: center;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.yy-dock-item svg { color: var(--yy-dock-accent); flex: none; }

.yy-dock-item:hover,
.yy-dock-item:focus-visible {
  color: var(--yy-dock-accent);
  border-color: var(--yy-dock-accent);
  background: var(--yy-dock-hover);
  transform: translateX(-3px);
  outline: none;
}

.yy-dock-donate {
  background: var(--yy-dock-warm);
  border-color: var(--yy-dock-warm-line);
}

.yy-dock-donate svg { color: #ff8fa6; }

.yy-dock-donate:hover,
.yy-dock-donate:focus-visible {
  color: #ff9db1;
  border-color: #ff9db1;
  background: var(--yy-dock-warm);
}

.yy-dock-tip {
  font-size: 9.5px;
  letter-spacing: 1px;
  color: var(--yy-dock-muted);
  padding-top: 2px;
}

.yy-dock-restore {
  pointer-events: auto;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 11px 7px;
  border: 1px solid var(--yy-dock-line);
  border-right: 0;
  border-radius: 11px 0 0 11px;
  background: var(--yy-dock-bg);
  color: var(--yy-dock-text);
  box-shadow: var(--yy-dock-shadow);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 1px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}

html[data-dock="closed"] .yy-dock-restore { display: flex; }
.yy-dock-restore svg { color: var(--yy-dock-accent); }
.yy-dock-restore:hover { color: var(--yy-dock-accent); border-color: var(--yy-dock-accent); }

@media (max-width: 720px) {
  .yy-dock-item { width: 44px; min-height: 54px; font-size: 10px; padding: 7px 2px; gap: 3px; }
  .yy-dock-item svg { width: 15px; height: 15px; }
  .yy-dock-panel { padding: 11px 7px 7px; gap: 6px; }
  .yy-dock-tip { display: none; }
  .yy-dock-restore { padding: 9px 5px; font-size: 10px; }
}

@media print {
  .yy-dock { display: none !important; }
}