/* ============ 和好以后 · 样式 ============ */
:root{
  --bg:#FAF5EE;
  --card:#FFFFFF;
  --ink:#453F39;
  --ink-soft:#777067;
  --muted:#A89D92;
  --line:#EDE3D7;
  --accent:#C9785C;
  --accent-deep:#A85B3E;
  --accent-soft:#F6E7DF;
  --sage:#7C9878;
  --sage-deep:#54724F;
  --sage-soft:#EAF0E6;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:#F6E9E7 url('bg-pattern.jpg') repeat center top / 720px auto;
  color:var(--ink);
  font-size:15px;
  line-height:1.6;
}
button{touch-action:manipulation;font-family:inherit;}
#app{
  max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;
  background:linear-gradient(rgba(255,251,249,.68),rgba(255,251,249,.68)),url('bg-pattern.jpg') repeat-y center top / 100% auto;
  box-shadow:0 0 44px rgba(88,66,50,.14);
  display:flex;flex-direction:column;position:relative;
}
.page{flex:1;padding:22px 20px 108px;display:flex;flex-direction:column;gap:15px;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.view-enter{animation:fadeUp .28s ease;}
@media (prefers-reduced-motion: reduce){
  .view-enter,.breath-circle.running{animation:none;}
  *{transition:none !important;}
}

/* ---------- 通用 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 2px 10px rgba(88,66,50,.04);}
.h2{font-size:21px;font-weight:700;line-height:1.5;}
.lead{font-size:13.5px;color:var(--muted);line-height:1.85;}
.muted{color:var(--muted);}
.small{font-size:12.5px;}
.section-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:7px;margin-top:6px;}
.section-title .ic{color:var(--accent);}
.ic{display:inline-flex;}
.ic svg{width:18px;height:18px;}
.foot-note{text-align:center;font-size:12px;color:#C6BAAA;margin-top:6px;}

/* ---------- 照片轮播 ---------- */
.photo-label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;margin:4px 0 -7px;}
.photo-label .ic{color:var(--accent);}
.photo-label .ic svg{width:14px;height:14px;}
.carousel{position:relative;border-radius:18px;overflow:hidden;background:#EFE4D8;box-shadow:0 2px 10px rgba(88,66,50,.06);}
.car-track{display:flex;transition:transform .45s ease;}
.car-slide{flex:0 0 100%;}
.car-slide img{width:100%;height:198px;object-fit:cover;display:block;}
.car-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:6px;justify-content:center;pointer-events:none;}
.car-dot{width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.55);border:none;padding:0;cursor:pointer;transition:all .25s ease;pointer-events:auto;}
.car-dot.on{background:#fff;width:20px;}
.result-photo{border-radius:14px;overflow:hidden;margin-bottom:12px;}
.result-photo img{width:100%;height:136px;object-fit:cover;display:block;}
.step-photos{display:flex;gap:12px;justify-content:center;align-items:center;padding:12px 0 4px;}
.step-photo{flex:none;display:flex;justify-content:center;align-items:center;}
.step-photos.double .step-photo img{height:214px;}
.step-photos.single .step-photo img{height:264px;}
.step-photo img{width:auto;max-width:46vw;object-fit:contain;border-radius:10px;border:5px solid #fff;background:#fff;box-shadow:0 10px 24px rgba(88,66,50,.16),0 2px 8px rgba(88,66,50,.10);transform:rotate(-1.2deg);}

.btn{border:none;border-radius:16px;padding:15px 18px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(201,120,92,.28);}
.btn.primary:active{transform:scale(.98);}
.btn.primary:disabled{background:#E2D3C6;box-shadow:none;cursor:default;}
.btn.ghost{background:#fff;color:var(--ink-soft);border:1px solid var(--line);font-weight:500;}
.btn.ghost:active{transform:scale(.98);}
.btn.danger{background:#C56A5A;color:#fff;}
.btn.small{padding:9px 14px;font-size:13.5px;border-radius:12px;}
.btn.big{padding:17px;font-size:17px;border-radius:18px;}
.linklike{background:none;border:none;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.linklike.danger{color:#C56A5A;}

.subhead{display:flex;align-items:center;gap:10px;min-height:34px;}
.backbtn{width:34px;height:34px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;}
.backbtn svg{width:17px;height:17px;}
.subhead-note{font-size:13px;color:var(--muted);flex:1;}

/* ---------- 首页 ---------- */
.home-head{padding:30px 4px 4px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}
.logo{width:52px;height:52px;position:relative;margin-bottom:8px;}
.logo::before,.logo::after{content:'';position:absolute;top:2px;width:36px;height:36px;border-radius:50%;}
.logo::before{left:1px;background:rgba(201,120,92,.8);}
.logo::after{right:1px;background:rgba(124,152,120,.72);mix-blend-mode:multiply;}
.home-head h1{font-size:25px;letter-spacing:6px;font-weight:700;text-indent:6px;}
.tagline{font-size:13px;color:var(--muted);line-height:1.9;}
.ac-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;}
.ac-title{font-weight:700;font-size:16px;margin-bottom:3px;}
.ac-sub{font-size:13px;color:var(--muted);margin-bottom:14px;}
.ac-rv{font-size:12px;color:#A3623C;}
.active-card .btn{width:100%;}
.lc-label{font-size:12.5px;color:var(--muted);font-weight:600;}
.lc-date{font-weight:700;margin:2px 0 10px;}
.hist-sub{font-size:12.5px;color:var(--muted);margin-top:9px;}
.empty{text-align:center;color:var(--muted);font-size:13.5px;line-height:1.9;padding:16px 8px;}
.empty .btn{margin:14px auto 0;}

/* ---------- 标签 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;color:var(--ink-soft);cursor:pointer;transition:all .15s ease;}
.chip.on{background:var(--accent-soft);border-color:#E0A183;color:#A05A3E;font-weight:600;}
.chip.sage{background:var(--sage-soft);border-color:#B9CCB4;color:var(--sage-deep);font-weight:600;}
.chip.readonly{cursor:default;}
.addrow{display:flex;gap:8px;align-items:center;margin-top:2px;}
.addrow input{flex:1;}
.addrow .btn{flex:none;}

/* ---------- 表单 ---------- */
textarea,input[type=text]{
  width:100%;border:1px solid var(--line);background:#FDFAF6;border-radius:14px;
  padding:13px 14px;font-size:15px;font-family:inherit;color:var(--ink);
  resize:vertical;min-height:112px;line-height:1.75;
}
textarea:focus,input[type=text]:focus{outline:none;border-color:#DBA98E;background:#fff;}
input[type=text]{min-height:0;padding:11px 13px;}
.hintbox{display:flex;gap:10px;background:var(--accent-soft);border-radius:16px;padding:13px 14px;font-size:13px;color:#8A5A44;line-height:1.8;align-items:flex-start;}
.hintbox .ic{flex:none;margin-top:3px;color:#C08A6E;}
.stepbody{display:flex;flex-direction:column;gap:12px;}
.step-note{font-size:12.5px;color:var(--muted);}
.progress{height:6px;background:#F0E6DA;border-radius:99px;overflow:hidden;flex:none;}
.progress-fill{height:100%;background:linear-gradient(90deg,#E8B298,var(--accent));border-radius:99px;transition:width .3s ease;}
.fill-nav{display:flex;gap:10px;margin-top:6px;}
.fill-nav .primary{flex:1;}

/* ---------- 情绪强度 ---------- */
.intensity-row{display:flex;gap:5px;justify-content:space-between;}
.intensity-btn{flex:1;aspect-ratio:1/1;border-radius:50%;border:2px solid transparent;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;}
.intensity-btn.b-calm{background:#E7EFE4;color:#5F7A5C;}
.intensity-btn.b-mild{background:#F4ECDC;color:#8A6D3B;}
.intensity-btn.b-warm{background:#F7E4D3;color:#A3623C;}
.intensity-btn.b-high{background:#F6DBD2;color:#B05C44;}
.intensity-btn.b-top{background:#F2CCC0;color:#9C4A33;}
.intensity-btn.sel{border-color:var(--ink);transform:scale(1.14);box-shadow:0 3px 8px rgba(0,0,0,.14);}
.intensity-desc{min-height:56px;margin-top:14px;text-align:center;}
.intensity-desc .id-label{font-weight:700;font-size:15px;display:block;margin-bottom:2px;}
.intensity-desc .id-text{font-size:13px;color:var(--ink-soft);line-height:1.7;}
.intensity-desc.b-calm .id-label{color:#5F7A5C;}
.intensity-desc.b-mild .id-label{color:#8A6D3B;}
.intensity-desc.b-warm .id-label{color:#A3623C;}
.intensity-desc.b-high .id-label{color:#B05C44;}
.intensity-desc.b-top .id-label{color:#9C4A33;}

/* ---------- 冷静页 ---------- */
.breath-wrap{position:relative;height:184px;display:flex;align-items:center;justify-content:center;}
.breath-ring{position:absolute;width:172px;height:172px;border-radius:50%;border:1.5px dashed #E3CDBB;}
.breath-circle{width:128px;height:128px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F2C9B4,#DE9A79);box-shadow:0 12px 30px rgba(201,120,92,.32);transform:scale(.85);}
.breath-circle.running{animation:breathe 8s ease-in-out infinite;}
@keyframes breathe{0%,100%{transform:scale(.85);}50%{transform:scale(1.06);}}
.breath-label{position:absolute;font-size:15px;color:#fff;font-weight:600;text-shadow:0 1px 6px rgba(120,60,30,.35);letter-spacing:2px;}
.breath-count{text-align:center;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:10px;}
.cool-actions{display:flex;flex-direction:column;gap:11px;}
.quote-card{text-align:center;background:linear-gradient(180deg,#FFFFFF,#FDF6F0);}
.quote{font-size:16.5px;color:#7A5140;line-height:1.85;font-weight:600;}
.quote-sub{font-size:12.5px;color:var(--muted);margin:9px 0 13px;}
.card-title{font-size:15px;font-weight:700;margin-bottom:4px;}
.hint-inline{font-size:12.5px;color:var(--muted);margin-bottom:10px;}
.later-msg{text-align:center;font-size:14.5px;line-height:2;color:var(--ink-soft);}
.later-msg b{color:var(--accent-deep);}
.room-code{font-size:32px;font-weight:700;letter-spacing:8px;text-indent:8px;color:var(--accent-deep);text-align:center;margin:4px 0 2px;font-variant-numeric:tabular-nums;}

/* ---------- 性别选择 ---------- */
.gender-card{display:flex;align-items:center;gap:15px;width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:22px;padding:17px 18px;cursor:pointer;transition:transform .15s ease, border-color .15s ease;font-family:inherit;text-align:left;box-shadow:0 2px 10px rgba(88,66,50,.04);}
.gender-card:active{transform:scale(.98);}
.gender-card.off{opacity:.55;cursor:default;}
.gender-card.off:active{transform:none;}
.gender-badge{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;}
.gender-badge svg{width:36px;height:36px;color:#fff;}
.gender-badge.a{background:linear-gradient(135deg,#E8A183,#C9785C);box-shadow:0 6px 14px rgba(201,120,92,.32);}
.gender-badge.b{background:linear-gradient(135deg,#9DB894,#7C9878);box-shadow:0 6px 14px rgba(124,152,120,.32);}
.gender-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
.gender-name{font-size:17px;font-weight:700;color:var(--ink);}
.gender-sub{font-size:12.5px;color:var(--muted);}
.gender-arrow{color:#D8CCBF;display:flex;flex:none;}
.gender-arrow svg{width:20px;height:20px;transform:rotate(180deg);}

/* ---------- 等待页 ---------- */
.done-icon{width:76px;height:76px;border-radius:50%;background:var(--sage-soft);display:flex;align-items:center;justify-content:center;margin:14px auto 0;color:var(--sage);}
.done-icon svg{width:36px;height:36px;}
.center-head{text-align:center;}
.status-row{display:flex;justify-content:space-between;align-items:center;padding:13px 2px;border-top:1px dashed var(--line);font-size:14.5px;}
.status-row:first-of-type{border-top:none;}
.rowstate{font-size:13px;display:flex;align-items:center;gap:5px;}
.rowstate.ok{color:var(--sage-deep);font-weight:600;}
.rowstate.wait{color:var(--muted);}

/* ---------- 结果页 ---------- */
.rh-top{display:flex;justify-content:space-between;align-items:center;}
.rh-date{font-size:13px;color:var(--muted);font-weight:600;}
.rh-emo{font-size:13px;color:var(--ink-soft);margin-top:13px;padding-top:12px;border-top:1px dashed var(--line);}
.party-head{display:flex;align-items:center;gap:11px;margin-bottom:4px;}
.party-dot{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex:none;}
.party-dot.a{background:#DE9A79;}
.party-dot.b{background:#8FA98A;}
.party-name{font-weight:700;font-size:15.5px;}
.party-time{font-size:11.5px;color:var(--muted);}
.party-row{padding:12px 0 11px;border-top:1px dashed var(--line);margin-top:11px;}
.party-k{font-size:12px;color:var(--muted);margin-bottom:5px;}
.party-v{font-size:14.5px;line-height:1.85;white-space:pre-wrap;word-break:break-word;}
.tip-card{background:linear-gradient(180deg,#FFFDF8,#FBF3E7);border-color:#EFDDBE;}
.tip-title{font-weight:700;font-size:14.5px;color:#8A6D3B;margin-bottom:5px;}
.tip-text{font-size:13.5px;color:var(--ink-soft);line-height:1.85;}
.closing{text-align:center;background:linear-gradient(180deg,#FFFFFF,#F6EFE6);}
.closing p{font-size:14.5px;color:#8A7462;line-height:2;}
.com-group{margin-top:10px;}
.com-label{font-size:12px;color:var(--muted);margin-bottom:7px;}

/* ---------- 历史 / 统计 ---------- */
.hist-item{cursor:pointer;transition:transform .15s ease;}
.hist-item:active{transform:scale(.985);}
.pill{font-size:11.5px;padding:4px 11px;border-radius:999px;font-weight:600;flex:none;}
.pill.sage{background:var(--sage-soft);color:var(--sage-deep);}
.pill.warm{background:#F7E4D3;color:#A3623C;}
.pill.plain{background:#F3EBE1;color:var(--muted);}
.stat-hero{text-align:center;padding:24px 18px;}
.stat-num{font-size:40px;font-weight:700;color:var(--accent-deep);line-height:1.2;}
.stat-sub{font-size:13px;color:var(--muted);margin-top:4px;}
.bar-row{display:flex;align-items:center;gap:10px;margin-top:12px;}
.bar-label{width:80px;font-size:13px;color:var(--ink-soft);flex:none;}
.bar-track{flex:1;height:10px;background:#F3EBE1;border-radius:99px;overflow:hidden;}
.bar-fill{height:100%;background:linear-gradient(90deg,#E8B298,var(--accent));border-radius:99px;transition:width .5s ease;}
.bar-n{width:36px;text-align:right;font-size:12px;color:var(--muted);flex:none;}
.trend-legend{display:flex;gap:16px;justify-content:center;font-size:12px;color:var(--muted);margin-top:6px;}
.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:1px;}
.trend-wrap svg{width:100%;height:auto;display:block;}
.center-foot{text-align:center;margin-top:4px;}

/* ---------- 提交特效 ---------- */
.fx-layer{position:fixed;top:0;bottom:0;left:0;right:0;margin:0 auto;max-width:430px;pointer-events:none;overflow:hidden;z-index:120;}
.fx-petal{position:absolute;top:-44px;will-change:transform,opacity;animation:fxFall var(--d) linear var(--delay) forwards;opacity:0;}
.fx-petal svg{display:block;}
@keyframes fxFall{
  0%{transform:translate(0,-44px) rotate(0deg);opacity:0;}
  10%{opacity:var(--op);}
  82%{opacity:var(--op);}
  100%{transform:translate(var(--dx),108vh) rotate(var(--rot));opacity:0;}
}

/* ---------- Tab 栏 ---------- */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;padding:7px 0 calc(9px + env(safe-area-inset-bottom));z-index:50;}
.tab{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:#B3A79A;cursor:pointer;padding:4px 0;}
.tab.on{color:var(--accent-deep);font-weight:600;}
.tab svg{width:22px;height:22px;}

/* ---------- Toast / Modal ---------- */
.toast{position:fixed;left:50%;bottom:112px;transform:translateX(-50%) translateY(10px);background:rgba(62,54,48,.93);color:#fff;font-size:13.5px;padding:11px 19px;border-radius:999px;opacity:0;transition:all .3s ease;z-index:99;max-width:82%;text-align:center;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.modal-mask{position:fixed;inset:0;background:rgba(50,40,32,.42);display:flex;align-items:center;justify-content:center;z-index:90;padding:34px;animation:fadeIn .18s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes pop{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:scale(1);}}
.modal{background:#fff;border-radius:22px;padding:26px 22px 20px;max-width:340px;width:100%;text-align:center;animation:pop .22s ease;}
.modal h3{font-size:17px;margin-bottom:10px;}
.modal p{font-size:13.5px;color:var(--ink-soft);line-height:1.9;margin-bottom:20px;}
.modal-btns{display:flex;flex-direction:column;gap:10px;}