/* ═══ 主题配色变量（默认：蓝紫 / 悦彩：绿蓝） ═══ */
:root {
    --tc-primary: #6366f1;
    --tc-secondary: #a855f7;
    --tc-accent: #ec4899;
    --tc-ring: #d946ef;
    --tc-dark: #1e1b4b;
    --tc-light: #f8fafc;
    --tc-bg1: #312e81;
    --tc-bg2: #581c87;
    --tc-bg3: #831843;
    --tc-pink: #f472b6;
    --tc-pink-light: #f9a8d4;
    --tc-glow-soft: rgba(168, 85, 247, 0.5);
    --tc-glow-soft-2: rgba(168, 85, 247, 0.35);
    --tc-glass-dark: rgba(30, 27, 75, 0.6);
    --tc-border-soft: rgba(168, 85, 247, 0.4);
    --tc-border-soft-2: rgba(168, 85, 247, 0.45);
    --tc-border-focus: rgba(168, 85, 247, 0.6);
    --tc-scroll: rgba(168, 85, 247, 0.4);
    --tc-scroll-h: rgba(168, 85, 247, 0.7);
    --tc-hit: rgba(236, 72, 153, 0.4);
    --tc-drop: rgba(168, 85, 247, 0.1);
    --tc-quote-bg: rgba(168, 85, 247, 0.08);
    --tc-bell: rgba(236, 72, 153, 0.9);
    --tc-bell-2: rgba(236, 72, 153, 0.75);
    --tc-bell-ring: rgba(236, 72, 153, 1);
    --tc-btn-glow: rgba(168, 85, 247, 0.4);
}
html[data-theme="vivid"] {
    --tc-primary: #C8EF50;
    --tc-secondary: #64C4DB;
    --tc-accent: #4FB5D4;
    --tc-ring: #BAE4EF;
    --tc-dark: #083344;
    --tc-light: #ECFEFF;
    --tc-bg1: #022C22;
    --tc-bg2: #083344;
    --tc-bg3: #082F49;
    --tc-pink: #64C4DB;
    --tc-pink-light: #BAE4EF;
    --tc-glow-soft: rgba(100, 196, 219, 0.5);
    --tc-glow-soft-2: rgba(100, 196, 219, 0.35);
    --tc-glass-dark: rgba(8, 51, 68, 0.6);
    --tc-border-soft: rgba(100, 196, 219, 0.4);
    --tc-border-soft-2: rgba(100, 196, 219, 0.45);
    --tc-border-focus: rgba(100, 196, 219, 0.6);
    --tc-scroll: rgba(100, 196, 219, 0.4);
    --tc-scroll-h: rgba(100, 196, 219, 0.7);
    --tc-hit: rgba(200, 239, 80, 0.4);
    --tc-drop: rgba(100, 196, 219, 0.1);
    --tc-quote-bg: rgba(100, 196, 219, 0.08);
    --tc-bell: rgba(200, 239, 80, 0.9);
    --tc-bell-2: rgba(200, 239, 80, 0.75);
    --tc-bell-ring: rgba(200, 239, 80, 1);
    --tc-btn-glow: rgba(100, 196, 219, 0.4);
}

html { scrollbar-gutter: stable; overflow-x: hidden; }
* { box-sizing: border-box; }

.glass { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2); }
.glass-dark { background: var(--tc-glass-dark); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }

.text-gradient { background: linear-gradient(135deg, var(--tc-primary) 0%, var(--tc-secondary) 50%, var(--tc-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.bg-gradient { background: linear-gradient(135deg, var(--tc-secondary) 0%, var(--tc-ring) 50%, var(--tc-accent) 100%); }

@keyframes page-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
.page-animate { animation: page-in var(--anim-page, 0.65s) cubic-bezier(0.34, 1.56, 0.64, 1) both; }

nav { position: fixed; overflow: hidden; }
nav::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle 200px at var(--global-mx, 50%) var(--global-my, 50%), rgba(255, 255, 255, 0.3) 0%, transparent 70%); pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.3s ease; mix-blend-mode: screen; }
nav.near::before { opacity: 1; }

.card { position: relative; border-radius: 0.75rem; transition: transform var(--anim-card, 0.45s) cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow var(--anim-card, 0.45s) ease; overflow: hidden; }
.card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -14px rgba(0, 0, 0, 0.5), 0 0 34px -8px var(--tc-glow-soft); }
.card-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; overflow: visible; filter: drop-shadow(0 0 6px var(--tc-ring)); }
.card-ring path { stroke: var(--tc-ring); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.8s cubic-bezier(0.34, 1.15, 0.64, 1); }
.card:hover .card-ring path { stroke-dashoffset: 0; }

.card .cursor-glow { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(circle 220px at var(--global-mx, 50%) var(--global-my, 50%), rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.12) 38%, transparent 72%); mix-blend-mode: screen; }
.card.near .cursor-glow { opacity: 1; }
body.modal-open .card .cursor-glow { opacity: 0 !important; }

.glow-border { position: relative; }
.glow-border::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: radial-gradient(circle 100px at var(--global-mx, 50%) var(--global-my, 50%), var(--tc-accent) 0%, var(--tc-ring) 22%, var(--tc-secondary) 42%, transparent 70%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 8; }
.glow-border:hover::before, .glow-border.near::before { opacity: 1; }

.hover-text-glow { transition: all 0.3s ease; }
.hover-text-glow:hover { background: linear-gradient(135deg, var(--tc-primary) 0%, var(--tc-secondary) 50%, var(--tc-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transform: translateX(3px); }

.modal-overlay { background: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); transition: backdrop-filter 0.7s ease, background-color 0.7s ease; }
.modal-overlay.active { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); }
.modal-panel { position: relative; transform-origin: 50% 100%; opacity: 0; transform: translateY(150px) scale(0.06); filter: blur(28px); clip-path: circle(8px at 50% 100%); transition: all 0.72s cubic-bezier(0.34, 1.56, 0.64, 1); }
.modal-panel.open { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); clip-path: circle(140% at 50% 100%); }
.modal-panel.closing { opacity: 0; transform: scale(1.4); filter: blur(18px); clip-path: circle(190% at 50% 50%); transition: all 0.55s ease; }
.modal-inner-glow { position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(circle 260px at var(--global-mx, 50%) var(--global-my, 50%), rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 42%, transparent 74%); mix-blend-mode: screen; }
.modal-panel:hover .modal-inner-glow { opacity: 1; }
.modal-edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 9; opacity: 0; transition: opacity 0.3s ease; padding: 2px; background: radial-gradient(circle 160px at var(--global-mx, 50%) var(--global-my, 50%), var(--tc-accent) 0%, var(--tc-ring) 22%, var(--tc-secondary) 45%, transparent 72%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.modal-panel:hover .modal-edge { opacity: 1; }
/* 弹窗打开时：高光始终渲染（跟随鼠标），不依赖 hover */
body.modal-open .modal-panel.open .modal-inner-glow,
body.modal-open .modal-panel.open .modal-edge { opacity: 1; }
.modal-content { position: relative; z-index: 2; }

#user-menu { position: fixed; width: 13.5rem; background: rgba(30, 27, 75, 0.72); backdrop-filter: blur(24px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 20px 60px -12px rgba(0, 0, 0, 0.6), 0 0 40px -8px var(--tc-glow-soft-2); opacity: 0; transform: scale(0.9) translateY(-10px); transform-origin: top right; transition: opacity 0.32s ease, transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; z-index: 80; padding: 0.75rem; border-radius: 0.75rem; }
#user-menu.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
#user-menu .menu-edge-glow { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 5; opacity: 0; transition: opacity 0.3s ease; padding: 2px; background: radial-gradient(circle 130px at var(--global-mx, 50%) var(--global-my, 50%), var(--tc-accent) 0%, var(--tc-ring) 20%, var(--tc-secondary) 42%, transparent 74%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
#user-menu:hover .menu-edge-glow { opacity: 1; }
#user-menu.open .menu-edge-glow { opacity: 1; }
.menu-item { position: relative; border-radius: 0.5rem; transition: background 0.25s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
.menu-item:hover { transform: translateX(2px); }
.menu-item::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; background: radial-gradient(circle 80px at var(--global-mx, 50%) var(--global-my, 50%), var(--tc-accent) 0%, var(--tc-ring) 25%, var(--tc-secondary) 50%, transparent 80%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 3; }
.menu-item:hover, .menu-item.near { background: rgba(255, 255, 255, 0.05); }
.menu-item:hover::before, .menu-item.near::before { opacity: 1; }

.card.disabled { filter: grayscale(1); opacity: 0.4; cursor: not-allowed; }
.card.disabled:hover { transform: none; box-shadow: none; }
.card.disabled .card-ring { display: none !important; }
.card.disabled .cursor-glow { display: none !important; }

.search-input { transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.search-input:focus { width: 15rem; box-shadow: 0 0 0 3px var(--tc-drop); }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(8deg); } }
.bell-ringing { animation: bell-ring 0.8s ease; }
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 8px var(--tc-bell), 0 0 0 0 var(--tc-bell-2); } 50% { box-shadow: 0 0 14px var(--tc-bell-ring), 0 0 0 7px var(--tc-bell-2); } }
#bell-dot { animation: dot-pulse 1.6s ease-in-out infinite; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
#toast-container { position: fixed; top: 5rem; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none; }
.toast { background: rgba(30, 27, 75, 0.9); backdrop-filter: blur(14px); border: 1px solid var(--tc-border-soft); border-radius: 0.75rem; padding: 0.7rem 1.2rem; color: #fff; font-size: 0.875rem; box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.6), 0 0 30px -6px var(--tc-border-soft-2); opacity: 0; transform: translateY(-16px) scale(0.94); transition: opacity 0.4s ease, transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: auto; max-width: 22rem; text-align: center; }
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast .toast-icon { margin-right: 0.5rem; color: var(--tc-ring); }
@keyframes card-in { from { opacity: 0; transform: translateY(34px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
#card-grid .card { animation: card-in 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }

.nav-logo { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease; cursor: pointer; }
.nav-logo:hover { transform: scale(1.08) translateY(-2px); filter: drop-shadow(0 6px 8px rgba(0,0,0,0.4)); }
.nav-logo:active { transform: scale(0.95) translateY(1px); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }

nav a.glow-border, #settings-nav-btn { transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease; }
nav a.glow-border:hover, #settings-nav-btn:hover { transform: translateY(-2px); }
nav a.glow-border:active, #settings-nav-btn:active { transform: translateY(0) scale(0.96); }
.glow-border:active { transform: scale(0.97); }
.nice-scroll::-webkit-scrollbar { width: 6px; }
.nice-scroll::-webkit-scrollbar-track { background: transparent; }
.nice-scroll::-webkit-scrollbar-thumb { background: var(--tc-scroll); border-radius: 3px; }
.nice-scroll::-webkit-scrollbar-thumb:hover { background: var(--tc-scroll-h); }

/* Avatar crop (canvas-based) */
.crop-canvas-wrap { position: relative; width: 100%; aspect-ratio: 1; background: rgba(0,0,0,0.35); border-radius: 0.75rem; overflow: hidden; cursor: move; touch-action: none; }
.crop-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.crop-drop-zone { border: 2px dashed rgba(255,255,255,0.3); border-radius: 0.75rem; transition: border-color 0.3s ease, background 0.3s ease; }
.crop-drop-zone.dragover { border-color: var(--tc-secondary); background: var(--tc-drop); }
.crop-preview-circle { border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.3); }
.input-glow { width: 100%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: white; padding: 0.55rem 0.85rem; border-radius: 0.5rem; font-size: 0.875rem; outline: none; transition: background 0.3s ease, border-color 0.3s ease; }
.input-glow:focus { background: rgba(255,255,255,0.15); border-color: var(--tc-border-focus); }
.input-glow::placeholder { color: rgba(255,255,255,0.4); }
mark.search-hit { background: var(--tc-hit); color: #fff; padding: 0 3px; border-radius: 3px; }
.search-chip { background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.search-chip:hover { background: rgba(255,255,255,0.18); border-color: var(--tc-border-focus); }

/* Markdown (blog) — 与 about 页一致的视觉风格 */
.md-body { font-size: 0.925rem; line-height: 1.85; color: #d1d5db; }
.md-body strong { color: #fff; font-weight: 700; }
.md-h { font-weight: 700; color: #fff; margin: 1.5em 0 0.65em; line-height: 1.35; }
.md-h1 { font-size: 1.65rem; }
.md-h2 { font-size: 1.5rem; margin-top: 2em; background: linear-gradient(135deg, var(--tc-primary) 0%, var(--tc-secondary) 50%, var(--tc-accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.md-h3 { font-size: 1.15rem; color: var(--tc-secondary); }
.md-h4, .md-h5, .md-h6 { font-size: 1.02rem; }
.md-p { margin: 0.85em 0; color: #d1d5db; }
.md-list { margin: 0.85em 0; padding-left: 1.6em; color: #d1d5db; }
.md-list li { margin: 0.35em 0; list-style: disc; }
ol.md-list li { list-style: decimal; }
.md-quote { border-left: 3px solid var(--tc-secondary); background: var(--tc-quote-bg); padding: 0.7em 1.1em; border-radius: 0 0.5rem 0.5rem 0; margin: 1.1em 0; color: var(--tc-pink-light); }
.md-pre-wrap { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.6rem; overflow: hidden; margin: 1.1em 0; background: rgba(0, 0, 0, 0.35); }
.md-pre-head { padding: 0.4rem 0.9rem; font-size: 0.72rem; color: var(--tc-pink-light); font-family: ui-monospace, Consolas, monospace; background: rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-transform: lowercase; letter-spacing: 0.5px; }
.md-pre { background: transparent; border: none; border-radius: 0; padding: 0.9em 1.1em; overflow-x: auto; margin: 0; }
.md-pre code { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; color: var(--tc-pink-light); white-space: pre; }
.md-code { background: rgba(255, 255, 255, 0.1); padding: 0.125rem 0.5rem; border-radius: 0.35rem; font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; color: var(--tc-pink-light); }
.md-img { max-width: 100%; border-radius: 0.6rem; margin: 0.9em 0; }
.md-link { color: var(--tc-pink); text-decoration: underline; text-underline-offset: 2px; }
.md-link:hover { color: var(--tc-pink-light); }
.md-hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.15); margin: 1.8em 0; }
.md-del { text-decoration: line-through; opacity: 0.7; }

/* ═══ 悦彩主题：覆盖 Tailwind 生成的固定色类 ═══ */
html[data-theme="vivid"] .text-primary { color: var(--tc-primary); }
html[data-theme="vivid"] .text-secondary { color: var(--tc-secondary); }
html[data-theme="vivid"] .text-accent { color: var(--tc-accent); }
html[data-theme="vivid"] .bg-primary { background-color: var(--tc-primary); }
html[data-theme="vivid"] .bg-secondary { background-color: var(--tc-secondary); }
html[data-theme="vivid"] .bg-accent { background-color: var(--tc-accent); }
html[data-theme="vivid"] .bg-primary\/20 { background-color: rgb(200 239 80 / 0.2); }
html[data-theme="vivid"] .bg-secondary\/20 { background-color: rgb(100 196 219 / 0.2); }
html[data-theme="vivid"] .bg-accent\/20 { background-color: rgb(79 181 212 / 0.2); }
html[data-theme="vivid"] .hover\:text-primary:hover { color: var(--tc-primary); }
/* 输入框内图标的 focus 变色（导航搜索框、昵称输入框、博客密码框） */
html[data-theme="vivid"] .group:focus-within .group-focus-within\:text-primary { color: var(--tc-primary); }
/* 头像边框 hover */
html[data-theme="vivid"] .hover\:border-primary:hover { border-color: var(--tc-primary); }
html[data-theme="vivid"] .text-pink-400 { color: var(--tc-pink); }
html[data-theme="vivid"] .text-pink-300 { color: var(--tc-pink-light); }
html[data-theme="vivid"] .hover\:text-pink-300:hover { color: var(--tc-pink-light); }

/* ═══ 设置页刷新后跳过渐入动画（main.js 消费 sessionStorage 标记后添加） ═══ */
html.no-page-anim .page-animate,
html.no-page-anim #card-grid .card { animation: none; opacity: 1; }

/* ═══ 分段选择滑块动画（设置页 seg-group） ═══ */
html .seg-group { position: relative; overflow: hidden; }
html .seg-group:active, html .seg-group.glow-border:active { transform: none !important; }
.seg-slider { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 0.45rem; background: linear-gradient(135deg, var(--tc-primary), var(--tc-accent)); box-shadow: 0 2px 10px var(--tc-btn-glow); transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.5s ease; transform-origin: center; z-index: 0; pointer-events: none; }
html .seg-btn { position: relative; z-index: 1; }

/* ═══ 设置开关全局应用（html 类由 main.js 按设置切换，所有页面生效） ═══ */
html.no-card-glow .cursor-glow { display: none !important; }
html.no-card-ring .card-ring { display: none !important; }
html.no-nav-glow nav.near::before { opacity: 0 !important; }
html.no-bg-anim [class*="animate-pulse-slow"] { display: none !important; }
html.no-notif-dot #bell-dot { display: none !important; }

/* ═══ 触屏模式高光修复（html.touch-device 由 main.js 在触屏设备上添加） ═══ */

/* 1) 泛白高光：部分移动浏览器会把 mix-blend-mode:screen 渲染成黑色，触屏下改用普通叠加 */
html.touch-device nav::before,
html.touch-device .card .cursor-glow,
html.touch-device .modal-inner-glow { mix-blend-mode: normal; }

/* 2) 触屏点击后浏览器会保持 :hover 粘滞，导致松手后描边/光环/位移残留，全部禁用 */
html.touch-device .glow-border:hover::before { opacity: 0; }
html.touch-device .card:hover { transform: none; box-shadow: none; }
html.touch-device .card:hover .card-ring path { stroke-dashoffset: 100; }
html.touch-device .menu-item:hover { background: transparent; transform: none; }
html.touch-device .menu-item:hover::before { opacity: 0; }
html.touch-device nav a.glow-border:hover,
html.touch-device #settings-nav-btn:hover { transform: none; }
html.touch-device .modal-panel:hover .modal-inner-glow,
html.touch-device .modal-panel:hover .modal-edge { opacity: 0; }
html.touch-device #user-menu:hover .menu-edge-glow { opacity: 0; }
html.touch-device .nav-logo:hover { transform: none; filter: none; }

/* 3) 弹窗/用户菜单描边：触屏下不再无条件常显，改为跟随手指（near），松手即消失 */
html.touch-device body.modal-open .modal-panel.open .modal-inner-glow,
html.touch-device body.modal-open .modal-panel.open .modal-edge { opacity: 0; }
html.touch-device body.modal-open .modal-panel.open.near .modal-inner-glow,
html.touch-device body.modal-open .modal-panel.open.near .modal-edge { opacity: 1; }
html.touch-device #user-menu.open .menu-edge-glow { opacity: 0; }
html.touch-device #user-menu.open.near .menu-edge-glow { opacity: 1; }

/* 4) 卡片光环动画：触屏下由 near（手指接触）触发，替代 :hover */
html.touch-device .card.near .card-ring path { stroke-dashoffset: 0; }


/* ═══ 主题切换渐变（设置页切配色时 html.theme-transition 临时生效） ═══ */
body { background-color: var(--tc-bg1) !important; background-image: none !important; transition: background-color 0.5s ease; }
html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, fill 0.5s ease, stroke 0.5s ease !important; }
/* 滑杆拖拽：允许页面垂直滚动，水平拖动交给 JS */
html .seg-group { touch-action: pan-y; }