/* ================ 主题变量（日间默认 / 夜间由 body.dark 覆盖） ================ */
:root{
  --gui-bg:#f5f6fb;          /* 页面底色（浅） */
  --content-hi:#ffffff;      /* 内容区亮底 */
  --content-lo:#eef0f8;      /* 内容区暗底 */
  --card-bg:#ffffff;
  --card-text:#2f3550;
  --card-text-i:#ffffff;
  --text-main:#333a5c;
  --text-soft:#6b7290;
  --muted:#a3a9c3;
  --nav-bg:rgba(255,255,255,.78);
  --nav-border:rgba(51,58,92,.1);
  --nav-text:#333a5c;
  --wave-1:rgba(253,253,253,.7);
  --wave-2:rgba(253,253,253,.5);
  --wave-3:rgba(253,253,253,.3);
  --wave-4:#fdfdfd;
  --card-shadow:0 .5rem 1.6rem rgba(51,58,92,.08);

  --c1:#ffffff; --c2:#eef0f8; --c3:#e2e6f4;
  --accent:#f782c2; --accent2:#ff8fae;
  --line:#eef0f8;

  /* 加载层底色（供 JS 无关的纯样式使用） */
  --loading-bg:#f5f6fb;
}
body.dark{
  --gui-bg:#0f1222;
  --content-hi:#181b30;
  --content-lo:#12152a;
  --card-bg:#232946;
  --card-text:#e6e8f7;
  --card-text-i:#ffffff;
  --text-main:#dfe3f2;
  --text-soft:#aab0cc;
  --muted:#7c83a5;
  --nav-bg:rgba(18,21,42,.78);
  --nav-border:rgba(255,255,255,.08);
  --nav-text:#e6e8f7;
  --wave-1:rgba(24,27,48,.7);
  --wave-2:rgba(24,27,48,.5);
  --wave-3:rgba(24,27,48,.3);
  --wave-4:#181b30;
  --card-shadow:0 .5rem 1.6rem rgba(0,0,0,.4);

  --c1:#20253f; --c2:#1a1e36; --c3:#141829;
  --accent:#f98ec4; --accent2:#ff9ac0;
  --line:#2c3350;

  --loading-bg:#0f1222;
}

/* 平滑切换动画：只作用于需要换色的元素，避免干扰 keyframes 动画 */
html{scroll-behavior:smooth;}
body,
#nav, #themeToggle, main, footer, #contact,
.segments>.item, .segments .info h3, .segments .info .excerpt, .segments .info .meta,
.post-card, .post-title, .post-excerpt, .post-meta,
.block-title h2, .cat-btn, .meta-item, .meta-item .value,
.about-info h3, .about-info .bio, .avatar,
.modal-content, .modal-lead, .modal-tpl, .modal-note{
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  background:var(--gui-bg); color:var(--text-main); line-height:1.7; overflow-x:hidden;
}
a{text-decoration:none;color:inherit;transition:.3s;}
img{max-width:100%;display:block;}
ul{list-style:none;}
button{cursor:pointer;font-family:inherit;}

/* ================ 猫咪加载动画 ================ */
#loading{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;
  background-color:var(--loading-bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease,visibility .6s ease;
}
#loading .loading-title{position:absolute;top:22%;left:0;right:0;text-align:center;color:#aaa;letter-spacing:4px;font-size:.9rem;text-transform:uppercase;}
#loading.gone{opacity:0;visibility:hidden;pointer-events:none;}
.cat{position:relative;display:block;width:15em;height:15em;font-size:12px;margin:auto;animation:loading-cat 2.74s linear infinite;}
.cat *{box-sizing:content-box;}
.cat .head,.cat .foot,.cat .body,.cat .paw{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;border-radius:50%;width:15em;height:15em;}
.cat .body{background-image:radial-gradient(transparent 0%,transparent 35%,#383c4b 35%,#383c4b 39%,#eda65d 39%,#eda65d 46%,#f2c089 46%,#f2c089 60%,#eda65d 60%,#eda65d 67%,#383c4b 67%,#383c4b 100%);}
.cat .head:before,.cat .foot:before{background-image:radial-gradient(transparent 0%,transparent 35%,#383c4b 35%,#383c4b 39%,#eda65d 39%,#eda65d 67%,#383c4b 67%,#383c4b 100%);}
.cat .head:before{content:'';width:100%;height:100%;position:absolute;border-radius:50%;clip-path:polygon(100% 20%,50% 50%,70% -10%);-webkit-clip-path:polygon(100% 20%,50% 50%,70% -10%);}
.cat .head:after{content:'';width:4.125em;height:2.5em;position:absolute;top:.8125em;right:3.9375em;background-image:linear-gradient(var(--loading-bg) 65%,transparent 65%),radial-gradient(var(--loading-bg) 51%,#383c4b 55%,#383c4b 68%,transparent 70%);transform:rotate(-66deg);}
.cat .head .face{
  width:5em;height:3.75em;left:9.0625em;top:1.8125em;position:absolute;transform:rotate(-47deg);
  background:radial-gradient(circle,#f2c089 0%,#f2c089 23%,transparent 23%) -0.1875em 1.0625em no-repeat,
    radial-gradient(circle,#383c4b 0%,#383c4b 6%,transparent 6%) 0.75em -0.75em no-repeat,
    radial-gradient(circle,#383c4b 0%,#383c4b 6%,transparent 6%) -0.75em -0.75em no-repeat,
    radial-gradient(#eda65d 0%,#eda65d 15%,transparent 15%) 0 -0.6875em no-repeat,
    radial-gradient(circle,transparent 5%,#383c4b 5%,#383c4b 10%,transparent 10%) -0.1875em -0.3125em no-repeat,
    radial-gradient(circle,transparent 5%,#383c4b 5%,#383c4b 10%,transparent 10%) 0.1875em -0.3125em no-repeat,
    radial-gradient(circle,#eda65d 45%,transparent 45%) 0 -0.1875em,
    linear-gradient(transparent 35%,#383c4b 35%,#383c4b 41%,transparent 41%,transparent 44%,#383c4b 44%,#383c4b 50%,transparent 50%,transparent 53%,#383c4b 53%,#383c4b 59%,transparent 59%);
}
.cat .foot:before,.cat .foot:after{content:'';width:100%;height:100%;position:absolute;}
.cat .foot:before{border-radius:50%;clip-path:polygon(50% 50%,0% 50%,0% 25%);-webkit-clip-path:polygon(50% 50%,0% 50%,0% 25%);}
.cat .foot .tummy-end{width:1.5em;height:1.5em;position:absolute;border-radius:50%;background-color:#f2c089;left:1.1875em;top:6.5625em;}
.cat .foot .bottom{width:2.1875em;height:.9375em;position:absolute;top:4.875em;left:.75em;border:.375em solid #383c4b;border-bottom:0;border-radius:50%;transform:rotate(21deg);background:#eda65d;}
.cat .hands,.cat .legs,.cat .foot:after{width:.625em;height:1.5625em;position:absolute;border:.375em solid #383c4b;background-color:#eda65d;}
.cat .hands{border-top:0;border-radius:0 0 .75em .75em;}
.cat .hands.left{top:4.3em;left:13.1875em;transform:rotate(-20deg);}
.cat .hands.right{top:5.125em;left:10.975em;transform:rotate(-25deg);}
.cat .legs{border-bottom:0;border-radius:.75em .75em 0 0;}
.cat .legs.left{top:4.0625em;left:3.125em;transform:rotate(25deg);}
.cat .legs.right{top:3.3125em;left:.75em;transform:rotate(22deg);}
.cat .foot:after{width:.9em;height:2.5em;top:2.625em;left:2.5em;z-index:-1;transform:rotate(25deg);}
.cat .body{animation:body 2.74s linear infinite;}
.cat .foot{animation:foot 2.74s linear infinite;}
@keyframes body{
  0%{clip-path:polygon(50% 50%,0% 50%,0% 100%,100% 100%,100% 20%);}
  10%{clip-path:polygon(50% 50%,30% 120%,50% 100%,100% 100%,100% 20%);}
  20%{clip-path:polygon(50% 50%,100% 90%,120% 90%,100% 100%,100% 20%);}
  40%{clip-path:polygon(50% 50%,100% 45%,120% 45%,120% 50%,100% 20%);}
  50%{clip-path:polygon(50% 50%,100% 65%,120% 65%,120% 50%,100% 20%);}
  80%{clip-path:polygon(50% 50%,75% 130%,120% 65%,120% 50%,100% 20%);}
  90%{clip-path:polygon(50% 50%,-20% 110%,50% 120%,100% 100%,100% 20%);}
  100%{clip-path:polygon(50% 50%,0% 50%,0% 100%,100% 100%,100% 20%);}
}
@keyframes loading-cat{
  0%{transform:rotate(0deg);}
  10%{transform:rotate(-80deg);}
  20%{transform:rotate(-180deg);}
  40%{transform:rotate(-245deg);}
  50%{transform:rotate(-250deg);}
  68%{transform:rotate(-300deg);}
  90%{transform:rotate(-560deg);}
  100%{transform:rotate(-720deg);}
}
@keyframes foot{
  0%{transform:rotate(-10deg);}
  10%{transform:rotate(-100deg);}
  20%{transform:rotate(-145deg);}
  35%{transform:rotate(-190deg);}
  40%{transform:rotate(-195deg);}
  50%{transform:rotate(-190deg);}
  68%{transform:rotate(-135deg);}
  100%{transform:rotate(-10deg);}
}
#container{visibility:hidden;opacity:0;transition:opacity .8s ease .1s;}
body.loaded #container{visibility:visible;opacity:1;}

/* ================ 背景纯图轮播（按参考站：70vh、最小 400px） ================ */
#imgs{
  display:block;position:fixed;top:0;left:0;width:100%;height:70vh;min-height:25rem;
  z-index:-9;background-color:#363636;overflow:hidden;
}
#imgs .item{
  width:100%;height:100%;position:absolute;top:0;left:0;
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
  opacity:0;z-index:0;
  animation:imageAnimation 36s linear infinite 0s;
  backface-visibility:hidden;transform-style:preserve-3d;
}
#imgs .item:nth-child(2){animation-delay:6s;}
#imgs .item:nth-child(3){animation-delay:12s;}
#imgs .item:nth-child(4){animation-delay:18s;}
#imgs .item:nth-child(5){animation-delay:24s;}
#imgs .item:nth-child(6){animation-delay:30s;}
#imgs::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.25);z-index:1;}
@keyframes imageAnimation{
  0%{opacity:0;animation-timing-function:ease-in;}
  2%{opacity:1;}
  8%{opacity:1;transform:scale(1.05);animation-timing-function:ease-out;}
  17%{opacity:1;transform:scale(1.1);}
  25%{opacity:0;transform:scale(1.1);}
  100%{opacity:0;}
}

/* ================ 品牌标题浮层（按参考站：50vh，固定不占流） ================ */
#header{position:relative;width:100%;height:50vh;min-height:10rem;margin:0 auto;color:#fff;text-shadow:0 .2rem .3rem rgba(0,0,0,.5);}
#brand{
  position:fixed;top:0;left:0;width:100%;height:50vh;min-height:10rem;z-index:-1;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:3rem 1.5rem 0;
}
#brand .small{font-size:1rem;letter-spacing:6px;color:#ffd166;margin-bottom:1rem;text-transform:uppercase;}
#brand .artboard{font-size:clamp(2.5rem,7vw,3.5rem);line-height:1.2;letter-spacing:1px;font-weight:800;}
#brand .artboard span{color:#ff9ac0;}
#brand .title{font-size:clamp(1.2rem,4vw,2.3rem);letter-spacing:.125rem;font-weight:400;color:rgba(255,255,255,.9);margin-top:.6rem;}
#brand .meta{display:flex;font-size:.9rem;margin-top:1rem;color:rgba(255,255,255,.85);flex-wrap:wrap;justify-content:center;}
#brand .meta .dot{width:4px;height:4px;border-radius:50%;background:#ff9ac0;margin:0 .8rem;align-self:center;}

/* ================ 顶部导航 ================ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:3.5rem;
  display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;
  background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--nav-border);
}
#nav .logo{font-size:1.2rem;font-weight:800;color:var(--nav-text);letter-spacing:1px;}
#nav .logo span{color:var(--accent2);}
#nav .right{display:flex;align-items:center;gap:1.2rem;}
#nav .links{display:flex;gap:1.6rem;}
#nav .links a{color:var(--nav-text);font-size:.95rem;font-weight:500;transition:.25s;position:relative;padding:4px 0;opacity:.82;}
#nav .links a:hover{opacity:1;}
#nav .links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--accent2);transition:.3s;border-radius:2px;}
#nav .links a:hover::after{width:100%;}

/* 移动端展开后的菜单（原先由 JS 内联，改为类名控制） */
#nav .links.open{
  display:flex;flex-direction:column;align-items:flex-start;
  position:absolute;top:3.5rem;right:0;z-index:1001;
  background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:1rem 1.5rem;border-radius:0 0 0 12px;
  box-shadow:var(--card-shadow);
}

/* 日/夜切换按钮 */
#themeToggle{
  width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--nav-border);
  background:var(--content-hi);color:var(--nav-text);font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--card-shadow);overflow:hidden;position:relative;
}
#themeToggle .ic{position:absolute;transition:transform .5s cubic-bezier(.5,.5,.2,1),opacity .4s;}
#themeToggle .sun{transform:rotate(0) scale(1);opacity:1;}
#themeToggle .moon{transform:rotate(90deg) scale(.3);opacity:0;}
body.dark #themeToggle .sun{transform:rotate(-90deg) scale(.3);opacity:0;}
body.dark #themeToggle .moon{transform:rotate(0) scale(1);opacity:1;}
/* 点击光晕动画 */
#themeToggle.pulse{animation:themePulse .6s ease;}
@keyframes themePulse{0%{box-shadow:0 0 0 0 rgba(255,154,192,.5);}100%{box-shadow:0 0 0 20px rgba(255,154,192,0);}}

.menu-btn{display:none;cursor:pointer;color:var(--nav-text);font-size:1.5rem;background:none;border:none;}

/* 导航滚动后的阴影（原先由 JS 内联样式，改为类名控制） */
#nav.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.12);}

/* ================ 波浪动画层（完全照参考站参数） ================ */
#waves{position:relative;z-index:1;line-height:0;}
.waves{
  width:100%;height:15vh;margin-bottom:-0.6875rem;
  min-height:3.125rem;max-height:9.375rem;position:relative;display:block;
}
.parallax>use{animation:wave 25s cubic-bezier(0.55,0.5,0.45,0.5) infinite;}
.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s;fill:var(--wave-1);}
.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s;fill:var(--wave-2);}
.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s;fill:var(--wave-3);}
.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s;fill:var(--wave-4);}
@keyframes wave{
  0%{transform:translate3d(-90px,0,0);}
  100%{transform:translate3d(85px,0,0);}
}

/* ================ 主内容区 ================ */
main{position:relative;z-index:2;background:var(--content-hi);}
main>.inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;}

.block-title{text-align:center;padding:1rem 0 1.4rem;}
.block-title .jp{display:block;font-size:.75rem;letter-spacing:6px;color:var(--accent2);margin-bottom:.4rem;text-transform:uppercase;}
.block-title h2{font-size:1.7rem;font-weight:800;color:var(--text-main);}
.block-title h2 span{color:var(--accent2);}
.block-title::after{content:'';display:block;width:60px;height:3px;margin:12px auto 0;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));}
/* 首个板块标题不再重复上边距 */
.block-title.tight{padding-top:0;}

/* ================ 置顶文章 ================ */
.segments{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding-bottom:1rem;}
.segments>.item{
  width:100%;border-radius:18px;overflow:hidden;
  background:var(--card-bg);color:var(--card-text);display:flex;flex-direction:column;
  box-shadow:var(--card-shadow);transition:.35s;
}
.segments>.item:hover{transform:translateY(-6px);box-shadow:0 1.1rem 2.6rem rgba(0,0,0,.18);}
.segments .cover{height:190px;background-size:cover;background-position:center;position:relative;overflow:hidden;}
.segments .cover::after{content:'置顶';position:absolute;top:14px;left:14px;padding:5px 14px;border-radius:20px;background:var(--accent2);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:1px;z-index:2;}
.segments .info{padding:1.2rem 1.4rem 1.4rem;}
.segments .info h3{font-size:1.2rem;font-weight:800;color:var(--card-text);margin-bottom:.6rem;line-height:1.4;}
.segments .info .excerpt{color:var(--text-soft);font-size:.92rem;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.segments .info .meta{display:flex;justify-content:space-between;align-items:center;padding-top:.9rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);}
.btn{display:inline-block;padding:.5rem 1.2rem;border-radius:30px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:600;font-size:.8rem;transition:.3s;}
.btn:hover{letter-spacing:.3px;box-shadow:0 .3rem .8rem rgba(255,143,174,.4);}

/* ================ 关于我 ================ */
#about{padding:2rem 0 2.4rem;}
.about-grid{display:grid;grid-template-columns:300px 1fr;gap:2.6rem;align-items:center;}
.avatar-wrap{position:relative;}
.avatar-wrap::before{content:'';position:absolute;inset:-14px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));filter:blur(22px);opacity:.5;z-index:0;animation:pulse 4s infinite;}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.75}}
.avatar{
  position:relative;z-index:1;display:block;width:100%;aspect-ratio:1;
  border-radius:50%;border:4px solid var(--card-bg);box-shadow:var(--card-shadow);
  background:linear-gradient(135deg,var(--c3),var(--c1));
  object-fit:cover;object-position:center top;
}
.about-info h3{font-size:1.8rem;color:var(--text-main);margin-bottom:8px;}
.about-info .role{color:var(--accent2);font-weight:600;margin-bottom:16px;}
.about-info .bio{color:var(--text-soft);margin-bottom:22px;}
.about-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px;}
.meta-item{background:var(--c2);border:1px solid var(--line);border-radius:12px;padding:12px 16px;}
.meta-item .label{font-size:.76rem;color:var(--accent);letter-spacing:1px;margin-bottom:3px;}
.meta-item .value{color:var(--text-main);font-weight:600;font-size:.92rem;word-break:break-all;}
.social-links{display:flex;gap:10px;flex-wrap:wrap;}
.social-links.center{justify-content:center;}
.social-btn{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;
  padding:9px 15px;border-radius:40px;color:#fff;font-weight:600;font-size:.86rem;
  line-height:1;white-space:nowrap;transition:.3s;background:var(--c3);border:1px solid var(--line);
}
.social-btn:hover{transform:translateY(-4px);box-shadow:0 .6rem 1.5rem rgba(0,0,0,.15);}
/* 所有社交图标固定为 17px，避免原始 PNG/SVG 尺寸撑大按钮 */
.social-icon{display:block;flex:0 0 17px;width:17px;height:17px;max-width:none;object-fit:contain;}
.social-icon:not(img){fill:currentColor;}
.social-btn.bili{background:linear-gradient(135deg,#fb7299,#ee4d98);border:none;}
.social-btn.github{background:linear-gradient(135deg,#24292f,#454b54);border:none;}
.social-btn.gitcode{background:linear-gradient(135deg,#ff6a2f,#e54120);border:none;}
.social-btn.mail{background:linear-gradient(135deg,#4facfe,#00c8fe);border:none;}
.social-btn.project{background:linear-gradient(135deg,#43e97b,#5cffb8);border:none;color:#12582e;}

/* ================ 文章区 ================ */
#articles{padding:0.5rem 0 2.4rem;}
.blog-toolbar{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:2rem;flex-wrap:wrap;}
.cat-btn{padding:8px 20px;border-radius:30px;border:1px solid var(--line);background:var(--card-bg);color:var(--text-main);font-size:.88rem;font-weight:600;transition:.3s;opacity:.8;}
.cat-btn:hover{opacity:1;border-color:var(--accent2);}
.cat-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;box-shadow:0 6px 20px rgba(248,130,194,.35);opacity:1;}
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem;}
.post-card{background:var(--card-bg);color:var(--card-text);border-radius:18px;overflow:hidden;box-shadow:var(--card-shadow);transition:.35s;display:flex;flex-direction:column;}
.post-card:hover{transform:translateY(-6px);box-shadow:0 1.1rem 2.6rem rgba(0,0,0,.18);}
/* 分类筛选隐藏（原先由 JS 内联 display，改为类名控制） */
.post-card.hidden{display:none;}
.post-thumb{height:170px;background-size:cover;background-position:center;position:relative;overflow:hidden;}
.post-thumb .cat-badge{position:absolute;top:12px;left:12px;padding:5px 13px;border-radius:20px;background:var(--accent2);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:1px;z-index:2;}
.post-body{padding:1.1rem 1.3rem 1.2rem;display:flex;flex-direction:column;flex:1;}
.post-title{font-size:1.1rem;font-weight:800;color:var(--card-text);margin-bottom:8px;transition:.25s;line-height:1.4;}
.post-card:hover .post-title{color:var(--accent2);}
.post-excerpt{color:var(--text-soft);font-size:.88rem;margin-bottom:14px;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.post-meta{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted);}
.read-more{color:var(--accent);font-weight:700;font-size:.82rem;}
.read-more:hover{color:var(--accent2);letter-spacing:.5px;}

/* ================ 友情链接 ================ */
#friends{padding:0.5rem 0 2.4rem;}
.friends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;}
.friend-card{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  background:var(--card-bg);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--card-shadow);transition:.3s;min-width:0;
}
.friend-card:hover{transform:translateY(-5px);border-color:var(--accent2);box-shadow:0 .9rem 2rem rgba(0,0,0,.16);}
.friend-avatar{
  flex:0 0 48px;width:48px;height:48px;border-radius:50%;
  object-fit:cover;background:var(--c2);border:2px solid var(--line);
}
.friend-avatar.placeholder{
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;line-height:1;
}
.friend-info{min-width:0;}
.friend-name{font-weight:700;color:var(--card-text);font-size:.98rem;margin-bottom:2px;transition:.25s;}
.friend-card:hover .friend-name{color:var(--accent2);}
.friend-desc{
  color:var(--text-soft);font-size:.8rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* ================ 友链申请按钮 ================ */
.friends-action{text-align:center;padding:1.4rem 0 2.6rem;}
.friends-apply-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:30px;border:2px solid var(--accent2);
  background:transparent;color:var(--accent2);font-weight:700;font-size:.94rem;
  cursor:pointer;transition:.3s;line-height:1;
}
.friends-apply-btn:hover{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;border-color:transparent;
  transform:translateY(-3px);box-shadow:0 .6rem 1.5rem rgba(248,130,194,.35);
}

/* ================ 弹窗遮罩与内容 ================ */
.modal-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;
  background:rgba(0,0,0,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:1rem;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.modal-overlay[aria-hidden="false"]{opacity:1;visibility:visible;}
.modal-content{
  position:relative;max-width:560px;width:100%;
  background:var(--card-bg);border-radius:20px;padding:2rem 1.8rem;
  box-shadow:0 1.5rem 3rem rgba(0,0,0,.4);
  transform:scale(.9);transition:transform .3s cubic-bezier(.25,.8,.25,1);
}
.modal-overlay[aria-hidden="false"] .modal-content{transform:scale(1);}
.modal-close{
  position:absolute;top:1rem;right:1rem;width:32px;height:32px;
  border-radius:50%;border:none;background:var(--c2);color:var(--text-main);
  font-size:1.2rem;line-height:1;cursor:pointer;transition:.25s;
}
.modal-close:hover{background:var(--accent2);color:#fff;transform:rotate(90deg);}
.modal-content h3{
  font-size:1.6rem;color:var(--card-text);margin:0 0 1rem;
  border-bottom:2px solid var(--accent2);padding-bottom:.6rem;
}
.modal-lead{color:var(--text-main);font-size:.92rem;margin-bottom:.8rem;line-height:1.7;}
.modal-lead a{color:var(--accent);font-weight:700;border-bottom:1px dashed var(--accent);}
.modal-lead a:hover{color:var(--accent2);border-bottom-color:var(--accent2);}
.modal-tpl{
  margin:0 0 .8rem;padding:12px 14px;border-radius:12px;
  background:var(--c2);border:1px solid var(--line);
  color:var(--card-text);font-size:.86rem;line-height:1.8;
  font-family:'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',monospace;
  white-space:pre-wrap;overflow-x:auto;
}
.modal-note{color:var(--muted);font-size:.78rem;line-height:1.6;margin:0;}

/* ================ 联系我 ================ */
#contact{background:var(--content-lo);padding:2rem 1.5rem;text-align:center;}

/* ================ 页脚 ================ */
footer{background:var(--content-lo);padding:2rem 1rem;text-align:center;}
footer p{color:var(--muted);font-size:.88rem;}
footer .ft-logo{color:var(--text-main);font-weight:700;font-size:1.1rem;margin-bottom:10px;}
footer .ft-logo span{color:var(--accent2);}

/* ================ 点击烟花画布 ================ */
#fireworks{position:fixed;top:0;left:0;pointer-events:none;z-index:9999999;}

/* 滚动动画 */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;}
.reveal.show{opacity:1;transform:translateY(0);}

/* ================ 移动端 ================ */
@media(max-width:900px){
  #nav .links{display:none;}
  .menu-btn{display:block;}
  .about-grid{grid-template-columns:1fr;gap:1.6rem;text-align:center;}
  .avatar{max-width:170px;margin:0 auto;}
  .about-meta{grid-template-columns:1fr;text-align:left;}
  .social-links{justify-content:center;}
  .segments{grid-template-columns:1fr;}
}
@media(max-width:600px){
  #brand{padding-top:3rem;}
  #brand .small{font-size:.85rem;letter-spacing:4px;}
  #brand .meta{font-size:.8rem;}
  main>.inner{padding:0 1rem;}
  .about-grid{gap:1.2rem;}
  .meta-item{padding:10px 14px;}
  .social-btn{min-height:38px;padding:8px 13px;font-size:.82rem;}
  .social-icon{flex-basis:16px;width:16px;height:16px;}
  .articles-grid{grid-template-columns:1fr;}
  .friends-grid{grid-template-columns:1fr;gap:.8rem;}
  .friend-avatar{flex-basis:42px;width:42px;height:42px;}
  .post-thumb{height:155px;}
  .block-title h2{font-size:1.4rem;}
  .waves{height:10vh;}
  #nav{padding:0 1rem;}
}