/* Loaded last, after each module's styles. Layout and canvas selectors stay owned
   by their modules. Legacy aliases are scoped to application UI only. */
body.modilo-ui {
  --bg: var(--m-bg); --white: var(--m-surface); --text: var(--m-text);
  --muted: var(--m-muted); --border: var(--m-border);
  --sidebar-bg: var(--m-surface); --sidebar-border: var(--m-border);
  --accent: var(--m-primary); --accent2: var(--m-primary);
  --c1: var(--m-primary); --c2: var(--m-primary); --c4: var(--m-success);
  --c5: var(--m-warning); --green: var(--m-success); --amber: var(--m-warning);
  font-family: var(--m-font);
  color: var(--m-text);
  background-color: var(--m-bg);
}
.modilo-ui [hidden] { display: none !important; }
.modilo-ui :is(button, input, select, textarea) { font-family: var(--m-font); }
.modilo-ui :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--m-focus); outline-offset: 3px;
}
.modilo-ui :is(button, .btn, .btn-home, .btn-primary, .btn-secondary, .btn-dark, .btn-ghost, .guide-btn) {
  border-radius: 0;
}
.modilo-ui :is(.btn-primary, .btn-dark, .m-button-primary) {
  background: var(--m-primary); color: var(--m-on-primary); border-color: var(--m-primary);
}
.modilo-ui :is(.btn-primary, .btn-dark, .m-button-primary):hover { background: var(--m-primary-hover); }
.modilo-ui :is(button:disabled, .btn[aria-disabled="true"]) {
  cursor: not-allowed; opacity: .65;
}
.modilo-ui :is(.form-input, .form-select, .form-textarea, .search-input) {
  border: 1px solid var(--m-border-strong); border-radius: 0;
  background: var(--m-surface); color: var(--m-text);
}
.modilo-ui :is(.tile, .partner-tile, .template-card, .card, .panel, .setup-guide) {
  border-color: var(--m-border); border-radius: 0; box-shadow: var(--m-shadow);
}
.modilo-ui :is(.tile, .partner-tile, .template-card):hover {
  transform: none; box-shadow: var(--m-shadow); border-color: var(--m-border-strong);
}
.modilo-ui :is(.tile, .partner-tile) { background-color: var(--m-surface); }
.modilo-ui :is(.tile)::after { background: var(--m-border-strong); }
.modilo-ui :is(.tile-icon, .tile-title, .partner-name) { color: var(--m-text); }
.modilo-ui :is(.modal-dialog, .modal-content, .tenant-modal-dialog, .fp-dialog) {
  border-radius: 0; box-shadow: var(--m-shadow-dialog);
}
.modilo-ui :is(.page-title, .page-header h1) { font-size: 24px; line-height: 1.25; letter-spacing: -.4px; }
.modilo-ui :is(.page-copy, .page-desc, .tile-copy, .form-hint) { color: var(--m-muted); line-height: var(--m-line); }
.modilo-ui :is(.page-label, .section-label) { color: var(--m-muted); letter-spacing: .02em; }
.modilo-ui .card-actions { opacity: 1; }
.modilo-ui .card-actions button { min-width: 32px; min-height: 32px; }
.m-page, .m-page *, .m-nav, .m-nav * { box-sizing: border-box; }
.m-page { max-width: 1280px; margin: auto; padding: 32px 40px 48px; font: 14px/1.5 var(--m-font); }
.m-page p { margin: 0; }
.m-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.m-page h1 { font: 650 28px/1.3 var(--m-font); margin: 0 0 8px; }
.m-page h2 { font: 650 16px/1.4 var(--m-font); margin: 0 0 12px; }
.m-subdued { color: var(--m-muted); }
.m-card { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 0; padding: 20px; box-shadow: var(--m-shadow); }
.m-stack { display: grid; gap: 24px; }
.m-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.m-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.m-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 14px; font: 550 13px/1.4 var(--m-font); text-decoration: none; border: 1px solid var(--m-border-strong); border-radius: 0; background: var(--m-surface); color: var(--m-text); cursor: pointer; }
.m-button:hover { background: var(--m-surface-hover); }
.m-button-primary { background: var(--m-primary); color: var(--m-on-primary); }
.m-button-danger { background: var(--m-danger); color: var(--m-on-primary); }
.m-button-danger:hover { background: var(--m-danger-hover); }
.m-button:disabled { background: var(--m-disabled); color: var(--m-disabled-text); cursor: not-allowed; }
.m-field { display: grid; gap: 4px; font: 14px/1.5 var(--m-font); }
.m-field :is(input, select, textarea) { min-height: 36px; padding: 7px 10px; border: 1px solid var(--m-border-strong); border-radius: 0; background: var(--m-surface); color: var(--m-text); width: 100%; }
.m-field [aria-invalid="true"] { border-color: var(--m-danger); }
.m-banner { padding: 12px 16px; border-radius: 0; background: var(--m-info-bg); color: var(--m-info); }
.m-banner-error { background: var(--m-danger-bg); color: var(--m-danger); }
.m-banner-warning { background: var(--m-warning-bg); color: var(--m-warning); }
.m-banner-success { background: var(--m-success-bg); color: var(--m-success); }
.m-badge { display: inline-block; border-radius: 0; padding: 2px 8px; font-size: 12px; background: var(--m-surface-selected); color: var(--m-text); }
.m-badge-success { color: var(--m-success); background: var(--m-success-bg); }
.m-badge-warning { color: var(--m-warning); background: var(--m-warning-bg); }
.m-table-wrap { overflow-x: auto; }
.m-table { width: 100%; border-collapse: collapse; text-align: left; }
.m-table :is(th, td) { padding: 12px; border-bottom: 1px solid var(--m-border); vertical-align: middle; }
.m-table th { font-weight: 550; background: var(--m-surface-hover); }
.m-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.m-filters [aria-current="page"] { background: var(--m-surface-selected); font-weight: 650; }
.m-file-preview { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; background: var(--m-surface-hover); color: var(--m-muted); border-radius: 0; }
.m-file-preview img { width: 100%; height: 100%; object-fit: contain; }
/* Workspace adapters change paint only: no dimensions, ordering or visibility. */
body.modilo-workspace {
  --c-blue: var(--m-focus); --c-violet: var(--m-primary); --c-teal: var(--m-muted);
  --c-green: var(--m-success); --c-amber: var(--m-warning); --c-rose: var(--m-danger);
}
body.modilo-workspace #btnAddContentHeader,
body.modilo-workspace #btnAddDuplicateHeader,
body.modilo-workspace #btnSave {
  background: var(--m-primary); color: var(--m-on-primary); border-color: var(--m-border-strong); box-shadow: none;
}
body.modilo-workspace .canvas-role-label { color: var(--m-text); border-color: var(--m-border); }
body.modilo-workspace :is(.sop-header-icon, .sop-empty-icon) { background: var(--m-surface-selected); color: var(--m-muted); box-shadow: none; }
body.modilo-workspace :is(.sop-header-icon i, .sop-empty-icon i) { color: var(--m-muted); }
body.modilo-workspace #selectedObjectPanel { border-color: var(--m-border); }
.m-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; margin: auto; padding: 24px; border: 1px solid var(--m-border); border-radius: 0; box-shadow: var(--m-shadow-dialog); color: var(--m-text); background: var(--m-surface); }
.m-dialog::backdrop { background: #0006; }
.m-skip { position: fixed; left: 16px; top: -80px; z-index: 10001; background: var(--m-surface); color: var(--m-link); padding: 12px; }
.m-skip:focus { top: 8px; }
.m-nav { position: fixed; inset: 0 auto 0 0; width: 224px; padding: 32px 16px; background: var(--m-surface-hover); border-right: 1px solid var(--m-border); overflow-y: auto; z-index: 101; font: 14px/1.5 var(--m-font); }
.m-nav-brand { display: block; color: var(--m-text); font-weight: 700; font-size: 20px; margin: 0 12px 20px; text-decoration: none; }
.m-nav a.m-nav-item { display: flex; gap: 12px; align-items: center; padding: 11px 12px; color: var(--m-text); border-radius: 0; text-decoration: none; }
.m-nav a.m-nav-item:hover { background: var(--m-border); }
.m-nav a[aria-current="page"] { background: var(--m-surface); font-weight: 650; box-shadow: var(--m-shadow); }
.m-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; flex-shrink: 0; }
.m-store-context { margin: 32px 0 12px; padding: 16px 12px; border-top: 1px solid var(--m-border); overflow-wrap: anywhere; color: var(--m-muted); font-size: 12px; }
.m-store-context a { color: var(--m-link); display: block; margin-top: 8px; }
.modilo-with-nav { margin: 0 0 0 224px; }
.m-environment { padding: 4px 12px; background: var(--m-warning-bg); color: var(--m-warning); font: 600 12px/1.5 var(--m-font); text-align: center; }
s-app-nav { display: none; }
@media (max-width: 760px) {
  .m-nav { position: static; width: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--m-border); }
  .m-nav-links { display: flex; flex-wrap: wrap; gap: 4px; }
  .m-nav a.m-nav-item { padding: 6px 8px; }
  .m-nav-brand { margin: 4px 8px 8px; }
  .m-store-context { margin: 8px; }
  .modilo-with-nav { margin-left: 0; }
  .m-page { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .modilo-ui :is(button, a, .tile, .partner-tile, .template-card, .m-dialog) { transition: none; animation: none; }
}
/* Shared merchant page composition. Specialized editor zones keep their layout. */
body.modilo-ui { margin-top:0; margin-right:0; margin-bottom:0; }
body.modilo-ui:not(.modilo-with-nav) { margin-left:0; }
.m-icon { width:20px; height:20px; flex:none; }
.m-icon-tile { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; color:var(--m-primary); background:var(--m-surface-selected); border:1px solid transparent; border-radius:0; }
.m-choice-card:nth-child(2) .m-icon-tile, .m-journey:nth-child(2) .m-icon-tile { color:var(--m-accent-teal); background:var(--m-accent-teal-bg); }
.m-nav a[aria-current="page"] .m-icon, .m-tabs a[aria-current="page"] { color:var(--m-primary); }
.m-icon-tile .m-icon { width:22px; height:22px; }
.m-page h3 { margin:0; font-size:14px; font-weight:600; }
.m-card-flush { padding:0; overflow:hidden; }
.m-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; }
.m-section-heading h2 { margin:0; }
.m-section-heading p { margin-top:4px; font-size:13px; }
.m-page-header .m-button-primary { margin-top:2px; }
.m-eyebrow { font-size:11px; font-weight:650; letter-spacing:.08em; color:var(--m-muted); }
.m-overview-intro { display:grid; grid-template-columns:1.1fr 1fr; padding:32px; gap:40px; align-items:center; }
.m-intro-copy h2 { font-size:27px; line-height:1.25; letter-spacing:-.6px; max-width:330px; margin:12px 0; }
.m-intro-copy p { color:var(--m-muted); max-width:420px; margin-bottom:24px; }
.m-journey { list-style:none; padding:0 0 0 32px; margin:0; border-left:1px solid var(--m-border); display:grid; gap:18px; }
.m-journey li { display:flex; align-items:center; gap:14px; }
.m-journey strong, .m-journey span:not(.m-icon-tile) { display:block; }
.m-journey div>span { color:var(--m-muted); font-size:12px; margin-top:2px; }
.m-overview-bottom { display:grid; grid-template-columns:1.25fr 1fr; gap:24px; }
.m-resource-row { display:flex; align-items:center; gap:14px; padding:16px 24px; border-top:1px solid var(--m-border); color:var(--m-text); text-decoration:none; }
.m-resource-row:hover { background:var(--m-surface-hover); }
.m-resource-row>span:nth-child(2) { flex:1; min-width:0; }
.m-resource-row strong, .m-resource-row small { display:block; }
.m-resource-row small { color:var(--m-muted); font-size:12px; margin-top:3px; }
.m-resource-row>.m-icon:last-child { width:16px; color:var(--m-muted); }
.m-help-card { padding:24px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.m-help-card h2 { margin:0; }
.m-help-card .m-button { margin-top:auto; }
.m-text-link { color:var(--m-link); text-underline-offset:3px; font-size:13px; }
.m-tools summary { cursor:pointer; font-weight:600; }
.m-tools summary span { margin-left:12px; font-size:12px; font-weight:400; }
.m-tools-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding-top:24px; }
.m-tools-grid a { color:var(--m-text); font-size:13px; text-underline-offset:3px; }
.m-page-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:12px; color:var(--m-muted); }
.m-page-footer a { color:inherit; text-decoration:none; }
.m-page-footer .m-actions { gap:20px; }
.m-toolbar { display:flex; align-items:center; gap:12px; padding:16px 24px; border-bottom:1px solid var(--m-border); }
.m-search { position:relative; flex:1; min-width:140px; }
.m-search>.m-icon { position:absolute; left:12px; top:10px; color:var(--m-muted); width:18px; height:18px; }
.m-search input { padding-left:40px; height:40px; }
.m-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.m-table th { padding:12px 24px; font-size:12px; color:var(--m-muted); }
.m-table td { padding:18px 24px; }
.m-table td:last-child, .m-table th:last-child { text-align:right; }
.m-table tbody tr:hover { background:var(--m-surface-hover); }
.m-product-cell { display:flex; align-items:center; gap:14px; min-width:220px; }
.m-product-thumb { display:flex; align-items:center; justify-content:center; width:60px; height:60px; flex:none; border:1px solid var(--m-border); border-radius:0; background:var(--m-surface-hover); color:var(--m-muted); overflow:hidden; }
.m-product-thumb img { width:100%; height:100%; object-fit:contain; }
.m-product-cell strong { display:block; font-size:14px; overflow-wrap:anywhere; }
.m-product-cell small { display:block; font-size:12px; color:var(--m-muted); margin-top:4px; }
.m-table-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; font-size:12px; }
.m-empty-state { display:grid; justify-items:center; text-align:center; padding:40px 24px; color:var(--m-muted); gap:8px; }
.m-empty-state strong { font-size:16px; color:var(--m-text); }
.m-draft-row { padding:18px 24px; border-top:1px solid var(--m-border); display:grid; grid-template-columns:1fr auto auto; gap:24px; align-items:center; }
.m-draft-row h3 { margin-bottom:6px; }
.m-draft-meta { font-size:12px; color:var(--m-muted); }
.m-mini-progress { display:flex; gap:4px; margin-top:10px; width:100px; }
.m-mini-progress span { height:3px; flex:1; background:var(--m-border); border-radius:0; }
.m-mini-progress .is-complete { background:var(--m-primary); }
.m-tabs { display:flex; flex-wrap:wrap; gap:4px; margin:0; padding:0 24px; border-bottom:1px solid var(--m-border); }
.m-tabs a { padding:15px 12px; color:var(--m-muted); text-decoration:none; font-weight:550; font-size:13px; border-bottom:2px solid transparent; }
.m-tabs a[aria-current="page"] { border-bottom-color:var(--m-primary); color:var(--m-text); background:transparent; }
.m-files-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.m-file-card { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.m-file-pdf-link { align-self:center; display:inline-block; padding:6px 10px; color:var(--m-muted); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.m-file-pdf-link:hover { color:var(--m-primary); }
.m-selection-preview { width:64px; height:64px; min-width:64px; flex:none; display:grid; place-items:center; overflow:hidden; border-radius:0; background:var(--m-surface-selected); color:var(--m-primary); font-size:24px; font-weight:600; }
body.modilo-ui .m-selection-preview img { width:100%; height:100%; object-fit:contain; }
body.modilo-ui :is(#pair-designs,#pdf-design-picker) .m-picker-design { flex-direction:row; align-items:center; justify-content:flex-start; gap:12px; }
body.modilo-ui :is(#pair-designs,#pdf-design-picker) .m-picker-design strong { min-width:0; overflow-wrap:anywhere; }
.m-pairing .m-product-option>strong { flex:1; min-width:0; }
.m-file-card .m-file-preview { height:190px; border-radius:0; border-bottom:1px solid var(--m-border); }
.m-file-body { padding:16px; display:flex; flex-direction:column; gap:12px; flex:1; }
.m-file-heading { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.m-file-heading h2 { margin:0; font-size:14px; overflow-wrap:anywhere; }
.m-file-heading .m-badge { flex:none; font-size:10px; text-transform:uppercase; }
.m-file-body .m-button { width:100%; }
.m-file-body a.m-button, #files-main .m-file-body button.m-button { margin-top:auto; }
.m-file-placeholder { text-align:center; font-size:13px; }
.m-file-placeholder strong { display:block; font-size:36px; font-weight:450; color:var(--m-muted); margin-bottom:6px; }
.m-file-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; align-items:start; gap:24px; }
.m-file-detail { position:sticky; top:24px; display:grid; gap:16px; }
.m-file-detail .m-file-preview { height:220px; }
.m-file-detail h2 { overflow-wrap:anywhere; }
.m-detail-meta { display:grid; grid-template-columns:auto 1fr; gap:12px; font-size:13px; margin:0; }
.m-detail-meta dt { color:var(--m-muted); }
.m-detail-meta dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.m-settings-section { display:grid; grid-template-columns:240px 1fr; gap:32px; align-items:start; }
.m-order-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.m-order-stats span { display:block; color:var(--m-muted); font-size:12px; margin-bottom:12px; }
.m-order-stats strong { font-size:28px; font-weight:600; }
.m-settings-section>div:first-child { padding:16px 0; }
.m-settings-section h2 { margin-bottom:6px; }
.m-settings-section p { font-size:13px; }
.m-settings-section .m-resource-row:first-child { border-top:0; }
.m-breadcrumb { display:inline-flex; align-items:center; gap:8px; color:var(--m-muted); text-decoration:none; font-size:13px; margin-bottom:14px; }
.m-breadcrumb .m-icon { width:16px; height:16px; }
.m-workflow-header { align-items:center; }
.m-workflow-store { text-align:right; font-size:12px; }
.m-workflow-store span { display:block; margin-top:6px; }
.m-workflow-shell { background:var(--m-surface); border:1px solid var(--m-border); border-radius:0; box-shadow:var(--m-shadow); overflow:hidden; }
body.modilo-ui .m-workflow-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:28px 32px 24px; border-bottom:1px solid var(--m-border); }
.m-step { position:relative; background:transparent; border:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--m-muted); font-size:13px; cursor:pointer; }
.m-step::before { content:''; position:absolute; height:1px; top:17px; left:calc(-50% + 24px); right:calc(50% + 24px); background:var(--m-border); }
.m-step:first-child::before { display:none; }
.m-step-number { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--m-border-strong); border-radius:50%; background:var(--m-surface); font-weight:600; }
.m-step[aria-current="step"] { color:var(--m-text); font-weight:650; }
.m-step[aria-current="step"] .m-step-number { background:var(--m-primary); border-color:var(--m-primary); color:white; box-shadow:0 0 0 4px var(--m-surface-selected); }
.m-step.is-complete .m-step-number { color:var(--m-primary); border-color:#b6a3ea; background:var(--m-surface-selected); }
.m-workflow-panel { padding:32px; display:grid; gap:28px; }
.m-step-heading h2 { font-size:24px; margin:0 0 8px; letter-spacing:-.4px; }
.m-step-heading p { color:var(--m-muted); }
.m-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
body.modilo-ui .m-choice { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--m-border); border-radius:0; }
body.modilo-ui .m-choice input:is([type=checkbox],[type=radio]) { width:18px; min-height:18px; flex:none; margin:0; accent-color:var(--m-primary); }
body.modilo-ui .m-product-details { padding:24px; border:1px solid var(--m-border); border-radius:0; background:var(--m-surface-hover); gap:20px; }
body.modilo-ui .m-product-variant { display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,220px); gap:20px; align-items:center; padding:16px; background:var(--m-surface); border:1px solid var(--m-border); border-radius:0; }
.m-product-variant .m-actions { min-width:0; overflow-wrap:anywhere; }
.m-product-variant .m-field { min-width:0; }
.m-product-variant input[type=checkbox] { width:18px; height:18px; flex:none; accent-color:var(--m-primary); }
@media(max-width:600px) { body.modilo-ui .m-product-details { padding:16px; } body.modilo-ui .m-product-variant { grid-template-columns:minmax(0,1fr); gap:12px; } }
body.modilo-ui .m-choice-card { position:relative; display:flex; align-items:flex-start; gap:16px; padding:28px 24px; border:1px solid var(--m-border); border-radius:0; cursor:pointer; background:var(--m-surface); min-height:180px; }
.m-choice-card:hover { border-color:var(--m-border-strong); background:var(--m-surface-hover); }
body.modilo-ui .m-choice-card:has(input:checked) { border:2px solid var(--m-primary); padding:27px 23px; background:var(--m-surface-hover); }
.m-choice-card>input { position:absolute; top:18px; right:18px; width:16px; height:16px; accent-color:var(--m-primary); }
.m-choice-card strong { display:block; font-size:16px; margin:6px 16px 8px 0; }
.m-choice-card small { display:block; color:var(--m-muted); line-height:1.6; font-size:13px; }
.m-workflow-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:24px; border-top:1px solid var(--m-border); }
.m-workflow-footer>.m-subdued { font-size:12px; }
.m-workflow-footer>.m-button:last-child { margin-left:auto; }
.m-workflow-form { width:100%; box-sizing:border-box; padding:24px; background:var(--m-surface-hover); border:1px solid var(--m-border); border-radius:0; display:grid; gap:20px; }
.m-provider-connection { padding:24px; border:1px solid var(--m-border); border-radius:0; background:var(--m-surface-hover); }
.m-provider-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; }
.m-design-choices .m-choice-card { cursor:default; flex-direction:column; }
.m-design-choices .m-button { margin-top:auto; }
.m-workflow-form>.m-button { justify-self:start; }
.m-product-picker { border:1px solid var(--m-border); border-radius:0; overflow:hidden; }
.m-product-picker .m-toolbar { background:var(--m-surface-hover); padding:14px 16px; }
.m-product-picker:has(#workflow-product-picker:empty) { border-bottom:1px solid var(--m-border); }
.m-product-option { width:100%; padding:16px; display:flex; gap:16px; align-items:center; border:0; border-bottom:1px solid var(--m-border); background:var(--m-surface); text-align:left; cursor:pointer; color:var(--m-text); }
.m-product-option:hover { background:var(--m-surface-hover); }
.m-product-option .m-product-copy { flex:1; }
.m-product-option strong, .m-product-option small { display:block; }
.m-product-option small { color:var(--m-muted); margin-top:4px; }
.m-product-option:last-child { border-bottom:0; }
.m-design-entry { display:flex; align-items:center; gap:24px; padding:28px; border:1px solid var(--m-border); border-radius:0; background:var(--m-surface-hover); }
.m-design-entry>div { flex:1; }
.m-design-entry .m-icon-tile { width:64px; height:64px; background:var(--m-surface); }
.m-design-entry h3 { font-size:18px; margin-bottom:8px; }
#workflow-design-picker:empty { display:none; }
.m-design-entry p { color:var(--m-muted); margin-bottom:18px; max-width:540px; }
.m-inline-help { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-top:1px solid var(--m-border); font-size:13px; }
.m-publication-options { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; }
.m-publication-options .m-field { min-width:190px; font-size:12px; }
body.modilo-ui .m-workflow-preview-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
.m-preview-panel { border:1px solid var(--m-border); border-radius:0; overflow:hidden; display:flex; flex-direction:column; min-width:0; }
.m-preview-panel h3 { padding:16px 20px; border-bottom:1px solid var(--m-border); display:flex; gap:10px; align-items:center; }
body.modilo-ui .m-workflow-frame { display:block; width:100%; min-height:440px; border:0; background:var(--m-surface); }
.m-preview-panel .m-empty-state { margin:auto; min-height:300px; }
.m-preview-panel>.m-button { margin:16px; }
.m-checks { border:1px solid var(--m-border); border-radius:0; padding:20px; }
.m-checks #workflow-checks { gap:10px; font-size:13px; }
.m-publication-footer { flex-wrap:wrap; }
.m-publication-footer #workflow-publish-help { width:100%; text-align:right; margin-top:-4px; font-size:12px; }
body.modilo-ui .m-workflow-success { position:relative; isolation:isolate; overflow:hidden; text-align:center; padding:64px 32px 40px; gap:28px; background:radial-gradient(ellipse at 50% 25%,#ede5ff 0,transparent 64%),var(--m-surface); }
body.modilo-ui .m-workflow-success h2 { font-size:clamp(30px,4vw,48px); line-height:1.15; margin:0; letter-spacing:-1.6px; color:#362060; }
body.modilo-ui .m-workflow-success .m-actions { justify-content:center; }
body.modilo-ui .m-success-mark { display:grid; place-items:center; width:220px; height:170px; margin:0 auto; }
body.modilo-ui .m-success-art { display:block; width:220px; height:170px; max-width:100%; filter:drop-shadow(0 9px 10px #6741d919); }
.m-success-eyebrow { color:var(--m-primary-hover); font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.m-success-heading { display:grid; gap:14px; max-width:640px; margin:auto; }
body.modilo-ui .m-success-heading p { margin:0; overflow-wrap:anywhere; }
#workflow-success-copy { font-size:18px; font-weight:600; }
body.modilo-ui .m-workflow-success .m-button { min-height:46px; padding:12px 22px; }
body.modilo-ui .m-workflow-success .m-button-primary { box-shadow:0 6px 16px #6741d926; }
.m-confetti { position:absolute; inset:0; pointer-events:none; z-index:-1; overflow:hidden; }
.m-confetti i { position:absolute; top:-24px; left:var(--x); width:8px; height:15px; background:var(--m-primary); opacity:0; animation:m-celebrate 3.6s var(--delay) ease-out both; }
.m-confetti i:nth-child(3n) { background:#20a6a0; border-radius:50%; width:10px; height:10px; }
.m-confetti i:nth-child(3n + 1) { background:#f5be49; }
@keyframes m-celebrate { 0% { opacity:0; transform:translateY(-20px) rotate(0); } 12% { opacity:.85; } 75% { opacity:.65; } 100% { opacity:0; transform:translate(var(--drift),540px) rotate(var(--turn)); } }
@media (prefers-reduced-motion:reduce) { .m-confetti { display:none; } .m-confetti i { animation:none; } }
@media (max-width:600px) { body.modilo-ui .m-workflow-success { padding:40px 20px 28px; } .m-workflow-success .m-actions { flex-direction:column; width:100%; } }
body.modilo-ui.m-workflow-embedded-preview { padding-left:0 !important; margin:0 !important; background:var(--m-surface); }
body.modilo-ui.m-workflow-embedded-preview .m-nav { display:none; }
body.modilo-ui.m-workflow-embedded-preview .wrapper>header,
body.modilo-ui.m-workflow-embedded-preview .template-selector { display:none; }
body.modilo-ui.m-workflow-embedded-preview .page-content { padding:16px; }
body.modilo-ui.m-workflow-embedded-preview .content { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
body.modilo-ui.m-workflow-embedded-preview .preview-section { position:static; }
body.modilo-ui.m-workflow-embedded-preview .card { border:0; box-shadow:none; }
body.modilo-ui.m-workflow-embedded-preview .card-header { padding:0 0 12px; border:0; }
body.modilo-ui.m-workflow-embedded-preview .card-header h2 { text-transform:none; font-weight:600; }
body.modilo-ui.m-workflow-embedded-preview .card-body { padding:0; }
/* Shared paint for the existing module chrome. No editor controls are moved. */
body.modilo-ui:not(.modilo-workspace) { --header-bg:var(--m-surface); }
body.modilo-ui :is(.header-inner,.wrapper>header) { border-bottom:1px solid var(--m-border); }
body.modilo-ui:not(.modilo-workspace) :is(.header-brand,.brand)>img { filter:brightness(.18); }
body.modilo-ui:not(.modilo-workspace) :is(header .brand-name,header .meta-pill,header .meta-pill strong) { color:var(--m-text); }
body.modilo-ui:not(.modilo-workspace) :is(header .btn-home,header .btn-ghost,header .logout-link) { color:var(--m-text); background:var(--m-surface); border-color:var(--m-border); box-shadow:none; }
body.modilo-ui:not(.modilo-workspace) :is(header .btn-home,header .btn-ghost,header .logout-link):hover { background:var(--m-surface-hover); color:var(--m-text); transform:none; }
body.modilo-workspace .canvas-panel-header { background:var(--m-surface); border-bottom:1px solid var(--m-border); }
body.modilo-workspace :is(.header-key-input,.hdr-input,.canvas-panel-header select,.canvas-panel-header select option) { color:var(--m-text); background:var(--m-surface); border-color:var(--m-border); border-radius:0; }
body.modilo-workspace :is(.header-key-input,.hdr-input)::placeholder { color:var(--m-muted); }
body.modilo-workspace :is(.canvas-panel-header .panel-label,.canvas-panel-header .panel-btn) { color:var(--m-text); }
body.modilo-workspace .canvas-panel-header .panel-btn { background:var(--m-surface); border-color:var(--m-border); border-radius:0; }
body.modilo-workspace :is(.btn-secondary,.btn-add,.btn-gallery,.btn-add-field,.clipart-hdr-load) { color:var(--m-text); background:var(--m-surface); border-color:var(--m-border); box-shadow:none; }
body.modilo-workspace :is(.btn-secondary,.btn-add,.btn-gallery,.btn-add-field,.clipart-hdr-load):hover { color:var(--m-text); background:var(--m-surface-hover); transform:none; box-shadow:none; }
body.modilo-workspace .clipart-hdr-save { background:var(--m-primary); border-color:var(--m-primary); color:var(--m-on-primary); box-shadow:none; }
body.modilo-workspace .clipart-hdr-save:hover { background:var(--m-primary-hover); border-color:var(--m-primary-hover); }
body.modilo-workspace :is(.header-home-link,.header-back-link) { color:var(--m-text) !important; background:var(--m-surface) !important; border-color:var(--m-border) !important; }
body.modilo-workspace .m-editor-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; grid-column:1/-1; }
body.modilo-workspace .m-editor-actions .m-button { min-height:34px; padding:6px 10px; white-space:nowrap; }
body.modilo-workspace #workflowEditorStatus:not(:empty) { flex-basis:100%; color:var(--m-danger); background:var(--m-danger-bg); padding:6px; font-size:12px; }
body.modilo-workspace .m-editor-clipart { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; inset:0; box-sizing:border-box; padding:0; border:1px solid var(--m-border); border-radius:0; background:var(--m-surface); }
body.modilo-workspace .m-editor-clipart[open] { display:flex; flex-direction:column; }
.m-editor-clipart::backdrop { background:#17112b80; }
.m-editor-switch-tabs { display:flex; align-items:center; gap:16px; padding:10px 16px; border-bottom:1px solid var(--m-border); }
.m-editor-clipart iframe { width:100%; flex:1; min-height:0; border:0; }
@media (max-width:1100px) {
  .m-page { padding:28px 24px 40px; }
  .m-file-detail-layout { grid-template-columns:minmax(0,1fr); }
  .m-file-detail { position:static; }
  .m-settings-section { grid-template-columns:190px 1fr; gap:24px; }
}
@media (max-width:760px) {
  .m-page { padding:24px 16px 32px; }
  .m-page h1 { font-size:24px; }
  .m-overview-intro, .m-overview-bottom, .m-settings-section { grid-template-columns:1fr; gap:24px; }
  .m-overview-intro { padding:24px; }
  .m-journey { border-left:0; border-top:1px solid var(--m-border); padding:24px 0 0; grid-template-columns:1fr 1fr; }
  .m-settings-section>div:first-child { padding:0; }
  .m-workflow-panel { padding:24px; }
  .m-choice-card { flex-direction:column; }
  .m-workflow-footer>.m-subdued { display:none; }
  .m-draft-row { grid-template-columns:1fr auto; gap:12px; }
  .m-draft-row>.m-badge { grid-column:1; grid-row:2; justify-self:start; }
  .m-draft-row>.m-button { grid-column:2; grid-row:1 / 3; }
  .m-tools-grid { grid-template-columns:1fr 1fr; }
  .m-tools summary span { display:block; margin:6px 0 0; }
  .m-toolbar { padding:16px; flex-wrap:wrap; }
  .m-publication-options { flex-direction:column; }
  body.modilo-ui .m-workflow-preview-grid { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .m-order-stats { grid-template-columns:1fr 1fr; }
  .m-choice-grid { grid-template-columns:1fr; }
  body.modilo-ui .m-choice-card { min-height:140px; }
  .m-design-entry { padding:20px; align-items:flex-start; flex-direction:column; }
  body.modilo-ui .m-workflow-steps { padding:24px 12px; }
  .m-step { font-size:11px; }
  .m-journey { grid-template-columns:1fr; }
  .m-page-footer { flex-direction:column; align-items:flex-start; }
}

.m-provider-logo { display:flex; align-items:center; min-height:44px; font-size:26px; font-weight:750; color:var(--m-primary); }
.m-provider-logo img { max-width:160px; height:44px; object-fit:contain; }
#workflow-preview-open, #workflow-preview-status { margin:12px 20px; }
#workflow-pdf-empty { min-height:160px; padding:24px; }
@media(max-width:650px) { body.modilo-ui.m-workflow-embedded-preview .content { grid-template-columns:1fr; } }

.m-picker-design { display:flex; flex-direction:column; gap:12px; padding:12px; border:1px solid var(--m-border); border-radius:0; background:white; color:var(--m-text); cursor:pointer; text-align:left; min-width:0; }
.m-picker-design:hover, .m-product-option[aria-pressed=true] { border-color:var(--m-primary); background:var(--m-surface-selected); }
.m-picker-design[aria-pressed=true] { border-color:var(--m-primary); background:var(--m-surface-selected); box-shadow:inset 3px 0 var(--m-primary); }
.m-pairing .m-choice-grid { align-items:stretch; }
.m-pairing .m-choice-grid>.m-card { display:flex; flex-direction:column; gap:16px; min-width:0; }
.m-pairing .m-toolbar { padding:0; border:0; flex-wrap:wrap; gap:8px; }
.m-pairing .m-toolbar input { flex:1 1 150px; min-width:0; width:100%; padding:10px 12px; border:1px solid var(--m-border-strong); border-radius:0; background:var(--m-surface); color:var(--m-text); }
.m-pairing .m-toolbar .m-button { flex:none; }
.m-pairing #pair-designs { display:grid; gap:12px; min-width:0; }
.m-pairing .m-pair-options, .m-pairing .m-files-grid { display:flex; flex-direction:column; gap:6px; max-height:330px; overflow:auto; padding:4px; }
.m-pairing :is(.m-product-option,.m-picker-design) { flex:none; min-height:48px; padding:12px; border:1px solid var(--m-border); border-radius:0; overflow-wrap:anywhere; }
.m-pairing .m-product-option { justify-content:space-between; gap:12px; }
.m-pairing .m-product-option small { flex:none; color:var(--m-muted); }
.m-pairing .m-product-option[aria-pressed=true] { border-color:var(--m-primary); box-shadow:inset 3px 0 var(--m-primary); }
.m-pairing .m-pair-confirmation { gap:12px; }
.m-pairing .m-pair-confirmation p { margin:0; overflow-wrap:anywhere; }
.m-pairing .m-pair-confirmation .m-actions { justify-content:flex-end; }
.m-picker-design img, .m-picker-design .m-file-placeholder { width:100%; height:110px; object-fit:contain; }
#pair-designs .m-files-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
body.modilo-ui #pdf-design-picker { gap:16px; margin-top:0; }
body.modilo-ui.m-pdf-generator { width:auto; }
body.modilo-ui.m-pdf-generator .content { grid-template-columns:repeat(2,minmax(0,1fr)); }
body.modilo-ui.m-pdf-generator :is(.preview-section,.form-section,.template-selector) { min-width:0; }
@media(max-width:1100px) { body.modilo-ui.m-pdf-generator:not(.m-workflow-embedded-preview) .content { grid-template-columns:minmax(0,1fr); } }
body.modilo-ui #pdf-design-picker .m-design-types { display:flex; gap:4px; padding:4px; border:1px solid var(--m-border); background:var(--m-surface-hover); border-radius:0; }
body.modilo-ui #pdf-design-picker .m-design-type { flex:1; padding:10px 16px; min-height:40px; border:0; background:transparent; color:var(--m-muted); font-weight:600; cursor:pointer; }
body.modilo-ui #pdf-design-picker .m-design-type[aria-pressed=true] { color:var(--m-primary-hover); background:var(--m-surface-selected); box-shadow:0 1px 3px #00000012; }
body.modilo-ui #pdf-design-picker .m-toolbar { display:flex; flex-wrap:wrap; padding:0; border:0; gap:8px; }
body.modilo-ui #pdf-design-picker input[type=search] { flex:1 1 180px; width:100%; min-width:0; min-height:42px; padding:10px 12px; border:1px solid var(--m-border-strong); border-radius:0; background:var(--m-surface); color:var(--m-text); font:inherit; }
body.modilo-ui #pdf-design-picker .m-toolbar .m-button { min-height:42px; padding:10px 18px; }
body.modilo-ui #pdf-design-picker .m-files-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:max-content; gap:8px; max-height:350px; overflow:auto; padding:3px; align-content:start; }
body.modilo-ui #pdf-design-picker .m-picker-design { min-height:94px; justify-content:flex-start; padding:14px; overflow-wrap:anywhere; font:inherit; }
body.modilo-ui #pdf-design-picker .m-subdued { font-size:13px; margin:0; }
@media(max-width:500px) { body.modilo-ui #pdf-design-picker .m-files-grid { grid-template-columns:1fr; } }

.m-order-line { border-top:1px solid var(--m-border); padding-top:20px; }

body.modilo-ui.m-workflow-embedded-preview .preview-box { min-height:0; height:auto; max-height:480px; }
body.modilo-ui.m-workflow-embedded-preview #previewCanvas { max-height:460px; object-fit:contain; }
body.modilo-ui.m-workflow-embedded-preview .form-section { max-height:none; overflow:visible; }
body.modilo-ui.m-workflow-embedded-preview .page-content { padding:8px; }

.m-pdf-toggle { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--m-text-subdued); }
#workflow-image-settings { padding:12px 16px; }
#workflow-image-settings summary { cursor:pointer; font-size:14px; }

.m-product-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.m-table th.m-product-actions-heading { text-align:right; }
.m-product-admin-link { display:flex; align-items:center; gap:10px; white-space:nowrap; text-decoration:none; }
.m-platform-logo { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:32px; height:26px; }
.m-platform-logo-shopify { color:#659d32; font-size:24px; }
.m-platform-logo-woo { background:#873eff; border-radius:0; padding:4px; }
.m-platform-logo-woo img { width:100%; height:auto; }
.m-product-menu { position:relative; }
.m-product-menu summary { cursor:pointer; list-style:none; }
.m-product-menu[open] a { position:absolute; right:0; top:100%; z-index:5; min-width:180px; background:var(--m-surface); padding:12px; border:1px solid var(--m-border); border-radius:0; box-shadow:0 8px 24px #0002; }
.m-pairing .m-pair-options { min-height:330px; }
.m-product-thumb .m-selection-preview { width:48px; height:48px; }

.m-option-card { padding:16px 20px; border:1px solid var(--m-border); border-radius:0; background:var(--m-surface); }
.m-option-card summary { cursor:pointer; font-weight:600; }
.m-option-card .m-toolbar { padding:12px 0; flex-wrap:wrap; }
.m-upload-zone { display:grid; justify-items:center; gap:16px; padding:28px; border:2px dashed var(--m-border); border-radius:0; background:var(--m-bg); }
.m-upload-zone input { max-width:100%; }

.m-product-photo-preview .m-selection-preview { width:160px; height:140px; }
.m-file-preview>.m-selection-preview { width:100%; height:100%; border-radius:0; }

.m-catalog-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; max-height:280px; overflow:auto; }

.m-option-card summary { display:flex; align-items:center; gap:10px; }
.m-option-card summary .m-subdued { font-size:12px; font-weight:400; margin-left:auto; }
.m-image-choice { display:grid; grid-template-columns:160px minmax(0,1fr); gap:24px; padding-top:20px; }
.m-image-choice p { margin:0 0 14px; }
.m-upload-label { display:grid; gap:10px; font-weight:600; }
.m-upload-label input { max-width:100%; font:inherit; font-weight:400; }
/* Native file inputs render their button and "no file" text in the browser locale.
   Keep the input accessible but hidden, and present the label as an English button. */
.m-upload-label, .m-upload-zone { position:relative; cursor:pointer; }
.m-upload-label input[type="file"], .m-upload-zone input[type="file"] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.m-upload-label { place-items:center; min-height:38px; padding:8px 14px; border:1.5px solid var(--m-text); background:var(--m-surface); color:var(--m-text); text-align:center; }
.m-upload-label:hover, .m-upload-zone:hover .m-upload-choose { background:var(--m-bg); }
.m-upload-label:has(input:focus-visible), .m-upload-zone:has(input:focus-visible) { outline:2px solid var(--m-focus); outline-offset:3px; }
.m-upload-choose { display:inline-flex; align-items:center; min-height:38px; padding:8px 14px; border:1.5px solid var(--m-text); background:var(--m-surface); color:var(--m-text); font-weight:600; }
.modilo-ui input[type=file]::file-selector-button { color:var(--m-primary); background:#f1eaff; border:1px solid #d4c5ff; border-radius:0; padding:9px 14px; margin-right:12px; cursor:pointer; }
@media(max-width:600px) { .m-image-choice { grid-template-columns:1fr; } .m-option-card summary .m-subdued { display:none; } }

#workflow-catalog-search { align-items:flex-end; }
#workflow-catalog-search .m-search { flex:1; }
#workflow-catalog-detail { min-width:0; padding:24px; }
#workflow-catalog-detail .m-field { min-width:0; }
#workflow-catalog-detail :is(input,select) { max-width:100%; }
#workflow-catalog-back { justify-self:start; width:auto; }
#workflow-catalog-create { justify-self:end; width:auto; }
#workflow-catalog-variants { grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); border:1px solid var(--m-border); border-radius:0; padding:8px; }
#workflow-catalog-variants .m-product-option { border:1px solid var(--m-border); border-radius:0; padding:12px; gap:10px; min-width:0; }
#workflow-catalog-variants input, .m-catalog-placement input { flex:none; width:18px; height:18px; accent-color:var(--m-primary); }
#workflow-catalog-variants span { min-width:0; overflow-wrap:anywhere; }
.m-catalog-placements { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:10px; }
.m-catalog-placement { display:flex; align-items:center; gap:10px; padding:14px; border:1px solid var(--m-border); border-radius:0; cursor:pointer; text-transform:capitalize; }
.m-catalog-placement:has(input:checked), #workflow-catalog-variants label:has(input:checked) { border-color:var(--m-primary); background:var(--m-surface-selected); }
#workflow-catalog-items .m-file-body { flex:1; display:flex; flex-direction:column; }
#workflow-catalog-items .m-file-body button { margin-top:auto; }

.m-catalog-placement span { min-width:0; overflow-wrap:anywhere; line-height:1.4; }

.m-print-waiting { display:flex; align-items:center; gap:12px; padding:16px; border-radius:0; background:var(--m-primary-soft, #f1edff); color:var(--m-text); }
.m-print-waiting p { margin:0; font-size:13px; }
.m-wait-spinner { flex:0 0 20px; height:20px; border:2px solid #ded5fb; border-top-color:#6842df; border-radius:50%; animation:m-wait-spin 1.2s linear infinite; }
@keyframes m-wait-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .m-wait-spinner { animation:none; } }

/* Template library reuses the shared picker with full preview cards. */
#template-library{display:grid;gap:16px;margin-top:20px}
#template-library .m-toolbar{padding:0 0 16px;gap:12px;flex-wrap:wrap}
#template-library .m-toolbar input{flex:1;min-width:160px;padding:11px 14px;border:1px solid var(--m-border-strong);border-radius:0;font:inherit;color:var(--m-text);background:var(--m-surface)}
#template-library .m-selection-preview{width:100%;height:180px;flex:auto;border-radius:0;background:var(--m-bg)}
#template-library .m-selection-preview img{width:100%;height:100%;object-fit:contain}
#template-library .m-picker-design{font:inherit;padding:16px;gap:12px}
#template-library .m-picker-action{font-size:13px;color:var(--m-primary);font-weight:600}
/* Compact merchant controls, September 2026. */
.m-order-tabs-bar{display:flex;align-items:center;border-bottom:1px solid var(--m-border);padding-right:16px;gap:8px}
.m-order-tabs-bar>.m-tabs{flex:1;min-width:0;border-bottom:0;overflow:auto}
.m-tabs-menu{position:relative;flex:none}
.m-tabs-menu>summary{list-style:none;cursor:pointer;font-size:24px;line-height:32px;width:36px;text-align:center;border-radius:0;color:var(--m-muted)}
.m-tabs-menu>summary::-webkit-details-marker{display:none}
.m-tabs-menu>summary:hover,.m-tabs-menu[open]>summary{background:var(--m-surface-subdued,#f5f5f7);color:var(--m-text)}
.m-tabs-popover{position:absolute;right:0;top:calc(100% + 8px);z-index:50;background:white;border:1px solid var(--m-border);border-radius:0;box-shadow:0 8px 28px #16122318;width:280px;padding:16px}
.m-tabs-popover>p{font-size:12px;margin:4px 0 12px}
.m-tab-option{display:flex;align-items:center;gap:4px;padding:6px 0}
.m-tab-toggle{display:flex;align-items:center;gap:10px;flex:1;font-size:13px;cursor:pointer}
.m-tab-toggle input{width:16px;height:16px;accent-color:var(--m-primary)}
.m-tab-move{border:0;border-radius:0;background:transparent;color:var(--m-muted);height:28px;width:28px;cursor:pointer;font-size:16px}
.m-tab-move:hover{background:#f2eefb;color:var(--m-primary)}
.m-tab-move:disabled{opacity:.25;cursor:default}
body.modilo-ui .m-button-quiet{background:transparent;border-color:transparent;box-shadow:none;color:var(--m-muted)}
body.modilo-ui .m-button-quiet:hover{background:#f4f1fa;color:var(--m-primary)}
.m-product-filter-bar{gap:8px;padding-top:0!important}
.m-product-filter-bar .m-field{flex:0 1 220px;min-width:140px}
.m-product-filter-bar select{font-size:13px;border-radius:0}
#products-filter-status{font-size:12px}
.m-pair-selection{display:flex;align-items:center;gap:24px;justify-content:space-between}
#pair-summary,.m-pair-queue-content{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:16px;align-items:center;flex:1;min-width:0}
.m-pair-mini{display:flex;align-items:center;gap:12px;min-width:0}
.m-pair-mini>span:last-child{display:flex;flex-direction:column;min-width:0;gap:3px}
.m-pair-mini strong{font-size:14px;overflow-wrap:anywhere}
.m-pair-mini small{font-size:11px;color:var(--m-muted)}
.m-pair-mini .m-selection-preview{height:44px;width:44px;flex:none;border-radius:0;overflow:hidden;background:#f7f6fa}
.m-pair-mini .m-selection-preview img{width:100%;height:100%;object-fit:contain}
.m-pair-queue-row{display:flex;align-items:center;gap:20px;padding:16px 24px;border-top:1px solid var(--m-border)}
.m-pair-queue-content .m-banner-error{grid-column:1/-1;margin:0}
.m-pair-queue .m-section-heading h2{display:flex;align-items:center;gap:8px}
.m-pair-queue .m-section-heading p{margin:4px 0 0;font-size:12px}
.m-pair-confirmation #pair-feedback:empty{display:none}
.m-pair-confirmation #pair-feedback:not(:empty){margin:12px 0 0;font-size:13px;color:var(--m-muted)}
@media(max-width:650px){.m-pair-selection{flex-direction:column;align-items:stretch}#pair-summary,.m-pair-queue-content{gap:8px;grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr)}.m-pair-mini{align-items:flex-start;flex-direction:column}.m-pair-queue-row{padding:16px;gap:8px}.m-product-filter-bar .m-field{flex:1 1 140px}.m-pair-queue .m-section-heading{align-items:flex-start;gap:12px;flex-direction:column}}

/* Merchant Settings tools share the pairing page heading and content width. */
body.modilo-ui .m-settings-page { box-sizing:border-box; max-width:1280px; margin:0 auto; padding:32px 40px 48px; }
.m-settings-heading { margin-bottom:24px; font:14px/1.5 var(--m-font); }
.m-settings-heading .m-breadcrumb { margin-bottom:38px; }
.m-settings-heading h1 { font:650 28px/1.3 var(--m-font); letter-spacing:normal; margin:0 0 8px; }
.m-settings-heading p { margin:0; }
.m-settings-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
body.modilo-ui.m-workflow-embedded-preview .m-settings-heading { display:none; }
@media(max-width:768px) { body.modilo-ui .m-settings-page { padding:16px; } .m-settings-heading .m-breadcrumb { margin-bottom:24px; } }

/* Shared save actions in Settings; labels and busy state remain module-owned. */
.modilo-ui button.m-settings-save {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 140px; min-height: 46px; padding: 11px 22px;
  font: 600 14px/1.4 var(--m-font); letter-spacing: normal; text-transform: none;
  border: 1px solid var(--m-primary); border-radius: 0;
  background: var(--m-primary); color: var(--m-on-primary); cursor: pointer;
}
.modilo-ui button.m-settings-save:hover { background: var(--m-primary-hover); border-color: var(--m-primary-hover); }
.modilo-ui button.m-settings-save::before {
  content: ""; width: 20px; height: 20px; flex: 0 0 20px; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12l4 4v12a2 2 0 0 1-2 2Z M17 21v-8H7v8 M7 3v5h8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.modilo-ui button.m-settings-save > :is(.fa-save, .fa-floppy-disk) { display: none; }
.modilo-ui button.m-settings-save:has(.fa-spinner)::before { display: none; }
.modilo-ui button.m-settings-save > .fa-spinner { font-size: 20px !important; }