/* One token system for navigation, data, native forms and dialogs. */
.product-editor-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; border-bottom:1px solid var(--line); }
.product-editor-tabs a { display:flex; align-items:center; min-height:44px; padding:10px 16px; color:var(--muted); border-bottom:2px solid transparent; }
.product-editor-tabs a[aria-current] { color:var(--brand); border-color:var(--brand); font-weight:600; }
.calculator-layout { display:grid; grid-template-columns:minmax(240px,1fr) minmax(0,2fr); gap:20px; align-items:start; }
.calculator-layout .panel { min-width:0; margin-bottom:0; }
.calculator-guide ol { margin:20px; padding-left:20px; }
.calculator-guide li { margin-bottom:16px; overflow-wrap:anywhere; }
.calculator-guide p { margin:16px 20px; }
.calculator-offer { padding:16px; border-bottom:1px solid var(--line); }
.calculator-offer label { display:block; margin-bottom:8px; font-weight:600; }
.calculator-offer > div { display:flex; gap:8px; }
.calculator-offer select { width:100%; min-width:0; min-height:44px; }
.btn[data-copy-source], .calculator-offer .btn { min-height:44px; }
.calculator-error { margin:20px; color:var(--muted); overflow-wrap:anywhere; }
textarea.calculator-code { display:block; width:calc(100% - 32px); max-width:calc(100% - 32px); min-height:460px; margin:16px; padding:16px; font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; background:var(--subtle); color:var(--text); border:1px solid var(--line); border-radius:var(--radius); resize:vertical; }
@media(max-width:1024px) { .calculator-layout { grid-template-columns:minmax(0,1fr); gap:16px; } }
@media(max-width:760px) { textarea.calculator-code { font-size:16px; } .calculator-layout .panel-heading { padding:12px 16px; border-bottom:1px solid var(--line); } }
@media(max-width:480px) { .calculator-copy-label { display:none; } .btn[data-copy-source] { min-width:44px; } .product-editor-tabs { gap:0; } .product-editor-tabs a { padding:10px 8px; font-size:13px; } textarea.calculator-code { padding:12px; min-height:520px; } }
:root, [data-theme="graphite-light"] {
  color-scheme:light; --bg:#f5f6fa; --surface:#fff; --subtle:#f8f9fc; --hover:#f0f3fa;
  --text:#202939; --muted:#606c80; --faint:#758196; --line:#e5e9f1; --brand:#4d5ee6;
  --brand-hover:#3d4cc9; --brand-soft:#eef0ff; --on-brand:#fff;
  --success:#16764c; --success-bg:#eaf7f0; --danger:#b53d45; --danger-bg:#fff0f1;
  --warning:#9a650c; --warning-bg:#fff6e4; --info:#6551bd; --info-bg:#f1edff;
  --radius:8px; --shadow:0 1px 3px #172b4d05; --sidebar:192px;
  --body-bg:var(--bg); --body-fg:var(--text); --body-quiet-color:var(--muted);
  --body-loud-color:var(--text); --header-bg:var(--surface); --header-color:var(--text);
  --header-link-color:var(--text); --darkened-bg:var(--subtle); --selected-bg:var(--hover);
  --hairline-color:var(--line); --border-color:var(--line); --link-fg:var(--brand);
  --primary:var(--brand); --secondary:var(--brand); --button-bg:var(--brand);
  --button-hover-bg:var(--brand-hover); --default-button-bg:var(--brand);
  --default-button-hover-bg:var(--brand-hover); --close-button-bg:var(--muted);
}
[data-theme="soft-light"] { --bg:#f6f7f5; --subtle:#f7f9f7; --text:#28362f; --brand:#287b68; --brand-hover:#216653; --brand-soft:#eaf6f0; --line:#e1e8e2; }
[data-theme="graphite-dark"] {
  color-scheme:dark; --bg:#11151e; --surface:#1a202c; --subtle:#171c26; --hover:#252d3c;
  --text:#e6eaf2; --muted:#a6b1c4; --faint:#95a2b8; --line:#30394a; --brand:#a1adff;
  --brand-hover:#b8c1ff; --brand-soft:#2b3252; --on-brand:#141b35;
  --success:#80d6ab; --success-bg:#1c372d; --danger:#ffabb0; --danger-bg:#40272f;
  --warning:#e5c17d; --warning-bg:#3d3423; --info:#c4b5fd; --info-bg:#322b49;
}
[data-theme="soft-dark"] {
  color-scheme:dark; --bg:#191c1b; --surface:#242a27; --subtle:#202521; --hover:#303a33;
  --text:#e8eee9; --muted:#b0bfb5; --faint:#a1b0a7; --line:#3b4740;
  --brand:#8cd7bf; --brand-hover:#a8e6d2; --brand-soft:#2b443a; --on-brand:#14291f;
  --success:#9cdeb8; --success-bg:#294132; --danger:#f4a9ae; --danger-bg:#453034;
  --warning:#e3c58b; --warning-bg:#413a2b; --info:#c9baf3; --info-bg:#373146;
}
* { box-sizing:border-box; }
html { background:var(--bg); scroll-padding-top:88px; }
body { color:var(--text); background:var(--bg); font:14px/1.5 var(--body-font-family); margin:0; }
[hidden] { display:none!important; }
a { color:var(--brand); text-decoration:none; }
a:hover { color:var(--brand-hover); }
button, input, select, textarea { font:inherit; }
button, a, input[type=submit], summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button, input[type=submit], summary { cursor:pointer; }
:where(a, button, input, textarea, select, summary):focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
button:disabled { opacity:.55; cursor:wait; }
#container { width:100%; min-width:0; background:var(--bg); }
#header { position:sticky; top:0; z-index:30; display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); min-height:64px; padding:0; background:var(--surface); border-bottom:1px solid var(--line); color:var(--text); }
#branding { min-width:0; height:64px; display:flex; align-items:center; padding:0 20px; border-right:1px solid var(--line); }
.relay-brand { display:flex; align-items:center; gap:10px; color:var(--text)!important; font-size:16px; font-weight:700; letter-spacing:-.4px; white-space:nowrap; }
.relay-brand b { color:var(--muted); font-weight:500; }
.relay-mark { display:grid; place-items:center; width:30px; height:30px; color:#fff; background:#f16b45; border-radius:8px; }
.relay-mark svg { width:22px; height:22px; stroke:currentColor; stroke-width:2.3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
#user-tools { padding:8px 24px; margin:0; display:flex; justify-content:flex-end; align-items:center; gap:20px; min-width:0; text-transform:none; font-size:12px; color:var(--muted); }
.account-label, .account-actions { display:flex; align-items:center; gap:8px; }
.account-avatar { display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); width:28px; height:28px; border-radius:50%; font-weight:650; }
#logout-form { display:flex; margin:0; }
#user-tools a, #user-tools button { border:0; color:var(--muted); text-decoration:none; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:40px; min-width:40px; height:40px; padding:8px; color:var(--muted); border:1px solid transparent; border-radius:var(--radius); background:transparent; vertical-align:middle; }
.icon-button:hover { color:var(--brand)!important; background:var(--brand-soft); }
.app-tabs { position:fixed; top:64px; bottom:0; left:0; width:var(--sidebar); padding:20px 12px; display:flex; flex-direction:column; gap:6px; background:var(--surface); border-right:1px solid var(--line); }
.app-tabs a { display:flex; align-items:center; gap:11px; min-height:44px; padding:10px 12px; border-radius:var(--radius); color:var(--muted)!important; font-size:13px; font-weight:550; }
.app-tabs a:hover { background:var(--hover); color:var(--text)!important; }
.app-tabs a.active { background:var(--brand-soft); color:var(--brand)!important; }
.app-tabs a.active::after { content:""; width:5px; height:5px; border-radius:50%; background:var(--brand); margin-left:auto; }
#main { display:block!important; min-width:0; padding:0!important; margin-left:var(--sidebar); }
#content-start { width:100%!important; max-width:none!important; min-width:0; }
#content { padding:24px 28px 40px!important; width:auto!important; max-width:1640px!important; margin:0 auto!important; }
#content-main { float:none; width:100%; min-width:0; }
#content-related, #nav-sidebar, .toggle-nav-sidebar, .breadcrumbs, .theme-toggle { display:none!important; }
h1, h2, h3, p { overflow-wrap:anywhere; }
h1 { color:var(--text); font-size:24px; line-height:1.25; letter-spacing:-.65px; font-weight:650; margin:0 0 20px; }
h2 { color:var(--text); font-size:14px; line-height:1.5; font-weight:650; margin:0; }
h3 { color:var(--text); font-size:13px; font-weight:600; margin:0 0 10px; }
.page-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin:0 0 20px; min-height:52px; }
.page-heading>div { flex:1 1 180px; min-width:0; }
.page-heading>.btn, .page-heading>form { flex-shrink:0; max-width:100%; }
.page-heading h1 { margin:0; }
.page-heading p { margin:5px 0 0; font-size:13px; color:var(--muted); }
.back-link { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; margin-bottom:6px; }
.back-link .icon { width:14px; height:14px; }
.btn, .button, input[type=submit], .submit-row a.closelink { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:8px 13px; border:1px solid var(--line); border-radius:var(--radius)!important; background:var(--surface); color:var(--text); font-size:12px; line-height:1.5; font-weight:600; white-space:nowrap; text-decoration:none; transition:background .15s, border-color .15s; }
.btn:hover, .button:hover, input[type=submit]:hover { background:var(--hover); color:var(--text); border-color:var(--faint); }
.btn.primary, input[type=submit].default, .submit-row input.default { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.btn.primary:hover, input[type=submit].default:hover { background:var(--brand-hover); border-color:var(--brand-hover); color:var(--on-brand); }
.btn.quiet { border-color:transparent; background:transparent; }
.btn .icon { width:16px; height:16px; }
.text-link { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:550; min-height:36px; }
.text-link .icon { width:15px; height:15px; }
.muted { color:var(--muted); }
.mono, code, pre { font-family:var(--font-family-monospace); }
.numeric { text-align:right; font-variant-numeric:tabular-nums; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mobile-label { display:none; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 16px; }
.metric-grid>a { position:relative; display:block; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; color:var(--text); background:var(--surface); box-shadow:var(--shadow); }
.metric-grid>a:hover { border-color:var(--brand); }
.metric-grid span { display:block; font-size:12px; color:var(--muted); }
.metric-grid strong { display:block; margin-top:6px; font-size:28px; line-height:1.1; letter-spacing:-.8px; font-weight:650; font-variant-numeric:tabular-nums; }
.metric-grid .icon { position:absolute; right:18px; bottom:18px; color:var(--faint); }
.metric-grid .metric-caption { position:absolute; bottom:18px; right:16px; font-size:11px; }
.metric-grid .needs-attention strong { color:var(--danger); }
.setup-strip { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; padding:8px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); font-size:12px; }
.setup-strip>div { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.setup-strip strong { font-weight:550; }
.setup-secondary { color:var(--muted); padding-left:10px; border-left:1px solid var(--line); }
.status-dot { display:inline-block; flex:none; width:6px; height:6px; border-radius:50%; background:currentColor; }
.setup-strip .status-dot { background:var(--warning); }
.setup-strip .status-dot.good { background:var(--success); }
.panel, fieldset.module { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin:0 0 16px; min-width:0; overflow:hidden; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); min-height:54px; }
.panel-heading p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.table-scroll { max-width:100%; overflow-x:auto; }
.console-table { border-collapse:collapse; width:100%; table-layout:fixed; background:transparent; }
.console-table th { overflow-wrap:normal; padding:10px 16px; background:var(--subtle); color:var(--muted); font-size:11px; font-weight:550; text-align:left; border-bottom:1px solid var(--line); white-space:normal; }
.console-table th.numeric { text-align:right; }
.console-table td { padding:13px 16px; font-size:12px; line-height:1.5; border-bottom:1px solid var(--line); vertical-align:middle; background:transparent; overflow-wrap:anywhere; }
.console-table tr:last-child td { border-bottom:0; }
.console-table tbody>tr:not(.detail-row):hover { background:var(--subtle); }
.console-table td strong { font-weight:550; }
.console-table td small { display:block; font-size:11px; margin-top:4px; }
.row-title { color:var(--text); font-weight:600; }
a.row-title:hover { color:var(--brand); }
.operations-table th:nth-child(1) { width:122px; }
.operations-table th:nth-child(2) { width:20%; }
.operations-table th:nth-child(3) { width:auto; }
.operations-table th:nth-child(4) { width:164px; }
.operations-table th:nth-child(5) { width:176px; }
.operations-table th:nth-child(6) { width:124px; }
.operations-table:has(.test-operation) th:nth-child(6) { width:166px; }
.test-operation .row-actions .icon-button { width:44px; min-width:44px; height:44px; }
.operation-tools { display:flex; align-items:center; gap:12px; }
.operation-filter-form { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) auto; gap:12px; padding:16px; border-bottom:1px solid var(--line); align-items:start; }
#content .operation-filter-form input:not([type=hidden]), #content .operation-filter-form select { width:100%; min-width:0; min-height:44px; }
.operation-filter-form>div, .filter-extra-grid>div { min-width:0; }
.operation-search .help { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.filter-actions { display:flex; gap:8px; align-items:center; }
.filter-actions .btn, .filter-actions .icon-button { min-height:44px; min-width:44px; }
.operation-extra-filters { grid-column:1 / -1; }
.operation-extra-filters summary { display:flex; align-items:center; gap:8px; min-height:44px; color:var(--muted); font-size:12px; }
.operation-extra-filters summary::after { content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.operation-extra-filters[open]>summary::after { transform:rotate(225deg); }
.filter-extra-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding-top:12px; }
.filter-extra-grid label { display:block; font-size:12px; margin-bottom:6px; color:var(--muted); }
@media(max-width:760px) { .operation-filter-form { padding:0 0 16px; grid-template-columns:minmax(0,1fr) auto; } .operation-search { grid-column:1 / -1; } .filter-extra-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .filter-extra-grid>div:first-child { grid-column:1 / -1; } #content .operation-filter-form input:not([type=hidden]), #content .operation-filter-form select { font-size:16px; } .operation-extra-filters summary { min-height:44px; display:flex; align-items:center; } }
.test-delete-action { color:var(--danger); }
.test-delete-action:hover { color:var(--danger); background:var(--danger-bg); }
.test-delete-dialog .dialog-symbol { color:var(--danger); background:var(--danger-bg); }
.operations-table td { padding:12px; }
.operations-table th { padding-left:12px; padding-right:12px; }
.op-time { font-size:11px!important; font-variant-numeric:tabular-nums; }
.op-time .badge { font-size:11px; }
.data-title, .data-preview { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
.op-client strong, .op-client small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.console-table small.data-preview { display:-webkit-box; }
.op-product .message-value { word-break:break-word; }
.op-amount strong { white-space:normal; overflow-wrap:anywhere; font-size:13px; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; color:var(--muted); background:var(--hover); border-radius:5px; font-size:11px; line-height:1.5; font-weight:500; max-width:100%; overflow-wrap:normal; }
.badge.success { color:var(--success); background:var(--success-bg); }
.badge.danger { color:var(--danger); background:var(--danger-bg); }
.badge.test { color:var(--info); background:var(--info-bg); }
.retry-at { color:var(--warning); }
.row-actions { display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.row-actions .btn { min-height:34px; padding:6px 9px; font-size:11px; }
.row-actions .icon-button { width:34px; min-width:34px; height:34px; }
.row-actions .icon { width:16px; height:16px; }
.detail-row td { padding:0!important; }
.operation-detail { padding:16px; border-top:1px solid var(--line); background:var(--subtle); }
.operation-facts { display:flex; flex-wrap:wrap; gap:16px 28px; margin:0 0 16px; font-size:11px; }
.operation-facts div { min-width:0; }
dt { color:var(--muted); }
dd { margin:4px 0 0; overflow-wrap:anywhere; }
.detail-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.detail-columns section { min-width:0; }
pre, .relay-json { max-width:100%; max-height:320px; white-space:pre-wrap; overflow-wrap:anywhere; overflow:auto; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:6px; color:var(--text); font-size:11px; line-height:1.7; margin:0; }
.attempt-list p { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; padding:9px 0; border-bottom:1px solid var(--line); font-size:11px; margin:0; }
.technical-details { margin-top:14px; }
.technical-details summary, .test-advanced summary { cursor:pointer; color:var(--muted); font-size:12px; padding:9px 0; }
.technical-details pre { margin-top:8px; }
.empty-state { padding:36px 16px; display:flex; align-items:center; flex-direction:column; text-align:center; }
.empty-state>.icon { width:25px; height:25px; color:var(--faint); margin-bottom:12px; }
.empty-state strong { font-size:14px; }
.empty-state p { color:var(--muted); margin:6px 0 14px; font-size:12px; }
.search-form { display:flex; align-items:center; gap:8px; width:100%; max-width:420px; }
.search-form>.icon { color:var(--faint); }
.search-form input { min-width:0; width:100%; }
.message-form { display:flex; align-items:center; gap:4px; }
.message-form input { width:100%; min-width:0; font-family:var(--font-family-monospace)!important; font-size:12px!important; }
.message-form .save-message { border:1px solid var(--line); color:var(--brand); }
.products-table th:nth-child(1) { width:34%; }
.products-table th:nth-child(2) { width:40%; }
.products-table th:nth-child(3) { width:80px; }

.product-routes { text-align:right; }
.product-routes .text-link { margin-left:12px; }
.callbacks-table th:nth-child(1) { width:auto; }
.callbacks-table th:nth-child(2) { width:148px; }
.callbacks-table th:nth-child(3) { width:124px; }


.callback-action { text-align:right; }
.callback-state .badge, .compact-list .badge { white-space:nowrap; flex-shrink:0; }
.compact-list .row-title { min-width:0; overflow-wrap:anywhere; }
.pagination { display:flex; justify-content:center; align-items:center; gap:16px; padding:12px 16px; font-size:12px; color:var(--muted); }
.segmented { display:inline-flex; padding:3px; background:var(--hover); border-radius:var(--radius); gap:2px; }
.segmented a { display:flex; align-items:center; justify-content:center; min-height:32px; padding:5px 14px; border-radius:5px; color:var(--muted); font-size:12px; }
.segmented a.selected { color:var(--text); background:var(--surface); box-shadow:0 1px 3px #172b4d12; font-weight:550; }
.timezone-note { font-size:11px; }
/* Native Django forms retain validation, CSRF and masked PasswordInput controls. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]), select, textarea { border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--text); padding:9px 10px; min-height:38px; max-width:100%; font:13px/1.5 var(--body-font-family); box-sizing:border-box; }
input:focus, textarea:focus, select:focus { border-color:var(--brand); }
textarea { resize:vertical; min-width:0; }
select { height:auto!important; }
input[type=checkbox], input[type=radio] { width:17px; height:17px; accent-color:var(--brand); }
fieldset.module { padding:0; }
fieldset.module h2, fieldset.module summary h2 { background:var(--subtle); color:var(--text); font-size:13px; font-weight:600; margin:0; padding:13px 16px; border-bottom:1px solid var(--line); }
fieldset.module summary { background:var(--subtle); }
fieldset.module summary h2 { display:inline; border-bottom:0; padding:0; }
fieldset.module>details>summary { padding:13px 16px; }
.form-row { padding:12px 16px!important; border-bottom:1px solid var(--line)!important; margin:0!important; overflow:visible; }
.form-row:last-child { border-bottom:0!important; }
.aligned label, .form-row label { float:none; width:auto; padding:0; margin-bottom:6px; color:var(--text); font-size:12px; font-weight:500; }
.aligned .form-row .flex-container { display:flex; flex-direction:column; align-items:stretch; gap:0; min-width:0; }
.aligned .form-row .form-multiline { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.aligned .form-row .fieldBox { margin:0; float:none; min-width:0; }
.aligned .form-row input:not([type=checkbox]):not([type=radio]), .aligned .form-row textarea, .aligned .form-row select { width:100%; }
.aligned .form-row:has(input[type=checkbox])>.flex-container, .aligned .form-row .checkbox-row { flex-direction:row; align-items:center; gap:8px; }
.aligned .vCheckboxLabel { padding:0; margin:0; }
.aligned .form-row .help { margin:6px 0 0!important; padding:0!important; color:var(--muted); font-size:11px; line-height:1.6; }
.form-row .readonly { font-size:13px; color:var(--text); padding:0; min-width:0; overflow-wrap:anywhere; }
.form-row .readonly a { overflow-wrap:anywhere; }
.related-widget-wrapper { display:flex; width:100%; align-items:center; gap:5px; float:none; min-width:0; }
.related-widget-wrapper .select2-container { width:100%!important; min-width:0!important; }
.related-widget-wrapper-link { flex:none; }
.select2-container--admin-autocomplete .select2-selection--single { min-height:38px; border-color:var(--line)!important; background:var(--surface)!important; border-radius:6px!important; }
.select2-container--admin-autocomplete .select2-selection__rendered { color:var(--text)!important; line-height:36px!important; padding-left:10px!important; }
.select2-dropdown, .select2-search__field { background:var(--surface)!important; color:var(--text)!important; border-color:var(--line)!important; }
.select2-results__option { color:var(--text); background:var(--surface); }
#id_params { height:210px; font:12px/1.65 var(--font-family-monospace); }
#id_required_fields { height:44px; min-height:44px; font:12px/1.6 var(--font-family-monospace); }
.submit-row { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin:16px 0!important; padding:12px!important; background:var(--surface)!important; border:1px solid var(--line); border-radius:var(--radius); }
.submit-row input { margin:0!important; float:none!important; }
.submit-row .deletelink-box, .submit-row input[name=_addanother] { display:none; }
#rule_form>div { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr); gap:16px; align-items:start; }
#rule_form>div>fieldset:nth-of-type(1) { grid-column:1; grid-row:1; }
#rule_form>div>fieldset:nth-of-type(2) { grid-column:1; grid-row:2; }
#rule_form>div>fieldset:nth-of-type(3) { grid-column:1; grid-row:3; }
#rule_form>div>fieldset { margin:0; }
#rule_form .test-panel { grid-column:2; grid-row:1 / span 3; margin:0; position:sticky; top:84px; }
#rule_form .submit-row { grid-column:1 / -1; margin:0!important; position:static; }
.test-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px; }
.test-grid label { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); min-width:0; }
.test-grid input, .test-grid select { width:100%; min-width:0; }
.test-grid .wide { grid-column:1 / -1; }
.test-advanced { margin:0 16px 12px; border-top:1px solid var(--line); }
.test-advanced .test-grid { padding:8px 0 0; }
.test-toolbar { padding:0 16px 16px; }
.test-toolbar .btn { width:100%; }
.test-toolbar p { font-size:11px; margin:8px 0 0; color:var(--muted); }
.test-result { padding:12px 16px; font-size:12px; border-top:1px solid var(--line); }
.test-result.ok { color:var(--success); background:var(--success-bg); }
.test-result.error, .inline-error { color:var(--danger); background:var(--danger-bg); }
.rule-operations { margin-top:20px; clear:both; }
.relay-urls { min-width:0; }
.webhook-address { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--subtle); }
.webhook-address code { display:block; font-size:11px; line-height:1.7; overflow-wrap:anywhere; min-width:0; flex:1; }
.relay-urls p { font-size:11px; color:var(--muted); margin:8px 0 0; }
.connection-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.connection-grid>fieldset { margin:0; }
.product-callbacks { margin-top:16px; }
.compact-list { list-style:none; padding:0; margin:0; }
.compact-list li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:13px; }
.compact-list li:last-child { border-bottom:0; }
/* Confirmation is an actual modal dialog; focus is managed by the browser. */
dialog.confirm-dialog { background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:12px; width:min(420px,calc(100% - 32px)); padding:24px; box-shadow:0 24px 90px #11182733; }
dialog::backdrop { background:#11182780; backdrop-filter:blur(3px); }
.dialog-symbol { display:grid; place-items:center; width:38px; height:38px; background:var(--brand-soft); color:var(--brand); border-radius:var(--radius); margin-bottom:14px; }
.confirm-dialog h2 { font-size:20px; letter-spacing:-.4px; }
.confirm-dialog>p { font-size:12px; color:var(--muted); margin:8px 0; }
.confirmation-summary { margin:18px 0; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:12px; }
.confirmation-summary>div { display:grid; grid-template-columns:84px minmax(0,1fr); gap:12px; margin:8px 0; }
.confirmation-summary dd { margin:0; font-weight:550; }
.dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:20px; }
.inline-error { padding:10px; border-radius:6px; }
.errorlist { color:var(--danger); font-size:12px; }
.errornote { background:var(--danger-bg); border:1px solid var(--danger); color:var(--danger); border-radius:var(--radius); padding:12px; font-size:13px; }
.messagelist { padding:0 28px!important; margin:12px 0 0!important; }
.messagelist li { border:1px solid var(--line); border-radius:var(--radius); padding:11px 14px!important; font-size:12px; background:var(--success-bg)!important; color:var(--success)!important; list-style:none; }
.messagelist li.error { background:var(--danger-bg)!important; color:var(--danger)!important; }
#changelist .results { overflow:auto; }
#changelist table { width:100%; }
#changelist table td, #changelist table th { padding:11px 12px; background:var(--surface); color:var(--text); font-size:12px; }
#changelist .actions, #changelist #toolbar, #changelist .paginator { background:var(--surface); color:var(--muted); border-color:var(--line); padding:12px; }
.object-tools { margin:0 0 16px; padding:0; float:none; }
.object-tools a, .object-tools button { background:var(--surface); color:var(--brand); border:1px solid var(--line); border-radius:6px; padding:8px 12px; font-size:12px; }
body.login { background:var(--bg); }
.login #container { width:min(400px,calc(100% - 32px)); margin:10vh auto; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 48px #172b4d08; overflow:hidden; background:var(--surface); }
.login #header { position:static; display:flex; min-height:0; justify-content:center; padding:24px 20px 8px; border:0; }
.login #branding { padding:0; border:0; height:40px; }
.login #main { margin:0; }
.login #content { padding:20px 28px 28px!important; }
.login #content h1 { font-size:20px; text-align:center; margin:0 0 20px; }
.login .form-row { padding:8px 0!important; border:0!important; }
.login .form-row label { display:block; margin-bottom:6px; }
.login .form-row input { width:100%; }
.login .submit-row { margin:12px 0 0!important; padding:0!important; border:0; }
.login .submit-row input { width:100%; min-height:42px; background:var(--brand); color:var(--on-brand); }
@media(max-width:1150px) {
  :root { --sidebar:176px; }
  #content { padding:22px 20px 32px!important; }
  .console-table td, .console-table th { padding-left:10px; padding-right:10px; }
  .metric-grid .metric-caption { display:none; }
  #rule_form>div { grid-template-columns:1fr; }
  #rule_form>div>fieldset, #rule_form .test-panel, #rule_form .submit-row { grid-column:1; grid-row:auto; position:static; }
  .test-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .test-grid .wide { grid-column:auto; }
}
/* Switch dense data to cards before the desktop columns become cramped. */
@media(max-width:1100px) {
  .panel:has(>.table-scroll), .panel:has(>.panel-heading + .table-scroll) { background:transparent; border:0; box-shadow:none; overflow:visible; }
  .table-scroll { overflow:visible; }
  .console-table { display:block; width:100%; }
  .console-table thead { display:none; }
  .console-table tbody { display:block; width:100%; }
  .console-table .operation-row, .console-table .product-row, .console-table .callback-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:14px; margin-bottom:12px; }
  .console-table td { display:block; padding:0; border:0; min-width:0; }
  .console-table td small { margin-top:3px; font-size:11px; }
  .operation-row { grid-template-areas:"time time" "client amount" "product product" "state actions"; }
  .test-operation { grid-template-areas:"time time" "client amount" "product product" "state state" "actions actions"; }
  .op-time { grid-area:time; display:flex!important; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center; color:var(--muted); }
  .op-time time { display:flex; gap:8px; }
  .op-time time small, .op-time>small { margin:0!important; }
  .op-client { grid-area:client; }
  .op-amount { grid-area:amount; align-self:start; justify-self:end; max-width:100%; }
  .op-product { grid-area:product; padding:10px 0!important; border-top:1px solid var(--line)!important; border-bottom:1px solid var(--line)!important; }
  .op-state { grid-area:state; }
  .op-actions { grid-area:actions; align-self:center; }
  .row-actions { gap:4px; }
  .row-actions .btn, .row-actions .icon-button { min-height:44px; }
  .row-actions .icon-button { min-width:44px; }
  .operation-row .badge { font-size:11px; }
  .detail-row:not([hidden]) { display:block; margin:-13px 0 12px; border:1px solid var(--line); border-radius:0 0 var(--radius) var(--radius); overflow:hidden; }
  .detail-row>td { display:block; }
  .detail-columns { grid-template-columns:1fr; gap:16px; }
  .operation-facts { display:grid; grid-template-columns:1fr; gap:10px; }
  .product-row { grid-template-columns:minmax(0,1fr) auto!important; grid-template-areas:"name visibility" "message message"; }
  .product-name { grid-area:name; }
  .product-message { grid-area:message; }
  .mobile-label { display:block; font-size:11px; color:var(--muted); margin-bottom:5px; }
  .product-routes { grid-area:routes; display:flex!important; justify-content:space-between; align-items:center; border-top:1px solid var(--line)!important; padding-top:6px!important; }
  .product-routes .text-link { margin:0; }
  .callback-row { grid-template-columns:minmax(0,1fr) auto!important; grid-template-areas:"name state" "name action"; }
  .callback-name { grid-area:name; }
  .callback-state { grid-area:state; text-align:right; }
  .callback-product { grid-area:product; padding:10px 0!important; border-top:1px solid var(--line)!important; border-bottom:1px solid var(--line)!important; }
  .callback-scope { grid-area:scope; font-size:11px!important; align-self:center; }
  .callback-action { grid-area:action; align-self:center; }
  .callback-action .btn { font-size:11px; }
}
@media(max-width:760px) {
  :root { --sidebar:0px; }
  html { scroll-padding-bottom:100px; }
  #header { grid-template-columns:minmax(0,1fr) auto; min-height:60px; }
  #branding { height:60px; border:0; padding:0 16px; }
  .relay-brand { font-size:15px; }
  #user-tools { padding:6px 10px 6px 0; gap:0; }
  .account-label { display:none; }
  .account-actions { gap:0; }
  .icon-button { width:44px; height:44px; min-width:44px; }
  .app-tabs { top:auto; bottom:0; width:100%; height:calc(68px + env(safe-area-inset-bottom)); padding:5px 4px env(safe-area-inset-bottom); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; border-right:0; border-top:1px solid var(--line); z-index:40; }
  .app-tabs a { flex-direction:column; justify-content:center; gap:5px; padding:6px 0; min-height:52px; font-size:10px; font-weight:550; border-radius:6px; white-space:nowrap; }
  .app-tabs a.active::after { display:none; }
  .app-tabs .icon { width:19px; height:19px; }
  #content { padding:20px 16px calc(92px + env(safe-area-inset-bottom))!important; }
  .page-heading { margin-bottom:16px; gap:10px; align-items:flex-start; }
  .page-heading h1 { font-size:22px; }
  .page-heading p { font-size:12px; }
  .page-heading>.btn { padding:8px 10px; font-size:11px; }
  .btn, .text-link { min-height:44px; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .metric-grid>a { padding:14px; }
  .metric-grid strong { font-size:26px; }
  .metric-grid .icon { right:14px; bottom:14px; }
  .setup-strip { padding:10px 12px; margin-bottom:16px; gap:8px; }
  .setup-secondary { display:none; }
  .setup-strip .text-link { font-size:11px; }
  .setup-strip>div { gap:7px; }
  .setup-strip strong { font-size:11px; }
  .panel { margin-bottom:16px; }
  .panel-heading { padding:0 0 12px; border:0; min-height:0; }
  .panel-heading .text-link { font-size:11px; }
  .panel-heading h2 { font-size:14px; }
  .search-form { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:4px 8px; max-width:none; }
  .search-form input { border:0!important; padding-left:0!important; }
  .search-form .btn { padding-left:8px; padding-right:8px; }
  .segmented a { min-height:38px; padding:6px 14px; }
  .empty-state { background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius); }
  .console-table>tbody>tr:has(>.empty-state), .console-table>tbody>tr:has(>td>.empty-state) { display:block; }
  .test-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .test-grid .wide { grid-column:1 / -1; }
  .connection-grid { grid-template-columns:1fr; }
  .aligned .form-row .form-multiline { grid-template-columns:1fr; gap:12px; }
  .submit-row { padding:10px!important; }
  .submit-row input { flex:1; min-height:44px; white-space:normal; }
  .messagelist { padding:0 16px!important; }
  .confirm-dialog { padding:20px!important; }
  .dialog-actions { display:grid; grid-template-columns:auto 1fr; }
  .dialog-actions .btn { white-space:normal; font-size:12px; }
  .login #container { margin:7vh auto; }
  .login #content { padding:20px 24px 28px!important; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }

#connection_form>div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
#connection_form>div>fieldset { margin:0; }
#connection_form>div>fieldset:nth-of-type(3), #connection_form .submit-row { grid-column:1 / -1; }
#connection_form .connection-diagnostics { grid-column:1 / -1; }
#connection_form .submit-row { margin:0!important; }
@media(max-width:760px) { #connection_form>div { grid-template-columns:1fr; } #connection_form>div>fieldset, #connection_form .submit-row { grid-column:1; } }

.secret-control { display:flex; align-items:center; gap:8px; width:100%; min-width:0; }
.secret-control input { width:100%; min-width:0; flex:1; }
.secret-control .icon-button, .connection-settings, .calculator-editor .icon-button { width:44px; min-width:44px; height:44px; border-color:var(--line); background:var(--surface); }
.secret-error, .calculator-action-error { color:var(--danger); margin:8px 0 0; font-size:12px; }
.calculator-action-error { margin:0 16px 16px; }
.connection-overview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.connection-overview .panel { min-width:0; margin:0; }
.connection-card-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px; border-bottom:1px solid var(--line); }
.connection-account { display:flex; align-items:center; gap:12px; min-width:0; }
.connection-account > div { min-width:0; }
.connection-account strong, .connection-account span:not(.relay-mark) { display:block; overflow-wrap:anywhere; }
.connection-account strong { font-size:16px; }
.connection-account span:not(.relay-mark) { font-size:12px; color:var(--muted); margin-top:2px; }
.connection-card-state { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:16px; padding:24px 20px; }
.connection-card-state > div { min-width:0; }
.connection-card-state .catalog-sync-form { margin:0; min-width:0; max-width:100%; justify-self:end; }
.connection-card-state .btn { min-height:44px; max-width:100%; }
.connection-card-state h2 { margin:0 0 4px; padding:0; font-size:20px; font-weight:650; background:none; color:var(--text); }
.connection-card-state p { margin:0; color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.connection-state-icon { display:grid; place-items:center; width:44px; min-width:44px; height:44px; border-radius:50%; color:var(--muted); background:var(--subtle); }
.connected .connection-state-icon { color:var(--success); background:var(--success-bg); }
.error .connection-state-icon, .unverified .connection-state-icon { color:var(--warning); background:var(--warning-bg); }
.connection-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0; padding:0 20px 20px; }
.connection-facts dt { font-size:12px; color:var(--muted); margin-bottom:4px; }
.connection-facts dd { margin:0; color:var(--text); font-size:13px; overflow-wrap:anywhere; }
.connection-webhook { padding:16px; }
.connection-webhook .webhook-address { min-width:0; }
.connection-last-event { margin:0 16px 16px; color:var(--muted); font-size:12px; }
.connection-diagnostics .connection-facts { padding-top:16px; }
@media(max-width:1024px) { .connection-overview { grid-template-columns:minmax(0,1fr); gap:16px; } }
@media(max-width:760px) { .connection-notifications .panel-heading { padding:12px 16px; border-bottom:1px solid var(--line); } }
@media(max-width:600px) { .connection-card-state { grid-template-columns:44px minmax(0,1fr); gap:12px 16px; } .connection-card-state .catalog-sync-form { grid-column:2; justify-self:start; } }
@media(max-width:480px) { .connection-card-heading { padding:16px; } .connection-card-state { padding:20px 16px; } .connection-facts { padding:0 16px 16px; gap:12px; } }

.console-table tbody>tr:not(.detail-row) { background:var(--surface); }
.console-table tbody>tr:not(.detail-row):hover { background:var(--subtle); }
.op-time time { white-space:nowrap; }
.field-product .related-widget-wrapper-link { display:none; }
.submit-row .btn { float:none; }
.submit-row .cancel-action { margin-right:auto; color:var(--muted); }
@media(max-width:760px) {
 input:not([type=checkbox]):not([type=radio]):not([type=submit]), select, textarea { min-height:44px; font-size:16px; }
 .form-row .checkbox-row { min-height:44px; }
 .form-row .vCheckboxLabel { display:flex; align-items:center; min-height:44px; }
 .submit-row .cancel-action { margin-right:0; }
}

.console-table td small:empty { display:none; }

.danger-link { color:var(--danger); }
.rule-extra { margin-top:12px; }

@media(max-width:760px) { .technical-details summary, .test-advanced summary { min-height:44px; } .metric-grid strong { font-size:clamp(20px,6vw,26px); } }

.aligned .form-row>div { width:100%; max-width:100%; }
.submit-row { flex-direction:row; }
.submit-row input, .submit-row button { text-transform:none; }
.password-page { max-width:560px; }
.password-page .form-row { padding:14px 16px!important; }
.field-help { margin-top:8px; font-size:11px; color:var(--muted); }
.field-help summary { min-height:32px; cursor:pointer; }
.field-help ul { padding-left:18px; margin:8px 0 0; }
.field-help li { font-size:11px; color:var(--muted); line-height:1.7; }

@media(max-width:760px) {
 .message-form input { font-size:16px!important; }
 #id_params, #id_required_fields { font-size:16px; }
}

/* Inline callback state: explicit status, colour and accessible switch semantics. */
.rule-state-form { margin:0; }
.rule-switch { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; max-width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:var(--radius); background:var(--subtle); color:var(--muted); font-size:11px; font-weight:600; white-space:nowrap; }
.rule-switch:hover { border-color:var(--faint); }
.switch-track { position:relative; display:block; flex:none; width:26px; height:16px; border-radius:10px; background:var(--muted); }
.switch-track::after { content:""; position:absolute; top:3px; left:3px; width:10px; height:10px; border-radius:50%; background:var(--surface); transition:transform .15s; }
.rule-switch[aria-checked=true] { color:var(--success); background:var(--success-bg); border-color:var(--success); }
.rule-switch[aria-checked=true] .switch-track { background:var(--success); }
.rule-switch[aria-checked=true] .switch-track::after { transform:translateX(10px); }
.switch-error { color:var(--danger); white-space:normal; text-align:left; }
@media(max-width:1100px) { .rule-switch { min-height:44px; } }

.callback-icons { display:flex; justify-content:flex-end; gap:4px; }
.callback-icons .icon-button { width:44px; height:44px; min-width:44px; border-color:var(--line); background:var(--surface); }
.icon-button.danger { color:var(--danger); }
.icon-button.danger:hover { color:var(--danger)!important; background:var(--danger-bg); }
.delete-card { max-width:520px; padding:24px; margin:32px auto; }
.delete-card .dialog-symbol { background:var(--danger-bg); color:var(--danger); }
.delete-card h1 { font-size:22px; margin:0; }
.delete-card>p { font-size:13px; }
.btn.destructive, .btn.destructive:hover { background:var(--danger); border-color:var(--danger); color:var(--surface); }
@media(max-width:760px) { .delete-card { padding:20px; margin:8px auto; } }

.products-toolbar { gap:12px; }
.product-visibility { text-align:right; }
.product-visibility form { margin:0; }
.product-visibility .icon-button { border-color:var(--line); width:44px; min-width:44px; height:44px; }
@media(max-width:1100px) { .product-visibility { grid-area:visibility; align-self:start; } .product-visibility .icon-button { width:44px; min-width:44px; height:44px; } }
@media(max-width:760px) { .products-toolbar { align-items:stretch; } .product-visibility-tabs a { min-height:44px; } }

.page-heading>.editor-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; flex:0 1 auto; }
.editor-actions form { margin:0; }
.editor-actions .btn { min-height:44px; }

.receiver-settings { padding: 24px; }
.receiver-field { margin: 20px 0; }
.receiver-field label { display: block; font-weight: 600; margin-bottom: 8px; }
.receiver-field input, .receiver-field select { width: 100%; max-width: 760px; box-sizing: border-box; }
.payload-fields { margin-top: 24px; }
.payload-fields summary { cursor: pointer; font-weight: 600; padding: 12px 0; }
#id_selected_fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 18px 0; }
#id_selected_fields label { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
#id_selected_fields input { flex-shrink: 0; }
.receiver-settings [hidden] { display: none; }
.callbacks-table .callback-name { width: auto; }
@media(min-width:1151px) {
  #rule_form>div>.receiver-settings { grid-column:1; grid-row:1; margin:0; }
  #rule_form .test-panel { grid-row:1; }
}
@media(max-width:760px) {
  #id_selected_fields label { min-height:44px; }
}