:root{--bg:#f4f6f8;--card:#fff;--ink:#0f1b2d;--muted:#64748b;--line:#e5eaf0;--mint:#b7e7d4;--mintSoft:#e8f6ef;--green:#2f9b70;--orange:#EAB308;--blue:#2F7FD6;--violet:#7C5CFF;--shadow:0 10px 28px rgba(15,27,45,.055)}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;color:var(--ink);background:linear-gradient(180deg,#fbfcfd 0%,#f4f6f8 100%);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}.app{width:min(100%,760px);margin:0 auto;padding:26px 18px 46px}.header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.logo{font-size:42px;line-height:.95;font-weight:950;letter-spacing:-.062em;color:var(--ink)}.logo span{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 12%,var(--green) 78%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.tagline{margin-top:5px;color:var(--muted);font-size:16px;font-weight:720}.nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.nav a,.araçsMenu button{border:1px solid #dfe6ee;background:#fff;border-radius:999px;padding:9px 13px;color:var(--ink);font-size:13px;font-weight:780;text-decoration:none}.araçsMenu{position:relative}.araçsMenu button{cursor:pointer}.araçsDropdown{display:none;position:absolute;z-index:20;right:0;top:42px;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 18px 42px rgba(15,27,45,.11)}.araçsMenu.open .araçsDropdown{display:grid;gap:6px}.araçsDropdown a{border:0;border-radius:12px;background:#f8fafc}.hero{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:28px;margin-bottom:16px}.overline{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:900;color:var(--green);margin-bottom:8px}.hero h1{margin:0;max-width:680px;color:var(--ink);font-size:34px;line-height:1.08;letter-spacing:-.045em;font-weight:900}.hero p{margin:14px 0 0;max-width:690px;color:#4e5f77;font-size:15px;line-height:1.47;font-weight:560}.section{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:22px;margin-bottom:14px}.section h2{margin:0 0 10px;font-size:24px;line-height:1.1;letter-spacing:-.03em}.section p{margin:0 0 12px;color:#4e5f77;font-size:15px;line-height:1.55}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fff}.card h3{margin:0 0 8px;font-size:17px}.card p,.card li{color:#4e5f77;font-size:14px;line-height:1.5}.card ul{margin:8px 0 0;padding-left:18px}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.step{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fff}.stepNo{width:28px;height:28px;border-radius:50%;background:var(--mintSoft);color:var(--green);display:grid;place-items:center;font-weight:900;margin-bottom:8px}.step b{display:block;margin-bottom:6px}.step span{color:#4e5f77;font-size:14px;line-height:1.45}.callout{border:1px solid var(--mint);background:var(--mintSoft);border-radius:18px;padding:16px;color:#244234;font-weight:700;line-height:1.5}.cta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:var(--green);color:#fff;border-radius:15px;padding:13px 16px;font-size:15px;font-weight:900}.tiny{margin-top:8px;color:var(--muted);font-size:12px}.footer{margin-top:16px;text-align:center;color:var(--muted);font-size:12px}@media(max-width:850px){.app{max-width:430px;padding:14px 12px 28px}.logo{font-size:35px}.tagline{font-size:14px}.nav{display:none}.hero{border-radius:22px;padding:18px 16px 16px}.hero h1{font-size:24px}.hero p{font-size:12.6px}.section{padding:17px 14px;border-radius:19px}.section h2{font-size:21px}.grid,.steps{grid-template-columns:1fr}.card{padding:14px}}


/* V115 — Pricing & Negotiation Araçs tagline refresh */
.tagline{
 margin-top:6px!important;
 display:inline-block!important;
 color:transparent!important;
 -webkit-text-fill-color:transparent!important;
 background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 28%,var(--green) 100%)!important;
 -webkit-background-clip:text!important;
 background-clip:text!important;
 font-size:14px!important;
 line-height:1.08!important;
 font-weight:900!important;
 letter-spacing:.045em!important;
 font-style:italic!important;
}
@media(max-width:850px){
 .tagline{font-size:12px!important;letter-spacing:.04em!important;margin-top:6px!important}
}


/* V116 — tagline corrected: Make the Numbers Talk!, black and lighter */
.tagline{
 color:var(--ink)!important;
 background:none!important;
 -webkit-background-clip:initial!important;
 background-clip:initial!important;
 -webkit-text-fill-color:var(--ink)!important;
 font-weight:560!important;
 letter-spacing:.045em!important;
 font-style:normal!important;
 text-transform:none!important;
}
@media(max-width:850px){
 .tagline{font-weight:560!important;letter-spacing:.04em!important}
}

/* V118 — Make the Numbers Talk! slanted text, not rotated; softer compact KPI cards for Check and Targets */
.tagline{
 color:var(--ink)!important;
 background:none!important;
 -webkit-background-clip:initial!important;
 background-clip:initial!important;
 -webkit-text-fill-color:var(--ink)!important;
 font-weight:540!important;
 letter-spacing:.04em!important;
 font-style:italic!important;
 text-transform:none!important;
 display:inline-block!important;
 transform:none!important;
}

@media(max-width:850px){
 .tagline{
 font-weight:540!important;
 letter-spacing:.035em!important;
 font-style:italic!important;
 transform:none!important;
 }
}

/* Slightly smaller only for the result KPI boxes of Price Check and Targets */
.panel.pricecheck .miniGrid .resultPill,
.panel.targets .targetGrid .resultPill{
 min-height:104px!important;
 padding:12px 10px!important;
 border-radius:15px!important;
}

.panel.pricecheck .miniGrid .resultPill .resultIcon,
.panel.targets .targetGrid .resultPill .resultIcon{
 
 
 margin-bottom:6px!important;
 
}

.panel.pricecheck .miniGrid .resultPill b,
.panel.targets .targetGrid .resultPill b{
 font-size:10.8px!important;
 line-height:1.08!important;
}

.panel.pricecheck .miniGrid .resultPill span,
.panel.targets .targetGrid .resultPill span{
 font-size:19px!important;
 margin-top:6px!important;
 line-height:1.02!important;
}

.panel.pricecheck .miniGrid .resultPill small,
.panel.targets .targetGrid .resultPill small{
 font-size:10px!important;
 margin-top:3px!important;
}

@media(max-width:850px){
 .panel.pricecheck .miniGrid .resultPill,
 .panel.targets .targetGrid .resultPill{
 min-height:82px!important;
 padding:8px 6px!important;
 border-radius:13px!important;
 }

 .panel.pricecheck .miniGrid .resultPill .resultIcon,
 .panel.targets .targetGrid .resultPill .resultIcon{
 
 
 margin-bottom:4px!important;
 
 }

 .panel.pricecheck .miniGrid .resultPill b,
 .panel.targets .targetGrid .resultPill b{
 font-size:8.8px!important;
 }

 .panel.pricecheck .miniGrid .resultPill span,
 .panel.targets .targetGrid .resultPill span{
 font-size:15.5px!important;
 margin-top:4px!important;
 }

 .panel.pricecheck .miniGrid .resultPill small,
 .panel.targets .targetGrid .resultPill small{
 display:none!important;
 }
}



/* V119 — Full Deal Result KPI cards slightly reduced to avoid crowding the green header */
.panel.full .resultsGrid{
 gap:7px!important;
 padding:4px 12px 10px!important;
}
.panel.full .resultsGrid .resultPill{
 min-height:74px!important;
 padding:8px 7px!important;
 border-radius:13px!important;
}
.panel.full .resultsGrid .resultPill .resultIcon{
 width:16px!important;
 height:16px!important;
 margin:0 auto 4px!important;
 font-size:11px!important;
}
.panel.full .resultsGrid .resultPill .resultIcon svg{
 width:14px!important;
 height:14px!important;
}
.panel.full .resultsGrid .resultPill b{
 font-size:8.5px!important;
 line-height:1.03!important;
}
.panel.full .resultsGrid .resultPill span{
 font-size:12px!important;
 margin-top:5px!important;
 line-height:1!important;
}
.panel.full .resultsGrid .resultPill small{
 display:none!important;
}
@media(max-width:390px){
 .panel.full .resultsGrid{
 gap:6px!important;
 padding:4px 10px 10px!important;
 }
 .panel.full .resultsGrid .resultPill{
 min-height:70px!important;
 padding:7px 5px!important;
 border-radius:12px!important;
 }
 .panel.full .resultsGrid .resultPill b{font-size:7.9px!important}
 .panel.full .resultsGrid .resultPill span{font-size:11.2px!important;margin-top:4px!important}
 .panel.full .resultsGrid .resultPill .resultIcon{width:15px!important;height:15px!important;margin-bottom:4px!important}
 .panel.full .resultsGrid .resultPill .resultIcon svg{width:13px!important;height:13px!important}
}



/* V120 — Full Deal Result cards narrower and closer to square */
.panel.full .resultsGrid{
 gap:8px!important;
 padding:4px 18px 10px!important;
}
.panel.full .resultsGrid .resultPill{
 min-height:80px!important;
 padding:8px 6px!important;
 border-radius:14px!important;
}
.panel.full .resultsGrid .resultPill .resultIcon{
 width:16px!important;
 height:16px!important;
 margin:0 auto 4px!important;
 font-size:11px!important;
}
.panel.full .resultsGrid .resultPill .resultIcon svg{
 width:14px!important;
 height:14px!important;
}
.panel.full .resultsGrid .resultPill b{
 font-size:8.4px!important;
 line-height:1.03!important;
}
.panel.full .resultsGrid .resultPill span{
 font-size:12px!important;
 margin-top:5px!important;
 line-height:1!important;
}
.panel.full .resultsGrid .resultPill small{display:none!important}

@media(max-width:850px){
 .panel.full .resultsGrid{
 gap:8px!important;
 padding:4px 18px 10px!important;
 }
 .panel.full .resultsGrid .resultPill{
 min-height:82px!important;
 padding:8px 6px!important;
 border-radius:14px!important;
 }
 .panel.full .resultsGrid .resultPill b{font-size:8.2px!important}
 .panel.full .resultsGrid .resultPill span{font-size:11.8px!important;margin-top:4px!important}
}

@media(max-width:390px){
 .panel.full .resultsGrid{
 gap:7px!important;
 padding:4px 16px 10px!important;
 }
 .panel.full .resultsGrid .resultPill{
 min-height:78px!important;
 padding:7px 5px!important;
 border-radius:13px!important;
 }
 .panel.full .resultsGrid .resultPill b{font-size:7.8px!important}
 .panel.full .resultsGrid .resultPill span{font-size:11.1px!important;margin-top:4px!important}
 .panel.full .resultsGrid .resultPill .resultIcon{width:15px!important;height:15px!important}
 .panel.full .resultsGrid .resultPill .resultIcon svg{width:13px!important;height:13px!important}
}



/* V121 — more compact Purchase/Selling section headers for mobile practicality */
.panel.purchase .panelHead,
.panel.selling .panelHead{
 padding:9px 12px!important;
 gap:10px!important;
}
.panel.purchase .sectionIcon,
.panel.selling .sectionIcon{
 width:30px!important;
 height:30px!important;
}
.panel.purchase .sectionIcon svg,
.panel.selling .sectionIcon svg{
 width:16px!important;
 height:16px!important;
}
.panel.purchase h3,
.panel.selling h3{
 font-size:18px!important;
 line-height:1.05!important;
}
.panel.purchase .hint,
.panel.selling .hint{
 margin-top:1px!important;
 font-size:11px!important;
 line-height:1.15!important;
}
@media(max-width:850px){
 .panel.purchase .panelHead,
 .panel.selling .panelHead{
 padding:8px 10px!important;
 gap:9px!important;
 }
 .panel.purchase .sectionIcon,
 .panel.selling .sectionIcon{
 width:27px!important;
 height:27px!important;
 }
 .panel.purchase .sectionIcon svg,
 .panel.selling .sectionIcon svg{
 width:14px!important;
 height:14px!important;
 }
 .panel.purchase h3,
 .panel.selling h3{
 font-size:16px!important;
 line-height:1.03!important;
 }
 .panel.purchase .hint,
 .panel.selling .hint{
 margin-top:1px!important;
 font-size:10px!important;
 line-height:1.12!important;
 }
}


/* V122 — Full Deal Result header compacted to match Purchase/Selling headers */
.panel.full .panelHead{
 padding:9px 12px!important;
 gap:10px!important;
}
.panel.full .sectionIcon{
 width:30px!important;
 height:30px!important;
}
.panel.full .sectionIcon svg{
 width:16px!important;
 height:16px!important;
}
.panel.full h3{
 font-size:18px!important;
 line-height:1.05!important;
}
.panel.full .hint{
 margin-top:1px!important;
 font-size:11px!important;
 line-height:1.15!important;
}
@media(max-width:850px){
 .panel.full .panelHead{
 padding:8px 10px!important;
 gap:9px!important;
 }
 .panel.full .sectionIcon{
 width:27px!important;
 height:27px!important;
 }
 .panel.full .sectionIcon svg{
 width:14px!important;
 height:14px!important;
 }
 .panel.full h3{
 font-size:16px!important;
 line-height:1.03!important;
 }
 .panel.full .hint{
 margin-top:1px!important;
 font-size:10px!important;
 line-height:1.12!important;
 }
}


/* V123 — yellow warning color instead of orange */
:root{--orange:#EAB308!important;}
.resultPill.warn span,
.kpi.margin .value,
.resultIcon.marginIcon{
 color:#EAB308!important;
}
.panel.targets .resultPill.targetMetricOrange,
#targets .resultPill[data-metric-tier="orange"],
#targets .targetValueRow.v110-orange,
#targets .resultPill.v110-orange{
 border-color:#EAB308!important;
}
.panel.targets .resultPill.targetMetricOrange span,
#targetCorrespondingValue.v110-orange,
#targetCorrespondingLabel.v110-orange{
 color:#EAB308!important;
 -webkit-text-fill-color:#EAB308!important;
}
.panel.targets .resultPill.targetMetricOrange .resultIcon,
#targets .resultPill[data-metric-tier="orange"] .resultIcon,
#targets .resultPill.v110-orange .resultIcon{
 color:#EAB308!important;
 -webkit-text-fill-color:#EAB308!important;
}



/* V124 — lighter yellow warning tone and unified result-card sizing across araçs */
:root{--orange:#FACC15!important;}
.kpi.margin .value,
.resultPill.warn span,
.resultIcon.marginIcon{
 color:#FACC15!important;
 -webkit-text-fill-color:#FACC15!important;
}
.panel.targets .resultPill.targetMetricOrange,
#targets .resultPill[data-metric-tier="orange"],
#targets .targetValueRow.v110-orange,
#targets .resultPill.v110-orange{
 border-color:#FACC15!important;
}
.panel.targets .resultPill.targetMetricOrange span,
#targetCorrespondingValue.v110-orange,
#targetCorrespondingLabel.v110-orange{
 color:#FACC15!important;
 -webkit-text-fill-color:#FACC15!important;
}
.panel.targets .resultPill.targetMetricOrange .resultIcon,
#targets .resultPill[data-metric-tier="orange"] .resultIcon,
#targets .resultPill.v110-orange .resultIcon{
 color:#FACC15!important;
 -webkit-text-fill-color:#FACC15!important;
}

.panel.full .resultsGrid .resultPill,
.panel.pricecheck .miniGrid .resultPill,
.panel.targets .targetGrid .resultPill{
 min-height:104px!important;
 padding:12px 10px!important;
 border-radius:15px!important;
}
.panel.full .resultsGrid .resultPill .resultIcon{
 width:21px!important;
 height:21px!important;
 margin-bottom:6px!important;
 font-size:16px!important;
}
.panel.pricecheck .miniGrid .resultPill .resultIcon,
.panel.targets .targetGrid .resultPill .resultIcon{
 
 
 margin-bottom:6px!important;
 
}
.panel.full .resultsGrid .resultPill .resultIcon svg{
 width:19px!important;
 height:19px!important;
}
.panel.pricecheck .miniGrid .resultPill .resultIcon svg,
.panel.targets .targetGrid .resultPill .resultIcon svg{
 
 
}
.panel.full .resultsGrid .resultPill b,
.panel.pricecheck .miniGrid .resultPill b,
.panel.targets .targetGrid .resultPill b{
 font-size:10.8px!important;
 line-height:1.08!important;
}
.panel.full .resultsGrid .resultPill span,
.panel.pricecheck .miniGrid .resultPill span,
.panel.targets .targetGrid .resultPill span{
 font-size:19px!important;
 margin-top:6px!important;
 line-height:1.02!important;
}
.panel.full .resultsGrid .resultPill small,
.panel.pricecheck .miniGrid .resultPill small,
.panel.targets .targetGrid .resultPill small{
 font-size:10px!important;
 margin-top:3px!important;
 display:block!important;
}

@media(max-width:850px){
 .panel.full .resultsGrid .resultPill,
 .panel.pricecheck .miniGrid .resultPill,
 .panel.targets .targetGrid .resultPill{
 min-height:82px!important;
 padding:8px 6px!important;
 border-radius:13px!important;
 }
 .panel.full .resultsGrid .resultPill .resultIcon{
 width:17px!important;
 height:17px!important;
 margin-bottom:4px!important;
 font-size:14px!important;
 }
 .panel.pricecheck .miniGrid .resultPill .resultIcon,
 .panel.targets .targetGrid .resultPill .resultIcon{
 
 
 margin-bottom:4px!important;
 
 }
 .panel.full .resultsGrid .resultPill .resultIcon svg{
 width:15px!important;
 height:15px!important;
 }
 .panel.pricecheck .miniGrid .resultPill .resultIcon svg,
 .panel.targets .targetGrid .resultPill .resultIcon svg{
 
 
 }
 .panel.full .resultsGrid .resultPill b,
 .panel.pricecheck .miniGrid .resultPill b,
 .panel.targets .targetGrid .resultPill b{
 font-size:8.8px!important;
 }
 .panel.full .resultsGrid .resultPill span,
 .panel.pricecheck .miniGrid .resultPill span,
 .panel.targets .targetGrid .resultPill span{
 font-size:15.5px!important;
 margin-top:4px!important;
 }
 .panel.full .resultsGrid .resultPill small,
 .panel.pricecheck .miniGrid .resultPill small,
 .panel.targets .targetGrid .resultPill small{
 display:none!important;
 }
}



/* V125 — four-step warning scale: red / orange / yellow / green */
:root{--warning-orange:#d8891f;--warning-yellow:#FACC15;}
.resultPill.bad span,.resultPill.bad .resultIcon{color:#d92d20!important;-webkit-text-fill-color:#d92d20!important}
.resultPill.orange span,.resultPill.orange .resultIcon{color:#d8891f!important;-webkit-text-fill-color:#d8891f!important}
.resultPill.warn span,.resultPill.warn .resultIcon{color:#FACC15!important;-webkit-text-fill-color:#FACC15!important}
.resultPill.good span,.resultPill.good .resultIcon{color:#2f9b70!important;-webkit-text-fill-color:#2f9b70!important}
.kpi.metric-red .value,.kpi.metric-red .metricIcon{color:#d92d20!important;-webkit-text-fill-color:#d92d20!important}
.kpi.metric-orange .value,.kpi.metric-orange .metricIcon{color:#d8891f!important;-webkit-text-fill-color:#d8891f!important}
.kpi.metric-warn .value,.kpi.metric-warn .metricIcon{color:#FACC15!important;-webkit-text-fill-color:#FACC15!important}
.kpi.metric-good .value,.kpi.metric-good .metricIcon{color:#2f9b70!important;-webkit-text-fill-color:#2f9b70!important}
.panel.targets .resultPill.targetMetricOrange,
#targets .resultPill[data-metric-tier="orange"],
#targets .targetValueRow.metric-orange,
#targets .targetValueRow[data-metric-tier="orange"]{border-color:#d8891f!important}
.panel.targets .resultPill.targetMetricOrange span,
#targetCorrespondingValue.metric-orange,
#targetCorrespondingLabel.metric-orange{color:#d8891f!important;-webkit-text-fill-color:#d8891f!important}
.panel.targets .resultPill.targetMetricOrange .resultIcon,
#targets .resultPill[data-metric-tier="orange"] .resultIcon{color:#d8891f!important;-webkit-text-fill-color:#d8891f!important}
.panel.targets .resultPill.targetMetricYellow,
#targets .resultPill[data-metric-tier="yellow"],
#targets .targetValueRow.metric-yellow,
#targets .targetValueRow[data-metric-tier="yellow"]{border-color:#FACC15!important}
.panel.targets .resultPill.targetMetricYellow span,
#targetCorrespondingValue.metric-yellow,
#targetCorrespondingLabel.metric-yellow{color:#FACC15!important;-webkit-text-fill-color:#FACC15!important}
.panel.targets .resultPill.targetMetricYellow .resultIcon,
#targets .resultPill[data-metric-tier="yellow"] .resultIcon{color:#FACC15!important;-webkit-text-fill-color:#FACC15!important}



/* V126 — Margin Target label fixed in purple; target percent sign follows the same tier color as the value */
#targetValueLabel{
 color:var(--target-accent)!important;
 -webkit-text-fill-color:var(--target-accent)!important;
 font-weight:900!important;
}
#targets .targetValueRow .unit{
 font-weight:900!important;
}
#targets .targetValueRow.metric-red .unit,
#targets .targetValueRow[data-metric-tier="red"] .unit,
#targetValuePct.metric-red + .unit,
#targetValuePct[data-metric-tier="red"] + .unit{
 color:#d92d20!important;
 -webkit-text-fill-color:#d92d20!important;
}
#targets .targetValueRow.metric-orange .unit,
#targets .targetValueRow[data-metric-tier="orange"] .unit,
#targetValuePct.metric-orange + .unit,
#targetValuePct[data-metric-tier="orange"] + .unit{
 color:#d8891f!important;
 -webkit-text-fill-color:#d8891f!important;
}
#targets .targetValueRow.metric-yellow .unit,
#targets .targetValueRow[data-metric-tier="yellow"] .unit,
#targetValuePct.metric-yellow + .unit,
#targetValuePct[data-metric-tier="yellow"] + .unit{
 color:#FACC15!important;
 -webkit-text-fill-color:#FACC15!important;
}
#targets .targetValueRow.metric-green .unit,
#targets .targetValueRow[data-metric-tier="green"] .unit,
#targetValuePct.metric-green + .unit,
#targetValuePct[data-metric-tier="green"] + .unit{
 color:#2f9b70!important;
 -webkit-text-fill-color:#2f9b70!important;
}


/* V127 — clean final target color system */
#targets .targetValueRow .name,
#targetValueLabel{
 color:var(--target-accent)!important;
 -webkit-text-fill-color:var(--target-accent)!important;
 font-weight:900!important;
}

#targetValueHelp{
 color:var(--muted)!important;
 -webkit-text-fill-color:var(--muted)!important;
 font-weight:650!important;
}

#targets .targetValueRow.target-red,
#targets .targetValueRow[data-target-tier="red"]{
 border-color:#d92d20!important;
 box-shadow:0 8px 20px rgba(217,45,32,.12)!important;
}
#targets .targetValueRow.target-orange,
#targets .targetValueRow[data-target-tier="orange"]{
 border-color:#d8891f!important;
 box-shadow:0 8px 20px rgba(216,137,31,.12)!important;
}
#targets .targetValueRow.target-yellow,
#targets .targetValueRow[data-target-tier="yellow"]{
 border-color:#FACC15!important;
 box-shadow:0 8px 20px rgba(250,204,21,.16)!important;
}
#targets .targetValueRow.target-green,
#targets .targetValueRow[data-target-tier="green"]{
 border-color:#2f9b70!important;
 box-shadow:0 8px 20px rgba(47,155,112,.12)!important;
}

#targetValuePct.target-red,
#targets .targetValueRow.target-red .unit,
#targets .targetValueRow[data-target-tier="red"] .unit{
 color:#d92d20!important;
 -webkit-text-fill-color:#d92d20!important;
 border-color:#d92d20!important;
 caret-color:#d92d20!important;
}
#targetValuePct.target-orange,
#targets .targetValueRow.target-orange .unit,
#targets .targetValueRow[data-target-tier="orange"] .unit{
 color:#d8891f!important;
 -webkit-text-fill-color:#d8891f!important;
 border-color:#d8891f!important;
 caret-color:#d8891f!important;
}
#targetValuePct.target-yellow,
#targets .targetValueRow.target-yellow .unit,
#targets .targetValueRow[data-target-tier="yellow"] .unit{
 color:#FACC15!important;
 -webkit-text-fill-color:#FACC15!important;
 border-color:#FACC15!important;
 caret-color:#FACC15!important;
}
#targetValuePct.target-green,
#targets .targetValueRow.target-green .unit,
#targets .targetValueRow[data-target-tier="green"] .unit{
 color:#2f9b70!important;
 -webkit-text-fill-color:#2f9b70!important;
 border-color:#2f9b70!important;
 caret-color:#2f9b70!important;
}


/* V128 — target input area fixed purple, no dynamic target colors */
#targets .targetValueRow,
#targets .targetValueRow.target-red,
#targets .targetValueRow.target-orange,
#targets .targetValueRow.target-yellow,
#targets .targetValueRow.target-green,
#targets .targetValueRow.metric-red,
#targets .targetValueRow.metric-orange,
#targets .targetValueRow.metric-yellow,
#targets .targetValueRow.metric-green,
#targets .targetValueRow[data-target-tier],
#targets .targetValueRow[data-metric-tier]{
 border-color:var(--target-accent)!important;
 box-shadow:0 8px 20px rgba(124,92,255,.10)!important;
}

#targetValueLabel,
#targetValueHelp,
#targetValuePct,
#targets .targetValueRow .unit{
 color:var(--target-accent)!important;
 -webkit-text-fill-color:var(--target-accent)!important;
}

#targetValuePct{
 border-color:var(--target-accent)!important;
 caret-color:var(--target-accent)!important;
 box-shadow:0 0 0 4px rgba(124,92,255,.14)!important;
}


/* V129 — target area truly fixed purple inside calculation logic */
#targets .targetValueRow,
#targets .targetValueRow[class*="target"],
#targets .targetValueRow[class*="metric"],
#targets .targetValueRow[data-target-tier],
#targets .targetValueRow[data-metric-tier]{
 border-color:var(--target-accent)!important;
 box-shadow:0 8px 20px rgba(124,92,255,.10)!important;
}

#targetValueLabel,
#targetValueHelp,
#targetValuePct,
#targets .targetValueRow .unit{
 color:var(--target-accent)!important;
 -webkit-text-fill-color:var(--target-accent)!important;
}

#targetValuePct{
 border-color:var(--target-accent)!important;
 caret-color:var(--target-accent)!important;
 box-shadow:0 0 0 4px rgba(124,92,255,.14)!important;
}


/* V130 — target input area: all black, no dynamic colors */
#targets .targetValueRow,
#targets .targetValueRow[class*="target"],
#targets .targetValueRow[class*="metric"],
#targets .targetValueRow[data-target-tier],
#targets .targetValueRow[data-metric-tier]{
 border-color:#dfe6ee!important;
 box-shadow:none!important;
 background:#fff!important;
}

#targetValueLabel,
#targetValueHelp,
#targetValuePct,
#targets .targetValueRow .unit{
 color:#0f1b2d!important;
 -webkit-text-fill-color:#0f1b2d!important;
}

#targetValuePct{
 border-color:#dfe6ee!important;
 caret-color:#0f1b2d!important;
 box-shadow:none!important;
}


/* V131 — multilingual SEO content blocks */
.seoLanguageBlock{
 margin:18px 0 18px;
 padding:18px;
 border:1px solid #e5eaf0;
 border-radius:18px;
 background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
 box-shadow:0 8px 20px rgba(15,27,45,.035);
}
.seoLanguageBlock h2{
 margin:0 0 8px;
 font-size:22px;
 line-height:1.12;
 letter-spacing:-.03em;
 color:#0f1b2d;
}
.seoLanguageBlock p{
 margin:8px 0 0;
 color:#5f6b7a;
 font-size:14px;
 line-height:1.45;
 font-weight:600;
}
@media(max-width:850px){
 .seoLanguageBlock{padding:14px;margin:14px 0}
 .seoLanguageBlock h2{font-size:18px}
 .seoLanguageBlock p{font-size:12.5px}
}


/* V132 — avoid impossible target margin output appearing as a wrong number */
#targetRequiredPrice,
#targetRequiredDiscount,
#targetCorrespondingValue{
 white-space:nowrap!important;
}


/* V141 — tagline normal style */
.logo span,
.logo small,
.brand span,
.brand small,
.subtitle,
.eyebrow,
.footer {
 font-style: normal !important;
}


/* V142 — tagline left aligned and icon swap */
.tagline{
 display:block!important;
 margin-top:6px!important;
 margin-left:0!important;
 padding-left:0!important;
 text-indent:0!important;
 text-align:left!important;
 align-self:flex-start!important;
 transform:none!important;
 font-style:normal!important;
 color:var(--ink)!important;
 -webkit-text-fill-color:var(--ink)!important;
}
.logo + .tagline{
 margin-left:0!important;
}
.kpi.markup .metricIcon,
.resultIcon.markupIcon{
 font-size:0!important;
 line-height:0!important;
}
.kpi.profit .metricIcon svg,
.resultIcon.profitIcon svg,
.kpi.markup .metricIcon svg,
.resultIcon.markupIcon svg{
 display:block;
}


/* V143 — torn tag discount icon */
.discountIcon{
 font-size:0!important;
 line-height:0!important;
}
.discountIcon svg{
 display:block!important;
}


/* V144 — cracked tag discount icon */
.discountIcon{
 font-size:0!important;
 line-height:0!important;
}
.discountIcon svg{
 display:block!important;
}


/* V145 — scissors discount icon */
.discountIcon{
 font-size:0!important;
 line-height:0!important;
}
.discountIcon svg{
 display:block!important;
}


/* V146 — narrower scissors discount icon */
.discountIcon{
 font-size:0!important;
 line-height:0!important;
}
.discountIcon svg{
 display:block!important;
}


/* V147 — proper scissors discount icon */
.discountIcon{
 font-size:0!important;
 line-height:0!important;
}
.discountIcon svg{
 display:block!important;
}


/* V148 — real scissors glyph discount icon */
.discountIcon{
 font-size:21px!important;
 line-height:1!important;
 font-weight:900!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 font-family:"Apple Color Emoji","Segoe UI Symbol","Noto Color Emoji",Arial,sans-serif!important;
}
.discountIcon svg{
 display:none!important;
}
@media(max-width:720px){
 .discountIcon{
 font-size:19px!important;
 }
}


/* V149 — monochrome black scissors discount icon */
.discountIcon{
 font-size:0!important;
 line-height:0!important;
 color:var(--ink)!important;
 -webkit-text-fill-color:var(--ink)!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
}
.discountIcon svg{
 display:block!important;
 width:20px!important;
 height:20px!important;
 stroke:currentColor!important;
}
.resultPill .discountIcon,
.kpi .discountIcon{
 color:var(--ink)!important;
 -webkit-text-fill-color:var(--ink)!important;
}
@media(max-width:720px){
 .discountIcon svg{
 width:18px!important;
 height:18px!important;
 }
}


/* V150 — clean monochrome scissors glyph */
.discountIcon{
 font-size:22px!important;
 line-height:1!important;
 font-weight:700!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 color:var(--ink)!important;
 -webkit-text-fill-color:var(--ink)!important;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Symbol","Helvetica Neue",Arial,sans-serif!important;
 font-variant-emoji:text!important;
}
.discountIcon svg{
 display:none!important;
}
.resultPill .discountIcon{
 color:var(--ink)!important;
 -webkit-text-fill-color:var(--ink)!important;
}
@media(max-width:720px){
 .discountIcon{
 font-size:20px!important;
 }
}



/* V164 — restore different static-page title accent colors */
body.static-full-deal .overline,
body.static-full-deal .hero .overline,
body.static-full-deal article.hero .overline{
 color:#7C3AED!important;
 -webkit-text-fill-color:#7C3AED!important;
}
body.static-full-deal .hero,
body.static-full-deal article.hero{
 border-left-color:#7C3AED!important;
}

body.static-price-check .overline,
body.static-price-check .hero .overline,
body.static-price-check article.hero .overline{
 color:#38BDF8!important;
 -webkit-text-fill-color:#38BDF8!important;
}
body.static-price-check .hero,
body.static-price-check article.hero{
 border-left-color:#38BDF8!important;
}

body.static-targets .overline,
body.static-targets .hero .overline,
body.static-targets article.hero .overline{
 color:#FACC15!important;
 -webkit-text-fill-color:#FACC15!important;
}
body.static-targets .hero,
body.static-targets article.hero{
 border-left-color:#FACC15!important;
}

body.static-about .overline,
body.static-about .hero .overline,
body.static-about article.hero .overline{
 color:#2FA17C!important;
 -webkit-text-fill-color:#2FA17C!important;
}
body.static-about .hero,
body.static-about article.hero{
 border-left-color:#2FA17C!important;
}


/* V166 — restore page-specific BusyFella logo gradients */
body.logo-full-deal .logo{
 color:#111827!important;
 -webkit-text-fill-color:#111827!important;
}
body.logo-full-deal .logo span{
 background:linear-gradient(90deg,#5B5FF6 0%,#7C3AED 52%,#A855F7 100%)!important;
 color:transparent!important;
 -webkit-text-fill-color:transparent!important;
 -webkit-background-clip:text!important;
 background-clip:text!important;
}

body.logo-price-check .logo{
 color:#111827!important;
 -webkit-text-fill-color:#111827!important;
}
body.logo-price-check .logo span{
 background:linear-gradient(90deg,#2563EB 0%,#38BDF8 55%,#7DD3FC 100%)!important;
 color:transparent!important;
 -webkit-text-fill-color:transparent!important;
 -webkit-background-clip:text!important;
 background-clip:text!important;
}

body.logo-targets .logo{
 color:#111827!important;
 -webkit-text-fill-color:#111827!important;
}
body.logo-targets .logo span{
 background:linear-gradient(90deg,#EAB308 0%,#FACC15 55%,#FDE047 100%)!important;
 color:transparent!important;
 -webkit-text-fill-color:transparent!important;
 -webkit-background-clip:text!important;
 background-clip:text!important;
}

body.logo-about .logo{
 color:#111827!important;
 -webkit-text-fill-color:#111827!important;
}
body.logo-about .logo span{
 background:linear-gradient(90deg,#7C3AED 0%,#A855F7 45%,#EC4899 100%)!important;
 color:transparent!important;
 -webkit-text-fill-color:transparent!important;
 -webkit-background-clip:text!important;
 background-clip:text!important;
}



/* V195 — prevent iPhone/Safari auto-zoom when focusing input fields */
input,
select,
textarea,
.input,
.field input,
.field select,
.field textarea,
.toolPanel input,
.toolPanel select,
.toolPanel textarea,
.panel input,
.panel select,
.panel textarea{
  font-size:16px!important;
  -webkit-text-size-adjust:100%!important;
}

input:focus,
select:focus,
textarea:focus{
  font-size:16px!important;
}


/* V196 — stronger anti-zoom override for tool inputs, including Full Deal specific panels */
html body input,
html body select,
html body textarea,
html body .panel input,
html body .panel select,
html body .panel textarea,
html body .panel.purchase input,
html body .panel.purchase select,
html body .panel.selling input,
html body .panel.selling select,
html body .panel.full input,
html body .panel.full select,
html body .panel.pricecheck input,
html body .panel.pricecheck select,
html body .panel.targets input,
html body .panel.targets select,
html body .discountRow input,
html body .dynamicDiscountRow input,
html body .tariffFeeRow input,
html body .dynamicFeeRow input,
html body .optionalFeeRow input{
  font-size:16px!important;
  -webkit-text-size-adjust:100%!important;
}

html body input:focus,
html body select:focus,
html body textarea:focus,
html body .panel input:focus,
html body .panel select:focus,
html body .panel textarea:focus,
html body .panel.purchase input:focus,
html body .panel.purchase select:focus,
html body .panel.selling input:focus,
html body .panel.selling select:focus,
html body .panel.full input:focus,
html body .panel.full select:focus,
html body .panel.pricecheck input:focus,
html body .panel.pricecheck select:focus,
html body .panel.targets input:focus,
html body .panel.targets select:focus{
  font-size:16px!important;
  -webkit-text-size-adjust:100%!important;
}


/* V200 — correct top navigation: Home, Tools dropdown, About */
.bfTopNav{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin:10px 0 16px!important;
  position:relative!important;
  z-index:50!important;
}

.bfTopNav a,
.bfTopNav summary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:40px!important;
  padding:9px 14px!important;
  border:1px solid var(--line)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.86)!important;
  color:var(--ink)!important;
  text-decoration:none!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:850!important;
  box-shadow:0 8px 22px rgba(13,31,69,.06)!important;
  cursor:pointer!important;
  list-style:none!important;
  white-space:nowrap!important;
}

.bfTopNav summary::-webkit-details-marker{
  display:none!important;
}

.bfToolsDrop{
  position:relative!important;
}

.bfToolsDrop summary .chev{
  font-size:13px!important;
  opacity:.75!important;
  transform:translateY(-1px)!important;
}

.bfToolsDrop[open] summary{
  border-color:var(--full-line)!important;
}

.bfToolsMenu{
  position:absolute!important;
  top:48px!important;
  left:0!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:7px!important;
  min-width:218px!important;
  padding:9px!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 18px 40px rgba(13,31,69,.16)!important;
  z-index:100!important;
}

.bfToolsMenu a{
  justify-content:flex-start!important;
  width:100%!important;
  min-height:38px!important;
  border-radius:13px!important;
  box-shadow:none!important;
  background:#fff!important;
  font-size:13.5px!important;
}

.bfToolsMenu a:nth-child(1){
  color:var(--full-accent)!important;
  border-color:var(--full-line)!important;
}

.bfToolsMenu a:nth-child(2){
  color:var(--check-accent)!important;
  border-color:var(--check-line)!important;
}

.bfToolsMenu a:nth-child(3){
  color:var(--target-accent)!important;
  border-color:var(--target-line)!important;
}

@media(max-width:850px){
  .bfTopNav{
    gap:7px!important;
    margin:8px 0 14px!important;
    overflow:visible!important;
  }

  .bfTopNav a,
  .bfTopNav summary{
    min-height:38px!important;
    padding:8px 12px!important;
    font-size:13.5px!important;
  }

  .bfToolsMenu{
    top:44px!important;
    min-width:205px!important;
  }
}

@media(max-width:390px){
  .bfTopNav a,
  .bfTopNav summary{
    padding:8px 10px!important;
    font-size:13px!important;
  }
}


/* V201 — compact top navigation buttons */
.bfTopNav{
  gap:5px!important;
  margin:4px 0 10px!important;
}

.bfTopNav a,
.bfTopNav summary{
  min-height:28px!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  font-size:11.5px!important;
  line-height:1!important;
  font-weight:750!important;
  box-shadow:none!important;
}

.bfToolsDrop summary .chev{
  font-size:10.5px!important;
}

.bfToolsMenu{
  top:34px!important;
  min-width:148px!important;
  gap:5px!important;
  padding:6px!important;
  border-radius:13px!important;
  box-shadow:0 10px 24px rgba(13,31,69,.12)!important;
}

.bfToolsMenu a{
  min-height:28px!important;
  padding:6px 8px!important;
  border-radius:10px!important;
  font-size:11.5px!important;
  font-weight:750!important;
}

@media(max-width:850px){
  .bfTopNav{
    gap:5px!important;
    margin:3px 0 9px!important;
  }

  .bfTopNav a,
  .bfTopNav summary{
    min-height:27px!important;
    padding:5px 8px!important;
    font-size:11px!important;
  }

  .bfToolsMenu{
    top:33px!important;
    min-width:142px!important;
    padding:6px!important;
  }

  .bfToolsMenu a{
    min-height:27px!important;
    padding:6px 8px!important;
    font-size:11px!important;
  }
}

@media(max-width:390px){
  .bfTopNav{
    gap:4px!important;
  }

  .bfTopNav a,
  .bfTopNav summary{
    min-height:26px!important;
    padding:5px 7px!important;
    font-size:10.7px!important;
  }
}


/* V202 — compact Full Deal: inline reset buttons, Purchase/Sell side by side, less vertical scroll */
nav.nav{
  display:none!important;
}

.fullDealSplitReset{
  display:none!important;
}

main.layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  column-gap:7px!important;
  row-gap:8px!important;
  align-items:start!important;
}

main.layout > #full-deal-calculator.toolIntro,
main.layout > .panel.full,
main.layout > #price-check.panel,
main.layout > #targets.panel{
  grid-column:1 / -1!important;
}

main.layout > .panel.purchase{
  grid-column:1!important;
  min-width:0!important;
}

main.layout > .panel.selling{
  grid-column:2!important;
  min-width:0!important;
}

#full-deal-calculator.toolIntro{
  margin-bottom:0!important;
  padding-bottom:0!important;
}

#full-deal-calculator.toolIntro .toolTitle{
  margin-bottom:4px!important;
  font-size:18px!important;
  line-height:1.05!important;
}

#full-deal-calculator.toolIntro p{
  display:none!important;
}

.panel.purchase,
.panel.selling{
  margin-bottom:0!important;
  border-radius:14px!important;
  overflow:hidden!important;
  box-shadow:0 8px 18px rgba(47,155,112,.06)!important;
}

.panel.purchase .panelHead,
.panel.selling .panelHead{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px!important;
  padding:7px 7px!important;
  min-height:34px!important;
}

.panel.purchase .panelHead > div:nth-child(2),
.panel.selling .panelHead > div:nth-child(2){
  min-width:0!important;
  flex:1 1 auto!important;
}

.panel.purchase .sectionIcon,
.panel.selling .sectionIcon{
  display:none!important;
}

.panel.purchase .panelHead h3,
.panel.selling .panelHead h3{
  font-size:12px!important;
  line-height:1!important;
  margin:0!important;
  letter-spacing:-.01em!important;
  white-space:nowrap!important;
}

.panel.purchase .hint,
.panel.selling .hint,
.panel.purchase .small,
.panel.selling .small,
.panel.purchase .dealLabels,
.panel.selling .dealLabels,
.panel.purchase .adjustInfoBox,
.panel.selling .adjustInfoBox{
  display:none!important;
}

.resetInlineMini{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-height:23px!important;
  height:23px!important;
  padding:3px 6px!important;
  border-radius:8px!important;
  border:1px solid var(--full-line)!important;
  background:#fff!important;
  color:var(--full-accent)!important;
  font-size:9.8px!important;
  line-height:1!important;
  font-weight:850!important;
  box-shadow:none!important;
  cursor:pointer!important;
}

.panel.selling .resetInlineMini{
  border-color:var(--check-line)!important;
  color:var(--check-accent)!important;
}

.panel.purchase .rows,
.panel.selling .rows{
  padding:5px 7px 7px!important;
}

.panel.purchase .row,
.panel.selling .row{
  grid-template-columns:minmax(52px,.8fr) minmax(78px,1fr) 10px!important;
  gap:4px!important;
  padding:4px 0!important;
  min-height:29px!important;
  border-bottom:1px solid rgba(240,243,247,.8)!important;
}

.panel.purchase .name,
.panel.selling .name{
  font-size:10px!important;
  line-height:1.05!important;
  font-weight:780!important;
  letter-spacing:-.01em!important;
}

.panel.purchase .unit,
.panel.selling .unit{
  font-size:9.5px!important;
  line-height:1!important;
  min-width:0!important;
}

.panel.purchase input,
.panel.purchase select,
.panel.selling input,
.panel.selling select{
  min-height:28px!important;
  height:28px!important;
  padding:3px 4px!important;
  border-radius:8px!important;
  font-size:16px!important;
  line-height:1!important;
}

.panel.purchase .output,
.panel.selling .output{
  min-height:28px!important;
  height:28px!important;
  padding:6px 4px!important;
  border-radius:8px!important;
  font-size:11px!important;
  line-height:1!important;
  justify-content:flex-end!important;
}

.panel.purchase .dealWrap,
.panel.selling .dealWrap{
  gap:0!important;
}

.panel.purchase .deal,
.panel.selling .deal{
  grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr)!important;
  gap:3px!important;
}

.panel.purchase .deal span,
.panel.selling .deal span{
  font-size:10px!important;
  line-height:1!important;
}

.panel.purchase .extraToggle,
.panel.selling .extraToggle,
.panel.purchase .miniAction,
.panel.selling .miniAction{
  min-height:25px!important;
  padding:5px 7px!important;
  border-radius:9px!important;
  font-size:9.8px!important;
  line-height:1!important;
  margin:3px 0!important;
}

.panel.purchase .feeBlock,
.panel.selling .feeBlock{
  margin:5px 0!important;
  padding:0!important;
}

.panel.purchase .feeBlockHead,
.panel.selling .feeBlockHead{
  gap:4px!important;
  padding:0!important;
}

.panel.purchase .feeBlockHead .name,
.panel.selling .feeBlockHead .name{
  font-size:10px!important;
}

.panel.purchase .dynamicFeeList,
.panel.selling .dynamicFeeList{
  margin-top:4px!important;
}

.panel.purchase .shippingGrid,
.panel.selling .shippingGrid{
  display:grid!important;
  gap:4px!important;
}

.panel.full{
  margin-top:0!important;
}

.panel.full .panelHead{
  padding:8px 10px!important;
}

.panel.full .rows{
  padding:6px 10px 8px!important;
}

@media(max-width:850px){
  main.layout{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:6px!important;
    row-gap:7px!important;
  }

  #full-deal-calculator.toolIntro .toolTitle{
    font-size:16px!important;
  }

  .panel.purchase .panelHead,
  .panel.selling .panelHead{
    padding:6px 6px!important;
    min-height:32px!important;
  }

  .panel.purchase .panelHead h3,
  .panel.selling .panelHead h3{
    font-size:11.3px!important;
  }

  .resetInlineMini{
    height:22px!important;
    min-height:22px!important;
    padding:3px 5px!important;
    font-size:9.3px!important;
  }

  .panel.purchase .rows,
  .panel.selling .rows{
    padding:4px 6px 6px!important;
  }

  .panel.purchase .row,
  .panel.selling .row{
    grid-template-columns:minmax(48px,.8fr) minmax(72px,1fr) 9px!important;
    gap:3px!important;
    padding:3px 0!important;
    min-height:27px!important;
  }

  .panel.purchase .name,
  .panel.selling .name{
    font-size:9.4px!important;
  }

  .panel.purchase input,
  .panel.purchase select,
  .panel.selling input,
  .panel.selling select{
    min-height:27px!important;
    height:27px!important;
    padding:2px 3px!important;
    font-size:16px!important;
  }

  .panel.purchase .output,
  .panel.selling .output{
    min-height:27px!important;
    height:27px!important;
    font-size:10.2px!important;
    padding:6px 3px!important;
  }
}

@media(max-width:390px){
  main.layout{
    column-gap:5px!important;
  }

  .panel.purchase .row,
  .panel.selling .row{
    grid-template-columns:minmax(42px,.75fr) minmax(66px,1fr) 8px!important;
    gap:3px!important;
  }

  .panel.purchase .name,
  .panel.selling .name{
    font-size:8.9px!important;
  }

  .panel.purchase .panelHead h3,
  .panel.selling .panelHead h3{
    font-size:10.6px!important;
  }

  .resetInlineMini{
    font-size:8.9px!important;
    padding:2px 4px!important;
  }
}


/* V203 — better Full Deal proportions: clearer labels, slimmer numeric fields, smaller final results */
#full-deal-calculator.toolIntro .toolTitle{
  font-size:17px!important;
  line-height:1.05!important;
  margin-bottom:3px!important;
}

.panel.purchase .panelHead,
.panel.selling .panelHead{
  min-height:31px!important;
  padding:6px 7px!important;
}

.panel.purchase .panelHead h3,
.panel.selling .panelHead h3{
  font-size:12.4px!important;
  line-height:1.05!important;
  font-weight:900!important;
  letter-spacing:-.015em!important;
}

.resetInlineMini{
  min-height:20px!important;
  height:20px!important;
  padding:2px 5px!important;
  border-radius:7px!important;
  font-size:8.8px!important;
  font-weight:850!important;
}

.panel.purchase .rows,
.panel.selling .rows{
  padding:4px 7px 6px!important;
}

.panel.purchase .row,
.panel.selling .row{
  grid-template-columns:minmax(60px,.95fr) minmax(62px,.85fr) 9px!important;
  gap:4px!important;
  padding:3px 0!important;
  min-height:25px!important;
}

.panel.purchase .name,
.panel.selling .name{
  font-size:10.9px!important;
  line-height:1.08!important;
  font-weight:850!important;
  letter-spacing:-.015em!important;
}

.panel.purchase .unit,
.panel.selling .unit{
  font-size:9px!important;
  line-height:1!important;
  opacity:.72!important;
}

.panel.purchase input,
.panel.purchase select,
.panel.selling input,
.panel.selling select{
  min-height:24px!important;
  height:24px!important;
  padding:1px 3px!important;
  border-radius:7px!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:720!important;
}

.panel.purchase .output,
.panel.selling .output{
  min-height:24px!important;
  height:24px!important;
  padding:4px 3px!important;
  border-radius:7px!important;
  font-size:10.8px!important;
  line-height:1!important;
  font-weight:820!important;
}

.panel.purchase .deal,
.panel.selling .deal{
  grid-template-columns:minmax(0,1fr) 7px minmax(0,1fr)!important;
  gap:2px!important;
}

.panel.purchase .deal span,
.panel.selling .deal span{
  font-size:9px!important;
}

.panel.purchase .extraToggle,
.panel.selling .extraToggle,
.panel.purchase .miniAction,
.panel.selling .miniAction{
  min-height:22px!important;
  padding:4px 6px!important;
  border-radius:8px!important;
  font-size:9.2px!important;
  font-weight:820!important;
  margin:2px 0!important;
}

.panel.purchase .feeBlock,
.panel.selling .feeBlock{
  margin:3px 0!important;
}

.panel.purchase .feeBlockHead,
.panel.selling .feeBlockHead{
  min-height:22px!important;
}

.panel.purchase .feeBlockHead .name,
.panel.selling .feeBlockHead .name{
  font-size:10.6px!important;
}

/* Full Deal final result panel scaled down to match the compact upper tool */
.panel.full{
  margin-top:2px!important;
  border-radius:14px!important;
}

.panel.full .panelHead{
  padding:6px 9px!important;
  min-height:30px!important;
}

.panel.full .panelHead h3{
  font-size:12.4px!important;
  line-height:1.05!important;
  margin:0!important;
}

.panel.full .sectionIcon{
  display:none!important;
}

.panel.full .hint,
.panel.full .small{
  display:none!important;
}

.panel.full .rows{
  padding:4px 8px 6px!important;
}

.panel.full .row{
  grid-template-columns:minmax(78px,1fr) minmax(82px,.9fr) 20px!important;
  gap:5px!important;
  padding:3px 0!important;
  min-height:25px!important;
}

.panel.full .name{
  font-size:10.8px!important;
  line-height:1.08!important;
  font-weight:850!important;
}

.panel.full .unit{
  font-size:9px!important;
  opacity:.72!important;
}

.panel.full .output{
  min-height:24px!important;
  height:24px!important;
  padding:4px 5px!important;
  border-radius:7px!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:820!important;
}

/* Top KPI/result cards: less giant, visually aligned with compact Full Deal */
.metricCard,
.kpiCard,
.resultCard,
.kpi,
.metric{
  min-height:auto!important;
}

.metricCard .value,
.kpiCard .value,
.resultCard .value,
.metric .value,
.kpi .value,
#kpiPurchase,
#kpiSell,
#kpiProfit,
#kpiMargin,
#kpiMarkup{
  font-size:15px!important;
  line-height:1.05!important;
  font-weight:900!important;
}

.metricCard .label,
.kpiCard .label,
.resultCard .label,
.metric .label,
.kpi .label{
  font-size:10px!important;
  line-height:1.05!important;
}

/* Keep Price Check and Targets readable, but prevent their results from looking oversized */
#price-check .output,
#targets .output,
#price-check .value,
#targets .value{
  font-size:14px!important;
  line-height:1.05!important;
}

@media(max-width:850px){
  #full-deal-calculator.toolIntro .toolTitle{
    font-size:15.5px!important;
  }

  .panel.purchase .panelHead,
  .panel.selling .panelHead{
    min-height:30px!important;
    padding:5px 6px!important;
  }

  .panel.purchase .panelHead h3,
  .panel.selling .panelHead h3{
    font-size:11.6px!important;
  }

  .resetInlineMini{
    min-height:19px!important;
    height:19px!important;
    padding:2px 4px!important;
    font-size:8.3px!important;
  }

  .panel.purchase .rows,
  .panel.selling .rows{
    padding:4px 6px 5px!important;
  }

  .panel.purchase .row,
  .panel.selling .row{
    grid-template-columns:minmax(54px,.95fr) minmax(58px,.82fr) 8px!important;
    gap:3px!important;
    padding:2px 0!important;
    min-height:24px!important;
  }

  .panel.purchase .name,
  .panel.selling .name{
    font-size:10.2px!important;
  }

  .panel.purchase input,
  .panel.purchase select,
  .panel.selling input,
  .panel.selling select{
    min-height:23px!important;
    height:23px!important;
    padding:1px 3px!important;
    font-size:16px!important;
  }

  .panel.purchase .output,
  .panel.selling .output{
    min-height:23px!important;
    height:23px!important;
    font-size:10.2px!important;
    padding:4px 3px!important;
  }

  .panel.full .panelHead{
    min-height:29px!important;
    padding:5px 8px!important;
  }

  .panel.full .panelHead h3{
    font-size:11.8px!important;
  }

  .panel.full .row{
    min-height:24px!important;
    padding:2px 0!important;
    grid-template-columns:minmax(70px,1fr) minmax(75px,.9fr) 18px!important;
  }

  .panel.full .name{
    font-size:10.2px!important;
  }

  .panel.full .output{
    min-height:23px!important;
    height:23px!important;
    font-size:10.4px!important;
    padding:4px 4px!important;
  }

  #kpiPurchase,
  #kpiSell,
  #kpiProfit,
  #kpiMargin,
  #kpiMarkup{
    font-size:14px!important;
  }
}

@media(max-width:390px){
  .panel.purchase .row,
  .panel.selling .row{
    grid-template-columns:minmax(50px,.95fr) minmax(52px,.78fr) 7px!important;
    gap:3px!important;
  }

  .panel.purchase .name,
  .panel.selling .name{
    font-size:9.7px!important;
  }

  .panel.purchase input,
  .panel.purchase select,
  .panel.selling input,
  .panel.selling select{
    height:22px!important;
    min-height:22px!important;
  }

  .panel.full .row{
    grid-template-columns:minmax(66px,1fr) minmax(70px,.9fr) 16px!important;
  }

  .panel.full .name{
    font-size:9.8px!important;
  }
}


/* V204 — uniform Purchase/Sell rows: bigger readable labels, smaller equal value boxes */
.panel.purchase .panelHead,
.panel.selling .panelHead{
  min-height:30px!important;
  padding:5px 7px!important;
}

.panel.purchase .panelHead h3,
.panel.selling .panelHead h3{
  font-size:12.8px!important;
  line-height:1.04!important;
  font-weight:920!important;
}

.panel.purchase .rows,
.panel.selling .rows{
  padding:4px 7px 5px!important;
}

.panel.purchase .row,
.panel.selling .row{
  display:grid!important;
  grid-template-columns:minmax(74px,1fr) 62px 9px!important;
  align-items:center!important;
  gap:4px!important;
  min-height:24px!important;
  height:24px!important;
  padding:2px 0!important;
}

.panel.purchase .name,
.panel.selling .name{
  font-size:11.5px!important;
  line-height:1.06!important;
  font-weight:880!important;
  letter-spacing:-.015em!important;
}

.panel.purchase .unit,
.panel.selling .unit{
  width:9px!important;
  min-width:9px!important;
  max-width:9px!important;
  font-size:8.8px!important;
  line-height:1!important;
  opacity:.7!important;
}

.panel.purchase input,
.panel.purchase select,
.panel.purchase .output,
.panel.selling input,
.panel.selling select,
.panel.selling .output{
  width:62px!important;
  min-width:62px!important;
  max-width:62px!important;
  min-height:22px!important;
  height:22px!important;
  max-height:22px!important;
  padding:1px 3px!important;
  border-radius:7px!important;
  box-sizing:border-box!important;
  line-height:1!important;
}

.panel.purchase input,
.panel.purchase select,
.panel.selling input,
.panel.selling select{
  font-size:16px!important;
  font-weight:650!important;
  text-align:right!important;
}

.panel.purchase .output,
.panel.selling .output{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  font-size:10.6px!important;
  font-weight:820!important;
}

.panel.purchase .dealWrap,
.panel.selling .dealWrap{
  width:62px!important;
  min-width:62px!important;
  max-width:62px!important;
}

.panel.purchase .deal,
.panel.selling .deal{
  width:62px!important;
  min-width:62px!important;
  max-width:62px!important;
  display:grid!important;
  grid-template-columns:26px 6px 26px!important;
  align-items:center!important;
  gap:2px!important;
}

.panel.purchase .deal input,
.panel.selling .deal input{
  width:26px!important;
  min-width:26px!important;
  max-width:26px!important;
  height:22px!important;
  min-height:22px!important;
  max-height:22px!important;
  padding:1px 2px!important;
  text-align:center!important;
  font-size:16px!important;
  font-weight:650!important;
}

.panel.purchase .deal span,
.panel.selling .deal span{
  width:6px!important;
  min-width:6px!important;
  max-width:6px!important;
  font-size:8.8px!important;
  line-height:1!important;
  text-align:center!important;
}

.resetInlineMini{
  min-height:19px!important;
  height:19px!important;
  padding:2px 5px!important;
  font-size:8.4px!important;
  border-radius:7px!important;
}

.panel.purchase .extraToggle,
.panel.selling .extraToggle,
.panel.purchase .miniAction,
.panel.selling .miniAction{
  min-height:21px!important;
  height:21px!important;
  padding:3px 6px!important;
  font-size:9px!important;
  border-radius:8px!important;
  margin:2px 0!important;
}

.panel.purchase .feeBlock,
.panel.selling .feeBlock{
  margin:2px 0!important;
}

.panel.purchase .feeBlockHead,
.panel.selling .feeBlockHead{
  min-height:21px!important;
}

.panel.purchase .feeBlockHead .name,
.panel.selling .feeBlockHead .name{
  font-size:11px!important;
  line-height:1.04!important;
}

/* Keep all dynamically added fee rows aligned with the same compact value box */
.panel.purchase .dynamicFeeRow,
.panel.selling .dynamicFeeRow{
  display:grid!important;
  grid-template-columns:minmax(74px,1fr) 62px 18px!important;
  align-items:center!important;
  gap:4px!important;
  min-height:24px!important;
  height:24px!important;
}

.panel.purchase .dynamicFeeRow input,
.panel.selling .dynamicFeeRow input{
  width:62px!important;
  min-width:62px!important;
  max-width:62px!important;
  height:22px!important;
}

.panel.purchase .removeFeeBtn,
.panel.selling .removeFeeBtn{
  width:18px!important;
  height:20px!important;
  min-height:20px!important;
  border-radius:7px!important;
  font-size:11px!important;
}

/* Result area: same visual rhythm, no oversized blocks */
.panel.full .row{
  grid-template-columns:minmax(88px,1fr) 76px 18px!important;
  min-height:24px!important;
  height:24px!important;
  padding:2px 0!important;
}

.panel.full .name{
  font-size:11.2px!important;
  line-height:1.06!important;
  font-weight:880!important;
}

.panel.full .output{
  width:76px!important;
  min-width:76px!important;
  max-width:76px!important;
  min-height:22px!important;
  height:22px!important;
  max-height:22px!important;
  padding:4px 4px!important;
  border-radius:7px!important;
  font-size:10.8px!important;
  line-height:1!important;
}

.panel.full .unit{
  width:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  font-size:8.8px!important;
}

/* KPI values less dominant */
#kpiPurchase,
#kpiSell,
#kpiProfit,
#kpiMargin,
#kpiMarkup{
  font-size:13.5px!important;
  line-height:1.04!important;
  font-weight:880!important;
}

@media(max-width:850px){
  .panel.purchase .row,
  .panel.selling .row{
    grid-template-columns:minmax(66px,1fr) 58px 8px!important;
    gap:3px!important;
    min-height:23px!important;
    height:23px!important;
  }

  .panel.purchase .name,
  .panel.selling .name{
    font-size:10.9px!important;
  }

  .panel.purchase input,
  .panel.purchase select,
  .panel.purchase .output,
  .panel.selling input,
  .panel.selling select,
  .panel.selling .output{
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    min-height:21px!important;
    height:21px!important;
    max-height:21px!important;
  }

  .panel.purchase .dealWrap,
  .panel.selling .dealWrap,
  .panel.purchase .deal,
  .panel.selling .deal{
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
  }

  .panel.purchase .deal,
  .panel.selling .deal{
    grid-template-columns:24px 6px 24px!important;
  }

  .panel.purchase .deal input,
  .panel.selling .deal input{
    width:24px!important;
    min-width:24px!important;
    max-width:24px!important;
    height:21px!important;
    min-height:21px!important;
    max-height:21px!important;
  }

  .panel.full .row{
    grid-template-columns:minmax(78px,1fr) 70px 16px!important;
    min-height:23px!important;
    height:23px!important;
  }

  .panel.full .name{
    font-size:10.7px!important;
  }

  .panel.full .output{
    width:70px!important;
    min-width:70px!important;
    max-width:70px!important;
    min-height:21px!important;
    height:21px!important;
    max-height:21px!important;
    font-size:10.3px!important;
  }
}

@media(max-width:390px){
  .panel.purchase .row,
  .panel.selling .row{
    grid-template-columns:minmax(60px,1fr) 54px 7px!important;
  }

  .panel.purchase .name,
  .panel.selling .name{
    font-size:10.4px!important;
  }

  .panel.purchase input,
  .panel.purchase select,
  .panel.purchase .output,
  .panel.selling input,
  .panel.selling select,
  .panel.selling .output{
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
  }

  .panel.purchase .dealWrap,
  .panel.selling .dealWrap,
  .panel.purchase .deal,
  .panel.selling .deal{
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
  }

  .panel.purchase .deal,
  .panel.selling .deal{
    grid-template-columns:22px 6px 22px!important;
  }

  .panel.purchase .deal input,
  .panel.selling .deal input{
    width:22px!important;
    min-width:22px!important;
    max-width:22px!important;
  }

  .panel.full .row{
    grid-template-columns:minmax(72px,1fr) 66px 14px!important;
  }

  .panel.full .output{
    width:66px!important;
    min-width:66px!important;
    max-width:66px!important;
  }
}


/* V205 — true uniform Full Deal fields: same box, same value size, more readable spacing */
.panel.purchase .panelHead,
.panel.selling .panelHead{
  min-height:34px!important;
  height:34px!important;
  padding:6px 8px!important;
}

.panel.purchase .panelHead h3,
.panel.selling .panelHead h3{
  font-size:13px!important;
  line-height:1.05!important;
  font-weight:920!important;
}

.resetInlineMini{
  min-height:21px!important;
  height:21px!important;
  padding:2px 6px!important;
  font-size:8.8px!important;
  border-radius:7px!important;
}

.panel.purchase .rows,
.panel.selling .rows{
  padding:6px 8px 8px!important;
}

.panel.purchase .row,
.panel.selling .row{
  display:grid!important;
  grid-template-columns:minmax(72px,1fr) 74px 10px!important;
  align-items:center!important;
  gap:5px!important;
  min-height:31px!important;
  height:auto!important;
  padding:3px 0!important;
}

.panel.purchase .name,
.panel.selling .name{
  font-size:11.8px!important;
  line-height:1.08!important;
  font-weight:880!important;
  letter-spacing:-.015em!important;
}

.panel.purchase .unit,
.panel.selling .unit{
  width:10px!important;
  min-width:10px!important;
  max-width:10px!important;
  font-size:10px!important;
  line-height:1!important;
  opacity:.72!important;
}

/* Every numeric field and calculated box in Purchase/Sell must look identical */
.panel.purchase input,
.panel.purchase select,
.panel.purchase .output,
.panel.selling input,
.panel.selling select,
.panel.selling .output{
  width:74px!important;
  min-width:74px!important;
  max-width:74px!important;
  min-height:27px!important;
  height:27px!important;
  max-height:27px!important;
  padding:2px 5px!important;
  border-radius:8px!important;
  box-sizing:border-box!important;
  line-height:1!important;
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
  text-align:right!important;
}

.panel.purchase .output,
.panel.selling .output{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
}

/* Free goods: same visual box height and value font, no alternating sizes */
.panel.purchase .dealWrap,
.panel.selling .dealWrap{
  width:74px!important;
  min-width:74px!important;
  max-width:74px!important;
}

.panel.purchase .deal,
.panel.selling .deal{
  width:74px!important;
  min-width:74px!important;
  max-width:74px!important;
  display:grid!important;
  grid-template-columns:31px 8px 31px!important;
  align-items:center!important;
  gap:2px!important;
}

.panel.purchase .deal input,
.panel.selling .deal input{
  width:31px!important;
  min-width:31px!important;
  max-width:31px!important;
  height:27px!important;
  min-height:27px!important;
  max-height:27px!important;
  padding:2px 3px!important;
  border-radius:8px!important;
  font-size:16px!important;
  font-weight:700!important;
  text-align:center!important;
}

.panel.purchase .deal span,
.panel.selling .deal span{
  width:8px!important;
  min-width:8px!important;
  max-width:8px!important;
  font-size:11px!important;
  line-height:1!important;
  text-align:center!important;
  opacity:.75!important;
}

.panel.purchase .extraToggle,
.panel.selling .extraToggle,
.panel.purchase .miniAction,
.panel.selling .miniAction{
  min-height:26px!important;
  height:26px!important;
  padding:5px 8px!important;
  border-radius:9px!important;
  font-size:9.8px!important;
  line-height:1!important;
  font-weight:850!important;
  margin:4px 0!important;
}

.panel.purchase .feeBlock,
.panel.selling .feeBlock{
  margin:5px 0!important;
}

.panel.purchase .feeBlockHead,
.panel.selling .feeBlockHead{
  min-height:28px!important;
}

.panel.purchase .feeBlockHead .name,
.panel.selling .feeBlockHead .name{
  font-size:11.6px!important;
  line-height:1.08!important;
  font-weight:880!important;
}

.panel.purchase .dynamicFeeRow,
.panel.selling .dynamicFeeRow{
  display:grid!important;
  grid-template-columns:minmax(72px,1fr) 74px 20px!important;
  align-items:center!important;
  gap:5px!important;
  min-height:31px!important;
  padding:3px 0!important;
}

.panel.purchase .dynamicFeeRow input,
.panel.selling .dynamicFeeRow input{
  width:74px!important;
  min-width:74px!important;
  max-width:74px!important;
  height:27px!important;
  min-height:27px!important;
  max-height:27px!important;
}

.panel.purchase .removeFeeBtn,
.panel.selling .removeFeeBtn{
  width:20px!important;
  height:22px!important;
  min-height:22px!important;
  border-radius:7px!important;
  font-size:12px!important;
}

/* Full Deal final result panel: uniform with the upper boxes */
.panel.full .panelHead{
  min-height:34px!important;
  height:34px!important;
  padding:7px 10px!important;
}

.panel.full .panelHead h3{
  font-size:13px!important;
  line-height:1.05!important;
  font-weight:920!important;
}

.panel.full .rows{
  padding:7px 10px 9px!important;
}

.panel.full .row{
  display:grid!important;
  grid-template-columns:minmax(92px,1fr) 82px 18px!important;
  align-items:center!important;
  gap:6px!important;
  min-height:31px!important;
  height:auto!important;
  padding:3px 0!important;
}

.panel.full .name{
  font-size:11.8px!important;
  line-height:1.08!important;
  font-weight:880!important;
}

.panel.full .unit{
  width:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  font-size:10px!important;
  opacity:.72!important;
}

.panel.full .output{
  width:82px!important;
  min-width:82px!important;
  max-width:82px!important;
  min-height:27px!important;
  height:27px!important;
  max-height:27px!important;
  padding:2px 5px!important;
  border-radius:8px!important;
  font-size:16px!important;
  font-weight:700!important;
  line-height:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  text-align:right!important;
}

/* KPI cards under result: balanced with compact tool, not huge */
.panel.full .metricCard,
.panel.full .kpiCard,
.panel.full .resultCard,
.panel.full .kpi,
.panel.full .metric{
  min-height:auto!important;
  padding:12px 10px!important;
}

#kpiPurchase,
#kpiSell,
#kpiProfit,
#kpiMargin,
#kpiMarkup,
.panel.full .value{
  font-size:16px!important;
  line-height:1.05!important;
  font-weight:850!important;
}

.panel.full .label{
  font-size:10.5px!important;
  line-height:1.05!important;
}

/* Avoid older rules making 0 and 0,00 different sizes */
#supplierNetCost,
#customerNetPrice,
#customerGrossPrice,
#purchaseShippingUnitCost,
#adjustedPurchaseListPrice,
#adjustedSellingListPrice,
#supplierTotalDiscount,
#customerTotalDiscount{
  font-size:16px!important;
  font-weight:700!important;
  line-height:1!important;
}

@media(max-width:850px){
  .panel.purchase .row,
  .panel.selling .row{
    grid-template-columns:minmax(68px,1fr) 70px 10px!important;
    min-height:30px!important;
    gap:4px!important;
  }

  .panel.purchase .name,
  .panel.selling .name{
    font-size:11.3px!important;
  }

  .panel.purchase input,
  .panel.purchase select,
  .panel.purchase .output,
  .panel.selling input,
  .panel.selling select,
  .panel.selling .output{
    width:70px!important;
    min-width:70px!important;
    max-width:70px!important;
    min-height:26px!important;
    height:26px!important;
    max-height:26px!important;
    font-size:16px!important;
  }

  .panel.purchase .dealWrap,
  .panel.selling .dealWrap,
  .panel.purchase .deal,
  .panel.selling .deal{
    width:70px!important;
    min-width:70px!important;
    max-width:70px!important;
  }

  .panel.purchase .deal,
  .panel.selling .deal{
    grid-template-columns:29px 8px 29px!important;
  }

  .panel.purchase .deal input,
  .panel.selling .deal input{
    width:29px!important;
    min-width:29px!important;
    max-width:29px!important;
    height:26px!important;
    min-height:26px!important;
    max-height:26px!important;
    font-size:16px!important;
  }

  .panel.full .row{
    grid-template-columns:minmax(84px,1fr) 78px 16px!important;
    min-height:30px!important;
  }

  .panel.full .name{
    font-size:11.3px!important;
  }

  .panel.full .output{
    width:78px!important;
    min-width:78px!important;
    max-width:78px!important;
    height:26px!important;
    min-height:26px!important;
    max-height:26px!important;
    font-size:16px!important;
  }
}

@media(max-width:390px){
  .panel.purchase .row,
  .panel.selling .row{
    grid-template-columns:minmax(64px,1fr) 66px 9px!important;
    min-height:29px!important;
    gap:3px!important;
  }

  .panel.purchase .name,
  .panel.selling .name{
    font-size:10.9px!important;
  }

  .panel.purchase input,
  .panel.purchase select,
  .panel.purchase .output,
  .panel.selling input,
  .panel.selling select,
  .panel.selling .output{
    width:66px!important;
    min-width:66px!important;
    max-width:66px!important;
    height:25px!important;
    min-height:25px!important;
    max-height:25px!important;
    font-size:16px!important;
  }

  .panel.purchase .dealWrap,
  .panel.selling .dealWrap,
  .panel.purchase .deal,
  .panel.selling .deal{
    width:66px!important;
    min-width:66px!important;
    max-width:66px!important;
  }

  .panel.purchase .deal{
    grid-template-columns:27px 8px 27px!important;
  }

  .panel.selling .deal{
    grid-template-columns:27px 8px 27px!important;
  }

  .panel.purchase .deal input,
  .panel.selling .deal input{
    width:27px!important;
    min-width:27px!important;
    max-width:27px!important;
    height:25px!important;
    min-height:25px!important;
    max-height:25px!important;
  }

  .panel.full .row{
    grid-template-columns:minmax(78px,1fr) 74px 15px!important;
    min-height:29px!important;
  }

  .panel.full .output{
    width:74px!important;
    min-width:74px!important;
    max-width:74px!important;
    height:25px!important;
    min-height:25px!important;
    max-height:25px!important;
    font-size:16px!important;
  }
}


/* V206 — Extra Discount 2 hidden by default; Shipping label simplified */
.panel.purchase .optionalExtra,
.panel.selling .optionalExtra{
  display:none!important;
}

.panel.purchase .optionalExtra.open,
.panel.selling .optionalExtra.open{
  display:grid!important;
}

.panel.purchase .extraToggle,
.panel.selling .extraToggle{
  width:100%!important;
  justify-content:center!important;
}

/* Remove duplicated Shipping Cost section heading; the editable row carries the label */
.panel.purchase .shippingCostBlock > .feeBlockHead{
  display:none!important;
}

.panel.purchase .shippingCostBlock{
  margin-top:4px!important;
}


/* V207 — uniform small grey action buttons in Full Deal */
.panel.purchase .toggleAdjustment,
.panel.selling .toggleAdjustment,
.panel.purchase .extraToggle,
.panel.selling .extraToggle,
.panel.purchase .miniAction,
.panel.selling .miniAction,
.panel.purchase #togglePurchaseAdjustmentBtn,
.panel.selling #toggleSellingAdjustmentBtn,
.panel.purchase #addPurchaseTariffFeeBtn,
.panel.selling #addSellingTariffFeeBtn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:100%!important;
  min-height:24px!important;
  height:24px!important;
  padding:4px 10px!important;
  border-radius:10px!important;
  border:1px solid var(--line)!important;
  background:#fff!important;
  color:#6f7787!important;
  font-size:10.4px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  box-shadow:0 4px 10px rgba(13,31,69,.05)!important;
  white-space:normal!important;
  text-align:center!important;
  margin:4px 0!important;
}

.panel.purchase .extraToggle,
.panel.selling .extraToggle,
.panel.purchase #togglePurchaseAdjustmentBtn,
.panel.selling #toggleSellingAdjustmentBtn{
  justify-self:start!important;
}

/* Tariff/Fee: remove duplicated title and leave only the button */
.panel.purchase .purchaseTariffFeeBlock .feeBlockHead,
.panel.selling .sellingTariffFeeBlock .feeBlockHead{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:26px!important;
  padding:0!important;
  margin:4px 0!important;
}

.panel.purchase .purchaseTariffFeeBlock .feeBlockHead > div,
.panel.selling .sellingTariffFeeBlock .feeBlockHead > div{
  display:none!important;
}

.panel.purchase .purchaseTariffFeeBlock .miniAction,
.panel.selling .sellingTariffFeeBlock .miniAction{
  margin:0!important;
}

/* Keep Add List Price Adjustment and Extra Discount buttons visually identical */
.panel.purchase .row + .extraToggle,
.panel.selling .row + .extraToggle,
.panel.purchase .optionalAdjustmentToggle,
.panel.selling .optionalAdjustmentToggle{
  margin-top:4px!important;
  margin-bottom:4px!important;
}

@media(max-width:850px){
  .panel.purchase .toggleAdjustment,
  .panel.selling .toggleAdjustment,
  .panel.purchase .extraToggle,
  .panel.selling .extraToggle,
  .panel.purchase .miniAction,
  .panel.selling .miniAction,
  .panel.purchase #togglePurchaseAdjustmentBtn,
  .panel.selling #toggleSellingAdjustmentBtn,
  .panel.purchase #addPurchaseTariffFeeBtn,
  .panel.selling #addSellingTariffFeeBtn{
    min-height:23px!important;
    height:23px!important;
    padding:4px 8px!important;
    border-radius:9px!important;
    font-size:9.8px!important;
  }
}

@media(max-width:390px){
  .panel.purchase .toggleAdjustment,
  .panel.selling .toggleAdjustment,
  .panel.purchase .extraToggle,
  .panel.selling .extraToggle,
  .panel.purchase .miniAction,
  .panel.selling .miniAction,
  .panel.purchase #togglePurchaseAdjustmentBtn,
  .panel.selling #toggleSellingAdjustmentBtn,
  .panel.purchase #addPurchaseTariffFeeBtn,
  .panel.selling #addSellingTariffFeeBtn{
    min-height:22px!important;
    height:22px!important;
    padding:3px 7px!important;
    font-size:9.4px!important;
  }
}


/* V209 — Shipping cost hidden by default, opened by button on Purchase and Sell */
.shippingCostBlock{display:none!important;}
.shippingCostBlock.open{display:block!important;}
.shippingToggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:100%!important;
  min-height:24px!important;
  height:24px!important;
  padding:4px 10px!important;
  border-radius:10px!important;
  border:1px solid var(--line)!important;
  background:#fff!important;
  color:#6f7787!important;
  font-size:10.4px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  box-shadow:0 4px 10px rgba(13,31,69,.05)!important;
  white-space:normal!important;
  text-align:center!important;
  margin:4px 0!important;
}
.panel.purchase .shippingToggle,.panel.selling .shippingToggle{justify-self:start!important;}
.panel.purchase .shippingCostBlock .row,.panel.selling .shippingCostBlock .row{
  display:grid!important;
  grid-template-columns:minmax(72px,1fr) 74px 10px!important;
  align-items:center!important;
  gap:5px!important;
  min-height:31px!important;
  height:auto!important;
  padding:3px 0!important;
}
.panel.purchase .shippingCostBlock input,.panel.purchase .shippingCostBlock .output,
.panel.selling .shippingCostBlock input,.panel.selling .shippingCostBlock .output{
  width:74px!important;
  min-width:74px!important;
  max-width:74px!important;
  min-height:27px!important;
  height:27px!important;
  max-height:27px!important;
  padding:2px 5px!important;
  border-radius:8px!important;
  box-sizing:border-box!important;
  line-height:1!important;
  font-size:16px!important;
  font-weight:700!important;
  text-align:right!important;
}
.panel.purchase .shippingCostBlock .output,.panel.selling .shippingCostBlock .output{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
}
@media(max-width:850px){
  .shippingToggle{min-height:23px!important;height:23px!important;padding:4px 8px!important;border-radius:9px!important;font-size:9.8px!important;}
  .panel.purchase .shippingCostBlock .row,.panel.selling .shippingCostBlock .row{
    grid-template-columns:minmax(68px,1fr) 70px 10px!important;
    min-height:30px!important;
    gap:4px!important;
  }
  .panel.purchase .shippingCostBlock input,.panel.purchase .shippingCostBlock .output,
  .panel.selling .shippingCostBlock input,.panel.selling .shippingCostBlock .output{
    width:70px!important;min-width:70px!important;max-width:70px!important;
    min-height:26px!important;height:26px!important;max-height:26px!important;font-size:16px!important;
  }
}
@media(max-width:390px){
  .shippingToggle{min-height:22px!important;height:22px!important;padding:3px 7px!important;font-size:9.4px!important;}
  .panel.purchase .shippingCostBlock .row,.panel.selling .shippingCostBlock .row{
    grid-template-columns:minmax(64px,1fr) 66px 9px!important;
    min-height:29px!important;
    gap:3px!important;
  }
  .panel.purchase .shippingCostBlock input,.panel.purchase .shippingCostBlock .output,
  .panel.selling .shippingCostBlock input,.panel.selling .shippingCostBlock .output{
    width:66px!important;min-width:66px!important;max-width:66px!important;
    height:25px!important;min-height:25px!important;max-height:25px!important;font-size:16px!important;
  }
}


/* V210 — VAT hidden by default, opened by button; final Selling Price replaces Selling Price incl. VAT */
.vatBlock{
  display:none!important;
}

.vatBlock.open{
  display:block!important;
}

.vatToggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:100%!important;
  min-height:24px!important;
  height:24px!important;
  padding:4px 10px!important;
  border-radius:10px!important;
  border:1px solid var(--line)!important;
  background:#fff!important;
  color:#6f7787!important;
  font-size:10.4px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  box-shadow:0 4px 10px rgba(13,31,69,.05)!important;
  white-space:normal!important;
  text-align:center!important;
  margin:4px 0!important;
}

.panel.purchase .vatToggle,
.panel.selling .vatToggle{
  justify-self:start!important;
}

.panel.purchase .vatBlock .row,
.panel.selling .vatBlock .row{
  display:grid!important;
  grid-template-columns:minmax(72px,1fr) 74px 10px!important;
  align-items:center!important;
  gap:5px!important;
  min-height:31px!important;
  height:auto!important;
  padding:3px 0!important;
}

.panel.purchase .vatBlock input,
.panel.selling .vatBlock input{
  width:74px!important;
  min-width:74px!important;
  max-width:74px!important;
  min-height:27px!important;
  height:27px!important;
  max-height:27px!important;
  padding:2px 5px!important;
  border-radius:8px!important;
  box-sizing:border-box!important;
  line-height:1!important;
  font-size:16px!important;
  font-weight:700!important;
  text-align:right!important;
}

@media(max-width:850px){
  .vatToggle{
    min-height:23px!important;
    height:23px!important;
    padding:4px 8px!important;
    border-radius:9px!important;
    font-size:9.8px!important;
  }

  .panel.purchase .vatBlock .row,
  .panel.selling .vatBlock .row{
    grid-template-columns:minmax(68px,1fr) 70px 10px!important;
    min-height:30px!important;
    gap:4px!important;
  }

  .panel.purchase .vatBlock input,
  .panel.selling .vatBlock input{
    width:70px!important;
    min-width:70px!important;
    max-width:70px!important;
    min-height:26px!important;
    height:26px!important;
    max-height:26px!important;
    font-size:16px!important;
  }
}

@media(max-width:390px){
  .vatToggle{
    min-height:22px!important;
    height:22px!important;
    padding:3px 7px!important;
    font-size:9.4px!important;
  }

  .panel.purchase .vatBlock .row,
  .panel.selling .vatBlock .row{
    grid-template-columns:minmax(64px,1fr) 66px 9px!important;
    min-height:29px!important;
    gap:3px!important;
  }

  .panel.purchase .vatBlock input,
  .panel.selling .vatBlock input{
    width:66px!important;
    min-width:66px!important;
    max-width:66px!important;
    height:25px!important;
    min-height:25px!important;
    max-height:25px!important;
    font-size:16px!important;
  }
}


/* V211 — symmetrical Purchase/Sell action buttons and equal spacing */
.panel.purchase .rows,
.panel.selling .rows{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}

.panel.purchase .row,
.panel.selling .row{
  margin:0!important;
}

.panel.purchase .toggleAdjustment,
.panel.selling .toggleAdjustment,
.panel.purchase .extraToggle,
.panel.selling .extraToggle,
.panel.purchase .miniAction,
.panel.selling .miniAction,
.panel.purchase .shippingToggle,
.panel.selling .shippingToggle,
.panel.purchase .vatToggle,
.panel.selling .vatToggle,
.panel.purchase #togglePurchaseAdjustmentBtn,
.panel.selling #toggleSellingAdjustmentBtn,
.panel.purchase #addPurchaseTariffFeeBtn,
.panel.selling #addSellingTariffFeeBtn,
.panel.purchase #togglePurchaseShippingBtn,
.panel.selling #toggleSellingShippingBtn,
.panel.purchase #togglePurchaseVatBtn,
.panel.selling #toggleSellingVatBtn{
  margin:2px 0!important;
  align-self:flex-start!important;
}

/* When an optional block opens, it uses the same gap as every other row/button */
.panel.purchase .optionalExtra,
.panel.selling .optionalExtra,
.panel.purchase .shippingCostBlock,
.panel.selling .shippingCostBlock,
.panel.purchase .vatBlock,
.panel.selling .vatBlock{
  margin:0!important;
}

/* Tariff block should not create extra vertical jump */
.panel.purchase .purchaseTariffFeeBlock,
.panel.selling .sellingTariffFeeBlock{
  margin:0!important;
}

.panel.purchase .purchaseTariffFeeBlock .feeBlockHead,
.panel.selling .sellingTariffFeeBlock .feeBlockHead{
  margin:2px 0!important;
  min-height:24px!important;
}

/* All dynamic/opened rows keep same visual rhythm */
.panel.purchase .dynamicFeeList,
.panel.selling .dynamicFeeList{
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}

.panel.purchase .dynamicFeeRow,
.panel.selling .dynamicFeeRow{
  margin:0!important;
}

/* VAT appears before Shipping on both Purchase and Sell, so the two columns stay symmetrical */
.panel.purchase #togglePurchaseVatBtn,
.panel.selling #toggleSellingVatBtn{
  order:40!important;
}

.panel.purchase #purchaseVatBlock,
.panel.selling #sellingVatBlock{
  order:41!important;
}

.panel.purchase #togglePurchaseShippingBtn,
.panel.selling #toggleSellingShippingBtn{
  order:50!important;
}

.panel.purchase #purchaseShippingBlock,
.panel.selling #sellingShippingBlock{
  order:51!important;
}

.panel.purchase .purchaseTariffFeeBlock,
.panel.selling .sellingTariffFeeBlock{
  order:60!important;
}

@media(max-width:850px){
  .panel.purchase .rows,
  .panel.selling .rows{
    gap:4px!important;
  }

  .panel.purchase .toggleAdjustment,
  .panel.selling .toggleAdjustment,
  .panel.purchase .extraToggle,
  .panel.selling .extraToggle,
  .panel.purchase .miniAction,
  .panel.selling .miniAction,
  .panel.purchase .shippingToggle,
  .panel.selling .shippingToggle,
  .panel.purchase .vatToggle,
  .panel.selling .vatToggle{
    margin:2px 0!important;
  }
}


/* V212 — final row last; optional order Tariff/Fee -> Shipping -> VAT; adjustment fields hidden by default */
.panel.purchase .adjustmentBlock,
.panel.selling .adjustmentBlock{
  display:none!important;
}
.panel.purchase .adjustmentBlock.open,
.panel.selling .adjustmentBlock.open{
  display:block!important;
}

/* Correct order requested */
.panel.purchase .purchaseTariffFeeBlock,
.panel.selling .sellingTariffFeeBlock{
  order:40!important;
}
.panel.purchase #togglePurchaseShippingBtn,
.panel.selling #toggleSellingShippingBtn{
  order:50!important;
}
.panel.purchase #purchaseShippingBlock,
.panel.selling #sellingShippingBlock{
  order:51!important;
}
.panel.purchase #togglePurchaseVatBtn,
.panel.selling #toggleSellingVatBtn{
  order:60!important;
}
.panel.purchase #purchaseVatBlock,
.panel.selling #sellingVatBlock{
  order:61!important;
}
.panel.purchase .finalCostRow,
.panel.selling .finalPriceRow{
  order:999!important;
}

/* Same button spacing everywhere */
.panel.purchase .rows,
.panel.selling .rows{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}
.panel.purchase .row,
.panel.selling .row{
  margin:0!important;
}
.panel.purchase .toggleAdjustment,
.panel.selling .toggleAdjustment,
.panel.purchase .extraToggle,
.panel.selling .extraToggle,
.panel.purchase .miniAction,
.panel.selling .miniAction,
.panel.purchase .shippingToggle,
.panel.selling .shippingToggle,
.panel.purchase .vatToggle,
.panel.selling .vatToggle{
  margin:2px 0!important;
  align-self:flex-start!important;
}
.panel.purchase .purchaseTariffFeeBlock,
.panel.selling .sellingTariffFeeBlock,
.panel.purchase .shippingCostBlock,
.panel.selling .shippingCostBlock,
.panel.purchase .vatBlock,
.panel.selling .vatBlock,
.panel.purchase .adjustmentBlock,
.panel.selling .adjustmentBlock{
  margin:0!important;
}
.panel.purchase .purchaseTariffFeeBlock .feeBlockHead,
.panel.selling .sellingTariffFeeBlock .feeBlockHead{
  margin:2px 0!important;
  min-height:24px!important;
}


/* V213 — hard hide List Price Adjustment fields until button click */
#purchaseAdjustmentBlock,
#sellingAdjustmentBlock,
#purchaseAdjustmentRow,
#sellingAdjustmentRow{
  display:none!important;
}

#purchaseAdjustmentBlock.open,
#sellingAdjustmentBlock.open,
#purchaseAdjustmentRow.open,
#sellingAdjustmentRow.open{
  display:block!important;
}

#purchaseAdjustmentBlock.open .row,
#sellingAdjustmentBlock.open .row{
  display:grid!important;
}

/* Keep the two adjustment rows visually identical when opened */
#purchaseAdjustmentBlock .row,
#sellingAdjustmentBlock .row{
  grid-template-columns:minmax(72px,1fr) 74px 10px!important;
  align-items:center!important;
  gap:5px!important;
  min-height:31px!important;
  padding:3px 0!important;
}


/* V214 — clearer optional button text: slightly larger, less heavy, more readable */
.panel.purchase .toggleAdjustment,
.panel.selling .toggleAdjustment,
.panel.purchase .extraToggle,
.panel.selling .extraToggle,
.panel.purchase .miniAction,
.panel.selling .miniAction,
.panel.purchase .shippingToggle,
.panel.selling .shippingToggle,
.panel.purchase .vatToggle,
.panel.selling .vatToggle,
.panel.purchase #togglePurchaseAdjustmentBtn,
.panel.selling #toggleSellingAdjustmentBtn,
.panel.purchase #addPurchaseTariffFeeBtn,
.panel.selling #addSellingTariffFeeBtn,
.panel.purchase #togglePurchaseShippingBtn,
.panel.selling #toggleSellingShippingBtn,
.panel.purchase #togglePurchaseVatBtn,
.panel.selling #toggleSellingVatBtn{
  min-height:27px!important;
  height:auto!important;
  padding:6px 11px!important;
  border-radius:10px!important;
  font-size:11.2px!important;
  line-height:1.08!important;
  font-weight:680!important;
  letter-spacing:0!important;
  color:#646c7a!important;
}

/* Reset stays compact but more readable too */
.resetInlineMini{
  min-height:22px!important;
  height:22px!important;
  padding:3px 7px!important;
  font-size:9.6px!important;
  line-height:1!important;
  font-weight:700!important;
  color:#646c7a!important;
}

/* Slightly improve opened optional field labels while preserving compact layout */
#purchaseAdjustmentBlock .name,
#sellingAdjustmentBlock .name,
#purchaseShippingBlock .name,
#sellingShippingBlock .name,
#purchaseVatBlock .name,
#sellingVatBlock .name,
.panel.purchase .dynamicFeeRow .name,
.panel.selling .dynamicFeeRow .name{
  font-size:11.9px!important;
  line-height:1.08!important;
  font-weight:780!important;
}

@media(max-width:850px){
  .panel.purchase .toggleAdjustment,
  .panel.selling .toggleAdjustment,
  .panel.purchase .extraToggle,
  .panel.selling .extraToggle,
  .panel.purchase .miniAction,
  .panel.selling .miniAction,
  .panel.purchase .shippingToggle,
  .panel.selling .shippingToggle,
  .panel.purchase .vatToggle,
  .panel.selling .vatToggle,
  .panel.purchase #togglePurchaseAdjustmentBtn,
  .panel.selling #toggleSellingAdjustmentBtn,
  .panel.purchase #addPurchaseTariffFeeBtn,
  .panel.selling #addSellingTariffFeeBtn,
  .panel.purchase #togglePurchaseShippingBtn,
  .panel.selling #toggleSellingShippingBtn,
  .panel.purchase #togglePurchaseVatBtn,
  .panel.selling #toggleSellingVatBtn{
    min-height:26px!important;
    padding:5px 9px!important;
    font-size:10.8px!important;
    font-weight:680!important;
  }

  .resetInlineMini{
    min-height:21px!important;
    height:21px!important;
    padding:3px 6px!important;
    font-size:9.2px!important;
    font-weight:700!important;
  }
}

@media(max-width:390px){
  .panel.purchase .toggleAdjustment,
  .panel.selling .toggleAdjustment,
  .panel.purchase .extraToggle,
  .panel.selling .extraToggle,
  .panel.purchase .miniAction,
  .panel.selling .miniAction,
  .panel.purchase .shippingToggle,
  .panel.selling .shippingToggle,
  .panel.purchase .vatToggle,
  .panel.selling .vatToggle,
  .panel.purchase #togglePurchaseAdjustmentBtn,
  .panel.selling #toggleSellingAdjustmentBtn,
  .panel.purchase #addPurchaseTariffFeeBtn,
  .panel.selling #addSellingTariffFeeBtn,
  .panel.purchase #togglePurchaseShippingBtn,
  .panel.selling #toggleSellingShippingBtn,
  .panel.purchase #togglePurchaseVatBtn,
  .panel.selling #toggleSellingVatBtn{
    min-height:25px!important;
    padding:5px 8px!important;
    font-size:10.4px!important;
  }
}


/* V215 — field labels slightly larger and clearer */
.panel.purchase .name,
.panel.selling .name{
  font-size:12.6px!important;
  line-height:1.1!important;
  font-weight:760!important;
  letter-spacing:-.01em!important;
}

#purchaseAdjustmentBlock .name,
#sellingAdjustmentBlock .name,
#purchaseShippingBlock .name,
#sellingShippingBlock .name,
#purchaseVatBlock .name,
#sellingVatBlock .name,
.panel.purchase .dynamicFeeRow .name,
.panel.selling .dynamicFeeRow .name{
  font-size:12.6px!important;
  line-height:1.1!important;
  font-weight:760!important;
}

.panel.full .name{
  font-size:12.3px!important;
  line-height:1.1!important;
  font-weight:760!important;
}

.panel.purchase .panelHead h3,
.panel.selling .panelHead h3,
.panel.full .panelHead h3{
  font-size:13.4px!important;
  line-height:1.05!important;
  font-weight:820!important;
}

@media(max-width:850px){
  .panel.purchase .name,
  .panel.selling .name,
  #purchaseAdjustmentBlock .name,
  #sellingAdjustmentBlock .name,
  #purchaseShippingBlock .name,
  #sellingShippingBlock .name,
  #purchaseVatBlock .name,
  #sellingVatBlock .name,
  .panel.purchase .dynamicFeeRow .name,
  .panel.selling .dynamicFeeRow .name{
    font-size:12px!important;
    line-height:1.08!important;
    font-weight:760!important;
  }

  .panel.full .name{
    font-size:11.7px!important;
    line-height:1.08!important;
    font-weight:760!important;
  }

  .panel.purchase .panelHead h3,
  .panel.selling .panelHead h3,
  .panel.full .panelHead h3{
    font-size:12.7px!important;
  }
}

@media(max-width:390px){
  .panel.purchase .name,
  .panel.selling .name,
  #purchaseAdjustmentBlock .name,
  #sellingAdjustmentBlock .name,
  #purchaseShippingBlock .name,
  #sellingShippingBlock .name,
  #purchaseVatBlock .name,
  #sellingVatBlock .name,
  .panel.purchase .dynamicFeeRow .name,
  .panel.selling .dynamicFeeRow .name{
    font-size:11.6px!important;
    line-height:1.08!important;
  }

  .panel.full .name{
    font-size:11.3px!important;
  }
}


/* V216 — remove Full Deal Results reset; grey Purchase/Sell reset; larger readable labels */
.panel.full .toolResetBtnV175{
  display:none!important;
}

/* Purchase/Sell reset buttons: small, grey, consistent */
.resetInlineMini,
.panel.purchase #resetPurchaseFieldsBtn,
.panel.selling #resetSellFieldsBtn{
  min-height:24px!important;
  height:24px!important;
  padding:4px 8px!important;
  border-radius:9px!important;
  border:1px solid #d8dee8!important;
  background:#fff!important;
  color:#687180!important;
  font-size:10.2px!important;
  line-height:1!important;
  font-weight:680!important;
  box-shadow:0 3px 8px rgba(13,31,69,.04)!important;
}

/* Use the recovered space: labels clearer, less cramped */
.panel.purchase .name,
.panel.selling .name{
  font-size:13.1px!important;
  line-height:1.12!important;
  font-weight:740!important;
  letter-spacing:-.01em!important;
}

#purchaseAdjustmentBlock .name,
#sellingAdjustmentBlock .name,
#purchaseShippingBlock .name,
#sellingShippingBlock .name,
#purchaseVatBlock .name,
#sellingVatBlock .name,
.panel.purchase .dynamicFeeRow .name,
.panel.selling .dynamicFeeRow .name{
  font-size:13.1px!important;
  line-height:1.12!important;
  font-weight:740!important;
}

.panel.full .name{
  font-size:12.8px!important;
  line-height:1.12!important;
  font-weight:740!important;
}

.panel.purchase .panelHead h3,
.panel.selling .panelHead h3,
.panel.full .panelHead h3{
  font-size:13.8px!important;
  line-height:1.06!important;
  font-weight:790!important;
}

/* Slightly more air in rows now that optional fields are hidden */
.panel.purchase .row,
.panel.selling .row,
.panel.full .row{
  min-height:32px!important;
}

.panel.purchase .rows,
.panel.selling .rows{
  gap:5px!important;
}

/* Optional buttons stay readable but not bold-heavy */
.panel.purchase .toggleAdjustment,
.panel.selling .toggleAdjustment,
.panel.purchase .extraToggle,
.panel.selling .extraToggle,
.panel.purchase .miniAction,
.panel.selling .miniAction,
.panel.purchase .shippingToggle,
.panel.selling .shippingToggle,
.panel.purchase .vatToggle,
.panel.selling .vatToggle{
  font-size:11.5px!important;
  font-weight:650!important;
  line-height:1.1!important;
}

@media(max-width:850px){
  .resetInlineMini,
  .panel.purchase #resetPurchaseFieldsBtn,
  .panel.selling #resetSellFieldsBtn{
    min-height:23px!important;
    height:23px!important;
    padding:3px 7px!important;
    font-size:9.8px!important;
    font-weight:680!important;
  }

  .panel.purchase .name,
  .panel.selling .name,
  #purchaseAdjustmentBlock .name,
  #sellingAdjustmentBlock .name,
  #purchaseShippingBlock .name,
  #sellingShippingBlock .name,
  #purchaseVatBlock .name,
  #sellingVatBlock .name,
  .panel.purchase .dynamicFeeRow .name,
  .panel.selling .dynamicFeeRow .name{
    font-size:12.4px!important;
    line-height:1.1!important;
    font-weight:740!important;
  }

  .panel.full .name{
    font-size:12px!important;
    line-height:1.1!important;
    font-weight:740!important;
  }

  .panel.purchase .panelHead h3,
  .panel.selling .panelHead h3,
  .panel.full .panelHead h3{
    font-size:13px!important;
  }

  .panel.purchase .row,
  .panel.selling .row,
  .panel.full .row{
    min-height:31px!important;
  }

  .panel.purchase .toggleAdjustment,
  .panel.selling .toggleAdjustment,
  .panel.purchase .extraToggle,
  .panel.selling .extraToggle,
  .panel.purchase .miniAction,
  .panel.selling .miniAction,
  .panel.purchase .shippingToggle,
  .panel.selling .shippingToggle,
  .panel.purchase .vatToggle,
  .panel.selling .vatToggle{
    font-size:11px!important;
    font-weight:650!important;
  }
}

@media(max-width:390px){
  .panel.purchase .name,
  .panel.selling .name,
  #purchaseAdjustmentBlock .name,
  #sellingAdjustmentBlock .name,
  #purchaseShippingBlock .name,
  #sellingShippingBlock .name,
  #purchaseVatBlock .name,
  #sellingVatBlock .name,
  .panel.purchase .dynamicFeeRow .name,
  .panel.selling .dynamicFeeRow .name{
    font-size:12px!important;
    line-height:1.08!important;
  }

  .panel.full .name{
    font-size:11.6px!important;
  }

  .panel.purchase .toggleAdjustment,
  .panel.selling .toggleAdjustment,
  .panel.purchase .extraToggle,
  .panel.selling .extraToggle,
  .panel.purchase .miniAction,
  .panel.selling .miniAction,
  .panel.purchase .shippingToggle,
  .panel.selling .shippingToggle,
  .panel.purchase .vatToggle,
  .panel.selling .vatToggle{
    font-size:10.6px!important;
  }
}


/* V217 — zero values are clean and compact */
.output,
.value,
.metricCard .value,
.kpiCard .value,
.resultCard .value,
.metric .value,
.kpi .value{
  font-variant-numeric: tabular-nums!important;
}


/* V220 — compact Price Check and Targets input fields */
.panel.pricecheck .row,
.panel.targets .row{
  grid-template-columns:minmax(108px,1fr) 88px 12px!important;
  gap:6px!important;
}

.panel.pricecheck input,
.panel.targets input{
  width:88px!important;
  min-width:88px!important;
  max-width:88px!important;
  min-height:28px!important;
  height:28px!important;
  padding:3px 6px!important;
  box-sizing:border-box!important;
  text-align:right!important;
  font-size:16px!important;
  line-height:1!important;
}

.panel.pricecheck .unit,
.panel.targets .unit{
  width:12px!important;
  min-width:12px!important;
  max-width:12px!important;
  text-align:left!important;
}

@media(max-width:850px){
  .panel.pricecheck .row,
  .panel.targets .row{
    grid-template-columns:minmax(96px,1fr) 80px 11px!important;
    gap:5px!important;
  }

  .panel.pricecheck input,
  .panel.targets input{
    width:80px!important;
    min-width:80px!important;
    max-width:80px!important;
    min-height:27px!important;
    height:27px!important;
    font-size:16px!important;
  }
}

@media(max-width:390px){
  .panel.pricecheck .row,
  .panel.targets .row{
    grid-template-columns:minmax(88px,1fr) 74px 10px!important;
    gap:4px!important;
  }

  .panel.pricecheck input,
  .panel.targets input{
    width:74px!important;
    min-width:74px!important;
    max-width:74px!important;
    min-height:26px!important;
    height:26px!important;
    padding:2px 5px!important;
    font-size:16px!important;
  }
}


/* V221 — Target input highlighted by size, not by performance colors */
.panel.targets .targetValueRow{
  min-height:42px!important;
  align-items:center!important;
}

.panel.targets .targetValueRow .name{
  color:#7c3aed!important;
  font-weight:820!important;
  font-size:13.4px!important;
}

.panel.targets .targetValueRow input,
.panel.targets #targetValuePct{
  width:88px!important;
  min-width:88px!important;
  max-width:88px!important;
  min-height:38px!important;
  height:38px!important;
  border-radius:12px!important;
  border:1px solid #d8dee8!important;
  background:#fff!important;
  color:#111827!important;
  font-size:16px!important;
  font-weight:780!important;
  box-shadow:0 5px 12px rgba(13,31,69,.05)!important;
  outline:none!important;
}

.panel.targets .targetValueRow input:focus,
.panel.targets #targetValuePct:focus{
  border-color:#c8d0dc!important;
  box-shadow:0 0 0 3px rgba(17,24,39,.06)!important;
  color:#111827!important;
}

/* Hard neutralize old threshold colors on the user-set target field */
.panel.targets .targetValueRow,
.panel.targets .targetValueRow *,
.panel.targets #targetValuePct{
  --good:#111827!important;
  --warn:#111827!important;
  --mid:#111827!important;
  --bad:#111827!important;
}

.panel.targets .targetValueRow.green,
.panel.targets .targetValueRow.yellow,
.panel.targets .targetValueRow.orange,
.panel.targets .targetValueRow.red,
.panel.targets .targetValueRow.good,
.panel.targets .targetValueRow.warn,
.panel.targets .targetValueRow.bad,
.panel.targets #targetValuePct.green,
.panel.targets #targetValuePct.yellow,
.panel.targets #targetValuePct.orange,
.panel.targets #targetValuePct.red,
.panel.targets #targetValuePct.good,
.panel.targets #targetValuePct.warn,
.panel.targets #targetValuePct.bad{
  border-color:#d8dee8!important;
  background:#fff!important;
  color:#111827!important;
  box-shadow:0 5px 12px rgba(13,31,69,.05)!important;
}

.panel.targets .targetValueRow .unit{
  color:#111827!important;
  font-weight:760!important;
}

@media(max-width:850px){
  .panel.targets .targetValueRow{
    min-height:40px!important;
  }

  .panel.targets .targetValueRow .name{
    font-size:12.7px!important;
  }

  .panel.targets .targetValueRow input,
  .panel.targets #targetValuePct{
    width:80px!important;
    min-width:80px!important;
    max-width:80px!important;
    min-height:36px!important;
    height:36px!important;
    border-radius:11px!important;
  }
}

@media(max-width:390px){
  .panel.targets .targetValueRow{
    min-height:38px!important;
  }

  .panel.targets .targetValueRow input,
  .panel.targets #targetValuePct{
    width:74px!important;
    min-width:74px!important;
    max-width:74px!important;
    min-height:34px!important;
    height:34px!important;
    border-radius:10px!important;
  }
}


/* V222 — clearer Free Goods micro labels and uniform Price Check/Targets result icons */
.dealWrap{
  gap:2px!important;
}

.dealLabels{
  display:grid!important;
  grid-template-columns:1fr 12px 1fr!important;
  align-items:end!important;
  gap:3px!important;
  margin-bottom:2px!important;
  padding:0 1px!important;
}

.dealLabels span{
  display:block!important;
  font-size:8.7px!important;
  line-height:1!important;
  font-weight:700!important;
  color:#687180!important;
  text-align:center!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}

.dealLabels span:nth-child(2){
  color:transparent!important;
}

.deal{
  grid-template-columns:1fr 12px 1fr!important;
  gap:3px!important;
  align-items:center!important;
}

.deal span{
  width:12px!important;
  min-width:12px!important;
  text-align:center!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:760!important;
  color:#687180!important;
}

.deal input{
  text-align:center!important;
}

/* Keep Free Goods help tiny, not dominant */
.panel.purchase .row:has(#supplierGoodsPaidQty) .small,
.panel.selling .row:has(#customerGoodsPaidQty) .small{
  font-size:9.2px!important;
  line-height:1.08!important;
  color:#8a93a3!important;
}

/* Uniform result icons in Price Check and Targets */
.panel.pricecheck .resultIcon,
.panel.targets .resultIcon{
  
  
  
  
  
  
  border-radius:9px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  
  line-height:1!important;
  font-weight:650!important;
  letter-spacing:0!important;
  color:#111827!important;
  background:#f7f9fc!important;
  border:1px solid #e2e7ef!important;
}

.panel.pricecheck .resultIcon svg,
.panel.targets .resultIcon svg{
  
  
  
  
  
  
  stroke-width:2!important;
  display:block!important;
}

.panel.pricecheck .discountIcon,
.panel.targets .discountIcon{
  
  font-weight:650!important;
  transform:none!important;
}

.panel.pricecheck .priceIcon svg,
.panel.targets .priceIcon svg{
  
  
  stroke-width:1.95!important;
}

.panel.pricecheck .markupIcon svg,
.panel.targets .markupIcon svg,
.panel.pricecheck .profitIcon svg,
.panel.targets .profitIcon svg,
.panel.pricecheck .marginIcon svg,
.panel.targets .marginIcon svg{
  
  
  stroke-width:2!important;
}

.panel.pricecheck .resultPill,
.panel.targets .resultPill{
  align-items:center!important;
}

@media(max-width:850px){
  .dealLabels{
    grid-template-columns:1fr 11px 1fr!important;
    gap:2px!important;
  }

  .dealLabels span{
    font-size:8.3px!important;
  }

  .deal{
    grid-template-columns:1fr 11px 1fr!important;
    gap:2px!important;
  }

  .deal span{
    width:11px!important;
    min-width:11px!important;
    font-size:11.4px!important;
  }

  .panel.pricecheck .resultIcon,
  .panel.targets .resultIcon{
    
    
    
    
    
    
    
  }

  .panel.pricecheck .resultIcon svg,
  .panel.targets .resultIcon svg{
    
    
  }
}

@media(max-width:390px){
  .dealLabels span{
    font-size:8px!important;
  }

  .panel.pricecheck .resultIcon,
  .panel.targets .resultIcon{
    
    
    
    
    
    
    
    border-radius:8px!important;
  }

  .panel.pricecheck .resultIcon svg,
  .panel.targets .resultIcon svg{
    
    
  }
}


/* V223 — Price Check and Targets icons larger, no icon box{
  width:32px!important;
  min-width:32px!important;
  max-width:32px!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:720!important;
  color:inherit!important;
} color follows the result */
.panel.pricecheck .resultIcon,
.panel.targets .resultIcon{
  
  
  
  
  
  
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  
  line-height:1!important;
  font-weight:720!important;
  color:inherit!important;
}

.panel.pricecheck .resultIcon svg,
.panel.targets .resultIcon svg{
  
  
  
  
  
  
  stroke-width:2.25!important;
  display:block!important;
}

/* Discount scissors: larger{
  width:32px!important;
  height:32px!important;
  font-size:24px!important;
  font-weight:720!important;
  color:inherit!important;
  transform:none!important;
} but visually balanced with SVG icons */
.panel.pricecheck .discountIcon,
.panel.targets .discountIcon{
  
  
  
  font-weight:720!important;
  color:inherit!important;
  transform:none!important;
}

/* Icon color follows each result pill state */
.panel.pricecheck .resultPill.good .resultIcon,
.panel.targets .resultPill.good .resultIcon{
  color:#15803d!important;
}

.panel.pricecheck .resultPill.warn .resultIcon,
.panel.targets .resultPill.warn .resultIcon{
  color:#b45309!important;
}

.panel.pricecheck .resultPill.bad .resultIcon,
.panel.pricecheck .resultPill.danger .resultIcon,
.panel.targets .resultPill.bad .resultIcon,
.panel.targets .resultPill.danger .resultIcon{
  color:#b91c1c!important;
}

/* Neutral result pills keep neutral black icon */
.panel.pricecheck .resultPill:not(.good):not(.warn):not(.bad):not(.danger) .resultIcon,
.panel.targets .resultPill:not(.good):not(.warn):not(.bad):not(.danger) .resultIcon{
  color:#111827!important;
}

/* If the result value itself receives a color class{
  color:#15803d!important;
} icon follows the same family */
.panel.pricecheck .resultPill:has(span.green) .resultIcon,
.panel.pricecheck .resultPill:has(span.good) .resultIcon,
.panel.targets .resultPill:has(span.green) .resultIcon,
.panel.targets .resultPill:has(span.good) .resultIcon{
  color:#15803d!important;
}

.panel.pricecheck .resultPill:has(span.yellow) .resultIcon,
.panel.pricecheck .resultPill:has(span.orange) .resultIcon,
.panel.pricecheck .resultPill:has(span.warn) .resultIcon,
.panel.targets .resultPill:has(span.yellow) .resultIcon,
.panel.targets .resultPill:has(span.orange) .resultIcon,
.panel.targets .resultPill:has(span.warn) .resultIcon{
  color:#b45309!important;
}

.panel.pricecheck .resultPill:has(span.red) .resultIcon,
.panel.pricecheck .resultPill:has(span.bad) .resultIcon,
.panel.targets .resultPill:has(span.red) .resultIcon,
.panel.targets .resultPill:has(span.bad) .resultIcon{
  color:#b91c1c!important;
}

.panel.pricecheck .resultPill,
.panel.targets .resultPill{
  align-items:center!important;
}

@media(max-width:850px){
  .panel.pricecheck .resultIcon,
  .panel.targets .resultIcon{
    
    
    
    
    
    
    
  }

  .panel.pricecheck .resultIcon svg,
  .panel.targets .resultIcon svg{
    
    
    
    
    
    
  }

  .panel.pricecheck .discountIcon,
  .panel.targets .discountIcon{
    
    
    
  }
}

@media(max-width:390px){
  .panel.pricecheck .resultIcon,
  .panel.targets .resultIcon{
    
    
    
    
    
    
    
  }

  .panel.pricecheck .resultIcon svg,
  .panel.targets .resultIcon svg{
    
    
    
    
    
    
  }

  .panel.pricecheck .discountIcon,
  .panel.targets .discountIcon{
    
    
    
  }
}


/* V224 — all tool result icons match Full Deal size and color system */
.panel.full .resultIcon{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font-size:27px!important;
  line-height:1!important;
  font-weight:760!important;
  color:#111827!important;
}
.panel.pricecheck .resultIcon,
.panel.targets .resultIcon{
  
  
  
  
  
  
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  
  line-height:1!important;
  font-weight:760!important;
  color:#111827!important;
}

.panel.full .resultIcon svg{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  max-width:27px!important;
  max-height:27px!important;
  stroke-width:2.35!important;
  display:block!important;
}
.panel.pricecheck .resultIcon svg,
.panel.targets .resultIcon svg{
  
  
  
  
  
  
  stroke-width:2.35!important;
  display:block!important;
}

.panel.full .discountIcon{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  font-size:27px!important;
  font-weight:760!important;
  color:#111827!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-radius:0!important;
  transform:none!important;
}
.panel.pricecheck .discountIcon,
.panel.targets .discountIcon{
  
  
  
  
  
  
  
  font-weight:760!important;
  color:#111827!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-radius:0!important;
  transform:none!important;
}

/* One shared color system for all three tools */
.panel.full .resultPill.good .resultIcon{
  color:#15803d!important;
}
.panel.pricecheck .resultPill.good .resultIcon,
.panel.targets .resultPill.good .resultIcon{
  color:#15803d!important;
}

.panel.full .resultPill.warn .resultIcon{
  color:#b45309!important;
}
.panel.pricecheck .resultPill.warn .resultIcon,
.panel.targets .resultPill.warn .resultIcon{
  color:#b45309!important;
}

.panel.full .resultPill.bad .resultIcon,
.panel.full .resultPill.danger .resultIcon{
  color:#b91c1c!important;
}
.panel.pricecheck .resultPill.bad .resultIcon,
.panel.pricecheck .resultPill.danger .resultIcon,
.panel.targets .resultPill.bad .resultIcon,
.panel.targets .resultPill.danger .resultIcon{
  color:#b91c1c!important;
}

.panel.full .resultPill:not(.good):not(.warn):not(.bad):not(.danger) .resultIcon{
  color:#111827!important;
}
.panel.pricecheck .resultPill:not(.good):not(.warn):not(.bad):not(.danger) .resultIcon,
.panel.targets .resultPill:not(.good):not(.warn):not(.bad):not(.danger) .resultIcon{
  color:#111827!important;
}

/* If the value/class changes dynamically, icons still follow the same color family */
.panel.full .resultPill:has(span.green) .resultIcon,
.panel.full .resultPill:has(span.good) .resultIcon{
  color:#15803d!important;
}
.panel.pricecheck .resultPill:has(span.green) .resultIcon,
.panel.pricecheck .resultPill:has(span.good) .resultIcon,
.panel.targets .resultPill:has(span.green) .resultIcon,
.panel.targets .resultPill:has(span.good) .resultIcon{
  color:#15803d!important;
}

.panel.full .resultPill:has(span.yellow) .resultIcon,
.panel.full .resultPill:has(span.orange) .resultIcon,
.panel.full .resultPill:has(span.warn) .resultIcon{
  color:#b45309!important;
}
.panel.pricecheck .resultPill:has(span.yellow) .resultIcon,
.panel.pricecheck .resultPill:has(span.orange) .resultIcon,
.panel.pricecheck .resultPill:has(span.warn) .resultIcon,
.panel.targets .resultPill:has(span.yellow) .resultIcon,
.panel.targets .resultPill:has(span.orange) .resultIcon,
.panel.targets .resultPill:has(span.warn) .resultIcon{
  color:#b45309!important;
}

.panel.full .resultPill:has(span.red) .resultIcon,
.panel.full .resultPill:has(span.bad) .resultIcon{
  color:#b91c1c!important;
}
.panel.pricecheck .resultPill:has(span.red) .resultIcon,
.panel.pricecheck .resultPill:has(span.bad) .resultIcon,
.panel.targets .resultPill:has(span.red) .resultIcon,
.panel.targets .resultPill:has(span.bad) .resultIcon{
  color:#b91c1c!important;
}

/* Keep text/value colors consistent too */
.panel.full .resultPill.good b,
.panel.full .resultPill.good span,
.panel.pricecheck .resultPill.good b,
.panel.pricecheck .resultPill.good span,
.panel.targets .resultPill.good b,
.panel.targets .resultPill.good span{
  color:#15803d!important;
}

.panel.full .resultPill.warn b,
.panel.full .resultPill.warn span,
.panel.pricecheck .resultPill.warn b,
.panel.pricecheck .resultPill.warn span,
.panel.targets .resultPill.warn b,
.panel.targets .resultPill.warn span{
  color:#b45309!important;
}

.panel.full .resultPill.bad b,
.panel.full .resultPill.bad span,
.panel.full .resultPill.danger b,
.panel.full .resultPill.danger span,
.panel.pricecheck .resultPill.bad b,
.panel.pricecheck .resultPill.bad span,
.panel.pricecheck .resultPill.danger b,
.panel.pricecheck .resultPill.danger span,
.panel.targets .resultPill.bad b,
.panel.targets .resultPill.bad span,
.panel.targets .resultPill.danger b,
.panel.targets .resultPill.danger span{
  color:#b91c1c!important;
}

.panel.full .resultPill:not(.good):not(.warn):not(.bad):not(.danger) b,
.panel.full .resultPill:not(.good):not(.warn):not(.bad):not(.danger) span,
.panel.pricecheck .resultPill:not(.good):not(.warn):not(.bad):not(.danger) b,
.panel.pricecheck .resultPill:not(.good):not(.warn):not(.bad):not(.danger) span,
.panel.targets .resultPill:not(.good):not(.warn):not(.bad):not(.danger) b,
.panel.targets .resultPill:not(.good):not(.warn):not(.bad):not(.danger) span{
  color:#111827!important;
}

.panel.full .resultPill,
.panel.pricecheck .resultPill,
.panel.targets .resultPill{
  align-items:center!important;
}

@media(max-width:850px){
  .panel.full .resultIcon{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    font-size:25.5px!important;
  }
  .panel.pricecheck .resultIcon,
  .panel.targets .resultIcon{
    
    
    
    
    
    
    
  }

  .panel.full .resultIcon svg{
    width:25.5px!important;
    height:25.5px!important;
    min-width:25.5px!important;
    min-height:25.5px!important;
    max-width:25.5px!important;
    max-height:25.5px!important;
  }
  .panel.pricecheck .resultIcon svg,
  .panel.targets .resultIcon svg{
    
    
    
    
    
    
  }

  .panel.full .discountIcon{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    font-size:25.5px!important;
  }
  .panel.pricecheck .discountIcon,
  .panel.targets .discountIcon{
    
    
    
    
    
    
    
  }
}

@media(max-width:390px){
  .panel.full .resultIcon{
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    font-size:24px!important;
  }
  .panel.pricecheck .resultIcon,
  .panel.targets .resultIcon{
    
    
    
    
    
    
    
  }

  .panel.full .resultIcon svg{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
    max-width:24px!important;
    max-height:24px!important;
  }
  .panel.pricecheck .resultIcon svg,
  .panel.targets .resultIcon svg{
    
    
    
    
    
    
  }

  .panel.full .discountIcon{
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    font-size:24px!important;
  }
  .panel.pricecheck .discountIcon,
  .panel.targets .discountIcon{
    
    
    
    
    
    
    
  }
}


/* V225 — result icons use the exact same color as the value below */
.panel.full .resultIcon{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font-size:27px!important;
  line-height:1!important;
  font-weight:760!important;
}
.panel.pricecheck .resultIcon,
.panel.targets .resultIcon{
  
  
  
  
  
  
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  
  line-height:1!important;
  font-weight:760!important;
}

.panel.full .resultIcon svg{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  max-width:27px!important;
  max-height:27px!important;
  stroke-width:2.35!important;
  display:block!important;
}
.panel.pricecheck .resultIcon svg,
.panel.targets .resultIcon svg{
  
  
  
  
  
  
  stroke-width:2.35!important;
  display:block!important;
}

/* Do not force our own green/yellow/red anymore: JS copies the real value color */
.panel.full .resultPill.good .resultIcon,
.panel.full .resultPill.warn .resultIcon,
.panel.full .resultPill.bad .resultIcon,
.panel.full .resultPill.danger .resultIcon{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}
.panel.pricecheck .resultPill.good .resultIcon,
.panel.pricecheck .resultPill.warn .resultIcon,
.panel.pricecheck .resultPill.bad .resultIcon,
.panel.pricecheck .resultPill.danger .resultIcon,
.panel.targets .resultPill.good .resultIcon,
.panel.targets .resultPill.warn .resultIcon,
.panel.targets .resultPill.bad .resultIcon,
.panel.targets .resultPill.danger .resultIcon{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}
.panel.targets #targetValuePct{
  color:#111827!important;
  border-color:#d8dee8!important;
  background:#fff!important;
}

/* Keep target-setting input neutral; this does not affect result icons */
.panel.targets .targetValueRow input{
  color:#111827!important;
  border-color:#d8dee8!important;
  background:#fff!important;
}

@media(max-width:850px){
  .panel.full .resultIcon{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    font-size:25.5px!important;
  }
  .panel.pricecheck .resultIcon,
  .panel.targets .resultIcon{
    
    
    
    
    
    
    
  }

  .panel.full .resultIcon svg{
    width:25.5px!important;
    height:25.5px!important;
    min-width:25.5px!important;
    min-height:25.5px!important;
    max-width:25.5px!important;
    max-height:25.5px!important;
  }
  .panel.pricecheck .resultIcon svg,
  .panel.targets .resultIcon svg{
    
    
    
    
    
    
  }
}

@media(max-width:390px){
  .panel.full .resultIcon{
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    font-size:24px!important;
  }
  .panel.pricecheck .resultIcon,
  .panel.targets .resultIcon{
    
    
    
    
    
    
    
  }

  .panel.full .resultIcon svg{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
    max-width:24px!important;
    max-height:24px!important;
  }
  .panel.pricecheck .resultIcon svg,
  .panel.targets .resultIcon svg{
    
    
    
    
    
    
  }
}


/* V226 — final icon color fix: icon must never use old hardcoded threshold colors */
.panel.full .resultIcon{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font-size:27px!important;
  line-height:1!important;
  font-weight:760!important;
}
.panel.pricecheck .resultIcon,
.panel.targets .resultIcon{
  
  
  
  
  
  
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  
  line-height:1!important;
  font-weight:760!important;
}

.panel.full .resultIcon svg{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  max-width:27px!important;
  max-height:27px!important;
  stroke-width:2.35!important;
  display:block!important;
}
.panel.pricecheck .resultIcon svg,
.panel.targets .resultIcon svg{
  
  
  
  
  
  
  stroke-width:2.35!important;
  display:block!important;
}

/* Disable the old icon-box look no matter which old rule is still above */
.panel.full .resultIcon,
.panel.full .discountIcon{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.panel.pricecheck .resultIcon,
.panel.targets .resultIcon,
.panel.pricecheck .discountIcon,
.panel.targets .discountIcon{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-radius:0!important;
}

/* The color itself is set by V226 JS with inline important, copied from the value below */


/* V227 — one shared Markup-style rule for every result field */
.panel.full .resultPill,
.panel.pricecheck .resultPill,
.panel.targets .resultPill{
  --bf-result-neutral:#111827;
  --bf-result-good:#16a34a;
  --bf-result-warn:#f59e0b;
  --bf-result-bad:#ef4444;
}

/* Same rule for every card: label, value and icon use the same variable */
.panel.full .resultPill,
.panel.pricecheck .resultPill,
.panel.targets .resultPill{
  --bf-result-color:var(--bf-result-neutral);
}

.panel.full .resultPill.good,
.panel.pricecheck .resultPill.good,
.panel.targets .resultPill.good{
  --bf-result-color:var(--bf-result-good);
}

.panel.full .resultPill.warn,
.panel.pricecheck .resultPill.warn,
.panel.targets .resultPill.warn{
  --bf-result-color:var(--bf-result-warn);
}

.panel.full .resultPill.bad,
.panel.full .resultPill.danger,
.panel.pricecheck .resultPill.bad,
.panel.pricecheck .resultPill.danger,
.panel.targets .resultPill.bad,
.panel.targets .resultPill.danger{
  --bf-result-color:var(--bf-result-bad);
}

/* If old logic puts color classes on the value itself, map them to the same shared variable */
.panel.full .resultPill:has(span.good),
.panel.full .resultPill:has(span.green),
.panel.pricecheck .resultPill:has(span.good),
.panel.pricecheck .resultPill:has(span.green),
.panel.targets .resultPill:has(span.good),
.panel.targets .resultPill:has(span.green){
  --bf-result-color:var(--bf-result-good);
}

.panel.full .resultPill:has(span.warn),
.panel.full .resultPill:has(span.yellow),
.panel.full .resultPill:has(span.orange),
.panel.pricecheck .resultPill:has(span.warn),
.panel.pricecheck .resultPill:has(span.yellow),
.panel.pricecheck .resultPill:has(span.orange),
.panel.targets .resultPill:has(span.warn),
.panel.targets .resultPill:has(span.yellow),
.panel.targets .resultPill:has(span.orange){
  --bf-result-color:var(--bf-result-warn);
}

.panel.full .resultPill:has(span.bad),
.panel.full .resultPill:has(span.red),
.panel.pricecheck .resultPill:has(span.bad),
.panel.pricecheck .resultPill:has(span.red),
.panel.targets .resultPill:has(span.bad),
.panel.targets .resultPill:has(span.red){
  --bf-result-color:var(--bf-result-bad);
}

/* Apply the same Markup-style color to icon, label and value */
.panel.full .resultPill .resultIcon,
.panel.full .resultPill b,
.panel.pricecheck .resultPill b,
.panel.targets .resultPill b,
.panel.full .resultPill span,
.panel.pricecheck .resultPill span,
.panel.targets .resultPill span{
  color:var(--bf-result-color)!important;
}
.panel.pricecheck .resultPill .resultIcon,
.panel.targets .resultPill .resultIcon{
  color:var(--bf-result-color)!important;
}

/* Icons: same size everywhere, no square box */
.panel.full .resultIcon{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font-size:27px!important;
  line-height:1!important;
  font-weight:760!important;
  transform:none!important;
}
.panel.pricecheck .resultIcon,
.panel.targets .resultIcon{
  
  
  
  
  
  
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  
  line-height:1!important;
  font-weight:760!important;
  transform:none!important;
}

.panel.full .resultIcon svg{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  max-width:27px!important;
  max-height:27px!important;
  stroke-width:2.35!important;
  display:block!important;
}
.panel.pricecheck .resultIcon svg,
.panel.targets .resultIcon svg{
  
  
  
  
  
  
  stroke-width:2.35!important;
  display:block!important;
}

/* User-set target input stays neutral, only result cards get colors */
.panel.targets .targetValueRow,
.panel.targets .targetValueRow *,
.panel.targets #targetValuePct{
  color:#111827!important;
}

.panel.targets .targetValueRow .name{
  color:#7c3aed!important;
}

.panel.targets #targetValuePct{
  border-color:#d8dee8!important;
  background:#fff!important;
}

@media(max-width:850px){
  .panel.full .resultIcon{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    font-size:25.5px!important;
  }
  .panel.pricecheck .resultIcon,
  .panel.targets .resultIcon{
    
    
    
    
    
    
    
  }

  .panel.full .resultIcon svg{
    width:25.5px!important;
    height:25.5px!important;
    min-width:25.5px!important;
    min-height:25.5px!important;
    max-width:25.5px!important;
    max-height:25.5px!important;
  }
  .panel.pricecheck .resultIcon svg,
  .panel.targets .resultIcon svg{
    
    
    
    
    
    
  }
}

@media(max-width:390px){
  .panel.full .resultIcon{
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    font-size:24px!important;
  }
  .panel.pricecheck .resultIcon,
  .panel.targets .resultIcon{
    
    
    
    
    
    
    
  }

  .panel.full .resultIcon svg{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
    max-width:24px!important;
    max-height:24px!important;
  }
  .panel.pricecheck .resultIcon svg,
  .panel.targets .resultIcon svg{
    
    
    
    
    
    
  }
}


/* V228 — FINAL icon color fix: remove old JS interference, icon follows the result value color */
.panel.full .resultPill,
.panel.pricecheck .resultPill,
.panel.targets .resultPill{
  --bf-result-neutral:#111827;
  --bf-result-good:#16a34a;
  --bf-result-warn:#f59e0b;
  --bf-result-bad:#ef4444;
  --bf-result-color:var(--bf-result-neutral);
}

.panel.full .resultPill.good,
.panel.pricecheck .resultPill.good,
.panel.targets .resultPill.good{
  --bf-result-color:var(--bf-result-good);
}

.panel.full .resultPill.warn,
.panel.pricecheck .resultPill.warn,
.panel.targets .resultPill.warn{
  --bf-result-color:var(--bf-result-warn);
}

.panel.full .resultPill.bad,
.panel.full .resultPill.danger,
.panel.pricecheck .resultPill.bad,
.panel.pricecheck .resultPill.danger,
.panel.targets .resultPill.bad,
.panel.targets .resultPill.danger{
  --bf-result-color:var(--bf-result-bad);
}

.panel.full .resultPill:has(span.good),
.panel.full .resultPill:has(span.green),
.panel.pricecheck .resultPill:has(span.good),
.panel.pricecheck .resultPill:has(span.green),
.panel.targets .resultPill:has(span.good),
.panel.targets .resultPill:has(span.green){
  --bf-result-color:var(--bf-result-good);
}

.panel.full .resultPill:has(span.warn),
.panel.full .resultPill:has(span.yellow),
.panel.full .resultPill:has(span.orange),
.panel.pricecheck .resultPill:has(span.warn),
.panel.pricecheck .resultPill:has(span.yellow),
.panel.pricecheck .resultPill:has(span.orange),
.panel.targets .resultPill:has(span.warn),
.panel.targets .resultPill:has(span.yellow),
.panel.targets .resultPill:has(span.orange){
  --bf-result-color:var(--bf-result-warn);
}

.panel.full .resultPill:has(span.bad),
.panel.full .resultPill:has(span.red),
.panel.pricecheck .resultPill:has(span.bad),
.panel.pricecheck .resultPill:has(span.red),
.panel.targets .resultPill:has(span.bad),
.panel.targets .resultPill:has(span.red){
  --bf-result-color:var(--bf-result-bad);
}

/* same exact color on title, value, icon */
.panel.full .resultPill b,
.panel.full .resultPill span,
.panel.full .resultPill .resultIcon,
.panel.pricecheck .resultPill b,
.panel.pricecheck .resultPill span,
.panel.targets .resultPill b,
.panel.targets .resultPill span{
  color:var(--bf-result-color)!important;
}
.panel.pricecheck .resultPill .resultIcon,
.panel.targets .resultPill .resultIcon{
  color:var(--bf-result-color)!important;
}

/* make SVG and text icons inherit the exact same color */
.panel.full .resultIcon svg{
  color:currentColor!important;
  stroke:currentColor!important;
}
.panel.pricecheck .resultIcon svg,
.panel.targets .resultIcon svg{
  color:currentColor!important;
  stroke:currentColor!important;
}

/* icon size: aligned to Full Deal, no box */
.panel.full .resultIcon{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font-size:27px!important;
  line-height:1!important;
  font-weight:760!important;
  transform:none!important;
}
.panel.pricecheck .resultIcon,
.panel.targets .resultIcon{
  
  
  
  
  
  
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  
  line-height:1!important;
  font-weight:760!important;
  transform:none!important;
}

.panel.full .resultIcon svg{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  max-width:27px!important;
  max-height:27px!important;
  stroke-width:2.35!important;
  display:block!important;
}
.panel.pricecheck .resultIcon svg,
.panel.targets .resultIcon svg{
  
  
  
  
  
  
  stroke-width:2.35!important;
  display:block!important;
}

/* user target input remains neutral */
.panel.targets .targetValueRow,
.panel.targets .targetValueRow *,
.panel.targets #targetValuePct{
  color:#111827!important;
}

.panel.targets .targetValueRow .name{
  color:#7c3aed!important;
}

.panel.targets #targetValuePct{
  border-color:#d8dee8!important;
  background:#fff!important;
}

@media(max-width:850px){
  .panel.full .resultIcon{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    font-size:25.5px!important;
  }
  .panel.pricecheck .resultIcon,
  .panel.targets .resultIcon{
    
    
    
    
    
    
    
  }

  .panel.full .resultIcon svg{
    width:25.5px!important;
    height:25.5px!important;
    min-width:25.5px!important;
    min-height:25.5px!important;
    max-width:25.5px!important;
    max-height:25.5px!important;
  }
  .panel.pricecheck .resultIcon svg,
  .panel.targets .resultIcon svg{
    
    
    
    
    
    
  }
}

@media(max-width:390px){
  .panel.full .resultIcon{
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    font-size:24px!important;
  }
  .panel.pricecheck .resultIcon,
  .panel.targets .resultIcon{
    
    
    
    
    
    
    
  }

  .panel.full .resultIcon svg{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
    max-width:24px!important;
    max-height:24px!important;
  }
  .panel.pricecheck .resultIcon svg,
  .panel.targets .resultIcon svg{
    
    
    
    
    
    
  }
}


/* V229 — definitive cascade fix: beat every old icon-color selector */
.panel.full .resultPill,
.panel.pricecheck .resultPill,
.panel.targets .resultPill{
  --bf-result-neutral:#111827;
  --bf-result-good:#16a34a;
  --bf-result-warn:#f59e0b;
  --bf-result-bad:#ef4444;
  --bf-result-color:var(--bf-result-neutral);
}

.panel.full .resultPill.good,
.panel.pricecheck .resultPill.good,
.panel.targets .resultPill.good,
.panel.full .resultPill.bfStateGood,
.panel.pricecheck .resultPill.bfStateGood,
.panel.targets .resultPill.bfStateGood,
.panel.full .resultPill:has(span.good),
.panel.full .resultPill:has(span.green),
.panel.pricecheck .resultPill:has(span.good),
.panel.pricecheck .resultPill:has(span.green),
.panel.targets .resultPill:has(span.good),
.panel.targets .resultPill:has(span.green){
  --bf-result-color:var(--bf-result-good);
}

.panel.full .resultPill.warn,
.panel.pricecheck .resultPill.warn,
.panel.targets .resultPill.warn,
.panel.full .resultPill.bfStateWarn,
.panel.pricecheck .resultPill.bfStateWarn,
.panel.targets .resultPill.bfStateWarn,
.panel.full .resultPill:has(span.warn),
.panel.full .resultPill:has(span.yellow),
.panel.full .resultPill:has(span.orange),
.panel.pricecheck .resultPill:has(span.warn),
.panel.pricecheck .resultPill:has(span.yellow),
.panel.pricecheck .resultPill:has(span.orange),
.panel.targets .resultPill:has(span.warn),
.panel.targets .resultPill:has(span.yellow),
.panel.targets .resultPill:has(span.orange){
  --bf-result-color:var(--bf-result-warn);
}

.panel.full .resultPill.bad,
.panel.full .resultPill.danger,
.panel.pricecheck .resultPill.bad,
.panel.pricecheck .resultPill.danger,
.panel.targets .resultPill.bad,
.panel.targets .resultPill.danger,
.panel.full .resultPill.bfStateBad,
.panel.pricecheck .resultPill.bfStateBad,
.panel.targets .resultPill.bfStateBad,
.panel.full .resultPill:has(span.bad),
.panel.full .resultPill:has(span.red),
.panel.pricecheck .resultPill:has(span.bad),
.panel.pricecheck .resultPill:has(span.red),
.panel.targets .resultPill:has(span.bad),
.panel.targets .resultPill:has(span.red){
  --bf-result-color:var(--bf-result-bad);
}

/* HIGH-SPECIFICITY state selectors: these beat the old #b45309 / #15803d / #b91c1c icon rules */
.panel.full .resultPill.good .resultIcon,
.panel.full .resultPill.warn .resultIcon,
.panel.full .resultPill.bad .resultIcon,
.panel.full .resultPill.danger .resultIcon,
.panel.full .resultPill.bfStateGood .resultIcon,
.panel.full .resultPill.bfStateWarn .resultIcon,
.panel.full .resultPill.bfStateBad .resultIcon{
  color:var(--bf-result-color)!important;
}
.panel.pricecheck .resultPill.good .resultIcon,
.panel.pricecheck .resultPill.warn .resultIcon,
.panel.pricecheck .resultPill.bad .resultIcon,
.panel.pricecheck .resultPill.danger .resultIcon,
.panel.pricecheck .resultPill.bfStateGood .resultIcon,
.panel.pricecheck .resultPill.bfStateWarn .resultIcon,
.panel.pricecheck .resultPill.bfStateBad .resultIcon,
.panel.targets .resultPill.good .resultIcon,
.panel.targets .resultPill.warn .resultIcon,
.panel.targets .resultPill.bad .resultIcon,
.panel.targets .resultPill.danger .resultIcon,
.panel.targets .resultPill.bfStateGood .resultIcon,
.panel.targets .resultPill.bfStateWarn .resultIcon,
.panel.targets .resultPill.bfStateBad .resultIcon{
  color:var(--bf-result-color)!important;
}

/* Same exact color for title and value */
.panel.full .resultPill.good b,
.panel.full .resultPill.good span,
.panel.full .resultPill.warn b,
.panel.full .resultPill.warn span,
.panel.full .resultPill.bad b,
.panel.full .resultPill.bad span,
.panel.full .resultPill.danger b,
.panel.full .resultPill.danger span,
.panel.full .resultPill.bfStateGood b,
.panel.full .resultPill.bfStateGood span,
.panel.full .resultPill.bfStateWarn b,
.panel.full .resultPill.bfStateWarn span,
.panel.full .resultPill.bfStateBad b,
.panel.full .resultPill.bfStateBad span,
.panel.pricecheck .resultPill.good b,
.panel.pricecheck .resultPill.good span,
.panel.pricecheck .resultPill.warn b,
.panel.pricecheck .resultPill.warn span,
.panel.pricecheck .resultPill.bad b,
.panel.pricecheck .resultPill.bad span,
.panel.pricecheck .resultPill.danger b,
.panel.pricecheck .resultPill.danger span,
.panel.pricecheck .resultPill.bfStateGood b,
.panel.pricecheck .resultPill.bfStateGood span,
.panel.pricecheck .resultPill.bfStateWarn b,
.panel.pricecheck .resultPill.bfStateWarn span,
.panel.pricecheck .resultPill.bfStateBad b,
.panel.pricecheck .resultPill.bfStateBad span,
.panel.targets .resultPill.good b,
.panel.targets .resultPill.good span,
.panel.targets .resultPill.warn b,
.panel.targets .resultPill.warn span,
.panel.targets .resultPill.bad b,
.panel.targets .resultPill.bad span,
.panel.targets .resultPill.danger b,
.panel.targets .resultPill.danger span,
.panel.targets .resultPill.bfStateGood b,
.panel.targets .resultPill.bfStateGood span,
.panel.targets .resultPill.bfStateWarn b,
.panel.targets .resultPill.bfStateWarn span,
.panel.targets .resultPill.bfStateBad b,
.panel.targets .resultPill.bfStateBad span{
  color:var(--bf-result-color)!important;
}

/* Neutral cards */
.panel.full .resultPill:not(.good):not(.warn):not(.bad):not(.danger):not(.bfStateGood):not(.bfStateWarn):not(.bfStateBad) .resultIcon,
.panel.full .resultPill:not(.good):not(.warn):not(.bad):not(.danger):not(.bfStateGood):not(.bfStateWarn):not(.bfStateBad) b,
.panel.full .resultPill:not(.good):not(.warn):not(.bad):not(.danger):not(.bfStateGood):not(.bfStateWarn):not(.bfStateBad) span,
.panel.pricecheck .resultPill:not(.good):not(.warn):not(.bad):not(.danger):not(.bfStateGood):not(.bfStateWarn):not(.bfStateBad) b,
.panel.pricecheck .resultPill:not(.good):not(.warn):not(.bad):not(.danger):not(.bfStateGood):not(.bfStateWarn):not(.bfStateBad) span,
.panel.targets .resultPill:not(.good):not(.warn):not(.bad):not(.danger):not(.bfStateGood):not(.bfStateWarn):not(.bfStateBad) b,
.panel.targets .resultPill:not(.good):not(.warn):not(.bad):not(.danger):not(.bfStateGood):not(.bfStateWarn):not(.bfStateBad) span{
  color:var(--bf-result-neutral)!important;
}
.panel.pricecheck .resultPill:not(.good):not(.warn):not(.bad):not(.danger):not(.bfStateGood):not(.bfStateWarn):not(.bfStateBad) .resultIcon,
.panel.targets .resultPill:not(.good):not(.warn):not(.bad):not(.danger):not(.bfStateGood):not(.bfStateWarn):not(.bfStateBad) .resultIcon{
  color:var(--bf-result-neutral)!important;
}

/* SVGs must inherit from the icon, never from their own old rules */
.panel.full .resultIcon svg{
  color:currentColor!important;
  stroke:currentColor!important;
  fill:none!important;
}
.panel.pricecheck .resultIcon svg,
.panel.targets .resultIcon svg{
  color:currentColor!important;
  stroke:currentColor!important;
  fill:none!important;
}

/* Size and no icon box */
.panel.full .resultIcon{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font-size:27px!important;
  line-height:1!important;
  font-weight:760!important;
  transform:none!important;
}
.panel.pricecheck .resultIcon,
.panel.targets .resultIcon{
  
  
  
  
  
  
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  
  line-height:1!important;
  font-weight:760!important;
  transform:none!important;
}

.panel.full .resultIcon svg{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  max-width:27px!important;
  max-height:27px!important;
  stroke-width:2.35!important;
  display:block!important;
}
.panel.pricecheck .resultIcon svg,
.panel.targets .resultIcon svg{
  
  
  
  
  
  
  stroke-width:2.35!important;
  display:block!important;
}

/* Keep user-set target input neutral */
.panel.targets .targetValueRow,
.panel.targets .targetValueRow *,
.panel.targets #targetValuePct{
  color:#111827!important;
}

.panel.targets .targetValueRow .name{
  color:#7c3aed!important;
}

.panel.targets #targetValuePct{
  border-color:#d8dee8!important;
  background:#fff!important;
}


/* V230 — Margin icon fixed to behave exactly like Markup icon */
.panel.full .resultPill:has(.markupIcon),
.panel.full .resultPill:has(.marginIcon){
  --bf-result-neutral:#111827;
  --bf-result-good:#16a34a;
  --bf-result-warn:#f59e0b;
  --bf-result-bad:#ef4444;
}
.panel.pricecheck .resultPill:has(.markupIcon),
.panel.targets .resultPill:has(.markupIcon),
.panel.pricecheck .resultPill:has(.marginIcon),
.panel.targets .resultPill:has(.marginIcon){
  --bf-result-neutral:#111827;
  --bf-result-good:#16a34a;
  --bf-result-warn:#f59e0b;
  --bf-result-bad:#ef4444;
}

/* Margin: same state-color mapping as Markup */
.panel.full .resultPill.good:has(.marginIcon),
.panel.full .resultPill.bfStateGood:has(.marginIcon){
  --bf-result-color:var(--bf-result-good)!important;
}
.panel.pricecheck .resultPill.good:has(.marginIcon),
.panel.targets .resultPill.good:has(.marginIcon),
.panel.pricecheck .resultPill.bfStateGood:has(.marginIcon),
.panel.targets .resultPill.bfStateGood:has(.marginIcon){
  --bf-result-color:var(--bf-result-good)!important;
}

.panel.full .resultPill.warn:has(.marginIcon),
.panel.full .resultPill.bfStateWarn:has(.marginIcon){
  --bf-result-color:var(--bf-result-warn)!important;
}
.panel.pricecheck .resultPill.warn:has(.marginIcon),
.panel.targets .resultPill.warn:has(.marginIcon),
.panel.pricecheck .resultPill.bfStateWarn:has(.marginIcon),
.panel.targets .resultPill.bfStateWarn:has(.marginIcon){
  --bf-result-color:var(--bf-result-warn)!important;
}

.panel.full .resultPill.bad:has(.marginIcon),
.panel.full .resultPill.danger:has(.marginIcon),
.panel.full .resultPill.bfStateBad:has(.marginIcon){
  --bf-result-color:var(--bf-result-bad)!important;
}
.panel.pricecheck .resultPill.bad:has(.marginIcon),
.panel.pricecheck .resultPill.danger:has(.marginIcon),
.panel.targets .resultPill.bad:has(.marginIcon),
.panel.targets .resultPill.danger:has(.marginIcon),
.panel.pricecheck .resultPill.bfStateBad:has(.marginIcon),
.panel.targets .resultPill.bfStateBad:has(.marginIcon){
  --bf-result-color:var(--bf-result-bad)!important;
}

/* Hard target: Margin icon, its SVG, its label and its value all use the exact same variable */
.panel.full .resultPill:has(.marginIcon) .marginIcon,
.panel.full .resultPill:has(.marginIcon) .marginIcon svg,
.panel.full .resultPill:has(.marginIcon) b,
.panel.full .resultPill:has(.marginIcon) span{
  color:var(--bf-result-color)!important;
  stroke:currentColor!important;
}
.panel.pricecheck .resultPill:has(.marginIcon) .marginIcon,
.panel.targets .resultPill:has(.marginIcon) .marginIcon,
.panel.pricecheck .resultPill:has(.marginIcon) .marginIcon svg,
.panel.targets .resultPill:has(.marginIcon) .marginIcon svg,
.panel.pricecheck .resultPill:has(.marginIcon) b,
.panel.targets .resultPill:has(.marginIcon) b,
.panel.pricecheck .resultPill:has(.marginIcon) span,
.panel.targets .resultPill:has(.marginIcon) span{
  color:var(--bf-result-color)!important;
  stroke:currentColor!important;
}

/* Exact same physical icon styling as Markup */
.panel.full .resultPill:has(.marginIcon) .marginIcon{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font-size:27px!important;
  line-height:1!important;
  font-weight:760!important;
  transform:none!important;
}
.panel.pricecheck .resultPill:has(.marginIcon) .marginIcon,
.panel.targets .resultPill:has(.marginIcon) .marginIcon{
  
  
  
  
  
  
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  
  line-height:1!important;
  font-weight:760!important;
  transform:none!important;
}

.panel.full .resultPill:has(.marginIcon) .marginIcon svg{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  max-width:27px!important;
  max-height:27px!important;
  stroke-width:2.35!important;
  fill:none!important;
  display:block!important;
}
.panel.pricecheck .resultPill:has(.marginIcon) .marginIcon svg,
.panel.targets .resultPill:has(.marginIcon) .marginIcon svg{
  
  
  
  
  
  
  stroke-width:2.35!important;
  fill:none!important;
  display:block!important;
}


/* V231 — final: icon visual size only; color is copied from the value below by JS */
.panel.full .resultIcon{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font-size:27px!important;
  line-height:1!important;
  font-weight:760!important;
  transform:none!important;
}
.panel.pricecheck .resultIcon,
.panel.targets .resultIcon{
  
  
  
  
  
  
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  
  line-height:1!important;
  font-weight:760!important;
  transform:none!important;
}

.panel.full .resultIcon svg{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  max-width:27px!important;
  max-height:27px!important;
  stroke-width:2.35!important;
  display:block!important;
}
.panel.pricecheck .resultIcon svg,
.panel.targets .resultIcon svg{
  
  
  
  
  
  
  stroke-width:2.35!important;
  display:block!important;
}

/* target-setting field remains neutral */
.panel.targets .targetValueRow,
.panel.targets .targetValueRow *,
.panel.targets #targetValuePct{
  color:#111827!important;
}

.panel.targets .targetValueRow .name{
  color:#7c3aed!important;
}

.panel.targets #targetValuePct{
  border-color:#d8dee8!important;
  background:#fff!important;
}


/* V232 — reliable Add List Price Adjustment open/close */
#purchaseAdjustmentBlock,
#sellingAdjustmentBlock{display:none!important;}
#purchaseAdjustmentBlock.open,
#sellingAdjustmentBlock.open{display:block!important;}
#purchaseAdjustmentBlock.open .row,
#sellingAdjustmentBlock.open .row{display:grid!important;}
#purchaseAdjustmentRow,
#sellingAdjustmentRow{display:none!important;}
#purchaseAdjustmentRow.open,
#sellingAdjustmentRow.open{display:grid!important;}


/* V239 — Targets name simplified and Set Margin / Set Markup select widened */
.panel.targets h3{
  white-space:normal!important;
}

.panel.targets #targetMode{
  width:auto!important;
  min-width:158px!important;
  max-width:190px!important;
  justify-self:start!important;
  padding-left:10px!important;
  padding-right:30px!important;
  text-overflow:clip!important;
}

.panel.targets .row:has(#targetMode){
  grid-template-columns:minmax(82px,1fr) auto 12px!important;
  gap:7px!important;
}

@media(max-width:850px){
  .panel.targets #targetMode{
    min-width:154px!important;
    max-width:184px!important;
    padding-right:28px!important;
  }

  .panel.targets .row:has(#targetMode){
    grid-template-columns:minmax(76px,1fr) auto 11px!important;
    gap:6px!important;
  }
}

@media(max-width:390px){
  .panel.targets #targetMode{
    min-width:150px!important;
    max-width:178px!important;
    padding-right:26px!important;
  }

  .panel.targets .row:has(#targetMode){
    grid-template-columns:minmax(70px,1fr) auto 10px!important;
    gap:5px!important;
  }
}


/* V240 — top KPI cards: same vertical rhythm for all five cards */
.kpi{
  display:grid!important;
  grid-template-rows:34px 31px 26px!important;
  align-content:center!important;
  justify-items:center!important;
  row-gap:5px!important;
}

.kpi .label{
  min-height:34px!important;
  height:34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.03!important;
  margin:0!important;
  padding:0!important;
}

.kpi .value{
  min-height:31px!important;
  height:31px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
}

.kpi .kpiIcon,
.kpi svg,
.kpi .icon{
  margin-top:0!important;
}

@media(max-width:430px){
  .kpi{
    grid-template-rows:34px 31px 25px!important;
    row-gap:4px!important;
  }

  .kpi .label{
    min-height:34px!important;
    height:34px!important;
  }

  .kpi .value{
    min-height:31px!important;
    height:31px!important;
  }
}














/* V248 — Free Goods final: fixed compact row, no right overflow */
.panel.purchase .row.freeGoodsRowV248,
.panel.selling .row.freeGoodsRowV248{
  display:grid!important;
  grid-template-columns:minmax(86px,1fr) 104px 0!important;
  column-gap:4px!important;
  row-gap:0!important;
  align-items:center!important;
  min-height:46px!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}

.panel.purchase .row.freeGoodsRowV248 .name,
.panel.selling .row.freeGoodsRowV248 .name{
  min-width:0!important;
  max-width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:2px!important;
  overflow:visible!important;
  white-space:normal!important;
}

.freeGoodsNoteV248{
  display:block!important;
  font-size:9.6px!important;
  line-height:1!important;
  font-weight:760!important;
  color:#7b8495!important;
  white-space:nowrap!important;
  letter-spacing:-.01em!important;
  margin:0!important;
  padding:0!important;
}

.panel.purchase .row.freeGoodsRowV248 .dealWrap,
.panel.selling .row.freeGoodsRowV248 .dealWrap{
  width:104px!important;
  min-width:104px!important;
  max-width:104px!important;
  justify-self:end!important;
  overflow:visible!important;
}

.panel.purchase .row.freeGoodsRowV248 .deal,
.panel.selling .row.freeGoodsRowV248 .deal{
  display:grid!important;
  grid-template-columns:47px 10px 47px!important;
  column-gap:0!important;
  align-items:center!important;
  justify-content:end!important;
  width:104px!important;
  min-width:104px!important;
  max-width:104px!important;
  overflow:visible!important;
}

.panel.purchase .row.freeGoodsRowV248 .deal input,
.panel.selling .row.freeGoodsRowV248 .deal input{
  width:47px!important;
  min-width:47px!important;
  max-width:47px!important;
  height:31px!important;
  min-height:31px!important;
  max-height:31px!important;
  padding:2px 3px!important;
  text-align:center!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

.panel.purchase .row.freeGoodsRowV248 .deal span,
.panel.selling .row.freeGoodsRowV248 .deal span{
  width:10px!important;
  min-width:10px!important;
  max-width:10px!important;
  text-align:center!important;
  color:#9aa3b2!important;
  font-size:17px!important;
  font-weight:850!important;
  line-height:1!important;
  padding:0!important;
  margin:0!important;
}

.panel.purchase .row.freeGoodsRowV248 > :nth-child(3),
.panel.selling .row.freeGoodsRowV248 > :nth-child(3){
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  overflow:hidden!important;
}

@media(max-width:430px){
  .panel.purchase .row.freeGoodsRowV248,
  .panel.selling .row.freeGoodsRowV248{
    grid-template-columns:minmax(82px,1fr) 100px 0!important;
    column-gap:3px!important;
  }

  .panel.purchase .row.freeGoodsRowV248 .dealWrap,
  .panel.selling .row.freeGoodsRowV248 .dealWrap,
  .panel.purchase .row.freeGoodsRowV248 .deal,
  .panel.selling .row.freeGoodsRowV248 .deal{
    width:100px!important;
    min-width:100px!important;
    max-width:100px!important;
  }

  .panel.purchase .row.freeGoodsRowV248 .deal,
  .panel.selling .row.freeGoodsRowV248 .deal{
    grid-template-columns:45px 10px 45px!important;
  }

  .panel.purchase .row.freeGoodsRowV248 .deal input,
  .panel.selling .row.freeGoodsRowV248 .deal input{
    width:45px!important;
    min-width:45px!important;
    max-width:45px!important;
  }
}


/* V249 — final deploy guard: Tariff-Fee percent unit and static units */
.panel.purchase .dynamicFeeRow,
.panel.selling .dynamicFeeRow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 82px 14px 30px!important;
  gap:5px!important;
  align-items:center!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}

.panel.purchase .dynamicFeeRow input,
.panel.selling .dynamicFeeRow input{
  width:82px!important;
  min-width:82px!important;
  max-width:82px!important;
  height:31px!important;
  min-height:31px!important;
  max-height:31px!important;
  text-align:right!important;
  padding:3px 6px!important;
  box-sizing:border-box!important;
}

.tariffFeeUnitV249,
.vatUnitV249,
.shippingCurrencyUnitV249{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:14px!important;
  min-width:14px!important;
  max-width:14px!important;
  color:#7b8495!important;
  font-size:16px!important;
  font-weight:760!important;
  line-height:1!important;
  overflow:visible!important;
}

@media(max-width:390px){
  .panel.purchase .dynamicFeeRow,
  .panel.selling .dynamicFeeRow{
    grid-template-columns:minmax(0,1fr) 78px 13px 28px!important;
    gap:4px!important;
  }

  .panel.purchase .dynamicFeeRow input,
  .panel.selling .dynamicFeeRow input{
    width:78px!important;
    min-width:78px!important;
    max-width:78px!important;
  }
}


/* V250 — Free Goods moved left, both inputs fully visible */
.panel.purchase .row.freeGoodsRowV248,
.panel.selling .row.freeGoodsRowV248{
  grid-template-columns:minmax(82px,1fr) 104px 22px!important;
  column-gap:4px!important;
  overflow:visible!important;
}

.panel.purchase .row.freeGoodsRowV248 .dealWrap,
.panel.selling .row.freeGoodsRowV248 .dealWrap{
  justify-self:start!important;
  margin:0!important;
  transform:none!important;
}

.panel.purchase .row.freeGoodsRowV248 > :nth-child(3),
.panel.selling .row.freeGoodsRowV248 > :nth-child(3){
  width:22px!important;
  min-width:22px!important;
  max-width:22px!important;
  overflow:hidden!important;
}

@media(max-width:430px){
  .panel.purchase .row.freeGoodsRowV248,
  .panel.selling .row.freeGoodsRowV248{
    grid-template-columns:minmax(78px,1fr) 100px 20px!important;
    column-gap:3px!important;
  }

  .panel.purchase .row.freeGoodsRowV248 > :nth-child(3),
  .panel.selling .row.freeGoodsRowV248 > :nth-child(3){
    width:20px!important;
    min-width:20px!important;
    max-width:20px!important;
  }
}


/* V251 — compact percentage discount fields in Full Deal */
.panel.full .row:has(#supplierBaseDiscountPct),
.panel.full .row:has(#supplierExtraDiscount1Pct),
.panel.full .row:has(#supplierExtraDiscount2Pct),
.panel.full .row:has(#customerBaseDiscountPct),
.panel.full .row:has(#customerExtraDiscount1Pct),
.panel.full .row:has(#customerExtraDiscount2Pct),
.panel.purchase .row:has(#supplierBaseDiscountPct),
.panel.purchase .row:has(#supplierExtraDiscount1Pct),
.panel.purchase .row:has(#supplierExtraDiscount2Pct),
.panel.selling .row:has(#customerBaseDiscountPct),
.panel.selling .row:has(#customerExtraDiscount1Pct),
.panel.selling .row:has(#customerExtraDiscount2Pct){grid-template-columns:minmax(118px,1fr) 64px 14px!important;gap:5px!important;}
#supplierBaseDiscountPct,#supplierExtraDiscount1Pct,#supplierExtraDiscount2Pct,#customerBaseDiscountPct,#customerExtraDiscount1Pct,#customerExtraDiscount2Pct{width:64px!important;min-width:64px!important;max-width:64px!important;height:31px!important;min-height:31px!important;max-height:31px!important;padding:3px 6px!important;text-align:right!important;box-sizing:border-box!important;}
@media(max-width:390px){
.panel.full .row:has(#supplierBaseDiscountPct),.panel.full .row:has(#supplierExtraDiscount1Pct),.panel.full .row:has(#supplierExtraDiscount2Pct),.panel.full .row:has(#customerBaseDiscountPct),.panel.full .row:has(#customerExtraDiscount1Pct),.panel.full .row:has(#customerExtraDiscount2Pct),.panel.purchase .row:has(#supplierBaseDiscountPct),.panel.purchase .row:has(#supplierExtraDiscount1Pct),.panel.purchase .row:has(#supplierExtraDiscount2Pct),.panel.selling .row:has(#customerBaseDiscountPct),.panel.selling .row:has(#customerExtraDiscount1Pct),.panel.selling .row:has(#customerExtraDiscount2Pct){grid-template-columns:minmax(108px,1fr) 60px 13px!important;gap:4px!important;}
#supplierBaseDiscountPct,#supplierExtraDiscount1Pct,#supplierExtraDiscount2Pct,#customerBaseDiscountPct,#customerExtraDiscount1Pct,#customerExtraDiscount2Pct{width:60px!important;min-width:60px!important;max-width:60px!important;padding-left:5px!important;padding-right:5px!important;}}
/* V264 — visibly narrower discount percentage inputs */
.panel.full .row:has(#supplierBaseDiscountPct),
.panel.full .row:has(#supplierExtraDiscount1Pct),
.panel.full .row:has(#supplierExtraDiscount2Pct),
.panel.full .row:has(#customerBaseDiscountPct),
.panel.full .row:has(#customerExtraDiscount1Pct),
.panel.full .row:has(#customerExtraDiscount2Pct),
.panel.purchase .row:has(#supplierBaseDiscountPct),
.panel.purchase .row:has(#supplierExtraDiscount1Pct),
.panel.purchase .row:has(#supplierExtraDiscount2Pct),
.panel.selling .row:has(#customerBaseDiscountPct),
.panel.selling .row:has(#customerExtraDiscount1Pct),
.panel.selling .row:has(#customerExtraDiscount2Pct){
  grid-template-columns:minmax(0,1fr) 52px 12px !important;
  column-gap:4px !important;
}
#supplierBaseDiscountPct,
#supplierExtraDiscount1Pct,
#supplierExtraDiscount2Pct,
#customerBaseDiscountPct,
#customerExtraDiscount1Pct,
#customerExtraDiscount2Pct{
  width:52px !important;
  min-width:52px !important;
  max-width:52px !important;
  padding-left:4px !important;
  padding-right:4px !important;
  text-align:right !important;
  box-sizing:border-box !important;
}
@media (max-width:700px){
  .panel.full .row:has(#supplierBaseDiscountPct),
  .panel.full .row:has(#supplierExtraDiscount1Pct),
  .panel.full .row:has(#supplierExtraDiscount2Pct),
  .panel.full .row:has(#customerBaseDiscountPct),
  .panel.full .row:has(#customerExtraDiscount1Pct),
  .panel.full .row:has(#customerExtraDiscount2Pct),
  .panel.purchase .row:has(#supplierBaseDiscountPct),
  .panel.purchase .row:has(#supplierExtraDiscount1Pct),
  .panel.purchase .row:has(#supplierExtraDiscount2Pct),
  .panel.selling .row:has(#customerBaseDiscountPct),
  .panel.selling .row:has(#customerExtraDiscount1Pct),
  .panel.selling .row:has(#customerExtraDiscount2Pct){
    grid-template-columns:minmax(0,1fr) 48px 11px !important;
  }
  #supplierBaseDiscountPct,
  #supplierExtraDiscount1Pct,
  #supplierExtraDiscount2Pct,
  #customerBaseDiscountPct,
  #customerExtraDiscount1Pct,
  #customerExtraDiscount2Pct{
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
  }
}
/* V265 — compact Total Discount outputs on purchase and selling sides */
.row:has(#supplierTotalDiscount),
.row:has(#customerTotalDiscount){
  grid-template-columns:minmax(0,1fr) 52px 12px !important;
  column-gap:4px !important;
}
#supplierTotalDiscount,
#customerTotalDiscount{
  width:52px !important;
  min-width:52px !important;
  max-width:52px !important;
  padding-left:4px !important;
  padding-right:4px !important;
  text-align:right !important;
  box-sizing:border-box !important;
}
@media (max-width:700px){
  .row:has(#supplierTotalDiscount),
  .row:has(#customerTotalDiscount){
    grid-template-columns:minmax(0,1fr) 48px 11px !important;
  }
  #supplierTotalDiscount,
  #customerTotalDiscount{
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
  }
}
/* V293 — full-width result card after redundant companion card removal */
.section > .grid > .card:only-child{grid-column:1 / -1;}
/* Top KPI icon size. */
.kpis .kpi .metricIcon svg{
  width:20px!important;
  min-width:20px!important;
  max-width:20px!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
}
.resultPill .resultIcon svg{
  width:20px!important;
  min-width:20px!important;
  max-width:20px!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
}
/* Calculator KPIs use the same proportions as the top KPIs. */
.resultPill{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:34px 22px 24px!important;
  align-items:center!important;
  justify-items:center!important;
  align-content:center!important;
  row-gap:6px!important;
  min-height:108px!important;
  padding:10px 7px 8px!important;
  box-sizing:border-box!important;
}
.resultPill b{
  align-self:center!important;
  font-size:10px!important;
  font-weight:850!important;
  line-height:1.05!important;
  margin:0!important;
}
.resultPill span{
  align-self:center!important;
  font-size:15.5px!important;
  font-weight:900!important;
  line-height:1!important;
  margin:0!important;
  position:static!important;
  top:auto!important;
  transform:none!important;
}
.resultPill .resultIcon{
  align-self:center!important;
  justify-self:center!important;
  margin-top:0!important;
  margin-bottom:0!important;
}
.resultPill .resultIcon.marginIcon,
.resultPill .resultIcon.marginIcon svg{
  width:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  height:18px!important;
  min-height:18px!important;
  max-height:18px!important;
}
.panel.full .resultPill b,
.panel.pricecheck .resultPill b,
.panel.targets .resultPill b{
  font-size:10px!important;
  font-weight:850!important;
  line-height:1.05!important;
}
.panel.full .resultPill span,
.panel.pricecheck .resultPill span,
.panel.targets .resultPill span{
  font-size:15.5px!important;
  font-weight:900!important;
  line-height:1!important;
}
.panel.full .resultPill .resultIcon,
.panel.full .resultPill .resultIcon svg{
  width:24px!important;
  min-width:24px!important;
  max-width:24px!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
}
.panel.pricecheck .resultPill .resultIcon,
.panel.targets .resultPill .resultIcon,
.panel.pricecheck .resultPill .resultIcon svg,
.panel.targets .resultPill .resultIcon svg{
  width:22px!important;
  min-width:22px!important;
  max-width:22px!important;
  height:22px!important;
  min-height:22px!important;
  max-height:22px!important;
}
.panel.full .resultPill .resultIcon.marginIcon,
.panel.full .resultPill .resultIcon.marginIcon svg{
  width:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  height:18px!important;
  min-height:18px!important;
  max-height:18px!important;
}
.panel.pricecheck .resultPill .resultIcon.marginIcon,
.panel.targets .resultPill .resultIcon.marginIcon,
.panel.pricecheck .resultPill .resultIcon.marginIcon svg,
.panel.targets .resultPill .resultIcon.marginIcon svg{
  
  
  
  
  
  
}
.resultPill small{
  display:none!important;
}
@media(max-width:850px){
  .kpis .kpi .metricIcon svg{
    width:18px!important;
    min-width:18px!important;
    max-width:18px!important;
    height:18px!important;
    min-height:18px!important;
    max-height:18px!important;
  }
  .resultPill{
    grid-template-rows:34px 22px 24px!important;
    row-gap:5px!important;
    min-height:108px!important;
    padding:6px 4px!important;
    aspect-ratio:auto!important;
  }
  .resultPill b{
    font-size:10px!important;
    font-weight:850!important;
    line-height:1.05!important;
  }
  .resultPill span{
    font-size:15.5px!important;
    font-weight:900!important;
  }
  .panel.full .resultPill b,
  .panel.pricecheck .resultPill b,
  .panel.targets .resultPill b{
    font-size:10px!important;
    font-weight:850!important;
    line-height:1.05!important;
  }
  .panel.full .resultPill span,
  .panel.pricecheck .resultPill span,
  .panel.targets .resultPill span{
    font-size:15.5px!important;
    font-weight:900!important;
    line-height:1!important;
  }
  .panel.full .resultPill .resultIcon,
  .panel.full .resultPill .resultIcon svg{
    width:24px!important;
    min-width:24px!important;
    max-width:24px!important;
    height:24px!important;
    min-height:24px!important;
    max-height:24px!important;
  }
  .panel.pricecheck .resultPill .resultIcon,
  .panel.targets .resultPill .resultIcon,
  .panel.pricecheck .resultPill .resultIcon svg,
  .panel.targets .resultPill .resultIcon svg{
    width:22px!important;
    min-width:22px!important;
    max-width:22px!important;
    height:22px!important;
    min-height:22px!important;
    max-height:22px!important;
  }
  .panel.full .resultPill .resultIcon.marginIcon,
  .panel.full .resultPill .resultIcon.marginIcon svg{
    width:18px!important;
    min-width:18px!important;
    max-width:18px!important;
    height:18px!important;
    min-height:18px!important;
    max-height:18px!important;
  }
  .panel.pricecheck .resultPill .resultIcon.marginIcon,
  .panel.targets .resultPill .resultIcon.marginIcon,
  .panel.pricecheck .resultPill .resultIcon.marginIcon svg,
  .panel.targets .resultPill .resultIcon.marginIcon svg{
    
    
    
    
    
    
  }
}
@media(max-width:700px){
  .panel.full .resultPill b,
  .panel.pricecheck .resultPill b,
  .panel.targets .resultPill b{
    font-size:10px!important;
    font-weight:850!important;
  }
  .panel.full .resultPill span,
  .panel.pricecheck .resultPill span,
  .panel.targets .resultPill span{
    font-size:15.5px!important;
    font-weight:900!important;
  }
}
/* V315 — only Full Deal Result KPI card dimensions */
.panel.full .resultsGrid{
  grid-template-columns:repeat(3,minmax(0,112px))!important;
  justify-content:center!important;
}
.panel.full .resultsGrid .resultPill{
  width:100%!important;
  min-height:0!important;
  aspect-ratio:1 / 1!important;
  box-sizing:border-box!important;
}
@media(max-width:850px){
  .panel.full .resultsGrid{
    grid-template-columns:repeat(3,minmax(0,88px))!important;
    justify-content:center!important;
  }
  .panel.full .resultsGrid .resultPill{
    width:100%!important;
    min-height:0!important;
    aspect-ratio:1 / 1!important;
  }
}


/* V340 — Slightly stronger imperative tagline */
.tagline{
  font-weight:650!important;
}

/* BusyFella CLEAN: single size rule for Price Check and Targets KPI icons. */
#price-check .miniGrid .resultPill > .resultIcon,
#targets .targetGrid .resultPill > .resultIcon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
#price-check .miniGrid .resultPill > .resultIcon > svg,
#targets .targetGrid .resultPill > .resultIcon > svg {
  display: block !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  color: inherit !important;
  stroke: currentColor !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}