/* Approved settings components for customer AND admin pages.
   Loaded by layout; use ml-settings for new settings screens, not legacy globals. */
body .ml-settings{font-family:var(--ml-font-family);font-size:var(--ml-font-size-body);line-height:var(--ml-line-height-body);color:var(--ml-color-text);min-width:0}
body .ml-settings-stack{display:grid;gap:10px;min-width:0}
body #notifications.ml-settings{margin-top:10px}
body .ml-settings .ml-settings-card{box-sizing:border-box;min-width:0;margin:0!important;padding:12px!important;border:1px solid var(--ml-color-border)!important;border-radius:var(--ml-radius-card)!important;background:var(--ml-color-surface)!important;color:var(--ml-color-text);box-shadow:none!important}
body .ml-settings .ml-settings-card :is(h2,h3){color:var(--ml-color-ink)!important;font-family:inherit;margin:0 0 6px!important;line-height:1.2;font-size:var(--ml-font-size-panel-heading)!important;letter-spacing:-.025em}
body .ml-settings .ml-settings-card h3{font-size:var(--ml-font-size-subheading)!important}
body .ml-settings p{margin:6px 0!important;color:var(--ml-color-muted);font-size:11px;line-height:1.4}
/* Fully replace the legacy illustrated banner, not only its text colors. */
body .app-shell .ml-settings .page-head{box-sizing:border-box!important;position:relative!important;display:flex!important;justify-content:space-between;align-items:center!important;gap:10px!important;flex-wrap:wrap;width:100%!important;min-width:0!important;min-height:64px!important;height:auto!important;margin:0!important;padding:8px 2px!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;overflow:visible!important;color:var(--ml-color-header-text)!important}
body .app-shell .ml-settings .page-head::before,body .app-shell .ml-settings .page-head::after{content:none!important;display:none!important;background:none!important;box-shadow:none!important}
body .ml-settings .page-head>div{min-width:0}
body .ml-settings .page-head>.btn{min-width:138px!important}
@media(max-width:650px){body .app-shell .ml-settings .page-head{align-items:flex-start!important}body .ml-settings .page-head>.btn{width:100%!important}}
body .ml-settings .page-head h1{color:var(--ml-color-header-text)!important;font-size:var(--ml-font-size-page-heading,22px)!important;max-width:none!important;margin:0!important;line-height:1.2!important;opacity:1!important}
body .ml-settings .page-head p{color:var(--ml-color-header-muted)!important}
body .ml-settings form{display:grid;gap:8px;justify-items:start;margin:10px 0 0!important;padding:0;border:0;background:transparent;box-shadow:none}
body .ml-settings form>input[type=hidden]{display:none!important}
body .ml-settings label{display:grid!important;gap:4px!important;align-items:start!important;width:100%;min-width:0;margin:0!important;padding:0!important;color:var(--ml-color-ink)!important;font:600 11px/1.4 var(--ml-font-family)!important;text-align:left}
body .ml-settings label:has(>input:is([type=checkbox],[type=radio])){display:flex!important;gap:8px!important;align-items:flex-start!important;cursor:pointer}
body .ml-settings input:is([type=checkbox],[type=radio]){appearance:auto!important;-webkit-appearance:auto!important;position:static!important;display:inline-block!important;flex:0 0 16px!important;width:16px!important;max-width:16px!important;height:16px!important;min-height:16px!important;margin:0!important;padding:0!important;accent-color:var(--ml-color-action)!important;box-shadow:none!important;opacity:1!important}
body .ml-settings :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){box-sizing:border-box!important;width:100%!important;min-width:0!important;min-height:28px!important;margin:0!important;padding:5px 7px!important;border:1px solid var(--ml-color-border-strong)!important;border-radius:3px!important;background:#fff!important;color:var(--ml-color-ink)!important;font:400 11px/1.4 var(--ml-font-family)!important;box-shadow:none!important}
body .ml-settings textarea{min-height:180px!important;resize:vertical}
body .ml-settings :is(button,.btn){box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;max-width:100%;min-height:28px!important;margin:0!important;padding:5px 9px!important;border:1px solid var(--ml-color-action)!important;border-radius:3px!important;background:var(--ml-color-action)!important;color:#fff!important;font:750 9px/1.2 var(--ml-font-family)!important;letter-spacing:normal!important;text-transform:none!important;text-decoration:none!important;box-shadow:none!important;white-space:normal;cursor:pointer}
body .ml-settings :is(button,.btn):hover{background:var(--ml-color-action-dark)!important;border-color:var(--ml-color-action-dark)!important}
body .ml-settings :is(.btn-secondary,button.secondary){background:#fff!important;color:var(--ml-color-action-dark)!important}
body .ml-settings :is(.btn-secondary,button.secondary):hover{background:var(--ml-color-action-soft)!important}
body .ml-settings button:disabled{opacity:.5;cursor:not-allowed}
body .ml-settings :is(button,a,summary,input):focus-visible{outline:2px solid var(--ml-color-action)!important;outline-offset:2px!important}
body .ml-settings :is(.ml-settings-actions,.ml-settings-history-row){display:flex;align-items:center;flex-wrap:wrap;gap:8px}
body .ml-settings .ml-settings-history-row{justify-content:space-between;padding:8px 0;border-top:1px solid var(--ml-color-border-soft)}
body .ml-settings .ml-settings-history-row form{margin:0!important}
body .ml-settings .ml-settings-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
body .ml-settings .ml-settings-columns>div{min-width:0}
body .ml-settings pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ml-color-surface-soft);padding:12px;border:1px solid var(--ml-color-border-soft);color:var(--ml-color-ink);font:400 12px/1.5 var(--ml-font-family)}
body .ml-settings details{width:100%;margin-top:8px}
body .ml-settings summary{color:var(--ml-color-action-dark);font-weight:750;cursor:pointer}
body .ml-settings :is(.ml-settings-table,details:has(table)){overflow-x:auto}
body .ml-settings table{width:100%;font-size:11px;color:var(--ml-color-ink)}
body .ml-settings :is(th,td){padding:8px;text-align:left}
body .ml-settings :is(.ok,.error){padding:10px!important;border-radius:3px;background:var(--ml-color-success-soft);color:var(--ml-color-action-dark);border:1px solid var(--ml-color-border)}
body .ml-settings .error{background:var(--ml-color-danger-soft);color:var(--ml-color-danger);border-color:var(--ml-color-danger)}
@media(max-width:760px){body .ml-settings .ml-settings-columns{grid-template-columns:minmax(0,1fr)}body .ml-settings :is(button,.btn){min-height:44px!important;font-size:11px!important}body .ml-settings :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select){min-height:44px!important}}

/* Supporting values are not page titles. Reuse this role instead of inline sizes. */
body .ml-settings .ml-panel-value{font-size:var(--ml-font-size-panel-value);line-height:var(--ml-line-height-heading);color:var(--ml-color-ink)}

/* Prepared artwork comparison: inherit compact settings typography; never filter artwork. */
.ml-settings .ml-artwork-comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.ml-settings .ml-artwork-comparison-grid figure{min-width:0;margin:0}
.ml-settings .ml-artwork-comparison-grid figcaption{font-weight:700;margin-bottom:6px}
.ml-settings .ml-artwork-comparison-grid img{display:block;width:100%;height:auto;filter:none;background:#fff}
@media(max-width:640px){.ml-settings .ml-artwork-comparison-grid{grid-template-columns:1fr}}