#coffee-personal{color-scheme:light dark;--cp-paper:light-dark(#fbf6ee,#17231d);--cp-cream:light-dark(#f6ebdd,#24382c);--cp-green:light-dark(#103b2b,#bad7c2);--cp-ink:light-dark(#172a3a,#f6ebdd);--cp-muted:light-dark(#6b6a64,#b7b9ab);--cp-line:light-dark(#e2d6c3,#415346);--cp-solid:light-dark(#103b2b,#0a281c);--cp-on-solid:#f6ebdd;--cp-gold:light-dark(#c79b51,#dcb574);--cp-orange:#ed8d23;--cp-loss:#944525;color:var(--cp-ink);background:var(--cp-paper);font:400 15px/1.6 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;padding:28px;border-radius:22px;width:100%;}
#coffee-personal *{box-sizing:border-box;}
#coffee-personal .cp-heading{margin-bottom:16px;}
#coffee-personal .cp-kicker{display:block;font-size:12px;letter-spacing:.08em;color:var(--cp-green);margin-bottom:8px;}
#coffee-personal h2{font:500 clamp(25px,4vw,34px)/1.3 "Songti SC","STSong",serif;color:var(--cp-green);margin:0 0 6px;}
#coffee-personal h3{font:inherit;font-weight:600;margin:0;}
#coffee-personal .cp-muted{font-size:12px;color:var(--cp-muted);}
#coffee-personal button{font:inherit;cursor:pointer;}
#coffee-personal input:focus-visible,#coffee-personal button:focus-visible,#coffee-personal .cp-col:focus-visible{outline:2px solid var(--cp-gold);outline-offset:2px;}

/* 喝法：一行小标签 */
#coffee-personal .cp-personas{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
#coffee-personal .cp-personas button{display:inline-flex;align-items:center;gap:4px;padding:3px 12px 3px 4px;border:1px solid var(--cp-line);border-radius:999px;background:var(--cp-paper);color:var(--cp-ink);font-size:13px;transition:all .2s;}
#coffee-personal .cp-personas img{width:30px;height:30px;object-fit:contain;transition:transform .2s;}
#coffee-personal .cp-personas button:hover img{transform:rotate(-8deg) scale(1.1);}
#coffee-personal .cp-personas button[aria-pressed="true"]{background:var(--cp-solid);border-color:var(--cp-solid);color:var(--cp-on-solid);box-shadow:0 2px 0 var(--cp-orange);}

/* 每种喝法：紧凑一行 */
#coffee-personal .cp-sources{display:grid;gap:6px;}
#coffee-personal .cp-src{display:grid;grid-template-columns:minmax(130px,190px) auto auto auto minmax(88px,1fr);align-items:center;gap:8px 10px;padding:6px 10px 6px 12px;border:1px solid var(--cp-line);border-left:4px solid var(--c);border-radius:12px;background:var(--cp-paper);transition:opacity .2s;}
#coffee-personal .cp-src.off{opacity:.55;}
#coffee-personal .cp-src-name{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:500;min-width:0;}
#coffee-personal .cp-src-name i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none;}
#coffee-personal .cp-stepper{display:flex;align-items:center;border:1px solid var(--cp-line);border-radius:9px;background:var(--cp-cream);overflow:hidden;}
#coffee-personal .cp-stepper button{width:30px;height:30px;border:0;background:transparent;color:var(--cp-green);font-size:17px;line-height:1;}
#coffee-personal .cp-stepper button:hover{background:rgba(0,0,0,.06);}
#coffee-personal .cp-stepper input{width:36px;border:0;background:transparent;text-align:center;font-family:inherit;font-size:15px;font-weight:600;color:var(--cp-green);font-variant-numeric:tabular-nums;}
#coffee-personal .cp-src-unit{font-size:12px;color:var(--cp-muted);white-space:nowrap;}
#coffee-personal .cp-number{display:flex;align-items:center;gap:4px;border:1px solid var(--cp-line);border-radius:9px;background:var(--cp-cream);padding:3px 8px;color:var(--cp-green);font-size:13px;}
#coffee-personal .cp-number input{width:44px;border:0;background:transparent;font-family:inherit;font-size:15px;font-weight:500;color:inherit;font-variant-numeric:tabular-nums;}
#coffee-personal .cp-src-month{text-align:right;font-size:13px;color:var(--cp-green);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;}

/* 汇总：一排指标 + 构成条 */
#coffee-personal .cp-summary{background:var(--cp-cream);border-radius:16px;padding:18px 20px;margin-top:16px;}
#coffee-personal .cp-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 18px;}
#coffee-personal .cp-kpis span{display:block;font-size:12px;color:var(--cp-muted);}
#coffee-personal .cp-kpis strong{display:block;font:500 clamp(24px,3.4vw,32px)/1.25 "Songti SC","STSong",serif;color:var(--cp-green);font-variant-numeric:tabular-nums;margin-top:4px;overflow-wrap:anywhere;}
#coffee-personal .cp-kpis b{display:block;font-size:17px;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums;}
#coffee-personal .cp-kpis small{display:block;font-size:12px;color:var(--cp-muted);}
#coffee-personal .cp-mix{margin-top:14px;}
#coffee-personal .cp-mix-bar{display:flex;gap:2px;height:10px;border-radius:999px;overflow:hidden;background:var(--cp-line);}
#coffee-personal .cp-mix-bar span{transition:width .25s;min-width:0;}
#coffee-personal .cp-mix-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12px;color:var(--cp-muted);}
#coffee-personal .cp-mix-legend span{display:inline-flex;align-items:center;gap:5px;}
#coffee-personal .cp-mix-legend i{width:8px;height:8px;border-radius:2px;display:inline-block;}

/* 趋势图 */
#coffee-personal .cp-trend{margin-top:16px;border:1px solid var(--cp-line);border-radius:16px;padding:16px 18px 14px;}
#coffee-personal .cp-trend-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:6px;}
#coffee-personal .cp-trend-head h3{font-size:16px;}
#coffee-personal .cp-periods{display:inline-flex;border:1px solid var(--cp-line);border-radius:10px;overflow:hidden;}
#coffee-personal .cp-periods button{border:0;background:var(--cp-paper);color:var(--cp-ink);padding:6px 14px;font-size:13px;}
#coffee-personal .cp-periods button+button{border-left:1px solid var(--cp-line);}
#coffee-personal .cp-periods button[aria-pressed="true"]{background:var(--cp-solid);color:var(--cp-on-solid);}
#coffee-personal .cp-svg{display:block;width:100%;height:auto;overflow:visible;}
#coffee-personal .cp-win{fill:var(--cp-cream);}
#coffee-personal .cp-axis{stroke:var(--cp-line);stroke-width:1;}
#coffee-personal .cp-hit{fill:transparent;}
#coffee-personal .cp-col{cursor:pointer;outline:none;}
#coffee-personal .cp-barr{fill:var(--cp-gold);transition:y .25s,height .25s,fill .2s;}
#coffee-personal .cp-barr.more{fill:var(--cp-orange);}
#coffee-personal .cp-barr.less{fill:#7fa48b;}
#coffee-personal .cp-col.out .cp-barr{opacity:.38;}
#coffee-personal .cp-col.hl .cp-barr,#coffee-personal .cp-col:hover .cp-barr{opacity:1;filter:brightness(.92);}
#coffee-personal .cp-mood{font-size:11px;font-weight:700;fill:var(--cp-ink);text-anchor:middle;}
#coffee-personal .cp-xl{font-size:11px;fill:var(--cp-muted);text-anchor:middle;}
#coffee-personal .cp-col.hl .cp-xl{fill:var(--cp-ink);font-weight:700;}
#coffee-personal .cp-yl{font-size:10px;fill:var(--cp-orange);font-weight:700;text-anchor:middle;}
#coffee-personal .cp-line{fill:none;stroke:var(--cp-green);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;}
#coffee-personal .cp-line.save{stroke:var(--cp-orange);stroke-dasharray:6 5;}
#coffee-personal .cp-dot{fill:var(--cp-green);}
#coffee-personal .cp-endl{font-size:12px;font-weight:700;fill:var(--cp-green);}
#coffee-personal .cp-endl.save{fill:var(--cp-orange);}
#coffee-personal .cp-winl{font-size:11px;fill:var(--cp-muted);}
#coffee-personal .cp-caption{min-height:22px;margin:6px 0 0;font-size:13px;color:var(--cp-ink);}
#coffee-personal .cp-save-inline{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:10px;padding-top:12px;border-top:1px dashed var(--cp-line);font-size:14px;}
#coffee-personal .cp-save-inline b{color:var(--cp-orange);font-size:16px;font-variant-numeric:tabular-nums;}
#coffee-personal .cp-save-inline input{flex:1;min-width:140px;height:24px;accent-color:var(--cp-orange);}
#coffee-personal .cp-footer{font-size:12px;color:var(--cp-muted);margin-top:12px;}

@media(max-width:720px){
  #coffee-personal .cp-src{grid-template-columns:auto auto 1fr;grid-template-areas:"name name month" "step unit price";}
  #coffee-personal .cp-src-name{grid-area:name;}
  #coffee-personal .cp-stepper{grid-area:step;}
  #coffee-personal .cp-src-unit{grid-area:unit;}
  #coffee-personal .cp-number{grid-area:price;justify-self:start;}
  #coffee-personal .cp-src-month{grid-area:month;}
  #coffee-personal .cp-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:620px){#coffee-personal{padding:18px;}#coffee-personal .cp-trend{padding:14px 12px 12px;}}
@media(pointer:coarse){#coffee-personal .cp-stepper button{width:40px;height:40px;}#coffee-personal .cp-periods button{min-height:38px;}}
@media(prefers-reduced-motion:reduce){#coffee-personal *{transition:none!important;}}