/* =============================================================
   儿童自然科学观察站 · 暖阳陶土
   Nature Kids Lab — warm sun & terracotta, handmade & earthy
   ============================================================= */

:root{
  /* —— 配色（严格按规范定义，贯穿全站） —— */
  --c-bg:        #fbfbf8;
  --c-card:      #ffffff;
  --c-primary:   #b3b927;   /* 主色 · 陶土橄榄 */
  --c-accent:    #78df20;   /* 强调 · 新芽绿（CTA） */
  --c-secondary: #4196c8;   /* 辅助 · 天空蓝 */
  --c-ink:       #2c2c1b;   /* 正文文字 */
  --c-ink-2:     #797a5c;   /* 次要文字 */
  --c-line:      #e5e6db;   /* 描边 */

  --font-display: 'Quicksand','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --font-body:    'Noto Serif SC','Songti SC','SimSun',Georgia,'Times New Roman',serif;

  --r: 16px;
  --r-lg: 26px;

  --shadow-sm: 0 1px 2px rgba(44,44,27,.05), 0 8px 18px -8px rgba(44,44,27,.12);
  --shadow-md: 0 2px 6px rgba(44,44,27,.06), 0 18px 40px -16px rgba(44,44,27,.20);
  --shadow-lg: 0 6px 14px rgba(44,44,27,.08), 0 32px 64px -22px rgba(44,44,27,.28);
  --ring-focus: 0 0 0 3px rgba(179,185,39,.35);
}

/* —— 基础 —— */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.8;
  color:var(--c-ink);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* 纸张肌理（自然肌理 · 细腻颗粒） */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
main{ position:relative; z-index:1; }

h1,h2,h3,h4{ font-family:var(--font-display); color:var(--c-ink); line-height:1.25; letter-spacing:.2px; margin:0 0 .5em; }
p{ margin:0 0 1em; }
a{ color:var(--c-secondary); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
::selection{ background:rgba(179,185,39,.35); }

.container{ width:min(1120px, 92%); margin-inline:auto; }

/* —— 顶部导航 —— */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,251,248,.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px dashed var(--c-line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0; }
.brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--c-ink); }
.brand:hover{ text-decoration:none; }
.brand svg{ flex:none; filter:drop-shadow(0 3px 6px rgba(44,44,27,.18)); }
.brand .brand-sub{ display:block; font-family:var(--font-body); font-size:.72rem; font-weight:400; color:var(--c-ink-2); letter-spacing:.14em; }

.nav-links{ display:flex; gap:.3rem; align-items:center; }
.nav-links a{
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  color:var(--c-ink); padding:.5rem .95rem; border-radius:999px;
  transition:background .2s, color .2s, transform .2s;
}
.nav-links a:hover{ background:rgba(179,185,39,.16); text-decoration:none; transform:translateY(-1px); }
.nav-links a.active{ background:var(--c-primary); color:#fff; box-shadow:var(--shadow-sm); }
.nav-cta{
  font-family:var(--font-display); font-weight:700; font-size:.92rem;
  background:var(--c-accent); color:var(--c-ink); padding:.55rem 1.15rem; border-radius:999px;
  box-shadow:0 6px 16px -8px rgba(120,223,32,.7); transition:transform .2s, box-shadow .2s;
}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -8px rgba(120,223,32,.8); text-decoration:none; }

.menu-btn{ display:none; background:none; border:2px solid var(--c-line); border-radius:12px; width:44px; height:44px; cursor:pointer; position:relative; }
.menu-btn span{ position:absolute; left:12px; right:12px; height:3px; border-radius:3px; background:var(--c-ink); transition:.25s; }
.menu-btn span:nth-child(1){ top:14px; } .menu-btn span:nth-child(2){ top:20px; } .menu-btn span:nth-child(3){ top:26px; }
.menu-btn.open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* —— 通用按钮 —— */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  border:0; border-radius:999px; padding:.8rem 1.6rem; cursor:pointer;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  text-decoration:none; line-height:1.2;
}
.btn:active{ transform:translateY(1px) scale(.98); }
.btn-primary{ background:var(--c-accent); color:var(--c-ink); box-shadow:0 8px 20px -8px rgba(120,223,32,.75); }
.btn-primary:hover{ background:#6fd31d; color:var(--c-ink); transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(120,223,32,.85); }
.btn-outline{ background:var(--c-card); color:var(--c-ink); border:2px solid var(--c-line); box-shadow:var(--shadow-sm); }
.btn-outline:hover{ border-color:var(--c-primary); color:var(--c-primary); transform:translateY(-2px); }
.btn-ghost{ background:rgba(179,185,39,.14); color:var(--c-ink); }
.btn-ghost:hover{ background:rgba(179,185,39,.24); transform:translateY(-2px); }
.btn-secondary{ background:var(--c-secondary); color:#fff; box-shadow:0 8px 20px -8px rgba(65,150,200,.7); }
.btn-secondary:hover{ background:#3a88b7; color:#fff; transform:translateY(-2px); }
.btn-sm{ padding:.5rem 1.05rem; font-size:.9rem; }
.btn-block{ width:100%; justify-content:center; }

/* —— 标签 / 小徽章 —— */
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--font-display); font-weight:600; font-size:.8rem;
  color:var(--c-ink-2); background:var(--c-card);
  border:1px solid var(--c-line); border-radius:999px; padding:.28rem .8rem;
}
.chip-primary{ background:rgba(179,185,39,.16); border-color:rgba(179,185,39,.35); color:#5d6213; }
.chip-secondary{ background:rgba(65,150,200,.12); border-color:rgba(65,150,200,.35); color:#25607f; }
.chip-accent{ background:rgba(120,223,32,.16); border-color:rgba(120,223,32,.4); color:#3f7407; }

/* 印章式编号徽章 */
.stamp{
  font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--c-ink);
  background:var(--c-card); border:2px dashed var(--c-primary); border-radius:12px;
  padding:.35rem .8rem; transform:rotate(-3deg); display:inline-block;
  box-shadow:var(--shadow-sm);
}

/* —— 首页 · Hero —— */
.hero{
  position:relative;
  padding:4.2rem 0 3.6rem;
  background:
    radial-gradient(rgba(179,185,39,.13) 1.5px, transparent 1.6px);
  background-size:26px 26px;
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M0 7 Q15 1 30 7 T60 7 T90 7 T120 7' fill='none' stroke='%23b3b927' stroke-opacity='.55' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:120px 14px;
  opacity:.8;
}
.hero-inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:2.6rem; align-items:center; }
.hero-badge{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:700; font-size:.86rem; color:#5d6213; background:rgba(179,185,39,.18); border:1px dashed rgba(179,185,39,.6); border-radius:999px; padding:.4rem 1rem; margin-bottom:1.2rem; }
.hero h1{ font-size:clamp(2.2rem, 5.2vw, 3.6rem); font-weight:700; margin-bottom:.4em; }
.hero h1 .hl{ color:var(--c-primary); position:relative; white-space:nowrap; }
.hero h1 .hl::after{ content:""; position:absolute; left:0; right:0; bottom:.06em; height:.18em; background:rgba(120,223,32,.45); border-radius:4px; z-index:-1; }
.hero p.lead{ font-size:1.12rem; color:var(--c-ink-2); max-width:34em; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem; }
.hero-facts{ display:flex; gap:1.4rem; margin-top:2rem; font-family:var(--font-display); color:var(--c-ink-2); font-size:.9rem; flex-wrap:wrap; }
.hero-facts b{ display:block; font-size:1.35rem; color:var(--c-ink); }

/* 旋转的手绘太阳 + 叶片装饰 */
.hero-art{ position:relative; display:flex; justify-content:center; align-items:center; min-height:300px; }
.sun-badge{ animation:floaty 6s ease-in-out infinite; }
.sun-badge svg{ width:min(340px, 78vw); height:auto; filter:drop-shadow(0 18px 30px rgba(44,44,27,.18)); }
.leaf-a{ position:absolute; top:8%; left:6%; animation:floaty 5s ease-in-out infinite reverse; }
.leaf-b{ position:absolute; bottom:6%; right:4%; animation:floaty 7s ease-in-out 1s infinite; }
.leaf-a svg,.leaf-b svg{ width:64px; height:64px; filter:drop-shadow(0 6px 12px rgba(44,44,27,.16)); }
.hero-note{
  position:absolute; left:0; bottom:6%;
  font-family:var(--font-display); font-size:.82rem; font-weight:600; color:var(--c-ink);
  background:var(--c-card); border:1px solid var(--c-line); border-radius:14px;
  padding:.6rem .95rem; box-shadow:var(--shadow-md); transform:rotate(-4deg); max-width:200px;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }

/* —— 季节观察带 —— */
.seasons{ padding:3.4rem 0 1rem; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.section-head h2{ font-size:1.9rem; margin:0; }
.section-head h2 .dot{ color:var(--c-primary); }
.section-head p{ margin:0; color:var(--c-ink-2); }
.season-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.season-card{
  position:relative; background:var(--c-card); border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:1.5rem 1.2rem; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
.season-card:hover{ transform:translateY(-6px) rotate(-.6deg); box-shadow:var(--shadow-md); }
.season-card .emo{ font-size:2.3rem; display:block; margin-bottom:.5rem; }
.season-card h3{ font-size:1.15rem; margin-bottom:.25rem; }
.season-card p{ font-size:.92rem; color:var(--c-ink-2); margin:0 0 .7rem; }
.season-card a.season-link{ font-family:var(--font-display); font-weight:700; font-size:.9rem; }
.season-card .tag-wrap{ position:absolute; top:1.1rem; right:1.1rem; }

/* —— 实验列表 —— */
.experiments{ padding:2.4rem 0 3.4rem; }
.experiment-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.exp-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:1.6rem 1.5rem 1.4rem; box-shadow:var(--shadow-sm); text-decoration:none; color:var(--c-ink);
  transition:transform .28s ease, box-shadow .28s ease;
}
.exp-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); text-decoration:none; }
.exp-card:hover .exp-emo{ transform:rotate(-8deg) scale(1.1); }
.exp-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1rem; }
.exp-emo{
  font-size:2.6rem; line-height:1;
  background:linear-gradient(135deg, rgba(179,185,39,.22), rgba(120,223,32,.16));
  border-radius:var(--r); width:74px; height:74px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .28s ease;
}
.exp-tags{ display:flex; flex-direction:column; gap:.4rem; align-items:flex-end; }
.exp-card h3{ font-size:1.28rem; margin:0 0 .35rem; }
.exp-intro{ color:var(--c-ink-2); font-size:.98rem; flex:1; }
.exp-meta{ display:flex; gap:1rem; font-family:var(--font-display); font-size:.82rem; color:var(--c-ink-2); margin-top:1rem; padding-top:.9rem; border-top:1px dashed var(--c-line); }
.exp-meta span{ display:inline-flex; align-items:center; gap:.3rem; }
.exp-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:1rem; }
.exp-go{ font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--c-secondary); display:inline-flex; gap:.35rem; align-items:center; transition:gap .2s; }
.exp-card:hover .exp-go{ gap:.6rem; }
.diff{ display:inline-flex; gap:3px; }
.diff i{ width:9px; height:9px; border-radius:50%; background:var(--c-line); display:block; }
.diff i.on{ background:var(--c-accent); }

/* —— 今日任务卡（首页） —— */
.today-card{
  margin-top:2.6rem; display:grid; grid-template-columns:auto 1fr auto; gap:1.4rem; align-items:center;
  background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:1.6rem 1.8rem; box-shadow:var(--shadow-md);
  position:relative;
}
.today-card::before{ content:""; position:absolute; inset:8px; border:1px dashed rgba(179,185,39,.4); border-radius:calc(var(--r-lg) - 8px); pointer-events:none; }
.today-emo{ font-size:2.6rem; background:rgba(65,150,200,.14); border-radius:var(--r); width:78px; height:78px; display:flex; align-items:center; justify-content:center; }
.today-card h3{ margin:0 0 .2rem; }
.today-card p{ margin:0; color:var(--c-ink-2); font-size:.98rem; }

/* —— 通用页面头部 —— */
.page-head{ padding:3rem 0 1.4rem; }
.page-head h1{ font-size:clamp(1.9rem,4vw,2.7rem); margin-bottom:.3em; }
.page-head .sub{ color:var(--c-ink-2); max-width:42em; }
.breadcrumb{ font-family:var(--font-display); font-size:.9rem; margin-bottom:1rem; display:flex; gap:.5rem; align-items:center; color:var(--c-ink-2); }
.breadcrumb a{ color:var(--c-ink-2); }
.breadcrumb a:hover{ color:var(--c-secondary); }

/* —— 实验详情页 —— */
.exp-hero{
  background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); padding:2.2rem 2.4rem; display:grid; grid-template-columns:auto 1fr; gap:1.8rem;
  align-items:center; margin-bottom:2rem;
}
.exp-hero .exp-big-emo{ font-size:4.2rem; line-height:1; background:linear-gradient(135deg, rgba(179,185,39,.24), rgba(120,223,32,.18)); width:120px; height:120px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
.exp-hero h1{ font-size:clamp(1.7rem,3.6vw,2.5rem); margin:0 0 .4em; }
.exp-hero .meta-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.7rem; }

.detail-layout{ display:grid; grid-template-columns:1fr 340px; gap:2rem; align-items:start; }
.article{ background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r-lg); padding:2.2rem 2.4rem; box-shadow:var(--shadow-sm); }
.article h2{
  font-size:1.4rem; display:flex; align-items:center; gap:.6rem;
  margin:1.8em 0 .8em; padding-bottom:.4em; border-bottom:2px dashed var(--c-line);
}
.article h2:first-child{ margin-top:0; }
.article h2 .no{
  font-size:.95rem; color:#fff; background:var(--c-primary); border-radius:10px;
  padding:.2rem .55rem; font-weight:700; letter-spacing:.02em;
}
.article h3{ font-size:1.15rem; margin-top:1.4em; color:var(--c-primary); }
.article p{ margin:0 0 .9em; }
.article ul,.article ol{ padding-left:1.3em; margin:0 0 1em; }
.article li{ margin-bottom:.35em; }
.article strong{ color:var(--c-ink); font-weight:700; }
.article code{ font-family:ui-monospace,Consolas,monospace; font-size:.9em; background:rgba(179,185,39,.14); border-radius:6px; padding:.1em .4em; }
.article blockquote{
  margin:1em 0; padding:.7em 1.1em; background:rgba(65,150,200,.08);
  border-left:4px solid var(--c-secondary); border-radius:0 var(--r) var(--r) 0; color:var(--c-ink);
}

.side-col{ display:grid; gap:1.4rem; position:sticky; top:90px; }
.panel{ background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r-lg); padding:1.5rem 1.6rem; box-shadow:var(--shadow-sm); }
.panel h3{ font-family:var(--font-display); font-size:1.08rem; margin:0 0 .7em; display:flex; align-items:center; gap:.5rem; }
.panel.safety{ border-left:5px solid var(--c-secondary); }
.panel.science{ border-left:5px solid var(--c-accent); }
.panel.supplies h3{ color:var(--c-primary); }
.supplies-list{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.supplies-list li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.98rem; }
.supplies-list li::before{ content:"✿"; color:var(--c-primary); font-weight:700; }

/* —— 观察日记页 —— */
.diary-hero{ padding:2.6rem 0 1.4rem; }
.diary-layout{ display:grid; grid-template-columns:400px 1fr; gap:2rem; align-items:start; }
.diary-form{ background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r-lg); padding:1.8rem 1.9rem; box-shadow:var(--shadow-md); position:sticky; top:90px; }
.diary-form h2{ font-size:1.35rem; margin:0 0 .2em; }
.diary-form .form-hint{ color:var(--c-ink-2); font-size:.9rem; margin-bottom:1.3rem; }

.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-family:var(--font-display); font-weight:700; font-size:.92rem; margin-bottom:.4rem; }
.field label .req{ color:var(--c-secondary); }
.field input[type="text"], .field input[type="date"], .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--c-ink);
  background:var(--c-bg); border:2px solid var(--c-line); border-radius:var(--r);
  padding:.7rem .95rem; transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--c-primary); box-shadow:var(--ring-focus); background:var(--c-card);
}
.field textarea{ min-height:150px; resize:vertical; }

.mood-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.mood-btn{
  font-size:1.5rem; background:var(--c-bg); border:2px solid var(--c-line); border-radius:14px;
  width:52px; height:52px; cursor:pointer; transition:transform .15s, border-color .15s, background .15s;
  display:flex; align-items:center; justify-content:center;
}
.mood-btn:hover{ transform:translateY(-3px); }
.mood-btn.active{ border-color:var(--c-accent); background:rgba(120,223,32,.18); transform:scale(1.08); box-shadow:0 0 0 3px rgba(120,223,32,.25); }

.upload-zone{
  border:2px dashed var(--c-line); border-radius:var(--r); padding:1rem; text-align:center;
  cursor:pointer; transition:border-color .2s, background .2s; background:var(--c-bg);
}
.upload-zone:hover, .upload-zone.drag{ border-color:var(--c-primary); background:rgba(179,185,39,.08); }
.upload-zone .up-emo{ font-size:1.8rem; display:block; }
.upload-zone p{ margin:0; font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--c-ink-2); }
.upload-zone input[type="file"]{ display:none; }
.img-preview{ margin-top:.8rem; position:relative; display:none; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); }
.img-preview img{ width:100%; max-height:220px; object-fit:cover; }
.img-preview .rm-img{ position:absolute; top:8px; right:8px; border:0; border-radius:10px; background:rgba(44,44,27,.7); color:#fff; width:34px; height:34px; font-size:1.1rem; cursor:pointer; }

/* 日记条目列表 */
.entries-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; flex-wrap:wrap; gap:.8rem; }
.entries-head h2{ margin:0; font-size:1.5rem; }
.entries-count{ font-family:var(--font-display); font-size:.9rem; color:var(--c-ink-2); background:var(--c-card); border:1px solid var(--c-line); border-radius:999px; padding:.3rem .9rem; }
.entries-list{ display:grid; gap:1.2rem; }
.entry-card{
  background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .25s, box-shadow .25s;
}
.entry-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.entry-img{ width:100%; max-height:280px; object-fit:cover; background:var(--c-bg); }
.entry-body{ padding:1.2rem 1.5rem 1.4rem; }
.entry-meta{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; }
.entry-card h3{ font-size:1.22rem; margin:0 0 .5em; }
.entry-text{ color:var(--c-ink); white-space:pre-wrap; font-size:.98rem; }
.entry-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:1rem; padding-top:.9rem; border-top:1px dashed var(--c-line); }
.entry-foot .when{ font-family:var(--font-display); font-size:.82rem; color:var(--c-ink-2); }
.del-btn{
  border:2px solid var(--c-line); background:var(--c-card); color:var(--c-ink-2);
  font-family:var(--font-display); font-size:.85rem; font-weight:700; border-radius:999px;
  padding:.35rem .95rem; cursor:pointer; transition:all .2s;
}
.del-btn:hover{ border-color:var(--c-secondary); color:var(--c-secondary); transform:translateY(-1px); }

/* 空状态 */
.empty-state{
  background:var(--c-card); border:1px dashed var(--c-line); border-radius:var(--r-lg);
  padding:3.2rem 2rem; text-align:center; box-shadow:var(--shadow-sm);
}
.empty-state .emo-big{ font-size:3.6rem; display:block; margin-bottom:.8rem; animation:floaty 5s ease-in-out infinite; }
.empty-state h3{ margin:0 0 .4em; }
.empty-state p{ color:var(--c-ink-2); margin:0 0 1.2rem; }

/* —— 页脚 —— */
.site-footer{ margin-top:3.5rem; border-top:1px dashed var(--c-line); background:rgba(179,185,39,.07); }
.footer-inner{ padding:2.4rem 0; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
.footer-inner h4{ font-family:var(--font-display); font-size:1rem; margin:0 0 .6em; }
.footer-inner p{ color:var(--c-ink-2); font-size:.92rem; margin:0; }
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.footer-links a{ font-family:var(--font-display); font-size:.92rem; color:var(--c-ink-2); }
.footer-links a:hover{ color:var(--c-secondary); }
.footer-bottom{ border-top:1px dashed var(--c-line); padding:1.1rem 0; text-align:center; color:var(--c-ink-2); font-size:.85rem; font-family:var(--font-display); }
.footer-bottom b{ color:var(--c-primary); }

/* —— 微动效 / 入场 —— */
.reveal{ opacity:0; transform:translateY(20px); }
.reveal.in{ animation:fadeUp .65s cubic-bezier(.22,.8,.35,1) forwards; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none;} }
@keyframes popIn{ 0%{ opacity:0; transform:scale(.9);} 100%{ opacity:1; transform:none;} }
.pop-in{ animation:popIn .35s ease both; }

/* toast 提示 */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px);
  font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--c-ink);
  background:var(--c-card); border:2px solid var(--c-accent); border-radius:14px;
  padding:.7rem 1.4rem; box-shadow:var(--shadow-lg); z-index:100; opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* —— 响应式 —— */
@media (max-width: 980px){
  .experiment-grid{ grid-template-columns:repeat(2,1fr); }
  .season-grid{ grid-template-columns:repeat(2,1fr); }
  .detail-layout{ grid-template-columns:1fr; }
  .side-col{ position:static; }
  .diary-layout{ grid-template-columns:1fr; }
  .diary-form{ position:static; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-actions,.hero-facts{ justify-content:center; }
  .hero-art{ min-height:260px; }
}
@media (max-width: 680px){
  body{ font-size:15.5px; }
  .menu-btn{ display:block; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:.4rem;
    background:var(--c-bg); border-bottom:1px solid var(--c-line);
    padding:1rem 4%; display:none;
  }
  .nav-links.open{ display:flex; animation:fadeUp .3s ease; }
  .nav-links a{ text-align:center; }
  .nav-links .nav-cta{ text-align:center; }
  .experiment-grid{ grid-template-columns:1fr; }
  .season-grid{ grid-template-columns:1fr 1fr; gap:.8rem; }
  .exp-hero{ grid-template-columns:1fr; text-align:center; }
  .exp-hero .exp-big-emo{ margin-inline:auto; }
  .exp-hero .meta-row{ justify-content:center; }
  .article,.exp-hero,.diary-form{ padding:1.4rem 1.2rem; }
  .today-card{ grid-template-columns:1fr; text-align:center; }
  .today-emo{ margin-inline:auto; }
  .footer-inner{ grid-template-columns:1fr; }
  .hero{ padding-top:2.8rem; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}