.cfg-root{
  --cfg-ink:#1C2B2A;
  --cfg-ink-soft:#4B5B59;
  --cfg-ink-muted:#8A9694;
  --cfg-paper:#FAFAF7;
  --cfg-card:#FFFFFF;
  --cfg-line:#E4E2D9;
  --cfg-accent:#2C6E68;
  --cfg-accent-dark:#1D4B47;
  --cfg-accent-tint:#E7F1EF;
  --cfg-amber:#C77B32;
  --cfg-radius:10px;
  font-family:'Manrope','Segoe UI',Arial,sans-serif;
  color:var(--cfg-ink);
  background:var(--cfg-paper);
}
.cfg-root *{box-sizing:border-box;}
.cfg-root h3{font-weight:700; margin:0;}

.cfg-tabs{display:flex; gap:6px; padding:14px 16px 0; background:var(--cfg-card); border-bottom:1px solid var(--cfg-line); overflow-x:auto;}
.cfg-tab{padding:12px 18px; font-size:14px; font-weight:600; color:var(--cfg-ink-soft); border:none; background:none; cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; font-family:inherit;}
.cfg-tab.cfg-active{color:var(--cfg-accent-dark); border-bottom-color:var(--cfg-accent);}
.cfg-badge{display:inline-block; margin-left:6px; font-size:10px; font-weight:700; padding:2px 6px; border-radius:20px; background:var(--cfg-ink-muted); color:#fff;}
.cfg-tab.cfg-active .cfg-badge{background:var(--cfg-accent);}

.cfg-wrap{max-width:1080px; margin:0 auto; padding:24px 16px; display:grid; grid-template-columns:1fr 340px; gap:24px;}
@media (max-width:860px){ .cfg-wrap{grid-template-columns:1fr;} }

.cfg-panel{background:var(--cfg-card); border:1px solid var(--cfg-line); border-radius:var(--cfg-radius); padding:20px 22px; margin-bottom:18px;}
.cfg-step-label{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.cfg-step-num{width:24px; height:24px; border-radius:50%; background:var(--cfg-accent-tint); color:var(--cfg-accent-dark); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;}
.cfg-step-title{font-size:15px; font-weight:700;}
.cfg-step-hint{font-size:12px; color:var(--cfg-ink-muted); margin-top:2px;}

.cfg-grid4{display:grid; grid-template-columns:1fr 1fr 1fr 1.4fr; gap:12px;}
@media (max-width:520px){ .cfg-grid4{grid-template-columns:1fr 1fr;} }

.cfg-field-label{display:block; font-size:12px; color:var(--cfg-ink-muted); margin-bottom:5px; font-weight:600;}
.cfg-root input[type=number], .cfg-root input[type=text], .cfg-root input[type=email], .cfg-root input[type=tel], .cfg-root select, .cfg-root textarea{
  width:100%; padding:9px 10px; font-size:14px; border:1px solid var(--cfg-line); border-radius:7px; background:#fff; color:var(--cfg-ink); font-family:inherit; margin-bottom:10px;
}
.cfg-root input:focus, .cfg-root select:focus, .cfg-root textarea:focus{outline:2px solid var(--cfg-accent); outline-offset:1px;}

.cfg-swatch-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
@media (max-width:600px){ .cfg-swatch-grid{grid-template-columns:repeat(3,1fr);} }
.cfg-swatch{cursor:pointer; border:1px solid var(--cfg-line); border-radius:8px; padding:6px; text-align:center; background:#fff;}
.cfg-swatch.cfg-selected{border-color:var(--cfg-accent); box-shadow:0 0 0 1px var(--cfg-accent);}
.cfg-chip{width:100%; height:34px; border-radius:5px; margin-bottom:6px; border:1px solid rgba(0,0,0,.06);}
.cfg-swatch-name{font-size:10.5px; color:var(--cfg-ink-soft); line-height:1.3; display:block;}
.cfg-surcharge{font-size:10px; color:var(--cfg-amber); font-weight:700; display:block;}
.cfg-color-group-label{font-size:12px; font-weight:700; color:var(--cfg-ink-soft); margin:16px 0 8px;}
.cfg-color-group-label:first-child{margin-top:0;}

.cfg-toggle-row{display:flex; gap:10px;}
.cfg-toggle-btn{flex:1; padding:12px; border:1px solid var(--cfg-line); border-radius:8px; background:#fff; cursor:pointer; text-align:left; font-family:inherit;}
.cfg-toggle-btn.cfg-selected{border-color:var(--cfg-accent); background:var(--cfg-accent-tint);}
.cfg-t-title{font-size:13px; font-weight:700; display:block;}
.cfg-t-sub{font-size:11.5px; color:var(--cfg-ink-muted);}

.cfg-acc-row{display:flex; align-items:center; justify-content:space-between; padding:11px 2px; border-bottom:1px solid var(--cfg-line); font-size:13.5px; margin:0; cursor:pointer;}
.cfg-acc-row:last-child{border-bottom:none;}
.cfg-acc-left{display:flex; align-items:center; gap:10px;}
.cfg-acc-left input{width:auto; margin:0;}
.cfg-acc-price{color:var(--cfg-ink-muted); font-size:12.5px; font-weight:600; white-space:nowrap;}

.cfg-summary{position:sticky; top:24px; background:var(--cfg-card); border:1px solid var(--cfg-line); border-radius:var(--cfg-radius); padding:20px 22px; height:fit-content;}
.cfg-summary h3{font-size:15px; margin-bottom:16px;}
.cfg-summary-row{display:flex; justify-content:space-between; font-size:13px; color:var(--cfg-ink-soft); padding:6px 0;}
.cfg-summary-total{margin-top:12px; padding-top:14px; border-top:1px solid var(--cfg-line); display:flex; justify-content:space-between; align-items:baseline;}
.cfg-label{font-size:13px; color:var(--cfg-ink-muted);}
.cfg-value{font-size:22px; font-weight:700; color:var(--cfg-accent-dark);}
.cfg-summary-note{font-size:11px; color:var(--cfg-ink-muted); margin-top:10px; line-height:1.5;}
.cfg-cta{margin-top:16px; width:100%; padding:13px; border:none; border-radius:8px; background:var(--cfg-accent-dark); color:#fff; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit;}
.cfg-cta:hover{background:var(--cfg-accent);}
.cfg-cta:disabled{opacity:.6; cursor:not-allowed;}
.cfg-btn-secondary{margin-top:16px; margin-right:8px; padding:13px 18px; border:1px solid var(--cfg-line); border-radius:8px; background:#fff; color:var(--cfg-ink); font-weight:600; font-size:14px; cursor:pointer; font-family:inherit;}

.cfg-preview-svg-wrap{display:flex; justify-content:center; padding:4px 0 16px;}
.cfg-preview-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--cfg-line);}
.cfg-chip-acc{font-size:11px; padding:4px 10px; border-radius:20px; background:var(--cfg-accent-tint); color:var(--cfg-accent-dark); font-weight:700;}
.cfg-chip-acc.cfg-none{background:var(--cfg-paper); color:var(--cfg-ink-muted); border:1px dashed var(--cfg-line); font-weight:600;}
.cfg-preview-dim-text{font-size:11px; font-weight:700; fill:var(--cfg-ink-soft);}

.cfg-cart-item{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:12px 0; border-bottom:1px solid var(--cfg-line);}
.cfg-cart-item:first-child{padding-top:0;}
.cfg-ci-title{font-size:13px; font-weight:700;}
.cfg-ci-detail{font-size:11.5px; color:var(--cfg-ink-muted); margin-top:2px; line-height:1.5;}
.cfg-ci-right{text-align:right; flex-shrink:0;}
.cfg-ci-price{font-size:13px; font-weight:700; color:var(--cfg-accent-dark);}
.cfg-ci-remove{display:block; margin-top:4px; border:none; background:none; cursor:pointer; color:var(--cfg-ink-muted); font-size:11px; text-decoration:underline; padding:0; font-family:inherit;}
.cfg-ci-remove:hover{color:var(--cfg-amber);}
.cfg-cart-empty{font-size:12.5px; color:var(--cfg-ink-muted); padding:6px 0 4px;}
.cfg-cart-count{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:20px; background:var(--cfg-accent); color:#fff; font-size:11px; font-weight:700; margin-left:6px;}

.cfg-empty-state{background:var(--cfg-card); border:1px dashed var(--cfg-line); border-radius:var(--cfg-radius); padding:60px 30px; text-align:center; color:var(--cfg-ink-muted);}
.cfg-empty-icon{width:44px; height:44px; border-radius:50%; background:var(--cfg-paper); border:1px solid var(--cfg-line); margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--cfg-ink-muted);}
.cfg-empty-state h3{color:var(--cfg-ink); font-size:16px; margin-bottom:8px;}
.cfg-empty-state p{font-size:13px; max-width:340px; margin:0 auto; line-height:1.6;}

.cfg-hidden{display:none !important;}

.cfg-modal-overlay{position:fixed; inset:0; background:rgba(20,25,24,.5); display:flex; align-items:center; justify-content:center; z-index:99999; padding:20px;}
.cfg-modal{background:#fff; border-radius:12px; padding:26px 26px 22px; max-width:420px; width:100%; font-family:'Manrope',sans-serif;}
.cfg-modal h3{font-size:17px; margin-bottom:6px;}
.cfg-modal-sub{font-size:12.5px; color:var(--cfg-ink-muted); margin:0 0 16px;}
.cfg-modal-actions{display:flex; justify-content:flex-end; margin-top:4px;}
.cfg-modal-actions .cfg-cta{width:auto; padding:12px 20px;}
#cfg-form-msg{font-size:12.5px; margin:4px 0 4px; min-height:1px;}
#cfg-form-msg.cfg-error{color:#A32D2D;}
#cfg-form-msg.cfg-success{color:var(--cfg-accent-dark);}