/** Shopify CDN: Minification failed

Line 1106:1 Expected "}" to go with "{"

**/
#cilon-app{
  --bg:#f5f7fb; --panel:#fff; --ink:#111827; --muted:#667085; --line:#d0d5dd;
  --brand:#063b8c; --brand-dark:#052b66; --brand-soft:#eef4ff; --accent:#d4af37; --radius:16px;
  --badge-width-mm:76; --badge-small-height-mm:26.5; --badge-large-height-mm:38.5;
}
#cilon-app *{box-sizing:border-box}
#cilon-app{margin:0;font-family:Inter,Arial,"Noto Sans",sans-serif;background:var(--bg);color:var(--ink)}
#cilon-app header{padding:18px 24px;background:#fff;border-bottom:1px solid #e4e7ec;display:flex;align-items:center;justify-content:space-between}
#cilon-app .brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:22px;letter-spacing:.5px;color:var(--brand)}
#cilon-app .brand-logo{display:block;width:154px;height:50px;object-fit:contain;object-position:left center}
#cilon-app .brand small{font-weight:500;color:var(--muted);font-size:12px;margin-left:0}
#cilon-app .version-label{font-size:12px;color:var(--brand);font-weight:800;white-space:nowrap}
#cilon-app main{max-width:1580px;margin:auto;padding:22px;display:grid;grid-template-columns:minmax(360px,430px) minmax(700px,1fr);gap:18px;align-items:start}
#cilon-app .panel, #cilon-app .preview-panel{background:var(--panel);border:1px solid #e4e7ec;border-radius:var(--radius);box-shadow:0 8px 24px rgba(16,24,40,.05)}
#cilon-app .panel{padding:20px}
#cilon-app .preview-panel{padding:22px;min-height:620px;display:flex;flex-direction:column;position:sticky;top:14px;max-height:calc(100vh - 28px);overflow-y:auto;scrollbar-gutter:stable;grid-column:2;grid-row:1 / span 2}
#cilon-app h1{font-size:21px;margin:0 0 4px} #cilon-app h2{font-size:15px;margin:22px 0 10px}
#cilon-app .sub{color:var(--muted);font-size:13px;margin-bottom:18px}
#cilon-app .field{margin:12px 0}#cilon-app .field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
#cilon-app input[type=text], #cilon-app select, #cilon-app input[type=file]{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;font:inherit}
#cilon-app .option-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#cilon-app .choice{border:1px solid var(--line);border-radius:11px;padding:10px;cursor:pointer;background:#fff;display:flex;gap:9px;align-items:center}
#cilon-app .choice input{margin:0}
#cilon-app .choice:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 2px rgba(23,59,103,.10)}

#cilon-app .holder-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px}
#cilon-app .holder-choice{position:relative;min-height:38px;height:38px;padding:4px 8px;justify-content:center;font-size:13px;font-weight:900;letter-spacing:.4px;overflow:hidden;color:#101828;text-shadow:0 1px 0 rgba(255,255,255,.45)}
#cilon-app .holder-choice input{position:absolute;opacity:0;pointer-events:none}
#cilon-app .holder-choice.gold{background:linear-gradient(125deg,#9f7417 0%,#f5df8b 38%,#bd8d25 70%,#f2d77c 100%)}
#cilon-app .holder-choice.silver{background:linear-gradient(125deg,#8f98a3 0%,#f7f8fa 38%,#aab2bc 70%,#eef1f4 100%)}
#cilon-app .holder-choice.white{background:linear-gradient(135deg,#ffffff,#eceff3);border-color:#c9ced6}
#cilon-app .holder-choice:has(input:checked){border-color:#173b67;box-shadow:0 0 0 3px rgba(23,59,103,.18),inset 0 0 0 2px rgba(255,255,255,.55)}
#cilon-app .quick{padding:8px 10px;border:1px solid #b8c9dc;border-radius:10px;background:#f6f9fc;overflow:hidden}
#cilon-app .quick label{font-weight:800;font-size:12px;display:flex;align-items:center;gap:7px;white-space:nowrap}
#cilon-app .quick input[type=checkbox]{width:15px;height:15px;min-width:15px;margin:0}
#cilon-app .quick-note{font-weight:500;color:var(--muted);font-size:11px;white-space:nowrap}
#cilon-app .check-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:9px;align-items:stretch}
#cilon-app .content-toggle-card{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px 28px 8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12px;font-weight:800;text-align:center;cursor:pointer;line-height:1.2}
#cilon-app .content-toggle-card:hover{border-color:#8ca6c3;background:#f8fbff}
#cilon-app .content-toggle-card:has(input:checked){border-color:var(--brand);background:#eef5fc;box-shadow:0 0 0 2px rgba(23,59,103,.08)}
#cilon-app .content-toggle-card input[type=checkbox]{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:15px;height:15px;margin:0;accent-color:var(--brand)}
#cilon-app .content-options-wrap{overflow:visible;padding-bottom:2px}
#cilon-app #contentRosterField{margin-top:12px;padding-top:12px;border-top:1px solid #e4e7ec}
#cilon-app #contentRosterField .person-row input{padding:9px 10px;font-size:14px;font-weight:750;min-height:38px}
#cilon-app #contentRosterField .roster{gap:6px}
#cilon-app .content-control-card{border:1px solid #b8c9dc;border-radius:11px;background:#f8fbff;overflow:hidden}
#cilon-app .content-control-row{display:flex;align-items:center;gap:9px;min-height:38px;padding:8px 10px;border-bottom:1px solid #dce5ef;font-size:13px;font-weight:800;cursor:pointer}
#cilon-app .content-control-row:last-child{border-bottom:0}
#cilon-app .content-control-row:hover{background:#eef5fc}
#cilon-app .content-control-row input[type=checkbox]{width:15px;height:15px;min-width:15px;margin:0;accent-color:var(--brand)}
#cilon-app .content-control-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cilon-app .startup-roster-title{font-size:14px;font-weight:900;margin-bottom:4px}
#cilon-app .startup-roster-help{font-size:12px;color:var(--muted);margin-bottom:9px}
#cilon-app .advanced{margin-top:12px;border-top:1px solid #e4e7ec;padding-top:10px}
#cilon-app details summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--brand)}
#cilon-app .colors{display:flex;flex-wrap:wrap;gap:8px}#cilon-app .swatch{width:28px;height:28px;border-radius:50%;border:2px solid #fff;outline:1px solid #cfd4dc;cursor:pointer}
#cilon-app .swatch.active{outline:3px solid var(--brand)}
#cilon-app .status{font-size:12px;color:var(--muted);margin-top:6px}
#cilon-app .preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
#cilon-app .preview-head strong{font-size:15px}#cilon-app .badge-meta{font-size:12px;color:var(--muted)}
#cilon-app .stage{flex:0 0 auto;min-height:420px;display:block;background:linear-gradient(45deg,#f3f4f6 25%,transparent 25%),linear-gradient(-45deg,#f3f4f6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f3f4f6 75%),linear-gradient(-45deg,transparent 75%,#f3f4f6 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;border-radius:13px;padding:28px;overflow:auto}
#cilon-app .badge{position:relative;background:#fff;border:1px solid #cfd4dc;border-radius:10px;overflow:hidden;box-shadow:0 12px 25px rgba(0,0,0,.13);color:#000;display:flex;align-items:stretch;justify-content:center}
#cilon-app .badge.transparent{background:rgba(255,255,255,.35);backdrop-filter:blur(1px)}
#cilon-app .badge.small{width:456px;height:159px} /* exact visual ratio 76:26.5 */
#cilon-app .badge.large{width:456px;height:231px} /* exact visual ratio 76:38.5 */
#cilon-app .inner{width:100%;height:100%;padding:6%;display:flex;align-items:center;justify-content:center;gap:3.5%}
#cilon-app .layout-top .inner{flex-direction:column;gap:4%}
#cilon-app .badge.large.layout-left .inner{gap:2.5%;padding:5%}
#cilon-app .logo-wrap{flex:0 0 31.5%;height:86%;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:1%}
#cilon-app .badge.layout-left .logo-wrap.circle, #cilon-app .badge.layout-left .logo-wrap.square{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
#cilon-app .layout-top .logo-wrap{flex:0 0 36%;height:36%;width:82%;padding:0}
#cilon-app .logo-wrap img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
#cilon-app .logo-wrap.circle, #cilon-app .logo-wrap.square{
  flex:0 0 auto;
  width:auto;
  height:auto;
  align-self:center;
  overflow:hidden;
}
#cilon-app .badge.small.layout-left .logo-wrap.circle, #cilon-app .badge.small.layout-left .logo-wrap.square{
  width:31.5%;
  max-width:31.5%;
  height:auto;
  max-height:none;
  aspect-ratio:1/1;
}
#cilon-app .badge.large.layout-left .logo-wrap.circle, #cilon-app .badge.large.layout-left .logo-wrap.square{
  width:35.7%;
  max-width:35.7%;
  height:auto;
  max-height:none;
  aspect-ratio:1/1;
}
#cilon-app .logo-wrap.circle{
  border-radius:50%;
  clip-path:circle(50% at 50% 50%);
  background:rgba(0,0,0,.04);
}
#cilon-app .logo-wrap.circle img{
  display:block;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  clip-path:circle(50% at 50% 50%);
  object-fit:contain!important;
}
#cilon-app .logo-wrap.square img{
  display:block;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  aspect-ratio:1/1!important;
  border-radius:8%;
  object-fit:contain!important;
}
#cilon-app .logo-wrap.rect img{width:100%;height:100%;object-fit:contain}
#cilon-app .logo-sep{background:#7d838a;flex:0 0 1px;height:72%;min-width:1px}
#cilon-app .layout-top .logo-sep{height:1px;width:58%;flex-basis:1px;min-height:1px}
#cilon-app .text-block{min-width:0;flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#cilon-app .layout-top .text-block{width:100%;height:auto;flex:1}
#cilon-app .name-zone, #cilon-app .title-zone{width:100%;min-height:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1%}
#cilon-app .name{font-weight:900;line-height:1.05;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:clip}
#cilon-app .title{font-weight:900;line-height:1.1;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:clip}
#cilon-app .company{font-weight:500;line-height:1.05;white-space:nowrap;max-width:100%;opacity:.9;overflow:hidden;text-overflow:clip}
#cilon-app .text-divider{height:1px;background:#7d838a;flex:0 0 1px;min-height:1px}
#cilon-app .just-name .name-zone{height:100%}
#cilon-app .with-title .name-zone, #cilon-app .with-title .title-zone{flex:1}
#cilon-app .actions{display:flex;gap:10px;margin-top:16px}
#cilon-app button{border:0;border-radius:10px;padding:11px 16px;font-weight:800;cursor:pointer}
#cilon-app .primary{background:var(--brand);color:#fff}#cilon-app .secondary{background:#eef2f6;color:var(--brand)}
#cilon-app .warning{padding:9px 11px;border-radius:9px;background:#fff7e6;color:#7a4b00;font-size:12px;margin-top:10px;display:none}
#cilon-app .roster{display:grid;gap:8px}
#cilon-app .roster-head, #cilon-app .person-row{display:grid;grid-template-columns:32px 1fr 1fr;gap:7px;align-items:center}
#cilon-app .roster-head{font-size:11px;font-weight:800;color:var(--muted);padding:0 2px}
#cilon-app .person-row button{padding:8px 0;border:1px solid var(--line);background:#fff;color:var(--brand)}
#cilon-app .person-row.active button{background:var(--brand);color:#fff}
#cilon-app .person-row input{padding:14px 12px;font-size:17px;font-weight:850;line-height:1.2}
#cilon-app .print-sheet{display:none}
#cilon-app .print-sheet.preparing{
  display:grid;
  width:215.9mm;
  min-height:279.4mm;
  grid-template-columns:repeat(2,76mm);
  grid-auto-rows:max-content;
  column-gap:0;
  row-gap:0;
  justify-content:center;
  align-content:center;
  position:fixed;
  left:-10000px;
  top:0;
  visibility:hidden;
  box-sizing:border-box;
}
#cilon-app .preview-grid{width:100%;display:grid;grid-template-columns:1fr;gap:14px;align-content:start}
#cilon-app .preview-card{background:#fff;border:1px solid #d0d5dd;border-radius:14px;padding:18px;cursor:default;transition:.15s;min-width:0;overflow:visible}
#cilon-app .preview-badge-frame{width:100%;display:flex;align-items:center;justify-content:center;overflow:visible;padding:1px}
#cilon-app .preview-card:hover{border-color:#173b67}
#cilon-app .preview-card.active{border-color:#173b67;box-shadow:0 0 0 3px rgba(23,59,103,.12)}
#cilon-app .preview-label{font-size:13px;font-weight:900;color:#344054;margin-bottom:12px}
#cilon-app .preview-card .badge{width:min(760px,100%)!important;max-width:100%!important;margin:0 auto;box-shadow:0 12px 28px rgba(16,24,40,.16)!important;border:1px solid #b8bcc2!important;flex:none!important;overflow:hidden!important}
#cilon-app .preview-card .badge.small{aspect-ratio:76/26.5;height:auto!important}
#cilon-app .preview-card .badge.large{aspect-ratio:76/38.5;height:auto!important}
#cilon-app .preview-empty{display:grid;place-items:center;min-height:82px;border:1px dashed #cfd4dc;border-radius:9px;color:#98a2b3;font-size:12px;background:#fafafa}

#cilon-app .print-badge{
  position:relative!important;
  contain:layout paint!important;
  overflow:hidden!important;
  background:#fff;
  color:#000;
  border:.25mm solid #b8bcc2!important;
  border-radius:1.5mm!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
  transform:none!important;
  zoom:1!important;
}
#cilon-app .print-badge.small{width:76mm!important;height:26.5mm!important;min-width:76mm!important;max-width:76mm!important;min-height:26.5mm!important;max-height:26.5mm!important}
#cilon-app .print-badge.large{width:76mm!important;height:38.5mm!important;min-width:76mm!important;max-width:76mm!important;min-height:38.5mm!important;max-height:38.5mm!important}
#cilon-app .print-badge .inner{padding:2.2mm!important;gap:1.8mm!important}
#cilon-app .print-badge.layout-top .inner{gap:1.2mm!important}
#cilon-app .print-badge .logo-wrap{flex-basis:30%!important;height:82%!important;padding:.5mm!important}
#cilon-app .print-badge.layout-top .logo-wrap{flex-basis:36%!important;height:36%!important;width:82%!important;padding:0!important}
#cilon-app .print-badge .logo-wrap img{object-fit:contain!important}
#cilon-app .print-badge .logo-wrap.circle, #cilon-app .print-badge .logo-wrap.square{
  flex:0 0 auto!important;
  width:20mm!important;
  height:20mm!important;
  min-width:20mm!important;
  min-height:20mm!important;
  max-width:20mm!important;
  max-height:20mm!important;
  aspect-ratio:1/1!important;
  padding:0!important;
}
#cilon-app .print-badge.small .logo-wrap.circle, #cilon-app .print-badge.small .logo-wrap.square{
  width:20mm!important;
  height:20mm!important;
  min-width:20mm!important;
  min-height:20mm!important;
  max-width:20mm!important;
  max-height:20mm!important;
}
#cilon-app .print-badge.large.layout-left .logo-wrap.circle, #cilon-app .print-badge.large.layout-left .logo-wrap.square{
  width:27.3mm!important;
  height:27.3mm!important;
  min-width:27.3mm!important;
  min-height:27.3mm!important;
  max-width:27.3mm!important;
  max-height:27.3mm!important;
  aspect-ratio:1/1!important;
}
#cilon-app .print-badge.large.layout-left .logo-wrap.circle img, #cilon-app .print-badge.large.layout-left .logo-wrap.square img{
  width:27.3mm!important;
  height:27.3mm!important;
  min-width:27.3mm!important;
  min-height:27.3mm!important;
  max-width:27.3mm!important;
  max-height:27.3mm!important;
  aspect-ratio:1/1!important;
}
#cilon-app .print-badge .logo-wrap.circle{
  border-radius:50%!important;
  clip-path:circle(50% at 50% 50%)!important;
  overflow:hidden!important;
}
#cilon-app .print-badge .logo-wrap.circle img{
  display:block!important;
  width:20mm!important;
  height:20mm!important;
  min-width:20mm!important;
  min-height:20mm!important;
  max-width:20mm!important;
  max-height:20mm!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  clip-path:circle(50% at 50% 50%)!important;
  object-fit:contain!important;
}
#cilon-app .print-badge .name-zone, #cilon-app .print-badge .title-zone{padding:.4mm!important;overflow:hidden!important}
#cilon-app .print-badge .name, #cilon-app .print-badge .title, #cilon-app .print-badge .company{
  max-width:100%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
#cilon-app .print-badge .logo-sep{display:block;flex:0 0 .45mm!important;width:.45mm!important;min-width:.45mm!important;background:#6f757c!important}
#cilon-app .print-badge.layout-top .logo-sep{display:block;height:.45mm!important;min-height:.45mm!important;width:58%!important;flex:0 0 .45mm!important;background:#6f757c!important}
#cilon-app .print-badge .text-divider{display:block;height:.45mm!important;min-height:.45mm!important;flex:0 0 .45mm!important;background:#6f757c!important}


#cilon-app .color-tools{display:grid;gap:10px}#cilon-app .color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}#cilon-app .color-row input[type=color]{width:44px;height:34px;padding:2px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer}#cilon-app .swatch{position:relative}#cilon-app .swatch.light{box-shadow:inset 0 0 0 1px #b7bcc5}#cilon-app .font-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#cilon-app .font-choice{border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:#fff;cursor:pointer;min-width:0}#cilon-app .font-choice input{margin-right:6px}#cilon-app .font-choice:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 2px rgba(23,59,103,.10)}#cilon-app .font-preview{display:block;font-size:17px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#cilon-app .stage.white-material{background:#f1f3f6}#cilon-app .stage.transparent-material{background-color:#fff;background-image:linear-gradient(45deg,#d9dde3 25%,transparent 25%),linear-gradient(-45deg,#d9dde3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9dde3 75%),linear-gradient(-45deg,transparent 75%,#d9dde3 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}#cilon-app .badge.material-transparent{background-color:transparent}#cilon-app .logo-wrap.logo-transparent img{background:transparent}#cilon-app .section-note{font-size:12px;color:var(--muted);margin-top:6px}#cilon-app .custom-color-label{font-size:12px;font-weight:700;color:var(--muted)}

#cilon-app .badge.material-transparent{
  background-color:#fff!important;
  background-image:linear-gradient(45deg,#d9dde3 25%,transparent 25%),linear-gradient(-45deg,#d9dde3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9dde3 75%),linear-gradient(-45deg,transparent 75%,#d9dde3 75%)!important;
  background-size:16px 16px!important;
  background-position:0 0,0 8px,8px -8px,-8px 0!important;
}
#cilon-app .badge.material-transparent.has-printed-background{background-image:none!important}
#cilon-app .badge.material-transparent{background-image:none!important}
#cilon-app .mockup-section{margin-top:18px;border-top:1px solid #e4e7ec;padding-top:18px}
#cilon-app .mockup-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 14px}
#cilon-app .mockup-choice{border:1px solid var(--line);border-radius:10px;padding:9px;background:#fff;cursor:pointer;text-align:center;font-size:13px;font-weight:700}
#cilon-app .mockup-choice:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 2px rgba(23,59,103,.10)}
#cilon-app .mockup-choice input{margin-right:5px}
#cilon-app .coat-preview{position:relative;min-height:360px;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#eef1f5,#d7dde5);display:grid;place-items:center}
/* Close-up masculine suit jacket with classic notch lapels and a white dress shirt. */
#cilon-app .coat-preview{position:relative;min-height:390px;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#dfe4ea,#cbd3dc);display:grid;place-items:center}
#cilon-app .coat{position:relative;width:min(520px,98%);height:370px;background:linear-gradient(105deg,#111b27 0%,#263545 48%,#111b26 100%);border-radius:22px 22px 4px 4px;box-shadow:0 24px 50px rgba(0,0,0,.26);overflow:hidden}
#cilon-app .coat .shirt{position:absolute;left:50%;top:-5%;width:42%;height:88%;transform:translateX(-50%);background:linear-gradient(90deg,#eff1f2,#fff 48%,#e4e7e9);clip-path:polygon(10% 0,90% 0,72% 100%,28% 100%);z-index:1}
#cilon-app .coat .shirt:before, #cilon-app .coat .shirt:after{content:"";position:absolute;top:0;width:58%;height:35%;background:#fff;border-bottom:1px solid #cfd3d8;z-index:2}
#cilon-app .coat .shirt:before{left:-7%;clip-path:polygon(0 0,100% 0,78% 100%,18% 58%)}
#cilon-app .coat .shirt:after{right:-7%;clip-path:polygon(0 0,100% 0,82% 58%,22% 100%)}
#cilon-app .coat:before, #cilon-app .coat:after{content:"";position:absolute;top:-2%;height:105%;width:58%;background:linear-gradient(145deg,#354657,#172330);z-index:3}
#cilon-app .coat:before{left:-4%;clip-path:polygon(0 0,74% 0,100% 37%,56% 100%,0 78%)}
#cilon-app .coat:after{right:-4%;clip-path:polygon(26% 0,100% 0,100% 78%,44% 100%,0 37%)}
#cilon-app .coat-button{display:none}
#cilon-app .worn-badge{position:absolute;left:61%;top:52%;z-index:6;transform:none;transform-origin:center;width:var(--wear-width,132px)}
#cilon-app .worn-badge .badge{transform-origin:top left!important;flex:none!important}
#cilon-app .worn-badge[data-size="small"] .badge{aspect-ratio:76/26.5/**/.5!important}
#cilon-app .worn-badge[data-size="large"] .badge{aspect-ratio:76/38.5/**/.5!important}
#cilon-app .badge.holder-gold{background:linear-gradient(135deg,#f6e49a,#b98a24)!important;background-image:none!important}
#cilon-app .badge.holder-silver{background:linear-gradient(135deg,#f7f8f9,#aab3bd)!important;background-image:none!important}
#cilon-app .badge.holder-white{background:#fff!important;background-image:none!important}
#cilon-app .badge.dev-guides:after{content:"";position:absolute;inset:6%;border:1px dashed rgba(220,38,38,.65);pointer-events:none;z-index:20}
#cilon-app .badge.dev-guides:before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed rgba(37,99,235,.65);pointer-events:none;z-index:20}
@media (max-width:600px){#cilon-app .coat-preview{min-height:310px}#cilon-app .coat{height:295px}#cilon-app .worn-badge{left:58%;top:52%;--wear-width:112px}}


#cilon-app .roster-panel{padding:20px;max-height:none;overflow:visible;position:static;scrollbar-gutter:stable}
#cilon-app .roster-panel h2{margin-top:0;font-size:17px}
#cilon-app .roster-panel .roster-head{font-size:12px}
#cilon-app .roster-panel .person-row{grid-template-columns:38px minmax(0,1fr) minmax(0,1fr);gap:9px}
#cilon-app .roster-panel .person-row button{font-size:14px;font-weight:900;min-height:42px}
#cilon-app .coat-preview{min-height:0!important;aspect-ratio:468/511;max-height:680px;background:#111!important;display:block!important;position:relative!important}
#cilon-app .coat-preview .wear-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#111}
#cilon-app .coat-preview .coat{display:none!important}
#cilon-app .worn-badge{left:47.4%!important;top:50.6%!important;width:29.4%!important;transform:none!important}
#cilon-app .worn-badge .badge{transform-origin:top left!important;flex:none!important}
#cilon-app .worn-badge .badge.small{aspect-ratio:76/26.5/**/.5!important}
#cilon-app .worn-badge .badge.large{aspect-ratio:76/38.5/**/.5!important}


/* v16.4 layout refinements */
#cilon-app .size-options{align-items:end}
#cilon-app .size-choice-small{min-height:58px;justify-content:center;text-align:center}
#cilon-app .size-choice-large{min-height:78px;justify-content:center;text-align:center}
#cilon-app .material-choice{min-height:58px;justify-content:center;flex-direction:column;text-align:center;gap:6px;font-weight:800}
#cilon-app .material-choice .material-icon{width:24px;height:24px;border:1px solid #aeb4bd;border-radius:5px;display:block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
#cilon-app .material-choice.white-paper .material-icon{background:#fff}
#cilon-app .material-choice.transparent-sheet .material-icon{background-color:#fff;background-image:linear-gradient(45deg,#cfd4dc 25%,transparent 25%),linear-gradient(-45deg,#cfd4dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cfd4dc 75%),linear-gradient(-45deg,transparent 75%,#cfd4dc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}
#cilon-app .holder-choice{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;line-height:1!important}
#cilon-app .preview-panel{overflow-y:auto}
#cilon-app .preview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#cilon-app .preview-card{padding:12px}
#cilon-app .preview-label{margin-bottom:8px}
#cilon-app .preview-card .badge{width:100%!important}
#cilon-app .mockup-section{display:flex;flex-direction:column;align-items:center}
#cilon-app .mockup-section .preview-head{width:100%}
#cilon-app .coat-preview{width:min(390px,78%);margin:0 auto;max-height:470px}
@media (max-width:1100px){#cilon-app .preview-grid{grid-template-columns:1fr}#cilon-app .coat-preview{width:min(390px,92%)}}

@media (max-width:1180px){#cilon-app main{grid-template-columns:minmax(330px,390px) minmax(560px,1fr)}#cilon-app .preview-panel{grid-column:2;grid-row:1 / span 2}}
@media (max-width:850px){#cilon-app header{padding:14px 16px}#cilon-app main{grid-template-columns:1fr;padding:12px;gap:14px}#cilon-app .panel, #cilon-app .preview-panel{padding:14px}#cilon-app .preview-panel, #cilon-app .roster-panel{position:static;max-height:none;overflow:visible}#cilon-app .preview-panel{grid-column:auto;grid-row:auto;min-height:500px}#cilon-app .stage{padding:12px}#cilon-app .preview-grid{grid-template-columns:1fr}#cilon-app .badge.small, #cilon-app .badge.large{max-width:100%}#cilon-app .option-row, #cilon-app .font-grid{grid-template-columns:1fr 1fr}#cilon-app .actions{position:sticky;bottom:0;background:#fff;padding:10px 0 2px;z-index:5}#cilon-app .actions button{flex:1}}@media (max-width:480px){#cilon-app .option-row, #cilon-app .font-grid{grid-template-columns:1fr}#cilon-app .roster-head, #cilon-app .person-row{grid-template-columns:30px minmax(0,1fr) minmax(0,1fr)}#cilon-app .brand-logo{width:120px;height:40px}#cilon-app .brand small{display:none}#cilon-app .preview-head{align-items:flex-start;gap:8px}#cilon-app .badge-meta{text-align:right}#cilon-app .version-label{font-size:11px}}
@media print{
  @page{size:Letter;margin:0!important}
  #cilon-app, #cilon-app{
    width:215.9mm!important;
    height:279.4mm!important;
    min-width:215.9mm!important;
    min-height:279.4mm!important;
    max-width:215.9mm!important;
    max-height:279.4mm!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#fff!important;
    zoom:1!important;
    transform:none!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  #cilon-app header, #cilon-app main{display:none!important}
  #cilon-app .print-sheet{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:215.9mm!important;
    height:279.4mm!important;
    min-width:215.9mm!important;
    min-height:279.4mm!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    visibility:visible!important;
    box-sizing:border-box!important;
    zoom:1!important;
    transform:none!important;
  }
  #cilon-app .print-badge{
    display:flex!important;
    position:absolute!important;
    margin:0!important;
    padding:0!important;
    border:.25mm solid #b8bcc2!important;
    border-radius:1.5mm!important;
    box-sizing:border-box!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
    zoom:1!important;
    transform:none!important;
  }
  #cilon-app .print-badge.small{
    width:76.5mm!important;height:26.5mm!important;
    min-width:76.5mm!important;max-width:76.5mm!important;
    min-height:26.5mm!important;max-height:26.5mm!important;
  }
  #cilon-app .print-badge.large{
    width:76.5mm!important;height:38.5mm!important;
    min-width:76.5mm!important;max-width:76.5mm!important;
    min-height:38.5mm!important;max-height:38.5mm!important;
  }
}

/* v16.5 two-step workflow */
#cilon-app .app-page{display:none}
#cilon-app .app-page.active{display:grid}
#cilon-app #reviewPage{grid-template-columns:minmax(680px,1.35fr) minmax(330px,.65fr);align-items:start}
#cilon-app .review-header{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px}
#cilon-app .review-header .sub{margin:4px 0 0}
#cilon-app .review-print-panel{grid-column:1;min-width:0}
#cilon-app .review-wear-panel{grid-column:2;position:sticky;top:14px}
#cilon-app .review-stage{padding:18px;max-height:none;overflow:visible}
#cilon-app .print-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#cilon-app .review-wear-panel .coat-preview{width:min(340px,92%);max-height:420px;margin:0 auto}
#cilon-app .review-actions{flex-direction:column}
#cilon-app .review-actions button{width:100%}
#cilon-app .designer-next-bar{display:flex;justify-content:flex-end;margin-top:16px;position:sticky;bottom:0;background:#fff;padding:10px 0 0;z-index:4}
#cilon-app .next-button{min-width:220px}

/* compact controls */
#cilon-app .size-options{align-items:center}
#cilon-app .size-choice-large{min-height:60px;height:60px}
#cilon-app .size-choice-small{min-height:48px;height:48px}
#cilon-app .size-choice-large input, #cilon-app .size-choice-small input, #cilon-app .material-choice input{position:absolute;opacity:0;pointer-events:none}
#cilon-app .size-choice-large, #cilon-app .size-choice-small{position:relative;padding:6px 10px}
#cilon-app .material-choice{min-height:44px;height:44px;padding:4px 8px;flex-direction:row;gap:7px}
#cilon-app .material-choice .material-icon{width:20px;height:20px}
#cilon-app .panel h2{margin-top:16px;margin-bottom:8px}
#cilon-app .field{margin:9px 0}
#cilon-app .choice{padding:7px 9px}

/* all 10 live previews */
#cilon-app .preview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#cilon-app .preview-panel{max-height:calc(100vh - 28px);overflow-y:auto;position:sticky;top:14px}
#cilon-app .preview-card{padding:11px}
#cilon-app .preview-label{margin-bottom:7px}
#cilon-app .preview-card .badge{width:100%!important}

@media (max-width:1100px){
  #cilon-app #reviewPage{grid-template-columns:1fr}
  #cilon-app .review-header, #cilon-app .review-print-panel, #cilon-app .review-wear-panel{grid-column:1}
  #cilon-app .review-wear-panel{position:static}
}
@media (max-width:850px){
  #cilon-app .app-page.active{display:grid}
  #cilon-app .preview-panel{position:static;max-height:none;overflow:visible}
  #cilon-app .preview-grid, #cilon-app .print-preview-grid{grid-template-columns:1fr}
  #cilon-app .review-header{align-items:flex-start;flex-direction:column}
}

@media (max-width:520px){
  #cilon-app .quick label{white-space:normal;align-items:flex-start}
  #cilon-app .quick-note{white-space:normal}
  #cilon-app .check-list{grid-template-columns:1fr}
}


#cilon-app .name-job-tab{margin-top:18px;border:1px solid #d0d5dd;border-radius:12px;background:#fff;overflow:hidden}
#cilon-app .name-job-tab #contentRosterField{margin:0;padding:12px 14px 14px;border-top:0}
#cilon-app .preview-roster-card{margin-top:14px;padding:14px;border:1px solid #e4e7ec;border-radius:14px;background:#f8fafc}
#cilon-app .preview-roster-title{font-size:15px;font-weight:900;color:#101828;margin-bottom:3px}
#cilon-app .preview-roster-help{font-size:12px;color:#667085;margin-bottom:10px}
#cilon-app .preview-roster-card #contentRosterField{margin:0}
#cilon-app .preview-roster-card .roster{gap:6px}
#cilon-app .preview-roster-card .person-row input{min-height:38px;font-weight:700}
@media (max-width:850px){#cilon-app .preview-roster-card{padding:12px}}


/* v16.15: startup render fix; Section 4 remains permanently open after Section 3. */
#cilon-app .name-job-section{margin:18px 0;border:2px solid #173b67;border-radius:12px;overflow:hidden;box-shadow:0 10px 28px rgba(23,59,103,.14);background:#fff}
#cilon-app .name-job-section>h2{margin:0;padding:13px 14px;background:#eef4fb;color:#173b67;border-bottom:1px solid #c9d8ea;font-size:16px;font-weight:900}
#cilon-app .name-job-section #contentRosterField{margin:0;padding:12px 14px 14px}
#cilon-app #designerPage.active #previewGrid{min-height:200px}


/* Version 7.1 mobile reliability and usability */
#cilon-app #rosterRows{display:block;min-height:1px}
#cilon-app #previewGrid{display:grid;min-height:1px}

@media (max-width:850px){
  #cilon-app .name-job-section{overflow:visible}
  #cilon-app .name-job-section #contentRosterField{padding:12px}
  #cilon-app .roster{width:100%;min-width:0}
  #cilon-app #rosterRows{width:100%;min-width:0}
  #cilon-app .person-row{width:100%;min-width:0}
  #cilon-app .person-row input{
    min-width:0;
    width:100%;
    box-sizing:border-box;
    -webkit-appearance:none;
    appearance:none;
  }

  #cilon-app .preview-panel{min-height:0!important}
  #cilon-app .stage{
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    padding:10px!important;
  }
  #cilon-app .preview-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    min-height:1px!important;
  }
  #cilon-app .preview-card{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }
  #cilon-app .preview-badge-frame{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
  }
  #cilon-app .preview-card .badge{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
  }
}

@media (max-width:520px){
  #cilon-app .roster-head{display:none!important}
  #cilon-app .person-row{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-areas:
      "number name"
      "number title";
    gap:7px!important;
    align-items:stretch!important;
    padding:8px 0;
    border-bottom:1px solid #e4e7ec;
  }
  #cilon-app .person-row:last-child{border-bottom:0}
  #cilon-app .person-row button{
    grid-area:number;
    min-height:84px;
    height:100%;
    font-size:14px;
    font-weight:900;
  }
  #cilon-app .person-row input:nth-of-type(1){grid-area:name}
  #cilon-app .person-row input:nth-of-type(2){grid-area:title}
  #cilon-app .person-row input{
    min-height:42px;
    padding:10px 11px;
    font-size:16px; /* prevents unwanted iPhone input zoom */
  }
  #cilon-app .person-row input:nth-of-type(1)::placeholder{content:"Name"}
  #cilon-app .person-row input:nth-of-type(2)::placeholder{content:"Job title"}

  #cilon-app .preview-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:3px!important;
  }
  #cilon-app .badge-meta{text-align:left!important}
  #cilon-app .preview-card{padding:8px!important}
  #cilon-app .preview-label{font-size:12px}
}


/* Version 7.1 — production text geometry
   The divider is the exact midpoint of the remaining text area.
   Name and secondary content are centered in equal upper/lower halves. */
#cilon-app .text-block.with-title{
  display:grid!important;
  grid-template-rows:minmax(0,1fr) 1px minmax(0,1fr)!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  height:100%!important;
  min-height:0!important;
}
#cilon-app .text-block.with-title .name-zone, #cilon-app .text-block.with-title .title-zone{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0 1%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  overflow:hidden!important;
}
#cilon-app .text-block.with-title .title-zone>div{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.12em!important;
  min-height:0!important;
}
/* Optical correction: lowercase-heavy job titles look visually high even
   when mathematically centered. This tiny shift corrects appearance without
   moving the divider or changing the equal halves. */
#cilon-app .text-block.with-title .title-zone>div{
  transform:translateY(4%)!important;
}
#cilon-app .text-block.with-title .name-zone{
  transform:translateY(-1%)!important;
}
#cilon-app .text-block.with-title .text-divider{
  align-self:center!important;
  margin:0!important;
  min-height:1px!important;
  height:1px!important;
  flex:none!important;
}
#cilon-app .layout-top .text-block{
  min-height:0!important;
  flex:1 1 0!important;
}

/* Mobile production safeguards */
@media (max-width:850px){
  #cilon-app .name-job-section, #cilon-app .name-job-section #contentRosterField, #cilon-app #rosterRows, #cilon-app #previewGrid{
    min-width:0!important;
    width:100%!important;
  }
  #cilon-app .preview-panel{min-height:0!important}
  #cilon-app .stage{
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
  }
  #cilon-app .preview-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  #cilon-app .preview-card, #cilon-app .preview-badge-frame, #cilon-app .preview-card .badge{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
}
@media (max-width:520px){
  #cilon-app .roster-head{display:none!important}
  #cilon-app .person-row{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-areas:"number name" "number title"!important;
    gap:7px!important;
    padding:8px 0!important;
    border-bottom:1px solid #e4e7ec!important;
  }
  #cilon-app .person-row button{grid-area:number!important;height:100%!important;min-height:84px!important}
  #cilon-app .person-row input:nth-of-type(1){grid-area:name!important}
  #cilon-app .person-row input:nth-of-type(2){grid-area:title!important}
  #cilon-app .person-row input{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    font-size:16px!important;
    box-sizing:border-box!important;
  }
}


/* Version 7.1 — reliable round logo and smart top-logo banner */
#cilon-app .logo-wrap.circle{
  border-radius:50%!important;
  overflow:hidden!important;
  clip-path:circle(50% at 50% 50%)!important;
  -webkit-clip-path:circle(50% at 50% 50%)!important;
  -webkit-mask-image:radial-gradient(circle at center,#000 69.8%,transparent 70.2%)!important;
  mask-image:radial-gradient(circle at center,#000 69.8%,transparent 70.2%)!important;
}
#cilon-app .logo-wrap.circle img{
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
  clip-path:circle(50% at 50% 50%)!important;
  -webkit-clip-path:circle(50% at 50% 50%)!important;
}

/* Top position is always a wide rectangular banner.
   Square/round source logos are center-cropped vertically in the browser,
   matching the generated PDF behavior. */
#cilon-app .layout-top .logo-wrap.rect{
  width:82%!important;
  height:29%!important;
  flex:0 0 29%!important;
  aspect-ratio:3.2/1!important;
  border-radius:7%!important;
  overflow:hidden!important;
  padding:0!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
#cilon-app .layout-top .logo-wrap.rect img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:0!important;
}
#cilon-app .print-badge.layout-top .logo-wrap.rect{
  width:82%!important;
  height:29%!important;
  flex-basis:29%!important;
  aspect-ratio:3.2/1!important;
  overflow:hidden!important;
}
#cilon-app .print-badge.layout-top .logo-wrap.rect img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}


/* Version 7.1 — left logo optical inset: exactly 1 mm to the right */
#cilon-app .badge.layout-left .logo-wrap{
  transform:translateX(6px)!important;
}
#cilon-app .print-badge.layout-left .logo-wrap{
  transform:translateX(1mm)!important;
}


/* Version 7.1 — Shopify-safe, mobile-first application shell */
#cilon-app{
  --cilon-brand:var(--brand);
  width:100%;
  max-width:100%;
  margin:0 auto;
  color:var(--ink);
  background:var(--bg);
  isolation:isolate;
  contain:layout style;
}
#cilon-app button, #cilon-app input, #cilon-app select{
  font-family:inherit;
}
#cilon-app img{max-width:100%}

@media (max-width:850px){
  #cilon-app header{
    padding:12px 14px;
    position:relative;
  }
  #cilon-app main{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    padding:12px!important;
  }
  #cilon-app .panel, #cilon-app .preview-panel{
    width:100%!important;
    max-width:100%!important;
    margin-bottom:12px!important;
    padding:14px!important;
  }
  #cilon-app .preview-panel{
    position:static!important;
    max-height:none!important;
    overflow:visible!important;
  }
  #cilon-app .preview-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  #cilon-app .preview-card, #cilon-app .preview-badge-frame{
    width:100%!important;
    min-width:0!important;
  }
  #cilon-app .preview-card .badge{
    width:456px!important;
    max-width:none!important;
    transform-origin:center center!important;
  }
}

@media (max-width:520px){
  #cilon-app .brand-logo{width:126px;height:42px}
  #cilon-app .version-label{font-size:10px}
  #cilon-app .name-job-section{overflow:visible!important}
  #cilon-app .roster-head{display:none!important}
  #cilon-app .person-row{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-areas:"number name" "number title"!important;
    gap:7px!important;
    width:100%!important;
    padding:8px 0!important;
  }
  #cilon-app .person-row button{grid-area:number!important;min-height:84px!important;height:100%!important}
  #cilon-app .person-row input:nth-of-type(1){grid-area:name!important}
  #cilon-app .person-row input:nth-of-type(2){grid-area:title!important}
  #cilon-app .person-row input{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    font-size:16px!important;
    padding:10px 11px!important;
  }
  #cilon-app .stage{
    min-height:0!important;
    height:auto!important;
    padding:8px!important;
    overflow:visible!important;
  }
  #cilon-app .preview-label{font-size:11px!important}
}


/* Version 7.1 — mobile preview uses the exact desktop badge component.
   Only the complete badge is scaled; logo and typography retain their ratios. */
@media (max-width:850px){
  #cilon-app .preview-badge-frame{
    position:relative!important;
    width:100%!important;
    overflow:hidden!important;
    min-height:0!important;
  }
  #cilon-app .preview-card .badge{
    position:relative!important;
    left:0!important;
    top:0!important;
    margin:0 auto!important;
    transform-origin:top center!important;
  }
}
/* CiLoN Shopify Refresh layout compatibility fix — append to the END of cilon-name-tag-designer.css */

/* Refresh/Dawn already uses generic classes such as .field and label.
   Reset only the designer so the store theme cannot rearrange its controls. */
#cilon-app,
#cilon-app * {
  letter-spacing: normal;
}

#cilon-app {
  font-size: 16px;
  line-height: 1.4;
}

#cilon-app .field {
  display: block !important;
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 10px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

#cilon-app .field::before,
#cilon-app .field::after {
  display: none !important;
  content: none !important;
}

#cilon-app .field > label {
  display: block !important;
  width: auto !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}

#cilon-app label,
#cilon-app .choice,
#cilon-app .content-control-row,
#cilon-app .font-choice,
#cilon-app .mockup-choice {
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.25 !important;
}

#cilon-app .choice {
  display: flex !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
}

#cilon-app .option-row,
#cilon-app .holder-options,
#cilon-app .font-grid,
#cilon-app .color-tools,
#cilon-app .color-row {
  min-width: 0 !important;
}

#cilon-app .holder-options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#cilon-app .holder-choice {
  display: flex !important;
  height: 40px !important;
  min-height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 6px !important;
  overflow: hidden !important;
}

#cilon-app .holder-choice span {
  display: block !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

#cilon-app input[type="text"],
#cilon-app input[type="file"],
#cilon-app select {
  box-sizing: border-box !important;
  min-width: 0 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
}

#cilon-app input[type="file"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 42px !important;
  padding: 6px !important;
  font-size: 13px !important;
  overflow: hidden !important;
}

#cilon-app .status,
#cilon-app .section-note,
#cilon-app .startup-roster-help {
  display: block !important;
  width: 100% !important;
  margin-top: 7px !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
}

#cilon-app .name-job-section #contentRosterField {
  display: block !important;
}

#cilon-app .roster {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 6px !important;
}

#cilon-app .roster-head,
#cilon-app .person-row {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
}

#cilon-app .person-row input {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#cilon-app .font-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#cilon-app .font-choice {
  display: block !important;
  min-width: 0 !important;
  padding: 9px !important;
  font-size: 12px !important;
  overflow: hidden !important;
}

#cilon-app .font-preview {
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#cilon-app main {
  width: 100% !important;
  max-width: 1580px !important;
  min-width: 0 !important;
}

#cilon-app .panel,
#cilon-app .preview-panel,
#cilon-app .stage,
#cilon-app .preview-grid,
#cilon-app .preview-card {
  min-width: 0 !important;
}

@media (min-width: 851px) {
  #cilon-app main {
    display: grid !important;
    grid-template-columns: minmax(380px, 430px) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  #cilon-app .panel {
    grid-column: 1 !important;
  }

  #cilon-app .preview-panel {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }
/* CiLoN Shopify — Step 1 / Step 2 layout fix
   Append this at the VERY END of cilon-name-tag-designer.css */

/* Only the active workflow page may be visible. */
#cilon-app main.app-page {
  display: none !important;
}

#cilon-app main.app-page.active {
  display: grid !important;
  width: 100% !important;
  max-width: 1580px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  gap: 18px !important;
  align-items: start !important;
}

@media (min-width: 851px) {
  /* Step 1: controls + live preview */
  #cilon-app #designerPage.active {
    grid-template-columns: minmax(380px, 430px) minmax(0, 1fr) !important;
  }

  #cilon-app #designerPage > .panel {
    grid-column: 1 !important;
  }

  #cilon-app #designerPage > .preview-panel {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }

  /* Step 2: print preview + wear preview */
  #cilon-app #reviewPage.active {
    grid-template-columns: minmax(680px, 1.35fr) minmax(330px, .65fr) !important;
  }

  #cilon-app #reviewPage > .review-header {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  #cilon-app #reviewPage > .review-print-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #cilon-app #reviewPage > .review-wear-panel {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 1100px) {
  #cilon-app #reviewPage.active {
    grid-template-columns: 1fr !important;
  }

  #cilon-app #reviewPage > .review-header,
  #cilon-app #reviewPage > .review-print-panel,
  #cilon-app #reviewPage > .review-wear-panel {
    grid-column: 1 !important;
  }

  #cilon-app #reviewPage > .review-header { grid-row: 1 !important; }
  #cilon-app #reviewPage > .review-print-panel { grid-row: 2 !important; }
  #cilon-app #reviewPage > .review-wear-panel { grid-row: 3 !important; position: static !important; }
}