/* 阿珀金额段表情（配合 apo-react.js） */
.apo-react{position:relative;display:flex;align-items:center;gap:14px;margin:16px 0 4px;padding:10px 14px 10px 8px;border-radius:18px;
  background:#fffaf2;border:1px solid #e2d6c3;transition:background .3s,border-color .3s}
#coffee-personal .apo-react{grid-column:1/-1;margin:14px 0 0}
.apo-face{flex:none;width:96px;height:96px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;position:relative}
.apo-face img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 10px rgba(23,42,58,.18))}
.apo-face:hover img{transform:rotate(-5deg) scale(1.04);transition:transform .2s}
.apo-face:focus-visible{outline:2px solid #ed8d23;outline-offset:2px}
.apo-bubble{position:relative;flex:1;min-width:0;background:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 2px 0 rgba(23,42,58,.06)}
.apo-bubble::before{content:"";position:absolute;left:-7px;top:50%;width:14px;height:14px;background:#fff;transform:translateY(-50%) rotate(45deg);border-radius:2px}
.apo-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;color:#fff;background:#ed8d23;border-radius:999px;padding:1px 9px;margin-bottom:4px}
.apo-line{display:block;position:relative;font:500 15px/1.55 "Songti SC","STSong",serif;color:#172a3a}
.apo-note{display:block;font-size:12px;color:#944525;margin-top:4px}
.apo-note:empty{display:none}
.apo-react.preview{border-style:dashed;border-color:#ed8d23}
.apo-react.preview .apo-tag{background:#172a3a}

/* 状态色：亏损段偏暖红，盈利 / 低花费段偏绿 */
#lanpo-coffee .apo-react[data-tier="0"],#lanpo-coffee .apo-react[data-tier="1"]{background:#fdf1ea;border-color:#f0cdb9}
#lanpo-coffee .apo-react[data-tier="3"],#lanpo-coffee .apo-react[data-tier="4"]{background:#eef6ef;border-color:#c5dcc8}
#coffee-personal .apo-react[data-tier="4"],#coffee-personal .apo-react[data-tier="5"]{background:#fdf1ea;border-color:#f0cdb9}

/* 金额段刻度 */
.apo-meter{margin:12px 0 18px}
#coffee-personal .apo-meter{grid-column:1/-1;margin:6px 0 0}
.apo-meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:#6b6a64;margin-bottom:8px;flex-wrap:wrap}
.apo-meter-head em{font-style:normal;color:#ed8d23;font-weight:600}
.apo-segs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.apo-segs button{font:inherit;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 5px;border:1px solid #e2d6c3;border-radius:10px;
  background:#fffaf2;color:#6b6a64;font-size:11px;line-height:1.3;cursor:pointer;transition:all .2s;min-width:0}
.apo-segs button img{width:30px;height:30px;object-fit:contain;opacity:.5;filter:grayscale(.5);transition:all .2s}
.apo-segs button span{white-space:nowrap;max-width:100%;overflow:hidden}
.apo-segs button span+span{font-size:10px;opacity:.85}
.apo-segs button:hover img{opacity:1;filter:none;transform:translateY(-2px)}
.apo-segs button.on{background:#172a3a;border-color:#172a3a;color:#f6ebdd;box-shadow:0 3px 0 #ed8d23;font-weight:600}
.apo-segs button.on img{opacity:1;filter:none;transform:scale(1.12)}
.apo-segs button.peek{border-style:dashed;border-color:#ed8d23;color:#172a3a;background:#fff}
.apo-segs button.peek img{opacity:1;filter:none;transform:scale(1.12)}
.apo-segs button:focus-visible{outline:2px solid #ed8d23;outline-offset:2px}

/* 动效 */
@keyframes apo-pop{0%{transform:scale(.6) rotate(-8deg);opacity:.2}60%{transform:scale(1.12) rotate(3deg);opacity:1}100%{transform:none}}
@keyframes apo-wiggle{0%,100%{transform:none}25%{transform:rotate(-9deg)}50%{transform:rotate(7deg)}75%{transform:rotate(-4deg)}}
@keyframes apo-shake{0%,100%{transform:none}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes apo-up{0%{transform:translateY(6px)}100%{transform:none}}
@keyframes apo-down{0%{transform:translateY(-6px)}100%{transform:none}}
@keyframes apo-cheer{0%,100%{box-shadow:0 0 0 0 rgba(237,141,35,0)}40%{box-shadow:0 0 0 6px rgba(237,141,35,.25)}}
@keyframes apo-fly{0%{transform:translate(0,0) rotate(0) scale(.6);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1);opacity:0}}
.apo-face img.pop{animation:apo-pop .45s ease-out}
.apo-face img.wiggle{animation:apo-wiggle .5s ease-in-out}
.apo-face img.shake{animation:apo-shake .45s ease-in-out}
.apo-react.up{animation:apo-up .3s ease-out}
.apo-react.down{animation:apo-down .3s ease-out}
.apo-react.cheer{animation:apo-cheer .9s ease-out 2}
.apo-burst{position:absolute;left:56px;top:50%;width:0;height:0;pointer-events:none}
.apo-burst i{position:absolute;left:0;top:0;animation:apo-fly 1s cubic-bezier(.2,.7,.3,1) forwards}
.apo-burst i.dot{width:8px;height:8px;border-radius:50%;background:#ed8d23}
.apo-burst i.dot:nth-child(3n+1){background:#c79b51}
.apo-burst i.bean{width:10px;height:14px;border-radius:50%;background:#6b3f22;box-shadow:inset 2px 0 0 #3b2212}

@media(max-width:420px){
  .apo-face{width:72px;height:72px}
  .apo-line{font-size:14px}
  .apo-segs button img{width:24px;height:24px}
  .apo-segs button{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .apo-face img,.apo-react,.apo-burst i{animation:none!important}
}

/* 结果栏较窄时（门店测算右栏 / 手机）：阿珀与气泡上下排列 */
#lanpo-coffee .coffee-results,#coffee-personal .cp-summary{container-type:inline-size}
@container (max-width:360px){
  .apo-react{flex-direction:column;text-align:center;padding:12px 10px}
  .apo-bubble{width:100%}
  .apo-bubble::before{left:50%;top:-7px;transform:translateX(-50%) rotate(45deg)}
  .apo-face{width:84px;height:84px}
  .apo-burst{left:50%;top:44px}
  .apo-segs{gap:3px}
  .apo-segs button{padding:5px 1px 4px;font-size:10px}
  .apo-segs button img{width:24px;height:24px}
  .apo-meter-head em{display:none}
}