/* ============================================
   班级纪念站 - 毛玻璃设计系统
   ============================================ */

/* ==== CSS Custom Properties ==== */
:root {
  --glass-bg: rgba(255,255,255,0.25);
  --glass-bg-heavy: rgba(255,255,255,0.65);
  --glass-border: rgba(255,255,255,0.35);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.08);
  --glass-blur: 14px;

  --primary: #299ED6;
  --primary-dark: #1a7aab;
  --accent: #f0a040;
  --text: #2c3e50;
  --text-light: #718096;
  --bg: #e8ecf1;
  --bg-gradient: linear-gradient(135deg, #dce3ea 0%, #e8ecf1 30%, #f0d8e0 60%, #d8e8f0 100%);
  --card-bg: rgba(255,255,255,0.55);
  --card-hover: rgba(255,255,255,0.8);

  --radius: 16px;
  --radius-sm: 10px;
  --transition: 0.25s cubic-bezier(0.4,0,0.2,1);

  --font: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-theme="dark"] {
  --glass-bg: rgba(30,35,50,0.5);
  --glass-bg-heavy: rgba(30,35,50,0.75);
  --glass-border: rgba(255,255,255,0.08);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
  --text: #d0d4dc;
  --text-light: #8890a0;
  --bg: #161822;
  --bg-gradient: linear-gradient(135deg, #12141e 0%, #161822 30%, #1a1628 60%, #141a24 100%);
  --card-bg: rgba(30,35,50,0.55);
  --card-hover: rgba(35,42,58,0.8);
}

/* ==== Reset & Base ==== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  background-image:var(--bg-gradient);
  background-attachment:fixed;
  line-height:1.75;
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--primary-dark)}
img{max-width:100%;height:auto}

/* ==== Glass System ==== */
.glass,.glass-card,.glass-nav,.glass-hero{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
}
.glass-card{
  border-radius:var(--radius);
  box-shadow:var(--glass-shadow);
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition);
}
.glass-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 40px rgba(0,0,0,0.12);
  background:var(--card-hover);
}

/* ==== Navbar ==== */
.glass-nav{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--glass-bg-heavy);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
  padding:0 1rem;
}
.nav-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:56px;
}
.nav-brand{
  font-size:1.2rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:0.05em;
}
.nav-links{display:flex;gap:1.5rem;align-items:center;list-style:none}
.nav-links a{color:var(--text);font-size:0.95rem;font-weight:500;transition:color var(--transition);padding:4px 0}
.nav-links a:hover,.nav-links a.active{color:var(--primary)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0;transition:var(--transition);border-radius:2px}

/* ==== Container ==== */
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.container-sm{max-width:780px}

/* ==== Hero ==== */
.hero{
  text-align:center;
  padding:5rem 1rem 3rem;
  position:relative;
}
.hero h1{font-size:2.5rem;font-weight:800;letter-spacing:0.08em;margin-bottom:0.5rem}
.hero p{font-size:1.1rem;color:var(--text-light);max-width:500px;margin:0 auto}

/* ==== Post Cards Grid ==== */
.posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1.5rem;
  padding:1rem 0 3rem;
}
.post-card{padding:1.5rem;display:flex;flex-direction:column;gap:0.75rem}
.post-card .card-category{
  display:inline-block;
  font-size:0.8rem;
  background:var(--primary);
  color:#fff;
  padding:2px 10px;
  border-radius:20px;
  align-self:flex-start;
}
.post-card h2{font-size:1.25rem;line-height:1.4}
.post-card h2 a{color:var(--text)}
.post-card .card-meta{
  font-size:0.85rem;
  color:var(--text-light);
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.post-card .card-excerpt{font-size:0.95rem;color:var(--text-light);line-height:1.6;flex:1}
.post-card .card-footer{font-size:0.8rem;color:var(--text-light);display:flex;justify-content:space-between;align-items:center}

/* ==== Pagination ==== */
.pagination{
  display:flex;
  justify-content:center;
  gap:0.5rem;
  padding:1rem 0 3rem;
}
.pagination a,.pagination span{
  padding:8px 16px;
  border-radius:var(--radius-sm);
  font-size:0.9rem;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  color:var(--text);
  transition:var(--transition);
}
.pagination a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination .current{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ==== Single Post ==== */
.post-article{max-width:780px;margin:2rem auto;padding:2rem}
.post-header{margin-bottom:2rem;text-align:center}
.post-header h1{font-size:2rem;margin-bottom:0.75rem}
.post-meta{font-size:0.9rem;color:var(--text-light);display:flex;justify-content:center;flex-wrap:wrap;gap:1rem}
.post-meta span{display:flex;align-items:center;gap:4px}
.post-content{font-size:1.05rem;line-height:1.9}
.post-content h2{font-size:1.5rem;margin:2rem 0 1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--glass-border)}
.post-content h3{font-size:1.25rem;margin:1.5rem 0 0.75rem}
.post-content p{margin:0.75rem 0}
.post-content img{border-radius:var(--radius-sm);margin:1rem 0}
.post-content blockquote{
  border-left:4px solid var(--primary);
  padding:0.5rem 1rem;
  margin:1rem 0;
  background:var(--glass-bg);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text-light);
}
.post-content pre{
  background:rgba(0,0,0,0.05);
  border-radius:var(--radius-sm);
  padding:1rem;
  overflow-x:auto;
  font-size:0.9rem;
  line-height:1.6;
}
.post-content code{
  background:rgba(0,0,0,0.06);
  padding:2px 6px;
  border-radius:4px;
  font-size:0.9em;
}
.post-content pre code{background:none;padding:0}
.post-content table{
  width:100%;
  border-collapse:collapse;
  margin:1rem 0;
  font-size:0.9rem;
}
.post-content th,.post-content td{
  border:1px solid var(--glass-border);
  padding:8px 12px;
  text-align:left;
}
.post-content th{background:var(--glass-bg);font-weight:600}

/* ==== Comments ==== */
.comments-section{max-width:780px;margin:2rem auto;padding:1.5rem}

/* ==== Archive ==== */
.archive-list{max-width:700px;margin:0 auto;padding:1rem 0 3rem}
.archive-year{margin:2rem 0 1rem}
.archive-year h2{font-size:1.5rem;color:var(--primary)}
.archive-month{margin-left:1rem;margin-bottom:1rem}
.archive-month h3{font-size:1rem;color:var(--text-light);margin-bottom:0.5rem}
.archive-item{display:flex;align-items:center;gap:1rem;padding:0.4rem 0;border-bottom:1px solid var(--glass-border)}
.archive-item .date{font-size:0.85rem;color:var(--text-light);white-space:nowrap}
.archive-item a{flex:1}

/* ==== Gallery ==== */
.gallery-filter{display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:center;padding:1rem 0 2rem}
.gallery-filter a,.gallery-filter span{
  padding:6px 16px;
  border-radius:20px;
  font-size:0.9rem;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  color:var(--text);
  transition:var(--transition);
}
.gallery-filter a:hover,.gallery-filter .active{background:var(--primary);color:#fff;border-color:var(--primary)}
.gallery-grid{
  column-count:4;
  column-gap:1rem;
  padding:0 0 3rem;
}
.gallery-item{
  break-inside:avoid;
  margin-bottom:1rem;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  transition:transform var(--transition);
}
.gallery-item:hover{transform:scale(1.02)}
.gallery-item img{display:block;width:100%;border-radius:var(--radius)}
.gallery-item .caption{
  padding:0.5rem 0.75rem;
  font-size:0.85rem;
  color:var(--text-light);
  background:var(--glass-bg);
}

/* ==== Lightbox ==== */
.lightbox{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:9999;
  background:rgba(0,0,0,0.9);
  backdrop-filter:blur(10px);
  justify-content:center;
  align-items:center;
}
.lightbox.active{display:flex}
.lightbox img{max-width:90vw;max-height:85vh;border-radius:var(--radius)}
.lightbox-close{
  position:absolute;top:20px;right:30px;
  font-size:2rem;color:#fff;cursor:pointer;
  background:none;border:none;width:48px;height:48px;
}

/* ==== Footer ==== */
.site-footer{
  text-align:center;
  padding:2rem 1rem;
  border-top:1px solid var(--glass-border);
  background:var(--glass-bg-heavy);
  backdrop-filter:blur(20px);
  font-size:0.9rem;
  color:var(--text-light);
  line-height:2;
}
.site-footer a{color:var(--text-light)}
.site-footer .beian{margin-top:0.5rem}
.site-footer .beian a{margin:0 0.5rem}
.site-footer .uptime{font-family:monospace}

/* ==== Agreement Popup ==== */
.agreement-mask{
  position:fixed;top:0;left:0;right:0;bottom:0;
  z-index:9999;
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex;
  justify-content:center;
  align-items:center;
}
.agreement-box{
  background:var(--glass-bg-heavy);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:0 16px 48px rgba(0,0,0,0.12);
  max-width:680px;
  width:90%;
  max-height:80vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.agreement-header{padding:1.5rem 1.5rem 0.5rem}
.agreement-header h2{font-size:1.4rem}
.agreement-content{
  padding:1rem 1.5rem;
  overflow-y:auto;
  flex:1;
  -webkit-overflow-scrolling:touch;
  font-size:0.95rem;
}
.agreement-footer{
  padding:1rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  border-top:1px solid var(--glass-border);
}
.agreement-footer label{font-size:0.9rem;display:flex;align-items:center;gap:0.5rem}
.agreement-footer label input[disabled]{opacity:0.4}
.agreement-footer .btn-row{display:flex;gap:0.75rem;justify-content:flex-end}
.btn-agree{
  padding:10px 28px;
  border:none;
  border-radius:var(--radius-sm);
  font-size:1rem;
  cursor:pointer;
  background:var(--primary);
  color:#fff;
  transition:var(--transition);
}
.btn-agree:disabled{background:#ccc;cursor:not-allowed}
.btn-disagree{
  padding:10px 28px;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text-light);
  cursor:pointer;
  font-size:1rem;
}

/* ==== Responsive ==== */
@media (max-width:768px){
  .hero h1{font-size:1.8rem}
  .hero{padding:3rem 1rem 2rem}
  .posts-grid{grid-template-columns:1fr;gap:1rem}
  .post-article{padding:1.25rem}
  .gallery-grid{column-count:2;column-gap:0.5rem}
  .gallery-item{margin-bottom:0.5rem}
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav-links.open{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:56px;
    left:0;right:0;
    background:var(--glass-bg-heavy);
    backdrop-filter:blur(20px);
    padding:1rem;
    border-bottom:1px solid var(--glass-border);
    gap:0.75rem;
  }
}
@media (max-width:480px){
  .gallery-grid{column-count:1}
  .post-card h2{font-size:1.1rem}
  .post-header h1{font-size:1.5rem}
}

/* ==== WeChat fixes ==== */
@media screen and (max-width:480px){
  html{font-size:15px}
  .glass-card:hover{transform:none}
  button,a,.nav-link{min-height:44px;min-width:44px;display:inline-flex;align-items:center}
}