/*
  VISUAL-ONLY refinement requested after live screenshot review.
  This layer deliberately changes presentation only. It does not replace controls,
  handlers, ids, data attributes, pricing, proposal state, persistence or WhatsApp.
*/
body.work-mode{
  --nq-ink:#0b1c31;
  --nq-text:#15263b;
  --nq-muted:#6d7f93;
  --nq-line:#dce6ef;
  --nq-soft:#f7fafc;
  --nq-c:#08bce9;
  --nq-c-soft:#eafaff;
  --nq-m:#ed0a78;
  --nq-m-soft:#fff0f7;
  --nq-y:#e5bd00;
  --nq-y-soft:#fff9dc;
  --nq-green:#13a566;
  --nq-green-soft:#ecfbf4;
}

/* Keep the commercial summary visible on desktop, like the approved proposal. */
body.work-mode .layout{
  grid-template-columns:minmax(0,1fr) 360px!important;
  gap:22px!important;
  align-items:start!important;
}
body.work-mode .main{min-width:0!important}

/* Business-card configurator: same real controls, clearer commercial composition. */
body.work-mode .configurator-cards.nemi-config-v3{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:start!important;
}
body.work-mode .configurator-cards.nemi-config-v3>.cfg-group,
body.work-mode .configurator-cards.nemi-config-v3>.nemi-v3-finish-cluster{
  min-width:0!important;
  padding:17px 18px!important;
  border:1px solid var(--nq-line)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(15,36,58,.045)!important;
}
body.work-mode .configurator-cards.nemi-config-v3>.cards-group-quantity,
body.work-mode .configurator-cards.nemi-config-v3>.cards-group-format{grid-column:1/-1!important}
body.work-mode .configurator-cards.nemi-config-v3>.cards-group-sides{grid-column:span 5!important}
body.work-mode .configurator-cards.nemi-config-v3>.cards-group-paper{grid-column:span 7!important}
body.work-mode .configurator-cards.nemi-config-v3>.nemi-v3-finish-cluster,
body.work-mode .configurator-cards.nemi-config-v3>.nemi-v3-recommend,
body.work-mode .configurator-cards.nemi-config-v3>.cfg-live,
body.work-mode .configurator-cards.nemi-config-v3>.rc81d-state,
body.work-mode .configurator-cards.nemi-config-v3>.cfg-submit,
body.work-mode .configurator-cards.nemi-config-v3>.cfg-action-row{grid-column:1/-1!important}

/* Section headers: numbered visual hierarchy without changing real markup/behaviour. */
body.work-mode .configurator-cards.nemi-config-v3 .cfg-label,
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v3-cluster-label{
  align-items:center!important;
  gap:10px!important;
  margin-bottom:12px!important;
  color:var(--nq-ink)!important;
  font-size:14px!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v2-icon{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  border:0!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:950!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v2-icon svg{display:none!important}
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v2-icon:before{line-height:1!important}
body.work-mode .configurator-cards.nemi-config-v3>.cards-group-quantity .nemi-v2-icon{background:var(--nq-c)!important}
body.work-mode .configurator-cards.nemi-config-v3>.cards-group-quantity .nemi-v2-icon:before{content:"1"}
body.work-mode .configurator-cards.nemi-config-v3>.cards-group-format .nemi-v2-icon{background:var(--nq-m)!important}
body.work-mode .configurator-cards.nemi-config-v3>.cards-group-format .nemi-v2-icon:before{content:"2"}
body.work-mode .configurator-cards.nemi-config-v3>.cards-group-sides .nemi-v2-icon{background:var(--nq-y)!important;color:#574700!important}
body.work-mode .configurator-cards.nemi-config-v3>.cards-group-sides .nemi-v2-icon:before{content:"3"}
body.work-mode .configurator-cards.nemi-config-v3>.cards-group-paper .nemi-v2-icon{background:var(--nq-c)!important}
body.work-mode .configurator-cards.nemi-config-v3>.cards-group-paper .nemi-v2-icon:before{content:"4"}
body.work-mode .configurator-cards.nemi-config-v3>.nemi-v3-finish-cluster .nemi-v2-icon{background:var(--nq-m)!important}
body.work-mode .configurator-cards.nemi-config-v3>.nemi-v3-finish-cluster .nemi-v2-icon:before{content:"5"}
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v3-label-copy{gap:2px!important}
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v3-label-copy small{
  color:var(--nq-muted)!important;
  font-size:9.5px!important;
  line-height:1.35!important;
}

/* Choice controls: lighter borders, clearer selection and better scanability. */
body.work-mode .configurator-cards.nemi-config-v3 .cfg-options,
body.work-mode .configurator-cards.nemi-config-v3 .cfg-grid2{gap:8px!important}
body.work-mode .configurator-cards.nemi-config-v3 .cfg-option,
body.work-mode .configurator-cards.nemi-config-v3 .nemi-qty-chip,
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v3-more-toggle{
  min-height:52px!important;
  border-radius:13px!important;
  border:1px solid #d3dfE9!important;
  background:#fff!important;
  color:var(--nq-text)!important;
  font-size:10.5px!important;
  font-weight:850!important;
  box-shadow:0 2px 7px rgba(17,39,63,.018)!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .cfg-option:hover,
body.work-mode .configurator-cards.nemi-config-v3 .nemi-qty-chip:hover,
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v3-more-toggle:hover{
  transform:translateY(-1px)!important;
  border-color:#91cfe0!important;
  background:#fbfdff!important;
  box-shadow:0 5px 14px rgba(17,39,63,.045)!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .cfg-option.selected,
body.work-mode .configurator-cards.nemi-config-v3 .cfg-option[aria-pressed="true"]{
  background:var(--nq-c-soft)!important;
  border-color:var(--nq-c)!important;
  color:#075f79!important;
  box-shadow:inset 0 0 0 1px var(--nq-c)!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .cards-group-format .cfg-option.selected,
body.work-mode .configurator-cards.nemi-config-v3 .cards-group-format .cfg-option[aria-pressed="true"]{
  background:var(--nq-m-soft)!important;
  border-color:var(--nq-m)!important;
  color:#a20957!important;
  box-shadow:inset 0 0 0 1px var(--nq-m)!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .cards-group-sides .cfg-option.selected,
body.work-mode .configurator-cards.nemi-config-v3 .cards-group-sides .cfg-option[aria-pressed="true"],
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v3-finish-cluster .cfg-option.selected,
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v3-finish-cluster .cfg-option[aria-pressed="true"]{
  background:var(--nq-y-soft)!important;
  border-color:var(--nq-y)!important;
  color:#6d5900!important;
  box-shadow:inset 0 0 0 1px var(--nq-y)!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .cfg-option .cfg-price{
  color:#7a8999!important;
  font-size:8px!important;
  font-weight:700!important;
}

/* Quantity is the first task: presets stay compact and manual entry is explicit. */
body.work-mode .configurator-cards.nemi-config-v3 .nemi-qty-shell{
  grid-template-columns:minmax(0,1fr) 190px!important;
  gap:9px!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .nemi-qty-chip.active{
  background:var(--nq-c-soft)!important;
  border-color:var(--nq-c)!important;
  color:#075f79!important;
  box-shadow:inset 0 0 0 1px var(--nq-c)!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .nemi-qty-shell>.cfg-input,
body.work-mode .configurator-cards.nemi-config-v3 .nemi-qty-shell>input{
  min-height:52px!important;
  border-radius:13px!important;
  border:1px solid #d3dfe9!important;
  background:#fff!important;
  padding:0 13px!important;
  color:var(--nq-text)!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .nemi-qty-shell>.cfg-input:focus,
body.work-mode .configurator-cards.nemi-config-v3 .nemi-qty-shell>input:focus{
  outline:0!important;
  border-color:var(--nq-c)!important;
  box-shadow:0 0 0 3px rgba(8,188,233,.11)!important;
}

/* Cards-specific grids preserve all five formats without text overlap. */
body.work-mode .configurator-cards.nemi-config-v3 .cards-group-format .cfg-options,
body.work-mode .configurator-cards.nemi-config-v3 .cards-group-format .cfg-options.cards-five{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .cards-group-paper .cfg-options{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .cards-group-sides .cfg-options{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* Finishes remain the canonical merged V3 control, just presented as one optional card. */
body.work-mode .configurator-cards.nemi-config-v3>.nemi-v3-finish-cluster{
  background:linear-gradient(180deg,#fff 0%,#fffdf5 100%)!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v3-finish-main{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:8px!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v3-finish-more.open{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v3-more-toggle{
  border-style:dashed!important;
  color:#53687d!important;
  background:#f8fafc!important;
}

/* Optional guidance becomes a quiet assistive strip, not another form. */
body.work-mode .configurator-cards.nemi-config-v3>.nemi-v3-recommend{
  padding:13px 15px!important;
  border:1px solid #f1d7e4!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#fff6fa,#f8fcff)!important;
  box-shadow:none!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v3-rec-icon{
  width:32px!important;height:32px!important;
  background:#ffe2ef!important;color:var(--nq-m)!important;
}
body.work-mode .configurator-cards.nemi-config-v3 .nemi-v3-rec-action{
  border-color:#efc3d8!important;
  color:#a50a57!important;
  background:#fff!important;
}

/* Price / closure: hierarchy follows the approved proposal while keeping real handlers. */
body.work-mode .configurator-cards.nemi-config-v3>.cfg-live,
body.work-mode .configurator-cards.nemi-config-v3>.rc81d-state{
  min-height:66px!important;
  padding:14px 16px!important;
  border-radius:16px!important;
  border:1px solid #cdebf4!important;
  background:linear-gradient(135deg,#edfaff,#f8fdff)!important;
  color:var(--nq-ink)!important;
  box-shadow:none!important;
}
body.work-mode .configurator-cards.nemi-config-v3>.cfg-live:not(.pending){background:linear-gradient(135deg,#e8f9ff,#f8fdff)!important;color:var(--nq-ink)!important}
body.work-mode .configurator-cards.nemi-config-v3>.cfg-live b,
body.work-mode .configurator-cards.nemi-config-v3>.cfg-live:not(.pending) b{color:var(--nq-ink)!important;font-size:16px!important}
body.work-mode .configurator-cards.nemi-config-v3>.cfg-live span,
body.work-mode .configurator-cards.nemi-config-v3>.cfg-live:not(.pending) span{color:#62778d!important}
body.work-mode .configurator-cards.nemi-config-v3>.cfg-submit{
  min-height:50px!important;
  border-radius:13px!important;
  border:1px solid #08add7!important;
  background:linear-gradient(135deg,#08bee9,#08abd5)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(8,174,216,.15)!important;
}
body.work-mode .configurator-cards.nemi-config-v3>.cfg-submit:before{display:none!important}
body.work-mode .configurator-cards.nemi-config-v3>.cfg-action-row{
  grid-template-columns:minmax(110px,.55fr) minmax(180px,1fr) minmax(190px,1fr)!important;
  gap:8px!important;
}
body.work-mode .configurator-cards.nemi-config-v3>.cfg-action-row>button{
  min-height:47px!important;
  border-radius:12px!important;
  font-size:9.5px!important;
  font-weight:900!important;
}
body.work-mode .configurator-cards.nemi-config-v3>.cfg-action-row>.cfg-save{
  background:#fff!important;
  border:1px solid #d6e0e9!important;
  color:#24364b!important;
}
body.work-mode .configurator-cards.nemi-config-v3>.cfg-action-row>.nemi-inline-wa{
  background:var(--nq-green-soft)!important;
  border:1px solid #8addb8!important;
  color:#087847!important;
  box-shadow:none!important;
}
body.work-mode .configurator-cards.nemi-config-v3>.cfg-action-row>.cfg-finish{
  background:var(--nq-ink)!important;
  border:1px solid var(--nq-ink)!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* Existing proposal sidebar becomes the sticky quote summary; no new summary state is created. */
body.work-mode #propuesta.side{
  position:sticky!important;
  top:82px!important;
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  max-height:calc(100vh - 98px)!important;
  padding:18px!important;
  border:1px solid #dce6ef!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 14px 34px rgba(16,37,58,.07)!important;
  overflow:hidden!important;
}
body.work-mode #propuesta>.eyebrow{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  color:#5f758b!important;
  font-size:8px!important;
  letter-spacing:.13em!important;
}
body.work-mode #propuesta>.eyebrow:before{
  content:"";
  width:9px;height:9px;border-radius:3px;
  background:var(--nq-c);
  box-shadow:7px 0 0 -2px var(--nq-m),14px 0 0 -2px var(--nq-y);
  margin-right:9px;
}
body.work-mode #propuesta>h2{
  margin:7px 0 5px!important;
  color:var(--nq-ink)!important;
  font-size:22px!important;
  letter-spacing:-.035em!important;
}
body.work-mode #propuesta>#metric{
  margin:0 0 12px!important;
  color:#718296!important;
  font-size:9px!important;
  line-height:1.45!important;
}
body.work-mode #propuesta .total{
  margin:0 0 10px!important;
  padding:15px!important;
  border:1px solid #cceaf4!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#eefaff,#f8fdff)!important;
  color:var(--nq-ink)!important;
}
body.work-mode #propuesta .total:before{
  width:54px!important;height:4px!important;
  margin-bottom:10px!important;
  background:linear-gradient(90deg,var(--nq-c) 0 34%,var(--nq-m) 34% 67%,var(--nq-y) 67%)!important;
}
body.work-mode #propuesta .total span{color:#6f8194!important;font-size:8px!important}
body.work-mode #propuesta .total b{color:var(--nq-ink)!important;font-size:31px!important;margin:5px 0!important}
body.work-mode #propuesta .total small{color:#708298!important;font-size:8px!important}
body.work-mode #propuesta .quote-actions{gap:7px!important;margin-bottom:11px!important}
body.work-mode #propuesta .quote-actions button{
  min-height:44px!important;
  border-radius:11px!important;
  justify-content:center!important;
  padding:0 12px!important;
  font-size:9.5px!important;
}
body.work-mode #propuesta .quote-actions .primary{
  background:linear-gradient(135deg,#08bee9,#08abd5)!important;
  border-color:#08abd5!important;
  color:#fff!important;
}
body.work-mode #propuesta .quote-actions .ghost{
  background:var(--nq-green-soft)!important;
  color:#087847!important;
  border:1px solid #91dfbc!important;
}
body.work-mode #propuesta .nemi-proposal-lines-head{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  padding:10px 1px 8px!important;
  border-top:1px solid #edf1f5!important;
  background:#fff!important;
  color:#5e7186!important;
}
body.work-mode #propuesta .log{
  flex:1 1 auto!important;
  min-height:76px!important;
  max-height:none!important;
  margin-top:0!important;
  padding-top:0!important;
  overflow:auto!important;
}
body.work-mode #propuesta .log-item{
  border:1px solid #e1e8ef!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:none!important;
}
body.work-mode #propuesta .log-item.active-item{
  border-color:#9edfec!important;
  background:#f7fdff!important;
  box-shadow:inset 3px 0 0 var(--nq-c)!important;
}

@media(max-width:1180px){
  body.work-mode .layout{grid-template-columns:1fr!important}
  body.work-mode #propuesta.side{position:static!important;max-height:none!important;overflow:visible!important}
  body.work-mode .configurator-cards.nemi-config-v3>.cards-group-sides,
  body.work-mode .configurator-cards.nemi-config-v3>.cards-group-paper{grid-column:1/-1!important}
  body.work-mode .configurator-cards.nemi-config-v3 .cards-group-paper .cfg-options{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:760px){
  body.work-mode .configurator-cards.nemi-config-v3{grid-template-columns:1fr!important;gap:10px!important}
  body.work-mode .configurator-cards.nemi-config-v3>.cfg-group,
  body.work-mode .configurator-cards.nemi-config-v3>.nemi-v3-finish-cluster{grid-column:1!important;padding:14px!important;border-radius:16px!important}
  body.work-mode .configurator-cards.nemi-config-v3 .nemi-qty-shell{grid-template-columns:1fr!important}
  body.work-mode .configurator-cards.nemi-config-v3 .nemi-qty-shell>.cfg-input,
  body.work-mode .configurator-cards.nemi-config-v3 .nemi-qty-shell>input{grid-column:1!important;grid-row:1!important}
  body.work-mode .configurator-cards.nemi-config-v3 .nemi-qty-quick{grid-column:1!important;grid-row:2!important}
  body.work-mode .configurator-cards.nemi-config-v3 .cards-group-format .cfg-options,
  body.work-mode .configurator-cards.nemi-config-v3 .cards-group-format .cfg-options.cards-five,
  body.work-mode .configurator-cards.nemi-config-v3 .cards-group-paper .cfg-options,
  body.work-mode .configurator-cards.nemi-config-v3 .nemi-v3-finish-main,
  body.work-mode .configurator-cards.nemi-config-v3 .nemi-v3-finish-more.open{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.work-mode .configurator-cards.nemi-config-v3>.cfg-action-row{grid-template-columns:1fr!important}
}
@media(max-width:390px){
  body.work-mode .configurator-cards.nemi-config-v3 .nemi-qty-quick{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.work-mode .configurator-cards.nemi-config-v3 .cfg-option,
  body.work-mode .configurator-cards.nemi-config-v3 .nemi-qty-chip{min-height:48px!important;font-size:9.5px!important}
}