.kcb-app .kcb-tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important}
.kcb-app .kcb-tier{font:inherit;position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 12px;border:1px solid #dcccbc;border-radius:20px;background:#fffaf3;color:#533624;cursor:pointer}
.kcb-app .kcb-tier svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kcb-app .kcb-tier b{font-size:20px}.kcb-app .kcb-tier small{font-size:12px;line-height:1.7;color:#796654}.kcb-app .kcb-tier strong{font-size:15px}
.kcb-app .kcb-tier.is-selected{border:2px solid #009d99;background:#e8f8f3;box-shadow:0 5px 20px #009d9912}.kcb-app .kcb-tier:focus-visible{outline:2px solid #009d99;outline-offset:3px}
.kcb-app .kcb-tier-icon{display:grid;place-items:center;line-height:0;color:inherit}.kcb-app .kcb-tier-icon svg{display:block;width:46px;height:46px;flex:none}
.kcb-app .kcb-tier-unit{font-size:9px;color:#796654}.kcb-app .kcb-tier.is-recommended{border-color:#00a6a0}.kcb-app .kcb-tier.is-recommended small{color:#176b5c;background:#e1f5eb;padding:4px 6px;border-radius:7px;font-size:11px}
.kcb-app .kcb-final-tier{display:inline-block;border-radius:8px;background:#ffffff20;color:#fff;padding:4px 12px;margin-bottom:8px}
.kcb-app .kcb-actions [data-kcb-next].is-build-action,.kcb-app .kcb-actions [data-kcb-next].is-build-action.is-ready:not(:disabled){background:#00c7c7!important;color:#123b38!important;border-color:#00c7c7!important}.kcb-app .kcb-actions [data-kcb-next].is-build-action:hover{background:#00b8b6!important}
.kcb-app .kcb-step-nav{grid-template-columns:repeat(8,minmax(0,1fr))}.kcb-app .kcb-step-nav span{display:block}

/* Roast picker: compact choices first, contextual details only after selection. */
.kcb-app .kcb-roast-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kcb-app .kcb-roast{--roast-color:#9a603d;--roast-soft:#f7e8d9;--roast-ink:#5a3825;position:relative;min-width:0;min-height:118px;padding:16px 12px;display:flex;align-items:center;justify-content:center;gap:11px;border:1px solid #e2d6ca;border-radius:18px;background:#fff;color:#4e382b;text-align:right;font:inherit;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s,transform .18s}
.kcb-app .kcb-roast[data-value=light]{--roast-color:#bd7d47;--roast-soft:#fff4dd;--roast-ink:#6b421f}.kcb-app .kcb-roast[data-value=medium]{--roast-color:#815037;--roast-soft:#f3e4d6;--roast-ink:#4d2f20}.kcb-app .kcb-roast[data-value=dark]{--roast-color:#38231b;--roast-soft:#e9ded8;--roast-ink:#312018}
.kcb-app .kcb-roast:hover{border-color:var(--roast-color);transform:translateY(-2px)}
.kcb-app .kcb-roast.is-selected{border:2px solid var(--roast-color);background:var(--roast-soft);box-shadow:0 9px 24px #3f291818}
.kcb-app .kcb-roast>i{position:relative;flex:0 0 46px;height:46px;display:grid;place-items:center;border-radius:15px;background:var(--roast-soft)}
.kcb-app .kcb-roast>i span{display:block;width:21px;height:31px;border-radius:50%;background:var(--roast-color);box-shadow:inset -4px 0 0 #0002;transform:rotate(27deg)}
.kcb-app .kcb-roast>i span:after{content:'';position:absolute;width:1px;height:23px;right:22px;top:12px;border-radius:9px;background:#fff6;transform:rotate(28deg)}
.kcb-app .kcb-roast>span{min-width:0}.kcb-app .kcb-roast b,.kcb-app .kcb-roast small{display:block}.kcb-app .kcb-roast b{color:var(--roast-ink);font-size:16px;line-height:1.6}.kcb-app .kcb-roast small{margin-top:3px;color:#7a695d;font-size:10px;line-height:1.6}
.kcb-app .kcb-roast em{position:absolute;top:7px;left:7px;padding:3px 6px;border-radius:99px;background:#dff3eb;color:#176b5c;font-size:8px;font-style:normal}.kcb-app .kcb-roast>strong{position:absolute;left:9px;bottom:8px;width:18px;height:18px;display:none;place-items:center;border-radius:50%;background:var(--roast-color);color:#fff;font-size:10px}.kcb-app .kcb-roast.is-selected>strong{display:grid}
.kcb-app .kcb-roast:focus-visible{outline:3px solid #00a9a5;outline-offset:3px}

.kcb-app .kcb-roast-details{margin-top:14px}
.kcb-app .kcb-roast-detail{--detail-color:#815037;--detail-soft:#f8eee5;padding:16px;border:1px solid #e3d6ca;border-radius:18px;background:linear-gradient(145deg,#fff,var(--detail-soft));box-shadow:0 10px 28px #49301f0c}
.kcb-app .kcb-roast-detail[data-kcb-roast-detail=light]{--detail-color:#bd7d47;--detail-soft:#fff5e1}.kcb-app .kcb-roast-detail[data-kcb-roast-detail=medium]{--detail-color:#815037;--detail-soft:#f5e7da}.kcb-app .kcb-roast-detail[data-kcb-roast-detail=dark]{--detail-color:#38231b;--detail-soft:#eee4df}
.kcb-app .kcb-roast-detail>header{margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.kcb-app .kcb-roast-detail>header span{color:var(--detail-color);font-size:13px;font-weight:800}.kcb-app .kcb-roast-detail>header p{margin:0;color:#77675b;font-size:10px}
.kcb-app .kcb-roast-detail>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kcb-app .kcb-roast-detail article{min-width:0;padding:11px;display:flex;align-items:center;gap:9px;border:1px solid #eadfd5;border-radius:13px;background:#fff}
.kcb-app .kcb-roast-detail article>i{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--detail-soft);color:var(--detail-color)}.kcb-app .kcb-roast-detail svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kcb-app .kcb-roast-detail article span{min-width:0}.kcb-app .kcb-roast-detail article b,.kcb-app .kcb-roast-detail article small{display:block}.kcb-app .kcb-roast-detail article b{font-size:11px;color:#4a3528}.kcb-app .kcb-roast-detail article small{margin-top:2px;color:#7b6b60;font-size:9px;line-height:1.6}

.kcb-app .kcb-quick-roasts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.kcb-app .kcb-quick-roasts button{padding:10px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font:inherit;cursor:pointer}.kcb-app .kcb-quick-roasts button[data-kcb-quick-roast=light]{background:#fff2c9;color:#5b3b1d}.kcb-app .kcb-quick-roasts button[data-kcb-quick-roast=medium]{background:#c98c55;color:#321d12}.kcb-app .kcb-quick-roasts button[data-kcb-quick-roast=dark]{border-color:#38241b;background:#3b251c;color:#fff7ee}.kcb-app .kcb-quick-roasts button.is-selected{border-color:#00a9a5;box-shadow:0 0 0 2px #00a9a538}
.kcb-app .kcb-quick-roast-details{margin-top:8px}.kcb-app .kcb-quick-roast-details .kcb-roast-detail{padding:9px}.kcb-app .kcb-quick-roast-details .kcb-roast-detail>header{margin-bottom:6px}.kcb-app .kcb-quick-roast-details .kcb-roast-detail>div{gap:5px}.kcb-app .kcb-quick-roast-details .kcb-roast-detail article{padding:6px}.kcb-app .kcb-quick-roast-details .kcb-roast-detail article>i{flex-basis:28px;height:28px}.kcb-app .kcb-quick-roast-details .kcb-roast-detail article small{display:none}

@media(max-width:600px){
 .kcb-app [data-kcb-step="8"] .kcb-step-heading h3{white-space:normal}
 .kcb-app .kcb-roast-grid{gap:6px}
 .kcb-app .kcb-roast{min-height:104px;padding:12px 5px;flex-direction:column;gap:5px;text-align:center;border-radius:15px}
 .kcb-app .kcb-roast>i{flex-basis:38px;width:38px;height:38px;border-radius:12px}.kcb-app .kcb-roast>i span{width:17px;height:26px}.kcb-app .kcb-roast>i span:after{height:18px;right:18px;top:10px}
 .kcb-app .kcb-roast b{font-size:13px}.kcb-app .kcb-roast small{font-size:8px}.kcb-app .kcb-roast em{top:4px;left:4px;padding:2px 4px;font-size:7px}.kcb-app .kcb-roast>strong{left:5px;bottom:5px}
 .kcb-app .kcb-roast-detail{padding:12px;border-radius:15px}.kcb-app .kcb-roast-detail>header{margin-bottom:9px;align-items:flex-start;flex-direction:column;gap:2px}.kcb-app .kcb-roast-detail>div{grid-template-columns:1fr;gap:6px}
 .kcb-app .kcb-roast-detail article{padding:7px 9px}.kcb-app .kcb-roast-detail article>i{flex-basis:30px;height:30px}.kcb-app .kcb-roast-detail svg{width:18px;height:18px}.kcb-app .kcb-roast-detail article small{font-size:9px}
 .kcb-app .kcb-quick-roast-details .kcb-roast-detail>header{display:none}.kcb-app .kcb-quick-roast-details .kcb-roast-detail>div{grid-template-columns:repeat(3,minmax(0,1fr))}.kcb-app .kcb-quick-roast-details .kcb-roast-detail article{padding:5px 2px;flex-direction:column;text-align:center;gap:2px}.kcb-app .kcb-quick-roast-details .kcb-roast-detail article b{font-size:9px}
 .kcb-app .kcb-tier{padding:14px 5px!important;gap:7px!important}.kcb-app .kcb-tier b{font-size:17px!important}.kcb-app .kcb-tier small,.kcb-app .kcb-tier.is-recommended small{font-size:10px!important}.kcb-app .kcb-tier strong{font-size:11px!important}.kcb-app [data-kcb-step="7"] .kcb-step-heading h3{font-size:16px;white-space:normal}.kcb-app .kcb-tier-unit{font-size:8px}
}
@media(max-height:680px) and (max-width:700px){.kcb-app.is-workspace .kcb-final-tier{display:none}.kcb-app.is-workspace [data-kcb-step="7"] .kcb-step-heading,.kcb-app.is-workspace [data-kcb-step="8"] .kcb-step-heading{margin-bottom:8px}.kcb-app.is-workspace [data-kcb-step="7"] .kcb-step-heading p,.kcb-app.is-workspace [data-kcb-step="8"] .kcb-step-heading p{display:none}.kcb-app.is-workspace .kcb-tier{padding:9px 4px!important;gap:4px!important}.kcb-app.is-workspace .kcb-tier-icon{font-size:24px}.kcb-app.is-workspace .kcb-tier.is-recommended small{font-size:9px!important;padding:2px 3px}.kcb-app.is-workspace .kcb-tier-unit{font-size:8px}.kcb-app.is-workspace .kcb-roast{min-height:76px;padding:6px 4px}.kcb-app.is-workspace .kcb-roast>i{flex-basis:27px;width:27px;height:27px}.kcb-app.is-workspace .kcb-roast>i span{width:13px;height:19px}.kcb-app.is-workspace .kcb-roast small{display:none}.kcb-app.is-workspace .kcb-roast-details{margin-top:8px}.kcb-app.is-workspace .kcb-roast-detail{padding:7px}.kcb-app.is-workspace .kcb-roast-detail>header{display:none}.kcb-app.is-workspace .kcb-roast-detail>div{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.kcb-app.is-workspace .kcb-roast-detail article{padding:4px 3px;flex-direction:column;gap:1px;text-align:center}.kcb-app.is-workspace .kcb-roast-detail article>i{flex-basis:25px;width:25px;height:25px}.kcb-app.is-workspace .kcb-roast-detail article small{display:none}.kcb-app.is-workspace .kcb-roast-detail article b{font-size:9px}}
@media(prefers-reduced-motion:reduce){.kcb-app .kcb-roast{transition:none}}