/* chuorui.com bundled CSS v2026072301 (style + patches + visual) */

/* ===== style.css ===== */
:root{--bg:#06060e;
--bg-deep:#03030a;
--bg-card:rgba(12,12,28,0.85);
--bg-card-hover:rgba(20,20,45,0.9);
--bg-overlay:rgba(6,6,14,0.6);
--primary:#00e5ff;
--primary-dim:rgba(0,229,255,0.15);
--secondary:#a855f7;
--secondary-dim:rgba(168,85,247,0.15);
--accent:#f0abfc;
--gold:#fbbf24;
--text:#e2e8f0;
--text-light:#7a8ba8;
--text-muted:#7b8faa;
--border:rgba(0,229,255,0.08);
--border-active:rgba(0,229,255,0.3);
--glow-cyan:0 0 20px rgba(0,229,255,0.25);
--glow-purple:0 0 20px rgba(168,85,247,0.25);
--radius:14px;
--font:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
--font-display:'Orbitron','Inter',sans-serif;
--fs-hero:2.4rem;
--fs-h2:1.5rem;
--fs-h3:1.2rem;
--fs-body:0.95rem;
--fs-small:0.8rem;
--fs-tiny:0.7rem;
--space-xs:0.4rem;
--space-sm:0.6rem;
--space-md:1.2rem;
--space-lg:2rem;
--space-xl:3rem;
--space-2xl:4.5rem;
--grid-min:280px;
--content-width:1080px}
@supports (font-size: clamp(1rem,1vw,1rem)){
:root{--fs-hero:clamp(1.8rem,5vw + 0.5rem,3.5rem);
--fs-h2:clamp(1.2rem,2.5vw + 0.3rem,1.8rem);
--fs-h3:clamp(1rem,1.5vw + 0.2rem,1.3rem);
--fs-body:clamp(0.85rem,1vw + 0.1rem,1rem);
--fs-small:clamp(0.72rem,0.8vw,0.85rem);
--fs-tiny:clamp(0.65rem,0.6vw,0.75rem);
--space-xs:clamp(0.25rem,0.5vw,0.5rem);
--space-sm:clamp(0.5rem,1vw,0.75rem);
--space-md:clamp(1rem,2vw,1.5rem);
--space-lg:clamp(1.5rem,3vw,2.5rem);
--space-xl:clamp(2rem,4vw,4rem);
--space-2xl:clamp(3rem,6vw,6rem);
--content-width:min(1080px,92vw)}}
[data-theme="light"]{--bg:#f0eee8;
--bg-deep:#e8e4de;
--bg-card:rgba(255,255,255,0.9);
--bg-card-hover:rgba(255,255,255,1);
--bg-overlay:rgba(240,238,232,0.8);
--text:#1a1a2e;
--text-light:#4a5568;
--text-muted:#6b7a8d;
--border:rgba(0,229,255,0.15);
--border-active:rgba(0,229,255,0.4)}
/* 浅色模式可访问性增强：链接与交互元素使用深色主色调 */
[data-theme="light"] a:not(.nav-logo):not(.post-title a){color:#0891b2}
[data-theme="light"] a:not(.nav-logo):not(.post-title a):hover{color:#0e7490; text-shadow:none}
[data-theme="light"] .section-header h2{color:#0891b2; text-shadow:none}
[data-theme="light"] .btn-primary,
[data-theme="light"] .hero-link{background:#0891b2; color:#fff; border-color:#0891b2}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .hero-link:hover{background:#0e7490; border-color:#0e7490}
[data-theme="light"] .post-category{color:#0891b2; background:rgba(8,145,178,0.1); border-color:rgba(8,145,178,0.2)}
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active{color:#0891b2; text-shadow:none}
[data-theme="light"] .nav-links a::after{background:#0891b2; box-shadow:none}
[data-theme="light"] .hobby-tag:hover{border-color:#0891b2; color:#0891b2; background:rgba(8,145,178,0.08); box-shadow:0 0 12px rgba(8,145,178,0.15)}
[data-theme="light"] .post-more{color:#0891b2}
[data-theme="light"] .post-more:hover{background:rgba(8,145,178,0.08); text-shadow:none}
*,*::before,*::after{margin:0; padding:0; box-sizing:border-box}
/* 全局 focus-visible：键盘导航焦点指示 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--primary); outline-offset:2px}
html{scroll-behavior:smooth}
body{font-family:var(--font);
background:var(--bg);
color:var(--text);
line-height:1.8;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
transition:background 0.5s,color 0.5s}
a{color:var(--primary); text-decoration:none; transition:all 0.3s}
a:hover{color:var(--accent); text-shadow:0 0 12px rgba(0,229,255,0.4)}
::selection{background:rgba(0,229,255,0.3); color:#fff}
img{max-width:100%; height:auto}
body::before{content:'';
position:fixed; inset:0;
background-image:radial-gradient(1px 1px at 10% 20%,rgba(0,229,255,0.5) 0%,transparent 100%),radial-gradient(1px 1px at 30% 70%,rgba(168,85,247,0.4) 0%,transparent 100%),radial-gradient(1px 1px at 50% 10%,rgba(0,229,255,0.3) 0%,transparent 100%),radial-gradient(1px 1px at 70% 50%,rgba(240,171,252,0.3) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 45% 40%,rgba(0,229,255,0.6) 0%,transparent 100%);
background-size:250px 250px,300px 300px,200px 200px,350px 350px,400px 400px;
animation:starDrift 120s linear infinite;
z-index:0; pointer-events:none;
will-change: transform; transform: translateZ(0)}
@media (max-width:768px){body::before{background-image:radial-gradient(1px 1px at 20% 20%,rgba(0,229,255,0.3) 0%,transparent 100%); background-size:400px 400px}
}
body::after{content:'';
position:fixed; top:-40%; left:-20%; width:80%; height:80%;
background:radial-gradient(ellipse,rgba(0,229,255,0.03) 0%,transparent 70%);
z-index:0; pointer-events:none;
animation:nebulaPulse 15s ease-in-out infinite alternate;
will-change: transform, opacity; transform: translateZ(0)}
@keyframes nebulaPulse{from{opacity:0.5; transform:scale(1)}
to{opacity:1; transform:scale(1.15)}
}
nav,section,footer,main,article,.cms-nav,.cms-container{position:relative; z-index:1}
.navbar{position:fixed; top:0; left:0; right:0; z-index:1000;
background:rgba(6,6,14,0.8);
backdrop-filter:blur(24px) saturate(1.5);
-webkit-backdrop-filter:blur(24px) saturate(1.5);
border-bottom:1px solid var(--border);
transition:all 0.4s}
[data-theme="light"] .navbar{background:rgba(240,238,232,0.85)}
.navbar.scrolled{border-bottom-color:var(--border-active); box-shadow:0 4px 30px rgba(0,0,0,0.4)}
.nav-inner{max-width:var(--content-width); margin:0 auto;
display:flex; align-items:center;
padding:0.875rem var(--space-md);
gap:1.5rem}
@media (min-width:769px){.nav-links{margin-left:auto}
}
@media (max-width:768px){.nav-links{margin-left:0}
}
.nav-logo{font-family:var(--font-display);
font-size:clamp(0.9rem,1.5vw,1.15rem);
font-weight:700; color:var(--primary);
letter-spacing:3px; text-transform:uppercase;
text-shadow:0 0 16px rgba(0,229,255,0.4);
white-space:nowrap}
.nav-logo span{color:var(--text-muted); font-family:var(--font);
font-size:clamp(0.65rem,1vw,0.75rem);
letter-spacing:1px; margin-left:6px; font-weight:400}
.nav-links{display:flex; gap:clamp(1rem,2vw,2rem); list-style:none}
.nav-links a{color:var(--text-light); font-size:clamp(0.8rem,1vw,0.88rem);
font-weight:500; letter-spacing:0.5px;
padding:0.25rem 0; position:relative;
transition:all 0.3s}
.nav-links a::after{content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px;
background:var(--primary);
box-shadow:0 0 8px rgba(0,229,255,0.5);
transition:width 0.3s ease}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a:hover,.nav-links a.active{color:var(--primary); text-shadow:0 0 10px rgba(0,229,255,0.5)}
.menu-toggle{display:none; background:none; border:none;
font-size:1.5rem; cursor:pointer; color:var(--primary);
width:40px; height:40px; align-items:center; justify-content:center;
position:relative; z-index:1001}
.menu-toggle .bar{display:block; width:24px; height:2px;
background:var(--primary); margin:5px auto;
border-radius:2px; transition:all 0.3s}
.menu-toggle.active .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.active .bar:nth-child(2){opacity:0}
.menu-toggle.active .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.theme-toggle{background:none; border:1px solid var(--border); border-radius:999px;
width:36px; height:36px; cursor:pointer; color:var(--text-light);
font-size:1rem; transition:all 0.3s;
display:flex; align-items:center; justify-content:center;
margin-left:12px; flex-shrink:0; z-index:1002}
.theme-toggle:hover{border-color:var(--primary); color:var(--primary); box-shadow:var(--glow-cyan)}
.hero{min-height:100vh; display:flex; align-items:center; justify-content:center;
text-align:center; padding:clamp(5rem,12vw,8rem) var(--space-md) clamp(3rem,6vw,5rem);
position:relative; overflow:hidden;
transition:min-height 0.5s}
.hero::before{content:''; position:absolute;
width:min(500px,80vw); height:min(500px,80vw);
border:1px solid rgba(0,229,255,0.08);
border-radius:50%;
animation:timeRing 20s linear infinite;
top:50%; left:50%; transform:translate(-50%,-50%);
will-change: transform}
.hero::after{content:'';
position:absolute;
width:min(700px,95vw); height:min(700px,95vw);
border:1px solid rgba(168,85,247,0.05);
border-radius:50%;
animation:timeRing 30s linear infinite reverse;
top:50%; left:50%; transform:translate(-50%,-50%);
will-change: transform}
@keyframes timeRing{from{transform:translate(-50%,-50%) rotate(0deg)}
to{transform:translate(-50%,-50%) rotate(360deg)}
}
.hero-content{position:relative; z-index:2; width:min(700px,100%)}
.hero-avatar{width:clamp(70px,12vw,100px); height:clamp(70px,12vw,100px);
background:linear-gradient(135deg,rgba(0,229,255,0.2),rgba(168,85,247,0.2));
border:1px solid var(--border-active);
border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:clamp(1.5rem,4vw,2.5rem);
margin:0 auto var(--space-lg);
box-shadow:var(--glow-cyan);
animation:avatarPulse 4s ease-in-out infinite alternate;
transition:all 0.5s}
.hero-avatar:hover{transform:scale(1.1) rotate(360deg);
box-shadow:var(--glow-cyan),0 0 60px rgba(0,229,255,0.3)}
@keyframes avatarPulse{from{box-shadow:var(--glow-cyan)}
to{box-shadow:var(--glow-purple)}
}
.hero h1{font-family:var(--font-display);
font-size:var(--fs-hero); font-weight:800;
letter-spacing:clamp(3px,1vw,6px);
margin-bottom:var(--space-md);
background:linear-gradient(135deg,var(--primary),var(--accent),var(--secondary));
background-size:200% auto;
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
background-clip:text;
animation:gradientFlow 4s ease infinite;
transition:font-size 0.3s}
@keyframes gradientFlow{from{background-position:0% center
}
to{background-position:200% center
}
}
.hero .accent{background:linear-gradient(135deg,var(--secondary),var(--accent));
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
background-clip:text}
.hero .subtitle{font-family:var(--font-display);
font-size:clamp(0.6rem,1.2vw,0.85rem);
color:var(--text-muted);
letter-spacing:clamp(3px,1vw,6px);
text-transform:uppercase; margin-bottom:var(--space-lg)}
.hero .divider{width:clamp(40px,8vw,60px); height:1px;
background:linear-gradient(90deg,transparent,var(--primary),transparent);
margin:0 auto var(--space-lg)}
.hero .bio{font-size:var(--fs-body); color:var(--text-light); line-height:2;
margin-bottom:var(--space-lg);
text-align:center}
.hero-links{display:flex; gap:clamp(0.5rem,1.5vw,1rem); justify-content:center; flex-wrap:wrap}
.hero-link{padding:0.6rem clamp(1rem,2vw,1.5rem);
background:var(--bg-card);
border:1px solid var(--border);
border-radius:999px;
color:var(--text-light);
font-size:clamp(0.8rem,1vw,0.88rem);
transition:all 0.3s;
display:flex; align-items:center; gap:0.4rem;
transform:translateY(0)}
.hero-link:hover{border-color:var(--primary); color:var(--primary);
background:var(--primary-dim);
box-shadow:var(--glow-cyan);
transform:translateY(-3px) scale(1.03)}
.section{padding:clamp(3rem,8vw,6rem) var(--space-md); position:relative}
.section-inner{max-width:var(--content-width); margin:0 auto}
.section p{text-align:center; margin-bottom:1rem}
.section-header{text-align:center; margin-bottom:clamp(1.5rem,4vw,3rem)}
.section-header h2{font-family:var(--font-display);
font-size:var(--fs-h2); font-weight:700;
letter-spacing:clamp(2px,0.6vw,4px);
text-transform:uppercase; color:var(--primary);
text-shadow:0 0 20px rgba(0,229,255,0.3);
margin-bottom:0.75rem}
.section-header .line{width:clamp(30px,6vw,50px); height:1px;
background:linear-gradient(90deg,transparent,var(--primary),transparent);
margin:0 auto var(--space-sm)}
.section-header p{color:var(--text-muted); font-size:var(--fs-small); letter-spacing:1px}
.posts-grid{display:flex;
flex-wrap:wrap;
justify-content:center;
gap:var(--space-md);
max-width:1200px;
margin:0 auto;
padding:0 clamp(1rem,3vw,2rem)}
@media (min-width:1200px){.posts-grid{--col-min:320px}
}
@media (min-width:769px) and (max-width:1199px){.posts-grid{--col-min:300px}
}
@media (max-width:768px){.posts-grid{--col-min:100%; gap:1rem}
}
.post-card{background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius);
overflow:hidden;
transition:all 0.4s cubic-bezier(0.23,1,0.32,1);
position:relative;
transform:translateY(0);
text-align:center;
padding:clamp(1rem,3vw,1.5rem);
flex:1 1 var(--col-min,320px);
max-width:420px;
min-width:280px}
.post-card h3{margin-bottom:0.5rem}
.post-card time{display:block; margin-bottom:0.5rem; color:var(--text-muted); font-size:var(--fs-tiny)}
.post-card p{margin-bottom:0.75rem}
.post-card a{display:inline-block}
.post-card::before{content:'';
position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
opacity:0; transition:opacity 0.4s}
.post-card::after{content:'';
position:absolute; inset:0;
border-radius:var(--radius);
opacity:0;
transition:opacity 0.4s;
pointer-events:none}
.post-card:hover{background:var(--bg-card-hover);
border-color:var(--border-active);
transform:translateY(-6px);
box-shadow:0 12px 32px rgba(0,0,0,0.35),var(--glow-cyan)}
.post-card:hover::before{opacity:1}
@media (hover:none){.post-card{transform:none !important}
.post-card:hover{transform:none !important}
}
.post-cover{width:100%; height:clamp(140px,20vw,180px);
background:linear-gradient(135deg,rgba(0,229,255,0.05),rgba(168,85,247,0.05));
display:flex; align-items:center; justify-content:center;
font-size:clamp(2rem,5vw,3rem);
border-bottom:1px solid var(--border);
transition:all 0.4s}
.post-card:hover .post-cover{background:linear-gradient(135deg,rgba(0,229,255,0.1),rgba(168,85,247,0.1))}
.post-body{padding:clamp(0.8rem,2vw,1.2rem)}
.post-category{display:inline-block; font-size:var(--fs-tiny);
color:var(--primary); background:var(--primary-dim);
padding:0.2rem 0.7rem; border-radius:999px;
margin-bottom:var(--space-sm);
letter-spacing:1px; text-transform:uppercase;
border:1px solid rgba(0,229,255,0.1)}
.post-title{font-size:var(--fs-h3); font-weight:600; margin-bottom:0.5rem; line-height:1.6}
.post-title a{color:var(--text)}
.post-title a:hover{color:var(--primary); text-shadow:0 0 10px rgba(0,229,255,0.4)}
.post-excerpt{font-size:var(--fs-small); color:var(--text-light);
line-height:1.8; margin-bottom:var(--space-sm);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.post-meta{display:flex; justify-content:space-between; align-items:center; font-size:var(--fs-tiny); color:var(--text-muted)}
.post-more{display:block; text-align:center; color:var(--primary); font-size:0.82rem; margin-top:0.5rem; padding:0.3rem; border-radius:6px; transition:all 0.3s}
.post-more:hover{background:var(--primary-dim); text-shadow:var(--glow-cyan)}
.hobby-grid{display:flex; flex-wrap:wrap; gap:clamp(0.5rem,1.5vw,1rem); justify-content:center}
.hobby-tag{padding:0.8rem clamp(1rem,2vw,1.5rem);
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius);
font-size:var(--fs-small); color:var(--text-light);
transition:all 0.3s cubic-bezier(0.23,1,0.32,1);
cursor:default; display:flex; align-items:center; gap:0.5rem;
transform:scale(1)}
.hobby-tag:hover{border-color:var(--primary); color:var(--primary);
background:var(--primary-dim);
box-shadow:var(--glow-cyan);
transform:scale(1.08) translateY(-3px)}
.timeline{max-width:clamp(400px,70vw,640px); margin:0 auto; position:relative; padding-left:clamp(1.5rem,4vw,2.5rem)}
.timeline::before{content:''; position:absolute; left:0; top:0; bottom:0; width:1px;
background:linear-gradient(180deg,var(--primary),var(--secondary),transparent)}
.timeline-item{position:relative; padding:0 0 var(--space-lg) var(--space-md)}
.timeline-item::before{content:''; position:absolute; left:calc(-1 * clamp(4px,0.6vw,6px)); top:6px;
width:clamp(8px,1.5vw,12px); height:clamp(8px,1.5vw,12px);
border-radius:50%; background:var(--primary);
box-shadow:0 0 12px rgba(0,229,255,0.5);
transition:all 0.3s}
.timeline-item:hover::before{transform:scale(1.5); box-shadow:0 0 24px rgba(0,229,255,0.8)}
.timeline-date{font-family:var(--font-display); font-size:var(--fs-tiny); color:var(--primary); margin-bottom:0.35rem; letter-spacing:2px}
.timeline-title{font-size:var(--fs-body); font-weight:600; margin-bottom:0.35rem}
.timeline-desc{font-size:var(--fs-small); color:var(--text-light); line-height:1.8}
.footer{background:var(--bg-deep);
border-top:1px solid var(--border);
padding:clamp(2rem,4vw,3.5rem) var(--space-md) clamp(1.5rem,2vw,2rem);
text-align:center; position:relative;
/* Footer 渐变顶光带 */
background-image:linear-gradient(180deg,
  rgba(0,229,255,0.03) 0%,
  transparent 30%),
  var(--bg-deep)}
.footer::before{content:'';
position:absolute; top:-1px; left:50%;
transform:translateX(-50%);
width:clamp(100px,30vw,280px); height:2px;
background:linear-gradient(90deg,transparent,var(--primary),transparent)}
.footer-inner{max-width:var(--content-width); margin:0 auto}
.footer-columns{display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; margin-bottom:2rem; text-align:left; flex-wrap:wrap}
.footer-col{min-width:120px}
.footer-brand{flex:1; min-width:200px}
.footer-logo{font-size:1.2rem; font-weight:700; color:var(--text); margin-bottom:0.5rem}
.footer-logo span{color:var(--primary); font-weight:400; font-size:0.9rem; margin-left:0.3rem}
.footer-slogan{color:var(--text-muted); font-size:var(--fs-small); margin:0}
.footer-nav,.footer-links{display:flex; flex-direction:column; gap:0.4rem}
.footer-nav h4,.footer-links h4{color:var(--text-light); font-size:0.85rem; margin:0 0 0.5rem 0; font-weight:600; letter-spacing:0.05em}
.footer-nav a,.footer-links a{color:var(--text-muted); font-size:var(--fs-small); text-decoration:none; transition:color 0.2s, padding-left 0.2s}
.footer-nav a:hover,.footer-links a:hover{color:var(--primary); padding-left:0.3rem}
.footer-bottom{border-top:1px solid var(--border); padding-top:1.2rem; text-align:center}
.footer-bottom p{color:var(--text-muted); font-size:var(--fs-tiny); margin:0 0 0.5rem 0}
.footer-beian{font-size:var(--fs-tiny); color:var(--text-muted); display:flex; align-items:center; justify-content:center; gap:0.5rem; flex-wrap:wrap}
.footer-beian a{color:var(--text-muted); transition:all 0.3s}
.footer-beian a:hover{color:var(--primary)}
.footer-copy{font-size:var(--fs-tiny); color:var(--text-muted)}
.back-to-top{position:absolute; top:-22px; right:clamp(1rem,5vw,3rem); width:44px; height:44px; border-radius:50%; border:2px solid var(--primary); background:var(--bg-deep); color:var(--primary); font-size:1.2rem; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(0,229,255,0.15)}
.back-to-top:hover{background:var(--primary); color:var(--bg-deep); transform:translateY(-3px); box-shadow:0 4px 20px rgba(0,229,255,0.3)}
@media(max-width:640px){
.footer-columns{flex-direction:column; align-items:center; text-align:center}
.footer-brand{min-width:auto}
.footer-nav,.footer-links{align-items:center}
}
.reveal{opacity:0; transform:translateY(30px);
transition:all 0.6s cubic-bezier(0.23,1,0.32,1)}
.reveal.visible{opacity:1; transform:translateY(0)}
.reveal-left{opacity:0; transform:translateX(-30px); transition:all 0.6s cubic-bezier(0.23,1,0.32,1)}
.reveal-left.visible{opacity:1; transform:translateX(0)}
.reveal-right{opacity:0; transform:translateX(30px); transition:all 0.6s cubic-bezier(0.23,1,0.32,1)}
.reveal-right.visible{opacity:1; transform:translateX(0)}
.reveal-scale{opacity:0; transform:scale(0.9); transition:all 0.6s cubic-bezier(0.23,1,0.32,1)}
.reveal-scale.visible{opacity:1; transform:scale(1)}
.delay-1{transition-delay:0.1s}
.delay-2{transition-delay:0.2s}
.delay-3{transition-delay:0.3s}
.delay-4{transition-delay:0.4s}
.view-switcher{display:flex; gap:0.5rem; justify-content:center; margin-bottom:var(--space-md)}
.view-btn{padding:0.4rem 0.8rem; background:var(--bg-card);
border:1px solid var(--border); border-radius:6px;
color:var(--text-light); cursor:pointer; font-size:0.85rem;
transition:all 0.3s}
.view-btn.active{border-color:var(--primary); color:var(--primary); background:var(--primary-dim)}
.posts-grid.list{display:flex; flex-direction:column}
.posts-grid.list .post-card{display:flex; flex-direction:row}
.posts-grid.list .post-cover{width:200px; height:auto; min-height:180px; flex-shrink:0;
border-bottom:none; border-right:1px solid var(--border)}
.posts-grid.list .post-body{flex:1; display:flex; flex-direction:column; justify-content:center}
.posts-grid.compact{display:flex; flex-direction:column}
.posts-grid.compact .post-card{padding:1rem}
.posts-grid.compact .post-card{display:flex; align-items:center; gap:1rem}
.posts-grid.compact .post-cover{width:80px; height:80px; flex-shrink:0; font-size:2rem; border-bottom:none}
.particles-canvas{position:fixed; top:0; left:0; width:100%; height:100%;
z-index:0; pointer-events:none}
.cms-nav{background:var(--bg-deep);
padding:0.75rem var(--space-md);
display:flex; justify-content:space-between; align-items:center;
border-bottom:1px solid var(--border-active)}
.cms-nav a{color:rgba(255,255,255,0.7); font-size:var(--fs-small)}
.cms-nav a:hover{color:var(--primary)}
.cms-container{display:flex; min-height:calc(100vh - 52px)}
.cms-sidebar{width:clamp(180px,18vw,220px);
background:rgba(6,6,14,0.95);
padding:1.5rem 0; flex-shrink:0;
border-right:1px solid var(--border)}
.cms-sidebar ul{list-style:none}
.cms-sidebar a{display:block; padding:0.7rem 1.5rem; color:var(--text-light);
font-size:var(--fs-small); transition:all 0.3s}
.cms-sidebar a:hover,.cms-sidebar a.active{color:var(--primary); background:var(--primary-dim);
border-left:2px solid var(--primary)}
.cms-main{flex:1; padding:var(--space-lg); background:var(--bg); overflow-y:auto; min-width:0}
.cms-card{background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius);
padding:var(--space-lg);
margin-bottom:var(--space-md)}
.cms-card h2{font-size:var(--fs-h3);
margin-bottom:var(--space-md);
padding-bottom:0.75rem;
border-bottom:1px solid var(--border);
color:var(--primary); text-shadow:0 0 10px rgba(0,229,255,0.2)}
.cms-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--space-sm); margin-bottom:var(--space-lg)}
.cms-stat{background:var(--bg-card); border:1px solid var(--border);
border-radius:var(--radius); padding:1.25rem; text-align:center}
.cms-stat-value{font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2rem); font-weight:700; color:var(--primary); text-shadow:0 0 16px rgba(0,229,255,0.4)}
.cms-stat-label{font-size:var(--fs-tiny); color:var(--text-muted); margin-top:0.25rem; letter-spacing:1px}
.cms-table{width:100%; border-collapse:collapse; overflow-x:auto; display:block}
.cms-table th,.cms-table td{padding:0.75rem 1rem; text-align:left; border-bottom:1px solid var(--border); font-size:var(--fs-small); white-space:nowrap}
.cms-table th{color:var(--text-muted); font-weight:600; font-size:var(--fs-tiny); letter-spacing:1px; text-transform:uppercase}
.cms-table tr:hover{background:var(--primary-dim)}
.cms-btn{padding:0.5rem 1.25rem; border-radius:6px; border:1px solid transparent;
cursor:pointer; font-size:var(--fs-small); font-weight:500;
transition:all 0.3s; background:var(--primary-dim); color:var(--primary)}
.cms-btn:hover{box-shadow:var(--glow-cyan); transform:translateY(-1px)}
.cms-btn-primary{background:var(--primary); color:var(--bg); border-color:var(--primary)}
.cms-btn-primary:hover{background:#00d4ee}
.cms-btn-danger{background:rgba(239,68,68,0.15); color:#ef4444; border-color:rgba(239,68,68,0.3)}
.cms-btn-sm{padding:0.35rem 0.75rem; font-size:var(--fs-tiny)}
.cms-form-group{margin-bottom:1.5rem}
.cms-form-group label{display:block; margin-bottom:0.5rem; font-weight:600; font-size:var(--fs-small); color:var(--text-light)}
.cms-form-group input,.cms-form-group select,.cms-form-group textarea{width:100%; padding:0.75rem 1rem;
background:var(--bg); border:1px solid var(--border);
border-radius:8px; font-size:var(--fs-small);
font-family:var(--font); color:var(--text);
transition:all 0.3s}
.cms-form-group input:focus,.cms-form-group select:focus,.cms-form-group textarea:focus{outline:none; border-color:var(--primary);
box-shadow:0 0 0 3px rgba(0,229,255,0.1),var(--glow-cyan)}
.cms-form-group textarea{min-height:clamp(200px,40vh,400px); resize:vertical}
.cms-badge{display:inline-block; padding:0.15rem 0.6rem; border-radius:999px; font-size:var(--fs-tiny); font-weight:500}
.cms-badge-published{background:var(--primary-dim); color:var(--primary); border:1px solid rgba(0,229,255,0.15)}

/* ============ 后台自动化模块 & 响应式 ============ */
img,video,iframe{max-width:100%; height:auto}
.auto-status{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-sm)}
.auto-input{width:100%; padding:0.6rem 0.8rem; background:var(--bg); border:1px solid var(--border);
border-radius:8px; font-size:var(--fs-small); font-family:var(--font); color:var(--text); transition:all 0.3s}
.auto-input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,229,255,0.1)}
.auto-modal{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
background:rgba(0,0,0,0.6); padding:1rem}
.auto-modal[hidden]{display:none}
.auto-modal-box{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
width:min(560px,100%); max-height:90vh; overflow:auto; padding:1.5rem; box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.auto-modal-box label{display:block; font-size:var(--fs-small); color:var(--text-light); margin-bottom:0.2rem}

/* 移动端：后台侧栏堆叠为顶部横向导航，主区域占满 */
@media (max-width: 768px) {
    .cms-nav{flex-wrap:wrap; gap:0.5rem; padding:0.6rem 1rem}
    .cms-nav>div{width:100%; justify-content:space-between}
    .cms-container{flex-direction:column; min-height:auto}
    .cms-sidebar{width:100%; display:flex; overflow-x:auto; padding:0.5rem 0; border-right:none; border-bottom:1px solid var(--border)}
    .cms-sidebar ul{display:flex; gap:0.25rem; padding:0 0.5rem}
    .cms-sidebar a{padding:0.5rem 0.9rem; white-space:nowrap; border-left:none; border-bottom:2px solid transparent}
    .cms-sidebar a:hover,.cms-sidebar a.active{border-left:none; border-bottom:2px solid var(--primary)}
    .cms-main{padding:1rem}
    .cms-stats{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
    .auto-status{grid-template-columns:1fr}
    .auto-modal-box{padding:1rem}
}
@media (max-width: 480px) {
    .cms-card{padding:1rem}
    .cms-actions,.auto-actions{flex-direction:column; align-items:stretch}
    .cms-btn{width:100%; text-align:center}
}
.cms-badge-draft{background:var(--secondary-dim); color:var(--secondary); border:1px solid rgba(168,85,247,0.15)}
@keyframes avatarBounce{0%,100%{transform:translateY(0)
}
50%{transform:translateY(-10px)
}
}
@keyframes mechaScan{0%,100%{box-shadow:inset 0 0 20px rgba(255,107,53,0.1)
}
50%{box-shadow:inset 0 0 40px rgba(255,107,53,0.3)
}
}
@keyframes cyberGlitch{2%,6%{transform:translate(2px,-1px) skew(-2deg)
}
4%{transform:translate(-2px,1px) skew(2deg)
}
8%,100%{transform:none
}
}
@keyframes gothicPulse{0%,100%{box-shadow:0 0 20px rgba(142,36,170,0.2)
}
50%{box-shadow:0 0 40px rgba(142,36,170,0.4),0 0 60px rgba(198,40,40,0.1)
}
}
@keyframes spaceOrbit{0%,100%{transform:translateY(0) rotate(0deg)
}
25%{transform:translateY(-8px) rotate(5deg)
}
75%{transform:translateY(4px) rotate(-5deg)
}
}
@keyframes candyBounce{0%,100%{transform:scale(1)
}
50%{transform:scale(1.08)
}
}
@keyframes wastelandFlicker{0%,100%{opacity:1
}
3%{opacity:0.6
}
6%{opacity:1
}
10%{opacity:0.4
}
13%{opacity:1
}
}
@keyframes themeFadeIn{from{filter:saturate(0.5) brightness(1.2)}
to{filter:saturate(1) brightness(1)}
}
html.theme-transitioning body{animation:themeFadeIn 0.6s ease}
[data-time="dawn"]{--primary:#ff9a76; --primary-dim:rgba(255,154,118,0.15)}
[data-time="noon"]{--primary:#00bcd4; --glow-cyan:0 0 25px rgba(0,188,212,0.35)}
[data-time="dusk"]{--primary:#ff7043; --primary-dim:rgba(255,112,67,0.15); --secondary:#e040fb}
[data-time="evening"]{--primary:#7c4dff; --primary-dim:rgba(124,77,255,0.15)}
[data-time="midnight"]{--bg:#02020a; --bg-card:rgba(8,8,18,0.9); --glow-cyan:0 0 12px rgba(0,229,255,0.15)}
[data-season="spring"]{--accent:#f48fb1}
[data-season="summer"]{--secondary:#ff8a65}
[data-season="autumn"]{--accent:#ffab91; --gold:#ffcc02}
[data-season="winter"]{--accent:#b0bec5; --gold:#90a4ae}
[data-animations="none"] *,[data-animations="minimal"] *{animation-duration:0.01ms !important;
transition-duration:0.01ms !important}
.navbar,.post-card,.hobby-card,.footer,.hero,.section,a,button,input,select,textarea,.footer-col,.back-to-top,.cat-btn{transition:background 0.8s ease,color 0.5s ease,border-color 0.5s ease,box-shadow 0.5s ease}
body::before,body::after{transition:none}
@media (min-width:1200px){.hero{min-height:90vh}
.section{padding:6rem 2rem}
}
@media (max-width:1199px){.hero{min-height:92vh}
.posts-grid{--grid-min:280px}
}
@media (max-width:768px){.nav-links{display:none;position:fixed;top:0;left:0;right:0;bottom:0;
background:rgba(6,6,14,0.98);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
flex-direction:column;align-items:center;justify-content:center;
gap:2rem;
opacity:0;visibility:hidden;
transition:opacity 0.3s ease,visibility 0.3s ease}
.nav-links.open{display:flex;opacity:1;visibility:visible}
[data-theme="light"] .nav-links{background:rgba(240,238,232,0.98)}
.nav-links a{font-size:1.2rem;padding:0.5rem 0}
.menu-toggle{display:flex}
body.menu-open{overflow:hidden}
.nav-inner{gap:0}
.nav-inner > .theme-toggle{margin-left:auto;order:2}
.menu-toggle{order:3}
.navbar{min-height:56px}
.nav-links{margin-left:0}
.hero{min-height:72vh;padding-top:4rem;padding-bottom:2rem}
.hero-content{width:min(700px,100%);padding:0 0.5rem}
.hero::before,.hero::after{width:300px;height:300px}
.posts-grid.list .post-card{flex-direction:column}
.posts-grid.list .post-cover{width:100%;height:140px;border-right:none;border-bottom:1px solid var(--border)}
.posts-grid.compact .post-card{flex-direction:row}
.cms-container{flex-direction:column}
.cms-sidebar{width:100%;padding:0.5rem 0}
.cms-sidebar ul{display:flex;overflow-x:auto}
.cms-sidebar a{padding:0.5rem 1rem;white-space:nowrap;border-left:none !important}
.cms-main{padding:var(--space-sm)}
.cms-stats{grid-template-columns:repeat(2,1fr)}
.cms-table{font-size:var(--fs-tiny)}
.cms-table th,.cms-table td{padding:0.5rem}
}
@media (max-width:400px){.hero h1{font-size:1.5rem;letter-spacing:1px}
.hero .subtitle{font-size:0.55rem;letter-spacing:2px}
.hero-links{flex-direction:column;align-items:stretch;gap:0.6rem}
.hero-link{justify-content:center}
.hobby-tag{width:100%;justify-content:center}
.post-card{padding:1rem}
#postContent{font-size:0.92rem}
#postContent h1{font-size:1.4rem}
#postContent h2{font-size:1.2rem}
#postContent h3{font-size:1.05rem}
}
@media (max-height:500px) and (orientation:landscape){.hero{min-height:100vh; padding-top:4rem}
.hero-avatar{width:60px; height:60px; font-size:1.5rem; margin-bottom:1rem}
.hero h1{font-size:1.5rem; letter-spacing:2px}
.hero .subtitle{font-size:0.55rem; letter-spacing:2px}
.hero .bio{font-size:0.8rem; margin-bottom:1rem}
.hero-links{gap:0.5rem}
.hero-link{padding:0.4rem 1rem; font-size:0.8rem}
}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body{-webkit-font-smoothing:antialiased}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important}
html{scroll-behavior:auto}
}
@media print{body::before,body::after,.hero::before,.hero::after,.particles-canvas{display:none}
.navbar{position:static; border:none}
.hero{min-height:auto; padding:2rem 0}
.footer{break-inside:avoid}
.post-card{break-inside:avoid}
}
@keyframes matrixRain{0%{text-shadow:0 0 5px var(--primary)
}
50%{text-shadow:0 0 15px var(--secondary)
}
100%{text-shadow:0 0 5px var(--primary)
}
}
@keyframes oceanPulse{0%,100%{box-shadow:0 0 20px rgba(0,188,212,0.15)
}
50%{box-shadow:0 0 40px rgba(0,188,212,0.3)
}
}
@keyframes auroraPulse{0%,100%{box-shadow:0 0 30px rgba(0,230,118,0.2)
}
50%{box-shadow:0 0 50px rgba(179,136,255,0.25)
}
}
@keyframes quantumSpin{0%{transform:rotate(0deg) scale(1)
}
50%{transform:rotate(180deg) scale(1.1)
}
100%{transform:rotate(360deg) scale(1)
}
}
@keyframes quantumRotate{from{transform:rotate(0deg)
}
to{transform:rotate(360deg)
}
}
@keyframes liquidFlow{0%,100%{border-radius:50% 40% 60% 50%;transform:scale(1)
}
25%{border-radius:40% 60% 50% 40%;transform:scale(1.05)
}
50%{border-radius:60% 50% 40% 60%;transform:scale(1)
}
75%{border-radius:50% 60% 50% 40%;transform:scale(1.05)
}
}
@keyframes laserPulse{0%,100%{box-shadow:0 0 30px rgba(255,23,68,0.4),0 0 60px rgba(41,121,255,0.2)
}
50%{box-shadow:0 0 50px rgba(255,23,68,0.6),0 0 80px rgba(41,121,255,0.4)
}
}
@keyframes crystalShine{0%,100%{filter:brightness(1)
}
50%{filter:brightness(1.3)
}
}
@keyframes doomGlow{0%,100%{box-shadow:0 0 40px rgba(255,61,0,0.4)
}
50%{box-shadow:0 0 60px rgba(255,61,0,0.6)
}
}
@keyframes iceFloat{0%,100%{transform:translateY(0)
}
50%{transform:translateY(-8px)
}
}
@keyframes magicSpin{from{transform:rotate(0deg)
}
to{transform:rotate(360deg)
}
}
@keyframes magicPulse{0%,100%{box-shadow:0 0 40px rgba(255,215,0,0.3)
}
50%{box-shadow:0 0 60px rgba(255,215,0,0.5)
}
}
@keyframes dataFlicker{0%,100%{opacity:1
}
50%{opacity:0.8
}
}
@keyframes arcadeBlink{0%,100%{border-color:var(--primary)
}
50%{border-color:var(--secondary)
}
}
@keyframes blackholeRotate{from{transform:translate(-50%,-50%) rotate(0deg)
}
to{transform:translate(-50%,-50%) rotate(360deg)
}
}
@keyframes blackholeSpin{from{transform:rotate(0deg) scale(1)
}
50%{transform:rotate(180deg) scale(1.05)
}
to{transform:rotate(360deg) scale(1)
}
}
@keyframes galaxyRotate{from{transform:translate(-50%,-50%) rotate(0deg)
}
to{transform:translate(-50%,-50%) rotate(360deg)
}
}
@keyframes galaxyPulse{0%,100%{box-shadow:0 0 30px rgba(74,144,226,0.5)
}
50%{box-shadow:0 0 60px rgba(74,144,226,0.8),0 0 100px rgba(123,104,238,0.3)
}
}
@keyframes auroraFlow{0%,100%{background-position:0% 0%
}
50%{background-position:100% 100%
}
}
@keyframes sakuraFall{from{transform:translateY(-10%) rotate(0deg)
}
to{transform:translateY(10%) rotate(360deg)
}
}
@keyframes nebulaShift{0%{filter:hue-rotate(0deg) brightness(1)
}
100%{filter:hue-rotate(60deg) brightness(1.2)
}
}
@keyframes fireflyDance{0%,100%{transform:translate(0,0); opacity:0.3
}
25%{transform:translate(20px,-30px); opacity:0.8
}
50%{transform:translate(-15px,20px); opacity:0.5
}
75%{transform:translate(25px,15px); opacity:0.9
}
}
@keyframes kaleidoRotate{from{transform:translate(-50%,-50%) rotate(0deg)
}
to{transform:translate(-50%,-50%) rotate(360deg)
}
}
@keyframes stainedLight{0%,100%{opacity:0.5; transform:scale(1)
}
50%{opacity:1; transform:scale(1.02)
}
}
@keyframes cosmicTwinkle{0%{opacity:0.3; transform:rotate(0deg)
}
100%{opacity:0.8; transform:rotate(360deg)
}
}
@keyframes rainbowRotate{from{transform:translate(-50%,-50%) rotate(0deg)
}
to{transform:translate(-50%,-50%) rotate(360deg)
}
}
@keyframes voidSpin{from{transform:translate(-50%,-50%) rotate(0deg) scale(1)
}
50%{transform:translate(-50%,-50%) rotate(180deg) scale(1.1)
}
to{transform:translate(-50%,-50%) rotate(360deg) scale(1)
}
}
@keyframes neonPulse{0%{opacity:0.3;filter:hue-rotate(0deg)
}
100%{opacity:0.8;filter:hue-rotate(30deg)
}
}
@keyframes underwaterFloat{0%,100%{transform:translateY(0)
}
50%{transform:translateY(-20px)
}
}
@keyframes stardustFloat{from{transform:translateY(0)
}
to{transform:translateY(-100%)
}
}
@keyframes crystalRefract{0%,100%{opacity:0.3;transform:scale(1)
}
50%{opacity:0.8;transform:scale(1.02)
}
}
@keyframes cyberDawnPulse{0%,100%{opacity:0.3
}
50%{opacity:0.9
}
}
@keyframes hologramRotate{from{transform:translate(-50%,-50%) rotate(0deg)
}
to{transform:translate(-50%,-50%) rotate(360deg)
}
}
@keyframes plasmaFlow{0%{filter:hue-rotate(0deg)
}
100%{filter:hue-rotate(90deg)
}
}
@keyframes prismRotate{from{transform:translate(-50%,-50%) rotate(0deg)
}
to{transform:translate(-50%,-50%) rotate(360deg)
}
}
@keyframes wormholeSpin{from{transform:translate(-50%,-50%) rotate(0deg) scale(1)
}
50%{transform:translate(-50%,-50%) rotate(180deg) scale(1.2)
}
to{transform:translate(-50%,-50%) rotate(360deg) scale(1)
}
}
@keyframes supernovaPulse{0%,100%{opacity:0.2;transform:translate(-50%,-50%) scale(1)
}
50%{opacity:0.8;transform:translate(-50%,-50%) scale(1.5)
}
}

/* Default theme: futuristic */
[data-theme-style="futuristic"],:root{--theme-name:"未来科技";
--theme-icon:"🚀";
--bg:#06060e;
--bg-deep:#03030a;
--bg-card:rgba(12,12,28,0.85);
--bg-card-hover:rgba(20,20,45,0.9);
--primary:#00e5ff;
--primary-dim:rgba(0,229,255,0.15);
--secondary:#a855f7;
--accent:#f0abfc;
--glow-1:0 0 20px rgba(0,229,255,0.25);
--glow-2:0 0 20px rgba(168,85,247,0.25);
--gradient-main:linear-gradient(135deg,#00e5ff,#a855f7,#f0abfc);
--font-body:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
--font-display:'Orbitron','Inter',sans-serif;
--border-glow:rgba(0,229,255,0.08);
--border-active-glow:rgba(0,229,255,0.3)}
[data-theme-style="futuristic"] .section{padding:clamp(3rem,6vw,6rem) var(--space-md)}
[data-theme-style="futuristic"] .section:nth-child(even){background:var(--bg-deep)}
[data-theme-style="futuristic"] .post-card{backdrop-filter:blur(12px)}
[data-theme-style="futuristic"] .post-card:hover{transform:translateY(-6px) perspective(800px) rotateX(1.5deg)}
[data-theme-style="futuristic"] .nav-links a.active{text-shadow:0 0 20px rgba(0,229,255,0.6)}
[data-theme-style="futuristic"] .timeline-item::before{width:14px; height:14px; left:-7px}
[data-theme-style="futuristic"] .hero-avatar{animation-duration:3s}
[data-theme-style="futuristic"] .footer-links a:hover{letter-spacing:2px}

/* ========== 语义布局类（替代内联 style） ========== */
.live-bar-grid{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.info-card{text-align:center;padding:1.5rem;transition:transform 0.35s cubic-bezier(0.22,1,0.32,1),box-shadow 0.35s ease}
.info-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.info-card-title{font-size:0.9rem;color:var(--accent);margin-bottom:0.8rem;letter-spacing:0.1em}
.info-card-value{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums}
.featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;max-width:1200px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}
.quick-nav-grid{max-width:900px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.quick-nav-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;padding:1.5rem 1rem;text-decoration:none;transition:transform 0.35s cubic-bezier(0.22,1,0.32,1)}
.quick-nav-card:hover{transform:translateY(-6px)}
.quick-nav-icon{font-size:2rem;transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1); display:inline-block}
.quick-nav-card:hover .quick-nav-icon{transform:scale(1.2) translateY(-4px)}
.quick-nav-label{font-weight:600;color:var(--primary)}
.quick-nav-desc{font-size:0.8rem;color:var(--text-light)}

/* ===== Section 分隔微装饰 ===== */
.section + .section{position:relative}
.section + .section::before{
  content:'';
  position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:min(80px,15vw);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border-active),transparent);
  opacity:0.5;
}

@media(max-width:768px){.quick-nav-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.75rem}.quick-nav-card{padding:1.25rem 0.75rem}}

/* ========== 爱好卡片 ========== */
.hobby-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-md);max-width:1200px;margin:0 auto;padding:0 var(--space-md)}
.hobby-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2rem);transition:all 0.4s cubic-bezier(0.23,1,0.32,1);position:relative;overflow:hidden}
.hobby-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary));opacity:0;transition:opacity 0.4s}
.hobby-card:hover{border-color:var(--border-active);transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,0.4),var(--glow-cyan)}
.hobby-card:hover::before{opacity:1}
.hobby-icon{font-size:2.5rem;margin-bottom:var(--space-sm);display:block}
.hobby-card h3{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--primary);margin-bottom:0.5rem;letter-spacing:1px}
.hobby-card p{color:var(--text-light);font-size:var(--fs-body);line-height:1.8;margin-bottom:var(--space-sm)}
.hobby-detail{display:flex;flex-wrap:wrap;gap:0.5rem}
.hobby-tag-sm{padding:0.25rem 0.7rem;font-size:var(--fs-tiny);color:var(--primary);border:1px solid var(--border);border-radius:999px;white-space:nowrap;transition:all 0.3s}
.hobby-tag-sm:hover{border-color:var(--primary);background:var(--primary-dim)}
@media(max-width:768px){.hobby-cards{grid-template-columns:1fr;padding:0 var(--space-sm)}}

/* ========== 文章内容排版增强 ========== */
#postContent h1,#postContent h2,#postContent h3,#postContent h4,#postContent h5,#postContent h6{margin:1.5em 0 0.5em;color:var(--text);line-height:1.4}
#postContent h1{font-size:1.8rem;font-family:var(--font-display)}
#postContent h2{font-size:1.5rem;border-bottom:1px solid var(--border);padding-bottom:0.3em}
#postContent h3{font-size:1.25rem}
#postContent p{margin:0.8em 0;line-height:1.8}
#postContent ul,#postContent ol{margin:0.8em 0;padding-left:2em}
#postContent li{margin:0.3em 0;line-height:1.7}
#postContent pre{background:var(--bg-deep,#0a0a1a);border:1px solid var(--border);border-radius:8px;padding:1rem;overflow-x:auto;margin:1em 0}
#postContent code{font-family:'Consolas','Courier New',monospace;font-size:0.9em;padding:0.15em 0.4em;border-radius:4px;background:var(--primary-dim,rgba(0,229,255,0.1));color:var(--primary,#00e5ff)}
#postContent pre code{padding:0;background:none;color:var(--text-light,#aaa)}
#postContent blockquote{margin:1em 0;padding:0.8em 1.2em;border-left:4px solid var(--primary,#00e5ff);background:var(--primary-dim,rgba(0,229,255,0.06));border-radius:0 8px 8px 0;color:var(--text-light,#aaa)}
#postContent blockquote p{margin:0.3em 0}
#postContent hr{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--primary,#00e5ff),var(--secondary,#a855f7),transparent);margin:2em 0}
#postContent table{width:100%;border-collapse:collapse;margin:1em 0;font-size:0.95rem}
#postContent thead{background:var(--primary-dim,rgba(0,229,255,0.1))}
#postContent th,#postContent td{border:1px solid var(--border);padding:0.6em 1em;text-align:left}
#postContent th{font-weight:600;color:var(--primary,#00e5ff)}
#postContent tbody tr:hover{background:var(--bg-card-hover,rgba(20,20,45,0.5))}
#postContent img{max-width:100%;border-radius:8px;margin:0.5em 0}
#postContent a{color:var(--primary,#00e5ff);text-decoration:underline;text-underline-offset:3px}
#postContent a:hover{color:var(--accent,#f0abfc)}
/* ===== style-patches.css ===== */
/**
 * 绰瑞超创 - style-patches.css
 * CSS 补丁文件：品牌色主题 + TOC样式 + 分享按钮 + 阅读进度条 + 404页面
 * 
 * 使用方式：在页面中引入此文件即可生效
 * <link rel="stylesheet" href="/css/style-patches.css">
 */

/* ========== 品牌色主题 ========== */
/**
 * 品牌色系：深渊蓝 #0A1628（背景）+ 碎金 #D4A843（主色）
 * 辅助色：#F0D68A（金色渐变亮端）、#1A2A4A（深蓝色卡片背景）
 * 风格：深沉、锐利、魔幻感
 */
[data-theme-style="brand"] {
    /* 覆盖核心颜色变量 */
    --bg: #0A1628;
    --bg-deep: #060b14;
    --bg-card: rgba(26, 42, 74, 0.85);
    --bg-card-hover: rgba(36, 56, 94, 0.9);
    
    /* 品牌主色：碎金 */
    --primary: #D4A843;
    --primary-dim: rgba(212, 168, 67, 0.15);
    --accent: #F0D68A;
    
    /* 辅助色调整 */
    --secondary: #8B6914;
    --accent: #F0D68A;
    
    /* 文字颜色 */
    --text: #E8EDF5;
    --text-light: #9AABC2;
    --text-muted: #6B7D99;
    
    /* 边框 */
    --border: rgba(212, 168, 67, 0.1);
    --border-active: rgba(212, 168, 67, 0.4);
    
    /* 发光效果（品牌金色） */
    --glow-cyan: 0 0 20px rgba(212, 168, 67, 0.25);
    --glow-gold: 0 0 20px rgba(212, 168, 67, 0.3);
    --glow-purple: 0 0 20px rgba(139, 105, 20, 0.2);
    
    /* 主题名称 */
    --theme-name: "品牌色";
    --theme-icon: "👑";
    
    /* 渐变 */
    --gradient-main: linear-gradient(135deg, #D4A843, #F0D68A, #D4A843);
}

/* 品牌主题下的导航logo发光效果 */
[data-theme-style="brand"] .nav-logo {
    color: var(--primary);
    text-shadow: 0 0 16px rgba(212, 168, 67, 0.6);
}

/* 品牌主题下的Hero标题渐变 */
[data-theme-style="brand"] .hero h1 {
    background: linear-gradient(135deg, var(--primary), var(--accent), var(--primary));
    background-size: 200% auto;
}

/* 品牌主题下的卡片hover效果 */
[data-theme-style="brand"] .post-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), var(--glow-gold);
}

/* 品牌主题下的Section标题 */
[data-theme-style="brand"] .section-header h2 {
    color: var(--primary);
    text-shadow: 0 0 20px rgba(212, 168, 67, 0.3);
}

/* ========== 默认主题的金色微调 ========== */
/**
 * 将默认主题的 --gold 从 #fbbf24 调整为品牌碎金 #D4A843
 * 保持青色/紫色不变
 */
[data-theme-style="futuristic"] {
    --gold: #D4A843;
}


/* ========== 文章目录 TOC 样式 ========== */

/* TOC 容器 */
.toc-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    font-size: var(--fs-small);
    transition: all 0.3s ease;
    overflow: hidden;
}

/* TOC 标题栏 */
.toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--primary-dim);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
}

.toc-header span {
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 0.5px;
}

.toc-toggle {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0.25rem;
    transition: transform 0.3s;
}

/* TOC 导航列表 */
.toc-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.toc-panel.expanded .toc-nav {
    max-height: 80vh;
}

/* TOC 项目 */
.toc-item {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text-light);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toc-item:hover {
    color: var(--primary);
    background: var(--primary-dim);
    border-left-color: var(--primary);
}

.toc-item.active {
    color: var(--primary);
    background: var(--primary-dim);
    border-left-color: var(--primary);
    font-weight: 600;
}

/* TOC 层级缩进 */
.toc-level-1 { padding-left: 1rem; }
.toc-level-2 { padding-left: 1.5rem; }
.toc-level-3 { padding-left: 2rem; }
.toc-level-4 { padding-left: 2.5rem; font-size: var(--fs-tiny); }

/* ========== 桌面端 TOC 定位 ========== */
@media (min-width: 1200px) {
    .post-with-toc {
        display: flex;
        gap: 2rem;
        max-width: 1080px;
        margin: 0 auto;
    }
    
    .post-with-toc .post-detail-article,
    .post-with-toc #postContent {
        flex: 1;
        min-width: 0;
        width: auto;
        max-width: 800px;
    }
    
    .toc-panel {
        position: sticky;
        top: 80px;
        width: 200px;
        max-height: 80vh;
        flex-shrink: 0;
        align-self: flex-start;
    }
    
    .toc-panel.mobile {
        display: none;
    }
}

/* ========== 移动端 TOC ========== */
@media (max-width: 1199px) {
    .toc-panel.mobile {
        display: block;
        width: 100%;
        margin-bottom: 1.5rem;
    }
    
    .toc-panel:not(.mobile) {
        display: none;
    }
}


/* ========== 社交分享按钮样式 ========== */

/* 分享栏容器 */
.share-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.25rem;
    margin-top: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.share-label {
    color: var(--text-light);
    font-size: var(--fs-small);
    font-weight: 500;
}

/* 分享按钮 */
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: var(--primary-dim);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-light);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: all 0.3s ease;
}

.share-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg);
    box-shadow: var(--glow-cyan);
    transform: translateY(-2px);
}

.share-btn span {
    display: inline-block;
}

/* 分享提示 */
.share-tip {
    width: 100%;
    padding: 0.75rem;
    background: var(--primary-dim);
    border: 1px solid var(--primary);
    border-radius: 8px;
    color: var(--primary);
    font-size: var(--fs-small);
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.share-tip.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ========== 阅读进度条样式 ========== */

/* 进度条容器 */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    background: transparent;
    pointer-events: none;
}

/* 进度条本体 */
.reading-progress-bar {
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    transition: transform 0.1s ease-out;
}

/* 毛玻璃效果（可选） */
.reading-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.3;
    animation: progressShimmer 2s ease-in-out infinite;
}

@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}


/* ========== 404 页面样式 ========== */

/* 404 页面容器 */
.page-404 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.page-404 .error-code {
    font-family: var(--font-display);
    font-size: clamp(6rem, 20vw, 12rem);
    font-weight: 800;
    color: var(--primary);
    text-shadow: var(--glow-cyan);
    line-height: 1;
    margin-bottom: 1rem;
    animation: glitch404 3s ease-in-out infinite;
}

@keyframes glitch404 {
    0%, 90%, 100% { 
        transform: translateX(0);
        text-shadow: var(--glow-cyan);
    }
    92% { 
        transform: translateX(-5px);
        text-shadow: -3px 0 var(--secondary), 3px 0 var(--accent);
    }
    94% { 
        transform: translateX(5px);
        text-shadow: 3px 0 var(--secondary), -3px 0 var(--accent);
    }
    96% { 
        transform: translateX(-3px);
        text-shadow: var(--glow-cyan);
    }
}

.page-404 .error-title {
    font-size: var(--fs-h2);
    color: var(--text);
    margin-bottom: 0.5rem;
}

.page-404 .error-desc {
    font-size: var(--fs-body);
    color: var(--text-light);
    margin-bottom: 2rem;
    max-width: 400px;
}

/* 404 搜索框 */
.page-404 .search-box {
    display: flex;
    gap: 0.5rem;
    max-width: 400px;
    width: 100%;
    margin-bottom: 2rem;
}

.page-404 .search-box input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: var(--fs-body);
    outline: none;
    transition: all 0.3s;
}

.page-404 .search-box input:focus {
    border-color: var(--primary);
    box-shadow: var(--glow-cyan);
}

.page-404 .search-box button {
    padding: 0.75rem 1.25rem;
    background: var(--primary);
    border: none;
    border-radius: var(--radius);
    color: var(--bg);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.page-404 .search-box button:hover {
    transform: scale(1.05);
    box-shadow: var(--glow-cyan);
}

/* 404 返回按钮 */
.page-404 .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: var(--fs-body);
    text-decoration: none;
    transition: all 0.3s;
}

.page-404 .back-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--glow-cyan);
}

/* 404 装饰元素 */
.page-404 .error-decoration {
    position: absolute;
    width: min(400px, 80vw);
    height: min(400px, 80vw);
    border: 1px solid var(--border);
    border-radius: 50%;
    opacity: 0.3;
    animation: orbit404 20s linear infinite;
}

.page-404 .error-decoration::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: var(--glow-cyan);
}

@keyframes orbit404 {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}


/* ========== 辅助工具类 ========== */

/* 文章内容区域的最大宽度（配合TOC使用） */
.post-article {
    max-width: var(--content-width);
}

/* ========== 首页动态信息栏 ========== */
.live-bar {
    padding: clamp(1rem, 3vw, 2rem) 0;
}

.live-bar-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.live-card {
    text-align: center;
    padding: 1.5rem;
}

.live-card-title {
    font-size: 0.9rem;
    color: var(--accent);
    margin-bottom: 0.8rem;
    letter-spacing: 0.1em;
}

.live-card-text {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    min-height: 2.4rem;
}

.live-card-from {
    font-size: 0.8rem;
    color: var(--text-light);
}

.live-card-city {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.3rem;
}

.live-card-temp {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.live-card-desc {
    font-size: 0.9rem;
    color: var(--text-light);
}

.live-card-uptime {
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 动态信息栏移动端 */
@media (max-width: 768px) {
    .live-bar-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .live-card {
        padding: 1.2rem;
    }

    .live-card-temp {
        font-size: 1.6rem;
    }

    .live-card-uptime {
        font-size: 1.1rem;
    }
}

@media (max-width: 400px) {
    .live-card {
        padding: 1rem;
    }

    .live-card-temp {
        font-size: 1.4rem;
    }
}

/* 移动端优化 */
@media (max-width: 768px) {
    .share-bar {
        justify-content: center;
    }
    
    .share-btn span {
        display: none;
    }
    
    .share-btn {
        padding: 0.6rem 0.8rem;
    }
    
    .page-404 .error-code {
        font-size: clamp(5rem, 25vw, 8rem);
    }

    /* 动态信息栏移动端：单列排列 */
    .section[style*="grid"] > div,
    #live-bar > div {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* 天气卡片温度字号缩小 */
    #weatherTemp {
        font-size: 1.6rem !important;
    }

    /* 文章详情页移动端 */
    .section[style*="max-width:800px"],
    #postDetail {
        max-width: 100% !important;
        padding: 0 var(--space-sm) !important;
    }

    /* 文章内容区域文字大小优化 */
    #postContent {
        font-size: var(--fs-body);
        word-break: normal;
        overflow-wrap: anywhere;
    }

    #postContent table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.85rem;
    }

    #postContent pre {
        font-size: 0.82rem;
        padding: 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #postContent blockquote {
        padding: 0.6rem 0.8rem;
        margin: 0.8em 0;
    }

    /* 文章详情页 postDetail 间距 */
    #postDetail h1 {
        font-size: 1.3rem !important;
    }

    #postDate, #postViews {
        font-size: 0.78rem !important;
    }

    /* TOC 移动端适配 */
    .toc-panel {
        margin-bottom: 1rem;
        font-size: 0.85rem;
    }

    .toc-item {
        padding: 0.4rem 0.75rem;
    }

    /* 阅读进度条在移动端更细 */
    .reading-progress {
        height: 2px;
    }

    /* 主题切换按钮移动端：保持44px最小触摸目标 */
    .theme-toggle {
        width: 44px;
        height: 44px;
        font-size: 0.85rem;
        margin-left: 6px;
    }

    #favStyleBtn {
        font-size: 1rem;
    }

    /* 留言页表单移动端优化 */
    #contactForm input,
    #contactForm textarea {
        font-size: 16px; /* 防止 iOS 缩放 */
    }
}

/* 超小屏幕 */
@media (max-width: 400px) {
    /* 动态信息栏内边距 */
    .post-card[style*="padding:1.5rem"] {
        padding: 1rem !important;
    }

    #weatherTemp {
        font-size: 1.4rem !important;
    }

    /* 分享按钮只显示图标 */
    .share-label {
        display: none;
    }

    .share-btn {
        padding: 0.5rem 0.6rem;
        font-size: 0.9rem;
    }
}

/* ========== 文章详情页布局 ========== */
.post-detail-article {
    max-width: 760px;
    width: auto;
    margin: 0 auto;
    padding-top: clamp(5rem, 10vw, 7rem);
    overflow-wrap: break-word;
    text-align: left;
}

/* 强制文章正文左对齐，覆盖 .section 的居中继承，避免标题/列表/引用被居中 */
.post-detail-article,
.post-detail-article * { text-align: left; }
#postContent h1, #postContent h2, #postContent h3, #postContent h4, #postContent h5, #postContent h6,
#postContent p, #postContent li, #postContent blockquote, #postContent td, #postContent th,
#postContent dd, #postContent dt, #postContent figcaption { text-align: left; }

.post-detail-article h1 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
    color: var(--text);
    letter-spacing: 1px;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* 文章内容区域排版 */
#postContent { overflow-wrap: anywhere; word-break: normal; line-break: strict; text-align: left; width: 100%; }
#postContent p { margin: 0.6em 0; line-height: 1.75; text-align: left; }
#postContent h2 { margin: 1.5em 0 0.5em; font-size: 1.3rem; }
#postContent h3 { margin: 1.2em 0 0.4em; font-size: 1.1rem; }
#postContent h4 { margin: 1em 0 0.3em; font-size: 1rem; }
#postContent ul, #postContent ol { margin: 0.5em 0; padding-left: 1.5em; }
#postContent li { margin: 0.3em 0; line-height: 1.7; }
#postContent hr { border: none; border-top: 1px solid rgba(0,229,255,0.15); margin: 1.5em 0; }
#postContent img { max-width: 100%; border-radius: 8px; margin: 1em 0; height: auto; }
#postContent pre { max-width: 100%; overflow-x: auto; }

.post-meta-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-light);
}

.post-recommend-section {
    max-width: 800px;
    margin: 2rem auto 0;
}

/* 文章详情页移动端 */
@media (max-width: 768px) {
    .post-detail-article {
        padding: clamp(4.5rem, 8vw, 5.5rem) var(--space-sm) 0;
    }

    .post-detail-article h1 {
        font-size: 1.3rem;
    }

    .post-meta-bar {
        font-size: 0.78rem;
        gap: 0.5rem;
    }

    .post-recommend-section {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
}

/* 横屏手机优化 */
@media (max-width: 896px) and (orientation: landscape) {
    .nav-links.open {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1rem;
    }

    .nav-links a {
        font-size: 0.95rem;
    }
}

/* 触屏设备 hover 优化 */
@media (hover: none) {
    .post-card:hover {
        transform: none !important;
    }

    .hobby-card:hover {
        transform: none !important;
    }

    .share-btn:hover {
        transform: none !important;
    }

    .page-404 .back-btn:hover {
        transform: none !important;
    }
}

/* ========== 精选推荐卡片（首页） ========== */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

.featured-grid .post-card {
    text-align: center;
}

.featured-grid .post-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.featured-grid .post-card p {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* ========== 留言表单 ========== */
.contact-intro {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.contact-form {
    max-width: 500px;
    margin: 0 auto;
}

.contact-form .form-group {
    margin-bottom: 1rem;
}

.contact-form label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.3rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--primary);
}

.contact-form textarea {
    resize: vertical;
}

.contact-form .submit-btn {
    width: 100%;
    padding: 12px;
}

.contact-form .form-message {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    display: none;
}

/* 蜜罐字段：对真实用户隐藏，对普通屏幕阅读器不可见 */
.honeypot-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ========== 关于页 ========== */
.about-story {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    line-height: 1.8;
    font-size: 1rem;
}

.about-skills-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.about-skills-grid .post-card {
    text-align: center;
}

.about-skills-grid .post-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.about-skills-grid .post-card p {
    font-size: 0.85rem;
}

.about-values-grid {
    max-width: 700px;
    margin: 0 auto;
    justify-content: center;
}

.about-values-text {
    max-width: 700px;
    margin: 2rem auto 0;
    text-align: left;
    line-height: 1.8;
    font-size: 0.95rem;
}

.about-contact-grid {
    grid-template-columns: 1fr 1fr;
    max-width: 600px;
    margin: 0 auto;
    gap: 1.5rem;
}

.about-contact-grid .btn-primary,
.about-contact-grid .btn-secondary {
    text-align: center;
    display: block;
}

.about-email-hint {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.about-email-link {
    color: var(--primary);
    text-decoration: none;
}

/* 关于页联系方式按钮在小屏下垂直堆叠，保持居中 */
@media (max-width: 480px) {
    .about-contact-grid {
        flex-direction: column;
        align-items: stretch;
    }
    .about-contact-grid .btn-primary,
    .about-contact-grid .btn-secondary {
        width: 100%;
    }
}

/* ========== 章节通用辅助类（替代被 CSP 阻止的内联样式） ========== */
.section-centered { text-align: center; }
.section-tight { padding: clamp(1.5rem, 4vw, 3rem) 0; }
.section-soft { padding: clamp(2rem, 6vw, 4rem) 0; }
.section-tighter { padding: clamp(1rem, 3vw, 2rem) 0; }
.section-pb-tight { padding-bottom: clamp(2rem, 6vw, 4rem); }

/* ========== 文章返回按钮 ========== */
.back-to-blog {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    transition: all 0.2s;
    border: 1px solid var(--border);
}

.back-to-blog:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-dim);
}

/* ========== 加载动画 ========== */
.loading-skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius);
    min-height: 120px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.posts-grid .loading-skeleton + .loading-skeleton {
    margin-top: 1rem;
}

/* ========== P1-4/P1-5: 博客搜索+分类筛选 ========== */
.blog-toolbar{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;align-items:center}
.blog-search{flex:1;min-width:200px}
.blog-search-input{width:100%;padding:0.6rem 1rem;border:1px solid var(--border);border-radius:var(--radius,14px);background:var(--bg-card);color:var(--text);font-size:0.9rem;outline:none;transition:border-color 0.3s}
.blog-search-input:focus{border-color:var(--border-active)}
.blog-search-input::placeholder{color:var(--text-muted)}
.blog-categories{display:flex;flex-wrap:wrap;gap:0.5rem}
.cat-btn{padding:0.5rem 0.9rem;min-height:44px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-light);font-size:0.8rem;cursor:pointer;transition:all 0.3s;white-space:nowrap;display:inline-flex;align-items:center}
.cat-btn:hover{border-color:var(--border-active);color:var(--primary)}
.cat-btn.active{background:var(--primary);color:var(--bg);border-color:var(--primary)}

/* P2-5: 爱好卡片链接 */
.hobby-card-link{text-decoration:none;color:var(--text);display:block;transition:transform 0.3s,box-shadow 0.3s}
.hobby-card-link:hover{transform:translateY(-4px) !important;box-shadow:0 8px 24px rgba(0,0,0,0.08)}

/* P3-4: Prism 代码高亮主题适配 */
pre[class*="language-"]{border-radius:var(--radius,14px);margin:1.5rem 0;font-size:0.85rem;line-height:1.6}
code[class*="language-"]{font-family:'Fira Code','Cascadia Code',Consolas,monospace}
:not(pre)>code{background:var(--primary-dim);padding:0.15em 0.4em;border-radius:4px;font-size:0.88em;font-family:'Fira Code',Consolas,monospace}

/* P2-3: 暗/亮模式切换按钮 */
.theme-toggle{cursor:pointer;transition:transform 0.3s}
.theme-toggle:hover{transform:scale(1.15)}

/* ========== P3-2: 文章封面图样式 ========== */
.post-card.with-cover {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.post-card.with-cover .post-cover {
    width: 100%;
    height: 160px;
    overflow: hidden;
    flex-shrink: 0;
}
.post-card.with-cover .post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.post-card.with-cover:hover .post-cover img {
    transform: scale(1.05);
}
.post-card.with-cover .post-body {
    padding: 1.2rem 1.4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.post-card.with-cover .post-body h3 {
    margin-top: 0;
}

/* ========== P3-2: 爱好页配图样式 ========== */
.hobby-card-link .hobby-cover {
    width: 100%;
    height: 120px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    margin: -1.4rem -1.4rem 1rem -1.4rem;
}
.hobby-card-link .hobby-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.hobby-card-link:hover .hobby-cover img {
    opacity: 1;
    transform: scale(1.05);
}

/* 暗/亮模式切换按钮样式 */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--accent, #00e5ff);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}
.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0,229,255,0.4);
}

/* 文章详情页封面横幅 */
.post-cover-hero {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.post-cover-hero img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
}
@media (max-width: 768px) {
    .post-cover-hero { border-radius: 8px; }
    .post-cover-hero img { height: 180px; border-radius: 8px; }
    .post-card.with-cover .post-cover { height: 120px; }
}

/* ========== 页脚升级补充 ========== */
.footer-social { display: none; } /* 旧页脚导航已合并到 footer-columns */
[data-theme-style="nature"] .footer::before,
[data-theme-style="mist"] .footer::before,
[data-theme-style="mint"] .footer::before,
[data-theme-style="lavendar"] .footer::before,
[data-theme-style="minimal"] .footer::before,
[data-theme-style="ink"] .footer::before,
[data-theme-style="breeze"] .footer::before { display:none }
[data-theme-style="futuristic"] .footer-nav a:hover,
[data-theme-style="futuristic"] .footer-links a:hover { letter-spacing:2px }
[data-theme-style="chrono"] .footer-nav a,
[data-theme-style="chrono"] .footer-links a { text-transform:uppercase; letter-spacing:3px; font-size:0.75rem }
[data-theme-style="retro"] .footer-nav a,
[data-theme-style="retro"] .footer-links a { text-transform:uppercase; letter-spacing:2px }
[data-theme-style="gothic"] .footer-nav a,
[data-theme-style="gothic"] .footer-links a { letter-spacing:2px }

/* ========== 骨架屏动画 ========== */
.skeleton-card { pointer-events:none }
.skeleton-cover { width:100%; height:140px; background:linear-gradient(90deg,var(--bg-card) 25%,var(--border) 50%,var(--bg-card) 75%); background-size:200% 100%; animation:skeleton-shimmer 1.5s infinite; border-radius:var(--radius,14px) var(--radius,14px) 0 0 }
.skeleton-line { height:14px; margin:8px 0; background:linear-gradient(90deg,var(--bg-card) 25%,var(--border) 50%,var(--bg-card) 75%); background-size:200% 100%; animation:skeleton-shimmer 1.5s infinite; border-radius:4px }
.skeleton-line.w30{width:30%}.skeleton-line.w40{width:40%}.skeleton-line.w50{width:50%}.skeleton-line.w60{width:60%}.skeleton-line.w70{width:70%}.skeleton-line.w80{width:80%}.skeleton-line.w90{width:90%}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ========== Skip-nav 无障碍跳转链接 ========== */
.skip-nav{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--bg-deep);padding:0.5rem 1.2rem;border-radius:0 0 8px 8px;font-size:0.9rem;z-index:9999;transition:top 0.2s;text-decoration:none;font-weight:600}
.skip-nav:focus{top:0}

/* ========== hobby-tag 可点击 ========== */
.hobby-tag{cursor:pointer;transition:all 0.3s}
.hobby-tag:hover{background:var(--primary);color:var(--bg-deep);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,229,255,0.2)}

/* ========== emoji aria-hidden ========== */
.post-card h3 .emoji-hidden{font-style:normal;speak:none}

/* ============================================================
   新功能样式：AI助手 + 时光胶囊 + 心情签到 + 随机发现 + 通知中心 + 沉浸阅读
   ============================================================ */

/* ========== AI助手对话窗口 ========== */
#ai-chat-bubble{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:var(--primary,#00e5ff);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(0,229,255,0.4);z-index:9998;transition:all 0.3s;border:none;outline:none}
#ai-chat-bubble:hover,#ai-chat-bubble.ai-chat-active{transform:scale(1.1);box-shadow:0 6px 28px rgba(0,229,255,0.6)}
#ai-chat-window{position:fixed;bottom:92px;right:24px;width:360px;max-height:520px;border-radius:16px;background:var(--card-bg,#1a1a2e);border:1px solid var(--border,rgba(255,255,255,0.1));box-shadow:0 8px 40px rgba(0,0,0,0.3);z-index:9997;display:flex;flex-direction:column;transform:translateY(20px) scale(0.95);opacity:0;pointer-events:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
#ai-chat-window.ai-chat-open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.ai-chat-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border,rgba(255,255,255,0.1));font-weight:600;color:var(--text,#e0e0e0)}
.ai-chat-close{background:none;border:none;color:var(--text-muted,#888);font-size:22px;cursor:pointer;padding:0 4px;line-height:1}
.ai-chat-close:hover{color:var(--primary,#00e5ff)}
.ai-chat-messages{flex:1;overflow-y:auto;padding:14px;max-height:340px;scroll-behavior:smooth}
.ai-chat-msg{display:flex;gap:10px;margin-bottom:14px;align-items:flex-start}
.ai-chat-msg.ai-chat-user{flex-direction:row-reverse}
.ai-chat-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary,#00e5ff);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.ai-chat-avatar.user{background:var(--accent,#ff6b6b)}
.ai-chat-bubble{max-width:75%;padding:10px 14px;border-radius:12px;background:var(--bg-deep,#0d0d1a);color:var(--text,#e0e0e0);font-size:14px;line-height:1.6;word-break:break-word}
.ai-chat-msg.ai-chat-user .ai-chat-bubble{background:var(--primary,#00e5ff);color:#000;border-radius:12px 12px 4px 12px}
.ai-chat-msg.ai-chat-bot .ai-chat-bubble{border-radius:12px 12px 12px 4px}
.ai-typing-bubble span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--text-muted,#888);margin:0 2px;animation:aiTyping 1.4s infinite}
.ai-typing-bubble span:nth-child(2){animation-delay:0.2s}
.ai-typing-bubble span:nth-child(3){animation-delay:0.4s}
@keyframes aiTyping{0%,60%,100%{transform:translateY(0);opacity:0.4}30%{transform:translateY(-6px);opacity:1}}
.ai-chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border,rgba(255,255,255,0.1))}
.ai-chat-input input{flex:1;background:var(--bg-deep,#0d0d1a);border:1px solid var(--border,rgba(255,255,255,0.15));border-radius:10px;padding:8px 14px;color:var(--text,#e0e0e0);font-size:14px;outline:none;transition:border 0.2s}
.ai-chat-input input:focus{border-color:var(--primary,#00e5ff)}
.ai-chat-input button{background:var(--primary,#00e5ff);border:none;border-radius:10px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#000;transition:all 0.2s}
.ai-chat-input button:hover{transform:scale(1.05)}
@media(max-width:480px){#ai-chat-window{width:calc(100vw - 24px);right:12px;bottom:84px;max-height:60vh}}

/* ========== 时光胶囊 ========== */
.capsule-widget{margin:2rem 0;padding:2rem;border-radius:16px;background:var(--card-bg,#1a1a2e);border:1px solid var(--border,rgba(255,255,255,0.1))}
.capsule-title{font-size:1.4rem;color:var(--primary,#00e5ff);margin-bottom:0.5rem}
.capsule-desc{color:var(--text-muted,#888);margin-bottom:1.5rem;font-size:0.95rem}
.capsule-form input[type="text"],.capsule-form textarea{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,0.15));background:var(--bg-deep,#0d0d1a);color:var(--text,#e0e0e0);margin-bottom:10px;font-size:14px;outline:none;resize:vertical;font-family:inherit}
.capsule-form input:focus,.capsule-form textarea:focus{border-color:var(--primary,#00e5ff)}
.capsule-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.capsule-row input[type="date"]{padding:8px 12px;border-radius:8px;border:1px solid var(--border,rgba(255,255,255,0.15));background:var(--bg-deep,#0d0d1a);color:var(--text,#e0e0e0);font-size:14px}
.capsule-public{display:flex;align-items:center;gap:6px;color:var(--text-muted,#888);font-size:0.9rem;cursor:pointer}
.capsule-public input[type="checkbox"]{accent-color:var(--primary,#00e5ff)}
.capsule-submit{padding:10px 24px;border-radius:10px;background:var(--primary,#00e5ff);color:#000;border:none;font-weight:600;cursor:pointer;transition:all 0.3s;font-size:14px}
.capsule-submit:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,229,255,0.3)}
.capsule-submit:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.capsule-result{margin-top:16px;padding:16px;border-radius:12px;background:var(--bg-deep,#0d0d1a)}
.capsule-success{color:var(--primary,#00e5ff);font-weight:600;margin-bottom:8px}
.capsule-key{color:var(--text-muted,#888);font-size:0.9rem;margin-bottom:12px}
.capsule-key strong{color:var(--accent,#ff6b6b);font-family:monospace;font-size:1.05rem}
.capsule-check{display:flex;gap:8px}
.capsule-check input{flex:1;padding:8px 12px;border-radius:8px;border:1px solid var(--border,rgba(255,255,255,0.15));background:var(--bg-deep,#0d0d1a);color:var(--text,#e0e0e0);font-size:14px}
.capsule-wall{margin-top:20px}
.capsule-wall-title{font-size:1.1rem;color:var(--text,#e0e0e0);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border,rgba(255,255,255,0.1))}
.capsule-item{padding:12px 16px;border-radius:10px;background:var(--bg-deep,#0d0d1a);margin-bottom:8px;border-left:3px solid var(--primary,#00e5ff)}
.capsule-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.capsule-item-author{font-weight:600;color:var(--primary,#00e5ff);font-size:0.9rem}
.capsule-item-date{color:var(--text-muted,#888);font-size:0.8rem}
.capsule-item-content{color:var(--text,#e0e0e0);font-size:0.9rem;line-height:1.6}
.capsule-opened{color:var(--primary,#00e5ff);margin-top:8px;font-style:italic}
.capsule-sealed{color:var(--text-muted,#888);font-style:italic}
.capsule-can-open{color:var(--accent,#ff6b6b);font-weight:600}
.capsule-error{color:var(--accent,#ff6b6b)}

/* ========== 心情签到 ========== */
.mood-widget{margin:2rem 0;padding:2rem;border-radius:16px;background:var(--card-bg,#1a1a2e);border:1px solid var(--border,rgba(255,255,255,0.1))}
.mood-title{font-size:1.4rem;color:var(--primary,#00e5ff);margin-bottom:1rem}
.mood-emojis{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.mood-emoji-btn{width:48px;height:48px;border-radius:12px;border:2px solid var(--border,rgba(255,255,255,0.15));background:var(--bg-deep,#0d0d1a);font-size:24px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center}
.mood-emoji-btn:hover{transform:scale(1.15);border-color:var(--primary,#00e5ff)}
.mood-emoji-btn.mood-selected{border-color:var(--primary,#00e5ff);background:rgba(0,229,255,0.15);transform:scale(1.15);box-shadow:0 0 16px rgba(0,229,255,0.3)}
#mood-note{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,0.15));background:var(--bg-deep,#0d0d1a);color:var(--text,#e0e0e0);margin-bottom:10px;font-size:14px;outline:none;font-family:inherit}
#mood-note:focus{border-color:var(--primary,#00e5ff)}
.mood-submit{padding:10px 24px;border-radius:10px;background:var(--primary,#00e5ff);color:#000;border:none;font-weight:600;cursor:pointer;transition:all 0.3s;font-size:14px}
.mood-submit:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,229,255,0.3)}
.mood-submit:disabled{opacity:0.5;cursor:not-allowed}
.mood-success{color:var(--primary,#00e5ff);font-weight:600;padding:8px 0;font-size:1.1rem}
.mood-already{color:var(--text-muted,#888);padding:8px 0}
.mood-error{color:var(--accent,#ff6b6b);padding:8px 0}
.mood-wall{margin-top:16px}
.mood-stats{margin-bottom:16px}
.mood-stat-item{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mood-stat-emoji{font-size:20px;width:28px;text-align:center}
.mood-stat-bar{flex:1;height:8px;border-radius:4px;background:var(--bg-deep,#0d0d1a);overflow:hidden}
.mood-stat-fill{height:100%;border-radius:4px;background:var(--primary,#00e5ff);transition:width 0.5s}
.mood-stat-count{font-size:12px;color:var(--text-muted,#888);width:24px;text-align:right}
.mood-recent{display:flex;flex-direction:column;gap:6px}
.mood-recent-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:var(--bg-deep,#0d0d1a);font-size:0.85rem}
.mood-recent-emoji{font-size:18px}
.mood-recent-label{color:var(--primary,#00e5ff);font-weight:500;min-width:32px}
.mood-recent-note{color:var(--text,#e0e0e0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mood-recent-time{color:var(--text-muted,#888);font-size:0.75rem}
.mood-empty{color:var(--text-muted,#888);text-align:center;padding:16px;font-style:italic}

/* ========== 随机发现 ========== */
.discover-widget{margin:2rem 0;text-align:center}
.discover-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:12px;background:linear-gradient(135deg,var(--primary,#00e5ff),var(--accent,#ff6b6b));color:#000;border:none;font-weight:700;font-size:15px;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 16px rgba(0,229,255,0.2)}
.discover-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 24px rgba(0,229,255,0.4)}
.discover-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.discover-spinning svg{animation:discoverSpin 1s linear infinite}
@keyframes discoverSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.discover-result{margin-top:20px;opacity:0;transform:translateY(10px);transition:all 0.4s}
.discover-result.discover-show{opacity:1;transform:translateY(0)}
.discover-card{max-width:480px;margin:0 auto;padding:24px;border-radius:16px;background:var(--card-bg,#1a1a2e);border:1px solid var(--border,rgba(255,255,255,0.1));text-align:left}
.discover-label{font-size:0.8rem;text-transform:uppercase;letter-spacing:2px;color:var(--primary,#00e5ff);margin-bottom:10px;font-weight:600}
.discover-post h4{margin:0 0 8px;font-size:1.1rem}
.discover-post h4 a{color:var(--primary,#00e5ff);text-decoration:none}
.discover-post h4 a:hover{text-decoration:underline}
.discover-post p{color:var(--text-muted,#888);margin:0;font-size:0.9rem}
.discover-quote blockquote{margin:0 0 8px;font-size:1.05rem;line-height:1.7;color:var(--text,#e0e0e0);font-style:italic}
.discover-quote cite{color:var(--text-muted,#888);font-size:0.9rem;font-style:normal}
.discover-fact p{color:var(--text,#e0e0e0);line-height:1.7;margin:0;font-size:0.95rem}

/* ========== 通知中心 ========== */
#notification-bell{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--text,#e0e0e0);transition:color 0.2s;border-radius:999px;flex-shrink:0;z-index:1002}
#notification-bell:hover{color:var(--primary,#00e5ff)}
@media(max-width:768px){.nav-inner>#notification-bell{order:2}}
.notification-badge{position:absolute;top:-2px;right:-4px;background:var(--accent,#ff6b6b);color:#fff;font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}
#notification-panel{position:fixed;top:60px;right:16px;width:320px;max-height:400px;border-radius:12px;background:var(--card-bg,#1a1a2e);border:1px solid var(--border,rgba(255,255,255,0.1));box-shadow:0 8px 32px rgba(0,0,0,0.3);z-index:9990;transform:translateY(-10px);opacity:0;pointer-events:none;transition:all 0.25s;overflow:hidden}
#notification-panel.notification-panel-open{transform:translateY(0);opacity:1;pointer-events:auto}
.notification-panel-header{padding:14px 16px;border-bottom:1px solid var(--border,rgba(255,255,255,0.1));font-weight:600;color:var(--text,#e0e0e0);font-size:15px}
.notification-panel-body{max-height:340px;overflow-y:auto;padding:8px}
.notification-empty{padding:24px;text-align:center;color:var(--text-muted,#888);font-style:italic}
.notification-item{display:flex;gap:10px;padding:12px;border-radius:8px;margin-bottom:4px;transition:background 0.2s;cursor:default}
.notification-item:hover{background:var(--bg-deep,#0d0d1a)}
.notification-item-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px}
.notification-info .notification-item-dot{background:var(--primary,#00e5ff)}
.notification-update .notification-item-dot{background:#4caf50}
.notification-alert .notification-item-dot{background:var(--accent,#ff6b6b)}
.notification-item-content{flex:1;min-width:0}
.notification-item-content strong{display:block;font-size:0.9rem;color:var(--text,#e0e0e0);margin-bottom:2px}
.notification-item-content p{margin:0;font-size:0.82rem;color:var(--text-muted,#888);line-height:1.4}
.notification-item-time{font-size:0.75rem;color:var(--text-muted,#666)}
@media(max-width:480px){#notification-panel{width:calc(100vw - 24px);right:12px}}

/* ========== 沉浸式阅读 ========== */
.immersive-btn{position:fixed;top:50%;right:12px;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--card-bg,#1a1a2e);border:1px solid var(--border,rgba(255,255,255,0.15));color:var(--text,#e0e0e0);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:999;transition:all 0.3s}
.immersive-btn:hover,.immersive-btn.immersive-active{background:var(--primary,#00e5ff);color:#000;box-shadow:0 4px 16px rgba(0,229,255,0.3)}
.immersive-mode .post-content{max-width:720px;margin:0 auto;font-size:1.1rem;line-height:2}
.immersive-mode .post-card,.immersive-mode #sidebar,.immersive-mode .post-sidebar{display:none !important}
.immersive-mode{background:var(--bg-deep,#0d0d1a) !important}

/* ========== 随机传送门 ========== */
.portal-widget{margin:2rem 0;padding:2rem;border-radius:20px;background:var(--card-bg,#1a1a2e);border:1px solid var(--border,rgba(255,255,255,0.1));position:relative;overflow:hidden}
.portal-widget::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(0,229,255,0.03),transparent,rgba(255,107,107,0.03),transparent);animation:portalBgSpin 12s linear infinite;pointer-events:none}
@keyframes portalBgSpin{to{transform:rotate(360deg)}}
.portal-header{text-align:center;position:relative}
.portal-title{font-size:1.5rem;color:var(--primary,#00e5ff);margin-bottom:0.3rem;position:relative}
.portal-desc{color:var(--text-muted,#888);font-size:0.92rem;margin-bottom:1.2rem;position:relative}
.portal-controls{margin-bottom:1.2rem;position:relative}
.portal-cat-btns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.portal-cat-btn{padding:8px 16px;min-height:44px;border-radius:20px;border:1px solid var(--border,rgba(255,255,255,0.15));background:var(--bg-deep,#0d0d1a);color:var(--text-muted,#888);font-size:0.82rem;cursor:pointer;transition:all 0.25s;position:relative;display:inline-flex;align-items:center}
.portal-cat-btn:hover{border-color:var(--primary,#00e5ff);color:var(--primary,#00e5ff)}
.portal-cat-btn.active{background:var(--primary,#00e5ff);color:#000;border-color:var(--primary,#00e5ff);font-weight:600;box-shadow:0 2px 12px rgba(0,229,255,0.3)}
.portal-action{text-align:center;margin:1.5rem 0;position:relative}
.portal-open-btn{position:relative;padding:16px 40px;border-radius:50px;border:2px solid var(--primary,#00e5ff);background:transparent;color:var(--primary,#00e5ff);font-size:1rem;font-weight:700;cursor:pointer;transition:all 0.3s;display:inline-flex;align-items:center;gap:10px;overflow:hidden}
.portal-open-btn:hover{background:var(--primary,#00e5ff);color:#000;transform:scale(1.05);box-shadow:0 0 30px rgba(0,229,255,0.4)}
.portal-open-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.portal-open-btn:disabled .portal-icon svg{animation:portalSpin 1.5s linear infinite}
.portal-opening .portal-btn-text{animation:portalPulse 0.6s ease-in-out infinite alternate}
.portal-glow{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:radial-gradient(circle,rgba(0,229,255,0.3),transparent);transform:translate(-50%,-50%);transition:all 0.5s}
.portal-open-btn:hover .portal-glow{width:200px;height:200px}
@keyframes portalSpin{to{transform:rotate(360deg)}}
@keyframes portalPulse{from{opacity:0.5}to{opacity:1}}

/* 传送门旋涡动画 */
.portal-result{position:relative;min-height:0;transition:all 0.4s}
.portal-animating{min-height:200px;display:flex;align-items:center;justify-content:center}
.portal-vortex{position:relative;width:180px;height:180px;display:flex;align-items:center;justify-content:center}
.portal-ring{position:absolute;border-radius:50%;border:2px solid;animation:portalRingSpin 2s linear infinite}
.portal-ring.r1{width:180px;height:180px;border-color:rgba(0,229,255,0.4);animation-duration:3s}
.portal-ring.r2{width:120px;height:120px;border-color:rgba(0,229,255,0.6);animation-duration:2s;animation-direction:reverse}
.portal-ring.r3{width:60px;height:60px;border-color:rgba(255,107,107,0.5);animation-duration:1.5s}
.portal-center{position:relative;color:var(--primary,#00e5ff);font-size:0.85rem;font-weight:600;z-index:1}
@keyframes portalRingSpin{to{transform:rotate(360deg)}}

/* 传送门结果卡片 */
.portal-show{min-height:auto}
.portal-card{position:relative;padding:24px;border-radius:16px;background:var(--bg-deep,#0d0d1a);border:1px solid var(--primary,rgba(0,229,255,0.3));overflow:hidden;animation:portalCardIn 0.5s ease-out}
.portal-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary,#00e5ff),var(--accent,#ff6b6b),var(--primary,#00e5ff));background-size:200% 100%;animation:portalShimmer 3s linear infinite}
@keyframes portalCardIn{from{opacity:0;transform:translateY(20px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes portalShimmer{to{background-position:200% 0}}
.portal-card-glow{position:absolute;top:-20px;right:-20px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(0,229,255,0.15),transparent);pointer-events:none}
.portal-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.portal-card-cat{font-size:0.75rem;padding:3px 10px;border-radius:12px;background:rgba(0,229,255,0.15);color:var(--primary,#00e5ff);font-weight:600;letter-spacing:0.5px}
.portal-lang{font-size:0.7rem;padding:2px 8px;border-radius:8px;font-weight:600}
.portal-lang.zh{background:rgba(76,175,80,0.15);color:#4caf50}
.portal-lang.en{background:rgba(255,152,0,0.15);color:#ff9800}
.portal-card-name{font-size:1.2rem;color:var(--text,#e0e0e0);margin:0 0 8px;font-weight:700}
.portal-card-desc{color:var(--text-muted,#888);font-size:0.9rem;line-height:1.6;margin:0 0 16px}
.portal-card-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.portal-enter-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:10px;background:var(--primary,#00e5ff);color:#000;font-weight:700;font-size:0.9rem;text-decoration:none;transition:all 0.3s}
.portal-enter-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,229,255,0.4)}
.portal-save-btn{padding:8px 18px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,0.15));background:transparent;color:var(--text-muted,#888);font-size:0.85rem;cursor:pointer;transition:all 0.2s}
.portal-save-btn:hover{border-color:var(--primary,#00e5ff);color:var(--primary,#00e5ff)}
.portal-newtab-btn{padding:8px 18px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,0.15));background:transparent;color:var(--text-muted,#888);font-size:0.85rem;cursor:pointer;transition:all 0.2s;text-decoration:none;display:inline-flex;align-items:center}
.portal-newtab-btn:hover{border-color:var(--primary,#00e5ff);color:var(--primary,#00e5ff)}
.portal-save-btn:disabled{color:var(--primary,#00e5ff);border-color:var(--primary,#00e5ff)}
.portal-error{text-align:center;padding:24px;color:var(--accent,#ff6b6b)}

/* 传送记录 */
.portal-history{margin-top:16px;position:relative}
.portal-history-title{font-size:0.9rem;color:var(--text-muted,#888);margin-bottom:8px;font-weight:600}
.portal-history-list{display:flex;flex-wrap:wrap;gap:6px}
.portal-history-item{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:8px;background:var(--bg-deep,#0d0d1a);color:var(--text-muted,#888);font-size:0.8rem;text-decoration:none;transition:all 0.2s;border:1px solid transparent}
.portal-history-item:hover{color:var(--primary,#00e5ff);border-color:var(--primary,#00e5ff)}
.portal-history-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portal-history-arrow{font-size:0.7rem;opacity:0.5}

@media(max-width:600px){
    .portal-widget{padding:1.2rem}
    .portal-cat-btns{gap:4px}
    .portal-cat-btn{padding:4px 10px;font-size:0.75rem}
    .portal-open-btn{padding:12px 28px;font-size:0.9rem}
    .portal-card-actions{flex-direction:column}
    .portal-enter-btn,.portal-save-btn{width:100%;justify-content:center}
}

/* ============================================
   360浏览器 / 旧内核兼容性降级
   问题：var()、clamp()、gap、grid 在 IE 内核/旧 Chromium 下不生效
   策略：用 @supports not (color: var(--test)) 包裹，只在 var() 不支持时才降级
   ============================================ */

@supports not (color: var(--test)) {

/* body 基础色 fallback——var() 不支持时文字变黑，暗背景上完全不可见 */
body {
    font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
    background-color: #06060e;
    color: #e2e8f0;
}
a { color: #00e5ff; }
a:hover { color: #f0abfc; }

/* 文章内容区域——AI速览格式修复核心 */
#postContent {
    font-size: 0.95rem;
    color: #e2e8f0;
    line-height: 1.75;
}
#postContent h1,
#postContent h2,
#postContent h3,
#postContent h4,
#postContent h5,
#postContent h6 {
    color: #e2e8f0;
    line-height: 1.4;
}
#postContent h1 { font-size: 1.8rem; }
#postContent h2 { font-size: 1.5rem; border-bottom: 1px solid rgba(0,229,255,0.15); padding-bottom: 0.3em; }
#postContent h3 { font-size: 1.25rem; }
#postContent p {
    margin: 0.6em 0;
    line-height: 1.75;
    color: #e2e8f0;
    text-align: left;
}
/* em/斜体点评——AI速览大量使用 💬 *斜体* 模式 */
#postContent em {
    color: #a855f7;
    font-style: italic;
}
#postContent i {
    color: #a855f7;
}
/* 链接在文章中 */
#postContent a {
    color: #00e5ff;
    text-decoration: underline;
}
#postContent a:hover {
    color: #f0abfc;
}
/* 引用块 */
#postContent blockquote {
    border-left: 4px solid #00e5ff;
    background: rgba(0,229,255,0.06);
    color: #7a8ba8;
    padding: 0.8em 1.2em;
    margin: 1em 0;
    border-radius: 0 8px 8px 0;
}
#postContent blockquote p {
    color: #7a8ba8;
}
/* 代码 */
#postContent code {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.9em;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    background: rgba(0,229,255,0.1);
    color: #00e5ff;
}
#postContent pre {
    background: #03030a;
    border: 1px solid rgba(0,229,255,0.08);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1em 0;
}
#postContent pre code {
    padding: 0;
    background: none;
    color: #7a8ba8;
}
/* 分隔线 */
#postContent hr {
    border: none;
    height: 1px;
    background: rgba(0,229,255,0.2);
    margin: 2em 0;
}
/* 列表 */
#postContent ul,
#postContent ol {
    margin: 0.8em 0;
    padding-left: 2em;
    color: #e2e8f0;
}
#postContent li {
    margin: 0.3em 0;
    line-height: 1.7;
    color: #e2e8f0;
}
/* 图片 */
#postContent img {
    max-width: 100%;
    border-radius: 8px;
    margin: 0.5em 0;
}
/* 表格 */
#postContent table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.95rem;
}
#postContent thead {
    background: rgba(0,229,255,0.1);
}
#postContent th,
#postContent td {
    border: 1px solid rgba(0,229,255,0.15);
    padding: 0.6em 1em;
    text-align: left;
}
#postContent th {
    font-weight: 600;
    color: #00e5ff;
}
/* strong 标签 */
#postContent strong {
    color: #fbbf24;
    font-weight: 700;
}

/* 文章元信息栏 fallback */
.post-meta-bar {
    color: #7a8ba8;
    font-size: 0.85rem;
}

/* 卡片背景 fallback */
.post-card,
.article-card,
.card {
    background: rgba(12,12,28,0.85);
    color: #e2e8f0;
}

/* 页面标题 fallback */
.hero-title,
.page-title {
    font-size: 2rem;
    color: #e2e8f0;
}

/* 导航栏 fallback */
.nav-link,
nav a {
    color: #e2e8f0;
}
.nav-link:hover,
nav a:hover {
    color: #00e5ff;
}

/* 按钮类 fallback */
.btn-primary,
button.primary {
    background: #00e5ff;
    color: #06060e;
}

/* 标签/分类 fallback */
.tag,
.category-tag {
    color: #00e5ff;
    border: 1px solid rgba(0,229,255,0.3);
    background: rgba(0,229,255,0.08);
}

/* 侧边栏 fallback */
.sidebar,
aside {
    color: #e2e8f0;
    background: rgba(12,12,28,0.85);
}

/* 页脚 fallback */
footer {
    color: #7a8ba8;
    background: #03030a;
}
footer a {
    color: #00e5ff;
}

/* light 主题 fallback */
[data-theme="light"] body {
    background-color: #f0eee8;
    color: #1a1a2e;
}
[data-theme="light"] #postContent,
[data-theme="light"] #postContent p,
[data-theme="light"] #postContent li {
    color: #1a1a2e;
}
[data-theme="light"] #postContent h1,
[data-theme="light"] #postContent h2,
[data-theme="light"] #postContent h3,
[data-theme="light"] #postContent h4 {
    color: #1a1a2e;
}
[data-theme="light"] #postContent em {
    color: #7c3aed;
}
[data-theme="light"] #postContent a {
    color: #0891b2;
}
[data-theme="light"] #postContent blockquote {
    color: #4a5568;
    border-left-color: #0891b2;
    background: rgba(8,145,178,0.06);
}
[data-theme="light"] #postContent blockquote p {
    color: #4a5568;
}
[data-theme="light"] #postContent code {
    color: #0891b2;
    background: rgba(8,145,178,0.1);
}
[data-theme="light"] #postContent strong {
    color: #b45309;
}
[data-theme="light"] .post-card,
[data-theme="light"] .article-card,
[data-theme="light"] .card {
    background: rgba(255,255,255,0.9);
    color: #1a1a2e;
}

} /* end @supports not (color: var(--test)) */

/* gap 降级——360不支持 gap 时用 margin 替代 */
@supports not (gap: 1rem) {
    .post-meta-bar > * { margin-right: 1rem; }
    .portal-cat-btns > * { margin-right: 6px; margin-bottom: 6px; }
    .mood-stat-item { margin-right: 8px; }
    .mood-recent-item { margin-right: 8px; }
    .notification-item > * { margin-right: 10px; }
}

/* display:grid 降级 */
@supports not (display: grid) {
    .footer-grid,
    .grid-layout {
        display: flex;
        flex-wrap: wrap;
    }
    .footer-grid > *,
    .grid-layout > * {
        flex: 1 1 280px;
        margin-right: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

/* ========== 交互增强：键盘焦点可见性 ========== */
:focus-visible {
    outline: 2px solid var(--primary, #00e5ff);
    outline-offset: 2px;
    border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
.cat-btn:focus-visible,
.share-btn:focus-visible,
.menu-toggle:focus-visible {
    outline: 2px solid var(--primary, #00e5ff);
    outline-offset: 2px;
}

/* ========== 面包屑导航 ========== */
.breadcrumb {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0.4rem 0 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.breadcrumb a { color: var(--primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

/* ========== 点赞按钮 ========== */
.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border, rgba(125,125,125,0.35));
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.like-btn:hover { transform: scale(1.05); }
.like-btn:active { transform: scale(0.96); }
.like-btn .like-icon { transition: transform 0.2s ease; display: inline-block; }
.like-btn .like-count { font-variant-numeric: tabular-nums; min-width: 1ch; text-align: center; }
.like-btn.liked {
    color: #e91e63;
    border-color: #e91e63;
    background: rgba(233, 30, 99, 0.08);
}
.like-btn.liked .like-icon { transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
    .like-btn { transition: none; }
    .like-btn .like-icon { transition: none; }
}

/* ========== 备案信息（ICP + 公安联网备案）图标 ========== */
.beian-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
}
.beian-link:hover { text-decoration: underline; }
.beian-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    flex: 0 0 auto;
    border: 0;
    margin: 0;
}
.beian-sep {
    margin: 0 0.5rem;
    opacity: 0.5;
}

/* ===== visual-enhancements.css ===== */
/**
 * visual-enhancements.css — 超级视觉交互增强层
 * 绰瑞超创 · 2026
 * 配合 visual-engine.js 使用
 */

/* ===== 自定义光标光环 ===== */
.cursor-aura {
  position: fixed;
  width: 28px; height: 28px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s, border-color 0.25s, opacity 0.25s;
  opacity: 0;
  mix-blend-mode: screen;
}
.cursor-aura.active { opacity: 0.6; }
.cursor-aura.hover {
  width: 48px; height: 48px;
  border-color: var(--accent);
  opacity: 0.8;
}
.cursor-dot {
  position: fixed;
  width: 6px; height: 6px;
  background: var(--primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s;
  box-shadow: 0 0 8px var(--primary);
}
.cursor-dot.active { opacity: 1; }
@media (hover: none), (max-width: 768px) {
  .cursor-aura, .cursor-dot { display: none !important; }
}

/* ===== 粒子画布 ===== */
#particleCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
  contain: strict; /* 性能：隔离布局与绘制 */
}

/* ===== 滚动渐入动画 ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal.reveal-left { transform: translateX(-40px); }
.reveal.reveal-right { transform: translateX(40px); }
.reveal.reveal-left.revealed,
.reveal.reveal-right.revealed { transform: translateX(0); }
.reveal.reveal-scale { transform: scale(0.85); }
.reveal.reveal-scale.revealed { transform: scale(1); }
.reveal.reveal-blur { filter: blur(12px); }
.reveal.reveal-blur.revealed { filter: blur(0); }

/* 交错延迟 */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }
.reveal[data-delay="6"] { transition-delay: 0.48s; }

/* ===== 3D 倾斜卡片 ===== */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.3s;
  will-change: transform;
}
.tilt-card .tilt-inner {
  transform: translateZ(30px);
  transform-style: preserve-3d;
}
.tilt-card .tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255,255,255,0.15) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 2;
}
.tilt-card:hover .tilt-shine { opacity: 1; }
@media (hover: none) { .tilt-card { transform: none !important; } }

/* ===== 磁性按钮 ===== */
.magnetic-btn {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* ===== 动画计数器 ===== */
.counter {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ===== 渐变光球（浮动装饰） ===== */
.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  contain: paint; /* 性能：隔离绘制 */
}
.gradient-orb.orb-1 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--primary), transparent 70%);
  top: 10%; left: -5%;
  animation: orbFloat1 18s ease-in-out infinite;
}
.gradient-orb.orb-2 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, var(--secondary), transparent 70%);
  bottom: 15%; right: -3%;
  animation: orbFloat2 22s ease-in-out infinite;
}
.gradient-orb.orb-3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  top: 50%; right: 20%;
  animation: orbFloat3 16s ease-in-out infinite;
  opacity: 0.25;
}
@keyframes orbFloat1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(60px,-40px) scale(1.15); }
  66% { transform: translate(-30px,50px) scale(0.9); }
}
@keyframes orbFloat2 {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(-50px,30px) scale(1.2); }
  66% { transform: translate(40px,-50px) scale(0.85); }
}
@keyframes orbFloat3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-80px,-60px) scale(1.3); }
}

/* ===== 打字机光标 ===== */
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--primary);
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: blink 0.8s step-end infinite;
  box-shadow: 0 0 8px var(--primary);
}
@keyframes blink {
  0%,50% { opacity: 1; }
  51%,100% { opacity: 0; }
}

/* ===== 增强卡片玻璃态 ===== */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0.5;
}

/* ===== 涟漪效果 ===== */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: rippleAnim 0.6s ease-out;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ===== 页面渐入 ===== */
.page-fade-in {
  animation: pageFadeIn 0.5s ease-out;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== 浮动动画 ===== */
.float-anim {
  animation: floatY 4s ease-in-out infinite;
}
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ===== 文字渐变流动 ===== */
.text-gradient-flow {
  background: linear-gradient(135deg, var(--primary), var(--accent), var(--secondary), var(--primary));
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textGradientFlow 6s ease infinite;
}
@keyframes textGradientFlow {
  0% { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* ===== 导航栏滑入指示器 ===== */
.nav-slide-indicator {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 10;
}

/* ===== 滚动进度条（顶部） ===== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary));
  z-index: 9997;
  transition: transform 0.1s linear;
  box-shadow: 0 0 10px var(--primary);
}

/* ===== 卡片悬浮光晕 ===== */
.post-card, .t-tutorial-card, .t-cat-card {
  position: relative;
}
.post-card::after, .t-tutorial-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(
    circle at var(--card-mx, 50%) var(--card-my, 50%),
    rgba(0,229,255,0.08) 0%,
    transparent 50%
  );
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 0;
}
.post-card:hover::after, .t-tutorial-card:hover::after {
  opacity: 1;
}

/* ===== 无障碍：减少动画 ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  #particleCanvas, .cursor-aura, .cursor-dot { display: none !important; }
}