/* 一年一页 — 视觉基座（阶段一原型）
 * 纸张 / 少色 / 手绘 / 安静。不用渐变堆质感，用极轻的颗粒 + 线条。
 */
:root{
  --paper:#F3EADA;
  --paper-deep:#EADFCA;
  --paper-card:#FBF6EA;
  --ink:#3A3226;
  --ink-2:#6D6353;
  --ink-3:#9A8F7C;
  --line:#D8C9AE;
  --accent:#B45A34;
  --accent-2:#D08A5F;
  --sage:#7E8C71;
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.22,.8,.3,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:#E3D6BE;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}

/* 纸面颗粒 */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

.phone{
  position:relative;
  width:100%;max-width:430px;height:var(--appH,100%);
  margin:0 auto;
  background:var(--paper);
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(58,50,38,.08), 0 24px 60px rgba(58,50,38,.18);
  z-index:1;
}
@media (min-width:520px){ .phone{height:min(var(--appH,100%),900px);border-radius:22px} body{display:flex;align-items:center;justify-content:center} }

/* ---------- 通用 ---------- */
.screen{
  position:absolute;inset:0;
  display:none;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 18px) 22px calc(env(safe-area-inset-bottom) + 18px);
}
.screen.is-active{display:flex;animation:fadeUp .45s var(--ease)}
.no-anim .screen.is-active{animation:none}
.no-anim .sheet,.no-anim .drawer,.no-anim #camera,.no-anim .overlay,.no-anim .dot{transition:none !important}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.btn{
  border:0;font-family:var(--sans);font-size:16px;letter-spacing:.06em;
  padding:14px 26px;border-radius:2px;cursor:pointer;
  transition:transform .18s var(--ease),opacity .18s;
}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--ink);color:#FBF5E8;box-shadow:0 6px 0 -2px rgba(58,50,38,.18)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:transparent;color:#A8482B;border:1px solid #E2C3B4}
.btn.small{padding:10px 18px;font-size:14px}
.btn:disabled{opacity:.45}

.link-quiet{
  background:none;border:0;padding:6px 2px;color:var(--ink-3);
  font-size:13px;font-family:var(--sans);text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:var(--line);cursor:pointer;
}

/* ---------- 开场 ---------- */
.screen-intro{justify-content:flex-start;align-items:center;text-align:center}
.intro-top{flex:0 0 auto;margin-top:11vh}
.intro-art{width:110px;height:140px;overflow:visible}
.art-line{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;opacity:.75;
  stroke-dasharray:200;stroke-dashoffset:0;animation:draw 2.6s var(--ease) .2s}
@keyframes draw{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}

.art-dot{fill:var(--accent);opacity:1;animation:pop .6s var(--ease) .1s}
@keyframes pop{from{opacity:0;transform:scale(.4);transform-origin:80px 34px}to{opacity:1;transform:none}}

.intro-body{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:10px 0;margin-top:16vh}
.title{font-family:var(--serif);font-size:34px;font-weight:400;letter-spacing:.18em;margin:0;text-indent:.18em}
.lead{font-family:var(--serif);font-size:19px;line-height:1.85;color:var(--ink);margin:0}
.hint{font-size:13px;color:var(--ink-3);margin:0;letter-spacing:.04em}

.intro-foot{flex:0 0 auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:auto}
.intro-foot .btn{width:100%;padding:16px}
.privacy{font-size:11.5px;color:var(--ink-3);margin:2px 0 0;letter-spacing:.03em}

/* ---------- 出生信息 ---------- */
.screen-birth{padding-left:22px;padding-right:22px;gap:0}
.birth-scroll{flex:1 1 auto;overflow-y:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.step-label{font-size:11.5px;letter-spacing:.22em;color:var(--ink-3);margin:0 0 26px}
.q{font-family:var(--serif);font-size:17px;font-weight:400;line-height:1.6;margin:0 0 12px;color:var(--ink)}
.q em{font-style:normal;font-size:12px;color:var(--ink-3);font-family:var(--sans);margin-left:6px}
.year-wrap{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--line);padding-bottom:6px}
.year-input{
  flex:1;border:0;background:none;outline:none;
  font-family:var(--serif);font-size:40px;letter-spacing:.06em;color:var(--ink);
  padding:0;width:100%;
}
.year-input::placeholder{color:#CBBDA4}
.year-unit{font-size:14px;color:var(--ink-3)}
.date-row{display:flex;align-items:center;gap:14px;margin:12px 0 30px}
.mini{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.mini select{
  appearance:none;border:1px solid var(--line);background:var(--paper-card);
  border-radius:2px;padding:6px 20px 6px 8px;font-size:13px;color:var(--ink);
  font-family:var(--sans);
}
.date-row .link-quiet{margin-left:auto}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.chips.tight{gap:7px;margin-bottom:20px}
.chip{
  border:1px solid var(--line);background:transparent;color:var(--ink-2);
  font-size:14px;font-family:var(--sans);padding:8px 14px;border-radius:2px;cursor:pointer;
  transition:.18s var(--ease);
}
.chip.sel{background:var(--ink);color:#FBF5E8;border-color:var(--ink)}
.text-input{
  width:100%;border:0;border-bottom:1px solid var(--line);background:none;
  font-family:var(--serif);font-size:19px;color:var(--ink);padding:6px 0;outline:none;
}
.tip-note{font-size:12px;color:var(--ink-3);margin:26px 0 0}
.birth-foot{flex:0 0 auto;padding-top:10px}
.birth-foot .btn{width:100%;padding:15px}

/* ---------- 生长界面 ---------- */
.screen-stage{padding:0}
.hud{
  position:absolute;top:0;left:0;right:0;z-index:6;
  padding:calc(env(safe-area-inset-top) + 16px) 22px 10px;
  display:flex;align-items:flex-end;justify-content:space-between;
  pointer-events:none;
  background:linear-gradient(to bottom,var(--paper) 42%,rgba(243,234,218,0));
}
.hud-year{font-family:var(--serif);font-size:31px;letter-spacing:.04em;line-height:1;color:var(--ink)}
.hud-year em{font-style:normal;font-size:12px;color:var(--ink-3);margin-left:4px;letter-spacing:.1em}
.hud-age{font-size:12.5px;color:var(--ink-3);margin-top:7px;letter-spacing:.08em}
.hud-right{font-size:11px;color:var(--ink-3);letter-spacing:.1em;padding-bottom:4px}

.stage{position:absolute;left:6px;right:6px;top:84px;bottom:112px;overflow:hidden;transition:opacity .28s}
.stage.fade{opacity:0}
.stage svg{display:block;width:100%;height:100%;overflow:hidden}

.dock{
  position:absolute;left:0;right:0;bottom:0;z-index:8;
  padding:0 16px calc(env(safe-area-inset-bottom) + 12px);
  background:linear-gradient(to top,var(--paper) 62%,rgba(243,234,218,0));
  transition:opacity .25s;
}
.dock.hide{opacity:0;pointer-events:none}

/* 一次性的提示：随时可以暂停去编辑（类名独立，别和开场那句 .hint 撞） */
.pause-hint{
  position:absolute;left:50%;bottom:124px;z-index:9;transform:translate(-50%,6px);
  display:flex;align-items:center;gap:7px;max-width:calc(100% - 32px);
  padding:8px 13px;border-radius:999px;
  background:rgba(251,246,234,.96);border:1px solid rgba(216,201,174,.9);
  box-shadow:0 6px 16px -8px rgba(58,50,38,.35);
  font-family:var(--sans);font-size:12px;letter-spacing:.03em;color:var(--ink);
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease);
  white-space:nowrap;
}
.pause-hint.show{opacity:1;transform:translate(-50%,0)}
.no-anim .pause-hint{transition:none}
.pause-hint-ico{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);color:#FBF5E8;font-size:7px;letter-spacing:0;
}
.pause-hint-txt{overflow:hidden;text-overflow:ellipsis}
.drawer-handle{
  width:100%;display:flex;align-items:center;gap:8px;justify-content:center;
  background:var(--paper-card);border:1px solid var(--line);border-bottom:0;
  border-radius:10px 10px 0 0;padding:9px 14px 7px;cursor:pointer;
  font-family:var(--sans);color:var(--ink-2);font-size:12px;letter-spacing:.06em;
}
.grip{width:26px;height:2px;border-radius:2px;background:var(--line);display:block;margin-right:2px}
.drawer-handle b{font-size:9px;color:var(--ink-3);margin-left:auto;font-weight:400}
.ctrl{
  display:flex;align-items:center;gap:8px;
  background:var(--paper-card);border:1px solid var(--line);border-radius:0 0 10px 10px;
  padding:8px;border-top:0;
}
.ctl{
  flex:0 0 auto;height:40px;min-width:44px;border:1px solid var(--line);background:transparent;
  border-radius:6px;color:var(--ink);font-size:14px;font-family:var(--sans);cursor:pointer;
  transition:.16s var(--ease);
}
.ctl:active{background:var(--paper-deep)}
.ctl.txt{font-size:13px;letter-spacing:.04em;padding:0 12px}
.ctl.wide{flex:1 1 auto}

/* 曲线 */
.line-main{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.line-halo{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.06}
.dot{fill:var(--paper-card);stroke:var(--accent);stroke-width:1.8;cursor:pointer;transition:r .9s cubic-bezier(.22,.8,.3,1)}
.dot.skipped{stroke:var(--ink-3);fill:var(--paper)}
.dot.on{fill:var(--accent);stroke:#8F4526;stroke-width:2.2;animation:dotPulse 1.4s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* 回顾气泡：节点上浮起的一句话 */
.bubble{animation:bubbleIn .34s var(--ease) both;transform-origin:center;pointer-events:none}
@keyframes bubbleIn{from{opacity:0;transform:translateY(7px) scale(.97)}to{opacity:1;transform:none}}
.bubble-shadow{fill:rgba(58,50,38,.10)}
.bubble-box{fill:#FDF8EC;stroke:#D8C9AE;stroke-width:1}
.bubble-tail{fill:#FDF8EC;stroke:#D8C9AE;stroke-width:1;stroke-linejoin:round}
.bubble-seam{fill:#FDF8EC;stroke:none}
.bubble-meta{font-family:var(--sans);font-size:9.5px;letter-spacing:.14em;fill:#9A8F7C}
.bubble-txt{font-family:var(--serif);font-size:12px;fill:#3A3226}
.bubble-extra{font-family:var(--serif);font-size:10.5px;fill:#6D6353}
.no-anim .bubble{animation:none}
.dot.new{animation:dotIn .5s var(--ease) both}
@keyframes dotIn{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.dot-label{font-family:var(--sans);font-size:9px;fill:var(--ink-3);letter-spacing:.06em}
.tip-core{fill:var(--accent)}
.tip-halo{fill:var(--accent);opacity:.14}

/* ---------- 底部抽屉 ---------- */
.drawer{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  height:min(58%,480px);
  background:var(--paper-card);
  border-top:1px solid var(--line);
  border-radius:16px 16px 0 0;
  transform:translateY(102%);
  transition:transform .34s var(--ease);
  display:flex;flex-direction:column;
  box-shadow:0 -14px 40px rgba(58,50,38,.13);
}
.drawer.open{transform:none}
.drawer-top{
  display:flex;align-items:center;gap:8px;padding:14px 20px 10px;
  border-bottom:1px solid var(--line);
}
.drawer-title{font-family:var(--serif);font-size:15px}
.drawer-num{font-size:11px;color:var(--ink-3);letter-spacing:.08em}
.drawer-close{margin-left:auto;background:none;border:0;font-size:12.5px;color:var(--ink-3);font-family:var(--sans);cursor:pointer}
.drawer-list{flex:1 1 auto;overflow-y:auto;padding:6px 0}
.drawer-foot{padding:10px 20px calc(env(safe-area-inset-bottom) + 12px);border-top:1px solid var(--line)}
.drawer-foot .btn{width:100%}

.row{
  display:flex;align-items:baseline;gap:10px;
  padding:12px 20px;cursor:pointer;border-bottom:1px solid rgba(216,201,174,.4);
}
.row:active{background:var(--paper-deep)}
.row-year{font-family:var(--serif);font-size:14px;color:var(--accent);min-width:42px;letter-spacing:.02em}
.row-label{font-size:14px;color:var(--ink);flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-tag{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em}
.row.is-skip .row-label{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line)}
.row-empty{padding:30px 20px;font-size:13px;color:var(--ink-3);text-align:center}

/* ---------- 卡片 ---------- */
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:30;
  max-height:84%;
  background:var(--paper-card);
  border-top:1px solid var(--line);
  border-radius:16px 16px 0 0;
  transform:translateY(103%);
  transition:transform .36s var(--ease);
  box-shadow:0 -18px 50px rgba(58,50,38,.16);
  display:flex;flex-direction:column;
}
.sheet.open{transform:none}
.sheet-body{padding:18px 22px calc(env(safe-area-inset-bottom) + 16px);overflow-y:auto}

.n-illus{
  height:78px;display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid rgba(216,201,174,.5);border-radius:5px;margin-bottom:13px;
}
.n-illus svg{height:70px;width:auto}
.n-illus path,.n-illus circle,.n-illus rect,.n-illus line{
  fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8;
}
.n-meta{font-size:11.5px;color:var(--ink-3);letter-spacing:.12em;margin:0 0 6px}
.n-q{font-family:var(--serif);font-size:19px;font-weight:400;line-height:1.55;margin:0 0 12px}

.n-opts{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.opt{
  display:flex;align-items:center;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:12px 2px;font-size:15px;font-family:var(--sans);color:var(--ink);cursor:pointer;
  transition:padding .16s var(--ease),color .16s;
}
.opt:active{padding-left:8px;color:var(--accent)}
.opt.opt-sub{color:var(--ink-3);font-size:13.5px}
.opt-input{
  width:100%;border:0;border-bottom:1px solid var(--line);background:none;
  padding:12px 2px;font-size:15px;font-family:var(--sans);color:var(--ink);outline:none;
  margin-bottom:8px;
}
.group-label{font-size:12px;color:var(--ink-3);letter-spacing:.1em;margin:16px 0 8px}
.group-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}

.n-result{margin-top:16px}
.n-sent{
  font-family:var(--serif);font-size:17px;line-height:1.9;color:var(--ink);
  margin:0 0 14px;padding:16px 16px 16px 18px;
  background:var(--paper);border-left:2px solid var(--accent-2);border-radius:0 6px 6px 0;
  animation:fadeUp .4s var(--ease) both;
}
.n-extra{position:relative;margin-bottom:10px}
.n-extra textarea, .field textarea, #memText{
  width:100%;border:1px solid var(--line);border-radius:6px;background:var(--paper);
  padding:11px 12px;font-size:14px;font-family:var(--sans);color:var(--ink);
  resize:none;outline:none;line-height:1.7;min-height:64px;
}
.counter{position:absolute;right:9px;bottom:7px;font-size:10px;color:var(--ink-3)}
.n-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}

.small-sheet{max-height:76%}
.d-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.d-head span{font-family:var(--serif);font-size:16px}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:12px;color:var(--ink-3);margin-bottom:6px;letter-spacing:.08em}
.field input{
  width:100%;border:1px solid var(--line);border-radius:6px;background:var(--paper);
  padding:10px 12px;font-size:16px;font-family:var(--serif);color:var(--ink);outline:none;
  letter-spacing:.08em;
}
.field textarea{min-height:70px}
.d-note{font-size:11.5px;color:var(--ink-3);margin:0 0 14px;line-height:1.6}
.d-actions{display:flex;gap:10px;justify-content:space-between}
.d-actions .btn{flex:1 1 auto}
.field-label{font-size:12px;color:var(--ink-3);letter-spacing:.08em;margin:0 0 8px}
.field-label em{font-style:normal;font-size:11px;margin-left:4px}
#memText{min-height:60px;margin-bottom:16px}
.year-wrap.small .year-input{font-size:26px}

/* ---------- 完成 ---------- */
.overlay{
  position:absolute;inset:0;z-index:40;display:flex;align-items:flex-end;
  background:linear-gradient(to bottom,
    rgba(243,234,218,0) calc(100% - var(--doneH,380px) - 96px),
    rgba(243,234,218,.55) calc(100% - var(--doneH,380px) - 40px),
    rgba(243,234,218,.97) calc(100% - var(--doneH,380px) + 6px),
    var(--paper) calc(100% - var(--doneH,380px) + 12px));
  opacity:0;pointer-events:none;transition:opacity .45s;
}
.overlay.open{opacity:1;pointer-events:auto}
.done-card{
  width:100%;padding:0 26px calc(env(safe-area-inset-bottom) + 26px);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.done-1{font-family:var(--serif);font-size:21px;line-height:1.95;margin:6px 0 0}
.done-2{font-size:12px;color:var(--ink-3);letter-spacing:.1em;margin:0 0 8px}
.done-actions{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.done-note{font-size:11px;color:var(--ink-3);margin:4px 0 0}

/* ---------- toast ---------- */
.toast{
  position:absolute;left:50%;bottom:96px;transform:translate(-50%,10px);
  background:rgba(58,50,38,.92);color:#FBF5E8;font-size:12.5px;letter-spacing:.04em;
  padding:9px 16px;border-radius:2px;opacity:0;pointer-events:none;
  transition:.28s var(--ease);z-index:60;white-space:nowrap;
}
.toast.show{opacity:1;transform:translate(-50%,0)}