/* ============================================================
 * 可乐成长星球 · 全站共用样式（Token 化版本）
 * 主题色只用改 :root 变量，全站生效
 * ============================================================ */
:root{
  --c-primary:      #94C7D9;  /* 浅天青：装饰用（边框/背景/圆点），不做文字色 */
  --c-primary-deep: #3d7a8c;  /* 深青：文字场景用（对比度 4.7:1 达标） */
  --c-heading:      #3d5a66;  /* 标题青灰 */
  --c-accent:       #F4C2C2;  /* 蜜桃粉：标签/装饰 */
  --c-cream:        #F9EAD3;  /* 奶油杏：区块背景 */
  --c-bg:           #FFFCF8;  /* 奶白底 */
  --c-story-bg:     #E4F1F9;  /* 日记卡片底：淡天青，与奶白底拉开层次 */
  --c-text:         #444444;  /* 正文 */
  --c-text-2:       #6a6a6a;  /* 次要文字（原 #777 加深一档） */
  --c-text-3:       #6f6f6f;  /* 小字/日期落款（原 #aaa 加深到 5:1） */
  --c-muted-line:   #f0ece4;
  --shadow-soft:    0 4px 12px rgba(0,0,0,0.04);
  --shadow-sky:     0 6px 18px rgba(90,140,160,.12);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,"PingFang SC",sans-serif;}

/* ===== 手账感标题字体：站酷庆科黄油体 =====
 * OFL 开源协议，可商用；按"常用字+站点用字"子集化后仅 609KB。
 * font-display:swap：字体未加载完先用系统字，不白屏。 */
@font-face{
  font-family:'ZCOOL QingKe HuangYou';
  src:url('../fonts/zcool-qingke-huangyou-sub.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
/* 点缀式应用：标题 / 日期 / 语录金句；正文保持系统字体保证可读与加载速度 */
h1,h2,h3,.date,.q-text{
  font-family:'ZCOOL QingKe HuangYou','PingFang SC',system-ui,sans-serif;
  font-weight:400;letter-spacing:.5px;
}
/* ===== 成长日记正文：何某手写体 Light(300) =====
 * 免费可商用；子集化后约 1.6MB，只有日记正文用到，其他页面不下载。
 * 选 Light 而非 Regular：Regular 笔画偏粗像蘸满墨，Light 才是圆珠笔手写的感觉。 */
@font-face{
  font-family:'Kele Hand';
  src:url('../fonts/kele-hand-sub.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap;
}
body{background:var(--c-bg);color:var(--c-text);min-height:100vh;padding:32px 20px;}
.wrap{max-width:720px;margin:0 auto;}

/* 返回链接 → 胶囊按钮（触摸目标 ≥44px） */
.back{display:inline-block;margin-bottom:22px;padding:9px 18px;background:#fff;
  border:1.5px solid var(--c-primary);border-radius:99px;color:var(--c-primary-deep);
  text-decoration:none;font-size:18px;box-shadow:0 2px 8px rgba(90,140,160,.10);}
.back:hover{background:#f2fafd;}
h1{font-size:30px;margin-bottom:10px;}
.desc{color:var(--c-text-2);font-size:20px;line-height:1.65;margin-bottom:30px;}
.tag{display:inline-block;background:var(--c-accent);color:var(--c-text);font-size:15px;padding:2px 8px;border-radius:99px;}
.footer{margin-top:48px;text-align:center;color:#767676;font-size:17px;line-height:1.9;}
/* 备案号链接：深青保证 4.7:1 对比度，弱化下划线 */
.footer a{color:var(--c-primary-deep);text-decoration:none;border-bottom:1px solid rgba(61,122,140,.35);}
.footer a:hover{color:#2f6274;border-bottom-color:#2f6274;}
img{max-width:100%;}

/* 键盘/辅助设备导航焦点可见 */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid rgba(148,199,217,.65);outline-offset:2px;border-radius:6px;}

/* ===== 首页（渐变天空绘本风 · 版本D） ===== */
.sky{margin:-32px -20px 0;background:linear-gradient(180deg,#BFE0EB 0%,#D9EEF3 45%,#FFFCF8 100%);padding:42px 22px 68px;position:relative;overflow:hidden;}
.clouds{position:absolute;left:0;right:0;bottom:20px;display:flex;justify-content:space-between;padding:0 28px;opacity:.85;}
.clouds span{width:54px;height:20px;background:#fff;border-radius:99px;display:block;box-shadow:14px -8px 0 6px #fff,28px 0 0 4px #fff;}
.clouds span:nth-child(2){transform:scale(.7);opacity:.7;}
.clouds span:nth-child(3){transform:scale(1.15);}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1;}
.avatar{width:118px;height:118px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 8px 24px rgba(90,140,160,.30);display:block;}
.hero h1{font-size:30px;color:var(--c-heading);margin-top:14px;}
.hero .slogan{color:#5f7d8a;font-size:23px;margin-top:6px;}
.hero .wish{color:#57737f;font-size:20px;margin-top:3px;letter-spacing:.5px;}
.intro-block{background:#fff;border-radius:22px;padding:20px 22px;line-height:1.75;color:#4f646e;font-size:18px;box-shadow:0 8px 26px rgba(90,140,160,.16);position:relative;z-index:1;margin:-36px 0 26px;}
.planet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.card{background:#fff;border-radius:22px;padding:18px 16px;text-decoration:none;color:var(--c-heading);box-shadow:var(--shadow-sky);transition:transform .25s ease,box-shadow .25s ease;display:block;}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(90,140,160,.18);}
.card.big{grid-column:span 2;display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#FDF3F0,#EAF5F8);}
.card.big .card-txt{flex:1;}
.card.big .icon{font-size:34px;margin:0;}
.card .icon{font-size:28px;margin-bottom:8px;}
.card h3{font-size:23px;margin-bottom:4px;color:var(--c-heading);}
.card p{font-size:20px;text-wrap:balance;color:#5f7d8a;line-height:1.5;}
.card .tag{margin-top:8px;}

/* ===== 时间轴 ===== */
.timeline{border-left:2px solid var(--c-primary);padding-left:20px;margin-left:4px;}
.timeline-item{position:relative;margin-bottom:28px;}
.timeline-item::before{content:"";width:10px;height:10px;background:var(--c-accent);border-radius:50%;position:absolute;left:-25px;top:4px;}
.timeline-item .date{font-weight:600;color:var(--c-primary-deep);margin-bottom:4px;}
.d-title{font-weight:500;color:#3d5a66;letter-spacing:.5px;}
.timeline-item p{line-height:1.6;color:#555;}
.timeline-item img{width:100%;border-radius:14px;margin-top:8px;aspect-ratio:3/2;object-fit:cover;background:#f3ece2;}

/* ===== 语录（旧版列表样式保留兜底） ===== */
.quote{background:var(--c-cream);border-radius:18px;padding:20px;margin-bottom:16px;position:relative;}
.quote .words{font-size:21px;line-height:1.7;margin-bottom:8px;}
.quote .time{font-size:17px;color:var(--c-text-2);text-align:right;}

/* ===== 作品墙 ===== */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;display:block;background:#f3ece2;}
.item p{text-align:center;margin-top:6px;font-size:18px;color:#5c5c5c;}
.item .a-title{margin-top:8px;font-size:17px;line-height:1.4;text-wrap:balance;}
.item .a-date{margin-top:2px;font-size:15px;color:#8a8a8a;}

/* ===== 日记 ===== */
.article{background:var(--c-story-bg);border-radius:20px;padding:24px;box-shadow:var(--shadow-soft);margin-bottom:20px;}
/* 日记页：卡片左右通栏，蓝底撑到屏幕边缘 */
.story-page .article{margin-left:-10px;margin-right:-10px;border-radius:16px;padding:24px 22px;}
.story-page .article:first-child{margin-top:14px;}
.article .date{color:var(--c-primary-deep);margin-bottom:12px;font-weight:500;font-size:25px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;}
/* 正文用手写体：手写字显小，字号 22px、行高 1.85；标题仍用黄油体 */
.article p{font-family:'Kele Hand','PingFang SC',system-ui,sans-serif;
  font-weight:300;font-synthesis:none;
  font-size:22px;line-height:1.85;letter-spacing:.3px;color:#4f646e;margin-bottom:16px;}
.article img{width:100%;border-radius:14px;aspect-ratio:3/2;object-fit:cover;background:#dcebf4;}
/* 图文混排：插图按原始比例展示，连续多图自动并排 */
.article figure.pic{margin:0 0 14px;}
.article figure.pic img{aspect-ratio:auto;height:auto;object-fit:contain;background:transparent;}
.article figcaption{font-family:'Kele Hand','PingFang SC',system-ui,sans-serif;font-weight:300;font-synthesis:none;
  font-size:18px;line-height:1.7;letter-spacing:.2px;color:#7a8a90;text-align:center;padding:8px 2px 0;}
.article .pic-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.article .pic-row figure.pic{margin:0;}
.article .pic-row figure.pic img{aspect-ratio:1;object-fit:cover;}
/* 电脑宽屏：容器宽 720px，手写体沿用手机字号会显小，放大一档 */
@media (min-width:640px){
  .article .date{font-size:28px;}
  .article p{font-size:24px;line-height:1.9;}
  .article figcaption{font-size:19px;}
}

/* ===== 音频 ===== */
.audio-item{background:#fff;border-radius:20px;padding:20px;margin-bottom:16px;box-shadow:var(--shadow-soft);}
.audio-item h3{font-size:21px;margin-bottom:4px;}
.audio-item .note{color:var(--c-text-2);font-size:18px;margin-bottom:12px;}
audio{width:100%;}
.empty-note{color:var(--c-text-3);font-size:18px;text-align:center;padding:30px 0;}
.audio-item .tag{margin-bottom:10px;}

/* ===== 成长看板 ===== */
table{width:100%;border-collapse:collapse;background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-soft);}
th,td{padding:14px;text-align:center;border-bottom:1px solid #f2f2f2;}
th{background:var(--c-cream);}

/* ===== 密码门 ===== */
.gate-overlay{position:fixed;inset:0;background:var(--c-bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;}
.gate-overlay .gate-planet{font-size:44px;margin-bottom:14px;}
.gate-overlay h2{font-size:24px;margin-bottom:6px;color:var(--c-text);}
.gate-overlay .gate-tip{color:var(--c-text-2);font-size:18px;margin-bottom:22px;}
.gate-overlay input{width:220px;padding:11px 14px;border:2px solid var(--c-primary);border-radius:14px;font-size:20px;outline:none;text-align:center;background:#fff;color:var(--c-text);}
.gate-overlay input:focus{box-shadow:0 0 0 3px rgba(148,199,217,.25);}
.gate-overlay button{margin-top:14px;padding:10px 34px;border:none;border-radius:99px;background:var(--c-primary-deep);color:#fff;font-size:19px;cursor:pointer;transition:transform .2s;}
.gate-overlay button:hover{transform:translateY(-2px);}
.gate-overlay .gate-err{color:#c05656;font-size:17px;height:18px;margin-top:10px;}
.gate-overlay.shake input{animation:shake .35s;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ===== 成长曲线卡片 ===== */
.chart-card{background:#fff;border-radius:20px;padding:18px 12px 10px;box-shadow:var(--shadow-soft);margin-bottom:20px;}

/* ===== 可乐语录 · 散落贴纸墙 ===== */
.q-wall{display:flex;flex-direction:column;padding:6px 0 10px;}
.q-item{position:relative;width:var(--qw,240px);animation:qfloat 4.5s ease-in-out infinite;}
.q-l{align-self:flex-start;margin-left:2%;}
.q-r{align-self:flex-end;margin-right:2%;}
.q-item:only-child{align-self:center;margin:6px 0 10px;}
.q-svg{display:block;width:100%;height:auto;position:relative;z-index:0;}
.q-text{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:19px;line-height:1.55;color:var(--c-text);padding:4px;box-sizing:border-box;text-wrap:balance;}
.q-wide .q-text{font-size:18px;}
.q-date{font-size:16px;color:var(--c-text-3);text-align:center;margin-top:4px;}
@keyframes qfloat{
  0%,100%{transform:rotate(var(--rot,0deg)) translateY(0);}
  50%{transform:rotate(var(--rot,0deg)) translateY(-4px);}
}
.q-item:nth-child(3n){animation-delay:.8s;}
.q-item:nth-child(3n+1){animation-delay:1.6s;}
@media (prefers-reduced-motion:reduce){.q-item{animation:none;}}

/* 各形状：容器宽 + 长句加宽 + 文字区位置 */
.q-cloud{--qw:250px;--qww:320px;}   .q-cloud .q-text{top:30%;left:13%;width:74%;height:42%;}
.q-bubble{--qw:250px;--qww:320px;}  .q-bubble .q-text{top:10%;left:10%;width:80%;height:58%;}
.q-blob{--qw:250px;--qww:320px;}    .q-blob .q-text{top:24%;left:15%;width:70%;height:50%;}
.q-banner{--qw:250px;--qww:320px;}  .q-banner .q-text{top:15%;left:13%;width:72%;height:55%;}
.q-heart{--qw:282px;--qww:344px;}   .q-heart .q-text{top:22%;left:20%;width:60%;height:54%;font-size:18px;}
.q-plane{--qw:240px;--qww:310px;}   .q-plane .q-text{top:25%;left:6%;width:55%;height:38%;}
.q-star{--qw:296px;--qww:340px;}    .q-star .q-text{top:38%;left:16%;width:68%;height:46%;font-size:15px;line-height:1.5;}
.q-ball{--qw:198px;--qww:234px;}    .q-ball .q-text{top:30%;left:20%;width:60%;height:50%;font-size:17px;}
.q-balloon{--qw:182px;--qww:218px;} .q-balloon .q-text{top:11%;left:23%;width:54%;height:56%;font-size:16px;}
.q-moon{--qw:188px;--qww:222px;}    .q-moon .q-text{top:30%;left:6%;width:46%;height:50%;font-size:16px;}
.q-wide{width:var(--qww,var(--qw,240px));}

/* ===== 首页光影相册：卡内滑动轮播（中间大、两侧露一角，可点/可滑） ===== */
.album-card{padding:18px;}
.mini-carousel{position:relative;flex:0 0 44%;border-radius:16px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(90,140,160,.10);padding-bottom:24px;touch-action:pan-y;}
.mc-strip{display:flex;gap:10px;align-items:center;height:auto;transition:transform .65s cubic-bezier(.4,0,.2,1);will-change:transform;}
/* 方图配方框：aspect-ratio 1/1 保证整张照片完整显示，任何屏宽下都不裁人 */
.mc-strip img{flex:0 0 58%;min-width:0;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:12px;opacity:.68;transform:scale(.85);transition:opacity .65s ease,transform .65s ease;box-shadow:0 3px 10px rgba(90,140,160,.14);}
.mc-strip img.on{opacity:1;transform:scale(1);box-shadow:0 6px 16px rgba(90,140,160,.22);}
.mc-dots{position:absolute;left:0;right:0;bottom:7px;display:flex;justify-content:center;gap:5px;z-index:1;}
.mc-dots span{width:16px;height:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.mc-dots span::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(61,122,140,.28);transition:background .3s,transform .3s;}
.mc-dots span.on::after{background:var(--c-primary-deep);transform:scale(1.25);}
@media (max-width:520px){
  .album-card{flex-direction:column;align-items:stretch;gap:12px;}
  .mini-carousel{flex:0 0 auto;width:100%;}
  .mc-strip img{flex:0 0 74%;}
}
@media (prefers-reduced-motion:reduce){.mc-strip,.mc-strip img{transition:none;}}