:root {
  --navy: #061a2f;
  --navy-2: #0b2745;
  --ink: #10233f;
  --muted: #5f7087;
  --soft: #7b899c;
  --line: #e2e8f0;
  --background: #f2f5f9;
  --surface: #ffffff;
  --blue: #0866ff;
  --blue-soft: #eaf2ff;
  --green: #2fb344;
  --violet: #7048e8;
  --orange: #f08c00;
  --red: #e5484d;
  --shadow: 0 14px 42px rgba(25, 49, 81, .07);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--background); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--background); font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.app-header {
  position: sticky; top: 0; z-index: 20; min-height: 72px; display: flex; align-items: center; gap: 28px;
  padding: 0 28px; color: #fff; background: rgba(6, 26, 47, .98); border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 30px rgba(6, 26, 47, .13); backdrop-filter: blur(16px);
}
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; flex: none; }
.brand-lockup strong { display: block; font-size: 19px; line-height: 1.05; letter-spacing: -.02em; }
.brand-lockup small { display: block; margin-top: 4px; color: #8da1b7; font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.brand-lockup-light small { color: #8fa6be; }
.brand-cat { display: block; width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 7px 13px rgba(8, 102, 255, .24)); }

.module-nav { align-self: stretch; display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.module-nav::-webkit-scrollbar { display: none; }
.module-nav a { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 42px; padding: 0 14px; color: #b7c6d5; border-radius: 10px; text-decoration: none; white-space: nowrap; font-size: 13px; transition: .18s ease; }
.module-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.module-nav a.active { color: var(--navy); background: #fff; font-weight: 750; box-shadow: 0 7px 20px rgba(0,0,0,.14); }
.module-nav a i { width: 5px; height: 5px; border-radius: 50%; background: #667c92; }
.module-nav a.active i { background: #9ba9b8; }

.account-menu { display: flex; align-items: center; gap: 9px; margin-left: auto; flex: none; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 8px 20px rgba(8,102,255,.28); }
.account-copy strong, .account-copy small { display: block; }
.account-copy strong { font-size: 12px; }.account-copy small { margin-top: 3px; color: #8fa3b7; font-size: 9px; }
.header-button { height: 34px; padding: 0 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; color: #b9c8d7; background: transparent; font-size: 11px; cursor: pointer; }
.header-button:hover { color: #fff; border-color: rgba(255,255,255,.3); }

.app-shell { width: min(1500px, calc(100% - 40px)); margin: 0 auto; }
.page-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 34px 2px 22px; }
.page-intro h1 { margin: 6px 0 7px; font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -.045em; }
.page-intro p { margin: 0; color: var(--muted); font-size: 13px; }
.eyebrow { color: #adc5dc; font-size: 9px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-blue { color: var(--blue); }
.provider-status { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border: 1px solid #d6e7dd; border-radius: 999px; color: #238149; background: #f3fbf6; font-size: 10px; font-weight: 750; }
.provider-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(47,179,68,.11); }
.provider-status.limited { color: #9b6500; border-color: #f0dfb6; background: #fffaf0; }
.provider-status.limited i { background: var(--orange); box-shadow: 0 0 0 4px rgba(240,140,0,.11); }

.connection-center { margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.connection-heading { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.connection-heading > div { display: grid; gap: 3px; }
.connection-heading strong { color: #18324e; font-size: 16px; }
.connection-heading small, .connection-notice { color: var(--muted); font-size: 12px; }
.connection-refresh { min-width: 92px; }
.connection-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 16px 20px; }
.connection-loading { display: flex; min-height: 76px; align-items: center; gap: 10px; color: var(--muted); grid-column: 1 / -1; }
.connection-store { min-width: 0; padding: 13px; border: 1px solid #e0e6ed; border-radius: 10px; background: #fbfcfe; }
.connection-store h3 { margin: 0 0 10px; overflow: hidden; color: #17314d; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.connection-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; color: #617188; font-size: 11px; }
.connection-badge { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; border-radius: 999px; font-size: 10px; font-weight: 760; white-space: nowrap; }
.connection-badge.connected { color: #1f7f43; background: #eaf8ef; }
.connection-badge.partial, .connection-badge.unavailable { color: #9a6200; background: #fff3d6; }
.connection-badge.error { color: #bd2638; background: #ffeaed; }
.connection-badge.not_configured { color: #69788b; background: #edf1f5; }
.connection-meta { min-height: 16px; margin-top: 10px; color: #7b899a; font-size: 10px; }
.connection-notice { margin: 0; padding: 0 20px 15px; line-height: 1.6; }
.connection-center.failed .connection-grid { display: block; color: #bd2638; font-size: 13px; }

.filter-card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.filter-card { margin-bottom: 18px; overflow: hidden; }
.filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px 12px; }
.filter-heading > div:first-child { display: flex; align-items: center; gap: 11px; }
.filter-heading strong { font-size: 13px; }
.section-kicker { color: #9aa8b9; font-size: 8px; font-weight: 850; letter-spacing: .15em; }
.compact-actions { display: flex; gap: 3px; }
.text-button { padding: 5px 8px; border: 0; color: var(--blue); background: transparent; font-size: 10px; font-weight: 750; cursor: pointer; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 4px 8px; padding: 0 22px 17px; }
.store-option { position: relative; display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 8px; border-radius: 8px; color: #43536a; font-size: 11px; cursor: pointer; }
.store-option:hover { background: #f5f8fc; }.store-option input { accent-color: var(--blue); }
.store-option:has(input:checked) { color: #143d82; background: #f4f8ff; }
.date-toolbar { display: flex; align-items: end; gap: 10px; padding: 14px 22px; border-top: 1px solid #edf1f5; background: #fafbfd; }
.query-filter-card .date-toolbar { border-top: 0; }
.date-toolbar label { display: grid; gap: 5px; color: #6e7d91; font-size: 9px; font-weight: 750; }
.date-toolbar input { width: 154px; height: 39px; padding: 0 11px; color: #25364e; border: 1px solid #dbe2eb; border-radius: 9px; background: #fff; font-size: 11px; outline: none; }
.date-toolbar input:focus { border-color: #88afff; box-shadow: 0 0 0 3px rgba(8,102,255,.08); }
.date-toolbar .keyword-field { min-width: 180px; flex: 1; }
.date-toolbar .keyword-field input { width: 100%; min-width: 180px; }
.date-separator { align-self: center; margin-top: 13px; color: #a0abba; font-size: 11px; }
.quick-ranges, .segmented { display: flex; align-items: center; padding: 3px; border: 1px solid #dfe5ed; border-radius: 10px; background: #fff; }
.quick-ranges { margin-left: 4px; }
.quick-ranges button, .segmented button { height: 31px; padding: 0 11px; border: 0; border-radius: 7px; color: #69788e; background: transparent; font-size: 10px; cursor: pointer; }
.quick-ranges button.active, .segmented button.active { color: #fff; background: var(--blue); box-shadow: 0 5px 12px rgba(8,102,255,.2); }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 39px; padding: 0 17px; border-radius: 9px; font-size: 11px; font-weight: 780; text-decoration: none; cursor: pointer; transition: .16s ease; }
.primary-button { border: 1px solid var(--blue); color: #fff; background: var(--blue); box-shadow: 0 8px 18px rgba(8,102,255,.18); }
.primary-button:hover { transform: translateY(-1px); background: #005bed; }
.primary-button:disabled { opacity: .55; cursor: wait; transform: none; }
.secondary-button { border: 1px solid #dbe2eb; color: #68778b; background: #fff; }
.secondary-button:hover { color: var(--blue); border-color: #a9c5ff; }

.message-banner { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #f0c8cb; border-radius: 11px; color: #a92b34; background: #fff6f6; font-size: 11px; }
.message-banner.warning { color: #8f5d00; border-color: #edd9ac; background: #fff9ec; }
.message-banner.info { color: #2456a3; border-color: #cbdcff; background: #f2f7ff; }
.loading-panel { min-height: 280px; display: grid; place-items: center; align-content: center; gap: 8px; margin-bottom: 20px; border: 1px dashed #ccd7e5; border-radius: var(--radius); color: var(--muted); background: rgba(255,255,255,.7); }
.loading-panel strong { color: #344a68; font-size: 13px; }.loading-panel small { color: #9aa7b7; font-size: 10px; }
.spinner { width: 30px; height: 30px; margin-bottom: 7px; border: 3px solid #dbe8ff; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; margin-bottom: 18px; }
.metric-card { position: relative; overflow: hidden; min-height: 158px; padding: 21px 23px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.metric-card::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: var(--blue); }
.metric-card.violet::before { background: var(--violet); }.metric-card.green::before { background: var(--green); }.metric-card.orange::before { background: var(--orange); }
.metric-top { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; font-weight: 750; }
.metric-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--blue); background: var(--blue-soft); font-size: 10px; font-weight: 900; }
.violet .metric-icon { color: var(--violet); background: #f1edff; }.green .metric-icon { color: #238c36; background: #edf9ef; }.orange .metric-icon { color: #a96000; background: #fff3dc; }
.metric-card > strong { display: block; margin-top: 14px; font-size: clamp(28px, 3vw, 38px); line-height: 1; letter-spacing: -.04em; }
.metric-card > strong small { color: #718096; font-size: 12px; letter-spacing: 0; }
.metric-amount { margin-top: 10px; color: #41546e; font-size: 13px; font-weight: 750; }
.metric-date { position: absolute; top: 22px; right: 22px; color: #a2adbc; font-size: 9px; }

.panel { margin-bottom: 18px; overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid #edf1f5; }
.panel-header h2 { margin: 5px 0 0; font-size: 15px; letter-spacing: -.015em; }.panel-header p { margin: 5px 0 0; color: #8795a8; font-size: 9px; }
.table-scroll { overflow: auto; }
.data-table { width: 100%; min-width: 860px; border-collapse: collapse; }
.data-table th { padding: 12px 18px; color: #8b99ac; background: #fafbfd; border-bottom: 1px solid var(--line); text-align: left; font-size: 9px; font-weight: 800; white-space: nowrap; }
.data-table td { padding: 12px 18px; color: #4a5b71; border-bottom: 1px solid #eef2f6; font-size: 11px; white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }.data-table tbody tr:hover { background: #fafcff; }.data-table td strong { color: #213751; }
.table-money { color: var(--blue) !important; font-weight: 750; }
.rank-badge { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #6f7f93; background: #eef2f6; font-size: 10px; font-weight: 850; }
.rank-badge.top-1 { color: #8e5f00; background: #ffe7a3; }.rank-badge.top-2 { color: #647285; background: #dfe5ec; }.rank-badge.top-3 { color: #a45a19; background: #f6d0aa; }
.ratio-pill { display: inline-flex; min-width: 58px; justify-content: center; padding: 5px 8px; border-radius: 999px; color: #a25f00; background: #fff3d4; font-weight: 800; }
.extended-rate-link { flex: none; }
#extended-module-page[data-module="daily-exchange-rates"] .extended-table-scroll,
#extended-module-page[data-module="advertising-ratio"] .extended-table-scroll,
#extended-module-page[data-module="category-share"] .extended-table-scroll { overflow-x: hidden; }
#extended-module-page[data-module="daily-exchange-rates"] .extended-table,
#extended-module-page[data-module="advertising-ratio"] .extended-table,
#extended-module-page[data-module="category-share"] .extended-table { width: 100%; min-width: 0; table-layout: fixed; }
#extended-module-page[data-module="daily-exchange-rates"] .extended-table th,
#extended-module-page[data-module="daily-exchange-rates"] .extended-table td,
#extended-module-page[data-module="advertising-ratio"] .extended-table th,
#extended-module-page[data-module="advertising-ratio"] .extended-table td,
#extended-module-page[data-module="category-share"] .extended-table th,
#extended-module-page[data-module="category-share"] .extended-table td { padding-inline: 12px; white-space: normal; overflow-wrap: anywhere; }

.chart-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.chart-panel { min-width: 0; }.chart-panel .panel-header { min-height: 83px; }
.chart-legend { display: flex; gap: 12px; color: #78869a; font-size: 9px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }.chart-legend i { width: 15px; height: 3px; border-radius: 4px; }
.chart-legend i.blue { background: var(--blue); }.chart-legend i.green { background: var(--green); }.chart-legend i.violet { background: var(--violet); }.chart-legend i.orange { background: var(--orange); }
.canvas-wrap { position: relative; height: 410px; padding: 4px 12px 8px; }.canvas-wrap canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y; }
.chart-tooltip { position: absolute; z-index: 4; min-width: 154px; padding: 12px 14px; border: 1px solid rgba(216,223,234,.95); border-radius: 11px; color: #263449; background: rgba(255,255,255,.97); box-shadow: 0 10px 28px rgba(29,43,69,.17); pointer-events: none; backdrop-filter: blur(8px); }
.chart-tooltip[hidden] { display: none; }
.chart-tooltip > strong { display: block; margin-bottom: 8px; color: #607087; font-size: 11px; font-weight: 750; }
.chart-tooltip span { display: grid; grid-template-columns: 8px minmax(58px,1fr) auto; align-items: center; gap: 7px; min-height: 23px; font-size: 11px; }
.chart-tooltip i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.chart-tooltip em { color: #6d7b8f; font-style: normal; }.chart-tooltip b { color: #1f2b3d; font-size: 12px; font-variant-numeric: tabular-nums; }

.trend-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 18px; }
.trend-summary-card { position: relative; overflow: hidden; min-height: 132px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.trend-summary-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--blue); }
.trend-summary-card.green::before { background: var(--green); }.trend-summary-card.violet::before { background: var(--violet); }
.trend-summary-card > span { display: block; color: #a1adbc; font-size: 8px; font-weight: 850; letter-spacing: .15em; }
.trend-summary-card > small { display: block; margin-top: 7px; color: #6d7d91; font-size: 11px; font-weight: 750; }
.trend-summary-card > strong { display: inline-block; margin-top: 17px; color: #142941; font-size: clamp(25px, 3vw, 36px); line-height: 1; letter-spacing: -.04em; }
.trend-summary-card > em { margin-left: 7px; color: #9ca8b7; font-size: 10px; font-style: normal; font-weight: 750; }
.sales-module-charts { display: grid; grid-template-columns: 1fr; gap: 18px; }
.sales-module-canvas { height: 430px; }
.result-count { padding: 7px 10px; border-radius: 999px; color: #5d6f87; background: #f1f5fa; font-size: 10px; font-weight: 750; }
.sales-daily-table { min-width: 980px; }
.trend-change { font-weight: 800; font-variant-numeric: tabular-nums; }
.trend-change.positive { color: #20a33a; }.trend-change.negative { color: #ef3f4c; }.trend-change.muted { color: #99a5b4; }

.order-query-card { overflow: visible; }
.order-filter-grid { display: grid; grid-template-columns: 1.05fr 1.05fr .7fr .7fr 1.1fr; gap: 12px; padding: 17px 22px 5px; }
.order-filter-grid label { display: grid; gap: 6px; color: #6e7d91; font-size: 9px; font-weight: 750; }
.order-filter-grid input, .order-filter-grid select, .order-pagination-actions select { height: 39px; padding: 0 11px; color: #25364e; border: 1px solid #dbe2eb; border-radius: 9px; background: #fff; outline: 0; }
.order-filter-grid input:focus, .order-filter-grid select:focus, .order-pagination-actions select:focus { border-color: #88afff; box-shadow: 0 0 0 3px rgba(8,102,255,.08); }
.order-date-toolbar { border-top: 0; padding-top: 9px; }
.export-button { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 0 17px; border: 1px solid #12a874; border-radius: 9px; color: #fff; background: #12b981; box-shadow: 0 8px 18px rgba(18,185,129,.16); font-size: 11px; font-weight: 800; cursor: pointer; }
.export-button:hover { transform: translateY(-1px); background: #0ea572; }.export-button:disabled { opacity: .55; cursor: wait; transform: none; }
.order-panel { overflow: hidden; }
.order-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 67px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.order-status-tabs { align-self: stretch; display: flex; align-items: stretch; gap: 3px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.order-status-tabs::-webkit-scrollbar { display: none; }
.order-status-tabs button { position: relative; min-width: max-content; padding: 0 13px; border: 0; color: #65758b; background: transparent; font-size: 11px; font-weight: 750; cursor: pointer; }
.order-status-tabs button::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.order-status-tabs button.active { color: var(--blue); }.order-status-tabs button.active::after { background: var(--blue); }
.order-status-tabs button span { margin-left: 5px; padding: 2px 6px; border-radius: 999px; color: #7c8ba0; background: #f0f3f7; font-size: 8px; }
.order-status-tabs button.active span { color: #145fd9; background: var(--blue-soft); }
.order-total { display: flex; align-items: baseline; gap: 6px; flex: none; color: #8795a8; font-size: 9px; }
.order-total strong { color: #345173; font-size: 12px; font-variant-numeric: tabular-nums; }.order-total strong:last-child { margin-left: 8px; color: var(--blue); }.order-total em { font-style: normal; }
.order-table-scroll { max-height: min(64vh, 780px); }
.order-table { min-width: 1880px; }
.order-table th, .order-table td { padding: 10px 12px; }
.order-table td { vertical-align: middle; color: #62748d; font-size: 10px; }
.order-empty { padding: 58px 20px; color: #96a3b4; text-align: center; }
.order-table th:first-child, .order-table td:first-child { position: sticky; left: 0; z-index: 2; width: 44px; background: inherit; }
.order-table th:first-child { z-index: 3; background: #fafbfd; }
.order-table input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--blue); }
.order-thumb { display: block; width: 42px; height: 50px; object-fit: cover; border: 1px solid #e4e9ef; border-radius: 8px; background: #f5f7fa; }
.order-link { padding: 0; border: 0; color: #075eff; background: transparent; font-weight: 750; text-decoration: none; cursor: pointer; }
.traffic-sales-link:hover, .traffic-sales-link:focus-visible { text-decoration: underline; }
.order-product-link { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.order-product-link:hover { text-decoration: underline; }
.order-sku-qty { display: grid; gap: 3px; }.order-sku-qty small { color: #98a5b6; }
.order-product-name { display: block; width: 250px; white-space: normal; line-height: 1.5; color: #50627a; }
.order-carrier { display: block; width: 145px; white-space: normal; line-height: 1.45; }
.order-date-cell { display: block; width: 116px; white-space: normal; line-height: 1.4; font-variant-numeric: tabular-nums; }
.order-muted { color: #abb5c2; }
.order-badge { display: inline-flex; justify-content: center; min-width: 52px; padding: 5px 8px; border-radius: 7px; font-weight: 780; white-space: nowrap; }
.order-badge.type { color: #008e89; background: #e7fbf9; }
.order-badge.multiple { color: #7357c9; background: #f0edff; }
.order-badge.awaiting_packaging { color: #b36b00; background: #fff2d8; }
.order-badge.awaiting_delivery { color: #0872d1; background: #e4f4ff; }
.order-badge.delivering { color: #5c43ba; background: #eeeaff; }
.order-badge.delivered { color: #238a36; background: #eaf8ed; }
.order-badge.cancelled { color: #c03742; background: #fff0f1; }
.order-pagination-bar { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 20px; border-top: 1px solid var(--line); color: #667990; font-size: 10px; }

/* Order management is intentionally a one-screen table: every column wraps
   inside the available width instead of forcing the user to drag sideways. */
#order-management-page .order-table-scroll { overflow-x: hidden; overflow-y: auto; }
#order-management-page .order-table { width: 100%; min-width: 0; table-layout: fixed; }
#order-management-page .order-table th,
#order-management-page .order-table td { min-width: 0; padding: 9px 6px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; text-align: center; }
#order-management-page .order-table th { line-height: 1.25; }
#order-management-page .order-table td { line-height: 1.35; }
#order-management-page .order-table th:first-child,
#order-management-page .order-table td:first-child { position: static; width: 3%; }
#order-management-page .order-table th:nth-child(2),
#order-management-page .order-table td:nth-child(2) { width: 5%; text-align: center; }
#order-management-page .order-table th:nth-child(3),
#order-management-page .order-table td:nth-child(3) { width: 9%; }
#order-management-page .order-table th:nth-child(4),
#order-management-page .order-table td:nth-child(4) { width: 10%; }
#order-management-page .order-table th:nth-child(5),
#order-management-page .order-table td:nth-child(5) { width: 6%; }
#order-management-page .order-table th:nth-child(6),
#order-management-page .order-table td:nth-child(6) { width: 4%; text-align: center; }
#order-management-page .order-table th:nth-child(7),
#order-management-page .order-table td:nth-child(7) { width: 15%; text-align: left; }
#order-management-page .order-table th:nth-child(8),
#order-management-page .order-table td:nth-child(8) { width: 6%; }
#order-management-page .order-table th:nth-child(9),
#order-management-page .order-table td:nth-child(9) { width: 8%; text-align: left; }
#order-management-page .order-table th:nth-child(10),
#order-management-page .order-table td:nth-child(10) { width: 6%; text-align: right; }
#order-management-page .order-table th:nth-child(11),
#order-management-page .order-table td:nth-child(11) { width: 4%; text-align: center; }
#order-management-page .order-table th:nth-child(12),
#order-management-page .order-table td:nth-child(12) { width: 6%; text-align: center; }
#order-management-page .order-table th:nth-child(13),
#order-management-page .order-table td:nth-child(13),
#order-management-page .order-table th:nth-child(14),
#order-management-page .order-table td:nth-child(14),
#order-management-page .order-table th:nth-child(15),
#order-management-page .order-table td:nth-child(15) { width: 5%; }
#order-management-page .order-table th:nth-child(16),
#order-management-page .order-table td:nth-child(16) { width: 3%; text-align: left; }
#order-management-page .order-thumb { width: 34px; height: 42px; margin: 0 auto; }
#order-management-page .order-badge { min-width: 0; max-width: 100%; padding: 5px 4px; white-space: normal; }
#order-management-page .order-product-name,
#order-management-page .order-carrier,
#order-management-page .order-date-cell { width: auto; max-width: 100%; }
.order-pagination-actions, .order-pagination-actions label, .pagination { display: flex; align-items: center; gap: 7px; }
.order-pagination-actions select { width: 70px; height: 35px; padding: 0 8px; }
.pagination button { min-width: 35px; height: 35px; padding: 0 9px; border: 1px solid #dce3ec; border-radius: 8px; color: #5f7188; background: #fff; cursor: pointer; }
.pagination button:hover:not(:disabled), .pagination button.active { color: #fff; border-color: var(--blue); background: var(--blue); }
.pagination button:disabled { color: #b5beca; background: #f5f7fa; cursor: default; }

.extended-query-card { overflow: visible; }
.extended-filter-fields { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 17px 22px 5px; }
.extended-filter-fields:empty { display: none; }
.extended-filter-fields > label { display: grid; min-width: 176px; gap: 6px; color: #6e7d91; font-size: 9px; font-weight: 750; }
.extended-filter-fields input[type="search"], .extended-filter-fields input[type="number"], .extended-filter-fields select { width: 100%; height: 39px; padding: 0 11px; color: #25364e; border: 1px solid #dbe2eb; border-radius: 9px; background: #fff; outline: 0; }
.extended-filter-fields input:focus, .extended-filter-fields select:focus { border-color: #88afff; box-shadow: 0 0 0 3px rgba(8,102,255,.08); }
.month-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 100%; margin: 0; padding: 0; border: 0; }
.month-filter legend { float: left; margin-right: 6px; color: #6e7d91; font-size: 9px; font-weight: 800; }
.month-filter label { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid #dfe5ed; border-radius: 8px; color: #63748b; background: #fff; font-size: 9px; cursor: pointer; }
.month-filter label:has(input:checked) { color: #145fd9; border-color: #bed3ff; background: #f1f6ff; }
.month-filter input { accent-color: var(--blue); }
.extended-date-toolbar { border-top: 0; padding-top: 9px; flex-wrap: wrap; }
.extended-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.extended-summary-card { position: relative; overflow: hidden; min-height: 114px; padding: 20px 21px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.extended-summary-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--blue); }
.extended-summary-card.green::before { background: var(--green); }.extended-summary-card.orange::before { background: var(--orange); }.extended-summary-card.red::before { background: var(--red); }.extended-summary-card.violet::before { background: var(--violet); }
.extended-summary-card span { display: block; color: #7e8da1; font-size: 10px; font-weight: 750; }
.extended-summary-card strong { display: inline-block; max-width: 100%; margin-top: 13px; overflow: hidden; color: #152c47; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.05; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.extended-summary-card small { margin-left: 6px; color: #96a3b3; font-size: 9px; }
.extended-table-scroll { max-height: min(67vh, 820px); }
.extended-table { min-width: 1120px; }
.extended-table th, .extended-table td { padding: 11px 13px; }
.extended-table td { font-size: 10px; }
.extended-table tr.total-row { background: #eef5ff; font-weight: 800; }
.extended-thumb { display: block; width: 42px; height: 48px; object-fit: cover; border: 1px solid #e4e9ef; border-radius: 8px; background: #f6f8fb; }
.extended-wide { display: block; width: 250px; line-height: 1.45; white-space: normal; }
.extended-badge { display: inline-flex; min-width: 50px; justify-content: center; padding: 5px 8px; border-radius: 7px; color: #586a80; background: #eef2f6; font-weight: 800; }
.extended-badge.pending { color: #8a5500; background: #fff4d8; }

/* Product sales mirrors the compact parent-SKU ranking view. */
#extended-module-page[data-module="product-sales"] .extended-query-card { padding: 0; }
.product-sales-query { display: flex; min-height: 68px; align-items: center; gap: 10px; padding: 12px 20px; }
.product-sales-date { display: flex; align-items: center; gap: 10px; color: #5d6f86; font-size: 12px; white-space: nowrap; }
.product-sales-date input { width: 160px; height: 40px; padding: 0 11px; color: #263a52; border: 1px solid #dbe2eb; border-radius: 8px; background: #fff; font: inherit; }
#extended-module-page[data-module="product-sales"] .extended-filter-fields { flex: 0 0 190px; padding: 0; }
#extended-module-page[data-module="product-sales"] .extended-filter-fields > label { display: flex; min-width: 0; align-items: center; gap: 8px; color: #5d6f86; font-size: 12px; white-space: nowrap; }
#extended-module-page[data-module="product-sales"] .extended-filter-fields input { height: 40px; }
.product-sales-ranges { margin-left: auto; }
.product-sales-ranges button { border: 1px solid #dfe5ed; border-radius: 999px; background: #fff; }
#extended-module-page[data-module="product-sales"] .extended-summary-grid { display: block; margin-bottom: 14px; }
.product-sales-summary { display: flex; min-height: 51px; align-items: center; gap: 32px; padding: 0 20px; border: 1px solid #e2e7ee; border-radius: 10px; background: #fff; color: #5c6e85; font-size: 13px; }
.product-sales-summary strong { color: #142b47; font-size: 16px; }
.product-sales-summary em { margin-left: 5px; color: #748499; font-style: normal; font-weight: 800; }.product-sales-summary em.up { color: #20a43c; }.product-sales-summary em.down { color: #ff4d5b; }
.product-sales-note { margin: -3px 0 12px; color: #718198; font-size: 11px; }.product-sales-note summary { width: fit-content; cursor: pointer; }.product-sales-note p { line-height: 1.65; }
#extended-module-page[data-module="product-sales"] #extended-table-panel > .panel-header { display: none; }
#extended-module-page[data-module="product-sales"] .extended-table-scroll { overflow-x: hidden; max-height: 67vh; }
#extended-module-page[data-module="product-sales"] .extended-table { width: 100%; min-width: 0; table-layout: fixed; }
#extended-module-page[data-module="product-sales"] .extended-table th,
#extended-module-page[data-module="product-sales"] .extended-table td { padding: 12px 9px; text-align: center; white-space: normal; }
#extended-module-page[data-module="product-sales"] .extended-table th:nth-child(1) { width: 7%; }
#extended-module-page[data-module="product-sales"] .extended-table th:nth-child(2) { width: 8%; }
#extended-module-page[data-module="product-sales"] .extended-table th:nth-child(3) { width: 12%; }
#extended-module-page[data-module="product-sales"] .extended-table th:nth-child(4) { width: 12%; }
#extended-module-page[data-module="product-sales"] .extended-table th:nth-child(n+5) { width: 10.15%; }
#extended-module-page[data-module="product-sales"] .extended-thumb { width: 44px; height: 54px; margin: auto; border-radius: 4px; }
#extended-module-page[data-module="product-sales"] .rank-badge { margin: auto; color: #fff; background: #0968ef; }
#extended-module-page[data-module="product-sales"] .rank-badge.top-1,
#extended-module-page[data-module="product-sales"] .rank-badge.top-2,
#extended-module-page[data-module="product-sales"] .rank-badge.top-3 { color: #fff; background: #ff4b57; }
.product-sales-parent-link { color: #0866f5; font-size: 13px; font-weight: 850; text-decoration: none; }
.extended-badge.packing, .extended-badge.awaiting_packaging { color: #a66300; background: #fff1d1; }.extended-badge.shipped, .extended-badge.awaiting_delivery { color: #0969c5; background: #e6f3ff; }.extended-badge.delivered { color: #1e8d38; background: #eaf8ed; }.extended-badge.cancelled { color: #c13641; background: #fff0f1; }.extended-badge.delivering { color: #6443c2; background: #eeeaff; }
.metric-good { color: #20a33a; font-weight: 800; }.metric-bad { color: #ee3f4b; font-weight: 800; }.metric-violet { color: var(--violet); font-weight: 800; }
.extended-empty { padding: 50px 18px; color: #98a4b3; text-align: center; }
.packing-panel { border-color: #f4c15f; background: linear-gradient(135deg, #fffdf8, #fff9eb); }
.packing-panel .panel-header { border-color: #f5dfad; }.packing-total { color: #bd6700; font-size: 22px; }
.packing-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 24px; padding: 22px; }
.packing-bars > div { display: grid; grid-template-columns: 46px minmax(60px,1fr) 42px; align-items: center; gap: 9px; color: #74849a; font-size: 9px; }
.packing-bars i, .category-bars i { display: block; overflow: hidden; height: 11px; border-radius: 999px; background: #edf1f6; }
.packing-bars b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f7a20d, #ffc343); }
.packing-bars strong { color: #9d4b05; text-align: right; font-size: 10px; }
.mabang-analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mabang-analysis-grid .timeline { grid-column: 1 / -1; }
.mabang-analysis-grid .packing-bars { grid-template-columns: 1fr; }
.mabang-analysis-grid .timeline .packing-bars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mabang-analysis-grid .packing-bars > div { grid-template-columns: minmax(76px, 115px) minmax(60px, 1fr) 46px; }
.mabang-analysis-grid .packing-bars > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 800px) {
  .mabang-analysis-grid { grid-template-columns: 1fr; }
  .mabang-analysis-grid .timeline .packing-bars { grid-template-columns: 1fr; }
}
.status-special { display: grid; gap: 18px; }
.logistics-groups { display: grid; gap: 23px; padding: 22px 24px 26px; }
.logistics-group { display: grid; gap: 10px; }
.logistics-group h3 { margin: 0; color: #34485f; font-size: 13px; font-weight: 820; letter-spacing: -.01em; }
.logistics-card-grid { display: grid; grid-template-columns: repeat(3, minmax(175px, 255px)); gap: 12px; }
.logistics-card { display: grid; justify-items: center; gap: 5px; min-height: 122px; padding: 15px 17px; border: 1px solid #dce3eb; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(20,42,73,.035); text-align: center; }
.logistics-card > span { color: #4c5f77; font-size: 12px; font-weight: 650; }
.logistics-card > strong { color: #e33242; font-size: 25px; font-weight: 820; line-height: 1.1; font-variant-numeric: tabular-nums; }
.logistics-card.attention > strong { color: #dd7a00; }.logistics-card.good > strong { color: #20a33a; }
.logistics-card > small { color: #8190a3; font-size: 10px; line-height: 1.35; }
.shipment-panel .table-scroll { max-height: 440px; }
.category-charts { display: grid; grid-template-columns: 1.08fr .92fr; gap: 18px; }
.category-charts .panel { overflow: visible; }
.treemap-controls { display: flex; align-items: center; gap: 7px; color: #5f7087; }
.treemap-controls button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #24568f; border: 1px solid #d5dfeb; border-radius: 8px; background: #f7faff; font-size: 18px; font-weight: 750; cursor: pointer; }
.treemap-controls button:hover { color: #fff; border-color: var(--blue); background: var(--blue); }
.treemap-controls output { min-width: 48px; color: #3b506a; text-align: center; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.treemap-viewport { height: 470px; overflow: auto; border-radius: 0 0 12px 12px; background: #f7f9fc; outline: 0; cursor: grab; scrollbar-color: #aab7c6 #edf1f6; touch-action: none; user-select: none; }
.treemap-viewport.is-grabbing, .treemap-viewport.is-grabbing .treemap-cell { cursor: grabbing; }
.treemap-viewport.is-grabbing .treemap-cell:hover { transform: none; filter: none; box-shadow: none; }
.treemap-viewport:focus-visible { box-shadow: inset 0 0 0 3px rgba(8,102,255,.18); }
.css-treemap { position: relative; display: block; width: 100%; height: 100%; min-height: 470px; padding: 0; background: #f7f9fc; transform-origin: left top; }
.treemap-cell { position: absolute; z-index: 1; display: flex; min-width: 0; min-height: 0; overflow: hidden; flex-direction: column; align-items: center; justify-content: center; padding: 8px; color: #fff; border: 2px solid #f7f9fc; border-radius: 6px; text-align: center; cursor: grab; outline: 0; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.treemap-cell:hover, .treemap-cell:focus-visible { z-index: 8; transform: translateY(-2px); filter: saturate(1.12) brightness(1.05); box-shadow: 0 10px 24px rgba(18,39,70,.24); }
.treemap-cell > strong { max-width: 132px; overflow: hidden; font-size: 13px; font-weight: 780; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(7,24,48,.28); }
.treemap-cell > small { margin-top: 5px; color: rgba(255,255,255,.88); font-size: 10px; font-weight: 700; }
.treemap-cell.compact > strong { font-size: 11px; }.treemap-cell.compact > small { font-size: 9px; }
.treemap-cell.micro > strong, .treemap-cell.micro > small { display: none; }
.treemap-viewport.zoomed .treemap-cell.micro > strong { display: block; font-size: 10px; }.treemap-viewport.zoomed .treemap-cell.micro > small { display: block; font-size: 8px; }
.treemap-cell.tone-blue.shade-0 { background: #4667b6; }.treemap-cell.tone-blue.shade-1 { background: #5475c4; }.treemap-cell.tone-blue.shade-2 { background: #5f80cd; }.treemap-cell.tone-blue.shade-3 { background: #496cbd; }
.treemap-cell.tone-green.shade-0 { background: #65a94f; }.treemap-cell.tone-green.shade-1 { background: #73b65a; }.treemap-cell.tone-green.shade-2 { background: #7abd62; }.treemap-cell.tone-green.shade-3 { background: #5ea348; }
.treemap-cell.tone-amber.shade-0 { background: #d99a25; }.treemap-cell.tone-amber.shade-1 { background: #e2a735; }.treemap-cell.tone-amber.shade-2 { background: #e8b344; }.treemap-cell.tone-amber.shade-3 { background: #ce8d18; }
.treemap-cell.tone-slate.shade-0 { background: #537d8b; }.treemap-cell.tone-slate.shade-1 { background: #638c98; }.treemap-cell.tone-slate.shade-2 { background: #59758d; }.treemap-cell.tone-slate.shade-3 { background: #6e8398; }
.category-legend { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 17px; min-height: 46px; padding: 9px 18px 14px; color: #53657c; font-size: 11px; font-weight: 700; }
.category-legend span { display: inline-flex; align-items: center; gap: 6px; }.category-legend i { width: 9px; height: 9px; border-radius: 3px; }.category-legend i.blue { background: #5475c4; }.category-legend i.green { background: #73b65a; }.category-legend i.amber { background: #e2a735; }.category-legend i.slate { background: #638c98; }
.category-bars { display: grid; gap: 10px; padding: 20px 22px 25px; }
.category-bar-row { position: relative; display: grid; min-height: 38px; grid-template-columns: 155px minmax(120px, 1fr) 70px; align-items: center; gap: 13px; padding: 4px 6px; color: #44566e; border-radius: 7px; font-size: 12px; outline: 0; transition: background .16s ease; }
.category-bar-row:hover, .category-bar-row:focus-visible { z-index: 7; background: #f4f7fc; }
.category-bar-row > span:first-child { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }.category-bars i { height: 20px; border-radius: 4px; background: #edf2f8; }.category-bars i > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0866ff, #4b8cff); box-shadow: 0 5px 12px rgba(8,102,255,.16); }.category-bar-row > strong { color: #243b58; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.category-tooltip { position: absolute; left: 50%; top: 50%; z-index: 30; display: grid; min-width: 220px; gap: 10px; padding: 14px 15px; color: #33465f; border: 1px solid #dfe5ed; border-radius: 10px; background: rgba(255,255,255,.98); box-shadow: 0 14px 34px rgba(21,42,71,.2); opacity: 0; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)) scale(.97); transform-origin: center bottom; transition: opacity .13s ease, transform .13s ease; text-align: left; white-space: nowrap; }
.treemap-cell:hover .category-tooltip, .treemap-cell:focus-visible .category-tooltip, .category-bar-row:hover .category-tooltip, .category-bar-row:focus-visible .category-tooltip { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }
#extended-module-page .category-tooltip.fixed { position: fixed; z-index: 100; opacity: 1; transform: translate(-50%, -100%) scale(1); }
#category-floating-tooltip.category-tooltip { position: fixed; left: 0; top: 0; z-index: 1000; opacity: 1; transform: none; transform-origin: initial; transition: none; }
#category-floating-tooltip.category-tooltip[hidden] { display: none; }
#category-floating-tooltip.category-tooltip::after { display: none; }
.treemap-cell:first-child .category-tooltip { left: 0; transform: translate(-4px, calc(-100% - 14px)) scale(.97); }
.treemap-cell:first-child:hover .category-tooltip, .treemap-cell:first-child:focus-visible .category-tooltip { transform: translate(-4px, calc(-100% - 14px)) scale(1); }
.treemap-cell:first-child .category-tooltip::after { left: 48px; }
.category-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; border-right: 1px solid #dfe5ed; border-bottom: 1px solid #dfe5ed; background: #fff; transform: translateX(-50%) rotate(45deg); }
.category-tooltip > strong { overflow: hidden; color: #172d49; font-size: 13px; text-overflow: ellipsis; }.category-tooltip > span { display: grid; grid-template-columns: 10px 48px minmax(70px,1fr) auto; align-items: center; gap: 7px; font-size: 11px; }.category-tooltip em { color: #758398; font-style: normal; }.category-tooltip b { color: #273b55; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }.category-tooltip small { color: #8593a5; font-size: 10px; }.tooltip-dot { width: 8px; height: 8px; border-radius: 50%; }.tooltip-dot.orders { background: #0866ff; }.tooltip-dot.sales { background: #2fb344; }
#extended-module-page[data-module="category-share"] .panel-header h2 { font-size: 18px; color: #142b47; }
#extended-module-page[data-module="category-share"] .panel-header p { color: #687990; font-size: 11px; }
#extended-module-page[data-module="category-share"] .section-kicker { color: #6f83a0; font-size: 9px; }
#extended-module-page[data-module="category-share"] .extended-summary-card span { color: #5f7087; font-size: 12px; }
#extended-module-page[data-module="category-share"] .extended-summary-card strong { color: #102947; font-size: clamp(27px, 2.4vw, 34px); }
#extended-module-page[data-module="category-share"] .extended-summary-card small { color: #718198; font-size: 11px; }
#extended-module-page[data-module="category-share"] .extended-table th { color: #53657d; font-size: 11px; }
#extended-module-page[data-module="category-share"] .extended-table td { color: #34485f; font-size: 12px; }
#extended-module-page[data-module="category-share"] .extended-date-toolbar label { color: #596b82; font-size: 11px; }

.status-metric { display: inline-grid; grid-template-columns: 66px auto auto; align-items: center; gap: 7px; min-width: 150px; color: #34485f; font-variant-numeric: tabular-nums; }
.status-metric.no-bar { grid-template-columns: auto auto; justify-content: start; min-width: 108px; }
.status-metric > strong { min-width: 34px; color: #243950; text-align: right; font-size: 12px; }
.status-metric > small { color: #77879a; font-size: 10px; }
.status-mini-track { display: block; overflow: hidden; width: 66px; height: 5px; border-radius: 999px; background: #edf1f5; }
.status-mini-track b { display: block; height: 100%; border-radius: inherit; background: #8697aa; }
.status-metric.good .status-mini-track b { background: #28a64a; }
.status-metric.risk .status-mini-track b { background: #df3448; }
.status-metric.transit .status-mini-track b { background: #75899f; }
.status-metric.risk > strong, .status-metric.risk > small { color: #d93445; font-weight: 800; }
.status-metric.good > strong { color: #1b8f3d; }

/* Readability pass: primary text stays dominant, while secondary text remains clearly legible. */
body { font-size: 14px; }
.brand-lockup small { color: #a7b8c9; font-size: 10px; }
.account-copy small { color: #a7b7c7; font-size: 10px; }
.eyebrow, .section-kicker { font-size: 10px; }
.section-kicker { color: #718198; }
.provider-status, .text-button { font-size: 11px; }
.store-option { font-size: 12px; }
.date-toolbar label, .order-filter-grid label, .extended-filter-fields > label, .month-filter legend { color: #566980; font-size: 11px; }
.date-toolbar input, .quick-ranges button, .segmented button { color: #41546d; font-size: 12px; }
.primary-button, .secondary-button, .export-button { font-size: 12px; }
.loading-panel small { color: #718198; font-size: 11px; }
.metric-top { color: #52657d; font-size: 12px; }.metric-icon { font-size: 11px; }.metric-date { color: #718198; font-size: 10px; }
.panel-header h2 { color: #142b47; font-size: 18px; }.panel-header p { color: #687990; font-size: 11px; }
.data-table th { color: #53657d; font-size: 11px; }.data-table td { color: #34485f; font-size: 12px; }
.rank-badge { font-size: 11px; }
.chart-legend { color: #607188; font-size: 11px; }
.trend-summary-card > span { color: #607188; font-size: 10px; }.trend-summary-card > small { color: #52657d; font-size: 12px; }.trend-summary-card > em { color: #718198; font-size: 11px; }
.result-count { color: #4f637c; font-size: 11px; }
.order-status-tabs button { color: #52657d; font-size: 12px; }.order-status-tabs button span { color: #63758c; font-size: 10px; }
.order-total { color: #65778d; font-size: 11px; }.order-table td { color: #455a73; font-size: 12px; }
.order-pagination-bar { color: #52657d; font-size: 11px; }
.month-filter label { color: #53657d; font-size: 11px; }
.extended-summary-card span { color: #5f7087; font-size: 12px; }.extended-summary-card small { color: #718198; font-size: 11px; }
.extended-table td { color: #34485f; font-size: 12px; }
.extended-empty { color: #718198; font-size: 12px; }
.packing-bars > div { color: #5f7188; font-size: 11px; }.packing-bars strong { font-size: 12px; }
.logistics-card > small { color: #6f7f93; font-size: 11px; }
.app-footer { color: #758499; font-size: 10px; }

.planned-page { min-height: 58vh; display: grid; place-items: center; }
.planned-card { width: min(620px, 100%); padding: 52px; text-align: center; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.planned-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 18px; color: var(--blue); background: var(--blue-soft); font-size: 24px; }
.planned-card h2 { margin: 10px 0 12px; font-size: 27px; letter-spacing: -.035em; }.planned-card p { max-width: 510px; margin: 0 auto 24px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.app-footer { display: flex; justify-content: space-between; gap: 20px; padding: 25px 3px 30px; color: #95a2b2; font-size: 9px; }

.login-page { background: var(--navy); }
.login-shell { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(420px, .82fr); min-height: 100vh; }
.login-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 52px clamp(40px, 7vw, 100px); color: #fff; background: linear-gradient(135deg, #061a2f 0%, #0c2d55 62%, #0b4bb8 100%); }
.login-brand::before, .login-brand::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); }
.login-brand::before { width: 540px; height: 540px; right: -180px; top: -270px; box-shadow: 0 0 0 85px rgba(255,255,255,.025), 0 0 0 170px rgba(255,255,255,.018); }
.login-brand::after { width: 290px; height: 290px; left: -170px; bottom: -170px; }
.login-brand > * { position: relative; z-index: 1; }
.login-copy { max-width: 680px; }.login-copy h1 { max-width: 650px; margin: 18px 0; font-size: clamp(38px, 5vw, 66px); line-height: 1.06; letter-spacing: -.055em; }.login-copy p { max-width: 580px; margin: 0; color: #b4c7db; font-size: 14px; line-height: 1.8; }
.login-points { display: flex; flex-wrap: wrap; gap: 10px; }.login-points span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #c4d3e2; background: rgba(255,255,255,.05); font-size: 9px; }
.login-card { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 7vw, 100px); background: #fff; }
.login-card h2 { margin: 0 0 8px; font-size: 32px; letter-spacing: -.04em; }.login-card > div > p { margin: 0; color: var(--muted); font-size: 12px; }
.mobile-logo { display: none; margin-bottom: 32px; color: var(--blue); font-weight: 850; }
.login-card form { display: grid; gap: 17px; margin-top: 36px; }.login-card label { display: grid; gap: 8px; color: #4e6077; font-size: 10px; font-weight: 750; }.login-card input { height: 48px; padding: 0 14px; color: var(--ink); border: 1px solid #dce3eb; border-radius: 11px; outline: 0; }.login-card input:focus { border-color: #82aaff; box-shadow: 0 0 0 4px rgba(8,102,255,.08); }.wide { width: 100%; min-height: 48px; margin-top: 4px; justify-content: space-between; padding: 0 18px; }
.form-error { margin-top: 15px; padding: 11px 13px; border: 1px solid #f0c9cc; border-radius: 10px; color: #ad3138; background: #fff6f6; font-size: 10px; line-height: 1.5; }
.demo-note { display: grid; gap: 5px; margin-top: 18px; padding: 13px 14px; border: 1px solid #f0ddae; border-radius: 11px; color: #865900; background: #fffaf0; font-size: 10px; }.demo-note span { color: #263951; font-family: Consolas, monospace; font-weight: 800; }.demo-note small { color: #948263; line-height: 1.5; }
.login-card footer { margin-top: 32px; color: #a1abb8; font-size: 9px; }

/* Status tracking follows two independent cohorts: order date first, shipment date second. */
#extended-module-page[data-module="status-tracking"] .extended-summary-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; margin-bottom: 34px; }
#extended-module-page[data-module="status-tracking"] .extended-summary-card { display: flex; min-height: 132px; align-items: center; flex-direction: column; justify-content: center; padding: 18px 10px; border-color: #d8dee6; border-radius: 12px; box-shadow: none; text-align: center; }
#extended-module-page[data-module="status-tracking"] .extended-summary-card::before { display: none; }
#extended-module-page[data-module="status-tracking"] .extended-summary-card strong { order: 1; margin: 0; color: #172b43; font-size: clamp(28px, 2.25vw, 38px); font-weight: 820; letter-spacing: -.025em; }
#extended-module-page[data-module="status-tracking"] .extended-summary-card span { order: 2; margin-top: 10px; color: #758397; font-size: 14px; font-weight: 500; }
#extended-module-page[data-module="status-tracking"] .extended-summary-card.blue strong { color: #0b67f0; }
#extended-module-page[data-module="status-tracking"] .extended-summary-card.green strong { color: #18a33b; }
#extended-module-page[data-module="status-tracking"] .extended-summary-card.orange strong { color: #ed6500; }
#extended-module-page[data-module="status-tracking"] .extended-summary-card.red strong { color: #dc3345; }
#extended-module-page[data-module="status-tracking"] .extended-summary-card.violet strong { color: #6f3ac8; }

.status-section-heading { margin: 0 0 18px 20px; }
.status-section-heading h2 { margin: 0; color: #182d45; font-size: 20px; font-weight: 820; letter-spacing: -.02em; }
.status-section-heading p { margin: 7px 0 0; color: #738197; font-size: 13px; line-height: 1.6; }
.status-logistics-block { margin-bottom: 38px; }
.status-logistics-block .status-section-heading p { display: block; }
.logistics-groups { padding: 0 20px; gap: 26px; }
.logistics-group { gap: 12px; }
.logistics-group h3 { color: #3b4d63; font-size: 16px; }
.logistics-card-grid { grid-template-columns: repeat(3, minmax(185px, 255px)); gap: 12px; }
.logistics-card { min-height: 146px; gap: 6px; justify-content: center; padding: 16px 18px; border-color: #d7dde5; border-radius: 11px; box-shadow: none; }
.logistics-card > span { color: #45566d; font-size: 14px; }
.logistics-card > strong { color: #df3042; font-size: 29px; }
.logistics-card > small { color: #768499; font-size: 13px; line-height: 1.3; }

#extended-module-page[data-module="status-tracking"] #extended-table-panel { overflow: visible; margin-bottom: 58px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#extended-module-page[data-module="status-tracking"] #extended-table-panel > .panel-header,
#extended-module-page[data-module="status-tracking"] #extended-pagination-bar { display: none; }
#extended-module-page[data-module="status-tracking"] .extended-table-scroll { overflow-x: hidden; overflow-y: visible; max-height: none; }
#extended-module-page[data-module="status-tracking"] .extended-table { width: 100%; min-width: 0; table-layout: fixed; background: transparent; }
#extended-module-page[data-module="status-tracking"] .extended-table th { padding: 16px 8px; color: #14283f; border-bottom: 2px solid #d8dee6; background: transparent; font-size: 14px; font-weight: 820; text-align: center; }
#extended-module-page[data-module="status-tracking"] .extended-table td { height: 54px; padding: 12px 8px; color: #21384f; border-color: #e2e7ed; background: transparent; font-size: 14px; text-align: center; }
#extended-module-page[data-module="status-tracking"] .extended-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.5); }
#extended-module-page[data-module="status-tracking"] .extended-table tbody tr:hover td { background: #fff; }
.status-metric { grid-template-columns: minmax(24px, 56px) auto auto; min-width: 0; gap: 6px; }
.status-metric.no-bar { min-width: 0; justify-content: center; }
.status-metric > strong { min-width: 38px; color: #21384f; font-size: 14px; }
.status-metric > small { color: #7b8899; font-size: 12px; }
.status-mini-track { width: 100%; height: 5px; background: #e8edf2; }
.status-metric.neutral .status-mini-track b, .status-metric.transit .status-mini-track b { background: #cbd3dc; }
.status-metric.plain > strong { color: #21384f; font-weight: 600; }
.status-metric.plain > small { color: #7b8899; font-weight: 500; }

.status-shipment-block { margin-top: 10px; }
.status-source-unavailable { margin: 0 20px 32px; padding: 22px 24px; border: 1px solid #f1c97c; border-radius: 12px; background: #fff8e8; color: #6d4a12; }
.status-source-unavailable strong { font-size: 16px; }
.status-source-unavailable p { margin: 8px 0 0; color: #7b5b27; font-size: 13px; line-height: 1.65; }
.status-source-unavailable code { padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.72); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.status-shipment-toolbar { display: flex; min-height: 78px; align-items: center; gap: 14px; margin-bottom: 22px; padding: 13px 20px; border: 1px solid #e0e5eb; border-radius: 12px; background: #fff; }
.status-shipment-toolbar label { display: flex; align-items: center; gap: 10px; color: #263a51; font-size: 14px; font-weight: 760; }
.status-shipment-toolbar > span { color: #8491a3; }
.status-shipment-toolbar input { width: 178px; height: 42px; padding: 0 12px; color: #243950; border: 1px solid #d8dee6; border-radius: 8px; background: #fff; font: inherit; font-weight: 500; }
.status-shipment-summary { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.status-shipment-summary-card { display: flex; min-height: 132px; align-items: center; flex-direction: column; justify-content: center; border: 1px solid #d8dee6; border-radius: 12px; background: #fff; text-align: center; }
.status-shipment-summary-card strong { color: #172b43; font-size: clamp(28px, 2.25vw, 38px); font-weight: 820; letter-spacing: -.025em; }
.status-shipment-summary-card span { margin-top: 9px; color: #758397; font-size: 14px; }
.status-shipment-summary-card.red strong { color: #dc3345; }.status-shipment-summary-card.green strong { color: #18a33b; }.status-shipment-summary-card.blue strong { color: #0866f5; }.status-shipment-summary-card.orange strong { color: #ed6500; }.status-shipment-summary-card.violet strong { color: #6f3ac8; }.status-shipment-summary-card.slate strong { color: #5f7185; }
.status-shipment-table-wrap { overflow-x: hidden; }
.status-shipment-table { width: 100%; min-width: 0; table-layout: fixed; background: transparent; }
.status-shipment-table th { padding: 16px 8px; color: #14283f; border-bottom: 2px solid #d8dee6; background: transparent; font-size: 14px; text-align: center; }
.status-shipment-table td { height: 62px; padding: 12px 8px; color: #21384f; background: transparent; font-size: 14px; text-align: center; }
.status-shipment-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.5); }
.shipment-status-value { display: inline-flex; align-items: baseline; justify-content: center; gap: 5px; font-variant-numeric: tabular-nums; }
.shipment-status-value strong { color: #22384f; font-size: 14px; font-weight: 650; }.shipment-status-value small { color: #7b8899; font-size: 12px; }
.shipment-status-value.pending strong { color: #ec3346; }.shipment-status-value.delivering strong { color: #16a13a; }.shipment-status-value.signed strong { color: #0866f5; }.shipment-status-value.missing strong { color: #6f3ac8; }.shipment-status-value.lost strong { color: #ed6500; }
.status-row-export { min-width: 70px; min-height: 38px; padding: 0 14px; color: #0866f5; border: 1px solid #0866f5; border-radius: 7px; background: #fff; font-size: 13px; cursor: pointer; }
.status-row-export:hover { color: #fff; background: #0866f5; }

.account-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 18px; }
.account-summary-card { min-height: 118px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.account-summary-card small, .account-summary-card span { display: block; color: #8290a3; font-size: 10px; }
.account-summary-card strong { display: block; margin: 8px 0 7px; color: #173a70; font-size: 28px; }
.account-panel { overflow: visible; }
.credential-result { display: flex; align-items: center; gap: 13px; margin: 16px 22px 0; padding: 14px 16px; border: 1px solid #bfe5d1; border-radius: 11px; background: #f0fbf5; }
.credential-result > div { display: grid; gap: 4px; min-width: 180px; }.credential-result span { color: #628071; font-size: 10px; }
.credential-result code { flex: 1; padding: 10px 12px; border-radius: 8px; color: #164b35; background: #fff; font-size: 11px; white-space: pre-wrap; }
.account-editor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 22px; padding: 18px; border: 1px solid #d4e1f3; border-radius: 12px; background: #f8fbff; }
.account-editor label { display: grid; gap: 6px; color: #5c6d83; font-size: 10px; font-weight: 750; }
.account-editor input[type="text"], .account-editor input[type="password"] { height: 40px; padding: 0 11px; color: #24364d; border: 1px solid #d8e0ea; border-radius: 8px; background: #fff; outline: none; }
.account-editor input:focus { border-color: #88afff; box-shadow: 0 0 0 3px rgba(8,102,255,.08); }
.account-editor .account-enabled { display: flex; align-items: center; align-self: end; height: 40px; gap: 8px; }
.account-editor fieldset { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border: 1px solid #dbe3ed; border-radius: 9px; }
.account-editor legend { padding: 0 6px; color: #5c6d83; font-size: 10px; font-weight: 750; }
.account-store-grid { display: flex; flex-wrap: wrap; gap: 8px 14px; }.account-store-grid label { display: flex; align-items: center; gap: 6px; }
.account-editor-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.account-table-scroll { max-height: min(64vh, 720px); }.account-table { min-width: 980px; }
.account-table th, .account-table td { padding: 13px 14px; }.account-table td { vertical-align: middle; font-size: 11px; }
.account-identity { display: grid; gap: 4px; }.account-identity strong { color: #1b2e48; }.account-identity small { color: #8a98aa; }
.permission-chips { display: flex; flex-wrap: wrap; gap: 5px; }.permission-chips span, .account-role-badge, .account-status-badge { padding: 4px 7px; border-radius: 999px; color: #45627f; background: #edf3fa; font-size: 9px; }
.account-role-badge.admin { color: #6c45a4; background: #f1eaff; }.account-status-badge.enabled { color: #167848; background: #e6f8ef; }.account-status-badge.disabled { color: #a43b48; background: #ffedef; }
.account-actions { display: flex; gap: 7px; white-space: nowrap; }.account-actions button { min-height: 34px; padding: 0 11px; }

@media (max-width: 1180px) {
  .app-header { gap: 16px; padding: 0 18px; }.account-copy { display: none; }.module-nav a { padding: 0 11px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sales-trend-toolbar { flex-wrap: wrap; }
  .order-filter-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }.order-date-toolbar { flex-wrap: wrap; }
  .packing-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }.category-charts { grid-template-columns: 1fr; }
  #extended-module-page[data-module="status-tracking"] .extended-summary-grid, .status-shipment-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .connection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .app-header { min-height: auto; flex-wrap: wrap; padding-top: 13px; }.brand-lockup small { display: none; }.module-nav { order: 3; width: calc(100% + 36px); margin: 0 -18px; padding: 8px 18px 11px; }
  .app-shell { width: min(100% - 24px, 1500px); }.page-intro { padding-top: 25px; }.metric-grid { grid-template-columns: 1fr; }.date-toolbar { flex-wrap: wrap; }.date-toolbar label { flex: 1; }.date-toolbar input { width: 100%; }.quick-ranges { order: 3; }.date-toolbar .primary-button { order: 4; }.date-toolbar .secondary-button { order: 5; }
  .login-shell { grid-template-columns: 1fr; }.login-brand { display: none; }.login-card { min-height: 100vh; }.mobile-logo { display: block; }
  .trend-summary-grid { grid-template-columns: 1fr; }
  .order-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.order-status-bar, .order-pagination-bar { align-items: flex-start; flex-direction: column; padding-block: 12px; }.order-status-tabs { width: 100%; min-height: 44px; }.order-pagination-actions { width: 100%; justify-content: space-between; }
  .logistics-card-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  #extended-module-page[data-module="status-tracking"] .extended-summary-grid, .status-shipment-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-summary-grid { grid-template-columns: 1fr; }.account-editor { grid-template-columns: 1fr; }.credential-result { align-items: stretch; flex-direction: column; }
  .status-shipment-toolbar { align-items: stretch; flex-wrap: wrap; }.status-shipment-toolbar label { flex: 1 1 260px; }.status-shipment-toolbar input { flex: 1; width: auto; }
}
@media (max-width: 600px) {
  .account-menu .header-button { display: none; }.page-intro { align-items: start; flex-direction: column; }.provider-status { align-self: start; }
  .store-grid { grid-template-columns: repeat(2, 1fr); padding-inline: 13px; }.filter-heading { padding-inline: 14px; }.date-toolbar { padding-inline: 14px; }.quick-ranges { width: 100%; }.quick-ranges button { flex: 1; }.date-toolbar .primary-button, .date-toolbar .secondary-button { flex: 1; }
  .panel-header { align-items: start; flex-direction: column; }.canvas-wrap, .sales-module-canvas { height: 300px; }.planned-card { padding: 36px 22px; }.app-footer { flex-direction: column; }
  .login-card { padding: 30px 22px; }
  .order-filter-grid { grid-template-columns: 1fr; padding-inline: 14px; }.order-date-toolbar .export-button { flex: 1 0 100%; }.order-pagination-actions { align-items: flex-start; flex-direction: column; }.pagination { flex-wrap: wrap; }
  .extended-filter-fields { padding-inline: 14px; }.extended-filter-fields > label { min-width: 100%; }.extended-date-toolbar .export-button { flex: 1 0 100%; }.extended-summary-grid, .packing-bars { grid-template-columns: 1fr; }.category-bars > div { grid-template-columns: 95px minmax(80px, 1fr) 38px; }
  .logistics-groups { padding-inline: 14px; }.logistics-card-grid { grid-template-columns: 1fr; }
  #extended-module-page[data-module="status-tracking"] .extended-summary-grid, .status-shipment-summary { grid-template-columns: 1fr; }
  .connection-heading { align-items: flex-start; flex-direction: column; }.connection-grid { grid-template-columns: 1fr; padding-inline: 14px; }.connection-notice { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }