:root{
  --bg:#f4f4f2;
  --card:#fff;
  --text:#171717;
  --muted:#74746e;
  --line:#d7d7d1;
  --soft:#efefeb;
  --header-h:122px;
  --preview-w:clamp(570px,38vw,720px);
  font-family:Inter,Segoe UI,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;max-width:100%}
body{background:var(--bg);color:var(--text)}

/* FIXO de verdade: não depende de position:sticky */
header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:#eef1f2;
  backdrop-filter:blur(8px);
  border-bottom:1px solid #cfd4d5;
  box-shadow:0 2px 10px rgba(0,0,0,.035);
  padding:14px 18px 12px;
}
.header-inner{width:min(1540px,100%);margin:auto}
h1{font-size:21px;line-height:1.1;margin:0}
.subtitle{font-size:12px;color:var(--muted);margin-top:4px}

.filters{
  display:grid;
  grid-template-columns:minmax(260px,2.1fr) repeat(4,minmax(125px,1fr)) auto;
  gap:8px;margin-top:12px;
}
input,select,button{
  font:inherit;border:1px solid #c9c9c3;border-radius:9px;
  background:#fff;padding:10px 11px;min-width:0;max-width:100%;
}
input,select{width:100%}
button{cursor:pointer;font-weight:650;white-space:nowrap}
button:hover{background:#f5f5f2}

/* conteúdo principal sempre começa abaixo do cabeçalho fixo */
.page{
  width:min(1540px,100%);
  margin:auto;
  padding:18px;
  padding-top:calc(var(--header-h) + 18px);
}

/* desktop: reserva área real para o preview fixo */
.workspace{
  position:relative;
  min-height:100vh;
}
.left-col{
  min-width:0;
  margin-right:calc(var(--preview-w) + 18px);
}

.panel,.look-stage{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
}
.panel{padding:15px;margin-bottom:18px}
.panel h2,.look-stage h2{font-size:16px;margin:0 0 12px}

.slot-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px 12px;
}
.slot{min-width:0;display:flex;flex-direction:column;gap:5px}
.slot label{
  font-size:10px;font-weight:800;color:#50504b;
  text-transform:uppercase;letter-spacing:.045em
}
.required label::after{content:" · principal";font-weight:500;color:#8c8c86}
.optional label::after{content:" · opcional";font-weight:500;color:#8c8c86}

.code-entry{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;margin-top:13px
}
.help{font-size:11px;color:var(--muted);line-height:1.45;margin-top:9px}
.legend{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.legend span{
  font-size:9px;border:1px solid var(--line);border-radius:999px;
  padding:3px 6px;background:#fafaf8;
}

/* PREVIEW FIXO: fica sempre visível enquanto o catálogo rola */
.fixed-look{
  position:fixed;
  z-index:80;
  min-height:0;
  width:var(--preview-w);
  right:max(8px, calc((100vw - 1540px)/2 + 8px));
  top:calc(var(--header-h) + 8px);
  bottom:8px;
}
.look-stage{
  position:relative;
  height:100%;
  min-height:0;
  padding:14px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.look-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-bottom:10px;flex:0 0 auto
}
.look-head h2{margin:0}
.look-summary{font-size:10px;color:var(--muted);text-align:right}
.stage-wrap{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  border:1px solid var(--soft);
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.98) 0 36%, rgba(248,248,245,.94) 72%, rgba(242,242,238,.96) 100%);
}

.look-slot{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.look-slot img{
  display:none;object-fit:contain;width:auto;height:auto;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.10));
}
.look-slot.has-item img{display:block}
.empty-label{
  font-size:9px;text-transform:uppercase;letter-spacing:.11em;color:#b1b1aa
}
.look-slot.has-item .empty-label{display:none}
.stage-code{
  position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:9px;font-weight:750;color:#666
}

/* Layout do look: mais compacto e melhor aproveitado */
.stage-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:38% 42% 20%;
  gap:8px 12px;
  padding:14px 16px 44px;
}
.stage-wrap.has-side-optionals{
  grid-template-columns:minmax(0,1fr) 150px;
}
.stage-wrap.one-upper-optional{
  grid-template-columns:minmax(0,1fr) 150px;
}

.look-slot,
.side-slot{
  position:relative;
  left:auto;
  top:auto;
  right:auto;
  transform:none;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

.look-slot img,
.side-slot img{
  display:none;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 6px 9px rgba(0,0,0,.09));
}
.look-slot.has-item img,
.side-slot.has-item img{display:block}

.empty-label{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#b1b1aa;
}
.look-slot.has-item .empty-label,
.side-slot.has-item .empty-label{display:none}

.stage-code{
  position:absolute;
  bottom:2px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  max-width:95%;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:8.5px;
  font-weight:750;
  color:#666;
}

/* Opcionais à direita, sem roubar uma faixa inteira do look */
#headwearCell,
#accessoryCell,
#bagCell{
  display:none;
  width:100%;
  border:1px solid #ecece7;
  border-radius:12px;
  background:rgba(255,255,255,.55);
  padding:8px;
}
#headwearCell.has-item,
#accessoryCell.has-item,
#bagCell.has-item{
  display:flex;
  grid-column:2;
}
#headwearCell{grid-row:1}
#accessoryCell{grid-row:2}
#bagCell{grid-row:3}

.stage-wrap.one-upper-optional #headwearCell.has-item,
.stage-wrap.one-upper-optional #accessoryCell.has-item,
.stage-wrap.one-upper-optional #bagCell.has-item{
  grid-row:1 / span 3;
  align-self:center;
  min-height:160px;
}
#headwearCell img,
#accessoryCell img,
#bagCell img{
  max-width:120px;
  max-height:82%;
}

/* Coluna principal */
#topCell{
  grid-column:1;
  grid-row:1;
}
#topPair{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
#topCell img{
  position:static;
  max-height:96%;
  max-width:340px;
}
#topCell.two-items #topImg,
#topCell.two-items #outerwearImg{
  max-width:230px;
  max-height:94%;
}
#topCell.top-compact #topImg{
  max-width:310px;
  max-height:100%;
}
#topCell.outer-only #outerwearImg{
  max-width:320px;
  max-height:98%;
}

#bottomCell{
  grid-column:1;
  grid-row:2;
}
#bottomCell img{
  max-width:330px;
  max-height:98%;
}
#bottomCell.bottom-short img{
  max-width:250px;
  max-height:68%;
}
#bottomCell.bottom-pants img{
  max-width:360px;
  max-height:100%;
}

#footwearCell{
  grid-column:1;
  grid-row:3;
}
#footwearCell img{
  max-width:265px;
  max-height:86%;
}

.stage-wrap.has-side-optionals #topCell,
.stage-wrap.has-side-optionals #bottomCell,
.stage-wrap.has-side-optionals #footwearCell{
  padding-right:6px;
}

/* Quando não há opcionais, expande a peça principal */
.stage-wrap:not(.has-side-optionals) #topCell img{max-width:380px}
.stage-wrap:not(.has-side-optionals) #topCell.two-items #topImg,
.stage-wrap:not(.has-side-optionals) #topCell.two-items #outerwearImg{
  max-width:245px;
}
.stage-wrap:not(.has-side-optionals) #bottomCell img{max-width:360px}
.stage-wrap:not(.has-side-optionals) #footwearCell img{max-width:300px}

/* as antigas linhas-guia deixam de ser necessárias */
.guide{display:none}

/* botão limpar continua no canto do quadro */
.clear-stage{
  position:absolute;
  right:8px;
  bottom:8px;
  width:auto;
  padding:6px 8px;
  font-size:9px;
  background:rgba(255,255,255,.95);
  z-index:30;
}

/* ============================================================ */
/* CATÁLOGO */
.gallery-head{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  margin:0 0 10px
}
.gallery-head h2{font-size:16px;margin:0}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(205px,1fr));
  gap:12px
}
.card{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;min-width:0;
  transition:border-color .15s,box-shadow .15s
}
.card:hover{border-color:#b9b9b2;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.card.is-selected{border-color:#222;box-shadow:0 0 0 1px #222}
.imagebox{
  height:220px;background:#efefec;
  display:flex;align-items:center;justify-content:center
}
.imagebox img{width:100%;height:100%;object-fit:contain}
.content{padding:10px}
.code{font-weight:800;font-size:16px}
.alias{font-size:10px;color:#777;margin-left:5px}
.type{font-size:13px;font-weight:650;margin-top:2px}
.desc{font-size:11px;color:#494949;line-height:1.35;margin-top:5px}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.tag{
  font-size:9px;border:1px solid var(--line);border-radius:999px;
  padding:3px 5px;background:#fafafa
}
.addbtn{width:100%;margin-top:8px;padding:7px;font-size:11px}
.addbtn.selected{background:#111;color:#fff;border-color:#111}

/* abaixo desta largura, deixa de usar sidebar fixa e volta para empilhado */
@media(max-width:1120px){
  :root{--preview-w:clamp(520px,40vw,620px)}
  .filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .filters input:first-child{grid-column:1/-1}
  .reset-filters{width:100%}
  .slot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:900px){
  header{position:static}
  .page{padding-top:18px}
  .left-col{margin-right:0}
  .fixed-look{
    position:relative;
    width:100%;
    right:auto;top:auto;bottom:auto;
    margin:0 0 18px;
  }
  .workspace{
    display:flex;
    flex-direction:column;
  }
  .fixed-look{order:-1}
  .look-stage{height:auto}
  .stage-wrap{height:min(760px,82vh);min-height:620px;flex:none}
}

@media(max-width:720px){
  .page{padding:10px}
  .filters{grid-template-columns:1fr 1fr}
  .filters input:first-child{grid-column:1/-1}
  .reset-filters{grid-column:1/-1}
  .slot-grid{grid-template-columns:1fr}
  .code-entry{grid-template-columns:1fr}
  .code-entry button{width:100%}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .imagebox{height:180px}
}

.reset-filters{
  width:auto;
  min-width:112px;
  background:#e2e6e7;
  border-color:#c6ccce;
}
.reset-filters:hover{background:#d8dddf}

/* Calculadora de harmonias compacta dentro do cabeçalho */
.harmony-panel{
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid rgba(120,128,130,.22);
}
.harmony-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
}
.harmony-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.045em;
  color:#4e5658;
}
.base-chip{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  font-weight:600;
  text-transform:none;
  letter-spacing:0;
  color:#676d6f;
}
.base-dot{
  width:14px;height:14px;border-radius:50%;
  border:1px solid rgba(0,0,0,.15);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.harmony-help{
  font-size:10px;
  color:#72797b;
}
.harmony-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
}
.harmony-card{
  min-width:0;
  padding:7px 8px 6px;
  border:1px solid rgba(110,118,120,.22);
  border-radius:8px;
  background:rgba(255,255,255,.68);
}
.harmony-name{
  font-size:9px;
  font-weight:800;
  color:#4b5153;
  margin-bottom:5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.swatches{
  display:flex;
  height:24px;
  overflow:hidden;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.08);
}
.swatch{
  flex:1;
  min-width:0;
  border:0;
  border-radius:0;
  padding:0;
  cursor:pointer;
}
.swatch:hover{
  outline:2px solid rgba(0,0,0,.5);
  outline-offset:-2px;
}
.harmony-caption{
  margin-top:4px;
  font-size:8.5px;
  color:#747b7d;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.harmony-empty{
  grid-column:1/-1;
  min-height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(110,118,120,.28);
  border-radius:8px;
  color:#788083;
  font-size:10px;
  background:rgba(255,255,255,.4);
}
.harmony-neutral{
  grid-column:1/-1;
  min-height:43px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border:1px dashed rgba(110,118,120,.28);
  border-radius:8px;
  color:#666d6f;
  font-size:10px;
  background:rgba(255,255,255,.4);
}
@media(max-width:1280px){
  .harmony-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .harmony-panel{display:none}
  .reset-filters{min-width:0;width:100%}
}


/* Conta-gotas / amostra livre */
.harmony-actions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
}
.eyedropper-btn,.clear-sample-btn{
  width:auto;
  padding:5px 8px;
  border-radius:7px;
  font-size:9px;
  line-height:1;
  background:#fff;
}
.eyedropper-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.eyedropper-btn svg{
  width:12px;height:12px;
  stroke:currentColor;
}
.manual-color{
  width:28px;
  height:25px;
  padding:2px;
  border-radius:7px;
  cursor:pointer;
  background:#fff;
}
.clear-sample-btn{display:none}
.sample-active .clear-sample-btn{display:inline-flex}
.eyedropper-note{
  font-size:9px;
  color:#72797b;
  white-space:nowrap;
}

/* Remoção individual diretamente no look montado */
.look-slot,.side-slot{overflow:visible}
.remove-piece{
  display:none;
  position:absolute;
  z-index:20;
  top:2px;
  right:2px;
  width:24px;
  height:24px;
  padding:0;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.94);
  color:#222;
  font-size:16px;
  font-weight:700;
  line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.look-slot.has-item > .remove-piece,
.side-slot.has-item > .remove-piece{
  display:flex;
}
.remove-piece:hover{
  background:#111;
  color:#fff;
  border-color:#111;
}
.top-remove-group{
  position:absolute;
  z-index:25;
  top:2px;
  right:2px;
  display:flex;
  gap:4px;
}
.top-remove-group .remove-pill{
  display:none;
  width:auto;
  padding:4px 7px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.94);
  color:#222;
  font-size:8px;
  font-weight:800;
  line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.07);
}
.top-remove-group .remove-pill:hover{
  background:#111;
  color:#fff;
  border-color:#111;
}
@media(max-width:900px){
  .harmony-actions{margin-left:0}
  .eyedropper-note{display:none}
}


/* Looks salvos */
.look-head-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.look-action-btn{
  width:auto;
  padding:6px 8px;
  font-size:9px;
  border-radius:7px;
  background:#fff;
}
.look-action-btn.primary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
  box-shadow:0 2px 8px rgba(37,99,235,.22);
}
.look-action-btn.primary:hover{
  background:#1d4ed8;
  border-color:#1d4ed8;
}
.look-action-btn.primary svg{
  width:13px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.saved-looks-panel{
  display:none;
  position:absolute;
  z-index:60;
  top:52px;
  left:14px;
  right:14px;
  margin:0;
  padding:9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f8f8f6;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
  max-height:230px;
  overflow:auto;
}
.saved-looks-panel.open{display:block}
.saved-looks-empty{
  font-size:10px;
  color:var(--muted);
  text-align:center;
  padding:12px 4px;
}
.saved-look-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:6px;
  align-items:center;
  padding:6px 0;
  border-bottom:1px solid #e4e4df;
}
.saved-look-row:last-child{border-bottom:0}
.saved-look-main{
  min-width:0;
}
.saved-look-name{
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.saved-look-codes{
  margin-top:2px;
  font-size:8.5px;
  color:#777;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.saved-look-load,
.saved-look-delete{
  width:auto;
  padding:5px 7px;
  border-radius:6px;
  font-size:8.5px;
}
.saved-look-delete{
  color:#8a1f1f;
}
.saved-look-delete:hover{
  background:#8a1f1f;
  color:white;
  border-color:#8a1f1f;
}
.saved-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  background:#ededE8;
  font-size:8px;
  font-weight:800;
}
.save-toast{
  position:absolute;
  left:50%;
  top:48px;
  transform:translateX(-50%) translateY(-6px);
  z-index:40;
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
  background:#111;
  color:white;
  font-size:9px;
  padding:6px 9px;
  border-radius:999px;
  box-shadow:0 5px 18px rgba(0,0,0,.16);
}
.save-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}


.harmony-mode{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:2px;
  border:1px solid rgba(110,118,120,.24);
  border-radius:8px;
  background:rgba(255,255,255,.62);
}
.harmony-mode button{
  width:auto;
  min-width:46px;
  padding:4px 7px;
  border:0;
  border-radius:6px;
  background:transparent;
  font-size:8.5px;
  font-weight:800;
  color:#6a7173;
}
.harmony-mode button.active{
  background:#111;
  color:#fff;
}
.harmony-mode-label{
  font-size:8px;
  color:#777e80;
  margin-right:3px;
}


.category-bar-wrap{
  margin-top:10px;
}
.category-bar-title{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#5d6568;
  margin-bottom:6px;
}
.category-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.category-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:auto;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(110,118,120,.24);
  color:#4a5154;
}
.category-pill:hover{
  background:#fff;
  border-color:#9ea5a8;
}
.category-pill.active{
  background:#111;
  color:#fff;
  border-color:#111;
}
.category-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:rgba(0,0,0,.055);
  font-size:14px;
  line-height:1;
}
.category-pill.active .category-icon{
  background:rgba(255,255,255,.18);
}
.category-label{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.05;
}
.category-name{
  font-size:10px;
  font-weight:800;
}
.category-count{
  font-size:8px;
  opacity:.82;
}
@media(max-width:900px){
  .category-bar{gap:6px}
  .category-pill{
    padding:7px 9px;
    gap:6px;
  }
  .category-icon{
    width:22px;height:22px;font-size:13px;
  }
}


/* Estado visual dos seletores do look */
.slot select{
  transition:background-color .14s,border-color .14s,box-shadow .14s,color .14s;
  background:#fff;
  color:#74746e;
  border-color:#c9c9c3;
}
.slot select.has-value{
  background:#eaf3ff;
  border-color:#6e9ee8;
  color:#17365f;
  font-weight:700;
  box-shadow:0 0 0 1px rgba(71,122,196,.08);
}
.slot.optional select.has-value{
  background:#eef8f0;
  border-color:#79a989;
  color:#244b31;
}


/* Itens opcionais não ocupam nem exibem posição quando vazios */
#headwearCell.optional-empty,
#accessoryCell.optional-empty,
#bagCell.optional-empty,
#beltCell.optional-empty{
  display:none;
}

/* linha de opcionais recebe pequenos cartões apenas quando há peça */
#headwearCell.has-item,
#accessoryCell.has-item,
#bagCell.has-item{
  align-self:stretch;
  justify-self:stretch;
  border:1px solid rgba(170,170,165,.18);
  border-radius:10px;
  background:rgba(255,255,255,.38);
}

/* Quando só existe um opcional, ele continua compacto e centralizado visualmente */
.stage-wrap.one-upper-optional #headwearCell.has-item,
.stage-wrap.one-upper-optional #accessoryCell.has-item,
.stage-wrap.one-upper-optional #bagCell.has-item{
  max-width:150px;
  justify-self:center;
}

/* mais presença para o conjunto principal */
#topCell img{
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.10));
}
#bottomCell img{
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.09));
}
#footwearCell img{
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.08));
}


/* Sem a faixa de opcionais, a roupa principal aproveita melhor o quadro */
.stage-wrap:not(:has(#headwearCell.has-item)):not(:has(#accessoryCell.has-item)):not(:has(#bagCell.has-item)) #topCell img{
  max-height:100%;
}
.stage-wrap:not(:has(#headwearCell.has-item)):not(:has(#accessoryCell.has-item)):not(:has(#bagCell.has-item)) #bottomCell img{
  max-height:99%;
}


/* ===== CALENDÁRIO DE LOOKS — adicionado sobre a base estável v15 ===== */
.look-action-btn.wear-register,
.look-action-btn.calendar-open{
  display:inline-flex;align-items:center;gap:5px;
}
.look-action-btn.wear-register{
  background:#167a45;color:#fff;border-color:#167a45;
  box-shadow:0 2px 8px rgba(22,122,69,.17);
}
.look-action-btn.wear-register:hover{background:#12683b;border-color:#12683b}
.look-action-btn.calendar-open{background:#fff;color:#31563a;border-color:#b9cabc}
.look-action-btn.calendar-open:hover{background:#edf6ef}
.look-action-btn.wear-register svg,
.look-action-btn.calendar-open svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.wear-modal{display:none;position:fixed;inset:0;z-index:500;background:rgba(14,16,15,.46);backdrop-filter:blur(3px);padding:20px}
.wear-modal.open{display:flex;align-items:center;justify-content:center}
.wear-dialog{width:min(1120px,97vw);height:min(810px,94vh);display:grid;grid-template-rows:auto 1fr;background:#f7f7f4;border:1px solid #d6d6d0;border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.25)}
.wear-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;background:#fff;border-bottom:1px solid var(--line)}
.wear-head-main{display:flex;align-items:center;gap:9px}.wear-head-main svg{width:18px;height:18px;fill:none;stroke:#167a45;stroke-width:1.8}
.wear-head h2{margin:0;font-size:16px}.wear-head small{display:block;margin-top:2px;font-size:9px;color:var(--muted)}
.wear-close{width:32px;height:32px;padding:0;border-radius:999px;font-size:19px;line-height:1}
.wear-body{min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.72fr)}
.wear-calendar-side{min-width:0;min-height:0;padding:13px;overflow:auto}
.wear-form-side{min-width:0;min-height:0;padding:13px;border-left:1px solid var(--line);background:#fff;overflow:auto}
.wear-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}.wear-toolbar-left{display:flex;align-items:center;gap:6px}
.wear-nav{width:31px;height:31px;padding:0;font-size:17px}.wear-month{min-width:155px;text-align:center;font-size:13px;font-weight:800}.wear-today{width:auto;padding:6px 9px;font-size:9px}
.wear-weekdays,.wear-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.wear-weekdays{border:1px solid var(--line);border-bottom:0;border-radius:9px 9px 0 0;overflow:hidden}
.wear-weekdays div{padding:6px 3px;text-align:center;background:#ecece8;font-size:8px;font-weight:800;color:#666;text-transform:uppercase}
.wear-grid{border-left:1px solid var(--line);border-top:1px solid var(--line)}
.wear-day{min-height:99px;padding:5px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;cursor:pointer;overflow:hidden}
.wear-day:hover{background:#fafcf9}.wear-day.outside{background:#f1f1ee;color:#aaa}.wear-day.today{box-shadow:inset 0 0 0 2px #167a45}.wear-day.selected{background:#eef7f0}
.wear-day-num{font-size:8.5px;font-weight:800;margin-bottom:4px}
.wear-chip{display:block;width:100%;margin-top:3px;padding:4px 5px;border:0;border-radius:5px;background:#dcefe1;color:#25472e;text-align:left;font-size:7.5px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.wear-chip.past{background:#e7e7e3;color:#555}.wear-chip.today-event{background:#c9e9d1;color:#174d29}.wear-more{margin-top:3px;font-size:7px;color:#777}
.wear-legend{display:flex;gap:11px;margin-top:8px;font-size:8px;color:#777}.wear-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px}.wear-dot.past{background:#c5c5c0}.wear-dot.future{background:#75ad84}.wear-dot.today{background:#2d8c4e}
.wear-form-title{font-size:13px;font-weight:800;margin-bottom:9px}.wear-form{display:grid;gap:8px}.wear-field{display:grid;gap:4px}.wear-field label{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#555}
.wear-field input,.wear-field textarea{width:100%;padding:8px 9px;border:1px solid #c9c9c3;border-radius:8px;background:#fff;font:inherit}.wear-field textarea{min-height:56px;resize:vertical}
.wear-look-box{padding:8px;border:1px solid var(--line);border-radius:8px;background:#f7f7f4}.wear-look-box b{display:block;font-size:8.5px;text-transform:uppercase;color:#666;margin-bottom:4px}.wear-look-codes{font-size:8.5px;line-height:1.35;color:#444;word-break:break-word}
.wear-warning{display:none;padding:8px;border:1px solid #deb978;border-radius:8px;background:#fff5df;color:#704b12;font-size:8.5px;line-height:1.35}.wear-warning.show{display:block}
.wear-actions{display:flex;gap:6px;flex-wrap:wrap}.wear-actions button{width:auto;font-size:9px}.wear-save{background:#167a45;color:#fff;border-color:#167a45}.wear-save:hover{background:#12683b}.wear-delete{color:#8a1f1f}.wear-delete:hover{background:#8a1f1f;color:#fff;border-color:#8a1f1f}.wear-delete[hidden]{display:none}
.wear-help{padding:7px 8px;border-radius:8px;background:#f0f3f0;color:#5d655f;font-size:8.5px;line-height:1.35}
.wear-day-list{margin-top:11px}.wear-day-list h3{margin:0 0 6px;font-size:10px}.wear-event-row{padding:7px;border:1px solid var(--line);border-radius:8px;background:#fafaf8;margin-bottom:6px}.wear-event-row strong{display:block;font-size:9px}.wear-event-row small{display:block;margin-top:2px;font-size:7.8px;color:#777}.wear-row-actions{display:flex;gap:5px;margin-top:5px}.wear-row-actions button{width:auto;padding:4px 6px;font-size:7.8px}
@media(max-width:900px){.wear-modal{padding:7px}.wear-dialog{width:100%;height:97vh}.wear-body{grid-template-columns:1fr;overflow:auto}.wear-form-side{border-left:0;border-top:1px solid var(--line)}.wear-day{min-height:78px}}


/* ===== Histórico de uso / previews ===== */
.wear-look-preview{
  min-height:92px;
  margin:2px 0 7px;
}
.wear-look-stats{
  margin-top:6px;
  font-size:8.5px;
  line-height:1.4;
  color:#4d6253;
}
.mini-look{
  width:100%;
  min-height:88px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:end;
  gap:5px;
  padding:6px;
  border:1px solid #e0e0db;
  border-radius:8px;
  background:linear-gradient(180deg,#fff,#f5f5f2);
}
.mini-look.compact{
  width:100%;
  min-width:0;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:4px;
  padding:0;
  border:0;
  background:transparent;
}
.mini-piece{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.mini-piece img{
  max-width:100%;
  max-height:76px;
  object-fit:contain;
}
.mini-look.compact .mini-piece{
  min-height:58px;
  padding:4px;
  border:1px solid #e7e7e2;
  border-radius:8px;
  background:#fff;
}
.mini-look.compact .mini-piece img{
  max-height:48px;
}
.mini-piece.optional img{
  max-height:50px;
}
.mini-code{
  position:absolute;
  left:50%;
  bottom:-1px;
  transform:translateX(-50%);
  font-size:6px;
  line-height:1;
  color:#666;
  white-space:nowrap;
}
.mini-look.compact .mini-code{display:none}
.mini-extra{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:8px;
  font-weight:800;
  color:#fff;
  background:#111;
  box-shadow:0 2px 5px rgba(0,0,0,.18);
}

.wear-event-row{
  display:grid;
  grid-template-columns:116px minmax(0,1fr);
  gap:8px;
  align-items:center;
}
.wear-event-info{min-width:0}
.wear-event-info strong{
  display:block;
  font-size:9px;
}
.wear-event-info small{
  display:block;
  margin-top:2px;
  font-size:7.8px;
  color:#777;
}
.wear-row-actions{grid-column:2}

.saved-look-usage{
  margin-top:3px;
  font-size:8px;
  color:#54705b;
}

/* cartão flutuante ao selecionar uma peça */
.usage-popover{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:700;
  width:min(360px,calc(100vw - 36px));
  display:none;
  padding:12px;
  border:1px solid #cfd7d1;
  border-radius:12px;
  background:rgba(255,255,255,.985);
  box-shadow:0 16px 42px rgba(0,0,0,.18);
  backdrop-filter:blur(8px);
}
.usage-popover.show{
  display:block;
  animation:usageIn .16s ease-out;
}
@keyframes usageIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.usage-popover-close{
  position:absolute;
  top:6px;
  right:6px;
  width:24px;
  height:24px;
  padding:0;
  border-radius:999px;
  font-size:16px;
  line-height:1;
}
.usage-popover-head{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding-right:24px;
}
.usage-popover-thumb{
  width:58px;
  height:58px;
  object-fit:contain;
  border:1px solid #e1e1dc;
  border-radius:8px;
  background:#f5f5f2;
}
.usage-popover-title{
  font-size:11px;
  font-weight:850;
}
.usage-popover-sub{
  margin-top:2px;
  font-size:8.5px;
  color:#777;
}
.usage-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:9px;
}
.usage-stat{
  padding:7px;
  border:1px solid #e0e0db;
  border-radius:8px;
  background:#f8f8f6;
}
.usage-stat b{
  display:block;
  font-size:13px;
}
.usage-stat span{
  display:block;
  margin-top:1px;
  font-size:7.5px;
  color:#777;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.usage-history{
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid #e3e3de;
  font-size:8.5px;
  line-height:1.45;
  color:#505752;
}
.usage-history strong{color:#283f2e}

/* pequena indicação no resumo do look atual */
.look-summary .usage-inline{
  color:#477052;
  font-weight:700;
}

@media(max-width:900px){
  .wear-event-row{
    grid-template-columns:94px minmax(0,1fr);
  }
  .mini-look.compact{
    width:94px;
    min-width:94px;
  }
  .usage-popover{
    right:10px;
    bottom:10px;
    width:calc(100vw - 20px);
  }
}


.harmony-scope{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:4px;
  padding:3px 6px;
  border:1px solid rgba(85,95,98,.18);
  border-radius:999px;
  background:rgba(255,255,255,.56);
  color:#646c6e;
  font-size:8px;
  font-weight:650;
  text-transform:none;
  letter-spacing:0;
}
.harmony-scope strong{
  color:#303638;
  font-weight:800;
}
.harmony-caption .zero-result{
  opacity:.55;
}


/* Explicação do snapshot do calendário */
.wear-look-explainer{
  margin:4px 0 7px;
  font-size:8.5px;
  line-height:1.35;
  color:#68706a;
}
.wear-look-details{
  margin-top:5px;
}
.wear-look-details summary{
  cursor:pointer;
  font-size:8px;
  color:#6c726e;
  user-select:none;
}
.wear-look-details[open] summary{
  margin-bottom:4px;
}

/* Peças do look montado são consultáveis por hover */
#topImg,#outerwearImg,#bottomImg,#footwearImg,
#headwearImg,#bagImg,#accessoryImg{
  cursor:help;
}
#topImg:hover,#outerwearImg:hover,#bottomImg:hover,#footwearImg:hover,
#headwearImg:hover:hover,#bagImg:hover,#accessoryImg:hover{
  filter:drop-shadow(0 7px 13px rgba(0,0,0,.15)) brightness(1.015);
}

/* O histórico permanece até ser fechado, então o X fica mais evidente */
.usage-popover-close{
  background:#fff;
  border-color:#b9c1bb;
}


/* ===== v20: filtros avançados opcionais ===== */
.filters{grid-template-columns:minmax(260px,2.1fr) repeat(2,minmax(125px,1fr)) auto auto}
.filters .advanced-filter{display:none}
.filters.advanced-on{grid-template-columns:minmax(260px,2.1fr) repeat(4,minmax(125px,1fr)) auto auto}
.filters.advanced-on .advanced-filter{display:block}
.advanced-filters-btn{width:auto;background:#f7f7f4;color:#5b6264;border-color:#c9cecf}
.advanced-filters-btn.active{background:#e7eef8;color:#244a77;border-color:#89a8d0}

/* ===== v20: subcategorias discretas ===== */
.subcategory-wrap{margin-top:7px;display:flex;align-items:flex-start;gap:7px}
.subcategory-toggle{width:auto;padding:6px 9px;font-size:9px;border-radius:8px;color:#50575a;background:#f8f8f6}
.subcategory-toggle.active{background:#111;color:#fff;border-color:#111}
.subcategory-panel{display:flex;flex-wrap:wrap;gap:5px}
.subcategory-chip{width:auto;padding:6px 8px;border-radius:999px;font-size:8.5px;background:#fff}
.subcategory-chip.active{background:#263238;color:#fff;border-color:#263238}
.subcategory-chip small{opacity:.72;margin-left:3px}

/* ===== v20: mini-prévia em Looks Salvos ===== */
.saved-look-row{grid-template-columns:118px minmax(0,1fr) auto auto}
.saved-look-preview{width:118px;height:64px;overflow:visible;padding:1px 0}
.saved-look-preview .mini-look.compact{width:118px;min-width:118px;height:64px;min-height:64px;padding:0}
.saved-look-preview .mini-look.compact .mini-piece img{max-height:44px}

/* ===== v20: calendário em modo lista ===== */
.wear-toolbar-actions{display:flex;align-items:center;gap:7px}
.wear-view-toggle{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:8px;background:#fff}
.wear-view-toggle button{width:auto;padding:5px 8px;border:0;background:transparent;font-size:8.5px;border-radius:6px}
.wear-view-toggle button.active{background:#111;color:#fff}
.wear-list-view{display:grid;gap:12px}
.wear-list-section h3{margin:0 0 7px;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#666}
.wear-list-event{display:grid;grid-template-columns:116px minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px;margin-bottom:7px;border:1px solid var(--line);border-radius:9px;background:#fff}
.wear-list-event-main{min-width:0}
.wear-list-event-main strong{display:block;font-size:10px}
.wear-list-event-main small{display:block;margin-top:2px;font-size:8px;color:#777}
.wear-list-event-actions{display:flex;flex-direction:column;gap:5px}
.wear-list-event-actions button{width:auto;padding:5px 7px;font-size:8px}
.wear-look-box-hidden{display:none}

@media(max-width:1180px){
  .filters,.filters.advanced-on{grid-template-columns:repeat(3,minmax(0,1fr))}
  .filters #q{grid-column:1/-1}
}
@media(max-width:900px){
  .saved-look-row{grid-template-columns:104px minmax(0,1fr) auto}
  .saved-look-delete{grid-column:3}
  .wear-list-event{grid-template-columns:94px minmax(0,1fr)}
  .wear-list-event-actions{grid-column:2;flex-direction:row}
}


/* v23 — proporção visual de calças longas */
#bottomCell.bottom-pants{
  padding-top:2px;
  padding-bottom:2px;
}
#bottomCell.bottom-pants img{
  width:auto;
  height:auto;
  max-height:100%;
}
.stage-wrap:not(.has-side-optionals) #bottomCell.bottom-pants img{
  max-width:390px;
}


/* ===== v24: banco de Looks Salvos em janela dedicada ===== */
.saved-bank-modal{
  display:none;position:fixed;inset:0;z-index:520;padding:18px;
  background:rgba(13,15,14,.54);backdrop-filter:blur(4px)
}
.saved-bank-modal.open{display:flex;align-items:center;justify-content:center}
.saved-bank-dialog{
  width:min(1480px,98vw);height:min(930px,96vh);
  display:grid;grid-template-rows:auto 1fr;overflow:hidden;
  border:1px solid #d4d4cf;border-radius:17px;background:#f4f4f1;
  box-shadow:0 28px 80px rgba(0,0,0,.28)
}
.saved-bank-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px;background:#fff;border-bottom:1px solid var(--line)
}
.saved-bank-head h2{margin:0;font-size:18px}
.saved-bank-head small{display:block;margin-top:2px;color:var(--muted);font-size:9px}
.saved-bank-head-actions{display:flex;align-items:center;gap:8px}
#savedBankSearch{
  width:min(320px,28vw);padding:8px 10px;border:1px solid #c9c9c3;
  border-radius:9px;background:#fff;font:inherit
}
.saved-bank-count{
  white-space:nowrap;padding:6px 8px;border-radius:999px;
  background:#ecece7;color:#555;font-size:9px;font-weight:800
}
.saved-bank-close{
  width:34px;height:34px;padding:0;border-radius:999px;
  font-size:20px;line-height:1
}
.saved-bank-body{min-height:0;overflow:auto;padding:14px}
.saved-bank-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px
}
.saved-bank-empty{
  grid-column:1/-1;padding:40px 12px;text-align:center;
  color:#777;font-size:11px
}
.saved-look-card{
  min-width:0;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;
  border:1px solid #d8d8d2;border-radius:14px;background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.04)
}
.saved-look-card:hover{border-color:#b9b9b2;box-shadow:0 8px 22px rgba(0,0,0,.07)}
.saved-look-card-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:10px 11px 7px
}
.saved-look-card-title{min-width:0}
.saved-look-card-title strong{
  display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.saved-look-card-title small{display:block;margin-top:2px;font-size:8px;color:#777}
.saved-look-status{
  flex:0 0 auto;padding:4px 6px;border-radius:999px;
  background:#eef4ef;color:#45604c;font-size:7.5px;font-weight:800
}

/* Preview em proporção semelhante ao Look Montado */
.saved-stage{
  min-height:330px;margin:0 10px;display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:43% 35% 22%;
  gap:5px;padding:8px 10px;border:1px solid #ecece7;border-radius:11px;
  overflow:hidden;
  background:radial-gradient(circle at 46% 44%,#fff 0 36%,#f8f8f5 73%,#f2f2ee 100%)
}
.saved-stage.has-optionals{grid-template-columns:minmax(0,1fr) 92px}
.saved-stage-main{
  min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden
}
.saved-stage-top{grid-column:1;grid-row:1}
.saved-stage-bottom{grid-column:1;grid-row:2}
.saved-stage-footwear{grid-column:1;grid-row:3}
.saved-stage-top-pair{
  width:100%;height:100%;min-width:0;min-height:0;
  display:flex;align-items:center;justify-content:center;gap:9px;
  overflow:hidden
}
.saved-stage-top.two .saved-stage-top-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  justify-items:center;
  gap:6px;
  padding:0 3px 9px;
}
.saved-stage-top.two .saved-stage-top-pair img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  min-width:0;
  object-fit:contain;
}
.saved-stage img{
  display:block;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.08))
}
.saved-stage-top img{max-width:155px;max-height:96%}
.saved-stage-top.two img{max-width:100%;max-height:92%}
.saved-stage-bottom img{max-width:165px;max-height:98%}
.saved-stage-bottom.is-short img{max-width:135px;max-height:78%}
.saved-stage-footwear img{max-width:158px;max-height:88%}
.saved-stage-optionals{
  grid-column:2;grid-row:1 / span 3;min-height:0;
  display:flex;flex-direction:column;justify-content:center;gap:7px
}
.saved-stage-optional{
  min-height:76px;display:flex;align-items:center;justify-content:center;
  padding:5px;border:1px solid #ecece7;border-radius:9px;background:rgba(255,255,255,.62)
}
.saved-stage-optional img{max-width:76px;max-height:68px}
.saved-stage-code{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  max-width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:7px;color:#666
}
.saved-look-card-foot{padding:8px 10px 10px}
.saved-look-codes-full{
  margin-bottom:7px;color:#777;font-size:7.5px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.saved-look-card-actions{display:grid;grid-template-columns:1fr 1fr auto;gap:6px}
.saved-look-card-actions button{width:100%;min-width:0;padding:7px 8px;font-size:8.5px}
.saved-plan-btn{background:#167a45;color:#fff;border-color:#167a45}
.saved-plan-btn:hover{background:#12683b;border-color:#12683b}
.saved-open-btn{background:#eef4ff;color:#234b7c;border-color:#a9bfdf}
.saved-delete-btn{width:auto!important;color:#8a1f1f}
.saved-delete-btn:hover{background:#8a1f1f;color:#fff;border-color:#8a1f1f}

@media(max-width:900px){
  .saved-bank-modal{padding:7px}
  .saved-bank-dialog{width:100%;height:97vh}
  .saved-bank-head{align-items:flex-start;flex-direction:column}
  .saved-bank-head-actions{width:100%}
  #savedBankSearch{width:100%;flex:1}
  .saved-bank-grid{grid-template-columns:1fr}
  .saved-stage{min-height:310px}
}


/* ===== v25: diferenciação visual por estado do look salvo ===== */
.saved-look-card.status-reserve{
  background:#fff8e7;
  border-color:#dfc78f;
}
.saved-look-card.status-planned{
  background:#edf5ff;
  border-color:#a9c8eb;
}
.saved-look-card.status-used{
  background:#edf7ef;
  border-color:#a9c9af;
}

.saved-look-card.status-reserve .saved-stage{
  border-color:#ead9ad;
  background:radial-gradient(circle at 46% 44%,#fffdf7 0 36%,#fbf4df 73%,#f7edd1 100%);
}
.saved-look-card.status-planned .saved-stage{
  border-color:#c5d9f1;
  background:radial-gradient(circle at 46% 44%,#fbfdff 0 36%,#eef6ff 73%,#e5f0fb 100%);
}
.saved-look-card.status-used .saved-stage{
  border-color:#c6dccb;
  background:radial-gradient(circle at 46% 44%,#fbfffc 0 36%,#edf7ef 73%,#e3f0e6 100%);
}

.saved-look-card.status-reserve .saved-look-status{
  background:#f4dfaa;
  color:#6d5415;
}
.saved-look-card.status-planned .saved-look-status{
  background:#d7e8fb;
  color:#285a8d;
}
.saved-look-card.status-used .saved-look-status{
  background:#d8eadc;
  color:#346141;
}

.saved-look-card.status-reserve .saved-look-card-head,
.saved-look-card.status-reserve .saved-look-card-foot{
  background:rgba(255,250,236,.72);
}
.saved-look-card.status-planned .saved-look-card-head,
.saved-look-card.status-planned .saved-look-card-foot{
  background:rgba(241,247,255,.74);
}
.saved-look-card.status-used .saved-look-card-head,
.saved-look-card.status-used .saved-look-card-foot{
  background:rgba(241,249,243,.74);
}


/* ===== v26: inspetor universal da peça ===== */
.usage-popover{
  width:min(410px,calc(100vw - 36px));
  max-height:min(690px,calc(100vh - 36px));
  overflow:auto;
}
.usage-popover-head{
  grid-template-columns:72px minmax(0,1fr);
  align-items:start;
}
.usage-popover-thumb{
  width:72px;
  height:72px;
}
.usage-popover-title{
  font-size:12px;
  line-height:1.25;
}
.usage-popover-brand{
  margin-top:3px;
  font-size:9.5px;
  font-weight:750;
  color:#3d4a40;
}
.usage-popover-sub{
  margin-top:3px;
  line-height:1.35;
}
.piece-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:9px;
}
.piece-meta{
  min-width:0;
  padding:6px 7px;
  border:1px solid #e2e2dd;
  border-radius:8px;
  background:#fbfbf9;
}
.piece-meta.full{
  grid-column:1/-1;
}
.piece-meta-label{
  display:block;
  margin-bottom:2px;
  font-size:7px;
  font-weight:800;
  color:#858985;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.piece-meta-value{
  display:block;
  font-size:8.7px;
  line-height:1.3;
  color:#333a35;
  overflow-wrap:anywhere;
}
.piece-tags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:8px;
}
.piece-tag{
  display:inline-flex;
  padding:3px 5px;
  border:1px solid #deded8;
  border-radius:999px;
  background:#f6f6f3;
  color:#555d57;
  font-size:7.5px;
}
.usage-history-title{
  margin-bottom:4px;
  font-size:7.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#777d78;
}
.usage-recent-list{
  display:grid;
  gap:4px;
  margin-top:6px;
}
.usage-recent-row{
  display:grid;
  grid-template-columns:68px minmax(0,1fr);
  gap:6px;
  align-items:start;
  padding:4px 0;
  border-top:1px solid #ecece7;
}
.usage-recent-row:first-child{border-top:0}
.usage-recent-date{
  color:#737a75;
  font-size:7.8px;
  font-weight:750;
}
.usage-recent-event{
  min-width:0;
  font-size:8px;
  line-height:1.3;
  color:#414843;
}
.piece-source-link{
  display:inline-flex;
  align-items:center;
  margin-top:8px;
  font-size:8px;
  font-weight:750;
  color:#2b5e97;
  text-decoration:none;
}
.piece-source-link:hover{text-decoration:underline}

/* qualquer imagem de peça com ficha disponível indica que é consultável */
[data-item-code]{
  cursor:help;
}
.card .imagebox img[data-item-code]:hover,
.saved-stage img[data-item-code]:hover,
.mini-look img[data-item-code]:hover{
  filter:drop-shadow(0 7px 13px rgba(0,0,0,.15)) brightness(1.02);
}
@media(max-width:900px){
  .usage-popover{
    max-height:70vh;
  }
  .piece-meta-grid{
    grid-template-columns:1fr;
  }
  .piece-meta.full{
    grid-column:auto;
  }
}


/* v28: nomes mais descritivos podem ocupar duas linhas */
.saved-look-main strong,
.saved-look-card-title strong{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.25;
}



/* ============================================================
   WHERING 3.0 — navegação e páginas
   ============================================================ */
:root{
  --app-nav-w:210px;
  --v3-bg:#f4f5f2;
  --v3-surface:#fff;
  --v3-muted:#707771;
  --v3-line:#dde1db;
  --v3-green:#254f3b;
  --v3-green-soft:#e8f0eb;
  --v3-blue:#315e8d;
  --v3-blue-soft:#eaf2fb;
  --v3-danger:#8e3535;
}
html,body{min-height:100%;background:var(--v3-bg)}
body{overflow-x:hidden}
.app-sidebar{
  position:fixed;inset:0 auto 0 0;z-index:1000;width:var(--app-nav-w);
  display:flex;flex-direction:column;padding:18px 14px;background:#171c19;color:#edf1ed;
  border-right:1px solid rgba(255,255,255,.06)
}
.brand-mark{display:flex;align-items:center;gap:10px;padding:4px 6px 22px}
.brand-mark>span{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#edf1ed;color:#171c19;font-weight:900;font-size:17px}
.brand-mark div{display:flex;flex-direction:column}
.brand-mark strong{font-size:12px;letter-spacing:.08em}
.brand-mark small{font-size:8px;color:#9ba39d;margin-top:2px}
.app-nav{display:grid;gap:5px}
.app-nav-btn{width:100%;display:flex;align-items:center;gap:10px;padding:10px 11px;border:0;border-radius:10px;background:transparent;color:#aeb7b0;font-weight:650;text-align:left}
.app-nav-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.app-nav-btn.active{background:#edf1ed;color:#18201b}
.app-nav-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sidebar-foot{margin-top:auto;padding:10px 6px;color:#89918b;font-size:8px}
.version-pill{display:inline-block;padding:3px 6px;margin-right:5px;border-radius:999px;background:rgba(255,255,255,.08);color:#dfe5df}
.app-content{margin-left:var(--app-nav-w);min-height:100vh}
.app-page{display:none;min-height:100vh}
.app-page.active{display:block}
.page-shell{width:min(1440px,100%);margin:auto;padding:30px 30px 54px}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;padding:4px 0 24px}
.page-heading h1{font-size:30px;letter-spacing:-.035em;margin:5px 0 6px;max-width:780px}
.page-heading p{margin:0;color:var(--v3-muted);font-size:12px;line-height:1.55}
.compact-heading h1{font-size:27px}
.eyebrow,.section-kicker{font-size:8px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#728078}
.heading-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.primary-v3-btn,.quiet-btn,.text-btn{width:auto;border-radius:9px;padding:9px 11px}
.primary-v3-btn{background:var(--v3-green);border-color:var(--v3-green);color:white}
.primary-v3-btn:hover{background:#1d4230}
.quiet-btn{background:white;border-color:var(--v3-line);color:#3e4741}
.text-btn{padding:5px 2px;border:0;background:transparent;color:var(--v3-green);font-size:9px}
.v3-card{background:#fff;border:1px solid var(--v3-line);border-radius:14px;padding:16px;box-shadow:0 2px 8px rgba(20,35,24,.025)}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.section-head h2{margin:3px 0 0;font-size:15px}
.section-note{font-size:9px;color:var(--v3-muted);margin:-5px 0 12px;line-height:1.45}
.home-stat-grid,.insight-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.stat-card{background:white;border:1px solid var(--v3-line);border-radius:12px;padding:13px 14px}
.stat-card b{display:block;font-size:24px;letter-spacing:-.04em}
.stat-card span{display:block;margin-top:3px;color:var(--v3-muted);font-size:8px;text-transform:uppercase;letter-spacing:.05em}
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dashboard-span-2{grid-column:1/-1}
.data-safety-card{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.data-safety-card h2{font-size:14px;margin:3px 0 4px}
.data-safety-card p{font-size:9px;color:var(--v3-muted);margin:0}
.data-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.file-btn{position:relative;overflow:hidden;cursor:pointer}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.empty-state{padding:12px;color:var(--v3-muted);font-size:9px;border:1px dashed #dfe3dd;border-radius:9px;background:#fafbf9}
.upcoming-list,.planning-event-list{display:grid;gap:7px}
.event-row{display:grid;grid-template-columns:78px 72px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px;border:1px solid #ecefe9;border-radius:10px;background:#fbfcfa}
.event-date{font-size:9px;font-weight:800}
.event-preview{height:54px;display:flex;align-items:center;justify-content:center}
.event-preview .mini-look.compact{height:54px;min-height:54px}
.event-main strong{display:block;font-size:9.5px}
.event-main small{display:block;margin-top:2px;color:var(--v3-muted);font-size:8px}
.event-badge{font-size:7px;padding:3px 5px;border-radius:999px;background:var(--v3-blue-soft);color:var(--v3-blue)}
.event-badge.warn{background:#f7e5e5;color:var(--v3-danger)}
.mini-piece-grid,.insight-piece-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.rotation-piece{min-width:0;border:1px solid #e5e8e2;border-radius:10px;padding:7px;background:#fbfcfa}
.rotation-piece img{width:100%;height:100px;object-fit:contain}
.rotation-piece strong{display:block;font-size:8px;margin-top:4px}
.rotation-piece small{display:block;font-size:7px;color:var(--v3-muted);margin-top:2px}
.home-look-list{display:grid;gap:7px}
.home-look-row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px;align-items:center;padding:7px;border:1px solid #ecefe9;border-radius:9px;background:#fbfcfa}
.home-look-row .mini-look.compact{width:86px;min-width:86px;height:62px;min-height:62px}
.home-look-row strong{font-size:8.5px}
.home-look-row small{font-size:7.5px;color:var(--v3-muted)}
.warning-list{display:grid;gap:6px}
.warning-row{padding:8px 9px;border:1px solid #ead4ab;border-radius:9px;background:#fff8e9;font-size:8.5px;color:#6d5420}

/* Guarda-roupa */
#page-wardrobe #mainHeader{position:sticky;top:0;left:auto;right:auto;z-index:300;background:rgba(244,245,242,.97);box-shadow:none;border-bottom:1px solid var(--v3-line)}
#page-wardrobe .header-inner{width:min(1540px,100%);padding:0 8px}
#page-wardrobe .page{width:min(1540px,100%);padding:18px;padding-top:18px}
#page-wardrobe .fixed-look{right:18px}
.wardrobe-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wardrobe-view-toggle,.look-page-tabs,.segmented{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--v3-line);border-radius:9px;background:#fff}
.wardrobe-view-toggle button,.look-page-tabs button,.segmented button{width:auto;border:0;background:transparent;padding:6px 8px;border-radius:7px;font-size:8px}
.wardrobe-view-toggle button.active,.look-page-tabs button.active,.segmented button.active{background:#202722;color:#fff}
.archive-piece-btn{position:absolute;right:7px;top:7px;z-index:4;width:28px;height:28px;padding:0;border-radius:999px;background:rgba(255,255,255,.94);font-size:14px}
.card{position:relative}
.card.is-archived{opacity:.88;background:#f7f5f0;border-style:dashed}
.card.is-archived .addbtn{display:none}
.archived-note{font-size:7px;color:#8a681f;margin-top:4px}

/* Looks */
.page-search{width:min(340px,40vw)}
.look-page-tabs{margin-bottom:14px}
.page-saved-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.archived-look-card{filter:saturate(.72);background:#f6f4ef!important;border-style:dashed!important}
.archived-reason{padding:6px 8px;margin:0 10px 8px;border-radius:8px;background:#eee9de;color:#6c6250;font-size:8px}

/* Planejamento */
.planning-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr);gap:14px;margin-bottom:14px}
.group-chip-list{display:flex;flex-wrap:wrap;gap:5px}
.group-chip{width:auto;padding:5px 7px;border-radius:999px;font-size:8px;background:#fafbfa}
.group-chip.active{background:#202722;color:#fff;border-color:#202722}
.group-history{margin-top:12px;display:grid;gap:6px}
.group-history-row{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;align-items:center;padding-top:6px;border-top:1px solid #eceeea}
.group-history-row .mini-look.compact{width:70px;min-width:70px;height:52px;min-height:52px}
.group-history-row strong{font-size:8px}
.group-history-row small{font-size:7px;color:var(--v3-muted)}
.planning-recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.recent-event-card{padding:8px;border:1px solid #eceeea;border-radius:9px;background:#fbfcfa}
.recent-event-card strong{font-size:8.5px}
.recent-event-card small{display:block;font-size:7.5px;color:var(--v3-muted);margin-top:2px}

/* Insights */
.insights-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.combo-list,.compat-list{display:grid;gap:7px}
.combo-row{display:grid;grid-template-columns:58px 58px minmax(0,1fr) auto;gap:7px;align-items:center;padding:7px;border:1px solid #eceeea;border-radius:9px;background:#fbfcfa}
.combo-row img{width:58px;height:58px;object-fit:contain}
.combo-row strong{font-size:8.5px}
.combo-row small{display:block;font-size:7.3px;color:var(--v3-muted);margin-top:2px}
.score-pill{font-size:7px;padding:3px 5px;border-radius:999px;background:var(--v3-green-soft);color:var(--v3-green)}
.compat-select{margin-bottom:10px}
.quality-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.quality-item{padding:9px;border:1px solid #eceeea;border-radius:9px;background:#fbfcfa}
.quality-item b{font-size:16px}
.quality-item span{display:block;font-size:7px;color:var(--v3-muted);margin-top:2px}

/* Toast */
.v3-toast{position:fixed;left:calc(var(--app-nav-w) + (100vw - var(--app-nav-w))/2);bottom:18px;transform:translateX(-50%);z-index:1200;display:none;align-items:center;gap:10px;padding:9px 12px;border:1px solid #cfd5cf;border-radius:10px;background:#1f2721;color:#fff;box-shadow:0 12px 34px rgba(0,0,0,.18);font-size:9px}
.v3-toast.show{display:flex}
.v3-toast button{width:auto;padding:4px 6px;border-color:#6f7f74;background:transparent;color:#fff;font-size:8px}
.saved-bank-modal,.wear-modal{z-index:1100}
.usage-popover{z-index:1300}

@media(max-width:1120px){
  :root{--app-nav-w:76px}
  .brand-mark div,.app-nav-btn span,.sidebar-foot span{display:none}
  .brand-mark{justify-content:center}
  .app-nav-btn{justify-content:center}
  .home-stat-grid,.insight-stat-grid{grid-template-columns:repeat(2,1fr)}
  .planning-layout,.insights-two-col{grid-template-columns:1fr}
}
@media(max-width:760px){
  :root{--app-nav-w:0px}
  .app-sidebar{width:100%;height:58px;bottom:auto;flex-direction:row;align-items:center;padding:7px 9px}
  .brand-mark{display:none}
  .app-nav{display:flex;width:100%;justify-content:space-between}
  .app-nav-btn{flex:1;padding:7px 4px}
  .app-nav-btn span{display:block;font-size:7px}
  .sidebar-foot{display:none}
  .app-content{margin-left:0;padding-top:58px}
  .page-shell{padding:20px 12px 40px}
  .page-heading{align-items:flex-start;flex-direction:column}
  .dashboard-grid{grid-template-columns:1fr}
  .dashboard-span-2{grid-column:auto}
  .home-stat-grid,.insight-stat-grid{grid-template-columns:repeat(2,1fr)}
  .data-safety-card{align-items:flex-start;flex-direction:column}
  .event-row{grid-template-columns:64px 58px minmax(0,1fr)}
  .event-badge{grid-column:3}
  .quality-grid{grid-template-columns:1fr}
  #page-wardrobe .fixed-look{position:relative;right:auto;top:auto;bottom:auto;width:100%;height:650px;margin-top:12px}
  #page-wardrobe .left-col{margin-right:0}
}


/* ============================================================
   WHERING 3.0.1 — refinamentos de interface
   ============================================================ */

/* Em telas largas, o inspetor ganha um trilho próprio à direita.
   O Look Montado deixa de ficar encostado na borda e não é coberto. */
@media (min-width:1650px){
  #page-wardrobe{
    --v3-page-w:1700px;
    --v3-mounted-w:clamp(470px,29vw,540px);
  }
  #page-wardrobe .header-inner,
  #page-wardrobe .page{
    width:min(var(--v3-page-w),100%);
  }
  #page-wardrobe .fixed-look{
    width:var(--v3-mounted-w);
    right:max(14px,calc((100vw - var(--v3-page-w))/2 + 14px));
  }
  #page-wardrobe .left-col{
    margin-right:calc(var(--v3-mounted-w) + 32px);
  }
  #page-wardrobe .usage-popover{
    right:max(14px,calc((100vw - var(--v3-page-w))/2 + 14px));
    width:320px;
  }
}

/* Em desktop médio, evita sobreposição entre catálogo e look montado. */
@media (min-width:1280px) and (max-width:1649px){
  #page-wardrobe{
    --v3-page-w:1520px;
    --v3-mounted-w:clamp(430px,28vw,500px);
  }
  #page-wardrobe .fixed-look{
    width:var(--v3-mounted-w);
    right:max(12px,calc((100vw - var(--v3-page-w))/2 + 12px));
  }
  #page-wardrobe .left-col{
    margin-right:calc(var(--v3-mounted-w) + 28px);
  }
  #page-wardrobe .usage-popover{
    right:max(12px,calc((100vw - var(--v3-page-w))/2 + 12px));
    width:290px;
  }
}

/* Miniatura composta: top/outer, bottom e calçado em um único canvas.
   As peças principais ficam grandes e legíveis. */
.v3-look-thumb{
  width:104px;
  min-width:104px;
  height:118px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  border:1px solid #e2e5df;
  border-radius:11px;
  background:linear-gradient(180deg,#fff 0%,#f7f8f5 100%);
  overflow:hidden;
}
.v3-look-thumb.has-optionals{
  grid-template-columns:minmax(0,1fr) 28px;
}
.v3-thumb-main{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:44% 38% 18%;
}
.v3-thumb-upper,
.v3-thumb-bottom,
.v3-thumb-foot{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:2px 5px;
}
.v3-thumb-upper.two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px;
}
.v3-thumb-upper img{
  max-width:100%;
  max-height:49px;
  object-fit:contain;
}
.v3-thumb-upper.two img{
  max-height:43px;
}
.v3-thumb-bottom img{
  max-width:76px;
  max-height:45px;
  object-fit:contain;
}
.v3-thumb-foot img{
  max-width:72px;
  max-height:27px;
  object-fit:contain;
}
.v3-thumb-optionals{
  min-width:0;
  display:grid;
  align-content:center;
  gap:3px;
  padding:4px 3px;
  border-left:1px solid #eaede8;
  background:rgba(248,249,246,.9);
}
.v3-thumb-optionals img{
  width:100%;
  height:25px;
  object-fit:contain;
}
.v3-look-thumb.small{
  width:86px;
  min-width:86px;
  height:98px;
}
.v3-look-thumb.small .v3-thumb-upper img{max-height:41px}
.v3-look-thumb.small .v3-thumb-bottom img{max-height:37px}
.v3-look-thumb.small .v3-thumb-foot img{max-height:23px}
.v3-look-empty{
  color:#c4c9c3;
  font-size:8px;
}

/* Home e Planejamento agora deixam a miniatura respirar. */
.event-row{
  grid-template-columns:78px 114px minmax(0,1fr) auto;
  min-height:132px;
}
.event-preview{
  width:114px;
  height:120px;
}
.home-look-row{
  grid-template-columns:96px minmax(0,1fr);
  min-height:108px;
}
.group-history-row{
  grid-template-columns:94px minmax(0,1fr);
  min-height:104px;
}

/* Modal de arquivamento */
.archive-dialog{
  width:min(440px,calc(100vw - 28px));
  padding:0;
  border:0;
  border-radius:15px;
  background:transparent;
  box-shadow:0 22px 70px rgba(0,0,0,.24);
}
.archive-dialog::backdrop{
  background:rgba(18,22,19,.36);
  backdrop-filter:blur(2px);
}
.archive-dialog-card{
  padding:18px;
  border:1px solid #d7ddd7;
  border-radius:15px;
  background:#fff;
}
.archive-dialog-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}
.archive-dialog-head h2{
  margin:4px 0 5px;
  font-size:17px;
}
.archive-dialog-head p{
  margin:0;
  color:var(--v3-muted);
  font-size:9px;
  line-height:1.45;
  max-width:330px;
}
.archive-dialog-x{
  width:30px;
  height:30px;
  padding:0;
  border-radius:999px;
  font-size:18px;
  line-height:1;
  background:#f5f6f3;
}
.archive-dialog-field{
  display:grid;
  gap:5px;
  margin-top:16px;
}
.archive-dialog-field>span{
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#687169;
}
.archive-dialog-field select,
.archive-dialog-field input{
  width:100%;
}
.archive-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:18px;
}

@media(max-width:760px){
  .event-row{
    grid-template-columns:72px 92px minmax(0,1fr);
    min-height:116px;
  }
  .event-preview{
    width:92px;
    height:102px;
  }
  .v3-look-thumb{
    width:90px;
    min-width:90px;
    height:100px;
  }
}


/* 3.0.2 — refinamento de miniaturas e compatibilidade */
.v3-thumb-main{
  grid-template-rows:34% 48% 18%;
}
.v3-thumb-upper img{
  max-height:38px;
}
.v3-thumb-upper.two img{
  max-height:33px;
}
.v3-thumb-bottom img{
  max-width:82px;
  max-height:56px;
}
.v3-thumb-foot img{
  max-width:66px;
  max-height:21px;
}
.v3-look-thumb.small .v3-thumb-upper img{max-height:33px}
.v3-look-thumb.small .v3-thumb-bottom img{max-height:46px}
.v3-look-thumb.small .v3-thumb-foot img{max-height:18px}

.compat-results-list{display:grid;gap:8px;margin-top:10px}
.compat-selected-card{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border:1px solid #e6eae3;border-radius:12px;background:#fafbf8;margin-bottom:10px}
.compat-selected-media{display:flex;align-items:center;justify-content:center;height:92px;border:1px solid #ecefe9;border-radius:10px;background:#fff;padding:8px}
.compat-selected-media img{max-width:100%;max-height:74px;object-fit:contain}
.compat-selected-body h3{margin:3px 0 5px;font-size:12px;line-height:1.2}
.compat-selected-body p{margin:0;color:var(--v3-muted);font-size:8px;line-height:1.5}
.compat-selected-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.compat-selected-meta span{padding:3px 7px;border:1px solid #e4e8e2;border-radius:999px;background:#fff;font-size:7.5px;color:#596257}
.combo-row.compat-row{grid-template-columns:64px minmax(0,1fr) auto}
.combo-row.compat-row img{width:64px;height:64px}
.combo-row.compat-row strong{display:block}
@media(max-width:760px){
  .compat-selected-card{grid-template-columns:1fr}
  .compat-selected-media{height:108px}
}

/* ============================================================
   WHERING 3.0.4 — seletor visual de compatibilidade + lista de revisão
   ============================================================ */
.compat-native-select{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}
.compat-picker{position:relative;margin-bottom:10px}
.compat-picker-button{
  width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 10px;border:1px solid #cfd4ce;border-radius:9px;background:#fff;text-align:left
}
.compat-picker-button-main{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.compat-picker-button-main img{width:38px;height:38px;object-fit:contain;border:1px solid #ecefe9;border-radius:7px;background:#fafbf9}
.compat-picker-button-main span{min-width:0}
.compat-picker-button-main strong{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compat-picker-button-main small{display:block;margin-top:2px;color:var(--v3-muted);font-size:7.5px}
.compat-picker-placeholder{font-size:9px;color:#4f5751}
.compat-picker-chevron{font-size:14px;color:#5d655f}
.compat-picker-menu{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:1500;padding:9px;
  border:1px solid #cfd5cf;border-radius:12px;background:#fff;box-shadow:0 18px 45px rgba(0,0,0,.18)
}
.compat-picker-preview{
  min-height:84px;display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;align-items:center;
  padding:8px;border:1px solid #e6eae4;border-radius:10px;background:#fafbf8;margin-bottom:8px
}
.compat-picker-preview img{width:86px;height:74px;object-fit:contain}
.compat-picker-preview strong{display:block;font-size:10px}
.compat-picker-preview small{display:block;margin-top:4px;color:var(--v3-muted);font-size:8px}
.compat-picker-preview-empty{grid-column:1/-1;color:var(--v3-muted);font-size:8px;text-align:center}
.compat-picker-search{margin-bottom:7px}
.compat-picker-options{display:grid;gap:3px;max-height:330px;overflow:auto;padding-right:2px}
.compat-option{
  width:100%;display:grid;grid-template-columns:52px minmax(0,1fr);gap:9px;align-items:center;
  padding:5px 7px;border:1px solid transparent;border-radius:8px;background:#fff;text-align:left;white-space:normal
}
.compat-option:hover,.compat-option:focus{background:#f3f6f2;border-color:#dce3db;outline:none}
.compat-option.selected{background:#e8f0eb;border-color:#bfd0c4}
.compat-option img{width:52px;height:48px;object-fit:contain}
.compat-option span{min-width:0}
.compat-option strong{display:block;font-size:8.5px;line-height:1.25}
.compat-option small{display:block;margin-top:2px;color:var(--v3-muted);font-size:7.4px}

.quality-grid-buttons .quality-item{cursor:pointer;text-align:left;width:100%}
.quality-grid-buttons .quality-item.active{border-color:#35473b;box-shadow:0 0 0 1px #35473b;background:#f4f7f4}
.quality-detail{margin-top:12px;padding-top:12px;border-top:1px solid #e7eae5}
.quality-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:9px}
.quality-detail-head strong{display:block;font-size:10px}
.quality-detail-head small{display:block;margin-top:3px;color:var(--v3-muted);font-size:8px}
.quality-detail-head>span{font-size:7.5px;color:var(--v3-muted);padding:3px 6px;border:1px solid #e2e6e0;border-radius:999px;background:#fafbf9}
.quality-piece-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:7px;max-height:360px;overflow:auto;padding-right:3px}
.quality-piece-card{
  width:100%;display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;align-items:center;
  padding:7px;border:1px solid #e5e8e3;border-radius:9px;background:#fbfcfa;text-align:left;white-space:normal
}
.quality-piece-card:hover{background:#f4f7f4;border-color:#cfd7d0}
.quality-piece-card img{width:58px;height:54px;object-fit:contain}
.quality-piece-card span{min-width:0}
.quality-piece-card strong{display:block;font-size:8.4px;line-height:1.25}
.quality-piece-card small{display:block;margin-top:3px;color:var(--v3-muted);font-size:7.4px}

@media(max-width:760px){
  .compat-picker-menu{position:fixed;left:10px;right:10px;top:76px;max-height:calc(100vh - 92px);overflow:auto}
  .quality-piece-grid{grid-template-columns:1fr}
}

/* ============================================================
   WHERING 3.1 — filtros verticais + harmonias sticky
   ============================================================ */
@media (min-width:1121px){
  #page-wardrobe{
    --wardrobe-filter-w:286px;
    --v3-mounted-w:clamp(470px,29vw,545px);
    position:relative;
    padding-left:var(--wardrobe-filter-w);
  }

  /* Painel de filtros permanente entre o menu principal e o conteúdo. */
  #page-wardrobe .wardrobe-filter-rail{
    position:fixed;
    z-index:420;
    left:var(--app-nav-w);
    top:0;
    bottom:0;
    width:var(--wardrobe-filter-w);
    background:#f7f8f5;
    border-right:1px solid var(--v3-line);
    box-shadow:4px 0 18px rgba(24,32,26,.025);
  }
  #page-wardrobe .filter-rail-scroll{
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    padding:20px 15px 24px;
    scrollbar-width:thin;
  }
  #page-wardrobe .filter-rail-head{
    display:grid;
    gap:11px;
    padding-bottom:14px;
    margin-bottom:14px;
    border-bottom:1px solid var(--v3-line);
  }
  #page-wardrobe .filter-rail-head h2{
    margin:3px 0 0;
    font-size:19px;
    letter-spacing:-.02em;
  }
  #page-wardrobe .wardrobe-view-toggle{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  #page-wardrobe .wardrobe-view-toggle button{
    width:100%;
    min-width:0;
  }

  #page-wardrobe .filter-rail-fields,
  #page-wardrobe .filter-rail-fields.advanced-on{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin:0;
  }
  #page-wardrobe .rail-field{
    display:grid;
    gap:5px;
    min-width:0;
  }
  #page-wardrobe .rail-field>span,
  #page-wardrobe .category-bar-title{
    font-size:8px;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:#69716b;
  }
  #page-wardrobe .rail-field input,
  #page-wardrobe .rail-field select{
    min-height:39px;
    padding:8px 9px;
    border-radius:9px;
    background:#fff;
  }
  #page-wardrobe .filter-rail-fields .category-bar-wrap{
    margin:1px 0 0;
  }
  #page-wardrobe .category-bar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  #page-wardrobe .category-pill{
    width:100%;
    min-width:0;
    padding:7px 7px;
    gap:6px;
    justify-content:flex-start;
    border-radius:9px;
  }
  #page-wardrobe .category-icon{
    flex:0 0 auto;
  }
  #page-wardrobe .category-text{
    min-width:0;
  }
  #page-wardrobe .category-text strong{
    font-size:8px;
  }
  #page-wardrobe .category-text small{
    font-size:6.8px;
  }
  #page-wardrobe .subcategory-wrap{
    margin-top:7px;
  }
  #page-wardrobe .subcategory-toggle{
    width:100%;
  }
  #page-wardrobe .subcategory-panel{
    position:static;
    width:100%;
    margin-top:5px;
    box-shadow:none;
  }
  #page-wardrobe .rail-advanced-wrap{
    display:grid;
    gap:8px;
  }
  #page-wardrobe .filter-rail-fields .advanced-filter{
    display:none;
  }
  #page-wardrobe .filter-rail-fields.advanced-on .advanced-filter{
    display:grid;
  }
  #page-wardrobe .advanced-filters-btn,
  #page-wardrobe .rail-reset{
    width:100%;
    min-height:38px;
  }

  /* Conteúdo principal passa a usar toda a largura restante. */
  #page-wardrobe .wardrobe-main-area{
    width:100%;
    min-width:0;
  }
  #page-wardrobe #mainHeader{
    position:sticky;
    top:0;
    z-index:360;
    width:100%;
    background:rgba(244,245,242,.97);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--v3-line);
  }
  #page-wardrobe .header-inner{
    width:100%;
    max-width:none;
    margin:0;
    padding:10px 16px 11px;
  }
  #page-wardrobe .wardrobe-title-compact{
    margin:0 0 7px;
    min-height:0;
  }
  #page-wardrobe .wardrobe-title-compact h1{
    margin:0 0 2px;
    font-size:18px;
  }
  #page-wardrobe .wardrobe-title-compact .subtitle{
    font-size:8px;
  }

  /* Harmonias permanecem visíveis durante toda a rolagem. */
  #page-wardrobe .harmony-panel{
    margin:0;
    padding-top:7px;
    border-top:1px solid #dfe3dd;
  }
  #page-wardrobe .harmony-topline{
    min-height:30px;
  }
  #page-wardrobe .harmony-grid{
    min-height:40px;
    max-height:105px;
    overflow-y:auto;
  }

  #page-wardrobe .page{
    width:100%;
    max-width:none;
    margin:0;
    padding:14px 16px 30px;
  }
  #page-wardrobe .workspace{
    width:100%;
  }
  #page-wardrobe .left-col{
    margin-right:calc(var(--v3-mounted-w) + 16px) !important;
    min-width:0;
  }
  #page-wardrobe .fixed-look{
    width:var(--v3-mounted-w) !important;
    right:16px !important;
    top:calc(var(--header-h) + 10px) !important;
    bottom:10px;
  }

  /* Catálogo aproveita o espaço liberado pelos filtros. */
  #page-wardrobe .grid{
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:11px;
  }
  #page-wardrobe .imagebox{
    height:205px;
  }

  /* O inspetor não cobre o Look montado. */
  #page-wardrobe .usage-popover{
    right:calc(var(--v3-mounted-w) + 30px) !important;
    width:350px;
    max-height:min(620px,calc(100vh - var(--header-h) - 28px));
  }
}

/* Laptops: rail um pouco mais estreito e preview mais compacto. */
@media (min-width:1121px) and (max-width:1500px){
  #page-wardrobe{
    --wardrobe-filter-w:250px;
    --v3-mounted-w:clamp(410px,30vw,475px);
  }
  #page-wardrobe .category-bar{
    grid-template-columns:1fr;
  }
  #page-wardrobe .grid{
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  }
  #page-wardrobe .usage-popover{
    width:320px;
  }
}

/* Em tela estreita, volta para fluxo normal em vez de forçar dois sidebars. */
@media (max-width:1120px){
  #page-wardrobe{
    padding-left:0;
  }
  #page-wardrobe .wardrobe-filter-rail{
    position:relative;
    left:auto;
    top:auto;
    bottom:auto;
    width:auto;
    margin:12px;
    border:1px solid var(--v3-line);
    border-radius:12px;
    background:#f7f8f5;
  }
  #page-wardrobe .filter-rail-scroll{
    padding:12px;
  }
  #page-wardrobe .filter-rail-fields,
  #page-wardrobe .filter-rail-fields.advanced-on{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  #page-wardrobe .rail-search,
  #page-wardrobe .category-bar-wrap,
  #page-wardrobe .rail-advanced-wrap,
  #page-wardrobe .rail-reset{
    grid-column:1/-1;
  }
}

/* ============================================================
   WHERING 3.2 — layout robusto sem sobreposição
   O Look montado deixa de ser position:fixed e passa a ocupar
   uma coluna real do grid. Isso elimina a disputa de espaço com
   Montar look e Catálogo.
   ============================================================ */
@media (min-width:1121px){
  #page-wardrobe{
    --wardrobe-filter-w:270px;
    --v3-mounted-w:clamp(440px,29vw,520px);
  }

  #page-wardrobe .wardrobe-main-area{
    min-width:0;
    width:100%;
  }

  #page-wardrobe .page{
    width:100%;
    max-width:none;
    margin:0;
    padding:14px 16px 30px;
  }

  #page-wardrobe .workspace{
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--v3-mounted-w);
    gap:16px;
    align-items:start;
    width:100%;
    min-width:0;
  }

  #page-wardrobe .left-col{
    min-width:0;
    width:auto;
    margin-right:0 !important;
  }

  #page-wardrobe .fixed-look{
    position:sticky !important;
    z-index:80;
    width:auto !important;
    min-width:0;
    right:auto !important;
    left:auto !important;
    top:calc(var(--header-h) + 10px) !important;
    bottom:auto !important;
    height:calc(100vh - var(--header-h) - 20px);
    align-self:start;
  }

  #page-wardrobe .look-stage{
    width:100%;
    height:100%;
  }

  #page-wardrobe .grid{
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:11px;
  }

  /* Inspetor fica temporariamente à esquerda do Look montado,
     sem cobrir o preview. */
  #page-wardrobe .usage-popover{
    right:calc(var(--v3-mounted-w) + 32px) !important;
    width:340px;
    max-height:min(650px,calc(100vh - 24px));
  }
}

@media (min-width:1121px) and (max-width:1500px){
  #page-wardrobe{
    --wardrobe-filter-w:245px;
    --v3-mounted-w:clamp(400px,29vw,455px);
  }
  #page-wardrobe .category-bar{grid-template-columns:1fr;}
  #page-wardrobe .grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));}
  #page-wardrobe .usage-popover{width:310px;}
}


/* ============================================================
   WHERING 3.3.1 — painéis laterais retráteis
   ============================================================ */
:root{
  --app-nav-expanded-w:210px;
  --app-nav-collapsed-w:68px;
}

/* O valor usado pelo layout inteiro passa a responder ao estado do menu. */
body:not(.app-nav-collapsed){--app-nav-w:var(--app-nav-expanded-w)}
body.app-nav-collapsed{--app-nav-w:var(--app-nav-collapsed-w)}

.panel-collapse-handle{
  position:absolute;
  z-index:1100;
  width:28px;
  height:28px;
  padding:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #cfd5cf;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  color:#263029;
}
.panel-collapse-handle svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .18s ease;
}
.app-sidebar-handle{
  top:21px;
  right:-14px;
}
.filter-rail-handle{
  top:21px;
  right:-14px;
}

/* Menu principal recolhido: ficam apenas W + ícones. */
@media (min-width:1121px){
  .app-sidebar,
  .app-content,
  #page-wardrobe .wardrobe-filter-rail,
  #page-wardrobe{
    transition:width .2s ease,margin-left .2s ease,padding-left .2s ease,left .2s ease;
  }

  body.app-nav-collapsed .brand-mark{
    justify-content:center;
    padding-left:0;
    padding-right:0;
  }
  body.app-nav-collapsed .brand-mark>div,
  body.app-nav-collapsed .app-nav-btn>span,
  body.app-nav-collapsed .sidebar-foot>span{
    display:none;
  }
  body.app-nav-collapsed .app-nav-btn{
    justify-content:center;
    gap:0;
    padding-left:0;
    padding-right:0;
  }
  body.app-nav-collapsed .app-nav-btn svg{
    width:20px;
    height:20px;
  }
  body.app-nav-collapsed .sidebar-foot{
    display:flex;
    justify-content:center;
    padding-left:0;
    padding-right:0;
  }
  body.app-nav-collapsed .version-pill{
    margin:0;
    font-size:7px;
  }
  body.app-nav-collapsed .app-sidebar-handle svg{
    transform:rotate(180deg);
  }

  /* Painel de filtros recolhido. */
  body.filter-rail-collapsed #page-wardrobe{
    --wardrobe-filter-w:56px;
  }
  body.filter-rail-collapsed #page-wardrobe .filter-rail-scroll{
    display:none;
  }
  body.filter-rail-collapsed #page-wardrobe .wardrobe-filter-rail{
    overflow:visible;
  }
  body.filter-rail-collapsed #page-wardrobe .wardrobe-filter-rail::after{
    content:'FILTROS';
    position:absolute;
    left:50%;
    top:86px;
    transform:translateX(-50%) rotate(90deg);
    transform-origin:center;
    font-size:8px;
    font-weight:850;
    letter-spacing:.14em;
    color:#7c857e;
    white-space:nowrap;
  }
  body.filter-rail-collapsed #page-wardrobe .filter-rail-handle svg{
    transform:rotate(180deg);
  }

  /* Quando ambos estão recolhidos, a área central ganha o espaço imediatamente. */
  body.app-nav-collapsed.filter-rail-collapsed #page-wardrobe .wardrobe-main-area{
    min-width:0;
  }
}

/* Em telas móveis a navegação já muda de formato; não mostrar os controles de colapso. */
@media (max-width:1120px){
  .app-sidebar-handle,
  .filter-rail-handle{display:none!important}
}