.commerce-dialog { width:min(920px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; margin:auto; padding:28px; border:1px solid #dfe5d9; border-radius:20px; background:#fafbf8; color:#20271c; font:14px/1.55 Inter,system-ui,sans-serif; box-shadow:0 24px 90px #0004; }
.commerce-dialog::backdrop { background:#15201180; backdrop-filter:blur(3px); }
body.commerce-modal-open { overflow:hidden; }
.commerce-dialog h2,.commerce-dialog h3 { margin:0; font-weight:650; }
.commerce-dialog h2 { font-size:24px; letter-spacing:-.6px; }
.commerce-dialog h3 { font-size:17px; }
.commerce-heading,.commerce-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.commerce-heading { justify-content:space-between; margin-bottom:14px; }
.commerce-actions { margin-top:14px; }
.commerce-button { appearance:none; font:inherit; border:1px solid #d5ddcd; border-radius:9px; padding:9px 13px; background:#fff; color:inherit; cursor:pointer; min-height:42px; }
.commerce-button:hover { background:#edf2e7; }
.commerce-button:focus-visible,.commerce-field input:focus-visible { outline:3px solid #668745; outline-offset:3px; }
.commerce-primary { background:#304c23; color:#fff; border-color:#304c23; }
.commerce-primary:hover { background:#253c1b; }
.commerce-button:disabled { opacity:.5; cursor:wait; }
.commerce-muted { color:#626c5a; }
.commerce-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px; }
.commerce-card,.commerce-form { padding:20px; border:1px solid #dde4d5; background:#fff; border-radius:14px; overflow-wrap:anywhere; }
.commerce-form { margin-top:18px; }
.commerce-card p { margin:10px 0; }
.commerce-badge { display:inline-block; margin-top:8px; border-radius:6px; padding:3px 8px; background:#eef2e8; color:#435d32; font-size:12px; }
.commerce-field { display:flex; flex-direction:column; gap:6px; margin:14px 0; }
.commerce-field input { min-width:0; width:100%; box-sizing:border-box; font:inherit; padding:11px 12px; color:inherit; border:1px solid #cbd6c0; border-radius:8px; background:transparent; }
.commerce-error,.commerce-dialog .is-error { color:#a32f24; }
.commerce-integration-entry { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:20px; padding:20px; border:1px solid var(--border,#dde4d5); border-radius:14px; background:var(--bg-card,#fff); color:var(--text,#20271c); }
.commerce-integration-entry h2 { margin:0; color:inherit; font-size:18px; font-weight:650; }
.commerce-integration-entry p { margin:6px 0 0; font-size:13px; }
[data-theme="dark"] .commerce-dialog { background:#1c2218; color:#eef3e8; border-color:#3d4735; }
[data-theme="dark"] .commerce-card,[data-theme="dark"] .commerce-form,[data-theme="dark"] .commerce-button { background:#252d20; color:#eef3e8; border-color:#46513d; }
[data-theme="dark"] .commerce-muted { color:#b2bfaa; }
[data-theme="dark"] .commerce-field input { border-color:#59684f; }
[data-theme="dark"] .commerce-error,[data-theme="dark"] .commerce-dialog .is-error { color:#ffb1a7; }
@media(max-width:640px) { .commerce-dialog { padding:18px; width:calc(100vw - 16px); max-height:calc(100dvh - 16px); box-sizing:border-box; } .commerce-grid { grid-template-columns:1fr; } .commerce-actions .commerce-button { flex:1 1 auto; } }

/* Follow the shared palette across all seven CRM themes. */
:root[data-theme] .commerce-dialog { background:var(--bg); color:var(--text); border-color:var(--border); }
:root[data-theme] :is(.commerce-card,.commerce-form,.commerce-button) { background:var(--bg-card); color:var(--text); border-color:var(--border); }
:root[data-theme] .commerce-button:hover { background:var(--bg-elevated); }
:root[data-theme] .commerce-muted { color:var(--text-muted); }
:root[data-theme] .commerce-badge { background:var(--primary-soft); color:var(--text); }
:root[data-theme] .commerce-field input { border-color:var(--border); background:var(--bg-card); color:var(--text); }
:root[data-theme] .commerce-primary { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
:root[data-theme] .commerce-primary:hover { background:var(--primary); filter:brightness(.95); }
:root[data-theme] :is(.commerce-error,.commerce-dialog .is-error) { color:var(--danger); }
.commerce-auto-option { display:flex; gap:10px; align-items:flex-start; margin:16px 0; cursor:pointer; }
.commerce-auto-option input { width:18px; height:18px; flex:0 0 auto; accent-color:var(--primary,#304c23); margin-top:2px; }
.commerce-dialog { width:min(1120px,calc(100vw - 32px)); box-sizing:border-box; }
.commerce-catalog { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; }
.commerce-catalog > button { grid-column:1 / -1; justify-self:start; }
.commerce-provider { display:flex; flex-direction:column; align-items:stretch; gap:9px; padding:14px; border:1px solid var(--border,#dde4d5); border-radius:12px; min-width:0; }
.commerce-provider small { color:var(--text-muted,#626c5a); line-height:1.45; }
.commerce-provider .commerce-button:first-child { font-weight:650; }
.commerce-catalog [aria-pressed="true"] { outline:2px solid var(--primary,#304c23); outline-offset:-2px; background:var(--primary-soft,#eef2e8); }
.commerce-toolbar { display:flex; align-items:center; gap:10px; margin:20px 0; }
.commerce-toolbar input { flex:1; width:100%; min-width:0; font:inherit; padding:11px 12px; border:1px solid var(--border,#cbd6c0); border-radius:9px; background:var(--bg-card,#fff); color:var(--text,#20271c); }
.commerce-field select { font:inherit; padding:11px 12px; border:1px solid var(--border,#cbd6c0); border-radius:8px; background:var(--bg-card,#fff); color:var(--text,#20271c); width:100%; min-width:0; }
.commerce-field select:focus-visible,.commerce-toolbar input:focus-visible { outline:3px solid var(--primary,#668745); outline-offset:3px; }
.commerce-provider-group { margin:24px 0; }
.commerce-provider-group > h3 { padding-bottom:8px; border-bottom:1px solid var(--border,#dde4d5); }
.commerce-provider-group .commerce-grid { margin-top:12px; }
.commerce-card h3 { word-break:break-word; }
.commerce-operation { border-left:3px solid var(--primary,#304c23); padding-left:10px; }
.commerce-pagination { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:20px 0; }
.commerce-pagination span { margin-right:auto; }
.commerce-directory { border-top:1px solid var(--border,#dde4d5); margin-top:24px; padding-top:16px; }
.commerce-directory summary { cursor:pointer; font-weight:650; }
.commerce-remove-confirm { margin-top:16px; padding:14px; border:1px solid var(--danger,#a32f24); border-radius:10px; }
.commerce-remove-confirm .commerce-button { margin-right:8px; margin-top:8px; }
.commerce-dialog .commerce-danger { border-color:var(--danger,#a32f24); color:var(--danger,#a32f24); }
@media(max-width:760px) { .commerce-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .commerce-catalog { grid-template-columns:minmax(0,1fr); } .commerce-provider { padding:12px; } .commerce-toolbar { align-items:stretch; flex-direction:column; } .commerce-pagination span { flex-basis:100%; } }