/* Keep sales and recharge support readable at every screen size. */
.site-contact-surface .contact-surface-heading strong { font-size: 16px; font-weight: 800; line-height: 1.45; }
#app-contact-dock, #app-contact-dock[open] { width: auto; max-width: none; border-radius: 9px; background: #fff4de; border: 1px solid #d79c39; }
.app-contact-dock > summary, .mobile-auth-contact > summary, #auth-contact-panel > summary { min-height: 46px; padding: 10px 14px; color: #814300; }
#app-contact-dock > summary { width: auto; }
.app-contact-dock .contact-surface-heading strong { font-size: 15px; font-weight: 800; color: #814300; }
.app-contact-dock .contact-surface-heading > svg { color: #814300; flex-shrink: 0; }
.app-contact-dock > summary > div, .app-contact-dock:not([open]) > summary > div,
.app-contact-dock > summary .support-chevron, .app-contact-dock:not([open]) > summary .support-chevron {
  display: block; position: static; width: auto; height: auto; padding: 0; overflow: visible; clip-path: none; white-space: normal;
}
.app-contact-dock[open] .site-contact-links { z-index: 61; right: 0; top: calc(100% + 8px); width: min(360px, calc(100vw - 28px)); max-height: min(520px, 65svh); }
.support-disclosure > summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; border-radius: 8px; }
#auth-contact-panel > summary, .mobile-auth-contact > summary { background: #fff4de; border: 1px solid #d79c39; border-radius: 9px; }
.mobile-auth-contact .contact-surface-heading strong { color: #814300; font-size: 16px; font-weight: 800; }
.commerce-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
#commerce-pricing, #commerce-records, #commerce-providers { padding: 24px; }
.commerce-heading h2 { font-size: 21px; margin: 0 0 8px; }
.commerce-heading p, .commerce-note { color: #526079; line-height: 1.8; margin: 0; max-width: 75ch; }
.commerce-price-grid, .commerce-config-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 22px 0; }
.commerce-price-grid .field { padding: 15px; border: 1px solid #e0e6ef; border-radius: 9px; background: #fafbfd; }
.commerce-price-grid input { width: 100%; }
.commerce-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 20px 0; }
.commerce-toolbar .field { flex: 1 1 140px; }
.commerce-toolbar input, .commerce-toolbar select { width: 100%; }
.commerce-status { display: inline-flex; padding: 5px 9px; background: #ecf4ef; color: #276444; border-radius: 6px; font-size: 12px; font-weight: 700; }
.commerce-status.deleted { color: #95351c; background: #fff0eb; }
.commerce-feedback { min-height: 24px; margin: 14px 0; color: #315a9c; overflow-wrap: anywhere; }
.commerce-feedback.error, #delete-history-error { color: #ae302b; }
.commerce-table-wrap { overflow: auto; }
.commerce-table-wrap table { min-width: 680px; width: 100%; }
.commerce-table-wrap th, .commerce-table-wrap td { padding: 13px 12px; text-align: left; border-bottom: 1px solid #e9edf3; vertical-align: top; }
.commerce-table-wrap small { display: block; color: #68758b; max-width: 250px; overflow-wrap: anywhere; }
.commerce-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.commerce-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.commerce-provider { border: 1px solid #dfe5ef; border-radius: 12px; margin: 20px 0; padding: 22px; min-width: 0; }
.commerce-provider.active { border-color: #477b59; }
.commerce-provider summary { display: flex; flex-wrap: wrap; gap: 12px; cursor: pointer; align-items: center; }
.commerce-provider summary strong { font-size: 18px; }
.commerce-provider .field { min-width: 0; }
.commerce-provider input, .commerce-provider select, .commerce-provider textarea { width: 100%; }
.commerce-provider textarea { min-height: 80px; }
.commerce-provider .wide { grid-column: 1 / -1; }
.commerce-provider .commerce-test-output { white-space: pre-wrap; color: #425673; font-size: 13px; overflow-wrap: anywhere; }
.commerce-confirm { margin-top: 18px; padding: 18px; background: #fff6e5; border: 1px solid #e1b368; border-radius: 9px; }
.danger-button { background: #a9352c; }
.history-delete-button { color: #a43c30; }
.admin-view-tabs { flex-wrap: wrap; }
/* Provider forms stay usable for long model IDs and touch input. */
.commerce-provider input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; margin: 8px 0; accent-color: #315f45; }
.commerce-provider li, .commerce-provider summary, .commerce-provider select { min-width: 0; overflow-wrap: anywhere; }
.commerce-provider li { padding: 8px 0; }
.commerce-provider li .commerce-actions { margin-top: 6px; }
.commerce-provider button, .commerce-provider select, .commerce-provider input:not([type="checkbox"]) { min-height: 44px; }
.commerce-provider .field:has(input[type="checkbox"]) { min-height: 44px; }
.commerce-provider summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 6px; border-radius: 4px; }
@media (min-width: 821px) {
  #app-contact-dock { flex-shrink: 0; }
  #app-contact-dock .contact-surface-heading strong { white-space: nowrap; }
}
@media (max-width: 1100px) {
  .commerce-price-grid, .commerce-config-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .auth-form-wrap .mobile-auth-contact { margin: 22px 0 0; padding: 0; border: 0; }
  .auth-form-wrap .mobile-auth-contact summary { padding: 10px; }
  #commerce-pricing, #commerce-records, #commerce-providers { padding: 18px; }
  .topbar { position: sticky; display: grid; grid-template-columns: auto minmax(0,1fr) auto; height: auto; min-height: 110px; padding: 9px 14px 10px; gap: 7px 10px; }
  .topbar-actions { display: contents; }
  .topbar .mobile-menu { grid-column: 1; grid-row: 1; }
  .topbar .breadcrumb { grid-column: 2; grid-row: 1; }
  .topbar .language-pill { grid-column: 3; grid-row: 1; margin-right: 38px; }
  .topbar .topbar-avatar { grid-column: 3; grid-row: 1; justify-self: end; }
  .app-view .topbar #app-contact-dock, .app-view .topbar #app-contact-dock[open] { position: relative; grid-column: 1 / -1; grid-row: 2; inset: auto; margin: 0; padding: 0; width: 100%; max-width: none; min-width: 0; box-shadow: none; }
  .app-contact-dock > summary { width: 100%; min-height: 43px; padding: 8px 11px; justify-content: center; gap: 9px; }
  .app-contact-dock .contact-surface-heading strong { font-size: 15px; font-weight: 800; text-align: center; }
  .app-contact-dock > summary > div, .app-contact-dock:not([open]) > summary > div { display: block; flex: 1; }
  .app-contact-dock .support-chevron { flex: 0 0 16px; }
  .app-contact-dock[open] .site-contact-links { right: 0; left: 0; top: calc(100% + 6px); width: 100%; max-height: min(430px, 60svh); }
  .commerce-price-grid, .commerce-config-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .commerce-heading { flex-direction: column; }
  .commerce-provider { padding: 16px; }
  .commerce-provider input, .commerce-provider select, .commerce-provider textarea { font-size: 16px; }
  .commerce-actions > button { flex: 1 1 auto; }
  .admin-view-tabs { gap: 7px; }
}
.commerce-test-preview{margin:16px 0 0;display:grid;gap:8px;max-width:420px}
.commerce-test-preview img{display:block;width:100%;max-height:360px;object-fit:contain;border:1px solid var(--border-color,#dce3df);border-radius:14px;background:#f4f7f5}
.commerce-test-preview figcaption{font-size:12px;color:var(--text-muted,#63716b)}
.model-workbench { --model-border: #e0e5eb; color: #203043; min-width: 0; }
#commerce-providers > .commerce-feedback:empty { display: none; }
.model-tabs { display: flex; gap: 6px; padding: 5px; margin: 12px 0 20px; background: #f0f3f6; border: 1px solid #e6eaf0; border-radius: 13px; width: fit-content; max-width: 100%; }
.model-tabs button { border: 0; border-radius: 9px; background: transparent; color: #526174; padding: 12px 22px; font: inherit; font-weight: 650; min-height: 44px; cursor: pointer; }
.model-tabs button[aria-pressed="true"] { color: #162d44; background: #fff; box-shadow: 0 2px 7px #233b5010; }
.model-tab-panel[hidden], .ai-config-panel[hidden], #image-settings-admin[hidden] { display: none !important; }
.model-section-heading { display: flex; gap: 18px; justify-content: space-between; align-items: start; margin: 0 0 24px; }
.model-section-heading h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.5px; }
.model-section-heading p, .model-apply-bar p { color: #667285; line-height: 1.65; margin: 0; font-size: 14px; }
.model-route-list { display: grid; gap: 16px; margin-top: 16px; }
.model-route { background: #fff; border: 1px solid var(--model-border); border-radius: 15px; padding: 22px; min-width: 0; }
.model-route-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.model-route-title h4 { font-size: 17px; margin: 0; }
.model-route-title > span { color: #8696a7; font-size: 12px; font-weight: 650; letter-spacing: 1px; }
.model-picker { display: grid; grid-template-columns: minmax(135px,.8fr) minmax(0,2fr) minmax(140px,.8fr); align-items: end; gap: 16px; min-width: 0; }
.model-picker-selection { display: grid; gap: 8px; min-width: 0; }
.model-workbench .field { min-width: 0; margin: 0; display: grid; gap: 7px; }
.model-workbench .field > span { font-size: 12px; font-weight: 600; color: #536174; }
.model-workbench input:not([type="checkbox"]), .model-workbench select { min-width: 0; width: 100%; box-sizing: border-box; height: 44px; border: 1px solid #ced7e1; border-radius: 8px; padding: 0 11px; font: inherit; font-size: 14px; background: #fff; color: #203043; }
.model-workbench input[type="search"] { background: #f7f9fb; }
.model-workbench input[type="checkbox"] { width: 20px; height: 20px; accent-color: #27587c; }
.model-workbench input:focus-visible, .model-workbench select:focus-visible, .model-workbench button:focus-visible, .model-workbench summary:focus-visible { outline: 3px solid #6c9ebd; outline-offset: 3px; }
.model-picker-test { display: grid; gap: 12px; }
.model-capability { color: #486b62; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.model-capability[data-capability-state="unknown"] { color: #8c641f; }
.model-capability[data-capability-state="unsupported"] { color: #a64545; }
.model-fallbacks { border-top: 1px solid #edf0f4; margin-top: 20px; padding-top: 8px; }
.model-fallbacks > summary, .model-connection-advanced > summary { cursor: pointer; min-height: 44px; align-content: center; font-size: 13px; font-weight: 600; }
.model-fallbacks > summary span { color: #6f7c8d; margin-left: 8px; }
.model-fallback { margin: 12px 0; border-radius: 10px; padding: 16px; background: #f7f9fb; }
.model-fallback .commerce-actions { margin-bottom: 0; }
.model-apply-bar { background: #f3f6f9; border: 1px solid #dce4ec; border-radius: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; padding: 20px; }
.model-apply-bar > div { flex: 1 1 330px; }
.model-apply-bar strong { display: block; margin-bottom: 6px; }
.model-test-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.model-test-result { border: 1px solid #dce4ec; border-radius: 14px; padding: 24px; margin-top: 24px; overflow-wrap: anywhere; }
.model-test-result h4 { margin: 16px 0 8px; }
.model-test-result p,.model-test-result li { font-size: 14px; line-height: 1.7; }
.model-empty-state { padding: 36px 24px; margin-top: 24px; border: 1px dashed #cbd6e1; border-radius: 14px; color: #647589; line-height: 1.8; text-align: center; }
.model-connection summary { gap: 12px; }
.model-connection .commerce-config-grid { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 20px; }
.model-connection h4 { margin: 0 0 12px; }
.model-connection section .field { margin-bottom: 12px; }
.model-connection-advanced { border-top: 1px solid #edf0f4; padding-top: 8px; margin-top: 18px; }
.model-workbench .commerce-feedback:empty { display: none; }
.model-workbench .commerce-feedback { margin: 0 0 18px; padding: 12px 14px; background: #f0f6f3; border-radius: 8px; line-height: 1.7; }
.model-workbench .commerce-feedback.error { background: #fff2ef; }
.model-workbench button { min-height: 44px; }
@media (max-width: 1000px) { .model-picker { grid-template-columns: minmax(130px,.8fr) minmax(0,2fr); } .model-picker-test { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; } }
@media (max-width: 640px) {
  .model-tabs { width: 100%; box-sizing: border-box; gap: 2px; }
  .model-tabs button { flex: 1; padding: 11px 6px; font-size: 13px; }
  .model-route { padding: 17px; }
  .model-picker, .model-test-controls, .model-connection .commerce-config-grid { grid-template-columns: minmax(0,1fr); }
  .model-workbench input:not([type="checkbox"]), .model-workbench select { font-size: 16px; }
  .model-picker-test { grid-column: auto; flex-wrap: wrap; }
  .model-picker-test button { width: 100%; }
  .model-section-heading { flex-wrap: wrap; gap: 10px; }
  .model-section-heading h3 { font-size: 20px; }
  .model-apply-bar { padding: 16px; }
  .model-apply-bar button { width: 100%; }
  .model-fallback { padding: 12px; }
}