/* ===== Site Styles ===== */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden}
body{margin:0;font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;color:#333;background:linear-gradient(180deg,#e8f4f8,#dceef5 40%,#c8e3f0 100%);overflow-x:hidden;max-width:100vw}
a{text-decoration:none;color:inherit}

/* -- Starfield -- */
.starfield{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* Layer 1: small stars (static scatter) */
.starfield::before{
  content:'';position:absolute;width:3px;height:3px;border-radius:50%;
  top:0;left:0;
  box-shadow:
    5vw 8vh #fff, 12vw 22vh #fff, 23vw 5vh #fff, 35vw 18vh #fff, 48vw 30vh #fff,
    55vw 12vh #a8d8ea, 62vw 25vh #fff, 73vw 7vh #fff, 85vw 28vh #a8d8ea, 92vw 15vh #fff,
    8vw 40vh #fff, 18vw 55vh #a8d8ea, 28vw 42vh #fff, 40vw 60vh #fff, 52vw 48vh #fff,
    65vw 55vh #a8d8ea, 78vw 40vh #fff, 88vw 58vh #fff, 95vw 45vh #fff, 3vw 68vh #a8d8ea,
    15vw 75vh #fff, 30vw 70vh #fff, 45vw 80vh #a8d8ea, 58vw 72vh #fff, 70vw 78vh #fff,
    80vw 68vh #fff, 90vw 75vh #a8d8ea, 10vw 85vh #fff, 25vw 90vh #fff, 42vw 88vh #fff,
    55vw 92vh #a8d8ea, 68vw 85vh #fff, 75vw 95vh #fff, 88vw 90vh #fff, 96vw 82vh #a8d8ea;
  animation: twinkle 4s ease-in-out infinite alternate;
}

/* Layer 2: medium stars (offset animation) */
.starfield::after{
  content:'';position:absolute;width:5px;height:5px;border-radius:50%;
  top:0;left:0;animation-delay:-2s;
  box-shadow:
    10vw 12vh #fff, 22vw 28vh #fff, 33vw 10vh #a8d8ea, 44vw 22vh #fff, 56vw 35vh #fff,
    63vw 14vh #fff, 74vw 30vh #a8d8ea, 82vw 8vh #fff, 90vw 20vh #fff, 97vw 32vh #a8d8ea,
    6vw 45vh #fff, 20vw 52vh #fff, 32vw 44vh #a8d8ea, 46vw 62vh #fff, 50vw 50vh #fff,
    62vw 58vh #fff, 72vw 45vh #fff, 84vw 62vh #a8d8ea, 93vw 50vh #fff, 2vw 72vh #fff,
    12vw 78vh #a8d8ea, 28vw 72vh #fff, 38vw 82vh #fff, 48vw 76vh #a8d8ea, 60vw 70vh #fff,
    72vw 82vh #fff, 82vw 72vh #a8d8ea, 94vw 78vh #fff, 16vw 88vh #fff, 35vw 92vh #fff,
    50vw 88vh #a8d8ea, 64vw 94vh #fff, 78vw 88vh #fff, 86vw 96vh #fff, 8vw 96vh #a8d8ea;
  animation: twinkle 3.5s ease-in-out infinite alternate;
}

@keyframes twinkle{
  0%{opacity:.35}100%{opacity:.85}
}

/* Shooting stars */
.s-star{
  position:fixed;z-index:1;pointer-events:none;
  width:150px;height:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,0));
  border-radius:2px;
  animation:sFall linear infinite;
  opacity:0;
}
.s-star::before{
  content:'';position:absolute;left:0;top:-2px;
  width:5px;height:5px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px 4px rgba(200,230,255,.9);
}
.s-star:nth-child(1){top:5%;left:70%;animation-duration:10s;animation-delay:0s}
.s-star:nth-child(2){top:12%;left:80%;animation-duration:12s;animation-delay:4s}
.s-star:nth-child(3){top:20%;left:60%;animation-duration:9s;animation-delay:8s}
.s-star:nth-child(4){top:8%;left:90%;animation-duration:14s;animation-delay:2s}
.s-star:nth-child(5){top:15%;left:50%;animation-duration:11s;animation-delay:6s}

@keyframes sFall{
  0%{transform:translateX(0) translateY(0) rotate(-30deg);opacity:0}
  3%{opacity:1}
  20%{opacity:.7}
  100%{transform:translateX(-90vw) translateY(50vh) rotate(-30deg);opacity:0}
}

/* -- Site Nav -- */
.site-nav{display:flex;justify-content:center;align-items:center;gap:12px;padding:8px 20px;background:rgba(255,220,225,.50);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:100;border-bottom:1px solid rgba(0,0,0,.06);border-radius:0 0 12px 12px;box-shadow:0 1px 8px rgba(0,0,0,.05);font-size:.88rem;max-width:860px;width:74%}
.nav-brand{font-size:.9rem;font-weight:700;color:#3db8bf;display:flex;align-items:center;gap:4px;padding:5px 14px;border-radius:16px;transition:all .2s}
.nav-brand:hover{background:rgba(61,184,191,.1)}
.nav-logo-img{height:28px;width:auto}
.nav-link{font-size:.85rem;color:#555;padding:5px 14px;border-radius:16px;transition:all .2s;font-weight:500}
.nav-link:hover,.nav-link.active{background:rgba(61,184,191,.1);color:#3db8bf}

/* -- Home Banner -- */
.home-banner{position:relative;height:320px;overflow:hidden}
.banner-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}
.banner-bg.active{opacity:1}
.banner-overlay{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;background:rgba(0,0,0,.25);color:#fff;text-align:center}
.banner-overlay h1{font-size:3.2rem;margin:0 0 8px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4);font-family:Georgia,"Times New Roman",serif;font-style:italic;letter-spacing:2px}
.banner-overlay p{font-size:1.05rem;opacity:.9;text-shadow:0 1px 4px rgba(0,0,0,.3)}

/* -- Wave Blend -- */
.wave-blend{position:relative;z-index:2;margin-top:-120px;line-height:0;pointer-events:none}
.wave-blend svg{display:block;width:100%;height:160px}

/* -- Home Layout -- */
.home-layout{max-width:1100px;margin:-80px auto 40px;padding:0 20px;display:grid;grid-template-columns:1fr 1.2fr;gap:20px;position:relative;z-index:2}
.home-left{display:flex;flex-direction:column;gap:16px}
.home-right{display:flex;flex-direction:column;gap:16px}

/* -- Cards -- */
.h-card{background:rgba(255,255,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:14px;padding:20px 22px;box-shadow:0 2px 18px rgba(100,160,200,.06);border:1px solid rgba(255,255,255,.3)}
.h-card-main{padding:24px 26px}
.h-card h3{font-size:.95rem;color:#888;margin:0 0 12px;font-weight:600}

/* Profile */
#card-profile{padding:12px}
.h-profile-row{display:flex;align-items:center}
.h-profile-row>*{flex:1}
.h-logo{height:96px;width:auto;margin:0 auto;display:block}
.h-profile-info{text-align:center;padding-left:8px}
.h-name{font-size:1.3rem;font-weight:700;color:#333;margin:0 0 4px}
.h-sig{color:#3db8bf;font-style:italic;font-size:.82rem;margin:0}

/* Bio */
#card-bio p{margin:4px 0;color:#555;font-size:.9rem;line-height:1.7}
.h-hope{color:#3db8bf !important;font-weight:500}

/* Categories */
.h-cats{display:flex;flex-direction:column;gap:6px}
.h-cat-link{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:10px;background:rgba(61,184,191,.05);color:#444;font-size:.88rem;transition:all .15s}
.h-cat-link span{font-size:.78rem;color:#999}
.h-cat-link:hover{background:rgba(61,184,191,.12);color:#3db8bf}

/* Tags */
.tags-cloud{line-height:2;display:flex;flex-wrap:wrap;gap:6px}
.tags-cloud span{display:inline-flex;align-items:center;padding:3px 10px;background:rgba(61,184,191,.08);border-radius:12px;font-size:.8rem;color:#666;cursor:default;line-height:1.4;vertical-align:middle}
.tags-cloud span:hover{background:rgba(61,184,191,.18);color:#3db8bf}

/* Stats */
.h-stats-row{display:flex;gap:20px;justify-content:space-around}
.h-stat{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.h-stat-num{font-size:1.8rem;font-weight:700;color:#3db8bf;line-height:1.1}
.h-stat-num i{font-size:1rem;font-weight:400;font-style:normal;color:#888;margin-left:1px}
.h-stat-unit{font-size:.8rem;color:#aaa}

/* Calendar */
.cal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cal-month{padding:8px;text-align:center;border-radius:8px;font-size:.82rem;background:#f5f5f5;color:#bbb}
.cal-active{background:rgba(61,184,191,.15);color:#3db8bf;font-weight:600}
.cal-year-nav{display:flex;gap:8px;margin-bottom:8px}
.cal-yr-btn{padding:2px 12px;border:1px solid #ddd;border-radius:12px;background:#f5f5f5;color:#999;font-size:.78rem;cursor:pointer;transition:all .2s}
.cal-yr-btn.active{background:rgba(61,184,191,.15);color:#3db8bf;border-color:#3db8bf;font-weight:600}
.cal-yr-btn:hover:not(.active){border-color:#3db8bf;color:#3db8bf}
.cal-grid-hidden{display:none}

/* Recent */
.h-recent{display:flex;flex-direction:column;gap:6px}
.h-recent-item{display:flex;gap:10px;align-items:baseline;padding:6px 10px;border-radius:8px;font-size:.85rem;color:#555;transition:all .15s}
.h-recent-item:hover{background:rgba(61,184,191,.06)}
.h-recent-date{font-size:.75rem;color:#999;flex-shrink:0;min-width:72px}
.h-recent-title{color:#444}

/* Button */
.h-btn-all{display:block;text-align:center;padding:12px;background:linear-gradient(135deg,#3db8bf,#80F7C4);color:#fff;border-radius:12px;font-weight:600;font-size:.95rem;transition:transform .2s,box-shadow .2s}
.h-btn-all:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(61,184,191,.3)}

/* -- Footer -- */
.home-footer{text-align:center;padding:20px;color:#999;font-size:.85rem;border-top:1px solid rgba(0,0,0,.04)}

/* -- Articles Hero -- */
.articles-hero{text-align:center;padding:70px 20px 24px;background:transparent}
.articles-hero h1{font-size:1.8rem;color:#333;margin:0 0 6px}
.articles-hero p{color:#888;margin:0 0 16px}
/* -- Module Grid -- */
.articles-grid{max-width:1000px;margin:20px auto 60px;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.module-card{background:rgba(255,255,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:14px;padding:24px;box-shadow:0 2px 18px rgba(100,160,200,.05);border:1px solid rgba(255,255,255,.25);transition:transform .2s,box-shadow .2s;display:block}
.module-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,.1)}
.module-card-icon{font-size:2rem;margin-bottom:8px}
.module-card h3{font-size:1.1rem;margin:0 0 6px;color:#333}
.module-card p{font-size:.85rem;color:#888;margin:0 0 8px;line-height:1.5}
.card-meta{font-size:.78rem;color:#3db8bf;font-weight:600}

/* -- Module listing pages -- */
.breadcrumb{max-width:800px;margin:0 auto;padding:0 20px 10px;font-size:.85rem;color:#888;background:transparent}
.breadcrumb a{color:#3db8bf}
.module-header{text-align:center;padding:70px 20px 30px;background:transparent}
.module-header .module-icon{font-size:2.5rem}
.module-header h1{font-size:1.6rem;margin:8px 0;color:#333}
.module-header p{color:#888;font-size:.9rem}
.sub-module-grid{max-width:900px;margin:20px auto;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.sub-module-card{display:block;background:rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:12px;padding:20px;box-shadow:0 2px 12px rgba(100,160,200,.04);border:1px solid rgba(255,255,255,.35);transition:transform .2s}
.sub-module-card:hover{transform:translateY(-3px)}
.sub-module-card h3{font-size:1.05rem;margin:0 0 6px;color:#333}
.sub-module-card p{font-size:.82rem;color:#888;margin:0}
.article-list{max-width:800px;margin:0 auto;padding:20px}
.article-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:10px;padding:16px 20px;margin-bottom:10px;box-shadow:0 1px 8px rgba(100,160,200,.04);border:1px solid rgba(255,255,255,.35);transition:transform .2s,box-shadow .2s}
.article-card:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.article-card-num{font-size:1.2rem;font-weight:700;color:#3db8bf;min-width:30px;text-align:center;flex-shrink:0}
.article-card-content{flex:1;min-width:0}
.article-card-content h4{font-size:.95rem;margin:0 0 4px;color:#333;position:relative;padding-right:88px}
.article-card-content .card-date{position:absolute;right:0;top:0;font-size:.72rem;color:#aaa;font-weight:400}
.article-card-content p{font-size:.8rem;color:#888;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.article-card-img{width:180px;height:120px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#dceef5}
.card-meta-line{display:none}
.tag-pill{display:inline-block;padding:1px 7px;border-radius:10px;background:rgba(61,184,191,.1);color:#3db8bf;margin:0 2px;font-size:.7rem}

/* -- Responsive -- */
@media(max-width:768px){
  body{overflow-x:hidden}
  .site-nav{width:90%;padding:6px 14px;gap:8px;font-size:.82rem}
  .nav-brand{font-size:.82rem;padding:4px 10px}
  .nav-link{font-size:.78rem;padding:4px 10px}
  .home-banner{height:220px}
  .banner-overlay h1{font-size:1.6rem}
  .wave-blend{margin-top:-80px}
  .wave-blend svg{height:100px}
  .home-layout{grid-template-columns:1fr;margin:-50px 0 40px;padding:0 12px;gap:14px}
  .h-card{border-radius:12px;padding:20px 16px}
  .h-profile-row{flex-direction:column;text-align:center}
  .h-logo{height:72px}
  .h-name{font-size:1.15rem}
  .articles-grid{grid-template-columns:1fr;padding:0 12px}
  .sub-module-grid{grid-template-columns:1fr}
  .article-card{flex-wrap:wrap}
  .article-card-img{width:100%;height:140px;order:-1;border-radius:8px}
}
@media(max-width:480px){
  .site-nav{width:96%;padding:5px 8px;gap:4px;font-size:.76rem;border-radius:0 0 8px 8px}
  .nav-brand{font-size:.72rem;padding:3px 6px}
  .nav-link{font-size:.68rem;padding:3px 6px}
  .home-banner{height:180px}
  .banner-overlay h1{font-size:1.3rem}
  .wave-blend{margin-top:-50px}
  .wave-blend svg{height:70px}
  .home-layout{margin:-30px 0 30px;padding:0 8px;gap:10px}
  .h-card{padding:16px 12px;border-radius:10px}
  .h-stats-row{gap:12px}
  .h-stat-num{font-size:1.2rem}
  .h-stat-num i{font-size:.75rem}
  .h-stat-unit{font-size:.7rem}
  .h-cat-link{font-size:.8rem;padding:6px 10px}
  .h-cat-link span{font-size:.7rem}
  .h-btn-all{font-size:.85rem;padding:10px}
}