:root{--teal:#0b7778;--teal2:#07585c;--ink:#17383f;--muted:#6b7e80;--paper:#f5f7f2;--line:#dfe7e2;--card:#fff;--accent:#e7f3f1;--shadow:0 10px 28px rgba(12,65,67,.08)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans Tamil",sans-serif}button,input,select,textarea{font:inherit}.app{min-height:100vh;display:grid;grid-template-columns:240px 1fr}.side{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#0b8182,#00535a);color:white;padding:24px 16px;display:flex;flex-direction:column;gap:20px}.brand{font-size:22px;font-weight:800}.side small{opacity:.65;letter-spacing:.08em}.nav{display:grid;gap:8px}.nav button{border:0;background:transparent;color:white;text-align:left;padding:13px 14px;border-radius:12px;cursor:pointer}.nav button.active,.nav button:hover{background:rgba(255,255,255,.14)}.made{margin-top:auto;font-size:12px;opacity:.65}.main{padding:28px;max-width:1220px;width:100%;margin:0 auto}.topline{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:20px}.eyebrow{font-size:11px;letter-spacing:.24em;color:#9d7c58}.status{font-size:12px;background:#eaf0e8;border-radius:999px;padding:8px 12px}.h1{font-size:30px;margin:4px 0 6px}.sub{color:var(--muted);margin:0 0 20px}.heroGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.dashCard{position:relative;min-height:190px;border-radius:22px;overflow:hidden;padding:20px;background:white;box-shadow:var(--shadow);border:1px solid rgba(20,80,80,.07);cursor:pointer}.dashCard h3{position:relative;z-index:2;margin:0 0 4px;font-size:16px}.dashCard .count{position:relative;z-index:2;font-size:38px;font-weight:800;line-height:1.05}.dashCard p{position:relative;z-index:2;margin:9px 0 0;max-width:46%;font-size:12px;color:#536d6e}.dashCard .art{position:absolute;inset:0 0 0 36%;display:flex;align-items:center;justify-content:center;opacity:.98}.dashCard .art svg{width:100%;height:100%}.c1{background:linear-gradient(135deg,#0d8b8c,#096d71);color:white}.c1 p{color:#dff6f2}.c2{background:linear-gradient(135deg,#eef6ff,#dfefff)}.c3{background:linear-gradient(135deg,#fff7df,#ffebbb)}.c4{background:linear-gradient(135deg,#eaf8ed,#d8f1df)}.c5{background:linear-gradient(135deg,#edf8f7,#dff1ed)}.c6{background:linear-gradient(135deg,#fff0ef,#ffd9d6)}.c7{background:linear-gradient(135deg,#edf3ff,#dbe8ff)}.quick{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.pill{border:0;border-radius:12px;padding:11px 15px;background:#ecefe9;color:#304d50;cursor:pointer}.panel{background:white;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:22px}.empty{min-height:230px;display:grid;place-items:center;text-align:center;color:var(--muted)}.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:14px 0 18px}.step{padding:11px 8px;text-align:center;border-radius:12px;background:#eef4f3;color:#526b6d;font-size:13px}.step.active{background:var(--teal);color:#fff}.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 16px}.tab{border:0;background:#eef1eb;border-radius:12px;padding:11px 16px;font-weight:700;color:#345658;cursor:pointer}.tab.active{background:#d9eef0;outline:2px solid #4b9ca0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.garment{border:1px solid var(--line);background:white;border-radius:16px;padding:10px;cursor:pointer;text-align:center;transition:.15s}.garment:hover{transform:translateY(-2px)}.garment.active{background:#dff1f2;outline:2px solid #2f9296}.garment .pic{height:150px;border-radius:12px;background:#faf6ee;display:grid;place-items:center;overflow:hidden}.garment .pic svg{width:100%;height:100%}.garment b{display:block;margin-top:10px;font-size:14px}.garment span{font-size:12px;color:#7c8a88}.sectionTitle{font-size:22px;margin:0 0 8px}.styleGroup{margin:18px 0}.styleGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.styleCard{border:1px solid var(--line);border-radius:14px;padding:10px;background:white;cursor:pointer;text-align:center}.styleCard.active{background:#dff1f2;outline:2px solid #2e9498}.styleCard svg{width:100%;height:110px;background:#faf6ee;border-radius:10px}.form2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:6px}.field label{font-size:13px;color:#587173}.field input,.field select,.field textarea{width:100%;border:1px solid #d7dfdb;border-radius:11px;padding:12px;background:#fff;color:#213f43}.field textarea{min-height:90px;resize:vertical}.measureLayout{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}.measureList{display:grid;grid-template-columns:1fr 1fr;gap:12px}.measureList .field input:focus{outline:2px solid #3e999d}.diagram{position:sticky;top:20px;background:#eaf6f5;border-radius:18px;padding:16px;min-height:520px}.diagram .garmentRef{height:140px;background:#fff8ec;border-radius:14px;display:grid;place-items:center;margin-bottom:12px}.diagram svg{width:100%;height:290px}.hint{text-align:center;color:#6d8384;font-size:12px}.actions{display:flex;justify-content:space-between;gap:12px;margin-top:20px}.btn{border:0;border-radius:12px;padding:12px 18px;cursor:pointer}.btn.primary{background:var(--teal);color:#fff}.btn.secondary{background:#ecefe8;color:#304b4e}.btn.danger{background:#ffe8e6;color:#9a3530}.summary{display:grid;gap:10px}.row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #edf1ee}.money{font-size:28px;font-weight:800}.orders{display:grid;gap:12px}.order{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.badge{display:inline-block;border-radius:999px;padding:6px 9px;background:#e7f1ef;font-size:12px}.photos{display:flex;gap:8px;flex-wrap:wrap}.photos img{width:86px;height:86px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.voiceBox{margin-top:14px;border:1px solid var(--line);border-radius:16px;padding:14px;background:#fbfcf8}.toast{position:fixed;right:18px;bottom:18px;background:#143b3f;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);z-index:50}.mobileTop{display:none}.copyright{font-size:11px;color:#8a9998;margin-top:18px}.numPad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.numPad button{padding:11px;border:0;border-radius:10px;background:#fff;font-weight:700}.measureTabs{display:flex;gap:8px;margin:8px 0 14px}.measureTabs button{border:0;padding:9px 13px;border-radius:10px;background:#e7eee9}.measureTabs button.active{outline:2px solid #4b9ca0;background:#d9eef0}@media(max-width:900px){.app{grid-template-columns:1fr}.side{position:fixed;left:0;top:0;bottom:0;width:240px;z-index:40;transform:translateX(-100%);transition:.2s}.side.open{transform:translateX(0)}.mobileTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.main{padding:16px}.heroGrid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.styleGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.measureLayout{grid-template-columns:1fr}.diagram{position:static}.form2,.measureList{grid-template-columns:1fr}}@media(max-width:560px){.heroGrid{grid-template-columns:1fr}.dashCard{min-height:175px}.grid{grid-template-columns:1fr 1fr}.garment .pic{height:125px}.steps{grid-template-columns:repeat(2,1fr)}.main{padding:12px}.h1{font-size:25px}.panel{padding:15px}.dashCard p{max-width:52%}}

/* v20 visual refinement: full-card dashboard art + clearer image-first selection */
.dashCard{min-height:220px;isolation:isolate}
.dashCard .art{inset:0;opacity:.72;z-index:0;transform:scale(1.04);pointer-events:none}
.dashCard .art svg{width:100%;height:100%;object-fit:cover}
.dashCard::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.83) 34%,rgba(255,255,255,.26) 62%,rgba(255,255,255,.04) 100%);pointer-events:none}
.dashCard.c1::after{background:linear-gradient(90deg,rgba(4,93,96,.96) 0%,rgba(5,105,108,.83) 36%,rgba(7,116,119,.28) 68%,rgba(7,116,119,.04) 100%)}
.dashCard h3,.dashCard .count,.dashCard p{z-index:2}
.dashCard p{max-width:48%;font-weight:600}
.garment .pic{height:165px}
.garment .pic svg{transform:scale(1.03)}
.styleCard svg{height:125px}
.diagram{overflow:hidden}
.diagram #measureDiagram{background:rgba(255,255,255,.5);border-radius:14px;margin-top:8px}
@media(max-width:900px){.dashCard{min-height:205px}.dashCard .art{transform:scale(1.08)}}
@media(max-width:560px){.dashCard{min-height:205px}.dashCard p{max-width:55%}.garment .pic{height:138px}.styleCard svg{height:118px}}


/* v21 mobile-first correction */
html,body{max-width:100%;overflow-x:hidden}
.dashCard{min-height:220px}
.dashCard .art{inset:0!important;transform:none!important;opacity:.9}
.dashCard .art svg{width:100%;height:100%;display:block}
.dashCard::after{background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.91) 34%,rgba(255,255,255,.46) 56%,rgba(255,255,255,.08) 82%,rgba(255,255,255,0) 100%)}
.dashCard.c1::after{background:linear-gradient(90deg,rgba(5,92,96,.98) 0%,rgba(5,102,106,.92) 35%,rgba(5,106,110,.48) 58%,rgba(5,106,110,.08) 85%,rgba(5,106,110,0) 100%)}
.dashCard p{max-width:47%;line-height:1.35}
.order{width:100%}

@media(max-width:1100px){
 .app{grid-template-columns:1fr}
 .side{position:fixed;left:0;top:0;bottom:0;width:min(290px,82vw);height:100dvh;z-index:100;transform:translateX(-105%);transition:transform .22s ease;box-shadow:14px 0 36px rgba(0,0,0,.18)}
 .side.open{transform:translateX(0)}
 .mobileTop{display:flex;position:sticky;top:0;z-index:80;justify-content:space-between;align-items:center;margin:-16px -16px 14px;padding:12px 16px;background:rgba(245,247,242,.96);backdrop-filter:blur(10px);border-bottom:1px solid #e3e9e5}
 .main{max-width:none;width:100%;padding:16px}
 .topline{margin-top:2px}
 .heroGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .dashCard{min-height:210px}
 .dashCard h3{font-size:17px}
 .dashCard .count{font-size:36px}
 .dashCard p{font-size:12px;max-width:52%}
 .steps{grid-template-columns:repeat(3,1fr)}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .styleGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .measureLayout{grid-template-columns:1fr}
 .diagram{position:static}
 .form2,.measureList{grid-template-columns:1fr}
 .panel{width:100%}
 .orders{width:100%}
 .order{grid-template-columns:minmax(0,1fr) auto}
}

@media(max-width:640px){
 .main{padding:12px}
 .mobileTop{margin:-12px -12px 12px;padding:10px 12px}
 .topline{align-items:flex-start;gap:8px}
 .eyebrow{font-size:9px;letter-spacing:.18em}
 .status{font-size:10px;padding:6px 9px;white-space:nowrap}
 .h1{font-size:25px;line-height:1.1}
 .sub{font-size:14px}
 .heroGrid{grid-template-columns:1fr}
 .dashCard{min-height:185px;padding:18px;border-radius:18px}
 .dashCard .count{font-size:34px}
 .dashCard p{font-size:13px;max-width:50%}
 .dashCard .art{opacity:.96}
 .quick{gap:8px}
 .pill{padding:10px 12px}
 .panel{padding:14px;border-radius:18px}
 .grid{grid-template-columns:1fr 1fr;gap:10px}
 .garment{padding:8px}
 .garment .pic{height:124px}
 .garment b{font-size:13px}
 .garment span{font-size:11px}
 .steps{grid-template-columns:repeat(2,1fr);gap:7px}
 .step{font-size:12px;padding:9px 6px}
 .styleGrid{grid-template-columns:1fr 1fr}
 .styleCard svg{height:105px}
 .order{grid-template-columns:1fr;gap:12px;padding:12px}
 .order .btn{width:100%}
 .actions{position:sticky;bottom:0;background:rgba(245,247,242,.96);padding:10px 0 2px;z-index:20}
}

@media(hover:none) and (pointer:coarse){
 .app{grid-template-columns:1fr}
 .side{position:fixed;left:0;top:0;bottom:0;width:min(290px,82vw);height:100dvh;z-index:100;transform:translateX(-105%);transition:transform .22s ease}
 .side.open{transform:translateX(0)}
 .mobileTop{display:flex}
}


/* v23 clear visual redesign */
.heroGrid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.dashCard{
  min-height:250px;
  border-radius:24px;
  padding:0;
  overflow:hidden;
  border:0;
  box-shadow:0 14px 34px rgba(11,70,72,.12);
}
.dashCard[data-dash="new"]{
  grid-column:1/-1;
  min-height:285px;
}
.dashCard .art{
  inset:0!important;
  opacity:1!important;
  z-index:0;
}
.dashCard .art svg{
  width:100%;
  height:100%;
  display:block;
}
.dashCard::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 34%,rgba(255,255,255,.56) 52%,rgba(255,255,255,.10) 76%,rgba(255,255,255,0) 100%);
}
.dashCard.c1::after{
  background:linear-gradient(90deg,rgba(4,75,79,.98) 0%,rgba(5,93,97,.93) 35%,rgba(5,102,106,.62) 54%,rgba(5,102,106,.12) 80%,rgba(5,102,106,0) 100%);
}
.dashCard h3,.dashCard .count,.dashCard p{
  position:relative;
  z-index:2;
  margin-left:22px;
}
.dashCard h3{
  margin-top:22px;
  font-size:20px;
  font-weight:800;
}
.dashCard .count{
  font-size:46px;
  margin-top:5px;
}
.dashCard p{
  max-width:42%;
  font-size:14px;
  line-height:1.45;
  font-weight:650;
}
.dashCard[data-dash="queue"] .art svg,
.dashCard[data-dash="delivered"] .art svg{
  transform:scale(1.08);
  transform-origin:center;
}
.dashCard[data-dash="queue"],
.dashCard[data-dash="delivered"]{
  min-height:270px;
}
.dashCard[data-dash="queue"] p,
.dashCard[data-dash="delivered"] p{
  max-width:38%;
}
.selectedDesignBanner{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:22px;
  align-items:center;
  border:1px solid #dce8e3;
  background:linear-gradient(135deg,#f8fbf8,#edf7f5);
  border-radius:20px;
  padding:18px;
  margin-bottom:22px;
}
.selectedDesignImage{
  height:190px;
  border-radius:16px;
  overflow:hidden;
  background:#fff7ec;
  display:grid;
  place-items:center;
}
.selectedDesignImage svg,
.selectedDesignImage img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.selectedDesignBanner h2{
  margin:4px 0 8px;
  font-size:26px;
}
.selectedDesignBanner p{
  margin:0;
  color:#667d7c;
  max-width:720px;
}
.miniLabel{
  display:inline-block;
  font-size:10px;
  letter-spacing:.16em;
  font-weight:800;
  color:#0b7778;
}
.styleGrid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.styleCard{
  min-height:175px;
  padding:12px;
  transition:transform .15s ease,box-shadow .15s ease;
}
.styleCard:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(11,70,72,.08);
}
.styleCard.active{
  box-shadow:0 0 0 3px rgba(46,148,152,.22);
}
.styleCard svg{
  height:125px;
}
.measureRefTitle,.activeMeasureTitle{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
  margin-bottom:8px;
}
.measureRefTitle span,.activeMeasureTitle span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#6e8382;
}
.measureRefTitle b,.activeMeasureTitle b{
  font-size:13px;
}
.diagram .garmentRef{
  height:180px;
  margin-bottom:16px;
  overflow:hidden;
}
.diagram .garmentRef svg,
.diagram .garmentRef img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.diagram #measureDiagram{
  background:white;
  border:1px solid #dbe7e2;
  padding:8px;
}
.garment{
  overflow:hidden;
}
.garment .pic{
  height:178px;
}
.garment .pic svg{
  transform:scale(1.06);
}

@media(max-width:900px){
  .heroGrid{grid-template-columns:1fr 1fr}
  .dashCard[data-dash="new"]{grid-column:1/-1}
  .styleGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .selectedDesignBanner{grid-template-columns:170px 1fr}
  .selectedDesignImage{height:160px}
}
@media(max-width:640px){
  .heroGrid{grid-template-columns:1fr}
  .dashCard[data-dash="new"]{grid-column:auto}
  .dashCard,.dashCard[data-dash="queue"],.dashCard[data-dash="delivered"]{
    min-height:220px;
  }
  .dashCard h3{font-size:18px;margin-left:18px;margin-top:18px}
  .dashCard .count{font-size:40px;margin-left:18px}
  .dashCard p{font-size:13px;max-width:49%;margin-left:18px}
  .dashCard[data-dash="queue"] p,.dashCard[data-dash="delivered"] p{max-width:46%}
  .selectedDesignBanner{grid-template-columns:1fr;gap:14px;padding:14px}
  .selectedDesignImage{height:220px}
  .selectedDesignBanner h2{font-size:22px}
  .styleGrid{grid-template-columns:1fr 1fr}
  .styleCard{min-height:155px}
  .styleCard svg{height:105px}
  .garment .pic{height:138px}
}


/* v24 compact workspace — one-screen desktop dashboard */
.dashHeader{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}
.dashHeader .h1{margin-bottom:2px}
.dashHeader .sub{margin:0}
.dashLegend{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#68807e;
  background:#edf4ef;
  padding:7px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.dashWorkspace{
  display:grid;
  gap:10px;
  min-height:0;
}
.statusTiles{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:10px;
}
.statusTile{
  position:relative;
  min-width:0;
  height:138px;
  overflow:hidden;
  border:1px solid #e1e8e4;
  border-radius:17px;
  padding:13px;
  text-align:left;
  background:#fff;
  color:#17383f;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(20,67,68,.06);
}
.statusTile .tileText{
  position:relative;
  z-index:3;
  display:flex;
  height:100%;
  flex-direction:column;
  align-items:flex-start;
}
.tileLabel{
  font-size:12px;
  font-weight:800;
  line-height:1.15;
}
.statusTile strong{
  font-size:28px;
  line-height:1;
  margin-top:8px;
}
.statusTile small{
  margin-top:auto;
  max-width:72%;
  font-size:10px;
  font-weight:700;
  color:#607574;
  line-height:1.2;
}
.statusTile .tileArt{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.72;
}
.statusTile .tileArt svg{
  width:100%;
  height:100%;
  display:block;
}
.statusTile::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.91) 49%,rgba(255,255,255,.34) 72%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.statusTile.c1{
  color:#fff;
  border-color:#0d7f83;
}
.statusTile.c1 small{color:#d8eeee}
.statusTile.c1::after{
  background:linear-gradient(90deg,rgba(5,92,96,.98) 0%,rgba(5,100,103,.92) 50%,rgba(5,100,103,.32) 76%,rgba(5,100,103,0) 100%);
}
.statusTile:hover{transform:translateY(-1px)}
.moduleSection{
  border:1px solid #e1e8e4;
  border-radius:16px;
  padding:10px 12px;
  background:#fff;
}
.moduleTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:8px;
}
.moduleTitle b{font-size:13px}
.moduleTitle span{font-size:10px;color:#788c8b}
.moduleGrid{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:8px;
}
.moduleTile{
  min-width:0;
  height:66px;
  border:1px solid #e3eae6;
  border-radius:13px;
  background:#f8faf7;
  display:grid;
  grid-template-columns:30px 1fr;
  grid-template-rows:1fr 1fr;
  column-gap:7px;
  align-items:center;
  padding:8px;
  text-align:left;
  color:#17383f;
  cursor:pointer;
}
.moduleIcon{
  grid-row:1/3;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#dceeed;
  color:#0b7778;
  font-size:12px;
  font-weight:900;
}
.moduleTile b{
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.moduleTile small{
  font-size:9px;
  color:#7a8e8c;
}
.moduleTile.planned{opacity:.76}
.nextBar{
  min-height:72px;
  display:grid;
  grid-template-columns:180px 1fr auto;
  gap:10px;
  align-items:center;
  border:1px solid #e1e8e4;
  border-radius:16px;
  padding:10px 12px;
  background:#fff;
}
.nextBar>div:first-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.nextBar>div:first-child b{font-size:12px}
.nextBarOrders{
  display:flex;
  gap:8px;
  min-width:0;
}
.nextChip{
  min-width:0;
  flex:1;
  border:1px solid #e4eae6;
  background:#f7f9f6;
  border-radius:11px;
  padding:8px 10px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:2px;
  color:#17383f;
}
.nextChip b{
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nextChip span,.nextEmpty{
  font-size:9px;
  color:#738684;
}
.miniAction{
  border:0;
  border-radius:10px;
  padding:9px 11px;
  background:#e7efea;
  color:#284b4c;
  font-weight:700;
  font-size:10px;
}

/* Compact measurement workspace */
.measureHead{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:16px;
  margin-bottom:10px;
}
.measureHead .sectionTitle{margin-bottom:2px}
.measureHead .sub{margin:0;font-size:11px}
.measureHead .measureTabs{margin:0;flex-wrap:nowrap}
.measureHead .measureTabs button{
  padding:7px 10px;
  font-size:10px;
}
.measureHead .measureTabs button:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.compactMeasure{
  grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);
  gap:14px;
  align-items:start;
}
.compactFields{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 10px;
}
.compactFields .field{gap:3px}
.compactFields label{font-size:10px}
.compactFields input{
  padding:8px 9px;
  min-height:36px;
}
.compactAdd{
  margin-top:9px!important;
  padding:8px 10px;
  font-size:10px;
}
.compactDiagram{
  padding:11px;
}
.compactVisualTop{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:10px;
  align-items:start;
}
.compactDiagram .measureRefTitle,
.compactDiagram .activeMeasureTitle{
  margin-bottom:5px;
}
.compactDiagram .measureRefTitle span,
.compactDiagram .activeMeasureTitle span{
  font-size:8px;
}
.compactDiagram .measureRefTitle b,
.compactDiagram .activeMeasureTitle b{
  font-size:10px;
}
.compactDiagram .garmentRef{
  height:165px;
  margin:0;
}
.compactDiagram #measureDiagram{
  height:165px;
  margin:0;
  padding:4px;
  overflow:hidden;
}
.compactDiagram #measureDiagram svg{
  width:100%;
  height:100%;
}
.compactPad{
  grid-template-columns:repeat(5,1fr);
  gap:5px;
  margin-top:8px;
}
.compactPad button{
  padding:7px 4px;
  min-height:31px;
  font-size:11px;
}

/* On normal desktop screens the dashboard must stay within one viewport. */
@media(min-width:1101px){
  .page-dashboard{
    height:100dvh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding-top:15px;
    padding-bottom:8px;
  }
  .page-dashboard .topline{flex:0 0 auto}
  .page-dashboard .dashHeader{flex:0 0 auto}
  .page-dashboard .dashWorkspace{
    flex:1 1 auto;
    grid-template-rows:minmax(118px,1fr) auto auto;
  }
  .page-dashboard .statusTiles{min-height:0}
  .page-dashboard .statusTile{
    height:100%;
    min-height:118px;
    max-height:155px;
  }
  .page-dashboard .copyright{
    flex:0 0 auto;
    margin-top:5px;
    font-size:9px;
  }
  .page-new .panel{
    padding-top:14px;
    padding-bottom:14px;
  }
  .page-new .compactMeasure{
    max-height:455px;
  }
}

/* Tablet/mobile can scroll, but stays much denser than before. */
@media(max-width:1100px){
  .statusTiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .moduleGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nextBar{grid-template-columns:1fr}
  .nextBarOrders{width:100%}
}
@media(max-width:640px){
  .dashHeader{align-items:flex-start}
  .dashLegend{display:none}
  .statusTiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .statusTile{height:120px;padding:10px}
  .statusTile strong{font-size:24px}
  .statusTile small{max-width:70%;font-size:9px}
  .moduleGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .moduleTitle span{display:none}
  .nextBarOrders{flex-direction:column}
  .measureHead{align-items:flex-start;flex-direction:column}
  .measureHead .measureTabs{width:100%}
  .measureHead .measureTabs button{flex:1}
  .compactMeasure{grid-template-columns:1fr}
  .compactFields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compactVisualTop{grid-template-columns:1fr 1.25fr}
  .compactDiagram .garmentRef,.compactDiagram #measureDiagram{height:145px}
}


/* v25 functional business modules */
.moduleHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:12px;
}
.moduleHead .h1{margin:5px 0 2px}
.backDash{
  border:0;
  background:transparent;
  padding:0;
  color:#0b7778;
  font-weight:800;
  font-size:11px;
  cursor:pointer;
}
.moduleCount{
  padding:7px 10px;
  border-radius:999px;
  background:#edf4ef;
  color:#42615f;
  font-size:11px;
  font-weight:800;
}
.dataTable{
  display:grid;
  gap:8px;
}
.dataRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) 140px 160px;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border:1px solid #e4ebe7;
  border-radius:12px;
  background:#fff;
}
.dataRow>div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.dataRow span,.dataRow small{
  font-size:9px;
  color:#738684;
}
.dataRow b{font-size:12px}
.financeGrid,.reportGrid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.financeCard,.reportGrid>div{
  min-height:110px;
  border:1px solid #e1e8e4;
  border-radius:15px;
  background:#fff;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.financeCard span,.reportGrid span{
  font-size:10px;
  color:#6f8381;
  font-weight:700;
}
.financeCard b,.reportGrid b{
  font-size:22px;
  color:#17383f;
}
.financeCard.accent{
  background:#0b7778;
  border-color:#0b7778;
}
.financeCard.accent span,.financeCard.accent b{color:#fff}
.expenseForm{
  display:grid;
  grid-template-columns:minmax(0,1fr) 160px auto;
  gap:8px;
  margin-bottom:12px;
}
.expenseForm input{
  border:1px solid #dfe7e2;
  border-radius:10px;
  padding:9px 10px;
  min-height:38px;
}
.reportGrid{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.reportGrid>div{
  min-height:95px;
}
.moduleTile:not(.planned):hover{
  border-color:#9ec7c2;
  background:#f2f9f7;
}
.statusTile{touch-action:manipulation}
.statusTile .tileArt{pointer-events:none}
.statusTile .tileText{pointer-events:none}

@media(max-width:900px){
  .financeGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reportGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dataRow{grid-template-columns:minmax(0,1fr) 110px 120px}
}
@media(max-width:640px){
  .moduleHead{align-items:flex-start;flex-direction:column}
  .expenseForm{grid-template-columns:1fr}
  .dataRow{grid-template-columns:1fr 1fr}
  .dataRow>div:first-child{grid-column:1/-1}
  .financeGrid,.reportGrid{grid-template-columns:1fr 1fr}
}


/* v26 simplified dashboard + obvious active filters */
.statusTiles{
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(112px,1fr);
}
.statusTile{
  height:auto;
  min-height:112px;
  max-height:132px;
}
.moduleGrid{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.moduleSection{
  padding:9px 11px;
}
.moduleTitle span{
  color:#5f7775;
}
.orderFilters{
  gap:7px;
  margin:8px 0 12px;
  flex-wrap:wrap;
}
.orderFilters .pill{
  border:1px solid #dbe5df;
  background:#edf1ee;
  color:#5f6f6e;
  font-weight:750;
  transition:.15s ease;
}
.orderFilters .pill:hover{
  border-color:#8ebfba;
  background:#e4f1ef;
}
.orderFilters .pill.active,
.orderFilters .pill[aria-pressed="true"]{
  background:#0b7778;
  border-color:#0b7778;
  color:#fff;
  box-shadow:0 4px 12px rgba(11,119,120,.22);
}
.orderFilters .pill.active::before{
  content:"✓ ";
  font-weight:900;
}
.moduleHead .sub b{
  color:#0b7778;
}
@media(min-width:1101px){
  .page-dashboard .dashWorkspace{
    grid-template-rows:minmax(230px,1fr) auto auto;
  }
  .page-dashboard .statusTiles{
    align-content:stretch;
  }
  .page-dashboard .statusTile{
    max-height:none;
  }
}
@media(max-width:1100px){
  .statusTiles{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .moduleGrid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:640px){
  .statusTiles{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .statusTile{
    min-height:118px;
    max-height:none;
  }
  .moduleGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .orderFilters{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .orderFilters .pill{
    width:100%;
    text-align:center;
  }
}


/* v27 business module polish */
.compactPanel{padding:12px}
.orderFilters{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:7px;
  margin:8px 0 12px;
}
.orderFilter{
  border:1px solid #dbe5df;
  border-radius:11px;
  background:#edf1ee;
  color:#5f6f6e;
  min-height:48px;
  padding:7px 9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-weight:800;
  cursor:pointer;
}
.orderFilter span{font-size:10px}
.orderFilter b{
  min-width:24px;
  height:24px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#dde6e1;
  font-size:10px;
}
.orderFilter.active,
.orderFilter[aria-pressed="true"]{
  background:#0b7778;
  border-color:#0b7778;
  color:#fff;
  box-shadow:0 5px 14px rgba(11,119,120,.2);
}
.orderFilter.active b,
.orderFilter[aria-pressed="true"] b{
  background:rgba(255,255,255,.18);
}
.orderV27{
  padding:11px 12px;
  border-radius:13px;
}
.orderMain{min-width:0}
.orderTitle{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}
.orderTitle>b{font-size:12px}
.orderMeta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  margin-top:7px;
}
.orderMeta span{
  font-size:9px;
  color:#738684;
}
.orderMeta b{color:#284c4c}
.compactBtn{
  padding:8px 11px!important;
  min-width:66px;
}
.badge.status-new{background:#e7f1ef;color:#2f6f6c}
.badge.status-in-progress{background:#fff1d9;color:#9a6515}
.badge.status-ready{background:#e0f4e6;color:#2f7d48}
.badge.status-delivered{background:#e5ebf6;color:#526e9e}

.customerGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.customerCard{
  border:1px solid #e3eae6;
  border-radius:14px;
  padding:11px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:10px;
  background:#fff;
}
.customerAvatar{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#dceeed;
  color:#0b7778;
  font-weight:900;
  font-size:17px;
}
.customerInfo{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.customerInfo b{
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.customerInfo span{
  font-size:9px;
  color:#758887;
}
.customerStats{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}
.customerStats>div{
  border-radius:10px;
  background:#f5f8f5;
  padding:7px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.customerStats span{font-size:8px;color:#7a8c8a}
.customerStats b{font-size:10px}

.financeGridV27{grid-template-columns:repeat(5,minmax(0,1fr))}
.financeCard small{
  font-size:8px;
  color:#82918f;
}
.financeCard.warn{
  background:#fff7e7;
  border-color:#f1dfb8;
}
.accountLower{margin-top:10px}
.panelTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.panelTitleRow b{font-size:12px}
.panelTitleRow span{font-size:9px;color:#788b89}
.compactData{
  grid-template-columns:minmax(0,1fr) 120px;
}
.smallEmpty{min-height:80px}

.paymentList{
  display:grid;
  gap:9px;
}
.paymentRow{
  border:1px solid #e3eae6;
  border-radius:13px;
  padding:10px 12px;
  background:#fff;
}
.paymentTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.paymentTop>div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.paymentTop>div:last-child{text-align:right}
.paymentTop b{font-size:11px}
.paymentTop span{font-size:9px;color:#748685}
.payBar{
  height:7px;
  margin:8px 0 4px;
  border-radius:999px;
  background:#edf1ee;
  overflow:hidden;
}
.payBar i{
  display:block;
  height:100%;
  background:#0b7778;
  border-radius:999px;
}
.paymentRow small{font-size:8px;color:#768986}

.expenseFormV27{
  grid-template-columns:minmax(0,1fr) 150px 135px auto;
}
.expenseForm select{
  border:1px solid #dfe7e2;
  border-radius:10px;
  padding:9px 10px;
  min-height:38px;
  background:#fff;
}
.expenseRow{
  grid-template-columns:minmax(0,1fr) 120px auto;
}
.iconBtn{
  width:32px;
  height:32px;
  border-radius:9px;
  border:1px solid #e2e9e5;
  background:#f8faf7;
  cursor:pointer;
}
.iconBtn.danger{
  color:#b24d49;
}
.iconBtn.danger:hover{
  background:#fff0ef;
  border-color:#efc8c5;
}

.reportGridV27{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.reportLower{
  margin-top:10px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
}
.statusBars{
  display:grid;
  gap:8px;
}
.statusBarRow{
  display:grid;
  grid-template-columns:80px 1fr 24px;
  gap:8px;
  align-items:center;
}
.statusBarRow span,.statusBarRow b{font-size:9px}
.statusBarTrack{
  height:8px;
  border-radius:999px;
  background:#edf1ee;
  overflow:hidden;
}
.statusBarTrack i{
  display:block;
  height:100%;
  border-radius:999px;
  background:#0b7778;
}
.reportMoney{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
}
.reportMoney>div{
  border-radius:10px;
  background:#f5f8f5;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.reportMoney span{font-size:9px;color:#718482}
.reportMoney b{font-size:11px}

@media(max-width:1100px){
  .orderFilters{grid-template-columns:repeat(4,minmax(0,1fr))}
  .financeGridV27{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reportGridV27{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .orderFilters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .customerGrid{grid-template-columns:1fr}
  .financeGridV27{grid-template-columns:1fr 1fr}
  .reportGridV27{grid-template-columns:1fr 1fr}
  .reportLower{grid-template-columns:1fr}
  .expenseFormV27{grid-template-columns:1fr}
  .expenseRow{grid-template-columns:1fr auto}
  .expenseRow>div:first-child{grid-column:1/-1}
  .orderMeta{display:grid;grid-template-columns:1fr 1fr}
  .paymentTop{align-items:flex-start}
}


/* v28 order-flow overhaul */
.orderFlowHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.editBadge{
  padding:7px 10px;
  border-radius:999px;
  background:#fff0cf;
  color:#8a6418;
  font-size:10px;
  font-weight:800;
}
.orderStep{
  padding:14px;
  min-height:0;
}
.orderActions{
  position:sticky;
  bottom:0;
  z-index:30;
  margin-top:8px;
  padding:8px 0 2px;
  background:linear-gradient(180deg,rgba(245,247,242,0),rgba(245,247,242,.96) 24%,rgba(245,247,242,.96));
}

/* Step 2 */
.dressWorkspace{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(310px,.85fr);
  gap:14px;
  min-height:0;
}
.dressPicker,.designRefPanel{
  min-width:0;
}
.stepSectionHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}
.stepSectionHead .sectionTitle{margin-bottom:3px}
.compactTabs{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.compactTabs .tab{
  padding:7px 9px;
  font-size:10px;
}
.garmentViewport{
  max-height:470px;
  overflow:auto;
  padding-right:4px;
}
.garmentGridCompact{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.garmentCompact{
  position:relative;
  min-width:0;
  border:1px solid #dfe7e2;
  border-radius:13px;
  background:#fff;
  padding:7px;
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:8px;
  align-items:center;
  text-align:left;
  color:#17383f;
  cursor:pointer;
}
.garmentCompact:hover{
  border-color:#9bc7c3;
  background:#f6fbf9;
}
.garmentCompact.active{
  border:2px solid #15959a;
  background:#e8f7f6;
  box-shadow:0 0 0 3px rgba(21,149,154,.09);
}
.garmentThumb{
  height:78px;
  border-radius:9px;
  overflow:hidden;
  background:#fbf5ea;
}
.garmentThumb svg{
  width:100%;
  height:100%;
  display:block;
}
.garmentName{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.garmentName b{
  font-size:11px;
  line-height:1.15;
}
.garmentName span{
  font-size:9px;
  color:#738684;
  overflow:hidden;
  text-overflow:ellipsis;
}
.garmentCompact>i{
  position:absolute;
  right:7px;
  top:7px;
  width:20px;
  height:20px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#0b7778;
  color:#fff;
  font-style:normal;
  font-size:10px;
}
.designRefPanel{
  border:1px solid #dfe7e2;
  border-radius:15px;
  background:#f9fbf8;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:9px;
  align-self:start;
}
.designRefTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.designRefTop h3{margin:2px 0 0;font-size:15px}
.selectedGarmentPill{
  padding:6px 9px;
  border-radius:999px;
  background:#dceeed;
  color:#0b7778;
  font-size:9px;
  font-weight:800;
}
.compactPhotos{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.photoWrap{
  position:relative;
  width:70px;
  height:70px;
}
.photoWrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:9px;
}
.photoWrap button{
  position:absolute;
  right:-4px;
  top:-4px;
  width:20px;
  height:20px;
  border:0;
  border-radius:50%;
  background:#b24d49;
  color:white;
  cursor:pointer;
}
.compactVoice{
  padding:9px;
}
.compactVoice .quick{margin-top:6px}

/* Step 3 */
.styleWorkspace{
  display:grid;
  gap:10px;
}
.selectedDesignStrip{
  display:grid;
  grid-template-columns:92px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  border:1px solid #dce8e3;
  background:linear-gradient(135deg,#f8fbf8,#edf7f5);
  border-radius:14px;
  padding:10px;
}
.selectedDesignMini{
  height:82px;
  border-radius:10px;
  overflow:hidden;
  background:#fff7ec;
}
.selectedDesignMini svg,
.selectedDesignMini img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.selectedDesignStrip h2{
  margin:1px 0 3px;
  font-size:20px;
}
.selectedDesignStrip p{
  margin:0;
  color:#6a7d7b;
  font-size:10px;
}
.styleCurrent{
  display:grid;
  gap:5px;
  min-width:130px;
}
.styleCurrent span{
  display:flex;
  justify-content:space-between;
  gap:8px;
  border-radius:9px;
  background:white;
  padding:6px 8px;
  font-size:9px;
  color:#718381;
}
.styleCurrent b{color:#17383f}
.styleColumns{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:10px;
}
.stylePane{
  border:1px solid #e1e8e4;
  border-radius:13px;
  padding:9px;
  background:#fff;
}
.stylePane h3{
  margin:0 0 7px;
  font-size:12px;
}
.styleGridCompact{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
.stylePane:first-child .styleGridCompact{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.styleGridCompact .styleCard{
  min-height:0;
  padding:5px;
  border-radius:10px;
}
.styleGridCompact .styleCard svg{
  height:72px;
}
.styleGridCompact .styleCard div{
  font-size:9px;
  margin-top:3px;
}
.styleGridCompact .styleCard.active{
  border:2px solid #14959a;
  background:#e7f6f5;
  box-shadow:0 0 0 3px rgba(20,149,154,.08);
}
.styleOptionsGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px 10px;
}
.styleOptionsGrid .field{gap:3px}
.styleOptionsGrid label{font-size:9px}
.styleOptionsGrid select,
.styleOptionsGrid textarea{
  min-height:36px;
  padding:7px 8px;
  font-size:10px;
}
.notesField{grid-column:span 1}

/* Step 4 */
.measureWorkspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(430px,.9fr);
  gap:12px;
  align-items:start;
}
.measureEntry{min-width:0}
.measureTool{
  min-width:0;
  align-self:start;
  border:1px solid #d7e8e5;
  border-radius:14px;
  background:#edf8f7;
  padding:10px;
  height:auto!important;
  min-height:0!important;
}
.measureVisuals{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:8px;
}
.measureVisualCard{
  min-width:0;
}
.measureVisualCard .garmentRef,
.measureVisualCard #measureDiagram{
  height:145px;
  margin:0;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.measureVisualCard .garmentRef svg,
.measureVisualCard .garmentRef img,
.measureVisualCard #measureDiagram svg{
  width:100%;
  height:100%;
  object-fit:cover;
}
.keypadArea{
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
}
.standardPad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
}
.standardPad button,
.fractionBar button{
  min-height:34px;
  border:0;
  border-radius:8px;
  background:#fff;
  font-weight:800;
  cursor:pointer;
}
.fractionBar{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  width:48px;
}
.compactFields{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.compactFields input{
  min-height:36px;
}
.measureHead{
  margin-bottom:8px;
}

/* Step 5 */
.chargesWorkspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:16px;
  align-items:start;
}
.chargeFields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
.chargeSummary{
  border:1px solid #d9e9e6;
  border-radius:15px;
  background:#edf8f6;
  padding:13px;
  display:grid;
  gap:7px;
}
.chargeSummary>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 9px;
  border-radius:10px;
  background:#fff;
}
.chargeSummary span{font-size:10px;color:#6b7e7c}
.chargeSummary b{font-size:15px}
.balanceBox{
  background:#0b7778!important;
}
.balanceBox span,.balanceBox b{color:#fff!important}
.balanceBox b{font-size:23px}
.warnText{
  color:#b24d49;
  font-size:9px;
  font-weight:800;
}

/* Step 6 */
.reviewWorkspace{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);
  gap:14px;
}
.reviewMain,.reviewMoney{
  border:1px solid #e1e8e4;
  border-radius:14px;
  background:#fff;
  padding:12px;
}
.reviewTitle{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.reviewRows{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  margin-top:8px;
}
.reviewRows>div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 8px;
  background:#f7f9f6;
  border-radius:8px;
  margin:3px;
}
.reviewRows span{font-size:9px;color:#718381}
.reviewRows b{font-size:10px;text-align:right}
.reviewMoney{
  display:grid;
  gap:7px;
}
.reviewGarment{
  height:120px;
  border-radius:10px;
  overflow:hidden;
  background:#fbf5ea;
}
.reviewGarment svg,.reviewGarment img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.reviewMoney>div:not(.reviewGarment){
  display:flex;
  justify-content:space-between;
  padding:8px;
  border-radius:9px;
  background:#f6f8f5;
}
.reviewMoney span{font-size:9px;color:#738684}
.reviewMoney b{font-size:12px}
.reviewBalance{
  background:#0b7778!important;
}
.reviewBalance span,.reviewBalance b{color:#fff!important}
.reviewBalance b{font-size:21px}

/* Order modal */
.orderModal{
  position:fixed;
  inset:0;
  z-index:500;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(14,40,42,.38);
  backdrop-filter:blur(4px);
}
.orderModalCard{
  width:min(620px,100%);
  border-radius:18px;
  background:#fff;
  padding:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}
.modalHead{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.modalHead h3{margin:2px 0 0}
.modalStats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:12px 0;
}
.modalStats>div{
  border-radius:10px;
  background:#f4f7f4;
  padding:9px;
  display:flex;
  flex-direction:column;
}
.modalStats span{font-size:9px;color:#748684}
.modalStats b{font-size:14px}
.modalActions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}
.dangerBtn{
  margin-right:auto;
  border:1px solid #e7b8b5!important;
  background:#fff0ef!important;
  color:#a33f3a!important;
}
.backupCompact{
  min-height:0!important;
}
.backupStats{
  display:flex;
  gap:8px;
  margin:12px 0 8px;
}
.backupStats span{
  padding:8px 10px;
  border-radius:10px;
  background:#f5f8f5;
  font-size:10px;
}
.backupStats b{font-size:15px}

/* keep new-order desktop within a practical viewport */
@media(min-width:1101px){
  .page-new .steps{
    margin-bottom:8px;
  }
  .page-new .orderStep{
    max-height:calc(100dvh - 250px);
    overflow:auto;
  }
  .page-new .orderStep2,
  .page-new .orderStep3,
  .page-new .orderStep4{
    overflow:hidden;
  }
  .page-new .garmentViewport{
    max-height:calc(100dvh - 360px);
  }
}

@media(max-width:1100px){
  .dressWorkspace,
  .chargesWorkspace,
  .reviewWorkspace,
  .measureWorkspace{
    grid-template-columns:1fr;
  }
  .styleColumns{
    grid-template-columns:1fr;
  }
  .designRefPanel{
    position:static;
  }
  .garmentGridCompact{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-new .orderStep{
    max-height:none;
    overflow:visible;
  }
  .garmentViewport{
    max-height:none;
    overflow:visible;
  }
}
@media(max-width:640px){
  .stepSectionHead{
    flex-direction:column;
  }
  .compactTabs{
    justify-content:flex-start;
  }
  .garmentGridCompact{
    grid-template-columns:1fr;
  }
  .garmentCompact{
    grid-template-columns:76px 1fr;
  }
  .styleColumns{
    grid-template-columns:1fr;
  }
  .styleGridCompact,
  .stylePane:first-child .styleGridCompact{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .selectedDesignStrip{
    grid-template-columns:70px 1fr;
  }
  .styleCurrent{
    grid-column:1/-1;
    grid-template-columns:1fr 1fr;
  }
  .styleOptionsGrid{
    grid-template-columns:1fr 1fr;
  }
  .notesField{grid-column:1/-1}
  .compactFields{
    grid-template-columns:1fr 1fr;
  }
  .measureVisuals{
    grid-template-columns:1fr 1.25fr;
  }
  .measureVisualCard .garmentRef,
  .measureVisualCard #measureDiagram{
    height:125px;
  }
  .chargeFields{
    grid-template-columns:1fr;
  }
  .reviewRows{
    grid-template-columns:1fr;
  }
  .modalStats{
    grid-template-columns:1fr 1fr 1fr;
  }
  .modalActions{
    flex-wrap:wrap;
  }
}


/* v29 interaction hardening */
.garmentCompact,
.styleCard,
.tab,
.measureTabs button,
.numPad button,
.fractionBar button{
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  -webkit-tap-highlight-color:rgba(11,119,120,.14);
}
.garmentCompact.active{
  outline:3px solid rgba(11,119,120,.18);
  outline-offset:2px;
}
.styleCard.active{
  outline:3px solid rgba(11,119,120,.16);
  outline-offset:2px;
}
.tab.active,
.measureTabs button.active{
  background:#0b7778!important;
  color:#fff!important;
  border-color:#0b7778!important;
}


/* v31 previous-customer autocomplete */
.customerStepV31{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:14px;
  align-items:start;
}
.customerEntry{
  min-width:0;
}
.customerLookup{
  position:relative;
}
.customerSuggestions{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 5px);
  z-index:80;
  max-height:300px;
  overflow:auto;
  border:1px solid #dce7e2;
  border-radius:13px;
  background:#fff;
  box-shadow:0 16px 38px rgba(22,65,65,.16);
  padding:6px;
}
.customerSuggestion{
  width:100%;
  border:0;
  border-radius:10px;
  background:#fff;
  padding:8px;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  text-align:left;
  color:#17383f;
  cursor:pointer;
}
.customerSuggestion:hover{
  background:#eef8f6;
}
.customerInitial{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#dceeed;
  color:#0b7778;
  font-weight:900;
}
.customerSuggestionMain,
.customerSuggestionMeta{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.customerSuggestionMain b{
  font-size:11px;
}
.customerSuggestionMain small,
.customerSuggestionMeta small{
  font-size:8px;
  color:#748684;
}
.customerSuggestionMeta{
  text-align:right;
}
.customerSuggestionMeta b{
  font-size:9px;
}
.customerNoMatch{
  padding:12px;
  text-align:center;
  font-size:10px;
  color:#718482;
}
.previousCustomerPanel{
  border:1px solid #dce7e2;
  border-radius:14px;
  background:#f8fbf8;
  padding:11px;
}
.previousCustomerHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.previousCustomerHead h3{
  margin:2px 0 0;
  font-size:15px;
}
.historyCount{
  padding:5px 8px;
  border-radius:999px;
  background:#e4efea;
  font-size:8px;
  font-weight:800;
  color:#466260;
}
.customerHistoryList{
  display:grid;
  gap:6px;
}
.customerHistoryRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 85px;
  gap:8px;
  align-items:center;
  border:1px solid #e3eae6;
  border-radius:10px;
  background:#fff;
  padding:8px;
}
.customerHistoryRow>div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.customerHistoryRow b{
  font-size:9px;
}
.customerHistoryRow small,
.customerHistoryRow span{
  font-size:8px;
  color:#748684;
}
.customerHistoryEmpty{
  padding:18px 8px;
  text-align:center;
  border:1px dashed #d7e3dd;
  border-radius:10px;
  color:#748684;
  font-size:9px;
}
@media(max-width:900px){
  .customerStepV31{
    grid-template-columns:1fr;
  }
}


/* v32 customer search visibility fix */
.page-new .orderStep1{
  max-height:none!important;
  overflow:visible!important;
}
.customerStepV31{
  overflow:visible!important;
}
.customerLookup{
  overflow:visible!important;
}
.customerSuggestions{
  position:static!important;
  margin-top:6px;
  max-height:190px;
  overflow:auto;
  box-shadow:none;
  border:1px solid #dce7e2;
  background:#fff;
}
.customerSuggestions[hidden]{
  display:none!important;
}
.customerMatchHint{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px;
  border:1px solid #dbe7e2;
  border-radius:10px;
  background:#fff;
}
.customerMatchHint span{
  font-size:8px;
  color:#6f8280;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.customerMatchHint b{
  font-size:11px;
}
.customerMatchHint small{
  font-size:9px;
  color:#718482;
}
.customerMatchHint em{
  margin-top:3px;
  font-size:8px;
  color:#0b7778;
  font-style:normal;
  font-weight:700;
}


/* v33 approved visual-first tailoring redesign */
.dressV33{display:grid;gap:12px}
.dressTop{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px
}
.dressTop .sub{margin:2px 0 0;font-size:11px}
.categoryVisualTabs{
  display:grid;grid-template-columns:repeat(4,minmax(92px,1fr));gap:6px
}
.categoryVisualTabs button{
  border:1px solid #dfe7e2;background:#f7f9f6;border-radius:12px;
  padding:7px 9px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;
  column-gap:6px;text-align:left;color:#294b4c;cursor:pointer;min-height:48px
}
.categoryVisualTabs button>span{grid-row:1/3;font-size:18px;align-self:center}
.categoryVisualTabs button b{font-size:9px;align-self:end}
.categoryVisualTabs button small{font-size:8px;color:#748583;align-self:start}
.categoryVisualTabs button.active{
  border-color:#0b8587;background:#e7f5f4;box-shadow:0 0 0 2px rgba(11,133,135,.10)
}
.dressMain{
  display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:12px;align-items:start
}
.garmentVisualGrid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px
}
.garmentVisualCard{
  position:relative;border:1px solid #dfe7e2;border-radius:14px;background:#fff;
  padding:7px;color:#17383f;text-align:left;cursor:pointer;min-width:0;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease
}
.garmentVisualCard:hover{transform:translateY(-1px);border-color:#8ebfba}
.garmentVisualCard.active{
  border:2px solid #0b8587;background:#eaf7f6;
  box-shadow:0 0 0 3px rgba(11,133,135,.10)
}
.garmentVisualArt{
  height:126px;border-radius:10px;overflow:hidden;background:#fcf6ea
}
.garmentVisualArt svg{width:100%;height:100%;display:block}
.garmentVisualLabel{padding:6px 3px 2px;display:flex;flex-direction:column;gap:2px}
.garmentVisualLabel b{
  font-size:10px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.garmentVisualLabel span{
  font-size:8px;color:#758684;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.garmentVisualCard>i{
  position:absolute;right:9px;top:9px;width:23px;height:23px;border-radius:50%;
  display:grid;place-items:center;background:#0b8587;color:#fff;font-style:normal;font-size:11px;
  box-shadow:0 3px 10px rgba(0,0,0,.12)
}
.moreGarments{
  width:100%;margin-top:8px;border:1px dashed #9ebfba;border-radius:11px;
  background:#f5faf8;color:#0b7778;padding:9px;font-size:10px;font-weight:800;cursor:pointer
}
.designRefCompact{position:sticky;top:10px;padding:10px;gap:7px}
.designRefCompact .field label{font-size:9px}
.designRefCompact .field input,.designRefCompact .field textarea{padding:8px;font-size:9px}
.designRefCompact .compactVoice{margin-top:0}
.designRefCompact .quick{margin:5px 0;gap:5px}
.designRefCompact .pill{padding:7px 8px;font-size:9px}

/* single live style preview */
.styleV33{
  display:grid;grid-template-columns:320px minmax(0,1fr);gap:12px;align-items:start
}
.styleLivePanel{
  position:sticky;top:10px;border:1px solid #d9e7e2;border-radius:16px;
  background:linear-gradient(160deg,#f9fcf8,#edf7f5);padding:12px
}
.stylePreviewArt{
  height:300px;border-radius:14px;overflow:hidden;background:#fcf6ea;
  box-shadow:inset 0 0 0 1px rgba(18,83,82,.05)
}
.stylePreviewArt svg{width:100%;height:100%;display:block}
.stylePreviewMeta{padding:9px 3px 0}
.stylePreviewMeta h2{margin:2px 0 3px;font-size:20px}
.stylePreviewMeta p{margin:0;color:#697d7b;font-size:9px;line-height:1.35}
.stylePicked{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.stylePicked span{
  border-radius:999px;background:#fff;padding:5px 7px;font-size:8px;color:#6b7f7d
}
.stylePicked b{color:#0b7778}
.styleControlArea{display:grid;gap:8px}
.visualOptionGroup,.styleSelectPanel{
  border:1px solid #e1e8e4;border-radius:14px;background:#fff;padding:9px
}
.groupHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.groupHead h3{font-size:11px;margin:0}
.groupHead span{
  font-size:8px;background:#e7f2ee;color:#0b7778;border-radius:999px;padding:4px 7px;font-weight:800
}
.visualOptionGrid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px
}
.visualOption{
  position:relative!important;padding:5px!important;min-height:0!important;border-radius:10px!important
}
.visualOption svg{height:82px!important}
.visualOption div{font-size:8px!important;margin-top:2px!important}
.visualOption>i{
  position:absolute;right:5px;top:5px;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;background:#0b8587;color:#fff;font-style:normal;font-size:9px
}
.visualOption.active{
  border:2px solid #0b8587!important;background:#e9f7f6!important;
  outline:none!important;box-shadow:0 0 0 2px rgba(11,133,135,.09)!important
}
.styleSelectGrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px
}
.styleSelectGrid .field{gap:3px}
.styleSelectGrid label{font-size:8px}
.styleSelectGrid select,.styleSelectGrid textarea{
  min-height:34px;padding:6px 7px;font-size:9px;border-radius:9px
}
.styleSelectGrid .notesField{grid-column:1/-1}

/* live measurement preview */
.measureV33{display:grid;gap:8px}
.measureDynamicLayout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,.92fr);gap:12px;align-items:start
}
.dynamicPreviewPanel{
  position:sticky;top:8px;border:1px solid #d5e6e2;border-radius:15px;
  background:linear-gradient(160deg,#eef9f7,#e3f3f1);padding:10px
}
.dynamicPreviewHead{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:7px
}
.dynamicPreviewHead>div{display:flex;flex-direction:column;gap:2px}
.dynamicPreviewHead b{font-size:11px}
.activeMeasurementChip{
  max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:5px 7px;border-radius:999px;background:#0b8587;color:#fff;font-size:8px;font-weight:800
}
.liveMeasureSvg{display:grid;gap:6px}
.liveGarmentCanvas{
  position:relative;height:260px;border-radius:13px;overflow:hidden;background:#fff
}
.liveGarmentCanvas .garmentBase{
  position:absolute;inset:0;width:100%;height:100%;display:block
}
.measureOverlay{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none
}
.measureLiveLabel{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 9px;border-radius:9px;background:#fff
}
.measureLiveLabel span{font-size:9px;color:#667b79}
.measureLiveLabel b{font-size:15px;color:#d9534f}
.liveMeasureSvg>small{
  display:block;font-size:7px;color:#708381;text-align:center
}
.dynamicPreviewPanel .keypadArea{margin-top:7px}
.dynamicPreviewPanel .standardPad button,
.dynamicPreviewPanel .fractionBar button{min-height:31px}
.measureDynamicLayout .compactFields{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 9px}
.measureDynamicLayout .compactFields label{font-size:8px}
.measureDynamicLayout .compactFields input{min-height:34px;padding:7px 8px;font-size:11px}
.measureTabs{flex-wrap:wrap}
.measureTabs button{
  cursor:pointer;touch-action:manipulation;font-size:9px;padding:7px 9px
}
.measureTabs button.active{
  background:#0b8587!important;color:#fff!important;outline:none!important
}

/* visual accessibility */
.garmentVisualCard,.visualOption,.categoryVisualTabs button{
  touch-action:manipulation;-webkit-tap-highlight-color:rgba(11,133,135,.15)
}

/* desktop: keep visual flow compact */
@media(min-width:1101px){
  .page-new .orderStep2,
  .page-new .orderStep3,
  .page-new .orderStep4{
    max-height:calc(100dvh - 245px);overflow:auto
  }
  .page-new .orderStep2{overflow:visible}
}

/* tablet */
@media(max-width:1100px){
  .dressMain{grid-template-columns:1fr}
  .designRefCompact{position:static}
  .garmentVisualGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .styleV33{grid-template-columns:270px minmax(0,1fr)}
  .stylePreviewArt{height:250px}
  .visualOptionGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .measureDynamicLayout{grid-template-columns:1fr}
  .dynamicPreviewPanel{position:static}
  .liveGarmentCanvas{height:240px}
}

/* mobile */
@media(max-width:640px){
  .dressTop{display:grid;gap:8px}
  .categoryVisualTabs{grid-template-columns:repeat(4,1fr);width:100%}
  .categoryVisualTabs button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    min-width:0;padding:6px 3px;gap:1px
  }
  .categoryVisualTabs button>span{font-size:17px}
  .categoryVisualTabs button b{font-size:8px}
  .categoryVisualTabs button small{font-size:7px}
  .garmentVisualGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .garmentVisualArt{height:118px}
  .garmentVisualLabel b{font-size:9px}
  .garmentVisualLabel span{font-size:7px}
  .styleV33{grid-template-columns:1fr}
  .styleLivePanel{position:static;display:grid;grid-template-columns:150px 1fr;gap:8px;padding:8px}
  .stylePreviewArt{height:150px}
  .stylePreviewMeta{padding:2px 0}
  .stylePreviewMeta h2{font-size:15px}
  .stylePreviewMeta p{font-size:8px}
  .stylePicked{gap:3px}
  .stylePicked span{padding:4px 5px;font-size:7px}
  .visualOptionGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .visualOption svg{height:70px!important}
  .styleSelectGrid{grid-template-columns:1fr 1fr}
  .measureDynamicLayout{grid-template-columns:1fr}
  .measureDynamicLayout .compactFields{grid-template-columns:1fr 1fr}
  .dynamicPreviewPanel{position:static}
  .liveGarmentCanvas{height:220px}
  .dynamicPreviewHead{align-items:center}
  .activeMeasurementChip{max-width:48%}
  .keypadArea{grid-template-columns:1fr 45px}
}

/* small phones */
@media(max-width:430px){
  .garmentVisualGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .garmentVisualArt{height:105px}
  .visualOptionGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .styleLivePanel{grid-template-columns:125px 1fr}
  .stylePreviewArt{height:125px}
  .measureDynamicLayout .compactFields{grid-template-columns:1fr 1fr}
  .liveGarmentCanvas{height:195px}
}


/* v34 approved visual-first rebuild: mobile-first, detail options, live measurement */
.sideHead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.sideCollapseBtn{
  width:32px;height:32px;border:1px solid rgba(255,255,255,.18);border-radius:9px;
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:20px;line-height:1
}
.app.sideCollapsed{grid-template-columns:78px 1fr}
.app.sideCollapsed .side{padding:22px 10px}
.app.sideCollapsed .brand span,
.app.sideCollapsed .side small,
.app.sideCollapsed .nav button{font-size:0}
.app.sideCollapsed .brand{font-size:22px;text-align:center}
.app.sideCollapsed .nav button{
  text-align:center;padding:13px 8px
}
.app.sideCollapsed .nav button::first-letter{font-size:18px}
.app.sideCollapsed .made{display:none}

/* Step 2: larger pictures, exactly two columns on phone/tablet */
@media(max-width:900px){
  .dressMain{grid-template-columns:1fr!important}
  .designRefCompact{position:static!important}
  .garmentVisualGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .garmentVisualArt{height:150px!important}
  .garmentVisualLabel b{font-size:11px!important}
  .garmentVisualLabel span{font-size:9px!important}
  .categoryVisualTabs{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* Step 3: one hero preview, option-specific detail drawings */
.styleV34{display:grid;gap:10px}
.styleHero{
  display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:12px;
  align-items:stretch;border:1px solid #d9e7e2;border-radius:16px;
  background:linear-gradient(150deg,#edf8f6,#fbfcf8);padding:11px
}
.styleHeroArt{
  height:310px;border-radius:14px;overflow:hidden;background:#fcf6ea;
  box-shadow:inset 0 0 0 1px rgba(11,119,120,.06)
}
.styleHeroArt svg{width:100%;height:100%;display:block}
.styleHeroInfo{padding:7px 5px;min-width:0}
.styleHeroInfo h2{margin:3px 0 5px;font-size:23px}
.styleHeroInfo p{margin:0;max-width:600px;color:#687d7b;font-size:10px;line-height:1.45}
.styleCustomerRef{
  margin-top:10px;display:flex;align-items:center;gap:8px;
  padding:7px;border:1px solid #dce7e2;border-radius:10px;background:#fff
}
.styleCustomerRef span{font-size:8px;color:#687d7b}
.styleCustomerRef img{width:52px;height:52px;object-fit:cover;border-radius:8px;margin-left:auto}
.styleGroupsV34{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px
}
.visualOptionGridV34{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px
}
.visualOptionGridV34 .visualOption svg{height:92px!important}
.visualOptionGridV34 .visualOption div{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px!important
}
.visualOptionGridV34 .visualOption{min-width:0!important}
.styleV34 .styleSelectPanel{padding:10px}
.styleV34 .styleSelectGrid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Step 4: preview dominant and measurement entry cards */
.measureV34{display:grid;gap:9px}
.measureHeadV34{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px
}
.measureHeadV34 .sub{margin-bottom:0;font-size:10px}
.measureLayoutV34{
  display:grid;grid-template-columns:minmax(390px,.9fr) minmax(0,1.1fr);gap:11px;align-items:start
}
.measurePreviewV34{
  position:sticky;top:8px;border:1px solid #d6e6e1;border-radius:16px;
  background:linear-gradient(160deg,#eef9f7,#e3f2ef);padding:10px
}
.measurePreviewV34 .liveGarmentCanvas{height:350px}
.measurePreviewV34 .liveMeasureSvg>small{font-size:8px}
.measureEntryV34{
  border:1px solid #e0e8e3;border-radius:16px;background:#fff;padding:10px
}
.measureListV34{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px
}
.measureFieldCard{
  display:grid;gap:4px;padding:7px;border:1px solid #dce5e1;border-radius:11px;
  background:#fbfcf9;cursor:text;transition:.12s
}
.measureFieldCard span{font-size:8px;color:#59716f;font-weight:700}
.measureFieldCard input{
  width:100%;min-height:34px;padding:7px 8px;border:1px solid #d7dfdb;border-radius:8px;
  background:#fff;color:#17383f;font-size:11px
}
.measureFieldCard.active{
  border:2px solid #0b8587;background:#edf8f6;box-shadow:0 0 0 2px rgba(11,133,135,.08)
}
.measureFieldCard.active span{color:#0b7778}
.measureEntryBottom{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;margin-top:8px}
.measureEntryBottom .compactAdd{margin:0;white-space:nowrap}
.measureEntryBottom .keypadArea{margin:0}
.measureEntryBottom .standardPad button,
.measureEntryBottom .fractionBar button{min-height:34px}

/* Stronger active state everywhere */
.visualOption.active,
.garmentVisualCard.active{
  box-shadow:0 0 0 3px rgba(11,133,135,.14)!important
}
.visualOption.active::after{
  content:"SELECTED";position:absolute;left:6px;top:6px;
  padding:3px 5px;border-radius:999px;background:#0b8587;color:#fff;font-size:6px;font-weight:900;letter-spacing:.04em
}

/* tablet/mobile */
@media(max-width:900px){
  .app.sideCollapsed{grid-template-columns:1fr}
  .sideCollapseBtn{display:none}
  .styleHero{
    grid-template-columns:1fr!important;
    padding:9px
  }
  .styleHeroArt{
    height:285px!important;
    max-width:430px;width:100%;margin:0 auto
  }
  .styleHeroInfo{text-align:center}
  .stylePicked{justify-content:center}
  .styleCustomerRef{max-width:430px;margin:9px auto 0}
  .styleGroupsV34{grid-template-columns:1fr!important}
  .visualOptionGridV34{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .visualOptionGridV34 .visualOption svg{height:110px!important}
  .styleV34 .styleSelectGrid{grid-template-columns:1fr 1fr!important}
  .measureHeadV34{display:grid;gap:7px}
  .measureLayoutV34{grid-template-columns:1fr!important}
  .measurePreviewV34{position:static!important}
  .measurePreviewV34 .liveGarmentCanvas{height:310px}
  .measureListV34{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .dressTop{gap:7px}
  .garmentVisualArt{height:135px!important}
  .styleHeroArt{height:250px!important}
  .styleHeroInfo h2{font-size:18px}
  .styleHeroInfo p{font-size:9px}
  .visualOptionGridV34 .visualOption svg{height:96px!important}
  .styleV34 .styleSelectGrid{grid-template-columns:1fr 1fr!important}
  .measurePreviewV34 .liveGarmentCanvas{height:260px}
  .measureListV34{grid-template-columns:1fr 1fr}
  .measureEntryBottom{grid-template-columns:1fr}
  .measureEntryBottom .compactAdd{justify-self:start}
  .measureFieldCard{padding:6px}
  .measureFieldCard span{font-size:7.5px}
  .measureFieldCard input{min-height:32px}
}
@media(max-width:430px){
  .garmentVisualArt{height:118px!important}
  .styleHeroArt{height:220px!important}
  .visualOptionGridV34 .visualOption svg{height:86px!important}
  .measurePreviewV34 .liveGarmentCanvas{height:230px}
}


/* v34 r2 compact reference + review polish */
.dressMainV34{display:block}
.referenceDetails{
  margin-top:9px!important;position:static!important;padding:0!important;overflow:hidden
}
.referenceDetails summary{
  list-style:none;cursor:pointer;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#f6faf7;color:#21494b;border-radius:13px;font-weight:800;font-size:10px
}
.referenceDetails summary::-webkit-details-marker{display:none}
.referenceDetails summary small{font-size:8px;color:#738684;font-weight:600}
.referenceDetails[open] summary{border-bottom:1px solid #e1e9e4;border-radius:13px 13px 0 0}
.referenceDetailsBody{padding:10px}
.reviewStyleSummary{max-width:68%;text-align:right;line-height:1.35;font-size:10px}
.reviewGarment svg{width:100%;height:100%;display:block}
@media(max-width:900px){
  .referenceDetails summary{font-size:11px}
  .referenceDetails summary small{font-size:8px}
}
@media(max-width:640px){
  .referenceDetails summary{align-items:flex-start;flex-direction:column;gap:2px}
  .reviewStyleSummary{max-width:62%;font-size:9px}
}


/* v36 approved-preview alignment */
.dressV36{display:grid;gap:10px}
.dressTopV36{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.dressToolsV36{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.garmentSearchBox{
  min-width:190px;display:flex;align-items:center;gap:6px;border:1px solid #d7e2dd;
  background:#fff;border-radius:10px;padding:7px 10px;color:#0b7778
}
.garmentSearchBox input{border:0;outline:0;background:transparent;min-width:0;width:100%;font-size:10px}
.previewGallery{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important
}
.previewGallery .garmentVisualCard{
  min-width:0!important;background:#fff;border-radius:13px!important;padding:7px!important;
  box-shadow:0 3px 12px rgba(16,75,76,.05)
}
.previewGallery .garmentVisualArt{height:145px!important;border-radius:10px!important;overflow:hidden}
.previewGallery .garmentVisualArt svg{width:100%;height:100%;display:block}
.previewGallery .garmentVisualLabel{padding:7px 3px 2px!important}
.previewGallery .garmentVisualLabel b{font-size:10px!important}
.previewGallery .garmentVisualLabel span{font-size:8px!important}
.emptySearch{padding:30px;text-align:center;color:#70817e}

/* Style screen close to approved preview */
.styleV34,.styleV35,.styleV36{gap:9px}
.styleHero{
  grid-template-columns:270px minmax(0,1fr)!important;
  background:#fff!important;border:1px solid #d9e5df!important;padding:9px!important
}
.styleHeroArt{height:260px!important;background:#fff8ee!important}
.styleHeroInfo{align-self:center}
.styleGroupsV34{grid-template-columns:1fr!important}
.visualOptionGroup{padding:9px!important;background:#fff!important}
.visualOptionGridV34{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important
}
.styleGarmentThumb{height:120px;overflow:hidden;border-radius:9px;background:#fff8ee}
.styleGarmentThumb svg{width:100%;height:100%;display:block}
.visualOptionGridV34 .visualOption svg{height:100%!important}
.visualOptionGridV34 .visualOption>div:last-of-type{font-size:9px!important;padding-top:5px}
.visualOption.active::after{content:"✓ SELECTED"!important;top:5px!important;left:5px!important}
.styleV34 .styleSelectGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}

/* Measurement screen: fields + large live garment */
.measureV34{gap:10px}
.measureHeadV34{align-items:flex-end}
.measureLayoutV34{grid-template-columns:minmax(0,.95fr) minmax(430px,1.05fr)!important}
.measurePreviewV34{
  grid-column:2;grid-row:1;position:sticky!important;top:8px!important;background:#fff!important
}
.measureEntryV34{grid-column:1;grid-row:1}
.measurePreviewV34 .liveGarmentCanvas{height:430px!important;background:#fff8ee;border-radius:12px}
.measureViewTabs{display:flex;gap:5px;margin-bottom:7px}
.measureViewTabs button{
  border:1px solid #cfe0da;border-radius:8px;background:#f3f8f5;padding:6px 10px;font-size:8px;color:#365d5b
}
.measureViewTabs button.active{background:#0b8587;color:#fff;border-color:#0b8587}
.measureOverlay,.garmentBase{position:absolute;inset:0;width:100%;height:100%}
.liveGarmentCanvas{position:relative;overflow:hidden}
.measureLiveLabel{
  display:flex;justify-content:space-between;gap:8px;align-items:center;
  margin-top:7px;padding:8px 10px;border-radius:9px;background:#eef8f6
}
.measureLiveLabel span{font-size:8px;color:#607977}.measureLiveLabel b{font-size:12px}
.measureListV34{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.measureFieldCard input{font-size:12px!important}

/* Charges like preview */
.chargesV36{display:grid;gap:12px}
.chargesHead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.chargeTotalHero{
  min-width:150px;border-radius:14px;background:#e8f7f4;border:1px solid #cfe5df;padding:10px 14px;text-align:right
}
.chargeTotalHero span{display:block;font-size:8px;color:#65807d}
.chargeTotalHero b{display:block;font-size:22px;color:#0b5f63;margin-top:3px}
.chargeFieldsV36{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;
  border:1px solid #dde7e2;border-radius:15px;background:#fff;padding:11px
}
.chargeBalanceCard{
  border-radius:11px;background:#fff3d9;border:1px solid #f0ddab;padding:9px 11px;display:grid;align-content:center
}
.chargeBalanceCard span{font-size:8px;color:#7d6a42}.chargeBalanceCard b{font-size:18px}.chargeBalanceCard small{font-size:8px}
.chargeNotes{grid-column:span 2}

/* Review visual */
.reviewWorkspace{align-items:stretch!important}
.reviewMoney{background:#fff!important}
.reviewGarment{height:250px!important;background:#fff8ee;border-radius:12px;overflow:hidden}
.reviewGarment svg{width:100%;height:100%}

/* Sidebar preview alignment */
.side .nav [data-nav="customers"]{display:block}

@media(max-width:1050px){
  .previewGallery{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .measureLayoutV34{grid-template-columns:1fr 1fr!important}
  .measurePreviewV34 .liveGarmentCanvas{height:360px!important}
}
@media(max-width:900px){
  .dressTopV36{display:grid;gap:8px}
  .dressToolsV36{justify-content:stretch}
  .garmentSearchBox{flex:1;min-width:100%}
  .previewGallery{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .previewGallery .garmentVisualArt{height:185px!important}
  .styleHero{grid-template-columns:1fr!important}
  .styleHeroArt{height:310px!important}
  .visualOptionGridV34{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .styleGarmentThumb{height:150px}
  .styleV34 .styleSelectGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .measureLayoutV34{grid-template-columns:1fr!important}
  .measurePreviewV34,.measureEntryV34{grid-column:1!important;grid-row:auto!important}
  .measurePreviewV34{order:2;position:static!important}
  .measureEntryV34{order:1}
  .measurePreviewV34 .liveGarmentCanvas{height:400px!important}
  .chargeFieldsV36{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chargeNotes{grid-column:span 2}
}
@media(max-width:640px){
  .previewGallery .garmentVisualArt{height:155px!important}
  .previewGallery .garmentVisualLabel b{font-size:11px!important}
  .categoryVisualTabs{width:100%;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .styleHeroArt{height:280px!important}
  .styleGarmentThumb{height:120px}
  .measurePreviewV34 .liveGarmentCanvas{height:330px!important}
  .measureListV34{grid-template-columns:1fr 1fr!important}
  .chargesHead{display:grid}
  .chargeTotalHero{text-align:left}
  .chargeFieldsV36{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
  .previewGallery .garmentVisualArt{height:138px!important}
  .styleHeroArt{height:245px!important}
  .styleGarmentThumb{height:105px}
  .measurePreviewV34 .liveGarmentCanvas{height:290px!important}
  .measureFieldCard span{font-size:8px!important}
}

.previewNotice{padding:10px 16px;background:#fff1ce;color:#684900;text-align:center;font-weight:700}.itemRail{margin-bottom:16px}.itemTabs,.itemControls{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.itemControls label{display:flex;align-items:center;gap:8px}.itemControls input{width:80px;padding:10px}.itemReview{padding:14px;border:1px solid #d5e4e4;border-radius:12px;margin:10px 0}.itemReview select{padding:10px;margin:8px}.receiptActions{display:flex;gap:12px}@media print{body>*{display:none!important}body>.receiptModal{display:block!important;position:static!important;background:white!important}.receiptPaper{max-height:none!important;overflow:visible!important;box-shadow:none!important}.receiptActions{display:none!important}}

.activeItemLabel{margin-bottom:12px;padding:8px 12px;background:#e7f3f1;border-radius:10px;font-size:14px;font-weight:600}

#garment3D{width:100%;height:auto;max-height:440px;touch-action:none;cursor:grab;border-radius:14px}#rotationLabel{text-align:center;font-weight:bold;color:#07676b}.incomplete{color:#a3322c}.reviewEditList .btn{margin:4px 0}.reviewEditList{margin-top:12px}.btn:disabled{opacity:.45;cursor:not-allowed}

.styleV34 .styleHeroArt{height:auto!important;overflow:visible!important;min-height:320px}.styleHeroArt .liveMeasureSvg{width:100%}.styleHeroArt #garment3D{max-height:350px}

.fabricColourControls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px;background:#eef6f4;border-radius:10px;margin-top:8px}.fabricColourControls label{display:flex;align-items:center;gap:10px;font-size:14px}.fabricColourControls input{width:48px;height:36px;padding:2px}.fabricColourControls select{width:auto;min-width:140px;padding:8px}

/* v45: compact working screens */
.previewNotice{display:none!important}
.main:not(.page-dashboard):not(.page-backup) .topline,.main:not(.page-backup) .copyright{display:none!important}
.page-new .orderFlowHead .sub{display:none!important}
.page-new:not(.flow-step-1) .orderFlowHead{display:none!important}
.page-new .activeItemLabel{margin:6px 0;padding:6px 10px}
.page-new .steps{margin:6px 0 10px!important;gap:5px!important}
.page-new .step{padding:8px!important}
.main{padding-top:12px!important}
.page-new .orderStep{margin-top:0!important;padding:12px!important;max-height:none!important}
.page-new .orderActions{margin:8px 0!important}
.page-new .miniLabel,.page-new .styleHeroInfo p,.page-new .styleHeroInfo .stylePicked{display:none!important}
.page-new .styleV34{display:grid!important;grid-template-columns:minmax(240px,.85fr) minmax(0,1.5fr);gap:12px!important;align-items:start}
.page-new .styleHero{grid-column:1;grid-row:1 / span 2;display:flex!important;flex-direction:column;gap:6px!important;padding:8px!important;margin:0!important}
.page-new .styleHeroInfo{order:-1;padding:0!important}
.page-new .styleHeroInfo h2{font-size:18px!important;margin:0!important}
.page-new .styleHeroArt{width:100%;min-height:0!important}
.page-new .styleGroupsV34,.page-new .styleSelectPanel{grid-column:2;margin:0!important;padding:8px!important}
.page-new .visualOptionGroup{padding:8px!important;margin-bottom:8px!important}
.page-new .groupHead{margin-bottom:6px!important}
.page-new .styleGarmentThumb{height:70px!important}
.page-new .styleSelectGrid{gap:8px!important}
.page-new .measureHeadV34{margin-bottom:8px!important}
.page-new .measureHeadV34 p{display:none!important}
@media(max-width:600px){.page-new .styleV34{grid-template-columns:1fr!important}.page-new .styleHero{grid-column:1;grid-row:auto;max-width:100%}.page-new .styleGroupsV34,.page-new .styleSelectPanel{grid-column:1}.page-new .styleHeroArt #garment3D{max-height:260px!important}.mobileTop{padding:5px 0!important;margin-bottom:5px!important}}

/* v46: mobile drawer keeps a visible close action and never squeezes the page. */
.menuBackdrop,.mobileMenuClose{display:none}
.main{min-width:0}
@media(max-width:1100px), (hover:none) and (pointer:coarse){
 .app,.app.sideCollapsed{grid-template-columns:minmax(0,1fr)!important}
 .menuBackdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:99;border:0;background:rgba(15,40,43,.25)}
 .mobileMenuClose{display:block;align-self:flex-end;border:1px solid rgba(255,255,255,.45);border-radius:8px;padding:9px 12px;background:transparent;color:#fff;cursor:pointer}
 .side{overflow-y:auto}
 .sideCollapseBtn{display:none!important}
 .app.sideCollapsed .side{padding:24px 16px}
 .app.sideCollapsed .brand span{font-size:22px}
 .app.sideCollapsed .side small{font-size:12px}
 .app.sideCollapsed .nav button{font-size:14px;padding:13px 14px;text-align:left}
 .app.sideCollapsed .made{display:block}
}
/* v48 settings: compact forms with a single home shortcut. */
.homeShortcut{border:0;background:transparent;color:var(--ink);font-weight:700;cursor:pointer}
.desktopHome{display:flex;justify-content:flex-end;margin-bottom:6px}
.page-dashboard .desktopHome{display:none}
.settingsWorkspace{max-width:760px;margin:0 auto}
.settingsPanel{display:grid;gap:14px;margin-top:12px}
.settingsPanel .field{font-size:14px}
.shopProfilePreview{padding:12px;border:1px solid var(--line);border-radius:12px;text-align:center}
.shopProfilePreview h2{margin:4px 0}.shopProfilePreview p{white-space:pre-line;margin:4px 0;color:var(--muted)}
.shopLogo{max-width:120px;max-height:80px;object-fit:contain}
@media(max-width:1100px),(hover:none) and (pointer:coarse){.desktopHome{display:none}}
html[data-text-size="large"] button,html[data-text-size="large"] input,html[data-text-size="large"] select,html[data-text-size="large"] textarea{font-size:17px!important}
html[data-text-size="large"] .field,html[data-text-size="large"] .field label,html[data-text-size="large"] .settingsPanel p,html[data-text-size="large"] .tileLabel{font-size:17px!important}
html[data-theme="night"]{color-scheme:dark;--paper:#122528;--card:#20373a;--ink:#edf5f3;--muted:#aec5c3;--line:#42605e}
html[data-theme="night"] body{background:var(--paper);color:var(--ink)}
html[data-theme="night"] .panel,html[data-theme="night"] .order,html[data-theme="night"] .orderModalCard,html[data-theme="night"] .itemReview,html[data-theme="night"] .settingsPanel,html[data-theme="night"] .moduleSection,html[data-theme="night"] .moduleTile,html[data-theme="night"] .nextCollections{background:var(--card)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="night"] input,html[data-theme="night"] select,html[data-theme="night"] textarea{background:#173033!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="night"] .mobileTop,html[data-theme="night"] .actions{background:var(--paper)!important}
html[data-theme="night"] .pill,html[data-theme="night"] .btn.secondary,html[data-theme="night"] .status,html[data-theme="night"] .step:not(.active){background:#304b4c!important;color:var(--ink)!important}
html[data-theme="night"] .statusTile:not(.c1){color:#17383f}
@media print{html[data-theme="night"] .receiptPaper{background:white!important;color:#17383f!important;color-scheme:light}}

.contactActions{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.contactActions a{text-decoration:none;display:inline-block}.contactActions small{color:var(--muted);display:block;line-height:1.5}.contactActions p{line-height:1.5}@media print{.contactActions{display:none!important}}

.staffWorkspace{display:grid;grid-template-columns:minmax(220px,.6fr) minmax(0,1.4fr);gap:14px;align-items:start}.staffWorkspace .panel{display:grid;gap:12px}.staffEntries{display:grid;gap:8px}.voidEntry{opacity:.6;text-decoration:line-through}.staffAssignment{margin-top:10px}.staffWorkspace .modalStats{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:900px){.staffWorkspace{grid-template-columns:1fr}}html[data-theme="night"] .staffWorkspace .panel{background:var(--card)!important;color:var(--ink)!important}

.ownerPanel{max-width:520px;margin:20px auto;display:grid;gap:14px}.ownerPanel details .field{margin:12px 0}.ledgerKindHidden{display:none!important}.balanceExplanation{padding:14px;border-radius:12px;background:#e8f4f1;line-height:1.7;color:#17383f}.staffStatement table{width:100%;border-collapse:collapse;font-size:13px}.staffStatement th,.staffStatement td{padding:8px;border:1px solid #aaa;text-align:left;vertical-align:top}.staffStatement .shopLogo{float:right}.statementModal .orderModalCard{width:min(900px,96vw)}@media print{body *{visibility:hidden}.statementModal,.statementModal *{visibility:visible}.statementModal{position:absolute;inset:0;background:white!important;display:block;backdrop-filter:none!important}.statementModal .orderModalCard{box-shadow:none;width:100%;max-height:none;overflow:visible}.statementModal .receiptActions{display:none!important}.statementModal table{break-inside:auto}.statementModal tr{break-inside:avoid}}

.staffWorkspace{grid-template-columns:1fr;max-width:950px;margin:0 auto}.staffWorkspace details>summary{padding:8px;cursor:pointer;font-weight:700}.staffWorkspace details .form2{margin:12px 0}.payrollSummaryCards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.payrollSummaryCards>div{padding:14px;background:#e9f3f0;border-radius:12px;color:#17383f}.payrollSummaryCards b{display:block;margin-top:8px;font-size:24px}.payrollSummaryCards>div:last-child{background:#cde9e3}@media(max-width:640px){.payrollSummaryCards{grid-template-columns:1fr 1fr}.payrollSummaryCards b{font-size:20px}}

@media print{body>.statementModal{display:block!important;position:static!important}.statementModal .orderModalCard{max-height:none!important;overflow:visible!important;background:white!important;color:#17383f!important}}

/* v53 catalog photographs: one exact cell per garment, no recycled family photo. */
.catalogPhoto{display:block;width:100%;height:100%;background-image:var(--sheet);background-size:var(--size-x) var(--size-y);background-position:var(--x) var(--y);background-repeat:no-repeat;background-color:#f7f2e9;border-radius:10px}
.previewGallery .garmentVisualArt{height:auto!important;aspect-ratio:4/5;overflow:hidden}
.catalogPhotoLarge{height:auto;aspect-ratio:var(--photo-ratio);max-width:420px;margin:12px auto}
.galleryPhotoModal .orderModalCard{max-width:520px}
.galleryPhotoModal .quick{justify-content:space-between;align-items:center}
.galleryPhotoModal h2{font-size:20px;margin:0}
.galleryPhotoModal p{font-size:12px;color:#597074}
.galleryOpen{margin:10px 0}

.blouseStylePhoto{display:block;width:100%;height:100%;background-image:url('assets/blouse-styles-v54.webp');background-size:400% 300%;background-position:var(--x) var(--y);background-repeat:no-repeat;border-radius:8px}
.styleGarmentThumb:has(.blouseStylePhoto){aspect-ratio:1/1;height:auto!important;min-height:105px}

.galleryPhotoModal .blouseStylePhoto{height:auto;aspect-ratio:1/1;max-width:420px;margin:12px auto}