/* ===========================================================
   HowStyle App Demo
   視覺沿用 ui-templates/howstyle-app-screens.html
   =========================================================== */
:root{
  --purple:#763D8F;
  --purple-deep:#4A1F5F;
  --orange:#EB833F;
  --orange-deep:#CF6A1E;
  --ink:#241A2B;
  --ink2:#6C6175;
  --paper:#FAF7FC;
  --paper2:#F4EEF8;
  --paper-orange:#FDF6F0;
  --white:#FFFFFF;
  /* 秋天色卡（畫面內容用） */
  --caramel:#B5793C;
  --pumpkin:#C96F2E;
  --olive:#6E7645;
  --brick:#A44A3F;
  --camel:#C3A278;
  --milktea:#D9C3A9;
  --ease:cubic-bezier(.22,.8,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:"Microsoft JhengHei","微軟正黑體","Noto Sans TC",sans-serif;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(235,131,63,.10), transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, rgba(118,61,143,.12), transparent 55%),
    var(--paper);
  color:var(--ink);
  height:100vh;
  height:100dvh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-text-size-adjust:100%;
}
button{font:inherit;color:inherit;border:none;background:none;}
input{font:inherit;color:inherit;border:none;background:none;outline:none;}
img{display:block;}

/* ============ App 外殼 ============ */
#app{
  position:relative;
  width:100%;
  max-width:480px;
  height:100vh;
  height:100dvh;
  background:var(--white);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
@media (min-width:520px) and (min-height:720px){
  #app{
    height:min(100dvh - 48px, 900px);
    border-radius:30px;
    box-shadow:0 30px 60px -18px rgba(74,31,95,.32), 0 8px 22px rgba(36,26,43,.12);
  }
}
#viewport{flex:1;position:relative;overflow:hidden;}

.view{
  position:absolute;inset:0;
  display:none;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}
.view.active{display:flex;}
.view.leaving{pointer-events:none;}
.view::-webkit-scrollbar,.scroller::-webkit-scrollbar,.looks::-webkit-scrollbar{width:0;height:0;}

@keyframes viewInFwd{from{opacity:0;transform:translateX(26px);}to{opacity:1;transform:none;}}
@keyframes viewOutFwd{from{opacity:1;transform:none;}to{opacity:0;transform:translateX(-18px);}}
@keyframes viewInBack{from{opacity:0;transform:translateX(-26px);}to{opacity:1;transform:none;}}
@keyframes viewOutBack{from{opacity:1;transform:none;}to{opacity:0;transform:translateX(18px);}}

/* 進場 stagger */
@keyframes stUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.st{animation:stUp .44s var(--ease) both;animation-delay:var(--d,0ms);}

/* ============ 通用點擊回饋 ============ */
.appbar .back,.pill,.endorse,.season-hero,.look-card,.look-card .shop,.entry-banner,
.art-prod,.art-prod .shop,.photo-upload,.name-field,.hw,.fchip,.cdot,.profile-cta,
.includes li,.cmp,.buy-cta,.depth-seg span,.up-card,.ex-card,.btn,.quick-chips span,
.send,.tier-tabs span,.reco-banner,.pcard,.fav,.add,.cart-bar .go,.tab,.day,.slot,
.addon,.lec-cta,.charter .ghost,.book-cta,.ab-chat{
  cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;
}
.appbar .back:active,.look-card:active,.entry-banner:active,.art-prod:active,
.photo-upload:active,.fchip:active,.cdot:active,.profile-cta:active,.cmp:active,
.buy-cta:active,.up-card:active,.btn:active,.quick-chips span:active,.send:active,
.tier-tabs span:active,.pcard:active,.fav:active,.add:active,.cart-bar .go:active,
.day:active,.slot:not(.off):active,.addon:active,.lec-cta:active,.charter .ghost:active,
.book-cta:active,.season-hero:active,.depth-seg span:active,.ab-chat:active{
  transform:scale(.965);
}
.appbar .back,.look-card,.entry-banner,.art-prod,.photo-upload,.fchip,.cdot,.profile-cta,
.cmp,.buy-cta,.up-card,.btn,.quick-chips span,.send,.tier-tabs span,.pcard,.fav,.add,
.cart-bar .go,.day,.slot,.addon,.lec-cta,.charter .ghost,.book-cta,.season-hero,
.depth-seg span,.ab-chat{
  transition:transform .12s var(--ease), background-color .2s ease, border-color .2s ease,
             color .2s ease, box-shadow .2s ease;
}
.slot.off{cursor:not-allowed;}

/* ============ 共用 UI 元件 ============ */
.appbar{padding:14px 20px 14px;display:flex;align-items:center;gap:12px;}
.appbar .back{
  width:32px;height:32px;border-radius:50%;background:var(--paper2);
  display:grid;place-items:center;color:var(--purple);font-size:15px;flex:0 0 32px;
}
.appbar .title{font-size:17px;font-weight:700;letter-spacing:.06em;}
.appbar .sub{font-size:11px;color:var(--ink2);margin-top:2px;}
.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;letter-spacing:.05em;
  padding:4px 10px;border-radius:999px;
}
.pill.orange{background:var(--paper-orange);color:var(--orange-deep);border:1px solid rgba(235,131,63,.35);}
.pill.purple{background:var(--paper2);color:var(--purple);border:1px solid rgba(118,61,143,.25);}

/* ============ 首頁｜季節穿搭特輯 ============ */
.view.s7{background:var(--paper);}
.season-hero{
  margin:2px 16px 0;border-radius:18px;overflow:hidden;position:relative;flex:0 0 auto;
  height:158px;height:clamp(150px, 24dvh, 208px);
}
.season-hero img{width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.season-hero .ol{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px 16px;background:linear-gradient(180deg,rgba(36,26,43,0) 30%,rgba(36,26,43,.62));
}
.season-hero em{font-style:normal;font-family:Georgia,serif;font-size:10px;letter-spacing:.3em;color:#F5C9A5;}
.season-hero b{font-size:17px;color:#fff;letter-spacing:.08em;margin-top:2px;}
.season-hero i{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.82);margin-top:2px;}
.home-sec{
  margin:14px 16px 0;font-size:12.5px;letter-spacing:.12em;color:var(--purple-deep);font-weight:700;
  display:flex;align-items:baseline;gap:8px;flex:0 0 auto;
}
.home-sec::after{content:"";flex:1;height:1px;background:rgba(118,61,143,.15);align-self:center;}
.home-sec small{font-size:10px;color:var(--ink2);font-weight:400;}
.looks{
  display:flex;gap:10px;margin:10px 0 0 16px;padding-right:16px;flex:0 0 auto;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;
}
.look-card{
  flex:0 0 146px;background:var(--white);border-radius:15px;overflow:hidden;scroll-snap-align:start;
  border:1px solid rgba(118,61,143,.1);box-shadow:0 4px 12px rgba(74,31,95,.06);
}
.look-card .lv{height:172px;height:clamp(160px, 25dvh, 216px);position:relative;overflow:hidden;}
.look-card .lv img{width:100%;height:100%;object-fit:cover;object-position:center 12%;}
.look-card .lv .tag{
  position:absolute;top:7px;left:7px;font-size:9.5px;font-weight:700;
  background:rgba(255,255,255,.92);color:var(--purple);padding:3px 8px;border-radius:999px;
}
.look-card .li{padding:8px 10px 10px;}
.look-card .li b{font-size:12px;display:block;}
.look-card .li em{font-style:normal;font-size:10px;color:var(--ink2);display:block;margin-top:1px;}
.look-card .row2{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.look-card .pp{font-size:11.5px;font-weight:700;color:var(--orange-deep);}
.look-card .shop{
  font-size:10px;font-weight:700;color:#fff;background:var(--orange);
  padding:4px 9px;border-radius:9px;letter-spacing:.04em;
}
.endorse{
  margin:10px 16px 0;display:flex;align-items:center;gap:9px;flex:0 0 auto;
  background:var(--paper2);border:1px solid rgba(118,61,143,.18);border-radius:13px;padding:8px 12px;
}
.endorse .em{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  display:grid;place-items:center;color:#fff;font-size:13px;
}
.endorse b{font-size:11.5px;display:block;color:var(--purple-deep);}
.endorse em{font-style:normal;font-size:9.5px;color:var(--ink2);}

/* ============ 職場形象專欄 ============ */
.view.s8{background:var(--white);}
.art-cover{
  margin:2px 16px 0;border-radius:16px;overflow:hidden;position:relative;flex:0 0 auto;
  height:148px;height:clamp(140px, 23dvh, 200px);
}
.art-cover img{width:100%;height:100%;object-fit:cover;object-position:center 14%;}
.art-cover .cat{
  position:absolute;top:9px;left:9px;font-size:9.5px;font-weight:700;
  background:var(--orange);color:#fff;padding:3px 10px;border-radius:999px;letter-spacing:.06em;
}
.art-title{margin:12px 18px 0;font-size:18px;font-weight:700;line-height:1.45;letter-spacing:.02em;flex:0 0 auto;}
.art-meta{
  margin:7px 18px 0;display:flex;align-items:center;gap:7px;flex:0 0 auto;
  font-size:10px;color:var(--ink2);letter-spacing:.04em;
}
.art-meta .av{
  width:20px;height:20px;border-radius:50%;flex:0 0 20px;
  background:radial-gradient(circle at 32% 28%, var(--orange), var(--orange-deep));
  display:grid;place-items:center;color:#fff;font-family:Georgia,serif;font-size:9px;font-weight:700;
}
.art-meta b{color:var(--purple-deep);}
.art-p{margin:10px 18px 0;font-size:12.5px;line-height:1.8;color:var(--ink);flex:0 0 auto;}
.art-quote{
  margin:10px 18px 0;padding:9px 13px;border-left:3px solid var(--orange);flex:0 0 auto;
  background:var(--paper-orange);border-radius:0 12px 12px 0;
  font-size:12px;line-height:1.7;color:var(--orange-deep);
}
.art-points{margin:10px 18px 0;flex:0 0 auto;}
.art-points h5{font-size:12px;letter-spacing:.1em;color:var(--purple-deep);margin-bottom:6px;}
.art-points .pt{
  display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.6;
  padding:4px 0;color:var(--ink);
}
.art-points .pt i{
  font-style:normal;flex:0 0 17px;width:17px;height:17px;border-radius:6px;margin-top:1px;
  background:var(--paper2);color:var(--purple);display:grid;place-items:center;
  font-size:10px;font-weight:700;
}
.art-prod{
  margin:auto 18px 8px;display:flex;align-items:center;gap:10px;flex:0 0 auto;
  background:var(--white);border:1px solid rgba(235,131,63,.3);border-radius:14px;padding:8px 11px;
  box-shadow:0 4px 12px rgba(74,31,95,.06);
}
.art-prod .thumb{width:42px;height:42px;border-radius:11px;overflow:hidden;flex:0 0 42px;}
.art-prod .thumb img{width:100%;height:100%;object-fit:cover;}
.art-prod b{font-size:12px;display:block;}
.art-prod em{font-style:normal;font-size:10px;color:var(--ink2);}
.art-prod .pr{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--orange-deep);}
.art-prod .shop{
  margin-left:8px;font-size:10px;font-weight:700;color:#fff;background:var(--orange);
  padding:5px 10px;border-radius:9px;white-space:nowrap;
}
.art-foot{margin:0 18px 16px;font-size:9.5px;color:var(--ink2);text-align:center;letter-spacing:.04em;flex:0 0 auto;}

.entry-banner{
  margin:auto 16px 10px;border-radius:15px;padding:12px 14px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  display:flex;align-items:center;gap:10px;box-shadow:0 8px 18px rgba(74,31,95,.28);
}
.entry-banner .eb-t{color:#fff;}
.entry-banner .eb-t b{font-size:12.5px;display:block;}
.entry-banner .eb-t em{font-style:normal;font-size:10px;color:rgba(255,255,255,.72);}
.entry-banner .go{
  margin-left:auto;background:var(--orange);color:#fff;font-size:11.5px;font-weight:700;
  padding:7px 13px;border-radius:10px;white-space:nowrap;box-shadow:0 4px 10px rgba(235,131,63,.4);
}

/* ============ 個人風格檔案 ============ */
.view.s6{background:linear-gradient(180deg,var(--paper2) 0%,var(--white) 30%);}
.photo-upload{
  margin:10px 18px 0;display:flex;align-items:center;gap:11px;
  background:var(--white);border:1.5px dashed rgba(118,61,143,.35);border-radius:14px;padding:9px 12px;
}
.photo-upload .pthumb{width:44px;height:44px;border-radius:12px;overflow:hidden;flex:0 0 44px;}
.photo-upload .pthumb img{width:100%;height:100%;object-fit:cover;object-position:center 10%;}
.photo-upload b{font-size:12.5px;display:block;}
.photo-upload em{font-style:normal;font-size:10px;color:var(--ink2);}
.hw-row{display:flex;gap:10px;}
.hw-row .hw{
  flex:1;background:var(--white);border:1.5px solid rgba(118,61,143,.25);border-radius:13px;
  padding:8px 13px;display:flex;align-items:baseline;justify-content:space-between;
}
.hw-row .hw b{font-size:14px;}
.hw-row .hw em{font-style:normal;font-size:10px;color:var(--ink2);}
.fgroup{margin:9px 18px 0;flex:0 0 auto;}
.fgroup > .flabel{font-size:11.5px;color:var(--ink2);letter-spacing:.1em;display:block;margin-bottom:6px;}
.fgroup > .flabel b{color:var(--purple-deep);}
.name-field{
  background:var(--white);border:1.5px solid rgba(118,61,143,.25);border-radius:13px;
  padding:10px 14px;font-size:14px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;
}
.name-field em{font-style:normal;font-size:10.5px;color:var(--ink2);font-weight:400;}
.fchips{display:flex;gap:7px;flex-wrap:wrap;}
.fchip{
  font-size:12px;padding:7px 13px;border-radius:999px;color:var(--ink);
  background:var(--white);border:1px solid rgba(108,97,117,.22);
}
.fchip.on{
  background:var(--purple);border-color:var(--purple);color:#fff;font-weight:700;
  box-shadow:0 4px 10px rgba(118,61,143,.3);
}
.fchip.pop{animation:chipPop .34s var(--ease);}
@keyframes chipPop{0%{transform:scale(1);}42%{transform:scale(1.12);}100%{transform:scale(1);}}
.color-dots{display:flex;gap:11px;align-items:center;}
.cdot{width:30px;height:30px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 1px rgba(36,26,43,.1);}
.cdot.on::after{
  content:"✓";position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:13px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.4);
  animation:tickIn .28s var(--ease) both;
}
@keyframes tickIn{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:none;}}
.cdot.on{box-shadow:0 0 0 2.5px var(--white), 0 0 0 4.5px var(--orange);}
.profile-cta{
  margin:auto 18px 8px;padding:14px 0;border-radius:16px;text-align:center;flex:0 0 auto;
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  color:#fff;font-size:15px;font-weight:700;letter-spacing:.14em;
  box-shadow:0 10px 22px rgba(74,31,95,.32);
}
.profile-note{text-align:center;font-size:10.5px;color:var(--ink2);margin:0 18px 16px;letter-spacing:.04em;flex:0 0 auto;}
.profile-progress{display:flex;gap:6px;margin:2px 18px 0;flex:0 0 auto;}
.profile-progress i{height:4px;border-radius:99px;flex:1;background:var(--paper2);transition:background .4s var(--ease);}
.profile-progress i.on{background:var(--orange);}

/* ============ 形象報告購買 ============ */
.view.s4{background:linear-gradient(180deg,var(--paper2) 0%,var(--white) 40%);}
.buy-hero{
  margin:4px 18px 0;border-radius:20px;padding:18px 18px 16px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  color:#fff;box-shadow:0 14px 28px rgba(74,31,95,.3);
}
.buy-hero .k{font-size:12px;letter-spacing:.2em;color:#F5C9A5;}
.price-line{display:flex;align-items:baseline;gap:10px;margin-top:6px;}
.price-line .now{font-size:40px;font-weight:700;letter-spacing:.02em;}
.price-line .now small{font-size:16px;font-weight:400;}
.price-line .was{font-size:14px;color:rgba(255,255,255,.55);text-decoration:line-through;}
.price-line .tag{
  margin-left:auto;font-size:11px;font-weight:700;background:var(--orange);
  padding:4px 10px;border-radius:999px;box-shadow:0 4px 10px rgba(235,131,63,.4);
}
.ebird{margin-top:12px;}
.ebird .bar{height:8px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;}
.ebird .bar i{display:block;height:100%;width:68%;border-radius:99px;background:linear-gradient(90deg,var(--orange),#F5A96B);}
.ebird .cap{display:flex;justify-content:space-between;font-size:10.5px;color:rgba(255,255,255,.75);margin-top:6px;letter-spacing:.04em;}
.includes{margin:16px 18px 0;flex:0 0 auto;}
.includes h4{font-size:13px;letter-spacing:.12em;color:var(--purple-deep);display:flex;align-items:center;gap:8px;}
.includes h4::after{content:"";flex:1;height:1px;background:rgba(118,61,143,.15);}
.includes ul{list-style:none;margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.includes li{
  background:var(--white);border:1px solid rgba(118,61,143,.12);border-radius:13px;
  padding:10px 11px;font-size:12px;line-height:1.5;display:flex;gap:8px;align-items:flex-start;
  box-shadow:0 3px 10px rgba(74,31,95,.05);
}
.includes li .tick{
  width:18px;height:18px;border-radius:6px;flex:0 0 18px;margin-top:1px;
  background:var(--paper-orange);color:var(--orange-deep);
  display:grid;place-items:center;font-size:11px;font-weight:700;
}
.includes li b{display:block;font-size:12.5px;}
.includes li em{font-style:normal;font-size:10.5px;color:var(--ink2);}
.compare{margin:auto 18px 0;padding-top:14px;flex:0 0 auto;}
.compare .cards{display:flex;gap:10px;margin-top:0;}
.cmp{
  flex:1;border-radius:14px;padding:11px 12px;border:1.5px solid rgba(118,61,143,.15);
  background:var(--white);position:relative;
}
.cmp.hot{border-color:rgba(235,131,63,.55);background:var(--paper-orange);}
.cmp.pro{border-color:rgba(118,61,143,.5);background:var(--paper2);}
.cmp.sel{transform:translateY(-3px);}
.cmp.hot.sel{border-color:var(--orange);box-shadow:0 10px 20px rgba(235,131,63,.26);}
.cmp.pro.sel{border-color:var(--purple);box-shadow:0 10px 20px rgba(74,31,95,.24);}
.cmp .mark{
  position:absolute;top:-8px;right:-6px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;
  opacity:0;transform:scale(.4);transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.cmp.hot .mark{background:var(--orange);}
.cmp.pro .mark{background:var(--purple);}
.cmp.sel .mark{opacity:1;transform:scale(1);}
.cmp .lv{
  display:inline-block;font-size:9px;font-weight:700;padding:2px 8px;border-radius:999px;
  margin-bottom:4px;letter-spacing:.06em;
}
.cmp.hot .lv{background:var(--orange);color:#fff;}
.cmp.pro .lv{background:var(--purple);color:#fff;}
.cmp b{font-size:13px;display:block;}
.cmp .p{font-size:17px;font-weight:700;color:var(--purple-deep);margin-top:3px;}
.cmp.hot .p{color:var(--orange-deep);}
.cmp em{font-style:normal;font-size:10.5px;color:var(--ink2);display:block;margin-top:3px;line-height:1.5;}
.compare .bridge{margin-top:10px;text-align:center;font-size:11px;color:var(--ink2);letter-spacing:.05em;}
.flow3{margin:auto 18px 0;display:flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;}
.flow3 span{
  font-size:11px;color:var(--purple);background:var(--paper2);
  padding:6px 12px;border-radius:999px;letter-spacing:.04em;
}
.flow3 i{font-style:normal;color:rgba(108,97,117,.45);font-size:12px;}
.buy-cta{
  margin:14px 18px 8px;padding:14px 0;border-radius:16px;text-align:center;flex:0 0 auto;
  background:var(--orange);color:#fff;font-size:15px;font-weight:700;letter-spacing:.14em;
  box-shadow:0 10px 22px rgba(235,131,63,.4);
}
.buy-note{text-align:center;font-size:10.5px;color:var(--ink2);margin:0 18px 16px;letter-spacing:.04em;flex:0 0 auto;}

/* ============ 個人專屬形象報告 ============ */
.view.s2{background:linear-gradient(180deg,var(--paper2) 0%,var(--white) 34%);}
.drape-hero{padding:2px 20px 0;display:flex;flex-direction:column;align-items:center;flex:0 0 auto;}
.drape-wrap{position:relative;width:140px;height:104px;}
.drape{
  position:absolute;bottom:0;width:70px;height:70px;
  border-radius:13px 13px 38px 38px;box-shadow:0 6px 14px rgba(36,26,43,.14);
}
.drape.d1{left:-14px;transform:rotate(-16deg);background:linear-gradient(160deg,var(--caramel),#9a6330);}
.drape.d2{right:-14px;transform:rotate(16deg);background:linear-gradient(200deg,var(--olive),#575e33);}
.drape.d3{left:13px;bottom:3px;transform:rotate(-7deg);background:linear-gradient(160deg,var(--brick),#8c3c33);}
.drape.d4{right:13px;bottom:3px;transform:rotate(7deg);background:linear-gradient(200deg,var(--camel),#a98a60);}
.face{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:78px;height:94px;border-radius:39px 39px 36px 36px;
  box-shadow:0 10px 24px rgba(74,31,95,.22), 0 0 0 5px var(--white);
  overflow:hidden;
}
.face img{width:100%;height:100%;object-fit:cover;object-position:center 12%;}
.season-name{margin-top:9px;text-align:center;}
.season-name .en{font-family:Georgia,serif;font-style:italic;font-size:12px;color:var(--orange-deep);letter-spacing:.22em;}
.season-name .zh{font-size:24px;font-weight:700;color:var(--purple-deep);letter-spacing:.26em;margin-top:1px;text-indent:.26em;}
.depth-seg{display:flex;align-items:center;gap:6px;margin-top:6px;}
.depth-seg em{font-style:normal;font-size:10px;color:var(--ink2);letter-spacing:.08em;margin-right:2px;}
.depth-seg span{
  font-size:11px;padding:3px 13px;border-radius:999px;color:var(--ink2);
  background:var(--white);border:1px solid rgba(108,97,117,.22);
}
.depth-seg span.on{
  background:var(--purple-deep);border-color:var(--purple-deep);color:#fff;font-weight:700;
  box-shadow:0 4px 10px rgba(74,31,95,.28);
}
.depth-seg span.on.pulse{animation:depthPulse 1s ease-out;}
@keyframes depthPulse{
  0%{box-shadow:0 4px 10px rgba(74,31,95,.28), 0 0 0 0 rgba(235,131,63,.6);transform:scale(1);}
  35%{transform:scale(1.12);}
  70%{box-shadow:0 4px 10px rgba(74,31,95,.28), 0 0 0 13px rgba(235,131,63,0);}
  100%{box-shadow:0 4px 10px rgba(74,31,95,.28), 0 0 0 0 rgba(235,131,63,0);transform:scale(1);}
}
.verify-row{display:flex;gap:8px;justify-content:center;margin-top:7px;}
.steps{
  margin:8px 20px 0;background:var(--white);border:1px solid rgba(118,61,143,.12);flex:0 0 auto;
  border-radius:16px;padding:7px 14px;display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 4px 14px rgba(74,31,95,.06);
}
.step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;}
.step .dot{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;color:#fff;background:var(--purple);
}
.step .dot.done{background:var(--olive);}
.step .dot.todo{background:var(--white);border:1.5px dashed rgba(108,97,117,.5);color:var(--ink2);}
.step em{font-style:normal;font-size:10px;color:var(--ink2);letter-spacing:.04em;}
.step-arrow{color:rgba(108,97,117,.4);font-size:12px;flex:0 0 auto;padding:0 2px;margin-bottom:14px;}
.disclaim{margin:5px 22px 0;font-size:9px;color:var(--ink2);letter-spacing:.02em;text-align:center;line-height:1.5;flex:0 0 auto;}
.example-row{display:flex;gap:10px;margin:10px 20px 0;flex:0 0 auto;}
.ex-card{
  flex:1;border-radius:14px;overflow:hidden;background:var(--white);
  border:1px solid rgba(118,61,143,.12);box-shadow:0 4px 12px rgba(74,31,95,.06);
}
.ex-card .ex-v{height:88px;position:relative;overflow:hidden;}
.ex-card .ex-v img{width:100%;height:100%;object-fit:cover;object-position:center 16%;}
.ex-card .ex-tag{
  position:absolute;top:7px;left:7px;font-size:9.5px;font-weight:700;
  padding:3px 9px;border-radius:999px;color:#fff;
}
.ex-card .ex-tag.good{background:var(--olive);}
.ex-card .ex-tag.bad{background:#A44A3F;}
.ex-card p{font-size:9.5px;color:var(--ink2);padding:5px 9px 7px;line-height:1.45;}
.palette-block{margin:12px 20px 0;flex:0 0 auto;}
.palette-block h4{font-size:12.5px;letter-spacing:.12em;color:var(--purple-deep);display:flex;align-items:center;gap:8px;}
.palette-block h4::after{content:"";flex:1;height:1px;background:rgba(118,61,143,.15);}
.chips{display:flex;gap:8px;margin-top:8px;}
.cchip{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;}
.cchip i{width:100%;height:30px;border-radius:9px;display:block;box-shadow:inset 0 0 0 1px rgba(36,26,43,.07);}
.cchip em{font-style:normal;font-size:9.5px;color:var(--ink2);letter-spacing:.04em;}
.cchip.pop{animation:cchipIn .46s var(--ease) both;animation-delay:var(--d,0ms);}
@keyframes cchipIn{0%{opacity:0;transform:translateY(12px) scale(.82);}60%{opacity:1;transform:translateY(-2px) scale(1.05);}100%{opacity:1;transform:none;}}
.upgrade{margin:9px 20px 0;display:flex;flex-direction:column;gap:7px;flex:0 0 auto;}
.up-card{
  display:flex;align-items:center;gap:10px;background:var(--white);
  border:1px solid rgba(235,131,63,.3);border-radius:14px;padding:7px 12px;
  box-shadow:0 4px 12px rgba(74,31,95,.05);
}
.up-card .ic{
  width:30px;height:30px;border-radius:10px;flex:0 0 30px;
  display:grid;place-items:center;font-size:14px;
  background:var(--paper-orange);color:var(--orange-deep);
}
.up-card b{font-size:12.5px;display:block;}
.up-card em{font-style:normal;font-size:10.5px;color:var(--ink2);}
.up-card .pr{margin-left:auto;font-size:13px;font-weight:700;color:var(--orange-deep);white-space:nowrap;}
.up-card .go{color:var(--orange-deep);font-size:16px;margin-left:6px;}

/* ============ HowStyle 小幫手 ============ */
.view.s1{overflow:hidden;background:var(--paper);}
.s1 .appbar{background:linear-gradient(135deg,var(--purple-deep),var(--purple));color:#fff;padding-bottom:16px;flex:0 0 auto;}
.s1 .appbar .back{background:rgba(255,255,255,.16);color:#fff;}
.s1 .appbar .sub{color:rgba(255,255,255,.72);}
.avatar-ai{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;
  background:radial-gradient(circle at 32% 28%, var(--orange), var(--orange-deep));
  display:grid;place-items:center;color:#fff;
  font-family:Georgia,serif;font-size:15px;font-weight:700;
  box-shadow:0 0 0 2px rgba(255,255,255,.55);
}
.online-dot{width:7px;height:7px;border-radius:50%;background:#7FD37F;display:inline-block;margin-right:4px;}
.chat{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);
  padding:16px 16px 8px;display:flex;flex-direction:column;gap:12px;scrollbar-width:none;
}
.day-chip{align-self:center;font-size:10.5px;color:var(--ink2);background:var(--paper2);padding:3px 12px;border-radius:999px;letter-spacing:.1em;flex:0 0 auto;}
.msg{max-width:82%;padding:11px 14px;font-size:13.5px;line-height:1.65;border-radius:18px;flex:0 0 auto;}
.msg.ai{align-self:flex-start;background:var(--white);border:1px solid rgba(118,61,143,.12);border-bottom-left-radius:6px;box-shadow:0 2px 8px rgba(74,31,95,.05);}
.msg.user{align-self:flex-end;background:var(--purple);color:#fff;border-bottom-right-radius:6px;}
@keyframes bubbleL{from{opacity:0;transform:translate(-18px,8px) scale(.94);}to{opacity:1;transform:none;}}
@keyframes bubbleR{from{opacity:0;transform:translate(18px,8px) scale(.94);}to{opacity:1;transform:none;}}
.msg.ai,.outfit-card,.typing{animation:bubbleL .34s var(--ease) both;}
.msg.user{animation:bubbleR .34s var(--ease) both;}
.typing{
  align-self:flex-start;background:var(--white);border:1px solid rgba(118,61,143,.12);
  border-radius:18px;border-bottom-left-radius:6px;padding:13px 16px;display:flex;gap:5px;flex:0 0 auto;
  box-shadow:0 2px 8px rgba(74,31,95,.05);
}
.typing i{width:7px;height:7px;border-radius:50%;background:rgba(118,61,143,.45);display:block;animation:tdot 1.1s infinite ease-in-out;}
.typing i:nth-child(2){animation-delay:.16s;}
.typing i:nth-child(3){animation-delay:.32s;}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.45;}30%{transform:translateY(-5px);opacity:1;}}
.outfit-card{
  align-self:flex-start;width:88%;background:var(--white);flex:0 0 auto;
  border:1px solid rgba(118,61,143,.14);border-radius:18px;border-bottom-left-radius:6px;
  overflow:hidden;box-shadow:0 6px 18px rgba(74,31,95,.08);
}
.outfit-photo{height:96px;overflow:hidden;}
.outfit-photo img{width:100%;height:100%;object-fit:cover;object-position:center 32%;}
.outfit-card .head{
  padding:10px 14px;background:var(--paper-orange);
  display:flex;align-items:center;justify-content:space-between;
}
.outfit-card .head b{font-size:12.5px;color:var(--orange-deep);letter-spacing:.05em;}
.outfit-dots{display:flex;gap:5px;}
.outfit-dots i{width:14px;height:14px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 1px rgba(36,26,43,.1);}
.outfit-card ul{list-style:none;padding:10px 14px 4px;}
.outfit-card li{
  font-size:13px;padding:7px 0;display:flex;align-items:center;gap:9px;
  border-bottom:1px dashed rgba(108,97,117,.18);
}
.outfit-card li:last-child{border-bottom:none;}
.item-chip{width:26px;height:26px;border-radius:8px;flex:0 0 26px;display:grid;place-items:center;}
.item-chip svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.outfit-card li small{margin-left:auto;color:var(--ink2);font-size:11px;}
.outfit-actions{display:flex;gap:8px;padding:10px 14px 14px;}
.btn{
  flex:1;text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  padding:9px 0;border-radius:12px;
}
.btn.solid{background:var(--orange);color:#fff;box-shadow:0 4px 12px rgba(235,131,63,.35);}
.btn.ghost{border:1.5px solid rgba(118,61,143,.35);color:var(--purple);}
.quick-chips{display:flex;gap:8px;padding:6px 16px 10px;background:var(--paper);flex:0 0 auto;overflow-x:auto;scrollbar-width:none;}
.quick-chips span{
  font-size:12px;color:var(--purple);border:1px solid rgba(118,61,143,.3);
  background:var(--white);padding:6px 12px;border-radius:999px;white-space:nowrap;
}
.inputbar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:10px 16px 12px;background:var(--white);border-top:1px solid var(--paper2);
}
.inputbar .field{
  flex:1;min-width:0;background:var(--paper2);border-radius:999px;padding:10px 16px;
  font-size:13px;color:var(--ink);
}
.inputbar .field::placeholder{color:var(--ink2);}
.send{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  display:grid;place-items:center;
}
.send svg{width:16px;height:16px;fill:#fff;}

/* ============ 商品推薦 ============ */
.view.s3{overflow:hidden;background:var(--paper);}
.s3 .appbar{padding-bottom:6px;}
.reco-banner{
  margin:2px 16px 0;border-radius:15px;padding:11px 14px;flex:0 0 auto;
  background:linear-gradient(120deg,var(--paper-orange),#FBEBDD);
  border:1px solid rgba(235,131,63,.22);
  display:flex;align-items:center;gap:11px;
}
.reco-banner .ring{
  width:34px;height:34px;border-radius:50%;flex:0 0 34px;
  background:conic-gradient(var(--caramel) 0 25%, var(--olive) 25% 50%, var(--brick) 50% 75%, var(--camel) 75% 100%);
  box-shadow:inset 0 0 0 3px var(--paper-orange);
}
.reco-banner b{font-size:12.5px;color:var(--orange-deep);display:block;letter-spacing:.03em;}
.reco-banner small{font-size:10.5px;color:var(--ink2);}
.tier-tabs{display:flex;gap:8px;padding:10px 16px 2px;flex:0 0 auto;}
.tier-tabs span{
  flex:1;text-align:center;font-size:12.5px;padding:6px 0 7px;border-radius:12px;
  color:var(--ink2);background:var(--white);border:1px solid rgba(108,97,117,.18);letter-spacing:.03em;
  display:flex;flex-direction:column;gap:1px;align-items:center;
}
.tier-tabs span i{font-style:normal;font-size:9.5px;opacity:.75;}
.tier-tabs span.on{
  background:var(--purple);color:#fff;border-color:var(--purple);font-weight:700;
  box-shadow:0 6px 14px rgba(118,61,143,.3);
}
.brand-row{padding:7px 16px 0;font-size:10.5px;color:var(--ink2);letter-spacing:.08em;text-align:center;flex:0 0 auto;transition:opacity .2s ease;}
.grid{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  padding:9px 16px 4px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;
}
.pcard{
  background:var(--white);border-radius:16px;overflow:hidden;
  border:1px solid rgba(118,61,143,.1);box-shadow:0 4px 14px rgba(74,31,95,.06);
  display:flex;flex-direction:column;
}
.pcard.in{animation:cardIn .38s var(--ease) both;animation-delay:var(--d,0ms);}
.pcard.out{animation:cardOut .2s ease-in both;animation-delay:var(--d,0ms);}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes cardOut{from{opacity:1;transform:none;}to{opacity:0;transform:translateY(-10px) scale(.97);}}
.pcard .visual{height:92px;position:relative;overflow:hidden;}
.pcard .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.match-badge{
  position:absolute;top:7px;left:7px;font-size:9.5px;font-weight:700;
  background:rgba(255,255,255,.92);color:var(--olive);
  padding:3px 8px;border-radius:999px;letter-spacing:.04em;
}
.fav{
  position:absolute;top:6px;right:7px;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:11px;color:var(--purple);
}
.fav.on{color:#D2496B;}
.fav.beat{animation:beat .5s var(--ease);}
@keyframes beat{0%{transform:scale(1);}30%{transform:scale(1.42);}55%{transform:scale(.92);}100%{transform:scale(1);}}
.pcard .info{padding:8px 11px 9px;display:flex;flex-direction:column;gap:3px;}
.pcard .name{font-size:12.5px;font-weight:700;line-height:1.4;}
.pcard .meta{font-size:10.5px;color:var(--ink2);}
.pcard .rowline{display:flex;align-items:center;justify-content:space-between;margin-top:1px;}
.price{font-size:13px;font-weight:700;color:var(--orange-deep);}
.price small{font-size:10px;font-weight:400;}
.add{
  width:23px;height:23px;border-radius:8px;background:var(--paper2);color:var(--purple);
  display:grid;place-items:center;font-size:13px;font-weight:700;
}
.add.on{background:var(--purple);color:#fff;}
.cart-bar{
  flex:0 0 auto;margin:6px 16px 8px;border-radius:15px;
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  box-shadow:0 8px 18px rgba(74,31,95,.3);
}
.cart-bar.bump{animation:bump .42s var(--ease);}
@keyframes bump{0%{transform:scale(1);}35%{transform:scale(1.035);}100%{transform:scale(1);}}
.cart-bar .sum{color:#fff;}
.cart-bar .sum em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.7);display:block;}
.cart-bar .sum b{font-size:14.5px;letter-spacing:.02em;}
.cart-bar .go{
  margin-left:auto;background:var(--orange);color:#fff;font-size:12.5px;font-weight:700;
  padding:8px 16px;border-radius:11px;letter-spacing:.08em;
  box-shadow:0 4px 10px rgba(235,131,63,.4);
}

/* ============ 預約 ============ */
.view.s5{background:linear-gradient(180deg,var(--paper2) 0%,var(--white) 36%);}
.lecture-card{
  margin:4px 18px 0;border-radius:18px;overflow:hidden;background:var(--white);flex:0 0 auto;
  border:1px solid rgba(118,61,143,.12);box-shadow:0 8px 20px rgba(74,31,95,.08);
}
.lecture-card .top{
  padding:12px 15px 11px;background:linear-gradient(135deg,var(--purple),var(--purple-deep));color:#fff;
  display:flex;align-items:flex-start;gap:10px;
}
.lecture-card .top b{font-size:14.5px;display:block;letter-spacing:.04em;}
.lecture-card .top em{font-style:normal;font-size:11px;color:rgba(255,255,255,.75);}
.lecture-card .top .pp{margin-left:auto;text-align:right;}
.lecture-card .top .pp b{font-size:16px;}
.lecture-card .top .pp em{font-size:10px;}
.lecture-card .body{padding:11px 15px 13px;}
.lec-meta{display:flex;gap:14px;font-size:11.5px;color:var(--ink2);}
.lec-meta span{display:flex;align-items:center;gap:5px;}
.lec-meta i{font-style:normal;color:var(--orange-deep);}
.seats{margin-top:11px;}
.seats .bar{height:8px;border-radius:99px;background:var(--paper2);overflow:hidden;}
.seats .bar i{display:block;height:100%;width:60%;border-radius:99px;background:linear-gradient(90deg,var(--purple),#9A62B8);}
.seats .cap{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink2);margin-top:5px;}
.seats .cap b{color:var(--purple-deep);}
.addon{
  margin-top:10px;display:flex;align-items:center;gap:9px;
  background:var(--paper-orange);border:1px solid rgba(235,131,63,.3);
  border-radius:11px;padding:8px 11px;font-size:11.5px;
}
.addon.off{background:var(--white);border-color:rgba(108,97,117,.22);}
.addon .cb{
  width:17px;height:17px;border-radius:5px;flex:0 0 17px;
  background:var(--orange);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700;
  transition:background .2s ease,box-shadow .2s ease;
}
.addon.off .cb{background:var(--white);box-shadow:inset 0 0 0 1.5px rgba(108,97,117,.35);color:transparent;}
.addon b{color:var(--orange-deep);}
.addon.off b{color:var(--ink2);}
.addon .ap{margin-left:auto;font-weight:700;color:var(--orange-deep);white-space:nowrap;}
.addon.off .ap{color:var(--ink2);}
.addon .ap.pop{animation:chipPop .38s var(--ease);}
.lec-cta{
  margin-top:12px;text-align:center;background:var(--orange);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.1em;padding:10px 0;border-radius:12px;
  box-shadow:0 6px 14px rgba(235,131,63,.35);
}
.sec-title{
  margin:16px 18px 0;font-size:13px;letter-spacing:.12em;color:var(--purple-deep);flex:0 0 auto;
  display:flex;align-items:center;gap:8px;
}
.sec-title::after{content:"";flex:1;height:1px;background:rgba(118,61,143,.15);}
.sec-title .pr{font-size:11.5px;color:var(--orange-deep);font-weight:700;letter-spacing:.02em;}
.day-row{display:flex;gap:8px;margin:10px 18px 0;flex:0 0 auto;}
.day{
  flex:1;text-align:center;padding:8px 0 9px;border-radius:13px;background:var(--white);
  border:1px solid rgba(108,97,117,.18);
}
.day em{font-style:normal;display:block;font-size:9.5px;color:var(--ink2);letter-spacing:.06em;}
.day b{display:block;font-size:15px;margin-top:1px;color:var(--ink);}
.day.on{background:var(--purple-deep);border-color:var(--purple-deep);box-shadow:0 6px 14px rgba(74,31,95,.3);}
.day.on em,.day.on b{color:#fff;}
.slot-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:10px 18px 0;flex:0 0 auto;}
.slot{
  text-align:center;font-size:12px;padding:9px 0;border-radius:12px;
  background:var(--white);border:1px solid rgba(108,97,117,.2);color:var(--ink);
}
.slot.off{color:rgba(108,97,117,.4);border-style:dashed;text-decoration:line-through;}
.slot.on{
  background:var(--paper-orange);border-color:var(--orange);color:var(--orange-deep);font-weight:700;
  box-shadow:0 4px 10px rgba(235,131,63,.2);
}
.consult-note{margin:10px 18px 0;font-size:10.5px;color:var(--ink2);letter-spacing:.04em;text-align:center;flex:0 0 auto;}
.charter{
  margin:auto 18px 0;display:flex;align-items:center;gap:10px;flex:0 0 auto;
  background:var(--white);border:1px solid rgba(118,61,143,.14);border-radius:15px;
  padding:11px 14px;box-shadow:0 4px 12px rgba(74,31,95,.05);
}
.charter b{font-size:12.5px;display:block;}
.charter em{font-style:normal;font-size:10.5px;color:var(--ink2);}
.charter .ghost{
  margin-left:auto;font-size:12px;font-weight:700;color:var(--purple);
  border:1.5px solid rgba(118,61,143,.35);border-radius:11px;padding:7px 14px;white-space:nowrap;
}
.book-cta{
  margin:14px 18px 18px;padding:13px 0;border-radius:16px;text-align:center;flex:0 0 auto;
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  color:#fff;font-size:14px;font-weight:700;letter-spacing:.14em;
  box-shadow:0 10px 22px rgba(74,31,95,.32);
}

/* ============ 全域 tab bar ============ */
#tabbar{
  flex:0 0 auto;display:flex;justify-content:space-around;align-items:center;
  padding:8px 8px calc(10px + env(safe-area-inset-bottom,6px));
  background:var(--white);border-top:1px solid var(--paper2);
  position:relative;z-index:20;
}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--ink2);flex:1;}
.tab.on{color:var(--purple);font-weight:700;}
.tab .ic{width:22px;height:22px;display:grid;place-items:center;transition:transform .28s var(--ease);}
.tab.on .ic{transform:translateY(-2px);}
.tab .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* ============ 小幫手入口（appbar 圓鈕） ============ */
.ab-chat{
  margin-left:10px;width:34px;height:34px;border-radius:50%;flex:0 0 34px;position:relative;
  background:radial-gradient(circle at 32% 28%, var(--orange), var(--orange-deep));
  color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:700;
  display:grid;place-items:center;
  box-shadow:0 6px 14px rgba(207,106,30,.34), 0 0 0 2px rgba(255,255,255,.6);
  animation:abNudge 5.2s 2s infinite;
}
.ab-chat::before,
.ab-chat::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(235,131,63,.55);opacity:0;
}
.ab-chat::after{animation:abBurst 5.2s 2s infinite ease-out;}
.ab-chat::before{animation:abBurst 5.2s 2.3s infinite ease-out;}
.ab-chat.solo{margin-left:auto;}
@keyframes abNudge{
  0%,74%{transform:scale(1) rotate(0);}
  77%{transform:scale(1.22) rotate(-11deg);}
  81%{transform:scale(1.16) rotate(9deg);}
  85%{transform:scale(1.18) rotate(-6deg);}
  89%{transform:scale(1.1) rotate(3deg);}
  94%,100%{transform:scale(1) rotate(0);}
}
@keyframes abBurst{
  0%,74%{transform:scale(1);opacity:0;}
  76%{transform:scale(1);opacity:.85;}
  96%{transform:scale(2.2);opacity:0;}
  100%{transform:scale(2.2);opacity:0;}
}

/* ============ Toast ============ */
#toast{
  position:absolute;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,6px));z-index:60;
  transform:translate(-50%,18px);opacity:0;pointer-events:none;
  max-width:82%;padding:11px 18px;border-radius:999px;
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-align:center;
  box-shadow:0 12px 26px rgba(74,31,95,.4), 0 0 0 3px rgba(255,255,255,.9);
  transition:opacity .26s var(--ease), transform .26s var(--ease);
}
#toast.show{opacity:1;transform:translate(-50%,0);}

/* ============ 分析過場 ============ */
.overlay{
  position:absolute;inset:0;z-index:80;display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:0 36px;
}
.overlay.show{display:flex;animation:ovIn .3s var(--ease) both;}
.overlay.hiding{animation:ovOut .3s ease-in both;}
@keyframes ovIn{from{opacity:0;}to{opacity:1;}}
@keyframes ovOut{from{opacity:1;}to{opacity:0;}}
#analyze{
  background:
    radial-gradient(700px 420px at 78% 8%, rgba(235,131,63,.34), transparent 62%),
    linear-gradient(160deg,var(--purple),var(--purple-deep) 62%, #33143F);
  color:#fff;
}
.an-brand{font-family:Georgia,"Times New Roman",serif;font-size:26px;letter-spacing:.5px;color:#fff;opacity:.92;}
.an-brand b{color:var(--orange);font-weight:700;}
.an-ring{
  width:74px;height:74px;border-radius:50%;margin:22px 0 4px;position:relative;
  border:2.5px solid rgba(255,255,255,.18);border-top-color:var(--orange);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.an-steps{width:100%;margin-top:20px;display:flex;flex-direction:column;gap:11px;}
.an-step{
  display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  opacity:.42;transform:translateY(6px);
  transition:opacity .38s var(--ease), transform .38s var(--ease), background .38s var(--ease);
}
.an-step.on{opacity:1;transform:none;background:rgba(255,255,255,.15);}
.an-step .d{
  width:24px;height:24px;border-radius:50%;flex:0 0 24px;display:grid;place-items:center;
  font-size:11px;font-weight:700;background:rgba(255,255,255,.18);color:#fff;
  transition:background .3s var(--ease);
}
.an-step.on .d{background:var(--orange);box-shadow:0 0 0 5px rgba(235,131,63,.2);}
.an-step.done .d{background:var(--olive);box-shadow:none;}
.an-step b{font-size:13px;letter-spacing:.08em;font-weight:700;}
.an-bar{width:100%;height:6px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden;margin-top:22px;}
.an-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--orange),#F5C9A5);transition:width 2.35s linear;}
.an-cap{margin-top:12px;font-size:11.5px;letter-spacing:.1em;color:rgba(255,255,255,.72);min-height:17px;}

/* ============ 預約確認 ============ */
#confirm{background:rgba(250,247,252,.94);backdrop-filter:blur(4px);}
.cf-circle{
  position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  box-shadow:0 18px 40px rgba(74,31,95,.4);
  animation:cfPop .55s cubic-bezier(.2,1.3,.4,1) both;
}
.cf-circle::after{
  content:"";position:absolute;width:96px;height:96px;border-radius:50%;
  border:2px solid var(--orange);animation:cfRing .9s .2s ease-out both;
}
@keyframes cfPop{from{opacity:0;transform:scale(.2);}to{opacity:1;transform:none;}}
@keyframes cfRing{from{transform:scale(1);opacity:.8;}to{transform:scale(1.75);opacity:0;}}
.cf-circle svg{width:54px;height:54px;fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}
.cf-tick{stroke-dasharray:42;stroke-dashoffset:42;animation:cfTick .45s .3s ease-out forwards;}
@keyframes cfTick{to{stroke-dashoffset:0;}}
.cf-t{margin-top:18px;font-size:15px;font-weight:700;letter-spacing:.14em;color:var(--purple-deep);animation:stUp .4s .35s var(--ease) both;}
.cf-s{margin-top:6px;font-size:11.5px;color:var(--ink2);letter-spacing:.06em;animation:stUp .4s .45s var(--ease) both;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}