/* 92_combined.min.css */
:root { --bg-primary: rgb(25, 25, 25); --bg-secondary: rgb(35, 35, 35); --bg-tertiary: rgb(15, 15, 15); --bg-dark: rgb(10, 10, 10); --bg-hover: rgba(255, 255, 255, 0.1); --bg-modal: #2a2a2a; --bg-modal-header: #1a1a1a; --border-primary: #444; --border-secondary: #666; --border-tertiary: #888; --border-focus: #0d6efd; --border-focus-shadow: rgba(13, 110, 253, 0.25); --text-primary: #ffffff; --text-secondary: #e0e0e0; --text-tertiary: #d0d0d0; --text-muted: #888; --text-disabled: #666; --color-success: #00bc8c; --color-success-hover: #009670; --color-danger: #e74c3c; --color-danger-hover: #dc3545; --color-warning: #f39c12; --color-warning-hover: #ffd700; --color-info: #3498db; --color-info-hover: #66b3ff; --color-primary: #0d6efd; --color-primary-hover: #0a58ca; --color-primary-light: #66b3ff; --value-positive: #28a745; --value-negative: #dc3545; --shadow-default: 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.2); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5); --transition-default: all 0.2s ease; --transition-slow: all 0.3s ease; --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 20px; --radius-sm: 3px; --radius-base: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --z-sticky-1: 1; --z-sticky-2: 2; --z-sticky-3: 3; --z-dropdown: 10; --z-modal: 100; --z-tooltip: 1000; } :root { --font-size-xs: 9px; --font-size-sm: 10px; --font-size-base: 10px; --font-size-md: 11px; --font-size-lg: 12px; --font-size-xl: 14px; } @media (min-width: 544px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 11px; --font-size-md: 12px; --font-size-lg: 13px; --font-size-xl: 15px; } } @media (min-width: 768px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } @media (min-width: 992px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } @media (min-width: 1200px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } body, body * { font-size: var(--font-size-base) !important; }¨ p { font-size: var(--font-size-base) !important; } span { font-size: var(--font-size-base) !important; } h1 { font-size: calc(var(--font-size-xl) * 1.5) !important; } h2 { font-size: calc(var(--font-size-xl) * 1.25) !important; } h3 { font-size: calc(var(--font-size-lg) * 1.2) !important; } h4 { font-size: var(--font-size-lg) !important; } h5 { font-size: var(--font-size-md) !important; } h6 { font-size: var(--font-size-base) !important; } .table tbody td, .dash-spreadsheet-container td, div.dash-spreadsheet-container .dash-spreadsheet-inner table td { font-size: var(--font-size-base) !important; } .table thead th, .dash-spreadsheet-container th, div.dash-spreadsheet-container .dash-spreadsheet-inner table th { font-size: var(--font-size-md) !important; } .form-control, .form-select, input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select { font-size: var(--font-size-base) !important; } label, .form-label { font-size: var(--font-size-sm) !important; } .Select-control, .Select-menu-outer, .Select-value-label, .Select-option, .Select-input input, .Select-placeholder { font-size: var(--font-size-sm) !important; } .btn, button, [type="button"], [type="submit"], .export { font-size: var(--font-size-base) !important; } .btn-sm { font-size: var(--font-size-sm) !important; } .btn-lg { font-size: var(--font-size-md) !important; } .nav-link, .nav-tabs .nav-link, .navbar-nav { font-size: var(--font-size-base) !important; } .card-body, .card-title, .card-text { font-size: var(--font-size-base) !important; } .card-header, .card-footer { font-size: var(--font-size-sm) !important; } .modal-body { font-size: var(--font-size-base) !important; } .modal-title { font-size: var(--font-size-lg) !important; } .page-number, .current-page-container input, .pagination { font-size: var(--font-size-sm) !important; } .tooltip, .popover, .dash-tooltip { font-size: var(--font-size-sm) !important; } .DateInput_input, .DateInput_input_1, .CalendarDay__default, .CalendarMonth_caption { font-size: var(--font-size-base) !important; } .badge, .form-text, small, .small { font-size: var(--font-size-xs) !important; } @media (max-width: 543px) { body, body * { min-font-size: 9px; } } .js-plotly-plot .plotly text, .js-plotly-plot .legend text, .js-plotly-plot .legendtext, g.legend text.legendtext { font-size: var(--font-size-xs) !important; } .js-plotly-plot .legend text { font-size: var(--font-size-xs) !important; } :root { --termly-scale: 0.7; } @media (max-width: 768px) { :root { --termly-scale: 0.65; } } @media (max-width: 480px) { :root { --termly-scale: 0.6; } } @media (max-width: 375px) { :root { --termly-scale: 0.55; } } :root { --termly-font-size: calc(14px * var(--termly-scale)); --termly-message-font: calc(13px * var(--termly-scale)); --termly-button-font: calc(13px * var(--termly-scale)); --termly-banner-padding-y: calc(12px * var(--termly-scale)); --termly-banner-padding-x: calc(16px * var(--termly-scale)); --termly-button-padding-y: calc(8px * var(--termly-scale)); --termly-button-padding-x: calc(16px * var(--termly-scale)); --termly-button-height: calc(36px * var(--termly-scale)); --termly-gap: calc(12px * var(--termly-scale)); --termly-button-gap: calc(8px * var(--termly-scale)); --termly-max-height: calc(160px * var(--termly-scale)); --termly-line-height: calc(1.4 - (0.2 * (1 - var(--termly-scale)))); } .termly-styles-root-b8aebb.termly-styles-banner-e1cd59 { padding: var(--termly-banner-padding-y) var(--termly-banner-padding-x) !important; font-size: var(--termly-font-size) !important; } .termly-styles-content-fcafe4 { font-size: var(--termly-font-size) !important; gap: var(--termly-gap) !important; } .termly-styles-messageContainer-d6c726 { font-size: var(--termly-font-size) !important; } .termly-styles-message-d6c726, .termly-styles-root-d5f97a { font-size: var(--termly-message-font) !important; line-height: var(--termly-line-height) !important; } .termly-styles-root-d5f97a[role="button"][tabindex="0"] { font-size: var(--termly-message-font) !important; text-decoration: underline; } .termly-styles-root-d5f97a[data-testid="preferences-link"] { font-size: var(--termly-message-font) !important; } .termly-styles-buttons-bb7ed2 { gap: var(--termly-button-gap) !important; } .termly-styles-button-bb7ed2[data-tid="banner-accept"] { background: rgb(74, 74, 74) !important; font-size: var(--termly-button-font) !important; padding: var(--termly-button-padding-y) var(--termly-button-padding-x) !important; height: var(--termly-button-height) !important; min-height: unset !important; } .termly-styles-module-root-aa0eb.termly-styles-module-primary-aa493c.termly-styles-module-solid-cd1b13.termly-styles-button-a4543c button { font-size: var(--termly-button-font) !important; padding: var(--termly-button-padding-y) var(--termly-button-padding-x) !important; height: var(--termly-button-height) !important; font-weight: normal !important; } #termly-code-snippet-support * { font-size: inherit !important; line-height: inherit !important; } #termly-code-snippet-support { font-size: var(--termly-font-size) !important; max-height: var(--termly-max-height) !important; } @media (max-width: 320px) { :root { --termly-scale: 0.45; } .termly-styles-buttons-bb7ed2 { flex-direction: column !important; width: 100% !important; } .termly-styles-button-bb7ed2, .termly-styles-module-root-aa0eb { width: 100% !important; } } .dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-container table, .dash-spreadsheet-container input { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } @media (min-width: 1px) { p { font-size: var(--font-size-xs); } } @media (min-width: 544px) { p { font-size: var(--font-size-base); } } @media (min-width: 768px) { p { font-size: var(--font-size-md); } } @media (min-width: 992px) { p { font-size: var(--font-size-md); } } @media (min-width: 1200px) { p { font-size: var(--font-size-md); } } @media (min-width: 1px) { span { font-size: var(--font-size-xs); } } @media (min-width: 544px) { span { font-size: var(--font-size-base); } } @media (min-width: 768px) { span { font-size: var(--font-size-md); } } @media (min-width: 992px) { span { font-size: var(--font-size-md); } } @media (min-width: 1200px) { span { font-size: var(--font-size-md); } } @media (min-width: 1px) { h1 { font-size: 1.8rem; } } @media (min-width: 544px) { h1 { font-size: 2rem; } } @media (min-width: 768px) { h1 { font-size: 2.2rem; } } @media (min-width: 992px) { h1 { font-size: 2.4rem; } } @media (min-width: 1200px) { h1 { font-size: 2.5rem; } } @media (min-width: 1px) { h2 { font-size: 1.4rem; } } @media (min-width: 544px) { h2 { font-size: 1.6rem; } } @media (min-width: 768px) { h2 { font-size: 1.8rem; } } @media (min-width: 992px) { h2 { font-size: 1.9rem; } } @media (min-width: 1200px) { h2 { font-size: 2rem; } } @media (min-width: 1px) { h3 { font-size: 1.2rem; } } @media (min-width: 544px) { h3 { font-size: 1.25rem; } } @media (min-width: 768px) { h3 { font-size: 1.35rem; } } @media (min-width: 992px) { h3 { font-size: 1.5rem; } } @media (min-width: 1200px) { h3 { font-size: 1.75rem; } } @media (min-width: 1px) { h4 { font-size: 1rem; } } @media (min-width: 544px) { h4 { font-size: 1rem; } } @media (min-width: 768px) { h4 { font-size: 1rem; } } @media (min-width: 992px) { h4 { font-size: 1.1rem; } } @media (min-width: 1200px) { h4 { font-size: 1.1rem; } } @media (min-width: 1px) { h5 { font-size: 1rem; } } @media (min-width: 544px) { h5 { font-size: 1rem; } } @media (min-width: 768px) { h5 { font-size: 1rem; } } @media (min-width: 992px) { h5 { font-size: 1.1rem; } } @media (min-width: 1200px) { h5 { font-size: 1.1rem; } } .cell-value-positive { color: var(--value-positive); font-weight: 500; } .cell-value-negative { color: var(--value-negative); font-weight: 500; } .learn-more-content .text-primary { color: var(--color-info-hover); } .form-control, .form-control:focus, .form-control:valid, input[type="number"], input[type="text"], input.form-control { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); } .form-control:focus { border-color: var(--border-focus); box-shadow: 0 0 0 0.25rem var(--border-focus-shadow); } @media (min-width: 1px) { .form-control:valid { font-size: var(--font-size-xs); } } @media (min-width: 768px) { .form-control:valid { font-size: var(--font-size-sm); } } input:disabled, .form-control:disabled { background-color: var(--bg-tertiary); color: var(--text-disabled); cursor: not-allowed; opacity: 0.6; } .Select-control { background-color: var(--bg-primary); border: 1px solid var(--border-primary); min-height: 30px; font-size: var(--font-size-base); } .Select-menu-outer { background-color: var(--bg-primary); border: 1px solid var(--border-primary); margin-top: 2px; font-size: var(--font-size-sm); } .Select-value, .Select-value-label { color: var(--text-primary); } .Select-input input { color: var(--text-primary); font-size: var(--font-size-sm); } .Select-option { background-color: var(--bg-primary); color: var(--text-primary); padding: var(--spacing-sm) var(--spacing-md); } .Select-option:hover { background-color: var(--bg-hover); } .Select-option.is-selected { background-color: var(--color-primary); color: var(--text-primary); } .dash-dropdown-container { background-color: var(--bg-primary); } .form-select-sm { background-color: #222; color: var(--text-primary); border: 1px solid var(--border-primary); transition: var(--transition-default); } .form-select-sm:focus { background-color: #2a2a2a; border-color: var(--color-success); box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25); color: var(--text-primary); } .form-select-sm option { background-color: #222; color: var(--text-primary); } .form-select-sm:hover { border-color: var(--border-secondary); } .export { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); padding: 6px 12px; border-radius: var(--radius-base); font-size: var(--font-size-base); cursor: pointer; transition: var(--transition-default); margin: var(--spacing-xs); } .export:hover { background-color: var(--bg-hover); border-color: var(--border-secondary); } .Select.is-focused > .Select-control { background-color: rgb(25, 25, 25) !important; border-color: var(--border-focus) !important; box-shadow: 0 0 0 0.25rem var(--border-focus-shadow) !important; } .Select--single > .Select-control .Select-value { color: var(--text-primary) !important; } .Select-value-label { color: var(--text-primary) !important; } .Select-placeholder { color: var(--text-muted) !important; } .Select-arrow { border-color: var(--text-muted) transparent transparent !important; } .Select-control:hover .Select-arrow { border-color: var(--text-primary) transparent transparent !important; } .Select--multi .Select-value { background-color: var(--bg-secondary) !important; border-color: var(--border-primary) !important; color: var(--text-primary) !important; } .Select--multi .Select-value-icon { border-color: var(--border-primary) !important; } .Select--multi .Select-value-icon:hover { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; } .Select-control, .Select.is-open > .Select-control, .Select.is-focused:not(.is-open) > .Select-control { background-color: var(--bg-primary) !important; border-color: var(--border-primary) !important; } .Select-menu-outer, .Select.is-open .Select-menu-outer { background-color: var(--bg-primary) !important; border-color: var(--border-primary) !important; } .Select--multi .Select-control, .Select--multi.is-open > .Select-control, .Select--multi.is-focused:not(.is-open) > .Select-control { background-color: var(--bg-primary) !important; } .Select-control, .Select-control:hover, .Select--single > .Select-control, .Select--multi > .Select-control { background-color: rgb(25, 25, 25) !important; } .Select-arrow-zone, .Select-clear-zone { background-color: transparent !important; } .Select-input > input, .Select--multi .Select-input > input { background-color: transparent !important; color: var(--text-primary) !important; } .Select.is-disabled > .Select-control { background-color: var(--bg-tertiary) !important; opacity: 0.6; } .dash-dropdown .Select-control, .dash-dropdown .Select.is-open > .Select-control, .dash-dropdown .Select.is-focused > .Select-control { background-color: rgb(25, 25, 25) !important; color: var(--text-primary) !important; } div[class*="Select"] .Select-control { background-color: rgb(25, 25, 25) !important; } .dash-dropdown-container .Select-control, .dash-dropdown-container .Select-menu-outer { background-color: var(--bg-primary) !important; } .Select-control * { background-color: transparent !important; } .Select-option, .Select-option.is-focused, .Select-option.is-selected { background-color: var(--bg-primary) !important; } .Select-option.is-focused:not(.is-selected) { background-color: var(--bg-hover) !important; } .Select-option.is-selected { background-color: var(--color-primary) !important; } .form-control.Select-input, .form-control .Select-control { background-color: transparent !important; } th:first-child, td:first-child { position: sticky !important; left: 0px; z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } .two-columns-sticky th:nth-child(1), .two-columns-sticky td:nth-child(1) { position: sticky !important; left: 0px; z-index: var(--z-sticky-2); white-space: nowrap; background-color: var(--bg-secondary); } .two-columns-sticky th:nth-child(2), .two-columns-sticky td:nth-child(2) { position: sticky !important; left: 20px; z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } .three-columns-sticky th:nth-child(1), .three-columns-sticky td:nth-child(1) { position: sticky !important; left: 0px; z-index: var(--z-sticky-3); white-space: nowrap; background-color: var(--bg-secondary); } .three-columns-sticky th:nth-child(2), .three-columns-sticky td:nth-child(2) { position: sticky !important; left: 25px; z-index: var(--z-sticky-2); white-space: nowrap; background-color: var(--bg-secondary); } .three-columns-sticky th:nth-child(3), .three-columns-sticky td:nth-child(3) { position: sticky !important; left: 50px; z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } .plus-col, .plus-col > button { width: 20px; min-width: 20px; max-width: 20px; text-align: center; padding: 0; } .remove-col, .remove-col > button { width: 25px; min-width: 25px; max-width: 25px; text-align: center; padding: 0; } th.plus-col, td.plus-col { position: sticky; left: 0; z-index: var(--z-sticky-2); background: var(--bg-secondary); } th.remove-col, td.remove-col { position: sticky; left: 25px; z-index: var(--z-sticky-1); background: var(--bg-secondary); } .dash-table-container .dash-spreadsheet-container { --accent: #0d6efd !important; --border: #3a3a3a !important; --text-color: #ffffff !important; --background-color: #1a1a1a !important; --hover: #2a2a2a !important; } .dash-table-container { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } .dash-spreadsheet-container { border: none !important; border-radius: 0 !important; overflow: hidden !important; } .dash-spreadsheet-inner { background-color: transparent !important; } .dash-spreadsheet-inner table { background-color: transparent !important; border-collapse: collapse !important; border-spacing: 0 !important; } .dash-spreadsheet .dash-header { background-color: #141414 !important; font-weight: 600 !important; } .dash-spreadsheet-inner th, .dash-header th, .dash-filter th { background-color: #141414 !important; color: #ffffff !important; font-weight: 600 !important; padding: 8px 10px !important; border: none !important; border-bottom: 1px solid #3a3a3a !important; border-radius: 0 !important; font-size: 11px !important; text-align: left !important; } .column-header-name { color: #ffffff !important; font-weight: 600 !important; } .dash-spreadsheet-inner td, .dash-cell-value, .dash-select-cell { background-color: transparent !important; color: #e0e0e0 !important; border: none !important; border-bottom: 1px solid #2a2a2a !important; border-radius: 0 !important; padding: 6px 10px !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.4 !important; transition: none !important; } .dash-cell-value { background-color: transparent !important; border: none !important; padding: 0 !important; } .dash-spreadsheet-inner tbody tr { background-color: #1a1a1a !important; } .dash-spreadsheet-inner tbody tr:nth-child(even) { background-color: #1d1d1d !important; } .dash-spreadsheet-inner tbody tr:hover { background-color: #252525 !important; } .dash-spreadsheet-inner tbody tr:hover td { background-color: transparent !important; transform: none !important; box-shadow: none !important; } .dash-spreadsheet td.focused { background-color: rgba(13, 110, 253, 0.15) !important; box-shadow: inset 0 0 0 1px #0d6efd !important; } .dash-spreadsheet td.cell--selected { background-color: rgba(13, 110, 253, 0.08) !important; } .dash-filter { background-color: #1a1a1a !important; } .dash-filter input { background-color: #1a1a1a !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; border-radius: 2px !important; padding: 4px 6px !important; font-size: 11px !important; } .dash-filter input:focus { border-color: #0d6efd !important; outline: none !important; } .dash-filter--case { background-color: #1a1a1a !important; } .previous-next-container { background-color: #1a1a1a !important; padding: 8px !important; border-top: 1px solid #3a3a3a !important; display: flex !important; align-items: center !important; gap: 4px !important; } .previous-page, .next-page, .first-page, .last-page, .page-number { border-radius: 3px !important; background: #252525 !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; padding: 4px 8px !important; height: 28px !important; box-sizing: border-box !important; font-size: 11px !important; font-weight: 400 !important; line-height: 20px !important; transition: background-color 0.15s ease !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; margin: 0 2px !important; } .page-number:hover, .previous-page:hover:not([disabled]), .next-page:hover:not([disabled]), .first-page:hover:not([disabled]), .last-page:hover:not([disabled]) { background: #2a2a2a !important; border-color: #444 !important; transform: none !important; box-shadow: none !important; } .previous-page[disabled], .next-page[disabled], .first-page[disabled], .last-page[disabled] { opacity: 0.5 !important; cursor: not-allowed !important; } .current-page-container::before, .current-page-container::after, .current-page-container input::before, .current-page-container input::after, .current-page-container *::before, .current-page-container *::after { content: none !important; display: none !important; } .current-page-container { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; background: transparent !important; height: 28px !important; line-height: 28px !important; margin: 0 2px !important; } .current-page-container > *:not(input) { display: none !important; } .current-page-container input { border-radius: 3px !important; background: #0d6efd !important; border: 1px solid #0d6efd !important; color: #ffffff !important; font-weight: 500 !important; padding: 4px 8px !important; width: 50px !important; height: 28px !important; box-sizing: border-box !important; text-align: center !important; font-size: 11px !important; line-height: 20px !important; transition: background-color 0.15s ease !important; box-shadow: none !important; position: relative !important; top: 0 !important; margin: 0 !important; vertical-align: middle !important; z-index: 1 !important; text-shadow: none !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; -webkit-text-fill-color: #ffffff !important; transform: translateY(0) !important; } .current-page-container input:hover, .current-page-container input:focus { background: #0a58ca !important; border-color: #0a58ca !important; box-shadow: none !important; transform: none !important; outline: none !important; } .sort { color: #0d6efd !important; font-weight: 600 !important; padding-left: 4px !important; font-size: 10px !important; } .sort.descending::after { content: ' ↓' !important; } .sort.ascending::after { content: ' ↑' !important; } .dash-spreadsheet-inner::-webkit-scrollbar, .dash-table-viewport::-webkit-scrollbar { width: 8px !important; height: 8px !important; } .dash-spreadsheet-inner::-webkit-scrollbar-track, .dash-table-viewport::-webkit-scrollbar-track { background: #1a1a1a !important; } .dash-spreadsheet-inner::-webkit-scrollbar-thumb, .dash-table-viewport::-webkit-scrollbar-thumb { background: #3a3a3a !important; border-radius: 2px !important; } .dash-spreadsheet-inner::-webkit-scrollbar-thumb:hover, .dash-table-viewport::-webkit-scrollbar-thumb:hover { background: #4a4a4a !important; } .dash-spreadsheet-inner .cell--editing { background-color: #1a1a1a !important; box-shadow: inset 0 0 0 1px #0d6efd !important; } .dash-spreadsheet-inner .cell--editing input { background-color: transparent !important; color: #ffffff !important; font-size: 11px !important; } .dash-dropdown { background-color: #1a1a1a !important; } .Select-control { background-color: #1a1a1a !important; border-color: #3a3a3a !important; } .Select-menu-outer { background-color: #1a1a1a !important; border-color: #3a3a3a !important; color: #ffffff !important; } div.dash-table-container * { background-color: inherit !important; color: inherit !important; } div.dash-table-container table, div.dash-table-container tbody, div.dash-table-container thead, div.dash-table-container tr { background-color: transparent !important; } .export { background-color: #252525 !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; border-radius: 3px !important; padding: 4px 8px !important; margin: 2px !important; cursor: pointer !important; font-size: 11px !important; } .export:hover { background-color: #2a2a2a !important; border-color: #444 !important; } .dash-spreadsheet-inner td, .dash-spreadsheet-inner th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; letter-spacing: normal !important; text-transform: none !important; } .dash-table-container { overflow-x: auto !important; width: 100% !important; } .dash-spreadsheet-container { overflow-x: auto !important; } .dash-table-container .dash-spreadsheet-inner { min-width: 100%; width: auto !important; } .dash-table-viewport { overflow-x: auto !important; } .col .dash-table-container, .col-md-6 .dash-table-container, .col-lg-6 .dash-table-container, [class*="col-"] .dash-table-container { max-width: 100%; overflow-x: auto !important; } .dash-spreadsheet-inner td:first-child, .dash-spreadsheet-inner th:first-child { background-color: #252525 !important; position: sticky !important; left: 0; z-index: 2; } .two-columns-sticky .dash-spreadsheet-inner td:nth-child(1), .two-columns-sticky .dash-spreadsheet-inner th:nth-child(1) { background-color: #252525 !important; position: sticky !important; left: 0; z-index: 3; } .two-columns-sticky .dash-spreadsheet-inner td:nth-child(2), .two-columns-sticky .dash-spreadsheet-inner th:nth-child(2) { background-color: #252525 !important; position: sticky !important; left: 31px; z-index: 2; } .three-columns-sticky .dash-spreadsheet-inner td:nth-child(1), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(1) { background-color: #252525 !important; position: sticky !important; left: 0; z-index: 4; } .three-columns-sticky .dash-spreadsheet-inner td:nth-child(2), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(2) { background-color: #252525 !important; position: sticky !important; left: 25px; z-index: 3; } .three-columns-sticky .dash-spreadsheet-inner td:nth-child(3), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(3) { background-color: #252525 !important; position: sticky !important; left: 50px; z-index: 2; } .dash-spreadsheet .dash-header th:first-child, .dash-spreadsheet .dash-header th:nth-child(2), .dash-spreadsheet .dash-header th:nth-child(3) { background-color: #141414 !important; } .dash-spreadsheet-inner tbody tr:hover td:first-child, .dash-spreadsheet-inner tbody tr:hover td:nth-child(2), .dash-spreadsheet-inner tbody tr:hover td:nth-child(3) { background-color: #2a2a2a !important; } .dash-spreadsheet-inner td:first-child .dash-cell-value, .dash-spreadsheet-inner td:nth-child(2) .dash-cell-value, .dash-spreadsheet-inner td:nth-child(3) .dash-cell-value { background-color: transparent !important; } .dash-spreadsheet-inner td:first-child::after, .dash-spreadsheet-inner th:first-child::after { content: ""; position: absolute; top: 0; right: -5px; bottom: 0; width: 5px; background: linear-gradient(to right, rgba(0,0,0,0.1), transparent); pointer-events: none; } .two-columns-sticky .dash-spreadsheet-inner td:nth-child(2)::after, .two-columns-sticky .dash-spreadsheet-inner th:nth-child(2)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(3)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(3)::after { content: ""; position: absolute; top: 0; right: -5px; bottom: 0; width: 5px; background: linear-gradient(to right, rgba(0,0,0,0.1), transparent); pointer-events: none; } .two-columns-sticky .dash-spreadsheet-inner td:nth-child(1)::after, .two-columns-sticky .dash-spreadsheet-inner th:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(2)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(2)::after { display: none; } .hover-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-card:hover { transform: scale(1.05); box-shadow: var(--shadow-hover); } .custom-card-shadow { box-shadow: var(--shadow-default); } .hover-link:hover { cursor: pointer; } .nav-tabs { border-bottom: none; background-color: rgba(0, 0, 0, 0.2); padding: var(--spacing-sm); border-radius: var(--radius-xl); display: inline-flex; gap: var(--spacing-xs); } .nav-tabs .nav-link { border: none; border-radius: var(--radius-lg); background-color: transparent; color: rgba(255, 255, 255, 0.7); padding: 10px 18px; transition: var(--transition-slow); font-size: var(--font-size-md); font-weight: 500; } .nav-tabs .nav-link:hover { background-color: var(--bg-hover); color: var(--text-primary); } .nav-tabs .nav-link.active { background-color: var(--color-primary); color: var(--text-primary); box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3); } .dash-tooltip { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-base); padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-base); box-shadow: var(--shadow-default); } .dash-loading { background-color: rgba(35, 35, 35, 0.9); color: var(--text-primary); } .dash-loading-spinner { border-color: var(--border-primary); border-top-color: var(--color-primary); } .DateInput_input { background-color: var(--bg-primary); color: var(--text-primary); font-size: inherit; height: 25px; border: 1px solid var(--border-primary); } .DateInput_input_1 { background-color: var(--bg-primary); color: var(--text-primary); font-size: inherit; height: 25px; border: 1px solid var(--border-primary); } .DateInput_input__focused { border-color: var(--border-focus); background-color: #2b2b2b; } .SingleDatePicker_picker { background-color: #1a1a1a; border: 1px solid var(--border-primary); border-radius: var(--radius-base); box-shadow: var(--shadow-lg); } .DateRangePicker_picker { background-color: #1a1a1a; border: 1px solid var(--border-primary); border-radius: var(--radius-base); box-shadow: var(--shadow-lg); } .DayPicker { background-color: #1a1a1a; } .DayPicker__horizontal { background-color: #1a1a1a; } .CalendarMonth { background-color: #1a1a1a; padding: 0; } .CalendarMonth_caption { color: var(--text-primary); background-color: #1a1a1a; font-weight: 600; font-size: var(--font-size-xl); padding: 10px 0; margin-bottom: 5px; } .DayPickerNavigation_button { background-color: transparent; border: 1px solid var(--border-primary); border-radius: var(--radius-sm); } .DayPickerNavigation_button:hover { background-color: var(--bg-hover); } .DayPickerNavigation_svg { fill: var(--text-primary); } .DayPicker_weekHeader { display: none !important; } .DayPicker_weekHeader_ul { display: none !important; } .DayPicker_weekHeader_li { display: none !important; } .CalendarMonth_table { background-color: #1a1a1a; margin: 0; margin-top: 5px; } .CalendarWeek { background-color: #1a1a1a; } .CalendarDay__default { background-color: #1a1a1a; color: var(--text-primary); border: 1px solid #2a2a2a; font-weight: 400; height: 35px; vertical-align: middle; } .CalendarDay__default:hover { background-color: #2a2a2a; color: var(--text-primary); border: 1px solid var(--border-primary); } .DayPicker_transitionContainer { background-color: #1a1a1a; padding-bottom: 10px; } .DayPickerKeyboardShortcuts_buttonReset { display: none !important; } .CalendarDay__today { background-color: #2a2a2a; color: var(--color-info-hover); font-weight: 600; } .CalendarDay__selected { background-color: var(--color-primary); color: var(--text-primary); border: 1px solid var(--color-primary); font-weight: 600; } .CalendarDay__selected:hover { background-color: var(--color-primary-hover); border: 1px solid var(--color-primary-hover); } .CalendarDay__selected_span { background-color: rgba(13, 110, 253, 0.2); color: var(--text-primary); border: 1px solid rgba(13, 110, 253, 0.3); } .CalendarDay__hovered_span { background-color: rgba(13, 110, 253, 0.1); border: 1px solid rgba(13, 110, 253, 0.2); } .CalendarDay__blocked_calendar { background-color: #1a1a1a; color: var(--border-primary); text-decoration: line-through; } .CalendarDay__blocked_out_of_range { background-color: #1a1a1a; color: #333; } .DateRangePickerInput { background-color: #1a1a1a; } .DateRangePicker { background-color: #1a1a1a; } .DayPicker__withBorder { background-color: #1a1a1a; box-shadow: none; } .SingleDatePicker, .SingleDatePickerInput { background-color: transparent; } div[class*="DayPicker"], div[class*="CalendarMonth"], div[class*="CalendarDay"] { background-color: #1a1a1a; } .CalendarMonthGrid { background-color: #1a1a1a; } .CalendarMonthGrid__horizontal { background-color: #1a1a1a; } .CalendarMonth tbody { background-color: #1a1a1a; } .CalendarMonth_table tbody tr:first-child { height: auto; min-height: 35px; } .modal-content { background-color: var(--bg-modal); border: 1px solid var(--border-primary); } .modal-header { background-color: var(--bg-modal-header); border-bottom: 1px solid var(--border-primary); color: var(--text-primary); } .modal-body { background-color: var(--bg-modal); color: var(--text-secondary); } .modal-footer { background-color: var(--bg-modal-header); border-top: 1px solid var(--border-primary); } #close-learn-more { background-color: var(--border-primary); border-color: var(--border-primary); } #close-learn-more:hover { background-color: #555; border-color: #555; } .learn-more-content { font-size: var(--font-size-xl); line-height: 1.6; color: var(--text-secondary); } .learn-more-content h5 { color: var(--color-primary-light); font-weight: 600; border-bottom: 2px solid var(--border-primary); padding-bottom: var(--spacing-sm); } .learn-more-content h6 { color: #ffcc66; font-size: 18px; margin-top: var(--spacing-xl); } .learn-more-content p { color: var(--text-tertiary); margin-bottom: 15px; } .learn-more-content ul { margin-left: var(--spacing-xl); margin-bottom: 15px; } .learn-more-content li { margin-bottom: var(--spacing-sm); color: var(--text-tertiary); } .learn-more-content strong { color: var(--color-warning-hover); font-weight: 600; } #learn-more-button { border-color: var(--color-primary-light); color: var(--color-primary-light); font-weight: 500; transition: var(--transition-slow); } #learn-more-button:hover { background-color: var(--color-primary-light); color: var(--bg-modal-header); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 179, 255, 0.4); } .modal-body::-webkit-scrollbar { width: 10px; } .modal-body::-webkit-scrollbar-track { background: var(--bg-modal-header); } .modal-body::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 5px; } .modal-body::-webkit-scrollbar-thumb:hover { background: #555; } .dash-spreadsheet-container::-webkit-scrollbar, .dash-spreadsheet-inner::-webkit-scrollbar { width: 8px; height: 8px; } .dash-spreadsheet-container::-webkit-scrollbar-track, .dash-spreadsheet-inner::-webkit-scrollbar-track { background-color: var(--bg-primary); } .dash-spreadsheet-container::-webkit-scrollbar-thumb, .dash-spreadsheet-inner::-webkit-scrollbar-thumb { background-color: var(--border-secondary); border-radius: var(--radius-base); } .dash-spreadsheet-container::-webkit-scrollbar-thumb:hover, .dash-spreadsheet-inner::-webkit-scrollbar-thumb:hover { background-color: var(--border-tertiary); } .table tbody td { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--font-size-base); color: var(--text-primary); padding: var(--spacing-sm) var(--spacing-md); vertical-align: middle; } @media (min-width: 1px) { .table tbody td { font-size: var(--font-size-xs); } } @media (min-width: 768px) { .table tbody td { font-size: var(--font-size-sm); } } @media (min-width: 992px) { .table tbody td { font-size: var(--font-size-base); } } .table thead th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--font-size-md); font-weight: 600; color: var(--text-primary); letter-spacing: 0.5px; padding: var(--spacing-md) var(--spacing-md); vertical-align: middle; border-bottom: 2px solid var(--border-primary); } .table thead th { background-color: var(--bg-secondary); position: relative; } .table tbody tr:hover { background-color: var(--bg-hover) !important; transition: var(--transition-default); } .table tbody tr:hover td { color: var(--text-primary); } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02); } .table-striped tbody tr:hover { background-color: var(--bg-hover) !important; } .table-bordered { border: 1px solid var(--border-primary); } .table-bordered td, .table-bordered th { border: 1px solid var(--border-primary); } .table-sm td, .table-sm th { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-sm); } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive::-webkit-scrollbar { height: 8px; } .table-responsive::-webkit-scrollbar-track { background-color: var(--bg-primary); } .table-responsive::-webkit-scrollbar-thumb { background-color: var(--border-secondary); border-radius: var(--radius-base); } .table-responsive::-webkit-scrollbar-thumb:hover { background-color: var(--border-tertiary); } div[class*="dash-table"] .table tbody td, div[class*="dash-bootstrap"] .table tbody td { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: var(--font-size-base); } div[class*="dash-table"] .table thead th, div[class*="dash-bootstrap"] .table thead th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: var(--font-size-md); font-weight: 600; } .table-font-xs tbody td { font-size: var(--font-size-xs) !important; } .table-font-sm tbody td { font-size: var(--font-size-sm) !important; } .table-font-md tbody td { font-size: var(--font-size-md) !important; } .table-font-lg tbody td { font-size: var(--font-size-lg) !important; } .table-header-xs thead th { font-size: var(--font-size-sm) !important; } .table-header-sm thead th { font-size: var(--font-size-base) !important; } .table-header-md thead th { font-size: var(--font-size-md) !important; } .table-header-lg thead th { font-size: var(--font-size-lg) !important; } .table-header-xl thead th { font-size: var(--font-size-xl) !important; } .table .text-left { text-align: left !important; } .table .text-center { text-align: center !important; } .table .text-right { text-align: right !important; } .table .align-top { vertical-align: top !important; } .table .align-middle { vertical-align: middle !important; } .table .align-bottom { vertical-align: bottom !important; } .table .cell-value-positive, .table .text-success { color: var(--value-positive); font-weight: 500; } .table .cell-value-negative, .table .text-danger { color: var(--value-negative); font-weight: 500; }
/* 11_custom.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700&display=swap'); :root { --cream: #f7f4ed; --offwhite: #fcfbf8; --charcoal: #1c1c1c; --ink: #1c1c1c; --muted: #5f5f5d; --quiet: #a09f9b; --border-soft: #eceae4; --border: #eceae4; --border-strong:rgba(28,28,28,0.35); --border-int: rgba(28,28,28,0.4); --accent-coral: #f4a27a; --accent-warm: #f7c49a; --accent-coral-strong: #e8885a; --accent-amber: #b96b3a; --p-anth: #cc785c; --p-oai: #10a37f; --p-goog: #4285f4; --p-mistral: #fa520f; --p-xai: #1c1c1c; --p-meta: #1877f2; --p-deepseek: #4d6bfe; --p-default: #5f5f5d; --good: #21a056; --warn: #e8885a; --danger: #c0392b; --info: #4285f4; --shadow-1: rgba(28,28,28,0.06) 0 1px 0, rgba(28,28,28,0.04) 0 4px 12px; --shadow-2: rgba(28,28,28,0.08) 0 8px 24px, rgba(28,28,28,0.04) 0 1px 0; --shadow-strong:rgba(28,28,28,0.12) 0 14px 32px; --shadow-btn: rgba(255,255,255,0.18) 0 0.5px 0 0 inset, rgba(0,0,0,0.20) 0 0 0 0.5px inset, rgba(0,0,0,0.05) 0 1px 2px 0; --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 22px; --r-pill: 9999px; --font: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --fs-display: clamp(36px, 6vw, 60px); --fs-h1: clamp(32px, 5vw, 48px); --fs-h2: clamp(24px, 3.5vw, 36px); --fs-h3: 20px; --fs-h4: 17px; --fs-h5: 15px; --fs-h6: 13px; --fs-body: 15px; --fs-small: 13px; --fs-tiny: 11px; --fs-eyebrow: 12px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px; --s-10: 96px; --t-fast: 0.15s ease; --t-norm: 0.25s ease; --t-slow: 0.4s cubic-bezier(0.21,0.61,0.35,1); } @media (max-width: 767.98px) { :root { --fs-h3: 22px; --fs-h4: 18px; --fs-h5: 16px; --fs-h6: 14px; --fs-body: 16px; --fs-small: 14px; --fs-tiny: 12px; --fs-eyebrow: 12px; } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cream); color: var(--charcoal); font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font); color: var(--charcoal); margin: 0; font-weight: 600; letter-spacing: -0.4px; line-height: 1.15; } h1, .h1 { font-size: var(--fs-h1); letter-spacing: -1.2px; } h2, .h2 { font-size: var(--fs-h2); letter-spacing: -1px; } h3, .h3 { font-size: var(--fs-h3); letter-spacing: -0.4px; } h4, .h4 { font-size: var(--fs-h4); letter-spacing: -0.3px; } h5, .h5 { font-size: var(--fs-h5); letter-spacing: -0.2px; font-weight: 600; } h6, .h6 { font-size: var(--fs-h6); letter-spacing: 0; font-weight: 600; } em, i { font-style: italic; font-size: inherit !important; font-weight: inherit; line-height: inherit; color: inherit; } strong, b { font-size: inherit !important; } p { margin: 0; font-size: var(--fs-body); line-height: 1.6; } small, .small { font-size: var(--fs-small); } a { color: var(--charcoal); text-decoration: none; transition: opacity var(--t-fast); } a:hover { opacity: 0.7; color: var(--charcoal); } ::selection { background: var(--accent-coral); color: var(--charcoal); } hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--s-6) 0; opacity: 1; } .text-muted { color: var(--muted) !important; } .text-quiet { color: var(--quiet) !important; } .text-light { color: var(--cream) !important; } .text-warning { color: var(--accent-coral-strong) !important; } .text-danger { color: var(--danger) !important; } .text-success { color: var(--good) !important; } .fst-italic { font-style: italic; } .container, .container-fluid { max-width: 1160px; margin: 0 auto; padding: 0 var(--s-6); } .container-fluid { max-width: 100%; } main, .app-main { padding: var(--s-8) 0 var(--s-10); } .app-section-label { font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .app-eyebrow { display: inline-block; font-size: var(--fs-small); font-weight: 400; color: var(--muted); letter-spacing: 0.03em; border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 4px 14px; background: rgba(252,251,248,0.7); } .app-divider { display: flex; align-items: center; gap: 12px; margin: var(--s-6) 0 14px; } .app-divider::before, .app-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); } .app-divider-label { font-size: var(--fs-eyebrow); font-weight: 500; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } .btn { font-family: var(--font); font-size: var(--fs-small); font-weight: 500; padding: 8px 16px; border-radius: var(--r-sm); border: 1px solid transparent; transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); box-shadow: none; line-height: 1.2; } .btn:hover { opacity: 0.85; transform: none; box-shadow: none; } .btn:active { opacity: 0.95; } .btn:focus, .btn:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 2px; box-shadow: none; } .btn-primary, .btn-danger, .btn-success, .btn-info { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); box-shadow: var(--shadow-btn); } .btn-primary:hover, .btn-danger:hover, .btn-success:hover, .btn-info:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); opacity: 0.86; } .btn-secondary { background: var(--offwhite); color: var(--charcoal); border-color: var(--border-soft); } .btn-secondary:hover { background: var(--cream); color: var(--charcoal); border-color: var(--border-strong); } .btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-outline-success, .btn-outline-info, .btn-outline-warning { background: transparent; color: var(--charcoal); border-color: var(--border-int); } .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-danger:hover, .btn-outline-success:hover, .btn-outline-info:hover, .btn-outline-warning:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); } .btn-link { background: transparent; color: var(--charcoal); border-color: transparent; text-decoration: underline; text-underline-offset: 2px; box-shadow: none; padding: 4px 8px; } .btn-link:hover { background: transparent; opacity: 0.65; text-decoration: underline; } .btn-sm { padding: 6px 12px; font-size: var(--fs-tiny); } .btn-lg { padding: 12px 22px; font-size: var(--fs-body); border-radius: var(--r-sm); } .btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; } .app-btn-pill { border-radius: var(--r-pill) !important; padding: 8px 16px !important; } .app-cta-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--charcoal); color: var(--cream); font-family: var(--font); font-size: var(--fs-body); font-weight: 400; padding: 10px 22px; border-radius: var(--r-sm); border: 0; cursor: pointer; text-decoration: none; box-shadow: var(--shadow-btn); transition: opacity var(--t-fast); } .app-cta-primary:hover { opacity: 0.85; color: var(--cream); } .app-cta-ghost { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--charcoal); font-family: var(--font); font-size: var(--fs-body); font-weight: 400; padding: 10px 22px; border-radius: var(--r-sm); border: 1px solid var(--border-int); cursor: pointer; text-decoration: none; transition: opacity var(--t-fast); } .app-cta-ghost:hover { opacity: 0.7; color: var(--charcoal); } input, textarea, select, input.form-control, textarea.form-control, select.form-control, input.form-select, select.form-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], .form-control, .form-select, .form-control:valid, .form-select:valid { font-family: var(--font); font-size: var(--fs-body); color: var(--charcoal); background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 10px 14px; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); line-height: 1.4; } input::placeholder, textarea::placeholder, .form-control::placeholder, .form-select::placeholder { color: var(--quiet); } input:focus, textarea:focus, select:focus, input.form-control:focus, textarea.form-control:focus, select.form-control:focus, .form-control:focus, .form-select:focus, .form-control:focus-visible, .form-select:focus-visible { border-color: var(--charcoal); background: var(--offwhite); box-shadow: 0 0 0 3px rgba(28,28,28,0.08); outline: 0; color: var(--charcoal); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, input:-internal-autofill-selected, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--offwhite) inset !important; box-shadow: 0 0 0 1000px var(--offwhite) inset !important; -webkit-text-fill-color: var(--charcoal) !important; caret-color: var(--charcoal); transition: background-color 9999s ease-in-out 0s; border-color: var(--border-soft) !important; } textarea, .form-control[type="textarea"] { line-height: 1.5; } .form-label, label { font-family: var(--font); font-size: var(--fs-small); font-weight: 500; color: var(--charcoal); margin-bottom: 6px; } .input-group { background: transparent; } .input-group > .form-control { border-right: 0; } .input-group > .btn { border: 1px solid var(--border-soft); border-left: 0; background: var(--offwhite); color: var(--muted); border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .btn:hover { background: var(--cream); color: var(--charcoal); opacity: 1; } input.form-check-input { width: 16px; height: 16px; border: 1px solid var(--border-int); background-color: var(--offwhite); cursor: pointer; flex-shrink: 0; } input.form-check-input:checked { background-color: var(--charcoal); border-color: var(--charcoal); } input.form-check-input:focus { border-color: var(--charcoal); box-shadow: 0 0 0 3px rgba(28,28,28,0.08); } .form-check:not(.form-check-inline) { display: flex; align-items: center; gap: 8px; padding-left: 0; margin-bottom: 0; } .form-check:not(.form-check-inline) .form-check-input { float: none; margin: 0; } .form-check-label { font-size: var(--fs-small); color: var(--charcoal); cursor: pointer; line-height: 1.4; } .form-check-label a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .form-check-label a:hover { color: var(--charcoal); } .form-switch .form-check-input { width: 32px; height: 18px; background-color: var(--cream); border: 1px solid var(--border-int); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231c1c1c'/%3e%3c/svg%3e"); } .form-switch .form-check-input:checked { background-color: var(--charcoal); border-color: var(--charcoal); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f7f4ed'/%3e%3c/svg%3e"); } .card { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); color: var(--charcoal); } .card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); transform: none; } .card-header { background: transparent; border-bottom: 1px solid var(--border-soft); padding: 16px 20px; font-family: var(--font); font-size: var(--fs-small); font-weight: 600; color: var(--charcoal); border-radius: var(--r-lg) var(--r-lg) 0 0; } .card-body { padding: 20px; color: var(--charcoal); } .card-footer { background: transparent; border-top: 1px solid var(--border-soft); padding: 14px 20px; border-radius: 0 0 var(--r-lg) var(--r-lg); } .response-card { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: none; transition: border-color var(--t-fast); } .response-card:hover { border-color: var(--border-strong); transform: none; box-shadow: none; } .response-card .card-header { font-weight: 500; } .app-navbar { background: var(--cream) !important; border-bottom: 1px solid var(--border-soft); box-shadow: none; padding: 10px 0 !important; position: sticky; top: 0; z-index: 1000; } .app-navbar .container { max-width: 1160px; } .app-navbar-inner { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 24px; width: 100%; flex-wrap: wrap; } .app-nav-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 0 auto; } .app-nav-center{ display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; } .app-nav-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .app-nav-slot-left { width: 36px; display: flex; align-items: center; justify-content: center; } @media (min-width: 992px) { .app-navbar-inner { position: relative; } .app-navbar.navbar .app-nav-collapse { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 16px; } .app-navbar.navbar .app-nav-collapse .app-nav-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; } .app-navbar.navbar .app-nav-collapse .app-nav-right { margin-left: auto; } } @media (max-width: 991.98px) { .app-navbar.navbar .app-nav-collapse.show, .app-navbar.navbar .app-nav-collapse.collapsing { display: flex; flex-direction: column; align-items: stretch; flex-basis: 100%; gap: 12px; padding-top: 12px; } .app-navbar.navbar .app-nav-collapse .app-nav-center { justify-content: flex-start; } .app-navbar.navbar .app-nav-collapse .app-nav-right { justify-content: flex-start; flex-wrap: wrap; } } .app-nav-conv-btn { color: var(--charcoal) !important; border-radius: var(--r-pill) !important; border: 0 !important; background: transparent !important; padding: 6px 10px !important; font-size: 18px !important; box-shadow: none !important; } .app-nav-conv-btn:hover { background: var(--offwhite) !important; opacity: 1 !important; color: var(--charcoal) !important; } .app-navbar-brand, .navbar-brand.app-navbar-brand { display: inline-flex; align-items: center; margin: 0; padding: 0; color: var(--charcoal) !important; font-family: var(--font); font-weight: 600; font-size: 16px; text-decoration: none; letter-spacing: -0.3px; } .app-brand { display: inline-flex; align-items: center; gap: 0; } .app-brand-mark { display: inline-flex; align-items: center; background: var(--charcoal); color: var(--cream); border-radius: var(--r-xs); padding: 1px 7px; font-size: 13px; font-weight: 600; margin-right: 6px; letter-spacing: 0; line-height: 1.4; } .app-brand-word { font-weight: 600; letter-spacing: -0.3px; color: var(--charcoal); } .app-navbar-tabs { margin: 0 !important; padding: 4px !important; list-style: none; } .app-navbar-tabs .nav-link { color: var(--muted) !important; font-size: var(--fs-small); font-weight: 500; padding: 6px 14px !important; border-radius: var(--r-pill); transition: color var(--t-fast), background var(--t-fast); } .app-navbar-tabs .nav-link:hover { color: var(--charcoal) !important; background: transparent; opacity: 1; } .app-navbar-tabs .nav-link.active { background: var(--charcoal); color: var(--cream) !important; } .app-nav-link { font-size: var(--fs-small); font-weight: 500; color: var(--charcoal); padding: 6px 12px; border-radius: var(--r-pill); text-decoration: none; transition: opacity var(--t-fast); } .app-nav-link:hover { color: var(--charcoal); opacity: 0.65; } .app-nav-cta { padding: 7px 16px !important; font-size: var(--fs-small) !important; font-weight: 500 !important; } .app-nav-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--charcoal); background: var(--offwhite); border: 1px solid var(--border-soft); text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast); } .app-nav-icon-link:hover { background: var(--cream); border-color: var(--border-strong); color: var(--charcoal); } .app-pill-warn { background: linear-gradient(135deg, rgba(244,162,122,0.18) 0%, rgba(247,196,154,0.18) 100%); border-color: rgba(244,162,122,0.45); color: var(--accent-amber); } .app-pill-warn:hover { color: var(--accent-amber); opacity: 0.85; } .app-nav-toggler { border: 1px solid var(--border-soft) !important; background: var(--offwhite) !important; padding: 6px 10px !important; } .app-nav-toggler:focus { box-shadow: 0 0 0 3px rgba(28,28,28,0.08); } @media (max-width: 991.98px) { .app-navbar.navbar .app-nav-collapse { flex-basis: 100%; } } .navbar { background: var(--cream) !important; border-bottom: 1px solid var(--border-soft); box-shadow: none; padding: 12px 0; position: sticky; top: 0; z-index: 1000; } .navbar-dark, .navbar.bg-dark { background: var(--cream) !important; } .navbar .container, .navbar .container-fluid { max-width: 1160px; } .navbar-brand { font-family: var(--font); font-size: var(--fs-h5); font-weight: 600; color: var(--charcoal) !important; letter-spacing: -0.3px; display: inline-flex; align-items: center; gap: 10px; } .navbar-brand img { border-radius: 6px; } .navbar-toggler { border: 1px solid var(--border-soft); background: var(--offwhite); padding: 6px 10px; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231c1c1c' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); width: 22px; height: 22px; } .nav-link { font-family: var(--font); font-size: var(--fs-small); font-weight: 500; color: var(--muted) !important; padding: 8px 14px !important; border-radius: var(--r-pill); transition: color var(--t-fast), background var(--t-fast); } .nav-link:hover { color: var(--charcoal) !important; background: var(--offwhite); opacity: 1; } .nav-link.text-light, .navbar-dark .nav-link { color: var(--muted) !important; } .nav-link.text-warning { color: var(--accent-coral-strong) !important; } #conversation-modal-btn { color: var(--charcoal) !important; border-radius: var(--r-pill); padding: 6px 10px !important; } #conversation-modal-btn:hover { background: var(--offwhite); opacity: 1; } .navbar-collapse { padding-top: 4px; } .nav-tabs { border-bottom: 1px solid var(--border-soft); gap: 4px; } .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted) !important; background: transparent; padding: 10px 14px !important; font-weight: 500; font-size: var(--fs-small); } .nav-tabs .nav-link:hover { color: var(--charcoal) !important; background: transparent; border-bottom-color: var(--border-int); } .nav-tabs .nav-link.active { color: var(--charcoal) !important; background: transparent; border-bottom: 2px solid var(--charcoal); } .app-tabs-pill.nav-tabs { background: var(--cream); border: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 5px; display: flex; width: fit-content; flex-wrap: wrap; gap: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); } .app-tabs-pill.nav-tabs .nav-link { border: 0 !important; border-bottom: 0 !important; border-radius: var(--r-pill) !important; color: var(--muted) !important; background: transparent !important; padding: 8px 18px !important; margin: 0 !important; font-weight: 500; font-size: var(--fs-small); transition: color .18s ease, background-color .18s ease; } .app-tabs-pill.nav-tabs .nav-link:hover { color: var(--charcoal) !important; background: transparent !important; border-bottom-color: transparent !important; } .app-tabs-pill.nav-tabs .nav-link.active { color: var(--cream) !important; background: var(--charcoal) !important; border-bottom: 0 !important; } .app-tabs-pill.nav-tabs .nav-link.disabled { color: var(--quiet) !important; opacity: 0.55; cursor: not-allowed; } .nav-pills { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 4px; display: inline-flex; gap: 4px; } .nav-pills .nav-link { border-radius: var(--r-pill); padding: 6px 14px !important; font-size: var(--fs-small); color: var(--muted) !important; background: transparent; } .nav-pills .nav-link.active { background: var(--charcoal); color: var(--cream) !important; } .modal-content, .offcanvas { background: var(--offwhite); color: var(--charcoal); border: 1px solid var(--border-soft); border-radius: var(--r-xl); box-shadow: var(--shadow-strong); } .offcanvas { border-radius: 0; } .modal-header, .offcanvas-header { background: transparent; background-color: transparent; color: var(--charcoal); border-bottom: 1px solid var(--border-soft); padding: 18px 22px; } .modal-title, .offcanvas-title { font-family: var(--font); font-size: var(--fs-h4) !important; font-weight: 600; color: var(--charcoal); letter-spacing: -0.3px; } .modal-body, .offcanvas-body { background: transparent; background-color: transparent; color: var(--charcoal); padding: 22px; } .modal-footer { background: transparent; background-color: transparent; color: var(--charcoal); border-top: 1px solid var(--border-soft); padding: 16px 22px; } .btn-close { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231c1c1c'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); opacity: 0.6; } .btn-close:hover { opacity: 1; } .modal-backdrop, .offcanvas-backdrop { background-color: rgba(28,28,28,0.55); } .modal-backdrop.show, .offcanvas-backdrop.show { opacity: 1; } .alert { background: var(--offwhite); border: 1px solid var(--border-soft); color: var(--charcoal); border-radius: var(--r-md); padding: 14px 16px; box-shadow: none; font-size: var(--fs-small); } .alert-warning { background: linear-gradient(135deg, rgba(244,162,122,0.12) 0%, rgba(247,196,154,0.12) 100%); border-color: rgba(244,162,122,0.35); color: var(--charcoal); } .alert-warning .alert-link { color: var(--accent-amber); font-weight: 600; } .alert-danger { background: rgba(192,57,43,0.06); border-color: rgba(192,57,43,0.25); color: var(--danger); } .alert-success { background: rgba(33,160,86,0.08); border-color: rgba(33,160,86,0.30); color: var(--good); } .alert-info { background: rgba(66,133,244,0.06); border-color: rgba(66,133,244,0.20); color: var(--charcoal); } .badge { font-family: var(--font); font-size: var(--fs-tiny); font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); line-height: 1.3; letter-spacing: 0; } .badge.bg-primary, .badge.bg-secondary, .badge.bg-info { background: var(--charcoal) !important; color: var(--cream); } .badge.bg-success { background: var(--good) !important; color: var(--cream); } .badge.bg-warning { background: var(--accent-coral) !important; color: var(--charcoal); } .badge.bg-danger { background: var(--danger) !important; color: var(--cream); } .model-badge { font-family: var(--font); font-size: var(--fs-tiny); font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); color: #fff; letter-spacing: 0; line-height: 1.3; } .rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; font-size: 10px; font-weight: 700; background: var(--cream); color: var(--charcoal); border: 1px solid var(--border-soft); border-radius: var(--r-xs); } .rank-badge.rank-1 { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); } .rank-badge.rank-2 { background: var(--offwhite); color: var(--charcoal); } .rank-badge.rank-3 { background: var(--cream); color: var(--muted); } .rank-badge.rank-other { background: var(--cream); color: var(--quiet); } .accordion { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: none; overflow: hidden; } .accordion-item { background: transparent; border: 0; border-top: 1px solid var(--border-soft); } .accordion-item:first-child { border-top: 0; } .accordion-button { background: transparent !important; color: var(--charcoal) !important; font-family: var(--font); font-size: var(--fs-small); font-weight: 600; padding: 14px 18px; box-shadow: none; } .accordion-button.collapsed { background: transparent !important; color: var(--charcoal) !important; } .accordion-button:not(.collapsed) { background: var(--cream) !important; color: var(--charcoal) !important; box-shadow: none; } .accordion-button:focus { box-shadow: 0 0 0 3px rgba(28,28,28,0.08); border-color: var(--charcoal); } .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231c1c1c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3e%3c/svg%3e"); filter: none !important; } .accordion-button.collapsed::after { filter: none; } .accordion-body { padding: 12px 18px 18px; color: var(--charcoal); font-size: var(--fs-small); } .dropdown-menu { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 6px; font-size: var(--fs-small); } .dropdown-item { color: var(--charcoal); padding: 8px 12px; border-radius: var(--r-sm); } .dropdown-item:hover, .dropdown-item:focus { background: var(--cream); color: var(--charcoal); } .tooltip-inner { background: var(--charcoal); color: var(--cream); font-family: var(--font); font-size: var(--fs-tiny); padding: 6px 10px; border-radius: var(--r-sm); max-width: 280px; } .tooltip .tooltip-arrow::before { border-top-color: var(--charcoal) !important; border-bottom-color: var(--charcoal) !important; } .table { color: var(--charcoal); background: transparent; --bs-table-bg: transparent; --bs-table-color: var(--charcoal); } .table > :not(caption) > * > * { background-color: transparent; color: var(--charcoal); } .table th, .table td { border-color: var(--border-soft); padding: 12px 14px; font-size: var(--fs-small); vertical-align: middle; } .table thead th { background-color: var(--cream) !important; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-tiny); border-bottom: 1px solid var(--border-soft); } .table-hover > tbody > tr:hover > * { background: var(--cream); color: var(--charcoal); } .table-striped { --bs-table-striped-bg: var(--offwhite); --bs-table-striped-color: var(--charcoal); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--offwhite); color: var(--charcoal); } table th:first-child, table td:first-child { position: static !important; background-color: transparent !important; white-space: normal; z-index: auto; } .dash-spreadsheet-inner tbody tr { background-color: var(--offwhite) !important; } .dash-spreadsheet-inner tbody tr:nth-child(even) { background-color: var(--cream) !important; } .dash-spreadsheet-inner td, .dash-spreadsheet-inner .dash-cell-value, .dash-spreadsheet-inner .dash-select-cell { color: var(--charcoal) !important; background-color: transparent !important; border-bottom: 1px solid var(--border-soft) !important; } .dash-spreadsheet-inner td:first-child, .dash-spreadsheet-inner th:first-child { background-color: transparent !important; position: static !important; } .dash-spreadsheet-inner tbody tr:hover { background-color: var(--border-soft) !important; } .dash-spreadsheet-inner tbody tr:hover td:first-child, .dash-spreadsheet-inner tbody tr:hover td:nth-child(2), .dash-spreadsheet-inner tbody tr:hover td:nth-child(3) { background-color: transparent !important; } .dash-spreadsheet .dash-header, .dash-spreadsheet-inner th, .dash-header th, .dash-filter th, .dash-spreadsheet .dash-header th:first-child, .dash-spreadsheet .dash-header th:nth-child(2), .dash-spreadsheet .dash-header th:nth-child(3) { background-color: var(--cream) !important; color: var(--charcoal) !important; border-bottom: 1px solid var(--border-soft) !important; } .dash-spreadsheet-inner .column-header-name, .dash-spreadsheet-inner .sort { color: var(--charcoal) !important; } .dash-spreadsheet-inner td:first-child::after, .dash-spreadsheet-inner th:first-child::after { display: none !important; } .toast { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-md); box-shadow: var(--shadow-2); color: var(--charcoal); } .app-hero { margin: 8px 0 32px; } .app-hero h1 { font-size: 48px; font-weight: 500; line-height: 1.0; letter-spacing: -1.4px; } .app-hero h1 em { font-style: italic; font-weight: 400; } .app-hero h1 em::after { content: ''; display: block; margin-top: 6px; height: 3px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent-coral), var(--accent-warm)); opacity: 0.7; width: min(220px, 60%); } .app-hero .sub { font-size: var(--fs-body); color: var(--muted); margin-top: 14px; max-width: 560px; line-height: 1.55; } .app-panel { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: 20px 24px; margin-bottom: 14px; box-shadow: var(--shadow-1); } .app-panel-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .app-panel-label { font-size: var(--fs-small); font-weight: 600; color: var(--charcoal); } .app-panel-label .meta { font-weight: 400; color: var(--muted); margin-left: 6px; } #open-settings-from-card { white-space: nowrap; flex-shrink: 0; } #quick-model-selector { background: var(--offwhite) !important; border: 1px solid var(--border-soft) !important; border-radius: var(--r-xl) !important; padding: 18px 22px !important; margin-bottom: 14px !important; box-shadow: var(--shadow-1); } .quick-provider-btn, .quick-tier-btn { border-radius: var(--r-pill) !important; padding: 6px 14px !important; font-size: var(--fs-tiny) !important; font-weight: 500 !important; box-shadow: none !important; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .quick-provider-btn.btn-outline-primary, .quick-provider-btn.btn-outline-secondary, .quick-tier-btn.btn-outline-secondary { background: var(--cream); } .quick-tier-btn.btn-secondary, .quick-tier-btn.btn-secondary:not(:disabled):not(.disabled):active, .quick-tier-btn.btn-secondary:focus { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); } .quick-tier-btn.btn-secondary:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); opacity: 0.88; } .quick-provider-btn:hover, .quick-tier-btn.btn-outline-secondary:hover { border-color: var(--border-strong); opacity: 0.85; } .cv-switch-row { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .model-badge-container { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; background: var(--cream); border: 1px solid var(--border-soft); border-radius: var(--r-pill); margin: 0 6px 6px 0; } .model-badge-container .model-badge { border-radius: var(--r-pill); padding: 3px 9px; } .remove-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(28,28,28,0.06); color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .remove-btn:hover { background: var(--charcoal); color: var(--cream); } .app-board { display: flex; flex-direction: column; gap: 0; padding-bottom: var(--s-9); } .app-section-head { display: flex; align-items: end; justify-content: space-between; margin: 56px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); } .app-section-title { font-size: var(--fs-h5); font-weight: 500; letter-spacing: -0.4px; color: var(--charcoal); } .app-section-link { font-size: var(--fs-small); font-weight: 500; color: var(--charcoal); text-decoration: underline; text-underline-offset: 2px; } .app-panel-wrap { margin-bottom: 14px; } .app-ask { background: var(--charcoal); color: var(--cream); border-radius: var(--r-xl); padding: 22px 24px; box-shadow: var(--shadow-strong); margin-bottom: 14px; } .app-ask textarea, .app-ask .form-control, .app-ask .app-ask-textarea { background: transparent !important; border: 0 !important; color: var(--cream) !important; font-family: var(--font); font-size: var(--fs-h5) !important; font-weight: 400; line-height: 1.4; padding: 4px 0 !important; resize: none !important; min-height: 80px; width: 100%; } .app-ask-attachments:empty { display: none; } .app-ask-attachments { margin: 8px 0 0; } .app-ask-attachments .badge, .app-ask-attachments img, .app-ask-attachments > * { display: inline-flex; align-items: center; margin: 6px 6px 0 0; } .app-ask textarea:focus, .app-ask .form-control:focus { background: transparent; border: 0; outline: 0; box-shadow: none; color: var(--cream); } .app-ask textarea::placeholder, .app-ask .form-control::placeholder { color: rgba(247,244,237,0.4); } .app-ask-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(247,244,237,0.10); } .app-ask .btn-outline-secondary, .app-ask .btn-outline-success { background: rgba(247,244,237,0.06); color: rgba(247,244,237,0.85); border: 1px solid rgba(247,244,237,0.18); border-radius: var(--r-pill) !important; } .app-ask .btn-outline-secondary:hover, .app-ask .btn-outline-success:hover { background: rgba(247,244,237,0.14); color: var(--cream); border-color: rgba(247,244,237,0.30); } .app-ask .btn-danger, .app-ask .btn-primary { background: var(--cream); color: var(--charcoal); border-color: var(--cream); border-radius: var(--r-pill) !important; padding: 8px 18px !important; font-weight: 600; } .app-ask .btn-danger:hover, .app-ask .btn-primary:hover { background: #fff; color: var(--charcoal); } .app-ask .form-select { background: rgba(247,244,237,0.06); border: 1px solid rgba(247,244,237,0.18); color: var(--cream); border-radius: var(--r-pill); padding: 6px 28px 6px 12px; font-size: var(--fs-tiny); } .app-responses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .app-response { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 16px 18px; transition: border-color var(--t-fast); } .app-response:hover { border-color: var(--border-strong); } .app-consensus { margin-top: 12px; background: linear-gradient(135deg, var(--cream) 0%, var(--offwhite) 100%); border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: 18px 22px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; } .app-consensus-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--charcoal); color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 18px; } .app-consensus-text { font-size: var(--fs-small); line-height: 1.45; } .app-consensus-text strong { font-weight: 600; } .app-consensus-text .sub { color: var(--muted); margin-top: 2px; display: block; } .app-consensus-score { text-align: right; } .app-consensus-score .num { font-size: 26px; font-weight: 500; letter-spacing: -0.6px; } .app-consensus-score .lbl { font-size: var(--fs-tiny); color: var(--muted); margin-top: 2px; } .app-question { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: 18px 22px; margin-bottom: 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; } .app-question-tag { display: inline-block; font-size: 10px; font-weight: 700; color: var(--charcoal); padding: 3px 10px; background: var(--cream); border-radius: var(--r-pill); border: 1px solid var(--border-soft); letter-spacing: 0.04em; text-transform: uppercase; } .app-question-text { font-size: var(--fs-body); line-height: 1.5; font-weight: 400; color: var(--charcoal); } .app-question-time { font-size: var(--fs-tiny); color: var(--muted); white-space: nowrap; } .app-pill { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-tiny); font-weight: 500; padding: 6px 12px; background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-pill); color: var(--charcoal); } .app-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); animation: app-live 2s ease-in-out infinite; } @keyframes app-live { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } .app-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--charcoal); color: var(--cream); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-small); font-weight: 600; flex-shrink: 0; } .app-auth-shell { min-height: calc(100vh - 100px); padding: 8vh 0 var(--s-9); position: relative; overflow: hidden; } .app-auth-shell::before { content: ''; position: absolute; inset: -80px; background: radial-gradient(ellipse 600px 350px at 20% 30%, rgba(255,180,160,0.22) 0%, transparent 70%), radial-gradient(ellipse 500px 300px at 80% 70%, rgba(180,195,255,0.16) 0%, transparent 65%); pointer-events: none; z-index: 0; } .app-auth-shell > * { position: relative; z-index: 1; } .app-auth-card { max-width: 460px; margin: 0 auto; background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: 36px 36px 32px; box-shadow: var(--shadow-2); } .app-auth-title { text-align: center; margin-bottom: 4px; } .app-auth-subtitle { text-align: center; color: var(--muted); font-size: var(--fs-small); margin-bottom: 28px; } .app-auth-forgot-row { display: flex; justify-content: flex-end; margin: 4px 0 4px; } .app-auth-forgot { font-size: var(--fs-small); color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .app-auth-forgot:hover { color: var(--charcoal); opacity: 1; } .app-auth-banner { max-width: 460px; margin: 0 auto 14px; text-align: center; border-radius: var(--r-md); } .app-auth-logo-link { display: flex; justify-content: center; margin-bottom: 28px; text-decoration: none; } .app-auth-icon-wrap { display: flex; justify-content: center; margin: 4px 0 18px; } .app-auth-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, rgba(244,162,122,0.22) 0%, rgba(247,196,154,0.22) 100%); border: 1px solid rgba(244,162,122,0.45); color: var(--accent-amber); font-size: 22px; } .app-auth-icon.app-auth-icon--warn { background: linear-gradient(135deg, rgba(244,162,122,0.22) 0%, rgba(247,196,154,0.22) 100%); color: var(--accent-amber); } .app-auth-icon.app-auth-icon--danger { background: rgba(192,57,43,0.10); border-color: rgba(192,57,43,0.30); color: var(--danger); } .app-auth-foot-note { text-align: center; color: var(--muted); font-size: var(--fs-small); margin: 14px 0 0; } .app-auth-brand .app-brand-mark { font-size: 14px; padding: 2px 9px; } .app-auth-brand .app-brand-word { font-size: 18px; } .app-auth-back-wrap { text-align: center; margin-top: 28px; } .app-auth-back { color: var(--muted); font-size: var(--fs-small); text-decoration: none; } .app-auth-back:hover { color: var(--charcoal); } .app-link { color: var(--charcoal); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-weight: 500; } .app-link:hover { opacity: 0.65; } .app-auth-tabs.app-tabs-pill { margin: 0 auto 22px; } .app-auth-card .tab-content { padding-top: 4px; } .app-auth-card .form-control { background: var(--cream); } .app-auth-card .form-control:focus { background: var(--offwhite); } .app-auth-card .btn-primary, .app-auth-card .btn-danger { width: 100%; padding: 12px 22px !important; font-size: var(--fs-body) !important; font-weight: 500; border-radius: var(--r-sm); margin-top: 6px; } .password-requirements { background: var(--cream); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 14px; } .password-requirements > small { color: var(--muted); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; margin-bottom: 8px; } .pwd-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .pwd-row { display: flex; align-items: center; } .pwd-bullet { font-size: 6px !important; color: var(--quiet); width: 12px; text-align: center; line-height: 1; } .pwd-text { font-size: var(--fs-small); color: var(--muted); } .pwd-row.met .pwd-bullet, .pwd-row.met .fa-check { color: var(--good); font-size: 10px !important; } .pwd-row.met .pwd-text { color: var(--charcoal); } .app-page-hero { text-align: center; padding: var(--s-10) 0 var(--s-9); position: relative; overflow: hidden; } .app-page-hero::before { content: ''; position: absolute; inset: -80px; background: radial-gradient(ellipse 700px 400px at 20% 30%, rgba(255,180,160,0.22) 0%, transparent 70%), radial-gradient(ellipse 600px 350px at 80% 20%, rgba(255,210,140,0.16) 0%, transparent 65%), radial-gradient(ellipse 400px 250px at 60% 85%, rgba(180,195,255,0.14) 0%, transparent 65%); pointer-events: none; z-index: 0; } .app-page-hero > * { position: relative; z-index: 1; } .app-page-hero h1 { font-size: var(--fs-display); font-weight: 600; line-height: 1.08; letter-spacing: -1.5px; max-width: 780px; margin: 24px auto 18px; } .app-page-hero h1 em { position: relative; font-style: normal; font-weight: 600; display: inline-block; } .app-page-hero h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent-coral), var(--accent-warm)); opacity: 0.7; } .app-page-hero .lead { font-size: var(--fs-h5); color: var(--muted); line-height: 1.55; max-width: 540px; margin: 0 auto 36px; } .app-account-page { max-width: 880px !important; margin: 0 auto; padding: var(--s-7) var(--s-6) var(--s-9) !important; } .app-account-header { margin-bottom: var(--s-7); padding-top: var(--s-3); } .app-account-title { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -1px; line-height: 1.1; margin-top: 12px; } .app-account-title em { font-style: italic; font-weight: 600; } .app-account-body { display: flex; flex-direction: column; gap: 18px; } .app-account-body .card { border-radius: var(--r-xl); } .app-account-body .card-header { font-size: var(--fs-h5); font-weight: 600; padding: 18px 22px; } .app-account-body .card-body { padding: 22px; } .app-account-logout { margin-top: 12px !important; } .app-admin-shell { min-height: calc(100vh - 60px); } .app-admin-page { max-width: 1240px !important; margin: 0 auto; padding: var(--s-7) var(--s-6) var(--s-9) !important; } .app-admin-header { margin-bottom: var(--s-6); } .app-admin-title { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -1px; margin: 12px 0 8px; } .app-admin-title em { font-style: italic; font-weight: 600; } .app-admin-sub { color: var(--muted); font-size: var(--fs-h5); } .app-admin-period-row { display: flex; align-items: center; gap: 12px; margin: var(--s-6) 0 var(--s-5); } .app-admin-period-label { color: var(--charcoal); font-size: var(--fs-small); font-weight: 500; margin: 0; } .app-admin-period .Select-control, .app-admin-period .Select__control { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-sm); min-width: 220px; color: var(--charcoal); } .app-admin-period .Select-value-label, .app-admin-period .Select__single-value { color: var(--charcoal); } .app-admin-tab { padding-top: var(--s-5); } .app-admin-placeholder { color: var(--muted); padding: var(--s-7); text-align: center; background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-lg); } .app-admin-tab .card { background: var(--offwhite); border-color: var(--border-soft); } .app-admin-tab .card-body { color: var(--charcoal); } .app-admin-tab .table thead th { color: var(--muted); } .app-legal-page { padding-bottom: var(--s-9); } .app-legal-header { text-align: center; padding: var(--s-7) 0 var(--s-6); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--s-6); } .app-legal-title { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -1px; margin-top: 12px; } .app-legal-body { max-width: 880px; margin: 0 auto; } .app-legal-card { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: var(--s-7); box-shadow: var(--shadow-1); color: var(--charcoal); line-height: 1.65; font-size: var(--fs-body); } .app-legal-card h1, .app-legal-card h2, .app-legal-card h3 { color: var(--charcoal); margin: var(--s-5) 0 var(--s-3); } .app-legal-card p, .app-legal-card li { color: var(--charcoal); } .app-legal-card a { color: var(--charcoal); text-decoration: underline; text-underline-offset: 2px; } .app-legal-iframe { width: 100%; min-height: 70vh; border: 1px solid var(--border-soft); border-radius: var(--r-xl); background: var(--offwhite); box-shadow: var(--shadow-1); } .app-billing-page { max-width: 880px !important; margin: 0 auto; padding: var(--s-7) var(--s-6) var(--s-9) !important; } .app-billing-header { text-align: center; margin: 12px 0 var(--s-6); } .app-billing-title { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -1px; line-height: 1.1; margin: 12px 0 8px; } .app-billing-title em { font-style: italic; font-weight: 600; } .app-billing-sub { color: var(--muted); font-size: var(--fs-h5); } .app-billing-feedback { max-width: 640px; margin: 0 auto var(--s-4); } .app-billing-tabs-wrap { display: flex; flex-direction: column; } .app-billing-tabs-wrap .app-tabs-pill { margin-left: auto; margin-right: auto; } .app-billing-tab-intro { color: var(--muted); text-align: center; margin: var(--s-4) 0 var(--s-3); font-size: var(--fs-small); } .app-billing-back { text-align: center; margin-top: var(--s-7); padding-bottom: var(--s-7); } .app-billing-page .card { border-radius: var(--r-xl); } .app-billing-page .card.shadow-lg, .app-billing-page .card.border-primary { border-color: var(--charcoal) !important; box-shadow: var(--shadow-2); } .app-prose { max-width: 720px; margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-9); color: var(--charcoal); } .app-prose h2 { font-size: var(--fs-h2); margin-top: var(--s-9); margin-bottom: var(--s-4); letter-spacing: -1px; } .app-prose h3 { font-size: var(--fs-h3); margin-top: var(--s-6); margin-bottom: var(--s-3); } .app-prose p { font-size: var(--fs-body); color: var(--charcoal); margin-bottom: var(--s-4); line-height: 1.65; } .app-prose p em { color: var(--muted); } .app-prose .pull-center { text-align: center; color: var(--muted); font-style: italic; margin: var(--s-7) 0; font-size: var(--fs-h5); } .app-prose hr { margin: var(--s-7) 0; } #usage-warning-banner .alert, .usage-warning-banner .alert { border-radius: var(--r-md); margin-bottom: 14px; } .app-banner-warning { display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, rgba(244,162,122,0.12) 0%, rgba(247,196,154,0.12) 100%); border: 1px solid rgba(244,162,122,0.35); border-radius: var(--r-md); padding: 14px 18px; color: var(--charcoal); font-size: var(--fs-small); margin-bottom: 14px; } .app-banner-warning .icon { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-coral); color: var(--cream); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .app-footer { margin-top: var(--s-9); padding: var(--s-6) 0 var(--s-4); border-top: 1px solid var(--border-soft); color: var(--muted); font-size: var(--fs-tiny); line-height: 1.6; text-align: center; } .app-footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .app-footer a:hover { color: var(--charcoal); } .markdown-content { color: var(--charcoal); font-size: var(--fs-body); line-height: 1.65; } .markdown-content > *:first-child { margin-top: 0 !important; } .markdown-content > *:last-child { margin-bottom: 0 !important; } .markdown-content h1 { font-size: 22px; margin: 16px 0 10px; letter-spacing: -0.5px; } .markdown-content h2 { font-size: 19px; margin: 14px 0 8px; letter-spacing: -0.4px; } .markdown-content h3 { font-size: 16px; margin: 12px 0 6px; } .markdown-content h4, .markdown-content h5, .markdown-content h6 { font-size: var(--fs-small); margin: 10px 0 4px; } .markdown-content p { margin: 0 0 10px; } .markdown-content ul, .markdown-content ol { margin: 0 0 10px; padding-left: 22px; } .markdown-content li { margin-bottom: 4px; } .markdown-content strong { color: var(--charcoal); font-weight: 600; } .markdown-content em { color: inherit; } .markdown-content code { font-family: var(--font-mono); font-size: 13px; padding: 1px 6px; background: var(--cream); border: 1px solid var(--border-soft); border-radius: var(--r-xs); color: var(--charcoal); } .markdown-content pre { background: var(--cream); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 12px 14px; overflow-x: auto; margin: 0 0 10px; } .markdown-content pre code { border: 0; padding: 0; background: transparent; font-size: 13px; } .markdown-content blockquote { border-left: 3px solid var(--accent-coral); margin: 10px 0; padding: 4px 0 4px 14px; color: var(--muted); font-style: italic; } .markdown-content table { width: 100%; border-collapse: collapse; margin: 10px 0; } .markdown-content th, .markdown-content td { font-family: var(--font); border: 1px solid var(--border-soft); padding: 8px 12px; font-size: var(--fs-small); text-align: left; } .markdown-content th { background: var(--cream); font-weight: 600; } .markdown-content a { color: var(--charcoal); text-decoration: underline; text-underline-offset: 2px; } .markdown-content a:hover { opacity: 0.7; } .markdown-content, .markdown-content p, .markdown-content li, .markdown-content blockquote { font-size: var(--fs-h5) !important; } .markdown-content h1 { font-size: 22px !important; } .markdown-content h2 { font-size: 19px !important; } .markdown-content h3 { font-size: 16px !important; } .markdown-content h4, .markdown-content h5, .markdown-content h6 { font-size: var(--fs-small) !important; } .markdown-content th, .markdown-content td { font-size: var(--fs-small) !important; } .markdown-content code, .markdown-content pre code { font-size: 13px !important; } .markdown-content.small, .markdown-content.small p, .markdown-content.small li { font-size: var(--fs-small) !important; } @media (max-width: 992px) { main, .app-main { padding: var(--s-7) 0 var(--s-9); } .app-hero h1 { font-size: 36px; letter-spacing: -1px; } .app-responses { grid-template-columns: 1fr; } .app-consensus, .app-question { grid-template-columns: 1fr; text-align: left; gap: 8px; } .app-consensus-score { text-align: left; } } @media (max-width: 768px) { .container, .container-fluid { padding: 0 16px; } .navbar .container { padding: 0 16px; } .nav-pills .nav-link { padding: 5px 11px !important; font-size: var(--fs-tiny); } .app-page-hero { padding: var(--s-9) 0 var(--s-8); } .app-page-hero h1 { letter-spacing: -0.7px; } .app-prose { padding: var(--s-7) var(--s-4) var(--s-8); } .app-auth-shell { padding: 4vh 0 var(--s-8); } .app-auth-card { padding: 28px 22px; } .app-ask { padding: 18px 18px; } .app-hero .sub { font-size: 17px !important; } .app-ask textarea, .app-ask .form-control { font-size: 17px !important; } } @media print { .navbar, .app-footer, .app-ask, footer { display: none !important; } body { background: #fff; color: #000; } .card, .response-card { border: 1px solid #ccc; box-shadow: none; } } input[type="radio"]:not(.form-check-input), input[type="checkbox"]:not(.form-check-input) { margin-right: 8px !important; margin-left: 0 !important; vertical-align: middle !important; position: relative; top: -1px; cursor: pointer; } .dash-radio-items label, .dash-checklist label, [class*="RadioItems"] label, [class*="Checklist"] label { line-height: 1.55; margin-bottom: 6px; } .survey-form .form-label { font-size: 1.3rem !important; font-weight: 600 !important; line-height: 1.4 !important; color: #1f1d1a !important; margin-bottom: 8px !important; } .survey-form .form-text { font-size: 1.02rem !important; color: #6c6862 !important; margin-top: 4px !important; } .survey-form textarea { font-size: 1.08rem !important; line-height: 1.5 !important; padding: 12px 14px !important; border-radius: 6px !important; } .survey-form input[type='radio'] + label, .survey-form input[type='checkbox'] + label, .survey-form .dash-radio-items label, .survey-form .dash-checklist label, .survey-form label { font-size: 1.05rem !important; margin-right: 14px !important; } .survey-form .badge { font-size: 1rem !important; padding: 0.55rem 0.95rem !important; } @media (max-width: 480px) { .survey-form .form-label { font-size: 1.18rem !important; } .survey-form .form-text { font-size: 0.98rem !important; } .survey-form textarea { font-size: 1.05rem !important; } } #conversation-thread-view .chat-bubble { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: 14px 18px !important; font-size: 0.95rem !important; line-height: 1.55; min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } #conversation-thread-view .d-flex { min-width: 0; } #conversation-thread-view .chat-bubble pre, #conversation-thread-view .chat-bubble table { max-width: 100%; overflow-x: auto; } #conversation-thread-view .chat-bubble code { white-space: pre-wrap; word-break: break-word; } #conversation-thread-view .chat-bubble img { max-width: 100%; height: auto; } #conversation-thread-view .chat-bubble *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(small) { font-size: 0.95rem !important; } #conversation-thread-view .chat-bubble-meta { font-size: 0.7rem !important; color: var(--muted) !important; cursor: default; } #conversation-thread-view > div:first-child h6 { font-size: 0.75rem !important; color: var(--muted); letter-spacing: 0; } #conversation-thread-view .thread-answer-collapsed { max-height: 240px; overflow: hidden; position: relative; } #conversation-thread-view .thread-answer-collapsed::after { content: ""; position: absolute; left: 0; right: 0; top: calc(240px - 56px); height: 56px; background: linear-gradient(180deg, transparent, var(--offwhite)); pointer-events: none; } #thread-loading-overlay { display: none; } #thread-loading-overlay.thread-overlay-visible { display: flex; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; background: rgba(28, 28, 28, 0.35); pointer-events: none; opacity: 0; animation: thread-overlay-fade 0.15s ease-out 0.25s forwards; } @keyframes thread-overlay-fade { to { opacity: 1; } } body:has(#conversation-modal.show) #thread-loading-overlay { display: none !important; } #thread-loading-overlay .thread-overlay-card { display: flex; align-items: center; background: var(--charcoal, #1c1c1c); color: #fff; border-radius: var(--r-xl, 16px); box-shadow: var(--shadow-1); padding: 14px 22px; font-size: 0.95rem; } #conversation-thread-view .bubble-deliberation { min-width: 0; max-width: 100%; overflow-x: auto; } #conversation-thread-view .bubble-deliberation .accordion-button { font-size: 0.8rem !important; color: var(--muted); padding: 6px 10px; background: transparent; } #conversation-thread-view .bubble-deliberation .accordion-button:not(.collapsed) { color: var(--charcoal); box-shadow: none; } #conversation-thread-view .bubble-deliberation .accordion-item { background: transparent; border: 0; } #conversation-thread-view .bubble-deliberation .accordion-body { padding: 10px 4px 4px; } #conversation-thread-view .bubble-deliberation .response-card { max-width: 100%; } #conversation-thread-view .bubble-deliberation pre, #conversation-thread-view .bubble-deliberation table { max-width: 100%; overflow-x: auto; } @media (max-width: 575.98px) { #conversation-modal.offcanvas-start { width: 55vw !important; max-width: 55vw !important; min-width: 240px; } } #conversation-list .small, #conversation-list p.small { font-size: 0.95rem !important; } #conversation-list small { font-size: 0.85rem !important; }