:root {
  color-scheme: dark;
  --canvas: #121419;
  --panel: #1d2028;
  --panel-soft: #232731;
  --panel-deep: #181b22;
  --line: #353a47;
  --line-soft: #2d323c;
  --ink: #eef0f5;
  --ink-soft: #a5aab6;
  --muted: #747b89;
  --blue: #4287ff;
  --orange: #ff8500;
  --teal: #00c7ab;
  --purple: #bd4cff;
  --pink: #eb3e9b;
  --red: #fa565d;
  --green: #00d18f;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 360px; min-height: 100vh; background: var(--canvas); color: var(--ink); font-size: 15.6px; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { opacity: .48; cursor: not-allowed; }
input, select { outline: 0; color: var(--ink); }
.hidden { display: none !important; }
.app-shell { min-height: 100vh; background: radial-gradient(900px 310px at 0 0, #3b211f2e, transparent 68%), var(--canvas); }

.topbar { height: 64px; padding: 0 max(24px, calc((100vw - 1800px) / 2)); border-bottom: 1px solid #363a44; display: flex; align-items: center; gap: 20px; background: #121419f2; position: sticky; top: 0; z-index: 20; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: 0 0 auto; min-width: 230px; }
.brand-mark { width: 38px; height: 38px; display: block; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 0 9px #e7646840); }
.brand-copy { display: grid; line-height: 1; gap: 4px; }
.brand-title { display: flex; align-items: center; gap: 8px; }
.brand-copy strong { color: #f0eef3; font-size: 18px; letter-spacing: .11em; font-weight: 850; }
.brand-copy small { font-size: 9.6px; letter-spacing: .07em; color: #9399a7; font-weight: 700; white-space: nowrap; }
.version-tag { padding: 4px 7px; border-radius: 5px; color: #fff; font-size: 10.8px; font-weight: 900; background: linear-gradient(135deg, #ff843a, #ed5140); }
.brand-title .version-tag { padding: 3px 6px; font-size: 9.6px; }
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
.sync-status { display: inline-flex; gap: 7px; align-items: center; color: #75a9ff; background: #192131; border: 1px solid #34415a; border-radius: 22px; padding: 7px 12px; white-space: nowrap; font-size: 12px; font-weight: 700; }
.sync-status i, .live-pill i, .secure-pill i, .source-chip i, .app-footer i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px #00d18f88; }
.sync-status.error i { background: var(--red); box-shadow: 0 0 9px #fa565d88; }
.sync-status.idle { color: #9aa1ae; border-color: #3c414c; background: #1b1e25; }
.sync-status.idle i { background: #7a8290; box-shadow: none; }
.sync-button { min-height: 30px; padding: 0 10px; }
.sync-button:disabled, .workbook-actions .button:disabled { opacity: .65; cursor: wait; }
.workspace-wrap { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10.8px; text-transform: uppercase; letter-spacing: .07em; }
.workspace-wrap select { max-width: 185px; padding: 8px 26px 8px 10px; border: 1px solid #353a45; border-radius: 18px; background: #1b1e25; color: #e5e7eb; font-size: 12px; font-weight: 700; }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 9px 4px 5px; min-height: 34px; border: 1px solid #353a45; border-radius: 22px; background: #1c1f26; color: #dadde5; font-size: 12px; font-weight: 700; }
.user-avatar { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #ff8332, #eb3e83); color: #fff; font-size: 12px; font-weight: 900; }
.chevron { color: #858c98; font-size: 16.8px; }
.icon-button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #353a45; background: #1c1f26; color: #9fa6b4; font-size: 18px; }
.icon-button:hover, .user-chip:hover, .workspace-wrap select:hover { border-color: #646b7b; }

.subbar { min-height: 64px; padding: 8px max(24px, calc((100vw - 1800px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #2b2f38; background: linear-gradient(100deg, #2e201f 0, #1d1d23 32%, #14161b 64%); }
.main-nav { display: flex; align-items: center; gap: 5px; min-width: 0; }
.nav-item { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 15px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #9ba1ae; font-size: 13.2px; font-weight: 750; white-space: nowrap; }
.nav-item:hover { color: #e9eaf0; background: #292c35; }
.nav-item.active { color: #fff; border-color: #a06ac5; background: linear-gradient(105deg, #b059df 0%, #f16e8e 60%, #ff7a4b 100%); box-shadow: 0 0 18px #d351bf55; }
.nav-symbol { font-size: 18px; line-height: 1; }
.dashboard-symbol { color: #eef3ff; }.sales-symbol { color: #5b9aff; }.fx-symbol { color: #c15aff; }.admin-symbol { color: #ff9b37; }
.subbar-meta { display: flex; align-items: center; gap: 16px; color: #727987; font-size: 10.8px; font-weight: 800; letter-spacing: .07em; white-space: nowrap; }
.source-chip { display: flex; align-items: center; gap: 6px; color: #c3c6ce; padding: 7px 10px; border: 1px solid #3a3e48; border-radius: 20px; background: #20232a; }
.source-chip i { width: 6px; height: 6px; background: var(--teal); }
.content-wrap { width: min(1800px, calc(100% - 56px)); margin: 28px auto 0; min-height: calc(100vh - 190px); }
.page-section { animation: fadein .18s ease-out; }
@keyframes fadein { from { opacity: .45; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 18px; }
.page-heading h1 { margin: 5px 0 6px; font-size: clamp(26.4px, 2.5vw, 34.8px); line-height: 1.1; letter-spacing: -.035em; }
.page-heading .muted { max-width: 700px; margin: 0; }
.eyebrow { margin: 0; color: #7d8491; font-size: 10.8px; font-weight: 850; letter-spacing: .12em; }
.muted { color: var(--muted); font-size: 13.2px; line-height: 1.55; }
.heading-side { display: grid; justify-items: end; gap: 8px; flex: 0 0 auto; }
.live-pill, .secure-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #304846; border-radius: 18px; background: #172321; color: #62d9bc; font-size: 10.8px; font-weight: 800; letter-spacing: .06em; }
.refresh-label { color: #777e8c; font-size: 10.8px; }
.secure-pill { color: #ffbd65; border-color: #4a3a27; background: #292219; }
.secure-pill i { background: var(--orange); box-shadow: 0 0 9px #ff850088; }

.panel { border: 1px solid #3a3e48; border-radius: 11px; background: linear-gradient(150deg, #22252d, #1b1e25 70%); box-shadow: 0 10px 30px #05060822; overflow: hidden; }
.lookup-panel { padding: 17px 19px 12px; margin-bottom: 16px; position: relative; z-index: 4; overflow: visible; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 14px; }
.panel-heading>div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.panel-heading h2 { margin: 0; color: #c8cbd4; font-size: 12px; font-weight: 850; letter-spacing: .09em; }
.panel-heading p { margin: 5px 0 0; color: #777e8b; font-size: 10.8px; }
.panel-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font-size: 18px; font-weight: 900; }
.icon-blue { color: #75aaff; background: #1d3151; }.icon-orange { color: #ffad4f; background: #3a2a19; }.icon-purple { color: #d08aff; background: #332044; }.icon-teal { color: #53e0c5; background: #173c38; }.icon-red { color: #ff7177; background: #40272a; }
.subtle-badge { padding: 5px 8px; border: 1px solid #3c414c; border-radius: 5px; background: #20232a; color: #8c93a0; font-size: 9.6px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.subtle-badge.bad-status { border-color: #70414a; background: #332126; color: #ff9ca0; }
.filter-grid { display: grid; grid-template-columns: 1.05fr .95fr .78fr .8fr 1.05fr .85fr 1fr 1fr; gap: 11px; }
.filter-grid label, .fx-form label, .workbook-form label, .inline-form label, .form-stack label, .modal-card label { display: grid; gap: 6px; min-width: 0; color: #969ca8; font-size: 10.8px; font-weight: 800; letter-spacing: .03em; }
.filter-grid label span { color: #646b79; font-size: 9.6px; font-weight: 500; margin-left: 4px; }
.feature-filter { display: grid; gap: 6px; min-width: 0; color: #969ca8; font-size: 10.8px; font-weight: 800; letter-spacing: .03em; }
.feature-filter > label span { color: #646b79; font-size: 9.6px; font-weight: 500; margin-left: 4px; }
.filter-grid input, .filter-grid select, .fx-form input, .workbook-form input, .inline-form input, .form-stack input, .modal-card input, .compact-select select, .search-field input { width: 100%; min-width: 0; height: 35px; padding: 0 10px; border: 1px solid #3b404b; border-radius: 6px; background: #16191f; color: #e2e5eb; font-size: 12px; font-weight: 600; }
.lookup-combobox { position: relative; width: 100%; min-width: 0; }
.lookup-combobox input { padding-right: 30px; }
.feature-combobox { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 35px; padding: 4px 30px 4px 6px; border: 1px solid #3b404b; border-radius: 6px; background: #16191f; }
.feature-combobox:focus-within { border-color: #617ca8; box-shadow: 0 0 0 2px #478dff20; }
.feature-combobox > input, .feature-combobox > input:focus { flex: 1 1 90px; width: auto; min-width: 75px; height: 24px; padding: 0 3px; border: 0; border-radius: 4px; background: transparent; box-shadow: none; }
.selected-features { display: contents; }
.feature-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 23px; padding: 2px 4px 2px 8px; border: 1px solid #4a3d60; border-radius: 13px; background: #292338; color: #e5d5f5; font-size: 10.8px; font-weight: 650; letter-spacing: 0; }
.feature-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-chip-remove { width: 16px; height: 16px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #aa9ab9; font-size: 16.8px; line-height: 1; }
.feature-chip-remove:hover { background: #443653; color: #fff; }
.exclude-customer-filter .feature-chip { border-color: #624038; background: #34231f; color: #ffd3c1; }
.exclude-customer-filter .feature-chip-remove { color: #d69c86; }
.exclude-customer-filter .feature-chip-remove:hover { background: #57342e; color: #fff; }
.exclude-customer-filter .feature-option-check { color: #ff9d69; }
.lookup-chevron { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: #adb3bf; font-size: 13.2px; line-height: 1; pointer-events: none; }
.lookup-options { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: min(260px, 50vh); overflow-y: auto; padding: 4px; border: 1px solid #3b404b; border-radius: 7px; background: #1a1d24; box-shadow: 0 12px 28px #0009; }
.lookup-options[hidden] { display: none; }
.lookup-option { display: block; width: 100%; padding: 8px 9px; border: 0; border-radius: 4px; background: transparent; color: #e2e5eb; font-size: 12px; font-weight: 600; text-align: left; }
.lookup-option:hover, .lookup-option.active { background: #303641; color: #fff; }
.lookup-option[aria-selected="true"] { background: #2b2635; color: #fff; }
.feature-option-check { width: 18px; float: right; color: #c982ff; font-weight: 900; text-align: center; }
.lookup-no-options { padding: 8px 9px; color: #888f9d; font-size: 10.8px; font-weight: 500; }
select option { background: #1a1d24; color: #e6e8ec; }
input::placeholder { color: #656c79; font-weight: 500; }
input:focus, select:focus { border-color: #617ca8; box-shadow: 0 0 0 2px #478dff20; }
.lookup-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 12px; margin-top: 11px; border-top: 1px solid #30343d; }
.hint { display: flex; align-items: center; gap: 7px; color: #858b97; font-size: 10.8px; line-height: 1.5; }
.hint>span:first-child { width: 14px; height: 14px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #303440; color: #a5adbb; font-size: 10.8px; font-weight: 800; }
.hint b { color: #c5c9d1; }
.button { min-height: 33px; display: inline-flex; justify-content: center; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; font-size: 10.8px; font-weight: 800; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s; }
.button:active { transform: translateY(1px); }
.button-primary { background: linear-gradient(100deg, #7854e9, #a146df 52%, #e655ad); color: #fff; box-shadow: 0 6px 16px #bc49dc25; }
.button-primary:hover { filter: brightness(1.1); }
.button-secondary { background: #202a38; border-color: #35465e; color: #8eb6ff; }
.button-secondary:hover { background: #283749; border-color: #4b6689; }
.button-quiet { background: #22252c; border-color: #3b404b; color: #a6acb8; }
.button-quiet:hover { background: #2a2e38; color: #e2e4eb; }
.button-danger { background: #362327; border-color: #623239; color: #ff8d90; }
.button-danger:hover { background: #46282f; }

.summary-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 13px; }
.metric-card { min-height: 127px; padding: 15px 18px 14px; position: relative; overflow: hidden; border: 1px solid #3b404b; border-radius: 9px; background: radial-gradient(180px 90px at 100% 100%, #3a465020, transparent 74%), linear-gradient(140deg, #22252e, #1b1e25 75%); }
.metric-card::before { content: ""; width: 3px; position: absolute; inset: 10px auto 10px 0; border-radius: 2px; }
.metric-min::before { background: var(--blue); box-shadow: 0 0 12px #4287ff99; }.metric-average::before { background: var(--teal); box-shadow: 0 0 12px #00c7ab99; }.metric-max::before { background: var(--orange); box-shadow: 0 0 12px #ff850099; }
.metric-top { display: flex; align-items: center; gap: 7px; color: #838a98; font-size: 10.8px; font-weight: 800; letter-spacing: .09em; }
.metric-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.metric-min .metric-dot { color: var(--blue); }.metric-average .metric-dot { color: var(--teal); }.metric-max .metric-dot { color: var(--orange); }
.metric-period { margin-left: auto; color: #626977; font-size: 9.6px; }
.metric-value { margin-top: 14px; color: #f0f1f4; font-size: clamp(30px, 3vw, 39.6px); line-height: 1; font-weight: 780; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.metric-value .money-decimal { color: #9aa4b4; font-size: .92em; font-weight: 600; }
.metric-average .metric-value { color: #4bd5bd; }.metric-caption { margin-top: 9px; color: #7b8290; font-size: 10.8px; line-height: 1.3; min-height: 22px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.metric-average .metric-value .money-decimal { color: #72cabb; }
.metric-date { color: #b8bfcc; font-size: 14.4px; font-weight: 600; }
.metric-caption-separator { color: #9299a6; font-size: 14.4px; }
.metric-customer { color: #d8dde7; font-size: 15.6px; font-weight: 700; }
.coverage-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; margin-bottom: 15px; border: 1px solid #303b48; border-radius: 8px; background: linear-gradient(100deg, #1d2733, #1e2229); }
.coverage-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.coverage-icon { width: 27px; height: 27px; display: grid; place-items: center; flex: none; border: 1px solid #304959; border-radius: 7px; color: #68c7ff; background: #192f3a; font-size: 16.8px; }
.coverage-main strong { display: block; color: #cdd4df; font-size: 12px; }
.coverage-main p { margin: 4px 0 0; color: #808a98; font-size: 10.8px; line-height: 1.45; }
.coverage-stats { display: flex; gap: 11px; align-items: center; color: #858d9a; font-size: 10.8px; white-space: nowrap; }
.coverage-stats b { color: #dedfe5; font-size: 12px; }
.coverage-divider { width: 1px; height: 17px; background: #3d424e; }
.result-panel { margin-bottom: 25px; }
.result-heading { padding: 15px 16px 13px; border-bottom: 1px solid #30343e; }
.result-count { color: #858b99; font-size: 10.8px; font-weight: 700; }
.table-wrap { width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.data-table thead { background: #20232b; }
.data-table th { padding: 10px 12px; border-bottom: 1px solid #363a45; color: #858c99; font-size: 9.6px; letter-spacing: .065em; font-weight: 850; white-space: nowrap; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid #2d313b; color: #c5c9d2; white-space: nowrap; }
#priceTableBody td:not(.empty-cell) { font-size: 14.4px; }
.data-table tbody tr:hover td { background: #252933; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td.price-cell { color: #e3e6ed; font-weight: 750; font-variant-numeric: tabular-nums; }
.data-table td.converted-cell { color: #60dbc5; font-weight: 750; font-variant-numeric: tabular-nums; }
.data-table .money-decimal { color: #9aa4b4; font-size: .92em; font-weight: 600; }
.data-table td.missing-cell { color: #f3a947; }
.empty-cell { height: 72px; text-align: center !important; color: #737a88 !important; font-size: 12px; }
.table-foot { padding: 9px 13px; border-top: 1px solid #30343e; color: #727987; font-size: 10.8px; }
.app-footer { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1800px) / 2)); border-top: 1px solid #292d35; color: #656c79; font-size: 9.6px; font-weight: 800; letter-spacing: .09em; }
.app-footer span { display: flex; align-items: center; gap: 7px; }
.app-footer i { width: 6px; height: 6px; }

.table-toolbar { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border-bottom: 1px solid #333742; }
.search-field { display: flex; align-items: center; gap: 8px; width: min(500px, 100%); height: 35px; padding: 0 10px; border: 1px solid #3b404b; border-radius: 6px; background: #16191f; color: #8b93a1; font-size: 18px; }
.search-field input { height: auto; padding: 0; border: 0; background: transparent; font-size: 12px; }
.search-field:focus-within { border-color: #617ca8; box-shadow: 0 0 0 2px #478dff20; }
.compact-select { display: flex; align-items: center; gap: 7px; margin-left: auto; color: #8e95a2; font-size: 10.8px; white-space: nowrap; }
.compact-select select { width: 115px; height: 35px; }
.sales-table { min-width: 980px; }
.sales-table td:nth-child(7), .sales-table td:nth-child(8) { font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-top: 1px solid #333742; color: #868d9a; font-size: 10.8px; }
.pager>div { display: flex; gap: 8px; }

.fx-callout { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 15px; border: 1px solid #4b365a; border-radius: 9px; background: linear-gradient(105deg, #2a2034, #211e29); }
.fx-callout-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: none; color: #d295ff; background: #392747; border-radius: 7px; font-size: 19.2px; }
.fx-callout strong { display: block; margin: 1px 0 5px; color: #d7c2ee; font-size: 12px; }
.fx-callout p { max-width: 970px; margin: 0; color: #9e91ad; font-size: 10.8px; line-height: 1.55; }
.fx-panel { margin-bottom: 22px; }
.fx-panel>.panel-heading { padding: 15px 16px 13px; border-bottom: 1px solid #30343e; }
.fx-form { display: flex; align-items: flex-end; gap: 11px; padding: 13px 15px; border-bottom: 1px solid #30343e; }
.fx-form label { min-width: 145px; }
.fx-form label:last-of-type { min-width: 180px; }
.fx-form button { min-width: 102px; }
.fx-table td:last-child { width: 1%; text-align: right; }

.admin-panel { padding: 0 15px 14px; }
.admin-panel>.panel-heading { padding: 15px 0 13px; border-bottom: 1px solid #30343e; }
.workbook-info { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0 12px; }
.workbook-file { display: flex; align-items: center; gap: 10px; min-width: 0; }
.file-icon { width: 31px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 5px; background: #233d32; color: #45c78e; font-weight: 900; }
.workbook-file>div { display: grid; gap: 5px; min-width: 0; }
.workbook-file strong { color: #d5d8e0; font-size: 12px; overflow-wrap: anywhere; }
.workbook-file small { color: #7e8592; font-size: 10.8px; }
.workbook-actions { display: flex; gap: 8px; }
.workbook-form { padding-top: 7px; }
.workbook-form input { font-size: 12px; }
.workbook-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }
.workbook-form-foot span { color: #777f8d; font-size: 10.8px; line-height: 1.5; }
.inline-error { padding: 8px 10px; margin: 10px 0 0; border: 1px solid #70414a; border-radius: 6px; background: #332126; color: #ff9ca0; font-size: 10.8px; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 14px; margin: 15px 0; }
.inline-form { display: flex; gap: 9px; align-items: flex-end; padding: 13px 0 12px; }
.inline-form label { flex: 1; }
.workspace-list { display: grid; gap: 6px; }
.workspace-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid #303640; border-radius: 6px; background: #1a1d23; color: #c7cbd3; font-size: 12px; }
.workspace-row small { color: #727987; font-size: 9.6px; }
.compact-form { padding-top: 12px; }
.compact-form .button { align-self: flex-start; }
.workspace-access { padding: 9px 10px 10px; margin: 1px 0 0; border: 1px solid #343944; border-radius: 6px; }
.workspace-access legend { padding: 0 5px; color: #969ca8; font-size: 10.8px; font-weight: 800; }
.workspace-checks { display: flex; flex-wrap: wrap; gap: 7px 14px; }
.workspace-checks label { display: flex; align-items: center; gap: 6px; color: #aeb4c0; font-size: 10.8px; font-weight: 600; }
.workspace-checks input { width: 13px; height: 13px; accent-color: #9a5be8; }
.credentials-card { padding: 11px 12px; margin-top: 12px; border: 1px solid #6e5932; border-radius: 7px; background: #302a1e; color: #f3cf83; }
.credentials-card strong { display: block; font-size: 12px; }
.credentials-card p { margin: 5px 0 9px; color: #b6a57b; font-size: 10.8px; line-height: 1.5; }
.credentials-card>div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.credentials-card code, .credentials-card>div>span { display: block; padding: 8px; border-radius: 5px; background: #191a1c; color: #f3e1b3; font: 700 10px ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.users-panel { margin-bottom: 13px; }
.users-panel>.panel-heading { padding: 15px 0 13px; }
.users-table { min-width: 740px; }
.status-label { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #285544; border-radius: 20px; background: #172720; color: #6bda9c; font-size: 9.6px; font-weight: 800; }
.status-label.disabled { border-color: #513941; background: #2a2024; color: #bd8e99; }
.user-action-group { display: flex; gap: 6px; }
.user-action-group .button { min-height: 26px; padding: 0 8px; font-size: 9.6px; }
.recovery-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; margin-bottom: 20px; border: 1px solid #423a2f; border-radius: 8px; background: #24221e; }
.recovery-panel strong { color: #d6c49e; font-size: 12px; }
.recovery-panel p { margin: 4px 0 0; color: #978d7a; font-size: 10.8px; line-height: 1.4; }

.toast { position: fixed; right: 24px; bottom: 22px; z-index: 60; max-width: min(420px, calc(100vw - 36px)); padding: 11px 15px; border: 1px solid #3d6657; border-radius: 8px; background: #1c2b25; color: #8de1ba; box-shadow: 0 12px 34px #0008; font-size: 12px; }
.toast.error { border-color: #70414a; background: #332126; color: #ff9ca0; }
.notice { padding: 10px 12px; border-radius: 6px; font-size: 12px; line-height: 1.45; }
.notice-error { margin-top: 14px; border: 1px solid #70414a; background: #332126; color: #ff9ca0; }

.auth-wall { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; background: radial-gradient(720px 420px at 20% 10%, #43262859, transparent 67%), radial-gradient(620px 440px at 90% 100%, #34214844, transparent 67%), #111318; }
.auth-card { width: min(420px, 100%); padding: 28px; border: 1px solid #3c414c; border-radius: 13px; background: linear-gradient(145deg, #22252d, #191c22); box-shadow: 0 24px 70px #0006; }
.auth-brand { margin: 0 0 30px; }
.auth-view h1 { margin: 8px 0; color: #f1f2f5; font-size: 30px; letter-spacing: -.03em; }
.auth-view>.muted { margin: 0 0 18px; }
.form-stack { display: grid; gap: 12px; }
.form-stack label { gap: 6px; }
.form-stack .button { min-height: 38px; margin-top: 3px; }
.auth-foot { display: flex; align-items: center; gap: 7px; margin-top: 24px; padding-top: 13px; border-top: 1px solid #343842; color: #717887; font-size: 9.6px; font-weight: 800; letter-spacing: .08em; }
.online-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px #00d18f90; }
.text-button { display: block; margin: 13px auto 0; border: 0; background: transparent; color: #a984e6; font-size: 10.8px; font-weight: 700; text-decoration: underline; }
.recovery-reveal { display: grid; gap: 8px; padding: 13px; margin-top: 14px; border: 1px solid #705c32; border-radius: 7px; background: #30291d; }
.recovery-reveal .eyebrow { color: #f1c971; }
.recovery-reveal code { display: block; padding: 9px; border-radius: 5px; background: #171819; color: #f5e4b8; font: 700 12px ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.recovery-reveal p { margin: 0; color: #b4a478; font-size: 10.8px; line-height: 1.45; }

.modal { width: min(420px, calc(100% - 28px)); padding: 0; border: 1px solid #474c58; border-radius: 11px; background: #1e2129; color: var(--ink); box-shadow: 0 25px 80px #0009; }
.modal::backdrop { background: #050608b8; backdrop-filter: blur(3px); }
.modal-card { position: relative; display: grid; gap: 12px; padding: 24px; }
.modal-card h2 { margin: -5px 0 0; font-size: 24px; }
.modal-card .button { min-height: 36px; margin-top: 4px; }
.modal-close { position: absolute; right: 12px; top: 10px; width: 29px; height: 29px; border: 0; border-radius: 50%; background: #30343e; color: #c2c7d0; font-size: 22.8px; }
.modal-card small { color: #858c99; font-size: 10.8px; }
.modal-shade { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 15px; background: #07080be8; backdrop-filter: blur(3px); }
.modal-shade .modal-card { width: min(420px, 100%); border: 1px solid #474c58; border-radius: 11px; background: #1e2129; box-shadow: 0 25px 80px #0009; }

@media (max-width: 1050px) {
  .filter-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-copy small { max-width: 250px; white-space: normal; font-size: 8.4px; letter-spacing: .04em; line-height: 1.2; }
  .content-wrap { width: min(100% - 36px, 1800px); }
  .topbar, .subbar { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 720px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .brand-lockup { min-width: 0; }
  .app-shell .brand-copy small { display: none; }
  .auth-brand .brand-copy small { display: block; max-width: 230px; font-size: 8.4px; letter-spacing: .03em; line-height: 1.2; }
  .brand-copy strong { font-size: 14.4px; }
  .brand-mark { width: 32px; height: 32px; }
  .topbar-right { gap: 6px; }
  .sync-status { padding: 7px 8px; }
  .sync-status span { display: none; }
  .sync-button { min-height: 29px; padding: 0 8px; font-size: 9.6px; }
  .workspace-wrap { gap: 0; }
  .workspace-wrap>span { display: none; }
  .workspace-wrap select { max-width: 115px; }
  .user-chip { padding-right: 5px; }
  .user-chip #userLabel, .user-chip .chevron { display: none; }
  .subbar { align-items: flex-start; flex-direction: column; gap: 7px; padding: 8px 11px; }
  .main-nav { width: 100%; overflow-x: auto; }
  .nav-item { min-height: 34px; padding: 0 11px; font-size: 12px; }
  .subbar-meta { width: 100%; justify-content: space-between; }
  .content-wrap { width: calc(100% - 24px); margin-top: 17px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .heading-side { display: flex; align-items: center; flex-wrap: wrap; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .summary-row { gap: 8px; }
  .metric-card { min-height: 109px; padding: 12px 10px; }
  .metric-top { gap: 5px; font-size: 8.4px; }
  .metric-period { display: none; }
  .metric-value { margin-top: 15px; font-size: clamp(22.8px, 5vw, 31.2px); }
  .metric-caption { font-size: 9.6px; }
  .coverage-strip { align-items: flex-start; flex-direction: column; }
  .coverage-stats { padding-left: 37px; }
  .lookup-panel { padding: 14px 12px 10px; }
  .lookup-foot { align-items: flex-start; }
  .hint { max-width: 75%; align-items: flex-start; }
  .result-heading { padding: 12px; }
  .admin-grid { grid-template-columns: 1fr; }
  .workbook-form-foot { align-items: flex-start; flex-direction: column; }
  .workbook-form-foot .button { align-self: flex-end; }
  .fx-form { align-items: stretch; flex-direction: column; }
  .fx-form label, .fx-form label:last-of-type { min-width: 0; }
  .fx-form button { align-self: flex-start; }
  .recovery-panel { align-items: flex-start; flex-direction: column; }
  .app-footer { padding: 0 12px; font-size: 8.4px; }
}
@media (max-width: 440px) {
  body { min-width: 320px; }
  .nav-item { gap: 5px; padding: 0 8px; }
  .nav-symbol { display: none; }
  .metric-card { padding: 11px 7px; }
  .metric-top { font-size: 7.2px; letter-spacing: .04em; }
  .metric-value { font-size: clamp(18px, 4.6vw, 20px); }
  .metric-caption { font-size: 8.4px; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .search-field { width: 100%; }
  .compact-select { margin-left: 0; justify-content: space-between; }
  .auth-card { padding: 22px; }
}

/* Light is the default; the dark theme keeps the original ASPIRE palette. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] body { background: #f4f6f9; color: #202b3b; }
html[data-theme="light"] .app-shell { background: radial-gradient(1000px 360px at 0 0, #fbeeea 0, transparent 69%), #f4f6f9; }
html[data-theme="light"] .topbar { border-color: #e4e8ee; background: #ffffffed; box-shadow: 0 1px 4px #1a2b4210; backdrop-filter: blur(12px); }
html[data-theme="light"] .brand-copy strong { color: #253146; }
html[data-theme="light"] .brand-copy small { color: #778194; }
html[data-theme="light"] .sync-status { color: #3867a4; border-color: #d9e5f5; background: #f1f6fd; }
html[data-theme="light"] .sync-status.idle { color: #6c7687; border-color: #e1e5eb; background: #f7f8fa; }
html[data-theme="light"] .workspace-wrap select,
html[data-theme="light"] .user-chip,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .theme-toggle { border-color: #dfe4eb; background: #fff; color: #344054; }
html[data-theme="light"] .workspace-wrap select:hover,
html[data-theme="light"] .user-chip:hover,
html[data-theme="light"] .icon-button:hover,
html[data-theme="light"] .theme-toggle:hover { border-color: #bcc8d8; background: #f8fafc; }
html[data-theme="light"] .chevron { color: #707b8d; }
html[data-theme="light"] .subbar { border-color: #e3e7ed; background: linear-gradient(100deg, #fbf1ed, #fff 38%, #f8fafc 100%); }
html[data-theme="light"] .nav-item { color: #6c7687; }
html[data-theme="light"] .nav-item:hover { color: #29364a; background: #edf1f6; }
html[data-theme="light"] .nav-item.active { color: #fff; box-shadow: 0 5px 14px #d351bf2b; }
html[data-theme="light"] .subbar-meta { color: #7e899a; }
html[data-theme="light"] .source-chip { color: #536174; border-color: #dfe5ec; background: #fff; }
html[data-theme="light"] .page-heading h1 { color: #1c2738; }
html[data-theme="light"] .eyebrow { color: #798599; }
html[data-theme="light"] .muted { color: #687589; }
html[data-theme="light"] .refresh-label { color: #7c8799; }
html[data-theme="light"] .live-pill { border-color: #cce9de; background: #effaf5; color: #20855f; }
html[data-theme="light"] .secure-pill { border-color: #f3dfbd; background: #fff8ea; color: #95601b; }
html[data-theme="light"] .panel { border-color: #e0e5ec; background: #fff; box-shadow: 0 7px 24px #23364d0c; }
html[data-theme="light"] .panel-heading h2 { color: #3d4a5e; }
html[data-theme="light"] .panel-heading p { color: #7a879a; }
html[data-theme="light"] .subtle-badge { border-color: #e1e6ed; background: #f7f9fb; color: #687589; }
html[data-theme="light"] .subtle-badge.bad-status { border-color: #efc9cc; background: #fff3f3; color: #a53d46; }
html[data-theme="light"] .icon-blue { color: #3974c5; background: #eaf2ff; }
html[data-theme="light"] .icon-orange { color: #b66c17; background: #fff2df; }
html[data-theme="light"] .icon-purple { color: #8350ad; background: #f3eafb; }
html[data-theme="light"] .icon-teal { color: #178878; background: #e6f7f3; }
html[data-theme="light"] .icon-red { color: #ba424b; background: #fdebed; }
html[data-theme="light"] .filter-grid label,
html[data-theme="light"] .fx-form label,
html[data-theme="light"] .workbook-form label,
html[data-theme="light"] .inline-form label,
html[data-theme="light"] .form-stack label,
html[data-theme="light"] .modal-card label,
html[data-theme="light"] .feature-filter { color: #536174; }
html[data-theme="light"] .filter-grid label span,
html[data-theme="light"] .feature-filter > label span { color: #8994a5; }
html[data-theme="light"] .filter-grid input,
html[data-theme="light"] .filter-grid select,
html[data-theme="light"] .fx-form input,
html[data-theme="light"] .workbook-form input,
html[data-theme="light"] .inline-form input,
html[data-theme="light"] .form-stack input,
html[data-theme="light"] .modal-card input,
html[data-theme="light"] .compact-select select,
html[data-theme="light"] .search-field input { border-color: #d8dfe8; background: #fff; color: #253247; }
html[data-theme="light"] .filter-grid input:disabled,
html[data-theme="light"] .filter-grid select:disabled { background: #f1f3f6; color: #8b95a5; }
html[data-theme="light"] .feature-combobox { border-color: #d8dfe8; background: #fff; }
html[data-theme="light"] .feature-combobox:focus-within { border-color: #7da9ed; box-shadow: 0 0 0 3px #4e8df21c; }
html[data-theme="light"] .feature-chip { border-color: #ddcff4; background: #f6f0ff; color: #60429a; }
html[data-theme="light"] .feature-chip-remove { color: #866caf; }
html[data-theme="light"] .feature-chip-remove:hover { background: #e9defb; color: #483270; }
html[data-theme="light"] .exclude-customer-filter .feature-chip { border-color: #f2d5c6; background: #fff3ed; color: #995636; }
html[data-theme="light"] .exclude-customer-filter .feature-chip-remove { color: #b9795a; }
html[data-theme="light"] .exclude-customer-filter .feature-chip-remove:hover { background: #ffe2d4; color: #7f3d21; }
html[data-theme="light"] .lookup-chevron { color: #778397; }
html[data-theme="light"] .lookup-options { border-color: #dce3ec; background: #fff; box-shadow: 0 12px 28px #25364d1a; }
html[data-theme="light"] .lookup-option { color: #344258; }
html[data-theme="light"] .lookup-option:hover,
html[data-theme="light"] .lookup-option.active { background: #eef3fa; color: #1e2d43; }
html[data-theme="light"] .lookup-option[aria-selected="true"] { background: #f1eaff; color: #583589; }
html[data-theme="light"] .lookup-no-options { color: #758196; }
html[data-theme="light"] select option { background: #fff; color: #263449; }
html[data-theme="light"] input::placeholder { color: #929dae; }
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus { border-color: #7da9ed; box-shadow: 0 0 0 3px #4e8df21c; }
html[data-theme="light"] .lookup-foot { border-color: #e7ebf0; }
html[data-theme="light"] .hint { color: #748196; }
html[data-theme="light"] .hint>span:first-child { background: #edf2f7; color: #5c6c82; }
html[data-theme="light"] .hint b { color: #445269; }
html[data-theme="light"] .button-secondary { border-color: #d7e3f3; background: #f3f7fd; color: #3668aa; }
html[data-theme="light"] .button-secondary:hover { border-color: #b8cde9; background: #e8f1fc; }
html[data-theme="light"] .button-quiet { border-color: #dce2ea; background: #fff; color: #59677b; }
html[data-theme="light"] .button-quiet:hover { background: #f3f6f9; color: #29374d; }
html[data-theme="light"] .button-danger { border-color: #f0d2d4; background: #fff5f5; color: #b53e47; }
html[data-theme="light"] .button-danger:hover { background: #ffebec; }
html[data-theme="light"] .metric-card { border-color: #e0e5ec; background: linear-gradient(145deg, #fff, #f8fafc); box-shadow: 0 5px 16px #21354b0b; }
html[data-theme="light"] .metric-top { color: #758196; }
html[data-theme="light"] .metric-period { color: #8993a2; }
html[data-theme="light"] .metric-value { color: #18263b; }
html[data-theme="light"] .metric-average .metric-value { color: #0e9b85; }
html[data-theme="light"] .metric-value .money-decimal { color: #8391a4; }
html[data-theme="light"] .metric-average .metric-value .money-decimal { color: #59b8aa; }
html[data-theme="light"] .metric-caption { color: #778398; }
html[data-theme="light"] .metric-date { color: #49586e; }
html[data-theme="light"] .metric-caption-separator { color: #7c8798; }
html[data-theme="light"] .metric-customer { color: #25344b; }
html[data-theme="light"] .coverage-strip { border-color: #dfe7ef; background: linear-gradient(100deg, #f0f6fb, #f8fafc); }
html[data-theme="light"] .coverage-icon { border-color: #d6e5ef; background: #e9f4fa; color: #277ba1; }
html[data-theme="light"] .coverage-main strong { color: #34445a; }
html[data-theme="light"] .coverage-main p { color: #718096; }
html[data-theme="light"] .coverage-stats { color: #6e7b8e; }
html[data-theme="light"] .coverage-stats b { color: #35465d; }
html[data-theme="light"] .coverage-divider { background: #d7dee7; }
html[data-theme="light"] .result-heading { border-color: #e6eaf0; }
html[data-theme="light"] .result-count { color: #718096; }
html[data-theme="light"] .data-table thead { background: #f4f6f9; }
html[data-theme="light"] .data-table th { border-color: #e1e6ed; color: #6c788b; }
html[data-theme="light"] .data-table td { border-color: #e8ecf1; color: #3d4b60; }
html[data-theme="light"] .data-table tbody tr:hover td { background: #f7f9fc; }
html[data-theme="light"] .data-table td.price-cell { color: #25364d; }
html[data-theme="light"] .data-table td.converted-cell { color: #087f70; }
html[data-theme="light"] .data-table .money-decimal { color: #8290a3; }
html[data-theme="light"] .data-table td.converted-cell .money-decimal { color: #5a9c91; }
html[data-theme="light"] .data-table td.missing-cell { color: #9b620b; }
html[data-theme="light"] .empty-cell { color: #788498 !important; }
html[data-theme="light"] .table-foot,
html[data-theme="light"] .app-footer { border-color: #e4e8ee; color: #788497; }
html[data-theme="light"] .search-field { border-color: #d8dfe8; background: #fff; color: #778398; }
html[data-theme="light"] .pager { border-color: #e4e8ee; color: #66758a; }
html[data-theme="light"] .fx-callout { border-color: #e5d9f2; background: linear-gradient(105deg, #faf5ff, #f8f7fb); }
html[data-theme="light"] .fx-callout-icon { background: #efe3fb; color: #8250b5; }
html[data-theme="light"] .fx-callout strong { color: #58416e; }
html[data-theme="light"] .fx-callout p { color: #776985; }
html[data-theme="light"] .fx-panel>.panel-heading,
html[data-theme="light"] .admin-panel>.panel-heading,
html[data-theme="light"] .users-panel>.panel-heading { border-color: #e6eaf0; }
html[data-theme="light"] .workbook-file strong { color: #35445a; }
html[data-theme="light"] .workbook-file small,
html[data-theme="light"] .workbook-form-foot span { color: #748196; }
html[data-theme="light"] .file-icon { background: #e8f6ef; color: #218958; }
html[data-theme="light"] .inline-error,
html[data-theme="light"] .notice-error { border-color: #efc9cc; background: #fff3f3; color: #a53d46; }
html[data-theme="light"] .workspace-row { border-color: #e0e5ec; background: #f8fafc; color: #3e4d62; }
html[data-theme="light"] .workspace-row small { color: #7d899b; }
html[data-theme="light"] .workspace-access { border-color: #dfe5ec; }
html[data-theme="light"] .workspace-access legend { color: #58677c; }
html[data-theme="light"] .workspace-checks label { color: #4d5c71; }
html[data-theme="light"] .credentials-card { border-color: #edddaf; background: #fff9e9; color: #765717; }
html[data-theme="light"] .credentials-card p { color: #8f7a48; }
html[data-theme="light"] .credentials-card code,
html[data-theme="light"] .credentials-card>div>span { background: #fff; color: #674b13; }
html[data-theme="light"] .status-label { border-color: #cce8d9; background: #eef9f2; color: #23784a; }
html[data-theme="light"] .status-label.disabled { border-color: #e8d5d8; background: #fcf2f3; color: #965d68; }
html[data-theme="light"] .recovery-panel { border-color: #ecdfc6; background: #fffaf0; }
html[data-theme="light"] .recovery-panel strong { color: #725c31; }
html[data-theme="light"] .recovery-panel p { color: #8a7d63; }
html[data-theme="light"] .toast { border-color: #cce8d9; background: #f0faf4; color: #23784a; box-shadow: 0 12px 34px #26374b1a; }
html[data-theme="light"] .toast.error { border-color: #efc9cc; background: #fff3f3; color: #a53d46; }
html[data-theme="light"] .auth-wall { background: radial-gradient(720px 420px at 20% 10%, #fbe9e3, transparent 67%), radial-gradient(620px 440px at 90% 100%, #f0e8fb, transparent 67%), #f4f6f9; }
html[data-theme="light"] .auth-card { border-color: #e0e5ec; background: #fff; box-shadow: 0 24px 70px #25364d14; }
html[data-theme="light"] .auth-view h1 { color: #1f2b3d; }
html[data-theme="light"] .auth-foot { border-color: #e5e9ef; color: #778398; }
html[data-theme="light"] .text-button { color: #7246a7; }
html[data-theme="light"] .recovery-reveal { border-color: #edddaf; background: #fff9e9; }
html[data-theme="light"] .recovery-reveal .eyebrow { color: #85631e; }
html[data-theme="light"] .recovery-reveal code { background: #fff; color: #624811; }
html[data-theme="light"] .recovery-reveal p { color: #8b784e; }
html[data-theme="light"] .modal { border-color: #dce2ea; background: #fff; color: #253247; box-shadow: 0 25px 80px #25364d26; }
html[data-theme="light"] .modal::backdrop { background: #25324766; }
html[data-theme="light"] .modal-close { background: #eef1f5; color: #556276; }
html[data-theme="light"] .modal-card small { color: #778398; }
html[data-theme="light"] .modal-shade { background: #25324770; }
html[data-theme="light"] .modal-shade .modal-card { border-color: #dce2ea; background: #fff; box-shadow: 0 25px 80px #25364d26; }
html[data-theme="light"] .theme-toggle { min-height: 31px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid #dfe4eb; border-radius: 18px; background: #fff; color: #344054; font-size: 10.8px; font-weight: 750; white-space: nowrap; transition: background .15s, border-color .15s; }
html[data-theme="light"] .theme-toggle span:first-child { font-size: 15.6px; line-height: 1; }
html[data-theme="light"] .theme-toggle:hover { border-color: #bcc8d8; background: #f8fafc; }
html[data-theme="dark"] .theme-toggle { min-height: 31px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid #353a45; border-radius: 18px; background: #1c1f26; color: #dadde5; font-size: 10.8px; font-weight: 750; white-space: nowrap; transition: background .15s, border-color .15s; }
html[data-theme="dark"] .theme-toggle:hover { border-color: #646b7b; background: #292d36; }
html[data-theme="dark"] .theme-toggle span:first-child { font-size: 15.6px; line-height: 1; }
html[data-theme] .theme-toggle:focus-visible { outline: 3px solid #4e8df266; outline-offset: 2px; }
.tool-type-tabs-wrap { grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; }
.tool-type-tabs-title { color: #969ca8; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; }
.tool-type-tabs { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; padding: 1px 1px 3px; }
.tool-type-tab { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 37px; flex: 0 0 auto; padding: 0 13px; border: 1px solid #3b404b; border-radius: 7px; background: #20232a; color: #c6cad3; font-size: 12px; font-weight: 700; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.tool-type-tab:hover:not(:disabled) { border-color: #665482; background: #292433; color: #f1e9fb; }
.tool-type-tab[aria-pressed="true"] { border-color: #7856a8; background: linear-gradient(110deg, #3a2d50, #312940); color: #fff; box-shadow: 0 2px 9px #1e122744; }
.tool-type-tab:disabled { opacity: .45; cursor: not-allowed; }
.tool-type-tab-quantity { padding: 3px 6px; border-radius: 9px; background: #ffffff12; color: #aeb3c0; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tool-type-tab[aria-pressed="true"] .tool-type-tab-quantity { background: #ffffff20; color: #eee5fa; }
html[data-theme="light"] .tool-type-tabs-title { color: #68768a; }
html[data-theme="light"] .tool-type-tab { border-color: #dce2ea; background: #fff; color: #46546a; }
html[data-theme="light"] .tool-type-tab:hover:not(:disabled) { border-color: #c9b8e4; background: #f8f4fc; color: #513579; }
html[data-theme="light"] .tool-type-tab[aria-pressed="true"] { border-color: #c9b7e3; background: linear-gradient(110deg, #f1eafb, #f8f4fd); color: #513579; box-shadow: 0 2px 8px #6f51a012; }
html[data-theme="light"] .tool-type-tab-quantity { background: #eff2f6; color: #69768a; }
html[data-theme="light"] .tool-type-tab[aria-pressed="true"] .tool-type-tab-quantity { background: #e5d9f3; color: #654690; }
html[data-theme="light"] .tool-type-tab:disabled { background: #f5f6f8; color: #8994a5; }
@media (max-width: 720px) {
  .tool-type-tabs { gap: 6px; }
  .tool-type-tab { min-height: 35px; padding: 0 10px; font-size: 11.5px; }
}
.filter-grid { row-gap: 16px; column-gap: 14px; }
.filter-grid label, .feature-filter { font-size: 12px; line-height: 1.25; }
.filter-grid label span, .feature-filter > label span { font-size: 10px; }
.size-filter, .blade-filter { grid-column: span 2; }
.size-filter { display: grid; align-content: start; gap: 6px; min-width: 0; }
.size-filter-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.size-filter-title { align-self: flex-start; color: #969ca8; font-size: 12px; font-weight: 800; line-height: 1.25; letter-spacing: .03em; white-space: nowrap; }
.size-unit-toggle { display: inline-flex; flex: 0 0 auto; padding: 2px; border: 1px solid #3b404b; border-radius: 7px; background: #171a20; }
.size-unit-toggle button { min-height: 28px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; color: #9299a7; font: inherit; font-size: 10.4px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.size-unit-toggle button[aria-pressed="true"] { background: #383044; color: #f0e6fb; box-shadow: 0 1px 3px #0003; }
.size-filter-controls { display: grid; grid-template-columns: minmax(175px, 1.1fr) minmax(190px, 1fr); align-items: end; gap: 16px; min-width: 0; }
.size-range-panel { display: grid; gap: 7px; min-width: 0; }
.size-range-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.size-range-meta output { overflow: hidden; color: #e1e5ed; font-size: 13px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.size-range-meta span { color: #858d9c; font-size: 10.2px; font-weight: 550; white-space: nowrap; }
.filter-grid input.size-range { height: 48px; min-height: 48px; padding: 0 3px; border: 0; border-radius: 0; background: transparent; accent-color: #9a76c9; appearance: none; cursor: pointer; }
.filter-grid input.size-range::-webkit-slider-runnable-track { height: 13px; border: 1px solid #424957; border-radius: 999px; background: linear-gradient(90deg, #9873c5 0 var(--size-range-progress, 0%), #343a46 var(--size-range-progress, 0%) 100%); }
.filter-grid input.size-range::-webkit-slider-thumb { width: 27px; height: 27px; margin-top: -8px; appearance: none; border: 3px solid #f5f3f8; border-radius: 50%; background: #8864b4; box-shadow: 0 2px 5px #17131e55; }
.filter-grid input.size-range::-moz-range-track { height: 13px; border: 1px solid #424957; border-radius: 999px; background: #343a46; }
.filter-grid input.size-range::-moz-range-progress { height: 13px; border-radius: 999px; background: #9873c5; }
.filter-grid input.size-range::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid #f5f3f8; border-radius: 50%; background: #8864b4; box-shadow: 0 2px 5px #17131e55; }
.filter-grid input.size-range:focus-visible { outline: 3px solid #8a68b6; outline-offset: 5px; }
.filter-grid input.size-range:disabled { opacity: .42; cursor: not-allowed; }
.size-search input { height: 44px; font-size: 13px; }
.blade-filter { display: grid; align-content: start; gap: 6px; min-width: 0; color: #969ca8; font-size: 12px; font-weight: 800; line-height: 1.25; letter-spacing: .03em; }
.blade-filter-heading { display: grid; justify-items: start; gap: 3px; }
.blade-filter-heading span:last-child { color: #858d9c; font-size: 10.2px; font-weight: 550; }
.blade-cards { display: flex; align-items: stretch; flex-wrap: wrap; gap: 9px; min-height: 56px; overflow-x: auto; padding: 2px 1px 4px; }
.blade-card { display: grid; place-content: center; justify-items: center; gap: 3px; min-width: 76px; min-height: 52px; padding: 6px 12px; border: 1px solid #3b404b; border-radius: 9px; background: #20232a; color: #d5d9e2; box-shadow: 0 1px 3px #0002; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.blade-card strong { font-size: 14px; font-weight: 800; line-height: 1.1; }
.blade-card span { color: #858d9c; font-size: 9.5px; font-weight: 600; letter-spacing: .02em; }
.blade-card:hover:not(:disabled) { border-color: #8061ab; background: #292433; }
.blade-card[aria-pressed="true"] { border-color: #8968b5; background: linear-gradient(110deg, #3a2d50, #312940); color: #fff; box-shadow: 0 2px 8px #1e122733; }
.blade-card[aria-pressed="true"] span { color: #ded0ee; }
.blade-card:disabled { opacity: .45; cursor: not-allowed; }
.blade-card-empty { align-self: start; display: inline-flex; align-items: center; min-height: 46px; padding: 0; color: #858d9c; font-size: 11px; font-weight: 550; letter-spacing: 0; }
.filter-grid label .size-range-meta span { margin-left: 0; font-size: 9.5px; }
.size-range:focus-visible, .blade-card:focus-visible { outline: 3px solid #8a68b6; outline-offset: 2px; }
.size-nearest-option { color: #a7d7c4 !important; font-weight: 750 !important; }
.visually-hidden-select { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
html[data-theme="light"] .size-filter-title { color: #536174; }
html[data-theme="light"] .size-unit-toggle { border-color: #d8dfe8; background: #f3f5f8; }
html[data-theme="light"] .size-unit-toggle button { color: #66758a; }
html[data-theme="light"] .size-unit-toggle button[aria-pressed="true"] { background: #fff; color: #54377e; box-shadow: 0 1px 4px #26344924; }
html[data-theme="light"] .size-nearest-option { color: #16734f !important; }
html[data-theme="light"] .size-range-meta output { color: #344258; }
html[data-theme="light"] .size-range-meta span,
html[data-theme="light"] .blade-filter-heading span:last-child { color: #7c8899; }
html[data-theme="light"] .size-range-meta span { margin-left: 0; font-size: 9.5px; }
html[data-theme="light"] .filter-grid input.size-range { background: transparent; accent-color: #7854a7; }
html[data-theme="light"] .filter-grid input.size-range::-webkit-slider-runnable-track { border-color: #d4dce7; background: linear-gradient(90deg, #8a65ba 0 var(--size-range-progress, 0%), #dce3ed var(--size-range-progress, 0%) 100%); }
html[data-theme="light"] .filter-grid input.size-range::-webkit-slider-thumb { border-color: #fff; background: #7955a8; }
html[data-theme="light"] .filter-grid input.size-range::-moz-range-track { border-color: #d4dce7; background: #dce3ed; }
html[data-theme="light"] .filter-grid input.size-range::-moz-range-progress { background: #8a65ba; }
html[data-theme="light"] .filter-grid input.size-range::-moz-range-thumb { border-color: #fff; background: #7955a8; }
html[data-theme="light"] .blade-filter { color: #536174; }
html[data-theme="light"] .blade-card { border-color: #d8dfe8; background: #fff; color: #405069; }
html[data-theme="light"] .blade-card:hover:not(:disabled) { border-color: #c9b8e3; background: #f8f4fc; }
html[data-theme="light"] .blade-card[aria-pressed="true"] { border-color: #c9b7e3; background: linear-gradient(110deg, #f1eafb, #f8f4fd); color: #513579; box-shadow: 0 2px 8px #6f51a012; }
html[data-theme="light"] .blade-card[aria-pressed="true"] span { color: #73569a; }
html[data-theme="light"] .blade-card span,
html[data-theme="light"] .blade-card-empty { color: #758196; }
html[data-theme="light"] .blade-card-empty { color: #758196; }
.button-clear { min-height: 36px; border-color: #e9b6b8; background: #fff0f0; color: #a33b43; }
.button-clear:hover { border-color: #dc969b; background: #ffe3e4; color: #8c2831; }
html[data-theme="light"] .button-clear { border-color: #efc4c6; background: #fff1f1; color: #a83e47; }
html[data-theme="light"] .button-clear:hover { border-color: #e4a5a9; background: #ffe3e5; color: #8d2932; }
html[data-theme="dark"] .button-clear { border-color: #754047; background: #382327; color: #f1a8ae; }
html[data-theme="dark"] .button-clear:hover { border-color: #9a535c; background: #48282e; color: #ffc0c4; }
@media (max-width: 720px) {
  .theme-toggle { width: 30px; min-width: 30px; padding: 0 !important; }
  .theme-toggle span:last-child { display: none; }
}
@media (max-width: 440px) {
  .size-filter-controls { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .size-range-meta { min-height: 18px; }
  .size-unit-toggle button { min-height: 28px; }
  .blade-card { min-width: 64px; }
}
@media (min-width: 1051px) and (max-width: 1280px) {
  .filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Compact lookup: filters share the open row beside categories; size and blades use the full row below. */
.filter-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.lookup-top-layout { display: grid; grid-template-columns: minmax(360px, .85fr) minmax(0, 2fr); align-items: start; gap: 18px; min-width: 0; }
.tool-type-tabs-wrap { grid-column: auto; display: grid; align-content: start; gap: 8px; min-width: 0; }
.tool-type-tabs { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; min-width: 0; overflow: visible; padding: 1px 1px 3px; }
.lookup-side-controls { display: grid; align-content: start; min-width: 0; padding: 10px; border: 1px solid #343a46; border-radius: 10px; background: #1b1e24; }
.lookup-side-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 10px 12px; min-width: 0; }
.lookup-side-grid > label,
.lookup-side-grid .feature-filter > label { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; row-gap: 4px; font-size: 11.5px; line-height: 1.25; }
.lookup-side-grid > label > .lookup-combobox { flex: 0 0 100%; }
.lookup-primary-controls { display: grid; align-content: start; gap: 12px; min-width: 0; }
.lookup-primary-controls > .size-filter,
.lookup-primary-controls > .blade-filter { grid-column: auto; }
.size-filter { position: relative; display: grid; align-content: start; gap: 6px; min-width: 0; }
.size-filter-heading { position: relative; display: block; min-height: 16px; }
.size-filter-title { align-self: flex-start; color: #969ca8; font-size: 12px; font-weight: 800; line-height: 1.25; letter-spacing: .03em; white-space: nowrap; }
.size-unit-toggle { position: absolute; z-index: 1; top: -8px; right: 0; }
.size-filter-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 220px); align-items: start; gap: 16px; min-width: 0; }
.size-range-panel { display: grid; gap: 6px; min-width: 0; }
.size-range-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.size-range-meta output { overflow: hidden; color: #e1e5ed; font-size: 13px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.size-range-meta span { color: #858d9c; font-size: 10.2px; font-weight: 550; white-space: nowrap; }
.filter-grid input.size-range { height: 44px; min-height: 44px; padding: 0 3px; border: 0; border-radius: 0; background: transparent; accent-color: #9a76c9; appearance: none; cursor: pointer; }
.filter-grid input.size-range::-webkit-slider-runnable-track { height: 12px; border: 1px solid #424957; border-radius: 999px; background: linear-gradient(90deg, #9873c5 0 var(--size-range-progress, 0%), #343a46 var(--size-range-progress, 0%) 100%); }
.filter-grid input.size-range::-webkit-slider-thumb { width: 25px; height: 25px; margin-top: -7px; appearance: none; border: 3px solid #f5f3f8; border-radius: 50%; background: #8864b4; box-shadow: 0 2px 5px #17131e55; }
.filter-grid input.size-range::-moz-range-track { height: 12px; border: 1px solid #424957; border-radius: 999px; background: #343a46; }
.filter-grid input.size-range::-moz-range-progress { height: 12px; border-radius: 999px; background: #9873c5; }
.filter-grid input.size-range::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid #f5f3f8; border-radius: 50%; background: #8864b4; box-shadow: 0 2px 5px #17131e55; }
.filter-grid input.size-range:focus-visible { outline: 3px solid #8a68b6; outline-offset: 5px; }
.filter-grid input.size-range:disabled { opacity: .42; cursor: not-allowed; }
.size-search { align-self: start; width: 100%; max-width: 220px; margin-top: 20px; }
.size-search input { height: 42px; font-size: 13px; }
.blade-filter { display: grid; align-content: start; gap: 6px; min-width: 0; color: #969ca8; font-size: 12px; font-weight: 800; line-height: 1.25; letter-spacing: .03em; }
.blade-filter-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.blade-filter-heading span:last-child { color: #858d9c; font-size: 10.5px; font-weight: 550; text-align: right; }
.blade-cards { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; min-height: 54px; overflow-x: auto; padding: 1px 1px 3px; }
.blade-cards.is-empty { min-height: 0; overflow: visible; padding: 0; }
.blade-card { display: grid; place-content: center; justify-items: center; gap: 3px; min-width: 72px; min-height: 48px; padding: 5px 10px; border: 1px solid #d8dfe8; border-radius: 8px; background: #fff; color: #405069; box-shadow: 0 1px 3px #26344912; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.blade-card strong { font-size: 13px; font-weight: 800; line-height: 1.1; }
.blade-card span { color: #758196; font-size: 9px; font-weight: 600; letter-spacing: .02em; }
.blade-card:hover:not(:disabled) { border-color: #c9b8e3; background: #f8f4fc; }
.blade-card[aria-pressed="true"] { border-color: #c9b7e3; background: linear-gradient(110deg, #f1eafb, #f8f4fd); color: #513579; box-shadow: 0 2px 8px #6f51a012; }
.blade-card[aria-pressed="true"] span { color: #73569a; }
.blade-card:disabled { opacity: .45; cursor: not-allowed; }
.others-type-card { display: flex; align-items: center; gap: 8px; max-width: 100%; min-height: 43px; padding: 3px; border: 1px solid #dce2ea; border-radius: 8px; background: #f8fafc; transition: background .15s, border-color .15s; }
.others-type-card.is-active { border-color: #c9b7e3; background: #f8f4fd; }
.others-type-card .tool-type-tab { flex: 0 0 auto; }
.others-type-picker { flex: 1 1 210px; width: clamp(190px, 18vw, 280px); min-width: 0; }
.others-type-picker[hidden] { display: none; }
.others-type-picker input { height: 34px; font-size: 12px; }
html[data-theme="light"] .lookup-side-controls { border-color: #e0e6ee; background: #f8fafc; }
html[data-theme="light"] .size-filter-title,
html[data-theme="light"] .blade-filter { color: #536174; }
html[data-theme="light"] .size-range-meta output { color: #344258; }
html[data-theme="light"] .size-range-meta span,
html[data-theme="light"] .blade-filter-heading span:last-child { color: #7c8899; }
html[data-theme="light"] .filter-grid input.size-range { background: transparent; accent-color: #7854a7; }
html[data-theme="light"] .filter-grid input.size-range::-webkit-slider-runnable-track { border-color: #d4dce7; background: linear-gradient(90deg, #8a65ba 0 var(--size-range-progress, 0%), #dce3ed var(--size-range-progress, 0%) 100%); }
html[data-theme="light"] .filter-grid input.size-range::-webkit-slider-thumb { border-color: #fff; background: #7955a8; }
html[data-theme="light"] .filter-grid input.size-range::-moz-range-track { border-color: #d4dce7; background: #dce3ed; }
html[data-theme="light"] .filter-grid input.size-range::-moz-range-progress { background: #8a65ba; }
html[data-theme="light"] .filter-grid input.size-range::-moz-range-thumb { border-color: #fff; background: #7955a8; }
html[data-theme="dark"] .blade-card { border-color: #3b404b; background: #20232a; color: #d5d9e2; }
html[data-theme="dark"] .blade-card span { color: #858d9c; }
html[data-theme="dark"] .blade-card:hover:not(:disabled) { border-color: #8061ab; background: #292433; }
html[data-theme="dark"] .blade-card[aria-pressed="true"] { border-color: #8968b5; background: linear-gradient(110deg, #3a2d50, #312940); color: #fff; }
html[data-theme="dark"] .blade-card[aria-pressed="true"] span { color: #ded0ee; }
html[data-theme="dark"] .others-type-card { border-color: #3b404b; background: #20232a; }
html[data-theme="dark"] .others-type-card.is-active { border-color: #7856a8; background: #292433; }
@media (max-width: 1050px) {
  .lookup-top-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lookup-side-controls { padding: 9px; }
  .lookup-side-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px 10px; }
}
@media (max-width: 720px) {
  .lookup-side-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .others-type-card { width: 100%; flex-wrap: wrap; }
  .others-type-picker { flex: 1 1 190px; width: 100%; }
}
@media (max-width: 440px) {
  .lookup-side-grid { grid-template-columns: minmax(0, 1fr); }
  .size-filter-controls { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .size-search { max-width: none; margin-top: 0; }
  .size-unit-toggle button { min-height: 28px; }
  .blade-card { min-width: 62px; }
}

/* Keep the established lookup styling; place the optional filters panel alongside it. */
.filter-grid { display: block; }
.lookup-controls-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(400px, 1fr); align-items: start; gap: 20px; min-width: 0; }
.lookup-primary-controls { display: grid; align-content: start; gap: 16px; min-width: 0; }
.tool-type-tabs-wrap { grid-column: auto; display: grid; align-content: start; gap: 8px; min-width: 0; }
.tool-type-tabs { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; align-items: start; gap: 8px; min-width: 0; overflow: visible; padding: 1px 1px 3px; }
.tool-type-tabs > .tool-type-tab { width: max-content; }
.others-type-card { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; align-items: center; width: 100%; max-width: none; min-width: 0; gap: 8px; }
.others-type-picker { flex: 1 1 0; width: auto; max-width: none; min-width: 0; }
.others-type-picker[hidden] { display: none; }
.others-type-picker input { width: 100%; }
.lookup-side-controls { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid #343a46; border-radius: 10px; background: #1b1e24; }
.lookup-side-title { margin: 0; color: #d4d9e3; font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: .025em; }
.lookup-side-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px 14px; min-width: 0; }
.lookup-side-grid > label,
.lookup-side-grid .feature-filter > label { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; row-gap: 4px; min-width: 0; font-size: 12px; line-height: 1.25; }
.lookup-side-grid > label > .lookup-combobox { flex: 0 0 100%; }
.lookup-side-grid .feature-filter { display: grid; gap: 6px; min-width: 0; }
.lookup-side-grid .feature-filter > .lookup-combobox { min-width: 0; }
.lookup-side-grid .feature-filter > label span { font-size: 10px; }
.lookup-side-title + .lookup-side-grid { margin-top: 0; }
html[data-theme="light"] .lookup-side-controls { border-color: #e0e6ee; background: #f8fafc; }
html[data-theme="light"] .lookup-side-title { color: #35445a; }
html[data-theme="dark"] .lookup-side-title { color: #d4d9e3; }
@media (max-width: 1050px) {
  .lookup-controls-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lookup-side-controls { padding: 11px; }
  .lookup-side-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tool-type-tabs { grid-template-columns: repeat(2, max-content); }
  .others-type-card { grid-column: 1 / -1; }
  .lookup-side-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .tool-type-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-type-tabs > .tool-type-tab { width: 100%; }
  .others-type-card { width: 100%; }
  .lookup-side-grid { grid-template-columns: minmax(0, 1fr); }
  .size-filter-controls { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .size-search { max-width: none; margin-top: 0; }
}

/* Keep the category tabs together; search other tool types on the line below. */
.tool-type-tabs { grid-template-columns: repeat(4, max-content); }
.others-type-search-row { grid-column: 1 / -1; width: 100%; min-width: 0; }
.others-type-picker { width: 100%; max-width: none; }
.others-type-picker input { width: 100%; }
@media (max-width: 720px) {
  .tool-type-tabs { grid-template-columns: repeat(2, max-content); }
  .others-type-search-row { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 440px) {
  .tool-type-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-type-tabs > .tool-type-tab { width: 100%; }
}

/* Give the three primary product filters distinct, easy-to-scan boundaries. */
.lookup-primary-controls > .tool-type-tabs-wrap,
.lookup-primary-controls > .size-filter,
.lookup-primary-controls > .blade-filter {
  padding: 11px 12px;
  border: 1px solid #3b4452;
  border-radius: 9px;
  background: #1e222a;
}
html[data-theme="light"] .lookup-primary-controls > .tool-type-tabs-wrap,
html[data-theme="light"] .lookup-primary-controls > .size-filter,
html[data-theme="light"] .lookup-primary-controls > .blade-filter {
  border-color: #d8e0eb;
  background: #fbfcfe;
}

/* Overview: regional sales exploration, charts and scoped team messaging. */
.overview-symbol { display: inline-grid; place-items: center; }
.overview-symbol svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.overview-filterbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 13px 15px; margin-bottom: 14px; overflow: visible; }
.overview-filterbar label { display: grid; gap: 5px; min-width: 145px; color: #9098a7; font-size: 10.8px; font-weight: 800; }
.overview-filterbar select { min-width: 145px; height: 36px; padding: 0 28px 0 10px; border: 1px solid #3b404b; border-radius: 6px; background: #16191f; color: #e2e5eb; font-size: 12px; }
.overview-filterbar button { margin-left: auto; }
.overview-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 14px; }
.overview-metric { display: grid; align-content: start; gap: 7px; min-width: 0; min-height: 112px; padding: 15px 17px; border: 1px solid #363d49; border-radius: 9px; background: linear-gradient(145deg, #20252e, #191d24); }
.overview-metric > span { color: #8992a1; font-size: 10px; font-weight: 850; letter-spacing: .085em; }
.overview-metric > strong { color: #eef2f7; font-size: clamp(22px, 2vw, 31px); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; overflow-wrap: anywhere; }
.overview-metric > small { color: #8b94a3; font-size: 10.8px; line-height: 1.4; }
.overview-metric .money-decimal, .region-rank-value .money-decimal, .country-detail-value .money-decimal { color: #99a7b8; font-size: .92em; font-weight: 600; }
.overview-metric-best .money-decimal { color: #82cbb4; }
.overview-metric-sales { border-top: 2px solid #3b82f6; }
.overview-metric-best { border-top: 2px solid #10b981; }
.overview-metric-best > strong { color: #10b981; }
.overview-map-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(270px, .75fr); gap: 14px; margin-bottom: 14px; align-items: stretch; }
.overview-globe-panel, .overview-region-panel, .overview-chart-panel { min-width: 0; }
.overview-globe-panel > .panel-heading, .overview-region-panel > .panel-heading, .overview-chart-panel > .panel-heading, .overview-chat-panel > .panel-heading { min-height: 64px; padding: 12px 15px; border-bottom: 1px solid #343a45; }
.overview-globe-panel > .panel-heading .button { min-height: 30px; }
.globe-content { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(210px, .8fr); gap: 12px; align-items: center; padding: 10px 14px 5px; }
.globe-visual { min-width: 0; }
.sales-globe { display: block; width: 100%; max-height: 570px; touch-action: none; cursor: grab; user-select: none; }
.sales-globe.is-dragging { cursor: grabbing; }
.globe-sphere { fill: #fff; stroke: #000; stroke-width: 1.8; }
.country-shape { fill: none; stroke: #000; stroke-width: .9; vector-effect: non-scaling-stroke; pointer-events: none; }
.india-state-shape { fill: transparent; stroke: #000; stroke-width: .95; vector-effect: non-scaling-stroke; pointer-events: none; }
.india-country-outline { fill: none; stroke: #000; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.india-world-mask { fill: #fff; stroke: none; pointer-events: none; }
.india-world-outline { fill: none; stroke: #000; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.globe-land-swatch { width: 14px; height: 9px; border: 1px solid #000; border-radius: 2px; background: transparent; display: inline-block; }
.globe-sales-high, .globe-sales-medium, .globe-sales-low { border: 1px solid #fff; border-radius: 50%; display: inline-block; }
.globe-sales-high { width: 12px; height: 12px; background: #047857; }
.globe-sales-medium { width: 9px; height: 9px; background: #16a34a; }
.globe-sales-low { width: 6px; height: 6px; background: #86efac; border-color: #15803d; }
.sales-country-marker { stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: pointer; transition: filter .12s, stroke-width .12s; }
.sales-country-marker-low { fill: #86efac; }
.sales-country-marker-medium { fill: #16a34a; }
.sales-country-marker-high { fill: #047857; }
.sales-country-marker:hover, .sales-country-marker:focus { filter: brightness(.88); stroke: #064e3b; stroke-width: 1.8; outline: none; }
.sales-country-marker.is-selected { stroke: #064e3b; stroke-width: 2.4; filter: drop-shadow(0 0 2px #10b981); }
.globe-shadow { display: none; }
.globe-marker { cursor: pointer; stroke: #ffffff; stroke-width: 1.5; transition: r .18s, fill .18s, opacity .18s; }
.globe-marker:hover, .globe-marker:focus { stroke: #102e35; stroke-width: 3; outline: none; }
.globe-marker.is-selected { stroke: #0f172a; stroke-width: 3; }
.globe-marker-label { fill: #f5fbff; font-size: 10px; font-weight: 750; paint-order: stroke; stroke: #1f2937; stroke-width: 2.4px; stroke-linejoin: round; pointer-events: none; }
.globe-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 1px 11px 9px; color: #818b99; font-size: 10px; }
.globe-legend span { display: inline-flex; align-items: center; gap: 6px; }
.globe-legend i { flex: 0 0 auto; }
.country-detail { min-height: 260px; padding: 15px; border: 1px solid #333b47; border-top: 3px solid #10b981; border-radius: 9px; background: linear-gradient(150deg, #202832, #1a2028); }
.detail-empty { display: grid; justify-items: start; align-content: center; min-height: 226px; }
.detail-empty > span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 13px; border-radius: 11px; background: #173f38; color: #34d399; font-size: 22px; }
.detail-empty strong { color: #e2e8f0; font-size: 14px; }
.detail-empty p { margin: 7px 0 0; color: #8b95a4; font-size: 11px; line-height: 1.5; }
.country-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.country-detail-heading h3 { margin: 0; color: #edf2f7; font-size: 18px; }
.country-detail-heading span { color: #8b95a4; font-size: 10px; }
.country-detail-value { color: #34d399; font-size: 26px; font-weight: 820; letter-spacing: -.03em; }
.country-detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0; }
.country-detail-stat { padding: 8px; border-radius: 6px; background: #ffffff08; }
.country-detail-stat span { display: block; color: #8792a1; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.country-detail-stat strong { display: block; margin-top: 4px; color: #e3e8ef; font-size: 13px; }
.country-detail-note { padding-top: 10px; border-top: 1px solid #343a45; color: #909aa9; font-size: 10px; line-height: 1.5; }
.geo-note { padding: 9px 15px 12px; color: #8993a2; font-size: 10.2px; line-height: 1.45; }
.geo-note strong { color: #ccd4df; }
.overview-region-panel { display: flex; flex-direction: column; }
.region-ranking { display: grid; align-content: start; gap: 11px; padding: 15px; }
.region-rank-item { display: grid; grid-template-columns: minmax(72px, .65fr) minmax(80px, 1fr) auto; align-items: center; gap: 9px; min-width: 0; }
.region-rank-name { overflow: hidden; color: #c8d0db; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.region-rank-track { height: 8px; overflow: hidden; border-radius: 9px; background: #333b47; }
.region-rank-fill { height: 100%; border-radius: inherit; background: #6fae9b; }
.region-rank-fill.is-top { background: linear-gradient(90deg, #10b981, #34d399); box-shadow: 0 0 8px #10b98140; }
.region-rank-value { color: #b9c4d2; font-size: 10px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.region-rank-item[data-region], .region-rank-item[data-country] { cursor: pointer; }
.region-rank-item:hover .region-rank-name { color: #34d399; }
.region-empty { padding: 16px; color: #8792a1; font-size: 11px; line-height: 1.5; }
.overview-charts { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr); gap: 14px; margin-bottom: 14px; }
.overview-chart-panel { overflow: hidden; }
.chart-wrap { min-width: 0; min-height: 260px; padding: 8px 12px 12px; overflow: hidden; }
.overview-chart-svg { width: 100%; height: 250px; display: block; overflow: visible; }
.chart-grid-line { stroke: #78869725; stroke-width: 1; stroke-dasharray: 3 4; }
.chart-axis-label { fill: #8a95a5; font-size: 10px; }
.chart-line { fill: none; stroke: #149d79; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { fill: url(#salesAreaFill); }
.chart-point { fill: #fff; stroke: #10a77e; stroke-width: 2.5; cursor: pointer; }
.chart-point:hover { r: 6; fill: #d1fae5; }
.chart-point-label { fill: #8793a2; font-size: 9px; }
.chart-empty { display: grid; place-items: center; min-height: 235px; color: #8c96a5; font-size: 11px; text-align: center; }
.country-bar { cursor: pointer; }
.country-bar:hover .country-bar-rect { filter: brightness(1.15); }
.country-bar-rect { fill: #7db4a1; rx: 4; }
.country-bar-rect.is-top { fill: #10a778; }
.country-bar-label { fill: #aeb8c6; font-size: 10px; }
.country-bar-value { fill: #8c98a7; font-size: 9px; }
.country-bar-value .money-decimal { fill: #abb5c2; font-weight: 600; }
.overview-source-note { padding: 11px 14px; margin-bottom: 14px; border: 1px solid #c6a95c55; border-radius: 8px; background: #2a261b; color: #e8d59a; font-size: 11px; line-height: 1.5; }
.overview-chat-panel { margin-bottom: 22px; }
.chat-layout { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 1.8fr); min-height: 410px; }
.chat-sidebar { position: relative; min-width: 0; border-right: 1px solid #343a45; }
.chat-sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border-bottom: 1px solid #343a45; }
.chat-sidebar-heading strong { color: #dce3ec; font-size: 12px; }
.chat-sidebar-heading .button { min-height: 29px; padding: 0 9px; }
.chat-conversation-list { display: grid; align-content: start; max-height: 480px; overflow: auto; padding: 7px; }
.chat-conversation-button { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: inherit; text-align: left; }
.chat-conversation-button:hover { background: #ffffff08; }
.chat-conversation-button[aria-current="true"] { border-color: #376252; background: #16342d; }
.chat-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #5378e8, #33a987); color: #fff; font-size: 12px; font-weight: 800; }
.chat-conversation-button[data-kind="public"] .chat-avatar { background: linear-gradient(135deg, #13a37b, #58c99b); }
.chat-conversation-copy { min-width: 0; }
.chat-conversation-copy strong { display: block; overflow: hidden; color: #dce3ec; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-conversation-copy small { display: block; overflow: hidden; margin-top: 3px; color: #8792a1; font-size: 9.6px; text-overflow: ellipsis; white-space: nowrap; }
.chat-unread { min-width: 19px; padding: 3px 5px; border-radius: 12px; background: #10a778; color: #fff; font-size: 9px; font-weight: 800; text-align: center; }
.chat-thread { display: grid; grid-template-rows: auto minmax(210px, 1fr) auto; min-width: 0; }
.chat-thread-header { display: grid; gap: 3px; min-height: 54px; padding: 11px 14px; border-bottom: 1px solid #343a45; }
.chat-thread-header strong { color: #e1e8f0; font-size: 12px; }
.chat-thread-header span { color: #8792a1; font-size: 9.8px; }
.chat-messages { display: flex; flex-direction: column; align-items: stretch; gap: 9px; min-height: 210px; max-height: 440px; overflow: auto; padding: 13px 15px; }
.chat-empty, .chat-loading { padding: 20px 12px; color: #8792a1; font-size: 11px; text-align: center; }
.chat-message { max-width: min(82%, 690px); align-self: flex-start; padding: 8px 10px; border: 1px solid #343d49; border-radius: 9px 9px 9px 2px; background: #222831; }
.chat-message.is-own { align-self: flex-end; border-color: #285847; border-radius: 9px 9px 2px 9px; background: #17352e; }
.chat-message-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.chat-message-head strong { color: #cfe0dc; font-size: 10px; }
.chat-message-head time { color: #859193; font-size: 9px; }
.chat-message-text { color: #e1e7ed; font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-mention-list { margin-top: 5px; color: #8ee4c0; font-size: 9.5px; }
.chat-mention-list span { margin-right: 6px; }
.chat-compose { padding: 10px 12px 12px; border-top: 1px solid #343a45; }
.chat-compose-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.chat-compose-tools label { color: #96a0af; font-size: 10px; font-weight: 750; }
.chat-compose-tools select { height: 29px; max-width: 220px; padding: 0 25px 0 8px; border: 1px solid #3b424e; border-radius: 5px; background: #181c22; color: #dce2e9; font-size: 10px; }
.chat-compose-tools .button { min-height: 28px; padding: 0 9px; font-size: 9px; }
.chat-compose-tools > span:last-child { margin-left: auto; color: #8792a1; font-size: 9px; }
.chat-compose-row { display: flex; align-items: stretch; gap: 8px; }
.chat-compose-row textarea { flex: 1; min-width: 0; min-height: 49px; resize: vertical; padding: 9px 10px; border: 1px solid #3b424e; border-radius: 6px; background: #181c22; color: #e2e7ee; font-size: 11px; line-height: 1.4; }
.chat-compose-row .button { min-width: 68px; align-self: flex-end; }
.chat-offline-notice { padding: 9px 12px; color: #85620d; background: #fff8e5; font-size: 10px; line-height: 1.4; }
.chat-new-panel { position: absolute; z-index: 5; inset: 52px 7px auto; display: grid; gap: 9px; padding: 12px; border: 1px solid #4c5967; border-radius: 8px; background: #20262e; box-shadow: 0 14px 28px #0005; }
.chat-new-panel.hidden { display: none; }
.chat-new-heading { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.chat-new-heading strong { color: #e3e8ef; font-size: 11px; }
.chat-new-panel label { display: grid; gap: 5px; color: #9aa4b2; font-size: 9px; font-weight: 750; }
.chat-new-panel label span { display: inline; color: #7f8a99; font-weight: 450; }
.chat-new-panel input { height: 31px; padding: 0 8px; border: 1px solid #3b424e; border-radius: 5px; background: #181c22; color: #e2e7ee; font-size: 10px; }
.chat-member-picker { display: grid; gap: 3px; max-height: 180px; overflow: auto; }
.chat-member-option { display: flex; align-items: center; gap: 7px; padding: 5px 4px; color: #cbd3dd; font-size: 10px; }
.chat-member-option input { width: 13px; height: 13px; accent-color: #10a778; }
.chat-new-panel > .button { justify-self: stretch; }
html[data-theme="light"] .overview-filterbar label { color: #58677b; }
html[data-theme="light"] .overview-filterbar select { border-color: #d5deea; background: #fff; color: #344258; }
html[data-theme="light"] .overview-metric { border-color: #dce4ed; background: linear-gradient(145deg, #fff, #f8fafc); box-shadow: 0 4px 14px #24364a0a; }
html[data-theme="light"] .overview-metric > span { color: #748196; }
html[data-theme="light"] .overview-metric > strong { color: #26364d; }
html[data-theme="light"] .overview-metric-best > strong { color: #078557; }
html[data-theme="light"] .overview-metric > small { color: #748196; }
html[data-theme="light"] .overview-metric .money-decimal, html[data-theme="light"] .region-rank-value .money-decimal, html[data-theme="light"] .country-detail-value .money-decimal { color: #74869b; }
html[data-theme="light"] .overview-metric-best .money-decimal { color: #5a9c91; }
html[data-theme="light"] .overview-globe-panel > .panel-heading,
html[data-theme="light"] .overview-region-panel > .panel-heading,
html[data-theme="light"] .overview-chart-panel > .panel-heading,
html[data-theme="light"] .overview-chat-panel > .panel-heading { border-color: #e4e9f0; }
html[data-theme="light"] .globe-sphere { fill: #fff; stroke: #000; }
html[data-theme="light"] .country-shape { fill: none; stroke: #000; stroke-width: .9; pointer-events: none; }
html[data-theme="light"] .india-state-shape { fill: transparent; stroke: #000; stroke-width: .95; }
html[data-theme="light"] .india-country-outline { fill: none; stroke: #000; stroke-width: 2.2; }
html[data-theme="light"] .india-world-mask { fill: #fff; stroke: none; }
html[data-theme="light"] .india-world-outline { fill: none; stroke: #000; stroke-width: .9; }
html[data-theme="light"] .globe-land-swatch { background: transparent; border-color: #000; }
html[data-theme="light"] .sales-country-marker-low { fill: #86efac; }
html[data-theme="light"] .sales-country-marker-medium { fill: #16a34a; }
html[data-theme="light"] .sales-country-marker-high { fill: #047857; }
html[data-theme="light"] .sales-country-marker.is-selected { stroke: #064e3b; stroke-width: 2.4; filter: drop-shadow(0 0 2px #10b981); }
html[data-theme="light"] .globe-marker-label { fill: #143047; stroke: #ffffff; }
html[data-theme="light"] .globe-legend { color: #748196; }
html[data-theme="light"] .country-detail { border-color: #dce4ed; background: linear-gradient(150deg, #f9fbfd, #f0f5f8); }
html[data-theme="light"] .country-detail { border-top-color: #10b981; }
html[data-theme="light"] .country-detail-value { color: #047857; }
html[data-theme="light"] .country-detail-value .money-decimal { color: #4e9a7f; }
html[data-theme="light"] .detail-empty strong,
html[data-theme="light"] .country-detail-heading h3 { color: #26364d; }
html[data-theme="light"] .detail-empty p,
html[data-theme="light"] .country-detail-heading span,
html[data-theme="light"] .country-detail-note { color: #718095; }
html[data-theme="light"] .country-detail-stat { background: #e9eff5; }
html[data-theme="light"] .country-detail-stat span { color: #718095; }
html[data-theme="light"] .country-detail-stat strong { color: #344258; }
html[data-theme="light"] .region-rank-name { color: #43536a; }
html[data-theme="light"] .region-rank-track { background: #e5ebf2; }
html[data-theme="light"] .region-rank-value { color: #56677e; }
html[data-theme="light"] .region-empty,
html[data-theme="light"] .geo-note { color: #718095; }
html[data-theme="light"] .geo-note strong { color: #3b4c62; }
html[data-theme="light"] .chart-grid-line { stroke: #53617425; }
html[data-theme="light"] .chart-axis-label { fill: #6e7d90; }
html[data-theme="light"] .chart-point { fill: #fff; }
html[data-theme="light"] .chart-point-label { fill: #748196; }
html[data-theme="light"] .country-bar-label { fill: #4d5d72; }
html[data-theme="light"] .country-bar-value { fill: #758398; }
html[data-theme="light"] .country-bar-value .money-decimal { fill: #8b99aa; }
html[data-theme="light"] .overview-source-note { border-color: #ead8a3; background: #fff9e9; color: #755b18; }
html[data-theme="light"] .chat-sidebar { border-color: #e2e7ee; }
html[data-theme="light"] .chat-sidebar-heading,
html[data-theme="light"] .chat-thread-header,
html[data-theme="light"] .chat-compose { border-color: #e2e7ee; }
html[data-theme="light"] .chat-sidebar-heading strong,
html[data-theme="light"] .chat-thread-header strong { color: #33445c; }
html[data-theme="light"] .chat-conversation-button:hover { background: #f2f5f9; }
html[data-theme="light"] .chat-conversation-button[aria-current="true"] { border-color: #b9e2d0; background: #effaf4; }
html[data-theme="light"] .chat-conversation-copy strong { color: #344258; }
html[data-theme="light"] .chat-conversation-copy small,
html[data-theme="light"] .chat-thread-header span,
html[data-theme="light"] .chat-empty,
html[data-theme="light"] .chat-loading { color: #758398; }
html[data-theme="light"] .chat-message { border-color: #dce4ed; background: #f5f8fb; }
html[data-theme="light"] .chat-message.is-own { border-color: #bfe3d2; background: #eff9f4; }
html[data-theme="light"] .chat-message-head strong { color: #41556a; }
html[data-theme="light"] .chat-message-head time { color: #8290a2; }
html[data-theme="light"] .chat-message-text { color: #344258; }
html[data-theme="light"] .chat-mention-list { color: #078557; }
html[data-theme="light"] .chat-compose-tools label { color: #5d6d82; }
html[data-theme="light"] .chat-compose-tools select,
html[data-theme="light"] .chat-compose-row textarea,
html[data-theme="light"] .chat-new-panel input { border-color: #d5deea; background: #fff; color: #344258; }
html[data-theme="light"] .chat-compose-tools > span:last-child,
html[data-theme="light"] .chat-new-panel label,
html[data-theme="light"] .chat-member-option { color: #5c6b80; }
html[data-theme="light"] .chat-new-panel { border-color: #d7e0ea; background: #fff; box-shadow: 0 14px 28px #26364d22; }
html[data-theme="light"] .chat-new-heading strong { color: #344258; }
html[data-theme="light"] .chat-offline-notice { border-top: 1px solid #f0dfa9; }
@media (max-width: 1000px) {
  .overview-map-grid { grid-template-columns: minmax(0, 1.3fr) minmax(230px, .8fr); }
  .globe-content { grid-template-columns: minmax(0, 1.2fr) minmax(190px, .8fr); }
}
@media (max-width: 760px) {
  .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-map-grid, .overview-charts { grid-template-columns: minmax(0, 1fr); }
  .overview-filterbar { align-items: stretch; }
  .overview-filterbar label, .overview-filterbar select { flex: 1 1 42%; min-width: 130px; }
  .overview-filterbar button { margin-left: 0; }
  .globe-content { grid-template-columns: minmax(0, 1fr); }
  .country-detail { min-height: 0; }
  .detail-empty { min-height: 120px; }
  .chat-layout { grid-template-columns: minmax(0, 1fr); }
  .chat-sidebar { border-right: 0; border-bottom: 1px solid #343a45; }
  .chat-conversation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 220px; }
  .chat-new-panel { position: relative; inset: auto; margin: 5px 7px 9px; }
  .chat-thread { min-height: 370px; }
  html[data-theme="light"] .chat-sidebar { border-bottom-color: #e2e7ee; }
}
@media (max-width: 480px) {
  .overview-metrics { gap: 8px; }
  .overview-metric { min-height: 100px; padding: 12px; }
  .overview-metric > strong { font-size: 21px; }
  .chat-conversation-list { grid-template-columns: minmax(0, 1fr); }
  .chat-compose-tools > span:last-child { flex-basis: 100%; margin-left: 0; }
  .chat-compose-row { flex-direction: column; }
  .chat-compose-row .button { align-self: flex-end; min-height: 34px; }
  .chat-message { max-width: 94%; }
}

.offline-opt-in { display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding: 0 2px; border: 0; background: transparent; color: #858d9a; cursor: pointer; }
.offline-opt-in > span { display: inline; font-size: 10px; font-weight: 500; }
.offline-opt-in input { width: 12px; height: 12px; margin: 0; accent-color: #80729e; }
.offline-opt-in small { display: none; }
.offline-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 12px 15px; border: 1px solid #e7c77d; border-radius: 9px; background: #fff8e6; color: #684c0c; }
.offline-banner > div:first-child { display: grid; gap: 3px; }
.offline-banner strong { font-size: 13px; }
.offline-banner span { font-size: 12px; line-height: 1.4; }
.offline-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.offline-banner .button { min-height: 32px; }
.sync-status.offline { color: #87610e; border-color: #e7c77d; background: #fff8e6; }
.sync-status.offline i { background: #e1a72c; box-shadow: none; }
html[data-theme="light"] .offline-opt-in { color: #8791a0; }
html[data-theme="dark"] .offline-banner { border-color: #816625; background: #302a1b; color: #f3d995; }
html[data-theme="dark"] .sync-status.offline { color: #f3d995; border-color: #816625; background: #302a1b; }
@media (max-width: 720px) {
  .offline-banner { align-items: flex-start; flex-direction: column; }
  .offline-actions { width: 100%; flex-wrap: wrap; }
}