:root {
  --ink: #18212f;
  --muted: #7b8797;
  --line: #e8edf2;
  --surface: #ffffff;
  --canvas: #f7f9fb;
  --navy: #0f172a;
  --blue: #3e73ee;
  --blue-soft: #edf3ff;
  --green: #18a77c;
  --orange: #ec9a3a;
  --violet: #8273ed;
  --shadow: 0 8px 30px rgba(34, 48, 73, .045);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 1080px; min-height: 100%; background: var(--canvas); color: var(--ink); font-family: Manrope, "Noto Sans SC", sans-serif; }
body { font-size: 14px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { display: flex; min-height: 100vh; }

.sidebar { width: 242px; flex: 0 0 242px; background: var(--navy); color: #dbe2ee; display: flex; flex-direction: column; min-height: 100vh; }
.brand { height: 86px; display: flex; align-items: center; gap: 11px; padding: 0 25px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #fff; font-size: 19px; font-weight: 800; background: linear-gradient(135deg, #4b7bf2, #7f95fd); box-shadow: 0 5px 16px rgba(62, 115, 238, .35); }
.brand strong { display: block; font-size: 15px; letter-spacing: -.3px; color: #fff; }
.brand span { display: block; margin-top: 3px; color: #8492a7; font-size: 11px; font-weight: 700; letter-spacing: 1.15px; }
.sidebar-scroll { flex: 1; overflow: auto; padding: 28px 13px; }
.nav-group { margin-bottom: 25px; }
.nav-label { color: #6e7b91; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; margin: 0 13px 9px; text-transform: uppercase; }
.nav-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 13px; margin: 2px 0; background: transparent; color: #aeb8c9; border: 0; border-radius: 8px; text-align: left; font-size: 14px; transition: .18s ease; }
.nav-item:hover { color: #f6f9ff; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: rgba(75, 123, 242, .22); }
.nav-item.active:before { content: ""; position: absolute; left: -13px; width: 3px; height: 21px; border-radius: 0 3px 3px 0; background: #7191f7; }
.nav-icon { display: inline-grid; color: #77859a; }
.nav-item.active .nav-icon { color: #80a0ff; }
.nav-item em { margin-left: auto; padding: 3px 6px; border-radius: 4px; background: rgba(236, 154, 58, .18); color: #e9ad64; font-size: 12px; font-style: normal; }
.nav-chevron { display: inline-grid; margin-left: auto; color: #65738a; }
.nested-nav { padding: 2px 0 3px 44px; border-left: 1px solid #27334a; margin-left: 19px; }
.nested-nav button { display: block; width: 100%; padding: 7px 9px; border: 0; color: #77859a; background: transparent; text-align: left; font-size: 13px; border-radius: 5px; }
.nested-nav button:hover, .nested-nav button.active { color: #dbe6ff; background: rgba(255,255,255,.045); }
.nested-nav button span { float: right; color: #e6a25a; }
.sidebar-bottom { padding: 0 17px 18px; }
.status-line { display: flex; align-items: center; gap: 8px; padding: 11px 8px; color: #7f8ba0; font-size: 13px; }
.status-line i, .health-status i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #3fcd93; box-shadow: 0 0 0 3px rgba(63,205,147,.12); }
.user-mini { display: flex; align-items: center; gap: 9px; padding: 13px 9px 0; border-top: 1px solid rgba(255,255,255,.08); }
.user-mini > div { flex: 1; min-width: 0; }
.user-mini strong, .user-mini small { display: block; }
.user-mini strong { color: #dce3ef; font-size: 13px; font-weight: 600; }
.user-mini small { margin-top: 3px; color: #77849a; font-size: 13px; }
.user-mini > svg { color: #697790; }
.avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 29px; height: 29px; border-radius: 50%; font-size: 13px; font-weight: 800; }
.avatar-blue { color: #fff; background: linear-gradient(135deg, #587ff1, #9aafff); }
.avatar-green { color: #14684d; background: #c6f0df; }
.avatar-orange { color: #8d5417; background: #fbe0b9; }
.avatar-violet { color: #6354a9; background: #dfd9fb; }

.main { min-width: 0; flex: 1; }
.main-inner { max-width: 1600px; min-height: 100vh; margin: 0 auto; }
.topbar { height: 70px; padding: 0 42px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.breadcrumb { display: flex; align-items: center; gap: 9px; color: #9aa4b2; font-size: 13px; }
.breadcrumb svg { color: #b1bac6; transform: rotate(180deg); }
.breadcrumb strong { color: #425066; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 21px; }
.global-search { width: 247px; height: 35px; display: flex; align-items: center; gap: 8px; padding: 0 9px; color: #a0acba; background: #f6f8fa; border: 1px solid #eef1f4; border-radius: 6px; }
.global-search input, .search-input input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; }
.global-search input::placeholder, .search-input input::placeholder { color: #a9b2be; }
kbd { padding: 2px 5px; border: 1px solid #dfe4eb; border-radius: 3px; color: #a6b0bd; background: #fff; font-family: "DM Mono", monospace; font-size: 12px; }
.top-icon { position: relative; display: grid; place-items: center; padding: 3px; color: #8692a2; border: 0; background: transparent; }
.top-icon i { position: absolute; width: 5px; height: 5px; top: 1px; right: 0; border-radius: 50%; background: #ef8e70; }
.top-user { display: flex; align-items: center; gap: 8px; color: #4b5667; font-size: 13px; }
.top-user svg { color: #9ba6b5; }
.top-user small { padding-left: 2px; color: #9aa5b4; font-size: 11px; }
.access-denied { max-width: 620px; margin: 70px auto; padding: 54px 36px; text-align: center; }
.access-denied .empty-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; color: #cf6e6e; border-radius: 18px; background: #fff0f0; }
.access-denied h2 { margin: 0 0 8px; color: #24364e; }
.access-denied p { margin: 0 auto 22px; color: #7b899b; }
.content { padding: 36px 42px 54px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.eyebrow, .panel-kicker { color: #94a0b0; font-family: "DM Mono", monospace; font-size: 12px; font-weight: 500; letter-spacing: 1.25px; }
.page-header h1 { margin: 7px 0 7px; color: #1c2635; font-size: 27px; letter-spacing: -.85px; line-height: 1.15; }
.page-header p { margin: 0; color: #8490a1; font-size: 14px; }
.button { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid transparent; border-radius: 5px; font-size: 13px; font-weight: 600; transition: .18s ease; white-space: nowrap; }
.button-primary { color: #fff; background: #4778ed; box-shadow: 0 4px 10px rgba(71,120,237,.18); }
.button-primary:hover { background: #3769de; transform: translateY(-1px); }
.button-secondary { color: #4773d9; border-color: #cedcff; background: #f6f8ff; }
.button-ghost { color: #667487; border-color: #e2e7ed; background: #fff; }
.button-ghost:hover, .button-secondary:hover { background: #f5f8ff; border-color: #cbd8fa; }
.button-small { height: 27px; padding: 0 10px; font-size: 13px; }
.text-button { display: inline-flex; align-items: center; gap: 6px; color: #5278d8; border: 0; background: transparent; font-size: 13px; }
.text-button:hover { color: #2555c4; }
.icon-button { display: inline-grid; place-items: center; width: 29px; height: 29px; padding: 0; color: #9aa5b3; border: 0; border-radius: 4px; background: transparent; }
.icon-button:hover { color: #5279dc; background: var(--blue-soft); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 15px; }
.metric-card { position: relative; min-height: 126px; padding: 19px 20px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.metric-card:after { content: ""; position: absolute; right: -24px; bottom: -42px; width: 95px; height: 95px; border-radius: 50%; opacity: .45; background: currentColor; filter: blur(12px); }
.accent-blue { color: var(--blue); }.accent-green { color: var(--green); }.accent-orange { color: var(--orange); }.accent-violet { color: var(--violet); }
.metric-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: #8995a6; font-size: 13px; }
.metric-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 6px; background: currentColor; color: currentColor; }
.metric-icon svg { color: #fff; }
.metric-card > strong { position: relative; z-index: 1; display: block; margin: 15px 0 7px; color: #1d2938; font-size: 23px; letter-spacing: -.8px; }
.metric-card > small { position: relative; z-index: 1; color: #99a4b2; font-size: 13px; }
.metric-card > small:before { content: "↗"; margin-right: 4px; color: var(--green); font-size: 13px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .95fr); gap: 15px; margin-bottom: 15px; }
.panel { border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: var(--shadow); }
.panel-heading { min-height: 68px; padding: 19px 21px 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.panel-heading h2 { margin: 5px 0 0; color: #263244; font-size: 14px; letter-spacing: -.3px; }
.panel-heading p { margin: 5px 0 0; }
.muted { color: #98a3b1; font-size: 13px; }
.select { height: 32px; padding: 0 27px 0 10px; border: 1px solid #e3e8ed; border-radius: 5px; color: #697789; background: #fff; outline: none; font-size: 13px; }
.select:focus { border-color: #aac1fd; }
.select.compact { height: 29px; font-size: 13px; }
.fake-chart { height: 218px; padding: 18px 20px 13px 20px; display: flex; gap: 12px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; width: 42px; padding-bottom: 20px; color: #a6afbb; font-family: "DM Mono", monospace; font-size: 11px; }
.chart-drawing { position: relative; flex: 1; background: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, #f0f3f6 48px); }
.chart-bars { position: absolute; inset: 0 3% 20px; display: flex; align-items: flex-end; justify-content: space-around; gap: 8%; }
.chart-bars i { display: block; width: 11%; min-height: 13px; border-radius: 4px 4px 0 0; background: #e4ecfd; }
.chart-bars i.active { background: #91aafa; }
.chart-line { position: absolute; left: 5%; right: 5%; top: 21%; height: 50%; border-top: 1.7px solid #527df3; transform: skewY(-10deg); opacity: .9; clip-path: polygon(0 80%, 18% 45%, 39% 63%, 58% 26%, 78% 31%, 100% 0, 100% 3%, 78% 34%, 58% 29%, 39% 66%, 18% 48%, 0 83%); background: #527df3; }
.line-area { position: absolute; inset: 25% 5% 20px; background: linear-gradient(145deg, transparent 30%, rgba(82,125,243,.04)); clip-path: polygon(0 70%, 18% 36%, 39% 54%, 58% 18%, 78% 23%, 100% 0, 100% 100%, 0 100%); }
.chart-tooltip { position: absolute; right: 8%; top: 1%; z-index: 2; padding: 7px 9px; border: 1px solid #dce5ff; border-radius: 5px; background: #fff; box-shadow: 0 5px 16px rgba(54,78,130,.10); }
.chart-tooltip span, .chart-tooltip strong { display: block; }.chart-tooltip span { color: #91a0b3; font-size: 11px; }.chart-tooltip strong { margin-top: 3px; color: #416edb; font-size: 13px; }
.chart-x { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-around; color: #a6afbb; font-family: "DM Mono", monospace; font-size: 11px; }
.quick-panel { padding-bottom: 10px; }.quick-list { padding: 0 16px 5px; }.quick-list button { width: 100%; display: flex; align-items: center; gap: 11px; padding: 13px 5px; border: 0; border-bottom: 1px solid #f0f2f4; color: #8d98a6; background: transparent; text-align: left; }.quick-list button:last-child { border-bottom: 0; }.quick-list button > span:nth-child(2) { flex: 1; }.quick-list strong, .quick-list small { display: block; }.quick-list strong { color: #334154; font-size: 13px; font-weight: 600; }.quick-list small { margin-top: 4px; color: #9aa5b3; font-size: 12px; }.quick-list > button > svg { color: #adb6c2; }.quick-symbol { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; }.quick-symbol.blue { color: #547cf0; background: #edf2ff; }.quick-symbol.green { color: #2aaa80; background: #e8faf3; }.quick-symbol.orange { color: #ec9a3a; background: #fff4e5; }
.table-panel { overflow: hidden; }.table-wrap { overflow: auto; }.table-wrap table { width: 100%; border-collapse: collapse; }.table-wrap th { padding: 10px 21px; color: #9da8b5; background: #fafbfc; border-top: 1px solid #f1f3f5; border-bottom: 1px solid #edf0f2; font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; }.table-wrap td { padding: 13px 21px; color: #586678; border-bottom: 1px solid #f0f2f4; font-size: 13px; white-space: nowrap; }.table-wrap tbody tr:last-child td { border-bottom: 0; }.table-wrap tbody tr:hover td { background: #fbfcff; }.table-wrap td strong { color: #334153; font-weight: 600; }.table-wrap td small { display: block; margin-top: 4px; color: #a1abb7; font-size: 12px; }.table-action { display: inline-flex; align-items: center; gap: 5px; color: #5378d8; border: 0; background: transparent; font-size: 13px; }.profit-text { color: #23a078 !important; }.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 4px; font-size: 12px; font-weight: 600; }.status-badge i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.status-badge.success { color: #219c76; background: #ebfaf4; }.status-badge.info { color: #4b77dd; background: #edf3ff; }.status-badge.warning { color: #c98736; background: #fff6e8; }.status-badge.neutral { color: #8d98a6; background: #f2f4f6; }.record-count { color: #9aa5b3; font-size: 13px; }.table-footer { display: flex; align-items: center; justify-content: space-between; padding: 13px 21px; color: #a0aab7; font-size: 13px; }.pagination { display: flex; gap: 4px; }.pagination button { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #e7ebf0; border-radius: 4px; color: #8c98a7; background: #fff; font-size: 13px; }.pagination button.pagination-active { color: #fff; border-color: #5b82e9; background: #5b82e9; }

.subnav { display: flex; align-items: center; gap: 24px; margin: -8px 0 22px; border-bottom: 1px solid #e1e6eb; }.subnav button:not(.button) { position: relative; padding: 0 0 11px; border: 0; color: #98a3b1; background: transparent; font-size: 13px; }.subnav button.subnav-active { color: #416fd9; font-weight: 600; }.subnav button.subnav-active:after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 3px 3px 0 0; background: #4d7af0; }.subnav em { margin-left: 4px; padding: 2px 5px; color: #c88632; background: #fff3df; border-radius: 8px; font-size: 11px; font-style: normal; }.filter-panel { margin-bottom: 15px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: var(--shadow); }.filter-row { display: flex; align-items: flex-end; gap: 10px; }.filter-row label { display: flex; flex-direction: column; gap: 6px; color: #9aa5b3; font-size: 13px; }.filter-row label .select { min-width: 133px; }.filter-button { margin-left: auto; }.form-panel, .upload-panel { margin-bottom: 15px; }.required-note { color: #cf897f; font-size: 13px; }.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 3px 21px 23px; }.form-grid label { display: flex; flex-direction: column; gap: 7px; color: #7b8796; font-size: 13px; }.form-grid label > span { color: #d37d6c; }.form-grid .select { width: 100%; }.stepper { display: flex; align-items: flex-start; margin: 4px 0 28px; }.step { display: flex; align-items: center; gap: 8px; color: #a5afbc; font-size: 13px; }.step b { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #dde3ea; border-radius: 50%; color: #a4aeba; font-family: "DM Mono", monospace; font-size: 12px; font-weight: 500; }.step.active { color: #4778ed; font-weight: 600; }.step.active b { color: #fff; border-color: #4778ed; background: #4778ed; }.step-line { width: 64px; height: 1px; margin: 13px 12px 0; background: #e0e5eb; }.upload-count { padding: 4px 7px; color: #4778ed; border-radius: 4px; background: #edf3ff; font-size: 13px; }.upload-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 3px 21px 22px; }.upload-item { display: flex; align-items: center; gap: 9px; min-height: 64px; padding: 10px; border: 1px dashed #d8e0e8; border-radius: 6px; background: #fcfdfe; cursor: pointer; }.upload-item:hover, .upload-item.upload-focus { border-color: #8babf2; background: #f7f9ff; }.upload-item.uploaded { border-style: solid; border-color: #9bdbc2; background: #f3fcf8; }.upload-icon { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; color: #6b8be4; border-radius: 7px; background: #eaf0ff; }.upload-item.uploaded .upload-icon { color: #25a77f; background: #e5f8f0; }.upload-item strong, .upload-item small { display: block; }.upload-item strong { color: #485567; font-size: 13px; }.upload-item small { margin-top: 5px; color: #a3adba; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }.upload-item > i { display: grid; place-items: center; margin-left: auto; color: #aab4bf; font-style: normal; }.upload-item.uploaded > i { color: #22a37a; }.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 21px; border-top: 1px solid #f0f2f4; }.history-grid { display: grid; gap: 12px; }.history-card { display: grid; grid-template-columns: 75px minmax(0,1fr) 30px; align-items: center; gap: 21px; min-height: 133px; padding: 19px 22px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: var(--shadow); }.history-card.history-pending { border-color: #f0dfc4; background: #fffdf9; }.history-date { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid #edf0f3; color: #a0acba; }.history-date span { font-family: "DM Mono", monospace; font-size: 12px; }.history-date strong { margin: 4px 0; color: #3e4d63; font-size: 29px; letter-spacing: -1px; }.history-date small { font-size: 12px; }.history-title { display: flex; align-items: center; gap: 9px; }.history-title h2 { margin: 0; color: #2b3749; font-size: 15px; }.history-card p { margin: 8px 0 16px; color: #98a3b1; font-size: 13px; }.history-stats { display: flex; gap: 30px; color: #9ba6b4; font-size: 13px; }.history-stats strong { display: block; margin-top: 5px; color: #465568; font-size: 14px; }.review-alert { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; padding: 15px 18px; border: 1px solid #f4dfc2; border-radius: 7px; color: #bd8032; background: #fffaf2; }.review-alert > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 7px; background: #fff0d7; }.review-alert strong { display: block; color: #9e6826; font-size: 13px; }.review-alert p { margin: 5px 0 0; color: #b69368; font-size: 13px; }.match-pill { display: inline-block; padding: 4px 6px; border-radius: 4px; color: #4778d8; background: #edf3ff; font-family: "DM Mono", monospace; font-size: 12px; }.match-pill.warning { color: #c48637; background: #fff3df; }.select-small { height: 27px; font-size: 13px; }

.history-calendar { margin-bottom: 15px; overflow: hidden; }
.history-calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 22px 17px; }
.history-calendar-heading h2 { margin: 5px 0 4px; color: #29384c; font-size: 15px; }
.history-calendar-heading p { margin: 0; color: #8e9aaa; font-size: 12px; }
.history-year-switch { display: flex; align-items: center; gap: 10px; }
.history-year-switch .button { width: 34px; padding: 0; font-size: 21px; }
.history-year-switch strong { min-width: 75px; color: #2e4058; font-size: 14px; text-align: center; }
.history-calendar-scroll { padding: 0 22px 20px; overflow-x: auto; }
.history-calendar-month-header { display: grid; grid-template-columns: 176px repeat(12, minmax(60px, 1fr)); align-items: center; min-width: 896px; min-height: 34px; color: #97a3b1; background: #f8fafc; border: 1px solid #edf1f4; border-radius: 7px 7px 0 0; }
.history-calendar-month-header > span { padding-left: 14px; font-size: 12px; }
.history-calendar-month-header > b { text-align: center; font-size: 12px; font-weight: 600; }
.history-calendar-row { display: grid; grid-template-columns: 176px minmax(720px, 1fr); align-items: stretch; min-width: 896px; border-right: 1px solid #edf1f4; border-bottom: 1px solid #edf1f4; border-left: 1px solid #edf1f4; background: #fff; }
.history-calendar-row:last-child { border-radius: 0 0 7px 7px; }
.history-account-name { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 11px 14px; border-right: 1px solid #edf1f4; }
.history-account-name strong, .history-account-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-account-name strong { color: #334257; font-size: 13px; }
.history-account-name span { margin-top: 5px; color: #8d99a8; font-size: 11px; }
.history-months { display: grid; grid-template-columns: repeat(12, minmax(60px, 1fr)); }
.history-month { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 58px; padding: 7px 3px; border: 0; border-right: 1px solid #f0f3f6; text-align: center; }
.history-month:last-child { border-right: 0; }
.history-month b, .history-month span { display: block; }
.history-month b { font-family: "DM Mono", monospace; font-size: 13px; }
.history-month span { margin-top: 5px; font-size: 11px; }
.history-month.empty { color: #aab3bf; background: #fbfcfd; }
.history-month.uploaded { color: #19785b; background: #eaf8f2; cursor: pointer; transition: background .16s ease, box-shadow .16s ease; }
.history-month.uploaded:hover { color: #116448; background: #dcf3e9; box-shadow: inset 0 0 0 1px #9bd5bf; }
.history-month.uploaded b { font-weight: 700; }
.history-calendar-empty { min-width: 896px; padding: 30px; color: #98a4b2; border: 1px solid #edf1f4; border-top: 0; text-align: center; font-size: 13px; }
.history-filter-panel { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 15px; padding: 15px 18px; }
.history-filter-panel > div { margin-right: auto; }
.history-filter-panel > div strong, .history-filter-panel > div span { display: block; }
.history-filter-panel > div strong { color: #304056; font-size: 14px; }
.history-filter-panel > div span { margin-top: 5px; color: #929eac; font-size: 12px; }
.history-filter-panel label { display: flex; flex-direction: column; gap: 6px; min-width: 165px; color: #8e9aa8; font-size: 12px; }
.history-filter-panel .record-count { align-self: center; min-width: 64px; text-align: right; }
.history-account-type { display: inline-flex; padding: 4px 7px; color: #3f70c8; border-radius: 999px; background: #edf3ff; font-size: 11px; font-weight: 600; }

.product-subnav { gap: 24px; }.product-subnav span { flex: 1; }.product-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 15px; }.product-stats > div { padding: 17px 19px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: var(--shadow); }.product-stats span, .product-stats small { display: block; color: #9aa5b3; font-size: 13px; }.product-stats strong { display: block; margin: 9px 0 5px; color: #263446; font-size: 21px; }.product-stats small:before { content: "↗"; color: #32ab83; margin-right: 4px; }.orange-text { color: #d8923e !important; }.table-tools { display: flex; align-items: center; gap: 8px; }.search-input { display: flex; align-items: center; gap: 7px; width: 190px; height: 30px; padding: 0 9px; border: 1px solid #e3e8ed; border-radius: 5px; color: #a1adbb; }.product-cell { display: flex; align-items: center; gap: 9px; }.product-thumb { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 5px; color: #7594ea; background: #edf2ff; }.mono { font-family: "DM Mono", monospace; font-size: 13px; color: #6c7a8c; }

.ai-hero { display: flex; align-items: center; gap: 17px; min-height: 119px; margin-bottom: 15px; padding: 23px 26px; border-radius: 8px; color: #e8ecff; background: linear-gradient(105deg, #182542, #243767); box-shadow: 0 8px 24px rgba(24,37,66,.12); }.ai-orb { display: grid; place-items: center; flex: 0 0 auto; width: 55px; height: 55px; border: 1px solid rgba(149,169,255,.3); border-radius: 16px; color: #9fb4ff; background: rgba(130,154,255,.15); }.eyebrow.light { color: #8fa7ef; }.ai-hero h2 { margin: 6px 0; color: #fff; font-size: 17px; }.ai-hero p { margin: 0; color: #a9b7d6; font-size: 13px; }.ai-hero-meta { margin-left: auto; min-width: 145px; padding-left: 24px; border-left: 1px solid rgba(255,255,255,.12); }.ai-hero-meta span, .ai-hero-meta small { display: block; color: #9fafd0; font-size: 13px; }.ai-hero-meta strong { display: block; margin: 5px 0; color: #fff; font-size: 21px; }.ai-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 15px; margin-bottom: 15px; }.model-row { display: flex; align-items: center; gap: 11px; padding: 12px 21px; border-top: 1px solid #f0f2f4; }.model-logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; font-size: 15px; font-weight: 700; }.model-logo.openai { color: #1f8a6e; background: #e5f7f0; }.model-logo.deepseek { color: #5479dd; background: #edf2ff; }.model-logo.gemini { color: #9e6bd6; background: #f3eafd; }.model-row > div { flex: 1; }.model-row strong, .model-row small { display: block; }.model-row strong { color: #455366; font-size: 13px; }.model-row small { margin-top: 4px; color: #a0abb8; font-size: 12px; }.online-dot, .offline-dot { font-size: 12px; }.online-dot { color: #25a67e; }.offline-dot { color: #a1abb8; }.online-dot:before, .offline-dot:before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0; border-radius: 50%; background: currentColor; }.usage-panel { padding-bottom: 18px; }.usage-number { padding: 3px 21px 10px; }.usage-number strong { display: inline-block; color: #4c76df; font-size: 29px; letter-spacing: -1px; }.usage-number span { margin-left: 6px; color: #9ba6b4; font-size: 13px; }.usage-bar { height: 6px; margin: 0 21px 8px; border-radius: 6px; background: #edf0f4; }.usage-bar i { display: block; width: 31%; height: 100%; border-radius: 6px; background: #7093f2; }.usage-foot { display: flex; justify-content: space-between; padding: 0 21px; color: #a1acb9; font-size: 12px; }.usage-foot strong { color: #566476; font-weight: 600; }.usage-divider { height: 1px; margin: 18px 21px 13px; background: #edf0f3; }.ai-task-list { padding-bottom: 4px; }.ai-task { display: flex; align-items: flex-start; gap: 12px; padding: 12px 21px; border-top: 1px solid #f0f2f4; }.task-status { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; }.task-status.done { color: #20a47b; background: #e8f9f2; }.task-status.running { color: #527be2; background: #ebf1ff; }.task-status.pending { color: #ca8d3f; background: #fff4e1; }.task-main { flex: 1; }.task-title { display: flex; align-items: center; gap: 8px; }.task-title strong { color: #445265; font-size: 13px; }.task-main p { margin: 5px 0 7px; color: #9ca7b4; font-size: 12px; }.progress { height: 4px; border-radius: 5px; background: #edf1f5; }.progress i { display: block; height: 100%; border-radius: 5px; background: #688ff1; }

.admin-metrics { margin-bottom: 15px; }.admin-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 15px; margin-bottom: 15px; }.member-row { display: flex; align-items: center; gap: 10px; padding: 11px 21px; border-top: 1px solid #f0f2f4; }.member-row > div { flex: 1; }.member-row strong, .member-row small { display: block; }.member-row strong { color: #445265; font-size: 13px; }.member-row small { margin-top: 4px; color: #9ca7b4; font-size: 12px; }.role-tag { padding: 4px 7px; color: #4c77dc; border-radius: 4px; background: #edf3ff; font-size: 12px; }.role-tag.role-light { color: #8d98a5; background: #f2f4f6; }.health-status { display: inline-flex; align-items: center; gap: 6px; color: #27a17b; font-size: 13px; }.health-list { padding: 0 21px; }.health-list > div { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid #f0f2f4; color: #6e7b8b; font-size: 13px; }.health-list > div > strong { color: #5b697a; font-size: 13px; font-weight: 500; }.system-action { display: flex; align-items: center; justify-content: space-between; margin: 7px 21px 12px; padding-top: 13px; border-top: 1px solid #f0f2f4; color: #587ddd; font-size: 13px; }.system-action span { display: flex; align-items: center; gap: 7px; }.notice-panel { padding-bottom: 4px; }.activity-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 21px; border-top: 1px solid #f0f2f4; }.activity-dot { width: 7px; height: 7px; margin: 4px 2px 0 0; border-radius: 50%; }.activity-dot.blue { background: #6a91f0; }.activity-dot.green { background: #42b990; }.activity-row strong, .activity-row small { display: block; }.activity-row strong { color: #586577; font-size: 13px; font-weight: 600; }.activity-row small { margin-top: 4px; color: #a4aeba; font-size: 12px; }
.empty-state { padding: 60px 20px; color: #7f8a99; text-align: center; }.empty-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 50%; color: #86a0e8; background: #eef3ff; }.empty-state strong { display: block; color: #526074; font-size: 14px; }.empty-state p { margin: 6px 0 0; font-size: 13px; }
.toast-region { position: fixed; right: 25px; bottom: 25px; z-index: 10; display: grid; gap: 9px; }.toast { display: flex; align-items: center; gap: 9px; min-width: 245px; padding: 11px 14px; border: 1px solid #d6efe4; border-radius: 7px; color: #217d60; background: #f3fcf8; box-shadow: 0 10px 30px rgba(28,62,48,.12); font-size: 13px; transform: translateY(10px); opacity: 0; transition: .24s ease; }.toast.info { color: #4b72cf; border-color: #dae4ff; background: #f5f8ff; }.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 1250px) { .content { padding-right: 28px; padding-left: 28px; }.topbar { padding-right: 28px; padding-left: 28px; }.metric-card { padding-right: 15px; padding-left: 15px; }.filter-row label .select { min-width: 110px; } }

/* Visual refresh: clearer hierarchy, quieter surfaces, stronger business focus. */
:root { --canvas: #f5f7fa; --line: #e6ebf0; --ink: #172234; --navy: #fff; --blue: #356be7; --shadow: 0 6px 22px rgba(23, 39, 63, .045); }
body { color: #1b2738; background: #f5f7fa; }
.sidebar { width: 224px; flex-basis: 224px; color: #5a687a; background: #fff; border-right: 1px solid #e8edf2; }
.brand { height: 78px; padding: 0 22px; border-bottom: 1px solid #edf0f3; }
.brand-mark { width: 29px; height: 29px; border-radius: 8px; background: #1e3668; box-shadow: none; }
.brand strong { color: #1c2b43; font-size: 14px; }.brand span { color: #a3adba; }
.sidebar-scroll { padding: 25px 12px; }.nav-group { margin-bottom: 25px; }.nav-label { color: #a1acba; margin-right: 12px; margin-left: 12px; letter-spacing: 1.2px; }
.nav-item { padding: 10px 12px; color: #647286; border-radius: 6px; }.nav-item:hover { color: #315fc9; background: #f4f7fc; }.nav-item.active { color: #275dcd; background: #edf3ff; }.nav-item.active:before { left: -12px; width: 3px; background: #3f72e8; }.nav-icon { color: #9da9b7; }.nav-item.active .nav-icon { color: #3f72e8; }.nav-item em { color: #c78d3e; background: #fff5e4; }.nav-chevron { color: #a6b0bd; }.nested-nav { border-left-color: #e4eaf1; }.nested-nav button { color: #8591a1; }.nested-nav button:hover, .nested-nav button.active { color: #3568d5; background: #f7f9fc; }
.sidebar-bottom { padding: 0 16px 17px; }.status-line { color: #9aa5b2; }.user-mini { border-top-color: #edf0f3; }.user-mini strong { color: #556276; }.user-mini small { color: #9aa5b2; }.user-mini > svg { color: #a9b3bf; }
.main { background: #f5f7fa; }.topbar { height: 66px; padding: 0 38px; background: rgba(255,255,255,.88); border-bottom-color: #e8edf2; }.breadcrumb { color: #a6b0bd; }.breadcrumb strong { color: #526174; }.global-search { width: 263px; background: #f7f9fb; border-color: #edf0f3; }.top-user { color: #617084; }
.content { padding: 34px 38px 55px; }.page-header { margin-bottom: 25px; }.page-header h1 { color: #18263a; font-size: 29px; letter-spacing: -1px; }.page-header p { color: #8290a2; }
.button { height: 35px; border-radius: 6px; }.button-primary { background: #356be7; box-shadow: 0 5px 12px rgba(53,107,231,.16); }.button-primary:hover { background: #2c5fd4; }
.panel { border-color: #e7ecf1; border-radius: 9px; box-shadow: 0 4px 18px rgba(22, 42, 70, .035); }.panel-heading { padding: 19px 22px 14px; }.panel-heading h2 { color: #29384c; font-size: 14px; }.panel-kicker { color: #9ba7b5; letter-spacing: 1.4px; }
.dashboard-command { display: flex; justify-content: space-between; gap: 24px; min-height: 154px; margin-bottom: 13px; padding: 25px 28px; color: #fff; border-radius: 10px; background: linear-gradient(110deg, #1c315d 0%, #274783 65%, #315da0 100%); box-shadow: 0 9px 23px rgba(35, 61, 107, .12); }.command-copy { flex: 1; }.command-label { color: #a9bee8; font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 1px; }.command-copy h2 { margin: 10px 0 7px; color: #fff; font-size: 16px; font-weight: 600; }.command-profit { color: #fff; font-size: 29px; font-weight: 800; letter-spacing: -1px; }.command-profit span { display: inline-flex; align-items: center; gap: 4px; margin-left: 11px; padding: 5px 7px; color: #93e1bf; border-radius: 4px; background: rgba(112,226,177,.1); font-size: 13px; font-weight: 600; letter-spacing: 0; vertical-align: middle; }.command-profit i { color: #b4c7e9; font-style: normal; font-weight: 400; }.command-copy p { margin: 8px 0 0; color: #b9c8e3; font-size: 13px; }.command-period { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 175px; padding-left: 23px; border-left: 1px solid rgba(255,255,255,.15); }.command-period span { color: #aec0df; font-size: 12px; }.command-period strong { margin: 6px 0 17px; color: #fff; font-size: 15px; }.command-period button { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: #c1d3f5; border: 0; background: transparent; font-size: 13px; }.command-period button:hover { color: #fff; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 15px; }.summary-metric { min-height: 92px; padding: 16px 18px; border: 1px solid #e7ecf1; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }.summary-metric > span, .summary-metric > small { display: block; color: #8d9aaa; font-size: 13px; }.summary-metric > strong { display: block; margin: 8px 0 5px; font-size: 19px; letter-spacing: -.5px; }.summary-metric > small:before { content: "↗"; margin-right: 4px; color: #29a47e; }.tone-blue { color: #376dde; }.tone-green { color: #249d77; }.tone-violet { color: #7e6ddd; }.tone-orange { color: #d78d35; }
.dashboard-grid { grid-template-columns: minmax(0, 1.6fr) minmax(290px, .8fr); gap: 15px; margin-bottom: 15px; }.chart-panel, .quick-panel { min-height: 312px; }.chart-panel .panel-heading { min-height: 80px; }.trend-chart { height: 224px; display: flex; gap: 13px; padding: 11px 22px 18px 22px; }.chart-axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 21px; color: #a1acb9; font-family: "DM Mono", monospace; font-size: 11px; }.trend-drawing { position: relative; flex: 1; min-width: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, #eff2f5 48px); }.trend-drawing svg { position: absolute; inset: 0 0 22px; width: 100%; height: calc(100% - 22px); overflow: visible; }.trend-drawing .chart-tooltip { right: 2%; top: 3%; }.chart-x { bottom: 0; }
.quick-panel .panel-heading { min-height: 80px; }.quick-list { padding: 0 18px 8px; }.quick-list button { padding: 14px 4px; }.quick-list strong { color: #334257; font-size: 13px; }.quick-list small { color: #9ca7b5; }.quick-symbol { width: 34px; height: 34px; border-radius: 8px; }.quick-symbol.blue { color: #4775dd; background: #eef3ff; }.quick-symbol.green { color: #27a47b; background: #eaf9f3; }.quick-symbol.orange { color: #d78c34; background: #fff5e7; }
.table-panel .panel-heading { min-height: 79px; }.table-wrap th { padding: 11px 22px; color: #9ca8b6; background: #fafbfc; }.table-wrap td { padding: 14px 22px; }.table-wrap td strong { color: #364458; }.table-wrap tbody tr:hover td { background: #f9fbff; }.status-badge { border-radius: 5px; }
.subnav { margin-top: -5px; }.filter-panel { box-shadow: var(--shadow); }.history-card { box-shadow: var(--shadow); }.product-stats > div { box-shadow: var(--shadow); }.ai-hero { box-shadow: 0 9px 23px rgba(35, 61, 107, .12); }

/* Profit task inputs and drag-and-drop upload area. */
.input-control { color: #405067; background: #fff; outline: none; }
.input-control:focus { border-color: #79a0f5; box-shadow: 0 0 0 3px rgba(53,107,231,.08); }
.creatable-field { display: flex; align-items: center; gap: 6px; }
.creatable-field .input-control { min-width: 0; flex: 1; }
.creatable-field button { display: grid; place-items: center; flex: 0 0 auto; width: 33px; height: 33px; padding: 0; color: #356be7; border: 1px solid #dbe4f4; border-radius: 6px; background: #f3f7ff; }
.creatable-field button:hover { color: #fff; border-color: #356be7; background: #356be7; }
.batch-drop-zone { display: flex; align-items: center; gap: 13px; margin: 2px 21px 15px; padding: 16px 18px; color: #617087; border: 1px dashed #96b2ed; border-radius: 8px; background: #f7f9ff; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.batch-drop-zone:hover, .batch-drop-zone.drag-over { border-color: #356be7; background: #edf3ff; }
.batch-drop-zone.drag-over { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(53,107,231,.1); }
.batch-drop-icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; color: #4778e6; border-radius: 9px; background: #e8efff; }
.batch-drop-zone > span:nth-child(3) { min-width: 0; flex: 1; }
.batch-drop-zone strong, .batch-drop-zone small { display: block; }
.batch-drop-zone strong { color: #34445a; font-size: 13px; }
.batch-drop-zone small { margin-top: 5px; color: #8e9aaa; font-size: 12px; }
.upload-item.drag-over { border-color: #356be7; background: #edf3ff; box-shadow: inset 0 0 0 1px rgba(53,107,231,.08); }
.upload-count.complete { color: #1e926d; background: #e8f8f1; }
.upload-help { display: flex; flex-wrap: wrap; gap: 18px; padding: 0 21px 17px; color: #8995a5; font-size: 12px; }
.upload-help span { display: inline-flex; align-items: center; gap: 5px; }
.upload-help svg { color: #6f8fdc; }
.form-actions button:disabled { cursor: not-allowed; opacity: .45; }
.recognition-panel { margin-bottom: 15px; }
.recognition-options { display: grid; grid-template-columns: 1fr 1fr minmax(190px, .8fr); gap: 11px; padding: 3px 21px 22px; }
.recognition-card { display: flex; align-items: center; gap: 10px; min-height: 67px; padding: 12px 14px; border: 1px solid #e2e7ed; border-radius: 7px; background: #fbfcfd; cursor: pointer; }
.recognition-card.selected { border-color: #8baaf0; background: #f3f7ff; box-shadow: inset 0 0 0 1px rgba(53,107,231,.06); }
.recognition-card input { position: absolute; opacity: 0; pointer-events: none; }
.recognition-icon { display: grid; place-items: center; width: 34px; height: 34px; color: #278b6c; border-radius: 8px; background: #eaf8f2; }
.recognition-icon.ai { color: #5276d8; background: #eaf0ff; }
.recognition-card strong, .recognition-card small { display: block; }
.recognition-card strong { color: #405066; font-size: 13px; }
.recognition-card small { margin-top: 5px; color: #929eac; font-size: 12px; }
.provider-select { display: flex; flex-direction: column; gap: 6px; color: #7b8796; font-size: 13px; }
.provider-select small { color: #9aa5b2; font-size: 11px; }
.provider-select .select { width: 100%; }
.recognition-result { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; padding: 12px 15px; color: #52698f; border: 1px solid #dfe7f6; border-radius: 7px; background: #f6f8fd; }
.recognition-result > span { display: grid; place-items: center; width: 28px; height: 28px; color: #4f74d2; border-radius: 7px; background: #e7edfb; }
.recognition-result strong { display: block; color: #405b91; font-size: 13px; }
.recognition-result p { margin: 4px 0 0; color: #7e8eac; font-size: 12px; }
.ai-calculation-result { display: flex; align-items: flex-start; gap: 12px; margin: -3px 0 15px; padding: 14px 16px; color: #58708f; border: 1px solid #dce5f1; border-radius: 8px; background: #f7f9fc; }
.ai-calculation-result > span { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; color: #5d75a3; border-radius: 8px; background: #e9eef8; }
.ai-calculation-result strong { display: block; color: #334c70; font-size: 14px; }
.ai-calculation-result p { margin: 4px 0; font-size: 13px; }
.ai-calculation-result small { color: #7184a1; font-size: 12px; }
.ai-calculation-result ul { margin: 8px 0 0; padding-left: 18px; color: #9b5f16; font-size: 13px; }
.ai-calculation-result.matched { color: #28765a; border-color: #bfe5d5; background: #f0faf6; }
.ai-calculation-result.matched > span { color: #18805c; background: #daf3e9; }
.ai-calculation-result.matched strong { color: #17694d; }
.ai-calculation-result.warning { color: #9b5f16; border-color: #f1d29d; background: #fff8eb; }
.ai-calculation-result.warning > span { color: #b36a12; background: #ffedcf; }
.ai-calculation-result.warning strong { color: #8c5310; }

.product-rule-note { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 15px; padding: 14px 17px; color: #326955; border: 1px solid #cfe8dd; border-radius: 8px; background: #f1faf6; }
.product-rule-note > svg { flex: 0 0 auto; margin-top: 1px; }
.product-rule-note strong, .product-rule-note p { display: block; }
.product-rule-note strong { font-size: 13px; }
.product-rule-note p { margin: 5px 0 0; color: #6d8e82; font-size: 12px; }
.product-editor { overflow: hidden; }
.product-editor-table { overflow-x: auto; }
.product-editor-table table { min-width: 1210px; }
.product-col-mlm { width: 160px; }
.product-col-owner { width: 112px; }
.product-col-account { width: 145px; }
.product-col-status { width: 86px; }
.table-input.product-field-mlm { width: 108px; min-width: 108px; }
.table-input.product-field-owner { width: 96px; min-width: 96px; }
.product-editor-table th em { color: #df6d63; font-style: normal; }
.product-editor-table td { padding: 10px 7px; transition: background .18s ease; }
.table-input { width: 100%; min-width: 120px; height: 34px; padding: 0 9px; color: #405066; border: 1px solid #dce3eb; border-radius: 5px; outline: none; background: #fff; }
.table-input:focus { border-color: #6c8ff0; box-shadow: 0 0 0 2px rgba(75, 115, 232, .1); }
.unsaved-change { color: #a93636 !important; border-color: #e16767 !important; background: #fff1f1 !important; box-shadow: 0 0 0 2px rgba(210, 67, 67, .08) !important; }
.unsaved-change:focus { border-color: #d24343 !important; box-shadow: 0 0 0 3px rgba(210, 67, 67, .13) !important; }
.unsaved-label { border-color: #e16767 !important; background: #fff1f1 !important; box-shadow: 0 0 0 2px rgba(210, 67, 67, .08); }
.upload-template-link { display: inline-flex; align-items: center; gap: 4px; width: fit-content; margin-top: 6px; color: #356fe8; font-size: 12px; font-weight: 600; text-decoration: none; }
.upload-template-link:hover { color: #2458c9; text-decoration: underline; }
.freight-batch-select > div { display: flex; gap: 8px; }
.date-help { display: block; margin-top: 5px; color: #9ba6b3; font-size: 11px; white-space: nowrap; }
.change-status { display: inline-flex; min-width: 62px; justify-content: center; padding: 5px 7px; color: #8793a2; border-radius: 10px; background: #f0f2f5; font-size: 11px; white-space: nowrap; }
.change-status.added { color: #198161; background: #dbf3e9; }
.change-status.changed { color: #ad6e20; background: #fff0cd; }
.product-stats .changed-stat { border-color: #efd49f; background: #fffaf0; }
.product-stats .changed-stat strong { color: #b67729; }
.product-filter-bar { display: grid; grid-template-columns: minmax(240px, 1.4fr) minmax(150px, .7fr) minmax(150px, .7fr) auto; align-items: end; gap: 12px; padding: 15px 20px; border-top: 1px solid #edf1f4; border-bottom: 1px solid #edf1f4; background: #fafbfd; }
.product-filter-bar > label { color: #7c8999; font-size: 12px; }
.product-filter-bar > label .table-input { display: block; margin-top: 7px; background: #fff; }
.selection-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 34px; }
.selection-actions > span { color: #788698; font-size: 12px; white-space: nowrap; }
.button-danger { color: #b84242; border: 1px solid #efcaca; background: #fff7f7; }
.button-danger:hover:not(:disabled) { background: #ffeded; }
.button:disabled { cursor: not-allowed; opacity: .48; }
.mlm-edit-cell { display: flex; align-items: center; gap: 9px; }
.mlm-edit-cell > input[type="checkbox"], .select-all-label > input { width: 15px; height: 15px; flex: 0 0 auto; accent-color: #3d6fe8; }
.select-all-label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.product-edit-row.row-selected td { box-shadow: inset 0 1px #b9cdfc, inset 0 -1px #b9cdfc; }
.delete-pending-notice { margin: 13px 20px 0; padding: 10px 12px; color: #a85d31; border: 1px solid #efcfb7; border-radius: 6px; background: #fff8f0; font-size: 12px; }
.ai-config-panel { margin-bottom: 15px; overflow: hidden; }
.ai-model-hero { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 13px; margin-bottom: 15px; }
.ai-model-hero > div { min-height: 122px; padding: 20px 22px; border: 1px solid #e2e8ed; border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.ai-model-hero > div:first-child { color: #fff; border-color: #173f38; background: linear-gradient(135deg, #173f38, #245c50); }
.ai-model-hero span, .ai-model-hero small { display: flex; align-items: center; gap: 7px; color: #8996a3; font-size: 12px; }
.ai-model-hero > div:first-child span, .ai-model-hero > div:first-child small { color: #bfdbd3; }
.ai-model-hero strong { display: block; margin: 14px 0 8px; color: #203245; font-size: 23px; }
.ai-model-hero > div:first-child strong { color: #fff; }
.ai-provider-panel { margin-bottom: 15px; overflow: hidden; }
.ai-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 2px 22px 22px; }
.ai-provider-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 11px 16px; min-height: 139px; padding: 17px; border: 1px solid #e2e8ed; border-radius: 9px; background: #fff; }
.ai-provider-card.active { border-color: #9bc9bc; background: #f3faf7; box-shadow: inset 3px 0 #2a8069; }
.ai-provider-card > div:first-child span, .ai-provider-card > div:first-child small { display: block; color: #8a978f; font-size: 11px; }
.ai-provider-card > div:first-child strong { display: block; margin: 7px 0 6px; color: #24443d; font-size: 14px; }
.ai-provider-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.ai-provider-actions .button { min-height: 31px; padding: 0 11px; }
.ai-connection-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; color: #7b8797; border-radius: 12px; background: #f0f2f5; font-size: 12px; }
.ai-connection-status i { width: 7px; height: 7px; border-radius: 50%; background: #a8b0ba; }
.ai-connection-status.online { color: #238063; background: #eaf8f2; }
.ai-connection-status.online i { background: #2ca77f; }
.ai-connection-status.error { color: #b34f4f; background: #fff0f0; }
.ai-connection-status.error i { background: #d25d5d; }
.ai-config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; padding: 5px 22px 22px; }
.ai-config-grid > label { color: #667488; font-size: 13px; }
.ai-config-grid .select { width: 100%; margin-top: 8px; }
.api-key-field { grid-column: 1 / -1; }
.enable-switch { grid-column: 1 / -1; display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid #e3e8ee; border-radius: 7px; background: #fafbfd; cursor: pointer; }
.enable-switch > input { position: absolute; opacity: 0; }
.enable-switch > span { position: relative; width: 35px; height: 20px; flex: 0 0 auto; border-radius: 12px; background: #cbd3dd; transition: .2s; }
.enable-switch > span:after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .2s; }
.enable-switch > input:checked + span { background: #3b70e5; }
.enable-switch > input:checked + span:after { transform: translateX(15px); }
.enable-switch strong, .enable-switch small { display: block; }
.enable-switch strong { color: #435268; font-size: 13px; }
.enable-switch small { margin-top: 4px; color: #929dab; font-size: 11px; }
.ai-test-result { display: flex; align-items: center; gap: 8px; margin: 0 22px 5px; padding: 11px 13px; color: #69788b; border-radius: 6px; background: #f5f7fa; font-size: 12px; }
.ai-test-result.success { color: #287f65; background: #eef9f5; }
.ai-test-result.error { color: #b65353; background: #fff2f2; }
.ai-test-result small { margin-left: auto; color: #929daa; }
.ai-boundary-panel { overflow: hidden; }
.ai-boundary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; padding: 3px 22px 22px; }
.ai-boundary-grid > div { padding: 16px; border: 1px solid #e5eaf0; border-radius: 8px; background: #fbfcfd; }
.ai-boundary-grid svg { color: #5276d8; }
.ai-boundary-grid strong { display: block; margin: 11px 0 7px; color: #425168; font-size: 13px; }
.ai-boundary-grid p { margin: 0; color: #8793a2; font-size: 12px; line-height: 1.7; }
.ai-operations-hero { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 12px; margin-bottom: 15px; }
.ai-operations-hero > div { min-height: 112px; padding: 18px 20px; border: 1px solid #e2e8ed; border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.ai-operations-hero > div.active { color: #fff; border-color: #173f38; background: linear-gradient(135deg, #173f38, #245c50); }
.ai-operations-hero > div.risk { border-color: #efd0a0; background: #fff8eb; }
.ai-operations-hero span, .ai-operations-hero small { display: flex; align-items: center; gap: 7px; color: #8996a3; font-size: 11px; }
.ai-operations-hero .active span, .ai-operations-hero .active small { color: #bfdbd3; }
.ai-operations-hero strong { display: block; margin: 13px 0 7px; color: #203245; font-size: 21px; }
.ai-operations-hero .active strong { color: #fff; }
.ai-provider-usage { display: flex; align-items: baseline; gap: 7px; }
.ai-provider-usage span { color: #9aa5b1; font-size: 11px; }
.ai-provider-usage strong { color: #52657c; font-size: 14px; }
.ai-activity-panel { margin-bottom: 15px; overflow: hidden; }
.ai-activity-filters { display: flex; gap: 12px; padding: 0 22px 17px; }
.ai-activity-filters label { display: grid; gap: 6px; min-width: 170px; color: #758397; font-size: 12px; }
.ai-activity-panel td strong, .ai-activity-panel td small { display: block; }
.ai-activity-panel td small { max-width: 320px; margin-top: 4px; overflow: hidden; color: #96a1ae; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ai-task-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; color: #788697; background: #f0f2f5; font-size: 11px; white-space: nowrap; }
.ai-task-status i { width: 6px; height: 6px; border-radius: 50%; background: #a8b0ba; }
.ai-task-status.success { color: #247c60; background: #e7f6ef; }
.ai-task-status.success i { background: #2ca77f; }
.ai-task-status.warning { color: #a66b22; background: #fff3df; }
.ai-task-status.warning i { background: #d98b2f; }
.ai-task-status.error { color: #b34f4f; background: #fff0f0; }
.ai-task-status.error i { background: #d25d5d; }
.active-filter-notice { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; padding: 12px 15px; color: #9b651f; border: 1px solid #ecd19d; border-radius: 7px; background: #fff9ec; font-size: 13px; }
.active-filter-notice span { flex: 1; }
.row-scope-label { display: block; margin-top: 4px; color: #a0a9b5; font-size: 11px; font-weight: 400; }
.remittance-total-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 15px; }
.remittance-total-summary > div { padding: 16px 18px; border: 1px solid #e3e9ef; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.remittance-total-summary span, .remittance-total-summary small { display: block; color: #8995a4; font-size: 12px; }
.remittance-total-summary strong { display: inline-block; margin: 9px 6px 5px 0; color: #27384d; font-size: 22px; }
.remittance-total-summary small { display: inline; }
.remittance-total-summary .projected { border-color: #cbe6d9; background: #f0f9f5; }
.remittance-total-summary .projected strong { color: #18805e; }
.task-confirmation { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)) auto; align-items: center; gap: 14px; margin-bottom: 15px; padding: 15px 18px; border: 1px solid #cfdcf8; border-radius: 8px; background: #f5f8ff; }
.task-confirmation span, .task-confirmation strong { display: block; }
.task-confirmation span { color: #8794a7; font-size: 12px; }
.task-confirmation strong { margin-top: 5px; color: #334a70; font-size: 13px; }
.task-correction-panel { margin-bottom: 15px; overflow: hidden; border-color: #cfdbf4; }
.task-correction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 4px 22px 22px; }
.task-correction-grid label { color: #667488; font-size: 13px; }
.task-correction-grid .select { width: 100%; margin-top: 8px; }

/* Logistics center */
.logistics-subnav { gap: 21px; }
.freight-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.freight-kpis > div { padding: 19px 20px; border: 1px solid #e4eaf0; border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.freight-kpis span, .freight-kpis small { display: block; color: #8e9aa9; font-size: 12px; }
.freight-kpis strong { display: block; margin: 11px 0 7px; color: #27384d; font-size: 23px; }
.freight-kpis .highlight { border-color: #c9e6da; background: #eff9f5; }
.freight-kpis .highlight strong { color: #18805f; }
.freight-ledger-panel { overflow: hidden; }
.freight-ledger-filter { display: flex; align-items: end; gap: 14px; padding: 16px 20px; margin-bottom: 14px; }
.freight-ledger-filter label { display: grid; gap: 7px; min-width: 190px; color: #667488; font-size: 13px; }
.freight-ledger-filter span { margin-left: auto; color: #78879a; font-size: 13px; }
.freight-ledger-filter .button { white-space: nowrap; }
.freight-ledger-actions { display: flex; gap: 6px; white-space: nowrap; }
.table-action { border: 0; background: transparent; color: #356fe8; cursor: pointer; padding: 5px; }
.table-action.danger { color: #c84e4e; }
.freight-new-hero { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 15px; padding: 22px 25px; color: #fff; border-radius: 10px; background: linear-gradient(120deg, #17365d, #245b8e); box-shadow: 0 10px 25px rgba(28,62,99,.14); }
.freight-new-hero h2 { margin: 6px 0 7px; font-size: 22px; }
.freight-new-hero p { margin: 0; color: #c5d7e9; font-size: 13px; }
.freight-new-hero .eyebrow { color: #94bfe3; }
.freight-formula-mini { min-width: 220px; padding: 14px 17px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(255,255,255,.08); }
.freight-formula-mini span, .freight-formula-mini small { display: block; color: #bad1e5; font-size: 12px; }
.freight-formula-mini strong { display: block; margin: 7px 0 5px; font-size: 23px; }
.freight-step { margin-bottom: 15px; overflow: hidden; }
.freight-step-title { display: flex; gap: 12px; padding: 20px 22px 14px; }
.freight-step-title > b { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; color: #356be7; border-radius: 7px; background: #eaf1ff; font-family: "DM Mono", monospace; font-size: 12px; }
.freight-step-title h3 { margin: 1px 0 5px; color: #2d3c50; font-size: 14px; }
.freight-step-title p { margin: 0; color: #929dab; font-size: 12px; }
.freight-input-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 7px 22px 23px 64px; }
.freight-input-grid label { color: #667488; font-size: 13px; }
.freight-input-grid label > span { color: #cf7767; }
.freight-input-grid .select { width: 100%; margin-top: 8px; }
.freight-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding: 7px 22px 15px 64px; }
.freight-upload { display: flex; align-items: center; gap: 12px; min-height: 83px; padding: 15px 16px; cursor: pointer; border: 1px dashed #cbd7e7; border-radius: 8px; background: #f9fbfe; }
.freight-upload:hover, .freight-upload.drag-over { border-color: #4f7ee5; background: #edf3ff; box-shadow: inset 0 0 0 1px rgba(53,107,231,.08); }
.freight-upload.uploaded { border-style: solid; border-color: #9ed5c1; background: #f2faf7; }
.freight-upload input { display: none; }
.freight-upload-icon { display: grid; place-items: center; width: 38px; height: 38px; color: #4d78df; border-radius: 9px; background: #e8efff; }
.freight-upload.uploaded .freight-upload-icon { color: #218564; background: #dff4eb; }
.freight-upload > span:nth-child(3) { flex: 1; min-width: 0; }
.freight-upload strong, .freight-upload small { display: block; }
.freight-upload strong { color: #3a4a60; font-size: 13px; }
.freight-upload small { margin-top: 6px; overflow: hidden; color: #939fac; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.freight-upload i { color: #4a73cf; font-size: 12px; font-style: normal; }
.freight-file-note { display: flex; align-items: center; gap: 7px; margin: 0 22px 20px 64px; padding: 10px 12px; color: #34755f; border-radius: 6px; background: #edf8f3; font-size: 12px; }
.freight-assist-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 0 22px 20px 64px; }
.freight-assist-row .freight-file-note { margin: 0; }
.freight-ai-switch { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; color: #3e68c4; border: 1px solid #d8e3fa; border-radius: 6px; background: #f4f7ff; }
.freight-ai-switch input { accent-color: #356be7; }
.freight-ai-switch > span:nth-child(2) { display: grid; place-items: center; }
.freight-ai-switch strong, .freight-ai-switch small { display: block; }
.freight-ai-switch strong { font-size: 12px; }
.freight-ai-switch small { margin-top: 3px; color: #7f90b5; font-size: 11px; }
.freight-rule-preview { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: center; gap: 8px; padding: 7px 22px 23px 64px; }
.freight-rule-preview > div { min-height: 66px; padding: 13px 14px; border: 1px solid #e5eaf0; border-radius: 7px; background: #fafbfd; }
.freight-rule-preview span, .freight-rule-preview strong { display: block; }
.freight-rule-preview span { color: #929daa; font-size: 11px; }
.freight-rule-preview strong { margin-top: 7px; color: #415168; font-size: 13px; }
.freight-rule-preview > i { display: grid; place-items: center; color: #94a1b2; }
.freight-calculate { min-width: 190px; }
.operator-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 15px; padding: 21px 24px; border: 1px solid #cee6dc; border-radius: 9px; background: #f1f9f6; }
.operator-summary-head span, .operator-summary-head strong, .operator-summary-head small { display: block; }
.operator-summary-head span, .operator-summary-head small { color: #6f9588; font-size: 12px; }
.operator-summary-head strong { margin: 8px 0 5px; color: #187f5e; font-size: 25px; }
.operator-summary-head p { max-width: 580px; margin: 0; color: #6d8b80; font-size: 13px; line-height: 1.7; }
.freight-rules-panel { overflow: hidden; }
.freight-rules-list { padding: 4px 22px 13px; }
.freight-rules-list > div { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-top: 1px solid #edf1f4; }
.freight-rules-list b { color: #6e8bd2; font-family: "DM Mono", monospace; font-size: 12px; }
.freight-rules-list strong, .freight-rules-list small { display: block; }
.freight-rules-list strong { color: #405066; font-size: 13px; }
.freight-rules-list small { margin-top: 5px; color: #939eab; font-size: 12px; }
.formula-box { margin: 0 22px 22px; padding: 16px 18px; color: #fff; border-radius: 8px; background: #234b78; }
.formula-box span, .formula-box strong { display: block; }
.formula-box span { color: #a8c6e2; font-size: 12px; }
.formula-box strong { margin-top: 7px; font-size: 14px; }
.freight-detail-top { display: flex; justify-content: space-between; margin-bottom: 12px; }
.freight-detail-top > div { display: flex; gap: 8px; }
.freight-edit-panel { margin-bottom: 14px; }
.freight-history td:last-child { max-width: 580px; white-space: normal; word-break: break-word; color: #667488; }
.freight-admin-rules { overflow: hidden; }
.freight-rule-owner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 4px 22px 22px; }
.freight-rule-owner-grid label { display: grid; gap: 7px; color: #667488; font-size: 13px; }
.freight-admin-rules .formula-box small { display: block; margin-top: 8px; color: #d9e7f3; }
.freight-operator-filter { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 14px; padding: 18px 20px; margin-bottom: 14px; }
.freight-operator-filter > div { display: flex; gap: 12px; }
.freight-operator-filter label { display: grid; gap: 7px; min-width: 190px; color: #667488; font-size: 13px; }
.freight-operator-filter > p { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; margin: 0; padding-top: 12px; color: #7a6170; border-top: 1px solid #eef1f5; font-size: 13px; }
.freight-operator-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.freight-operator-kpis > div { padding: 18px; border: 1px solid #e0e6ed; border-radius: 8px; background: #fff; }
.freight-operator-kpis span, .freight-operator-kpis small, .freight-operator-kpis strong { display: block; }
.freight-operator-kpis span { color: #758296; font-size: 13px; }
.freight-operator-kpis strong { margin: 9px 0 5px; color: #182b44; font-size: 21px; }
.freight-operator-kpis small { color: #9aa5b2; font-size: 12px; }
.freight-operator-kpis .paid { border-color: #cde7da; background: #f1f9f5; }
.freight-operator-kpis .paid strong, .freight-paid-amount { color: #17805e; }
.freight-operator-kpis .unpaid { border-color: #f0d2bd; background: #fff8f1; }
.freight-operator-kpis .unpaid strong, .freight-unpaid-amount { color: #c56b2d; }
.freight-result-banner { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 12px; padding: 22px 25px; color: #fff; border-radius: 9px; background: linear-gradient(115deg, #193557, #255e8e); }
.freight-result-banner span, .freight-result-banner small { display: block; color: #bdd1e4; font-size: 12px; }
.freight-result-banner strong { display: block; margin: 8px 0 6px; font-size: 28px; }
.freight-result-math { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 7px; background: rgba(255,255,255,.08); }
.freight-result-math span { color: #eef6ff; font-size: 13px; }
.freight-result-math i { color: #90b8da; font-style: normal; }
.freight-result-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 15px; }
.freight-result-cards > div { padding: 15px 17px; border: 1px solid #e4e9ef; border-radius: 8px; background: #fff; }
.freight-result-cards span { display: block; color: #8e99a7; font-size: 11px; }
.freight-result-cards strong { display: block; margin-top: 9px; color: #36465a; font-size: 17px; }
.freight-result-cards .ok { border-color: #cbe5da; background: #f0f9f5; }
.freight-result-cards .ok strong { color: #19805f; }
.freight-ai-result { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; padding: 13px 16px; color: #7f8b9c; border: 1px solid #e2e7ed; border-radius: 8px; background: #fafbfd; }
.freight-ai-result.used { color: #3a67c9; border-color: #d7e2fa; background: #f4f7ff; }
.freight-ai-result.warning { color: #9a641f; border-color: #efd29f; background: #fff8eb; }
.freight-ai-result strong { display: block; color: #40516a; font-size: 13px; }
.freight-ai-result p { margin: 4px 0 0; font-size: 12px; }
.freight-ai-result small { display: block; margin-top: 6px; color: #71839a; font-size: 11px; }
.freight-ai-result ul { margin: 8px 0 0; padding-left: 16px; color: #a06c2c; font-size: 12px; }
.freight-recognition-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; padding: 12px 16px; color: #267559; border: 1px solid #cce7db; border-radius: 8px; background: #f2faf7; }
.freight-recognition-summary strong, .freight-recognition-summary span { display: block; }
.freight-recognition-summary strong { font-size: 13px; }
.freight-recognition-summary span, .freight-recognition-summary small { margin-top: 4px; font-size: 11px; }
.freight-recognition-summary.warning { color: #9a641f; border-color: #efd29f; background: #fff8eb; }
.freight-recognition-summary small { max-width: 55%; text-align: right; }
.freight-volume-alert { color: #b36a1a; background: #fff8eb !important; font-weight: 600; }
.freight-anomaly-summary { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; padding: 13px 16px; color: #9a641f; border: 1px solid #efd29f; border-radius: 8px; background: #fff8eb; }
.freight-anomaly-summary svg { flex: 0 0 auto; margin-top: 1px; }.freight-anomaly-summary strong, .freight-anomaly-summary span { display: block; }.freight-anomaly-summary strong { font-size: 13px; }.freight-anomaly-summary span { margin-top: 4px; color: #b1844d; font-size: 12px; }
.freight-anomaly-row td { background: #fffdf8; }.freight-anomaly-list { display: flex; flex-wrap: wrap; gap: 4px; max-width: 310px; white-space: normal; }
.freight-anomaly-pill, .freight-normal-pill { display: inline-flex; padding: 3px 6px; border-radius: 4px; font-size: 11px; line-height: 1.35; }.freight-anomaly-pill { color: #a7651b; background: #fff0d8; }.freight-normal-pill { color: #238261; background: #eaf8f2; }
.freight-review-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }.freight-review-pill { display: inline-flex; padding: 3px 6px; border-radius: 4px; font-size: 11px; line-height: 1.35; }.freight-review-pill.normal { color: #238261; background: #eaf8f2; }.freight-review-pill.urgent { color: #a13b32; background: #fde9e6; }
.freight-owner-panel { margin-bottom: 15px; overflow: hidden; }
.freight-detail-panel { overflow: hidden; }
.freight-payment-filter { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 15px; padding: 17px 20px; }
.freight-payment-filter > div { display: flex; align-items: flex-end; gap: 12px; }
.freight-payment-filter label { display: flex; flex-direction: column; gap: 7px; min-width: 155px; color: #7f8c9d; font-size: 12px; }
.freight-payment-filter .select { width: 100%; }
.freight-payment-filter p { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: #7c8aa0; font-size: 12px; }
.freight-search-label { min-width: 210px !important; }
.freight-batch-select { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; }
.freight-batch-select label { min-width: auto; flex-direction: row; cursor: pointer; }
.freight-batch-select input { display: none; }
.freight-batch-select small { color: #929dab; font-size: 11px; white-space: nowrap; }
.freight-batch-select.drag-over { padding: 7px; border: 1px dashed #4f7ee5; border-radius: 7px; background: #edf3ff; }
.freight-duplicate-alert { margin-bottom: 15px; overflow: hidden; color: #a53939; border: 1px solid #efbcbc; border-radius: 9px; background: #fff5f5; }
.freight-duplicate-alert > div:first-child { display: flex; align-items: center; gap: 10px; padding: 14px 17px; }
.freight-duplicate-alert strong, .freight-duplicate-alert small { display: block; }
.freight-duplicate-alert strong { font-size: 13px; }
.freight-duplicate-alert small { margin-top: 4px; color: #b86868; font-size: 12px; }
.freight-duplicate-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-top: 1px solid #f0cece; background: #f0cece; }
.freight-duplicate-list > span { padding: 10px 17px; background: #fffafa; }
.freight-duplicate-list b, .freight-duplicate-list i { display: block; }
.freight-duplicate-list b { color: #8e3030; font-size: 13px; }
.freight-duplicate-list i { margin-top: 4px; color: #b36b6b; font-size: 11px; font-style: normal; }
.freight-payment-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.freight-payment-kpis > div { padding: 18px 20px; border: 1px solid #d9ebe3; border-radius: 9px; background: #f2faf7; box-shadow: var(--shadow); }
.freight-payment-kpis span, .freight-payment-kpis small { display: block; color: #719487; font-size: 12px; }
.freight-payment-kpis strong { display: block; margin: 10px 0 7px; color: #187e5e; font-size: 22px; }
.freight-payment-kpis .unpaid { border-color: #f0dec2; background: #fff9ef; }
.freight-payment-kpis .unpaid span, .freight-payment-kpis .unpaid small { color: #a1845f; }
.freight-payment-kpis .unpaid strong { color: #bd772c; }
.freight-payment-kpis .selected { border-color: #d9e4fb; background: #f4f7ff; }
.freight-payment-kpis .selected span, .freight-payment-kpis .selected small { color: #7588b1; }
.freight-payment-kpis .selected strong { color: #3567d2; }
.freight-payment-action { margin-bottom: 15px; overflow: hidden; }
.freight-payment-buttons { display: flex; align-items: flex-end; gap: 8px; }
.freight-payment-buttons label { display: flex; flex-direction: column; gap: 6px; color: #8290a1; font-size: 11px; }
.freight-payment-buttons .select { width: 145px; }
.freight-payment-buttons [data-freight-payment-total] { width: 180px; }
.freight-payment-match { align-self: center; max-width: 190px; color: #8a96a6; font-size: 12px; }
.freight-payment-match.matched { color: #16815e; }
.freight-payment-match.mismatch { color: #c94b4b; }
.freight-payment-buttons .button:disabled { cursor: not-allowed; opacity: .45; }
.freight-selected-owners { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 22px 22px; }
.freight-selected-owners > div { padding: 13px 15px; border: 1px solid #e3e9f1; border-radius: 7px; background: #fafbfd; }
.freight-selected-owners span { display: block; color: #8491a1; font-size: 12px; }
.freight-selected-owners strong { display: block; margin-top: 7px; color: #32445b; font-size: 15px; }
.freight-payment-empty { margin: 0 22px 22px; padding: 14px; color: #8c98a7; border: 1px dashed #dce3eb; border-radius: 7px; background: #fafbfd; font-size: 12px; text-align: center; }
.freight-payment-table { overflow: hidden; }
.freight-table-tools { display: flex; gap: 7px; }
.freight-payment-table input[type="checkbox"] { width: 15px; height: 15px; accent-color: #356be7; }
.freight-payment-table td strong, .freight-payment-table td small { display: block; }
.freight-payment-table td small { margin-top: 4px; color: #9ba5b1; font-size: 11px; }
.freight-check-col { width: 52px; }
.freight-paid-row td { background: #fbfdfc; }
.freight-payment-status { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.freight-payment-status.paid { color: #247c60; background: #e3f5ed; }
.freight-payment-status.unpaid { color: #b47830; background: #fff2df; }

/* Dashboard backed by saved business data. */
.quick-symbol.violet { color: #7e6ddd; background: #f1efff; }
.dashboard-current-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.dashboard-current-amounts > span { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 10px; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: rgba(255,255,255,.08); font-size: 21px; font-weight: 750; }
.dashboard-current-amounts b { color: #a9c4ef; font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .8px; }
.dashboard-trend-panel, .dashboard-action-panel { min-height: 340px; overflow: hidden; }
.dashboard-period-tag { padding: 5px 8px; color: #667894; border-radius: 999px; background: #f2f5f9; font-size: 11px; }
.dashboard-trends { padding: 0 22px 20px; }
.dashboard-trend-group { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid #eef2f5; }
.dashboard-trend-currency { padding-top: 7px; }
.dashboard-trend-currency strong, .dashboard-trend-currency span { display: block; }
.dashboard-trend-currency strong { color: #345caa; font-family: "DM Mono", monospace; font-size: 14px; }
.dashboard-trend-currency span { margin-top: 5px; color: #98a4b2; font-size: 11px; }
.dashboard-trend-bars { display: grid; grid-template-columns: repeat(6, minmax(48px, 1fr)); align-items: end; gap: 8px; min-height: 92px; }
.dashboard-trend-bar { display: grid; grid-template-rows: 58px 14px 13px; align-items: end; min-width: 0; text-align: center; }
.dashboard-trend-bar > div { display: flex; align-items: end; justify-content: center; height: 54px; border-bottom: 1px solid #e8edf3; }
.dashboard-trend-bar i { width: 17px; min-height: 2px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, #5c83e6, #9bb2ee); }
.dashboard-trend-bar strong { overflow: hidden; color: #53647b; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-trend-bar span { color: #a0aab7; font-size: 11px; }
.dashboard-alert-list { padding: 0 18px 4px; }
.dashboard-alert-list button { padding: 12px 4px; }
.dashboard-all-clear { display: flex; align-items: center; gap: 11px; margin: 8px 4px 14px; padding: 15px; color: #238061; border: 1px solid #cde8dc; border-radius: 8px; background: #f0f9f5; }
.dashboard-all-clear strong, .dashboard-all-clear span { display: block; }
.dashboard-all-clear strong { font-size: 13px; }
.dashboard-all-clear span { margin-top: 4px; color: #6c9687; font-size: 11px; }
.dashboard-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px 20px 20px; border-top: 1px solid #eef2f5; }
.dashboard-shortcuts button { padding: 9px 7px; color: #567096; border: 1px solid #e1e7ef; border-radius: 6px; background: #fafbfd; font-size: 11px; }
.dashboard-shortcuts button:hover { color: #356be7; border-color: #cddafb; background: #f2f6ff; }
.dashboard-recent { overflow: hidden; }
.logistics-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.logistics-metrics > div { padding: 18px 19px; border: 1px solid #e5eaf0; border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.logistics-metrics span, .logistics-metrics small { display: block; color: #8f9aa8; font-size: 12px; }
.logistics-metrics strong { display: block; margin: 11px 0 7px; color: #28394e; font-size: 21px; }
.logistics-metrics .highlight { border-color: #cce7dc; background: #f1f9f6; }
.logistics-metrics .highlight strong { color: #198161; }
.logistics-boundary, .tracking-hint { display: flex; align-items: flex-start; gap: 11px; margin-top: 15px; padding: 14px 17px; color: #4267b9; border: 1px solid #d9e4fa; border-radius: 8px; background: #f5f8ff; }
.logistics-boundary strong, .logistics-boundary span, .tracking-hint strong, .tracking-hint span { display: block; }
.logistics-boundary strong, .tracking-hint strong { font-size: 13px; }
.logistics-boundary span, .tracking-hint span { margin-top: 4px; color: #788bb8; font-size: 12px; }
.logistics-form-panel { margin-bottom: 15px; overflow: hidden; }
.logistics-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; padding: 4px 22px 22px; }
.logistics-form label { color: #68768a; font-size: 13px; }
.logistics-form label > span { color: #d27665; }
.logistics-form .select { width: 100%; margin-top: 8px; }
.logistics-form .wide { grid-column: span 2; }
.tracking-hint { margin: 0 0 15px; color: #278468; border-color: #d4eade; background: #f2faf7; }
.tracking-hint span { color: #719789; }

@media (max-width: 1050px) {
  .ai-model-hero, .ai-provider-grid, .ai-operations-hero { grid-template-columns: 1fr 1fr; }
  .form-grid, .upload-grid { grid-template-columns: repeat(2, 1fr); }
  .recognition-options { grid-template-columns: 1fr; }
  .filter-row { flex-wrap: wrap; }
  .filter-button { margin-left: 0; }
}

/* Admin master data: preset values used by business-page dropdowns. */
.admin-subnav { margin-bottom: 16px; }
.product-import-drop { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; padding: 15px 18px; cursor: pointer; color: #4d73cd; border: 1px dashed #9eb8ed; border-radius: 8px; background: #f6f9ff; transition: .18s ease; }
.product-import-drop:hover, .product-import-drop:focus, .product-import-drop.drag-over { outline: none; border-color: #356be7; background: #edf3ff; box-shadow: 0 6px 18px rgba(53,107,231,.08); }
.product-import-drop strong, .product-import-drop small { display: block; }
.product-import-drop strong { color: #3d516d; font-size: 13px; }
.product-import-drop small { margin-top: 5px; color: #8392a8; font-size: 12px; }
.export-center { overflow: hidden; }
.backup-center { overflow: hidden; }
.backup-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 0 22px 18px; }
.backup-steps > div { display: flex; align-items: center; gap: 10px; padding: 13px; color: #8793a3; border: 1px solid #e5eaf1; border-radius: 8px; background: #fafbfd; }
.backup-steps b { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 7px; background: #eef2f7; font-size: 12px; }
.backup-steps strong,.backup-steps small { display: block; }
.backup-steps strong { color: #566579; font-size: 13px; }
.backup-steps small { margin-top: 4px; font-size: 11px; }
.backup-steps .active { color: #356be7; border-color: #b8caf3; background: #f4f7ff; }
.backup-steps .active b,.backup-steps .done b { color: #fff; background: #356be7; }
.backup-steps .done { border-color: #caeadb; background: #f3fbf7; }
.backup-actions { display: flex; align-items: center; gap: 10px; padding: 0 22px 14px; }
.backup-actions > span { color: #8a97a8; font-size: 12px; }
.backup-path { display: flex; align-items: center; gap: 8px; margin: 0 22px 14px; padding: 11px 13px; color: #65758b; border: 1px solid #e2e8f0; border-radius: 7px; background: #fafbfd; font-size: 12px; }
.backup-path strong { color: #314a70; }
.export-date-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 14px; padding: 4px 22px 18px; }
.export-date-grid label { display: flex; flex-direction: column; gap: 8px; color: #68778a; font-size: 13px; }
.export-module-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; padding: 0 22px 18px; }
.export-module-list > label { display: flex; align-items: flex-start; gap: 11px; padding: 15px; cursor: pointer; border: 1px solid #e3e9f0; border-radius: 8px; background: #fafbfd; }
.export-module-list > label:hover { border-color: #b9ccef; background: #f6f9ff; }
.export-module-list input { margin-top: 3px; accent-color: #356be7; }
.export-module-list span { display: grid; grid-template-columns: 27px 1fr; align-items: center; flex: 1; color: #5176cc; }
.export-module-list strong, .export-module-list small { display: block; grid-column: 2; }
.export-module-list strong { color: #3b4c62; font-size: 13px; }
.export-module-list small { margin-top: 5px; color: #919daa; font-size: 12px; }
.export-center-note { display: flex; align-items: center; gap: 8px; margin: 0 22px 4px; padding: 11px 13px; color: #8c6d42; border: 1px solid #eddfcb; border-radius: 7px; background: #fffaf2; font-size: 12px; }
.master-data-intro { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; padding: 15px 18px; color: #4268c1; border: 1px solid #dce6fb; border-radius: 8px; background: #f5f8ff; }
.master-data-intro > span { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; background: #e5edff; }
.master-data-intro strong { display: block; color: #34569f; font-size: 13px; }
.master-data-intro p { margin: 5px 0 0; color: #7286b4; font-size: 13px; }
.master-data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; align-items: start; }
.master-panel { overflow: hidden; }
.master-panel .panel-heading p { margin-top: 5px; }
.setting-add { display: flex; gap: 8px; padding: 4px 21px 17px; }
.setting-add input { min-width: 0; flex: 1; height: 35px; }
.setting-add .button { flex: 0 0 auto; }
.setting-list { border-top: 1px solid #edf1f4; }
.setting-row { display: grid; grid-template-columns: 32px minmax(0,1fr) auto auto; align-items: center; gap: 10px; min-height: 61px; padding: 10px 21px; border-bottom: 1px solid #f0f2f5; }
.setting-row:last-child { border-bottom: 0; }
.setting-row:hover { background: #fafcff; }
.setting-index { display: grid; place-items: center; width: 27px; height: 27px; color: #6684ca; border-radius: 6px; background: #edf3ff; font-family: "DM Mono", monospace; font-size: 12px; }
.setting-row strong, .setting-row small { display: block; }
.setting-row strong { color: #405066; font-size: 13px; }
.setting-row small { margin-top: 4px; color: #9ca7b4; font-size: 12px; }
.status-dot { color: #299473; font-size: 12px; }
.status-dot:before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0; border-radius: 50%; background: #36b78c; }
.button-danger-light { height: 29px; padding: 0 9px; color: #c06464; border: 1px solid #f0d9d9; background: #fffafa; font-size: 12px; }
.button-danger-light:hover { color: #a94545; border-color: #e6bcbc; background: #fff4f4; }
.master-panel .empty-state { padding: 38px 20px 43px; border-top: 1px solid #edf1f4; }
.rule-display { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; color: #278c6d; border: 1px solid #d7ede5; border-radius: 5px; background: #f2faf7; font-size: 13px; }
.owner-pill { display: inline-flex; align-items: center; padding: 4px 8px; color: #3d68c8; border-radius: 5px; background: #edf3ff; font-size: 12px; font-weight: 600; }
.owner-pill.unassigned { color: #b57b31; background: #fff5e5; }
.ownership-format { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: -6px 21px 15px; padding: 10px 12px; color: #7d8998; border: 1px solid #e6ebf1; border-radius: 6px; background: #fafbfd; font-size: 12px; }
.ownership-format strong { margin-right: 4px; color: #536174; font-size: 13px; }
.ownership-format span { padding: 4px 7px; color: #496dc2; border-radius: 4px; background: #edf3ff; }
.ownership-format small { margin-left: auto; color: #9aa5b2; }
.validation-notice { margin-top: -10px; }
.calculation-state { padding: 48px 24px; text-align: center; }
.calculation-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; color: #5278d8; border-radius: 14px; background: #edf3ff; }
.calculation-state h2 { margin: 15px 0 7px; color: #334257; font-size: 17px; }
.calculation-state > p { margin: 0; color: #96a1af; font-size: 13px; }
.calculation-checks { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.calculation-checks span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; color: #627086; border: 1px solid #e6ebf0; border-radius: 6px; background: #fafbfd; font-size: 13px; }
.calculation-checks span:nth-child(-n+2) svg { color: #27a17b; }
.calculation-checks span:last-child svg { color: #c48a3d; }
.calculation-icon.calculating { animation: calculation-pulse 1.2s ease-in-out infinite; }
@keyframes calculation-pulse { 50% { transform: scale(1.06); background: #dfe9ff; } }
.error-state .calculation-icon { color: #c26363; background: #fff0f0; }
.report-identity { position: sticky; top: 10px; z-index: 30; margin-bottom: 15px; padding: 17px 20px 14px; border: 1px solid #dfe6ef; border-left: 4px solid #3f70df; border-radius: 9px; background: rgba(255, 255, 255, .98); box-shadow: 0 8px 24px rgba(32, 55, 88, .13); backdrop-filter: blur(10px); }
.report-identity-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #3f70df; }
.report-identity-title > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #edf3ff; }
.report-identity-title strong, .report-identity-title small { display: block; }
.report-identity-title strong { color: #263a55; font-size: 14px; }
.report-identity-title small { margin-top: 3px; color: #8b98a9; font-size: 11px; }
.report-identity-grid { display: grid; grid-template-columns: 1.1fr .8fr .8fr 1.25fr .65fr 1.4fr; overflow: hidden; border: 1px solid #e7ebf0; border-radius: 7px; background: #fafbfd; }
.report-identity-grid > div { min-width: 0; padding: 11px 14px; border-right: 1px solid #e7ebf0; }
.report-identity-grid > div:last-child { border-right: 0; }
.report-identity-grid span, .report-identity-grid strong { display: block; }
.report-identity-grid span { margin-bottom: 6px; color: #8d99a8; font-size: 11px; }
.report-identity-grid strong { overflow: hidden; color: #314359; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.report-updated { padding-top: 9px; color: #8b97a6; font-size: 11px; text-align: right; }
.result-banner { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; padding: 24px 27px; color: #fff; border-radius: 9px; background: linear-gradient(110deg, #1d315c, #315a9e); box-shadow: 0 8px 22px rgba(31,55,98,.12); }
.result-banner span, .result-banner small { display: block; color: #b8c9e7; font-size: 13px; }
.result-banner strong { display: block; margin: 8px 0 6px; font-size: 29px; letter-spacing: -.7px; }
.result-banner .status-badge { color: #f3c984; background: rgba(255,203,119,.12); }
.result-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; margin-bottom: 15px; }
.result-metrics > div { min-height: 91px; padding: 16px 18px; border: 1px solid #e6ebf0; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.result-metrics span, .result-metrics small { display: block; color: #909baa; font-size: 12px; }
.result-metrics strong { display: block; margin: 9px 0 5px; color: #334256; font-size: 18px; }
.result-warnings { display: grid; gap: 7px; margin-bottom: 15px; }
.result-warnings span { display: flex; align-items: center; gap: 7px; padding: 10px 13px; color: #a06b2d; border: 1px solid #f0dfc8; border-radius: 6px; background: #fffaf2; font-size: 13px; }
.dedupe-summary { display: flex; align-items: center; gap: 7px; margin: 0 22px 18px; padding: 11px 13px; color: #27886a; border: 1px solid #d5ece3; border-radius: 7px; background: #f2faf7; font-size: 13px; }
.result-notes { margin-top: 15px; padding-bottom: 13px; }
.result-notes > p { display: flex; align-items: center; gap: 7px; margin: 0; padding: 7px 22px; color: #778496; font-size: 13px; }
.result-notes > p svg { color: #35a17e; }
.shared-fees { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 15px 0; padding: 17px 20px; border: 1px solid #f0dfc8; border-radius: 8px; background: #fffaf2; }
.shared-fees span, .shared-fees strong { display: block; }
.shared-fees span { color: #9a7547; font-size: 12px; }
.shared-fees strong { margin-top: 6px; color: #74532b; font-size: 18px; }
.shared-fees p { max-width: 560px; margin: 0; color: #967a59; font-size: 13px; line-height: 1.7; }
.stage-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 15px; padding: 19px 21px; border: 1px solid #dce7fb; border-radius: 8px; background: #f5f8ff; }
.stage-actions strong, .stage-actions span { display: block; }
.stage-actions strong { color: #3159af; font-size: 14px; }
.stage-actions span { margin-top: 5px; color: #7b8db3; font-size: 13px; }
.report-actions { display: flex; align-items: center; gap: 9px; }
.pending-pool { margin: 15px 0; overflow: hidden; }
.pending-list { padding: 0 21px 8px; }
.pending-assignment { display: grid; grid-template-columns: minmax(0, 1fr) 140px 170px; align-items: center; gap: 18px; min-height: 76px; padding: 12px 0; border-top: 1px solid #edf1f4; }
.pending-assignment.assigned { margin: 0 -10px; padding-right: 10px; padding-left: 10px; background: #f7fbf9; }
.pending-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.pending-title > strong { color: #465365; font-size: 13px; }
.pending-assignment p { margin: 6px 0 0; color: #98a3b1; font-size: 12px; }
.pending-amount { color: #4a586b; font-family: "DM Mono", monospace; font-size: 13px; text-align: right; }
.pending-assignment .select { width: 100%; }
.pending-explanation { display: flex; gap: 8px; margin-top: 10px; padding: 9px 11px; border-radius: 6px; background: #fff7e8; color: #85611d; font-size: 12px; }
.pending-explanation strong { flex: 0 0 auto; }
.pending-trace { margin-top: 10px; border: 1px solid #dfe6ef; border-radius: 7px; background: #fbfcfe; }
.pending-trace summary { display: flex; align-items: center; gap: 10px; padding: 9px 11px; color: #334a66; cursor: pointer; list-style: none; }
.pending-trace summary::-webkit-details-marker { display: none; }
.pending-trace summary::before { content: '▸'; color: #4777d8; transition: transform .15s ease; }
.pending-trace[open] summary::before { transform: rotate(90deg); }
.pending-trace summary span { overflow: hidden; color: #718096; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pending-trace-note { padding: 0 11px 9px 29px; color: #7b8796; font-size: 11px; }
.pending-trace-table { overflow-x: auto; border-top: 1px solid #e8edf3; }
.pending-trace-table table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 11px; }
.pending-trace-table th, .pending-trace-table td { padding: 8px 10px; border-bottom: 1px solid #edf1f5; text-align: left; white-space: nowrap; }
.pending-trace-table th { color: #738297; background: #f6f8fb; font-weight: 600; }
.pending-trace-table td { color: #41536a; }
.pending-trace-table tr:last-child td { border-bottom: 0; }
.bundle-audit { margin-top: 15px; }
.bundle-audit td:first-child { min-width: 210px; vertical-align: top; }
.bundle-audit td:last-child { min-width: 310px; }
.bundle-method { display: inline-block; margin-bottom: 4px; padding: 3px 6px; border-radius: 4px; color: #3768cc; background: #edf3ff; font-size: 11px; font-weight: 600; }
.rule-badge, .once-badge { display: inline-flex; padding: 4px 6px; border-radius: 4px; font-size: 11px; }
.assignment-status { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: 11px; }
.assignment-status.assigned { color: #24765f; background: #dcf3e9; }
.rule-badge { color: #287f65; background: #eaf8f2; }
.once-badge { color: #778496; background: #f0f2f5; }
.assignment-complete { display: flex; align-items: center; gap: 7px; margin: 15px 0; padding: 13px 16px; color: #27886a; border: 1px solid #d5ece3; border-radius: 7px; background: #f2faf7; font-size: 13px; }
.remittance-filter { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 15px; padding: 16px 18px; }
.remittance-filter label { display: flex; flex-direction: column; gap: 7px; min-width: 180px; color: #8793a2; font-size: 12px; }
.remittance-filter .select { width: 100%; }
.remittance-filter-status { display: flex; align-items: center; gap: 8px; margin-left: auto; color: #95a0ae; font-family: "DM Mono", monospace; font-size: 12px; }
.remittance-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.remittance-kpis > div { min-height: 118px; padding: 20px 20px 17px; border: 1px solid #e5eaf0; border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.remittance-kpis span, .remittance-kpis small { display: block; color: #8491a1; font-size: 13px; }
.remittance-kpis strong { display: block; margin: 15px 0 10px; color: #1d2c40; font-size: 25px; letter-spacing: -.6px; }
.remittance-kpis .highlight { border-color: #cde7da; background: #f0f8f4; }
.remittance-kpis .highlight strong { color: #17845f; }
.remittance-kpis .pending strong { color: #c17b2d; }
.remittance-warning { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; padding: 13px 16px; color: #ae7127; border: 1px solid #efd39d; border-radius: 8px; background: #fff9ed; }
.remittance-warning > svg { flex: 0 0 auto; }
.remittance-warning > div { flex: 1; }
.remittance-warning strong, .remittance-warning span { display: block; }
.remittance-warning strong { font-size: 13px; }
.remittance-warning span { margin-top: 4px; color: #b68d5c; font-size: 12px; }
.remittance-detail-panel { overflow: hidden; }
.remittance-detail-panel .panel-heading { padding-top: 22px; padding-bottom: 18px; }
.remittance-detail-panel .panel-heading h2 { font-size: 16px; }
.remittance-table th { padding-top: 13px; padding-bottom: 13px; }
.remittance-table td { height: 61px; font-size: 13px; }
.remittance-owner { display: flex; align-items: center; gap: 10px; }
.owner-avatar { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.owner-tone-0 { color: #2d79ad; background: #e8f4fb; }
.owner-tone-1 { color: #bd772d; background: #fff0df; }
.owner-tone-2 { color: #6673bd; background: #edf0ff; }
.owner-tone-3 { color: #b5679a; background: #faeaf4; }
.amount-bar { position: relative; min-width: 145px; padding: 8px 10px; overflow: hidden; border-radius: 4px; text-align: right; }
.amount-bar i { position: absolute; inset: 0 auto 0 0; min-width: 4px; border-radius: 4px; background: #e7efff; }
.amount-bar span { position: relative; z-index: 1; }
.remittance-value { color: #17314e !important; font-size: 14px; }
.remittance-total td { color: #24354a; background: #f8fafc !important; border-top: 1px solid #dfe5ec; font-weight: 700; }
.stage-switch { display: flex; align-items: center; max-width: 620px; margin: 0 0 15px; padding: 15px 18px; border: 1px solid #e5eaf0; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.stage-switch > div { display: flex; align-items: center; gap: 10px; }
.stage-switch > i { flex: 1; height: 1px; margin: 0 17px; background: #dce4ef; }
.stage-switch b { display: grid; place-items: center; width: 31px; height: 31px; color: #8a98aa; border: 1px solid #dce3eb; border-radius: 50%; font-size: 12px; }
.stage-switch span, .stage-switch small { display: block; }
.stage-switch span { color: #59687c; font-size: 13px; font-weight: 600; }
.stage-switch small { margin-top: 3px; color: #9ba5b2; font-size: 11px; font-weight: 400; }
.stage-switch .done b { color: #248d6d; border-color: #bfe4d7; background: #edf9f4; }
.stage-switch .active b { color: #fff; border-color: #356be7; background: #356be7; }
.cost-panel { overflow: hidden; }
.cost-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 9px 22px 24px; }
.cost-grid label { color: #667488; font-size: 13px; }
.cost-grid input { width: 100%; margin-top: 8px; }
.cost-saved { display: flex; align-items: center; gap: 6px; margin: 0 22px 14px; padding: 9px 11px; color: #248d6d; border: 1px solid #d5eee5; border-radius: 6px; background: #f1faf6; font-size: 12px; }
.cost-choice { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 17px 22px; border-top: 1px solid #edf1f4; background: #fafbfd; }
.cost-choice > div { margin-right: auto; }
.cost-choice strong { display: block; color: #405066; font-size: 13px; }
.cost-choice p { margin: 5px 0 0; color: #929daa; font-size: 12px; }

.admin-subnav { overflow-x: auto; }
.admin-subnav button { flex: 0 0 auto; }
.admin-overview-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 15px; padding: 27px 30px; color: #fff; border-radius: 10px; background: linear-gradient(115deg, #193159, #315f9e); box-shadow: 0 10px 24px rgba(27,50,88,.13); }
.admin-overview-hero span, .admin-overview-hero small { color: #b9cbe6; font-size: 12px; letter-spacing: 1px; }
.admin-overview-hero h2 { margin: 8px 0 7px; font-size: 20px; }
.admin-overview-hero p { margin: 0; color: #d4deed; font-size: 13px; }
.admin-health { display: grid; grid-template-columns: 10px auto; gap: 3px 9px; min-width: 165px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.17); border-radius: 8px; background: rgba(255,255,255,.08); }
.admin-health i { grid-row: 1 / 3; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: #55d5a9; box-shadow: 0 0 0 4px rgba(85,213,169,.12); }
.admin-health strong { font-size: 13px; }
.admin-health small { letter-spacing: 0; }
.admin-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.admin-overview-grid button { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; min-height: 88px; padding: 17px; text-align: left; border: 1px solid #e3e9f0; border-radius: 9px; background: #fff; box-shadow: var(--shadow); cursor: pointer; }
.admin-overview-grid button:hover { transform: translateY(-1px); border-color: #bed0ef; box-shadow: 0 8px 22px rgba(35,65,115,.08); }
.admin-overview-grid button > span { display: grid; place-items: center; width: 40px; height: 40px; color: #3b6fd0; border-radius: 9px; background: #edf3ff; }
.admin-overview-grid strong, .admin-overview-grid small { display: block; }
.admin-overview-grid strong { color: #334258; font-size: 13px; }
.admin-overview-grid small { margin-top: 6px; color: #8e9aaa; font-size: 12px; }
.admin-overview-grid button > svg { color: #9aa7b7; }
.admin-summary { overflow: hidden; }
.admin-boundary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid #edf1f4; }
.admin-boundary-grid > div { padding: 18px 21px; border-right: 1px solid #edf1f4; }
.admin-boundary-grid > div:last-child { border-right: 0; }
.admin-boundary-grid b { color: #40526a; font-size: 13px; }
.admin-boundary-grid p { margin: 7px 0 0; color: #8794a4; font-size: 12px; line-height: 1.7; }
.admin-notice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; padding: 13px 16px; color: #8c6d42; border: 1px solid #eddfcb; border-radius: 8px; background: #fffaf2; font-size: 12px; }
.admin-notice strong { display: block; margin-bottom: 3px; color: #79582d; font-size: 13px; }
.admin-users-panel { overflow: hidden; margin-bottom: 15px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table th, .admin-table td { white-space: nowrap; }
.admin-table td strong { color: #37485e; }
.password-change-required { display: block; margin-top: 5px; color: #b16a13; }
.admin-password-reset { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, .8fr) minmax(220px, .8fr) auto; align-items: end; gap: 14px; padding: 20px; margin: 0 0 15px; }
.admin-password-reset > div:first-child strong, .admin-password-reset > div:first-child small { display: block; }
.admin-password-reset > div:first-child small { margin-top: 6px; color: #7d8998; }
.admin-password-reset label { display: flex; flex-direction: column; gap: 6px; color: #6f7e90; font-size: 12px; }
.admin-password-reset > div:last-child { display: flex; gap: 8px; }
.admin-role { display: inline-flex; padding: 5px 8px; color: #3568c7; border-radius: 5px; background: #edf3ff; font-size: 12px; font-weight: 600; }
.table-actions { display: flex; gap: 6px; }
.table-actions .button { height: 29px; padding: 0 9px; font-size: 12px; }
.admin-editor { overflow: hidden; margin-bottom: 15px; }
.admin-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; padding: 4px 22px 20px; }
.admin-form-grid label { display: flex; flex-direction: column; gap: 7px; color: #68778a; font-size: 12px; }
.admin-form-grid input, .admin-form-grid select { width: 100%; }
.admin-user-identity { display: flex; align-items: center; gap: 10px; margin: -3px 22px 18px; padding: 11px 13px; border: 1px solid #e3e9f0; border-radius: 7px; background: #f8fafc; }
.admin-user-identity strong { color: #3b4d65; font-size: 13px; }
.admin-user-identity span { color: #8794a5; font-size: 12px; }
.permission-editor { padding: 0 22px 22px; }
.permission-editor > div:first-child { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px; }
.permission-editor > div:first-child strong { color: #405168; font-size: 13px; }
.permission-editor > div:first-child small { color: #909baa; font-size: 11px; }
.permission-editor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.permission-editor-grid section { overflow: hidden; border: 1px solid #e3e9ef; border-radius: 7px; background: #fbfcfd; }
.permission-editor-grid header { display: flex; align-items: center; justify-content: space-between; padding: 10px 11px; border-bottom: 1px solid #e8edf2; background: #f4f7fa; }
.permission-editor-grid header strong { color: #405168; font-size: 12px; }
.permission-editor-grid header button { padding: 0; color: #4773d0; border: 0; background: transparent; font-size: 11px; cursor: pointer; }
.permission-editor-grid label { display: flex; align-items: center; gap: 8px; padding: 8px 11px; color: #657488; font-size: 12px; }
.permission-editor-grid label:hover { background: #f6f9fc; }
.permission-editor-grid input { accent-color: #3f70df; }
.account-summary { max-width: 250px; color: #68778b; font-size: 12px; line-height: 1.55; }
.account-access-editor { padding: 0 22px 20px; }
.account-access-editor > div:first-child { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px; }
.account-access-editor > div:first-child strong { color: #405168; font-size: 13px; }
.account-access-editor > div:first-child small { color: #909baa; font-size: 11px; }
.account-access-table { overflow: hidden; border: 1px solid #e3e9ef; border-radius: 7px; }
.account-access-head, .account-access-row { display: grid; grid-template-columns: minmax(180px, 1fr) 100px 100px; align-items: center; }
.account-access-head { padding: 9px 13px; color: #8190a2; background: #f4f7fa; font-size: 11px; }
.account-access-row { min-height: 43px; padding: 0 13px; border-top: 1px solid #edf0f4; }
.account-access-row strong { color: #415269; font-size: 12px; }
.account-access-row label { display: flex; align-items: center; gap: 6px; color: #68778b; font-size: 12px; }
.account-access-row input { accent-color: #3f70df; }
.account-access-row .unsaved-label { margin: 4px 0; padding: 6px; color: #b53d3d; border-radius: 5px; background: #fff0f0; }
.admin-all-accounts { padding: 12px 14px; color: #607188; border: 1px solid #dfe8f2; border-radius: 7px; background: #f7faff; font-size: 12px; }
.read-only-row { background: #fafbfc; }
.read-only-row input:disabled, .read-only-row select:disabled { color: #7e8997; cursor: not-allowed; background: #f4f6f8; }
.pending-assignment.ignored { background: #f8f9fb; }
.assignment-status.ignored { color: #69778a; border-color: #dce2e9; background: #eef1f5; }
.permission-matrix { overflow: hidden; }
.permission-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #edf1f4; }
.permission-grid > div { display: flex; flex-direction: column; gap: 8px; padding: 18px 21px; border-right: 1px solid #edf1f4; }
.permission-grid > div:last-child { border-right: 0; }
.permission-grid strong { margin-bottom: 3px; color: #34465d; font-size: 13px; }
.permission-grid span { display: flex; align-items: center; gap: 6px; color: #758497; font-size: 12px; }
.permission-grid svg { color: #2fa27d; }
.admin-rule-list { border-top: 1px solid #edf1f4; }
.admin-rule-list > div { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 15px 21px; border-bottom: 1px solid #eef2f5; }
.admin-rule-list > div:last-child { border-bottom: 0; }
.admin-rule-list > div > span { display: grid; place-items: center; width: 34px; height: 34px; color: #4975d2; border-radius: 8px; background: #edf3ff; }
.admin-rule-list strong, .admin-rule-list p, .admin-rule-list small { display: block; }
.admin-rule-list strong { color: #3e4f64; font-size: 13px; }
.admin-rule-list p { margin: 5px 0 3px; color: #64748a; font-size: 13px; }
.admin-rule-list small { color: #99a4b1; font-size: 11px; }
.admin-rule-list em { padding: 5px 8px; color: #258567; border-radius: 999px; background: #eaf8f2; font-size: 11px; font-style: normal; }
.admin-rule-warning { display: flex; gap: 11px; margin-top: 15px; padding: 15px 17px; color: #916a37; border: 1px solid #eadcc6; border-radius: 8px; background: #fffaf3; }
.admin-rule-warning strong { font-size: 13px; }
.admin-rule-warning p { margin: 5px 0 0; font-size: 12px; line-height: 1.7; }
.admin-system-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.admin-system-grid > div { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 3px 10px; padding: 15px 17px; border: 1px solid #e3e9ef; border-radius: 8px; background: #fff; }
.admin-system-grid span { display: grid; grid-row: 1 / 3; place-items: center; width: 34px; height: 34px; color: #2e9875; border-radius: 8px; background: #edf8f4; }
.admin-system-grid strong { color: #405168; font-size: 13px; }
.admin-system-grid small { color: #919caa; font-size: 11px; }
.admin-audit-list { border-top: 1px solid #edf1f4; }
.admin-audit-list > div { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 21px; border-bottom: 1px solid #eef2f5; }
.admin-audit-list > div:last-child { border-bottom: 0; }
.admin-audit-list > div > span { display: grid; place-items: center; width: 30px; height: 30px; color: #5577bf; border-radius: 7px; background: #edf3ff; }
.admin-audit-list strong { color: #405066; font-size: 13px; }
.admin-audit-list p { margin: 4px 0 0; color: #8b97a6; font-size: 12px; }
.admin-audit-list time { color: #98a3b0; font-family: "DM Mono", monospace; font-size: 11px; }
.replacement-upload-warning { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 15px; padding: 14px 16px; color: #9a682c; border: 1px solid #edcf98; border-radius: 8px; background: #fff8eb; }
.replacement-upload-warning > svg { flex: 0 0 auto; }
.replacement-upload-warning strong { display: block; font-size: 13px; }
.replacement-upload-warning p { margin: 5px 0 0; color: #a98255; font-size: 12px; line-height: 1.6; }
.replacement-decision { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 15px; padding: 17px 18px; border: 1px solid #edc878; border-radius: 9px; background: #fff8e9; box-shadow: 0 5px 16px rgba(146,101,26,.06); }
.replacement-decision > span { display: grid; place-items: center; width: 40px; height: 40px; color: #b77622; border-radius: 9px; background: #ffedc8; }
.replacement-decision strong, .replacement-decision small { display: block; }
.replacement-decision strong { color: #754d1c; font-size: 13px; }
.replacement-decision p { margin: 5px 0; color: #9b7445; font-size: 12px; line-height: 1.6; }
.replacement-decision small { color: #b09370; font-family: "DM Mono", monospace; font-size: 11px; }
.replacement-decision > div:last-child { display: flex; gap: 8px; }
.replacement-approved { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; padding: 11px 14px; color: #267e64; border: 1px solid #cfe8df; border-radius: 7px; background: #eff9f5; font-size: 12px; }
.replacement-comparison { margin-bottom: 14px; overflow: hidden; border: 1px solid #d8e3ef; border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.replacement-comparison.unavailable { padding: 18px; border-color: #edc878; background: #fffaf0; }
.replacement-comparison-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; border-bottom: 1px solid #e8edf2; background: #f8fbff; }
.replacement-comparison-heading > div:first-child { display: flex; align-items: center; gap: 11px; }
.replacement-comparison-heading > div:first-child > span { display: grid; width: 36px; height: 36px; color: #1f6feb; border-radius: 9px; background: #eaf3ff; place-items: center; }
.replacement-comparison-heading strong, .replacement-comparison-heading p { display: block; margin: 0; }
.replacement-comparison-heading strong { color: #25364a; font-size: 14px; }
.replacement-comparison-heading p { margin-top: 3px; color: #6b7280; font-size: 11.5px; }
.replacement-change-summary { display: flex; align-items: baseline; gap: 5px; flex: 0 0 auto; padding: 7px 11px; color: #9a5b11; border-radius: 8px; background: #fff4de; }
.replacement-change-summary b { font-size: 18px; }
.replacement-change-summary span { font-size: 11px; }
.replacement-file-status { display: flex; align-items: center; gap: 7px; margin: 13px 18px 0; padding: 9px 11px; border-radius: 7px; font-size: 11.5px; }
.replacement-file-status.same { color: #267e64; background: #eff9f5; }
.replacement-file-status.different { color: #9a5b11; background: #fff7e8; }
.replacement-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 18px 18px; }
.replacement-comparison-grid > div { min-width: 0; overflow: hidden; border: 1px solid #e5e9ee; border-radius: 8px; }
.replacement-comparison-grid h3 { margin: 0; padding: 10px 12px; color: #344054; border-bottom: 1px solid #e5e9ee; background: #fafbfc; font-size: 12.5px; }
.replacement-table th, .replacement-table td { padding: 9px 11px !important; font-size: 12px !important; white-space: nowrap; }
.replacement-table tbody tr.changed td { background: #fffdf8; }
.replacement-table td small { display: inline !important; margin: 0 !important; font-size: 9.5px !important; }
.replacement-table td em { display: block; margin-top: 2px; color: #98a2b3; font-size: 9.5px; font-style: normal; }
.replacement-delta { display: inline-flex; min-width: 66px; justify-content: flex-end; padding: 3px 6px; border-radius: 5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.replacement-delta.increase { color: #067647; background: #ecfdf3; }
.replacement-delta.decrease { color: #b42318; background: #fef3f2; }
.replacement-delta.unchanged { color: #667085; background: #f2f4f7; }
.pending-replacement-review { margin-bottom: 16px; padding: 16px 18px; border: 1px solid #edc878; border-radius: 10px; background: #fffaf0; box-shadow: var(--shadow); }
.pending-replacement-review > div:first-child { display: flex; align-items: center; gap: 10px; color: #9a5b11; }
.pending-replacement-review > div:first-child > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px; background: #ffedc8; place-items: center; }
.pending-replacement-review strong, .pending-replacement-review p { display: block; margin: 0; }
.pending-replacement-review strong { font-size: 13px; }
.pending-replacement-review p { margin-top: 3px; color: #9b7445; font-size: 11.5px; }
.pending-replacement-cards { display: grid; gap: 7px; margin-top: 12px; }
.pending-replacement-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pending-replacement-open { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; color: #344054; border: 1px solid #ead7b5; border-radius: 8px; background: #fff; text-align: left; }
.pending-replacement-open:hover { border-color: #d8b879; background: #fffdf8; }
.pending-replacement-delete { min-width: 58px; padding: 0 12px; color: #b84242; border: 1px solid #efcaca; border-radius: 8px; background: #fff7f7; font-size: 11.5px; }
.pending-replacement-delete:hover { border-color: #e4aaaa; background: #ffeded; }
.pending-replacement-cards b, .pending-replacement-cards small { display: block; }
.pending-replacement-cards b { font-size: 12.5px; }
.pending-replacement-cards small { margin-top: 2px; color: #8a6e4c; font-size: 10.5px; }
.pending-replacement-cards em { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: #b06b17; font-size: 11.5px; font-style: normal; }
@media (max-width: 640px) { .pending-replacement-card { grid-template-columns: 1fr; } .pending-replacement-delete { min-height: 36px; } }
.report-version-badge { display: inline-flex; padding: 5px 8px; color: #6a57b4; border-radius: 999px; background: #f0edff; font-size: 11px; font-weight: 600; }
.task-auto-detection { display: flex; align-items: flex-start; gap: 9px; margin: -2px 21px 19px; padding: 11px 13px; color: #2c8067; border: 1px solid #cfe9df; border-radius: 7px; background: #f1faf6; }
.task-auto-detection > svg { flex: 0 0 auto; }
.task-auto-detection strong { display: block; font-size: 13px; }
.task-auto-detection p { margin: 4px 0 0; color: #6f9689; font-size: 12px; }
.task-auto-detection small { display: block; margin-top: 5px; color: #9a6c31; font-size: 11px; }
.task-auto-detection.warning { color: #a46f2e; border-color: #ecd3a6; background: #fff9ef; }
.task-auto-detection.warning p { color: #a98961; }
a.route-link { box-sizing: border-box; color: inherit; font-family: inherit; text-decoration: none; cursor: pointer; }
.auth-shell { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr); min-height: 100vh; background: #f4f7fb; }
.auth-intro { display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px; color: #fff; background: linear-gradient(145deg, #162744, #244779 68%, #35659d); }
.auth-brand { display: flex; align-items: center; gap: 10px; color: #263a56; }
.auth-brand.light { color: #fff; }
.auth-brand b { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; border-radius: 9px; background: #4878e7; font-size: 16px; }
.auth-brand strong { font-size: 15px; }
.auth-intro > div:nth-child(2) > span { color: #9fb9df; font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 1.4px; }
.auth-intro h1 { margin: 16px 0 14px; font-size: 31px; line-height: 1.35; letter-spacing: -.8px; }
.auth-intro p { max-width: 390px; margin: 0; color: #bdcee5; font-size: 13px; line-height: 1.8; }
.auth-intro > small { color: #9fb6d7; font-size: 12px; }
.auth-card { align-self: center; width: min(430px, calc(100% - 60px)); margin: 30px auto; padding: 34px 38px; border: 1px solid #e2e8ef; border-radius: 12px; background: #fff; box-shadow: 0 18px 50px rgba(32,55,87,.09); }
.auth-card-head > span { color: #5577c2; font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 1px; }
.auth-card-head h2 { margin: 9px 0 8px; color: #24364d; font-size: 21px; }
.auth-card-head p { margin: 0 0 24px; color: #8793a3; font-size: 13px; line-height: 1.65; }
.auth-card form { display: grid; gap: 14px; }
.auth-card form label { display: grid; gap: 7px; color: #657489; font-size: 13px; }
.auth-card form .select { width: 100%; height: 40px; }
.auth-submit { width: 100%; height: 40px; margin-top: 5px; }
.auth-switch { margin-top: 18px; color: #8d98a6; font-size: 12px; text-align: center; }
.auth-switch button { padding: 0; color: #356be7; border: 0; background: transparent; font-size: 12px; cursor: pointer; }
.auth-security { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; padding-top: 16px; color: #789187; border-top: 1px solid #edf1f4; font-size: 11px; }
.auth-message { display: flex; align-items: center; gap: 7px; margin-bottom: 15px; padding: 10px 11px; color: #a05e56; border: 1px solid #f0d6d2; border-radius: 6px; background: #fff5f4; font-size: 12px; }
.auth-message.success { color: #27836a; border-color: #cfe8df; background: #f0faf6; }
.user-logout { margin-left: auto; padding: 4px 6px; color: #9aa6b6; border: 0; background: transparent; font-size: 11px; cursor: pointer; }
.user-logout:hover { color: #c06060; }
.auth-loading, .auth-pending { grid-column: 1 / -1; text-align: center; }
.auth-loading > span, .auth-pending > span { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-top: 30px; color: #4b73ca; border-radius: 14px; background: #edf3ff; }
.auth-loading h1, .auth-pending h1 { margin: 15px 0 7px; color: #2d3f56; font-size: 18px; }
.auth-pending p { margin: 0 0 21px; color: #8794a4; font-size: 13px; }
.nested-nav a.route-link { display: block; width: 100%; padding: 7px 9px; color: #8591a1; border-radius: 5px; text-align: left; font-size: 13px; }
.nested-nav a.route-link:hover, .nested-nav a.route-link.active { color: #3568d5; background: #f7f9fc; }
.nested-nav a.route-link span { float: right; color: #e6a25a; }
.subnav a.route-link:not(.button) { position: relative; flex: 0 0 auto; padding: 0 0 11px; color: #98a3b1; background: transparent; font-size: 13px; }
.subnav a.route-link.subnav-active { color: #416fd9; font-weight: 600; }
.subnav a.route-link.subnav-active:after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 3px 3px 0 0; background: #4d7af0; }
.quick-list a.route-link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 14px 4px; color: #8d98a6; border-bottom: 1px solid #f0f2f4; text-align: left; }
.quick-list a.route-link:last-child { border-bottom: 0; }
.quick-list a.route-link > span:nth-child(2) { flex: 1; }
.quick-list a.route-link > svg { color: #adb6c2; }
.command-period a.route-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: #c1d3f5; font-size: 13px; }
.command-period a.route-link:hover { color: #fff; }
.dashboard-shortcuts a.route-link { padding: 9px 7px; color: #567096; border: 1px solid #e1e7ef; border-radius: 6px; background: #fafbfd; font-size: 11px; text-align: center; }
.dashboard-shortcuts a.route-link:hover { color: #356be7; border-color: #cddafb; background: #f2f6ff; }
.admin-overview-grid a.route-link { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; min-height: 88px; padding: 17px; color: inherit; text-align: left; border: 1px solid #e3e9f0; border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.admin-overview-grid a.route-link:hover { transform: translateY(-1px); border-color: #bed0ef; box-shadow: 0 8px 22px rgba(35,65,115,.08); }
.admin-overview-grid a.route-link > span { display: grid; place-items: center; width: 40px; height: 40px; color: #3b6fd0; border-radius: 9px; background: #edf3ff; }
.admin-overview-grid a.route-link strong, .admin-overview-grid a.route-link small { display: block; }
.admin-overview-grid a.route-link strong { color: #334258; font-size: 13px; }
.admin-overview-grid a.route-link small { margin-top: 6px; color: #8e9aaa; font-size: 12px; }
.admin-overview-grid a.route-link > svg { color: #9aa7b7; }

@media (max-width: 1050px) {
  .history-filter-panel { align-items: stretch; flex-wrap: wrap; }
  .history-filter-panel > div { width: 100%; }
  .history-filter-panel .record-count { margin-left: auto; }
  .report-identity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-identity-grid > div { border-bottom: 1px solid #e7ebf0; }
  .report-identity-grid > div:nth-child(3n) { border-right: 0; }
  .report-identity-grid > div:nth-last-child(-n+3) { border-bottom: 0; }
  .master-data-grid { grid-template-columns: 1fr; }
  .export-module-list { grid-template-columns: 1fr; }
  .result-metrics { grid-template-columns: repeat(2, 1fr); }
  .cost-grid { grid-template-columns: 1fr; }
  .shared-fees, .stage-actions, .cost-choice { align-items: flex-start; flex-direction: column; }
  .report-actions { width: 100%; flex-wrap: wrap; }
  .pending-assignment { grid-template-columns: minmax(0, 1fr) 120px; }
  .pending-assignment .select { grid-column: 1 / -1; }
  .remittance-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .remittance-filter { flex-wrap: wrap; }
  .remittance-filter-status { width: 100%; margin-left: 0; }
  .cost-choice > div { margin-right: 0; }
  .product-filter-bar { grid-template-columns: 1fr 1fr; }
  .selection-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .ai-config-grid, .ai-boundary-grid { grid-template-columns: 1fr; }
  .ai-operations-hero { grid-template-columns: 1fr; }
  .ai-activity-filters { flex-direction: column; }
  .remittance-total-summary { grid-template-columns: 1fr; }
  .task-confirmation, .task-correction-grid { grid-template-columns: 1fr; }
  .logistics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logistics-form { grid-template-columns: 1fr 1fr; }
  .freight-kpis, .freight-result-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .freight-input-grid { grid-template-columns: 1fr 1fr; }
  .freight-upload-grid { grid-template-columns: 1fr; }
  .freight-assist-row { grid-template-columns: 1fr; }
  .freight-rule-preview { grid-template-columns: 1fr; }
  .freight-rule-preview > i { transform: rotate(90deg); }
  .freight-payment-filter, .freight-payment-filter > div, .freight-payment-buttons { align-items: stretch; flex-direction: column; }
  .freight-batch-select { align-items: flex-start; }
  .freight-duplicate-list { grid-template-columns: 1fr; }
  .freight-payment-kpis { grid-template-columns: 1fr; }
  .freight-selected-owners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .api-key-field, .enable-switch { grid-column: auto; }
  .admin-overview-grid, .admin-boundary-grid, .permission-grid, .admin-system-grid { grid-template-columns: 1fr; }
  .admin-boundary-grid > div, .permission-grid > div { border-right: 0; border-bottom: 1px solid #edf1f4; }
  .admin-form-grid { grid-template-columns: 1fr 1fr; }
  .admin-password-reset { grid-template-columns: 1fr 1fr; }
  .admin-password-reset > div:first-child, .admin-password-reset > div:last-child { grid-column: 1 / -1; }
  .permission-editor-grid { grid-template-columns: 1fr 1fr; }
  .replacement-decision { grid-template-columns: 40px 1fr; }
  .replacement-decision > div:last-child { grid-column: 1 / -1; }
  .replacement-comparison-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .history-calendar-heading { align-items: flex-start; flex-direction: column; }
  .history-filter-panel { flex-direction: column; }
  .history-filter-panel label { width: 100%; }
  .history-filter-panel .record-count { align-self: flex-start; margin-left: 0; }
  .report-identity-grid { grid-template-columns: 1fr 1fr; }
  .report-identity-grid > div:nth-child(3n) { border-right: 1px solid #e7ebf0; }
  .report-identity-grid > div:nth-child(2n) { border-right: 0; }
  .report-identity-grid > div:nth-last-child(-n+3) { border-bottom: 1px solid #e7ebf0; }
  .report-identity-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-intro { display: none; }
  .auth-card { width: min(430px, calc(100% - 28px)); padding: 28px 24px; }
  .permission-editor-grid, .admin-form-grid { grid-template-columns: 1fr; }
}

/* Unified visual system — based on the clearer payout-ledger reference. */
:root {
  --ink: #1b1f24;
  --muted: #6b7280;
  --line: #e6e8eb;
  --surface: #ffffff;
  --canvas: #f5f6f8;
  --blue: #1f6feb;
  --blue-soft: #eef5ff;
  --green: #067647;
  --orange: #b54708;
  --violet: #6941c6;
  --shadow: 0 2px 8px rgba(16, 24, 40, .035);
}
html, body {
  color: var(--ink);
  background: var(--canvas);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.main-inner { max-width: 1540px; }
.content { padding: 30px 36px 60px; }
.topbar { height: 68px; padding: 0 36px; background: rgba(255,255,255,.96); border-bottom-color: var(--line); }
.sidebar { width: 232px; flex-basis: 232px; border-right-color: var(--line); }
.brand { height: 76px; padding: 0 20px; }
.brand strong { color: #1b1f24; font-size: 16px; }
.brand span { color: #7a8491; font-size: 11px; letter-spacing: .8px; }
.nav-label { color: #8a929e; font-size: 11px; letter-spacing: 1px; }
.nav-item { min-height: 42px; padding: 10px 12px; color: #4f5967; border-radius: 8px; font-size: 14px; }
.nav-item:hover { color: #175fca; background: #f3f7fc; }
.nav-item.active { color: #175fca; background: #eaf2ff; }
.nested-nav { padding-left: 38px; border-left-color: #e2e6eb; }
.nested-nav button, .nested-nav a.route-link { padding: 9px 10px; color: #6b7280; font-size: 13px; }
.breadcrumb, .top-user { font-size: 13px; }
.top-user small { font-size: 11px; }
.global-search { width: 280px; height: 40px; padding: 0 12px; border-color: var(--line); border-radius: 8px; background: #f8f9fb; }
.global-search input, .search-input input { font-size: 13px; }
.exchange-rate-strip { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 390px; min-height: 38px; padding: 6px 13px; color: #344054; border: 1px solid #e3e9f1; border-radius: 9px; background: linear-gradient(135deg,#f7faff,#fff); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.exchange-rate-strip:hover { border-color: #b8cbea; box-shadow: 0 3px 10px rgba(24,95,202,.08); }
.exchange-rate-strip span { display: inline-flex; align-items: baseline; gap: 5px; color: #183b6b; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exchange-rate-strip b { color: #175fca; font-size: 11px; letter-spacing: .5px; }
.exchange-rate-strip > i { width: 1px; height: 14px; background: #d7e0ec; }
.exchange-rate-strip small { color: #8a96a6; font-size: 10px; white-space: nowrap; }
.exchange-rate-strip .exchange-loading { color: #7b8797; }
.exchange-rate-strip .exchange-error { color: #b42318; }
@media (max-width: 1350px) { .exchange-rate-strip { min-width: 280px; }.exchange-rate-strip small { display: none; }.global-search { width: 230px; } }
@media (max-width: 1080px) { .exchange-rate-strip { display: none; } }
.page-header { align-items: center; margin-bottom: 24px; }
.page-header h1 { margin: 5px 0 5px; color: var(--ink); font-size: 27px; letter-spacing: -.6px; }
.page-header p { color: var(--muted); font-size: 13px; }
.eyebrow, .panel-kicker { color: #8a929e; font-size: 11px; letter-spacing: 1px; }
.panel,
.metric-card,
.summary-metric,
.result-metrics > div,
.remittance-kpis > div,
.product-stats > div,
.history-card,
.report-identity,
.logistics-metrics > div,
.freight-kpis > div,
.freight-result-cards > div,
.stage-switch,
.filter-panel {
  border-color: var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.panel-heading { min-height: 74px; padding: 18px 20px 14px; }
.panel-heading h2 { margin-top: 4px; color: #252b33; font-size: 15px; letter-spacing: 0; }
.panel-heading p, .muted { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.button { height: 40px; padding: 0 16px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.button-primary { background: #1f6feb; box-shadow: none; }
.button-primary:hover { background: #1a5fc8; }
.button-secondary { color: #1f6feb; border-color: #bfd4f7; background: #f5f9ff; }
.button-ghost { color: #5e6672; border-color: var(--line); background: #fff; }
.button-small { height: 34px; padding: 0 12px; font-size: 12px; }
.select,
input.select,
select.select,
textarea.select { height: 40px; padding-right: 34px; padding-left: 12px; color: #303740; border-color: #dfe3e8; border-radius: 8px; font-size: 14px; background-color: #fff; }
.select:focus, input:focus, select:focus, textarea:focus { border-color: #1f6feb; box-shadow: 0 0 0 3px rgba(31,111,235,.10); }
.filter-row label,
.form-grid label,
.cost-grid label,
.history-filter-panel label,
.logistics-form label,
.freight-input-grid label,
.admin-form-grid label { color: var(--muted); font-size: 13px; }
.table-wrap table { font-size: 13.5px; }
.table-wrap th { padding: 11px 14px; color: var(--muted); border-color: var(--line); background: #fafbfc; font-size: 12.5px; font-weight: 500; }
.table-wrap td { padding: 13px 14px; color: #4b5563; border-color: var(--line); font-size: 13.5px; }
.table-wrap td small { margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.table-wrap tbody tr:hover td { background: #fafbfc; }
.table-wrap td,
.metric-card > strong,
.summary-metric > strong,
.result-metrics strong,
.remittance-kpis strong,
.dashboard-current-amounts strong { font-variant-numeric: tabular-nums; }
.status-badge, .role-tag, .report-version-badge, .history-account-type, .tag { padding: 4px 9px; border-radius: 999px; font-size: 11.5px; }
.status-badge.success { color: #067647; background: #ecfdf3; }
.status-badge.warning { color: #b54708; background: #fffaeb; }
.status-badge.info { color: #175fca; background: #eef5ff; }
.status-badge.neutral { color: #667085; background: #f2f4f7; }
.record-count { color: var(--muted); font-size: 12px; }
.subnav { margin-bottom: 20px; border-bottom-color: var(--line); }
.subnav button:not(.button), .subnav a.route-link:not(.button) { padding-bottom: 12px; color: #667085; font-size: 14px; }
.subnav button.subnav-active, .subnav a.route-link.subnav-active { color: #1f6feb; }
.metric-card, .summary-metric, .product-stats > div { min-height: 108px; padding: 16px 18px; }
.metric-top, .metric-card > small, .summary-metric > span, .summary-metric > small, .result-metrics span, .result-metrics small, .remittance-kpis span, .remittance-kpis small { color: var(--muted); font-size: 12px; }
.metric-card > strong, .summary-metric > strong { margin: 11px 0 6px; font-size: 22px; }
.result-metrics > div { padding: 17px 18px; }
.result-metrics strong { font-size: 20px; }
.remittance-kpis strong { font-size: 24px; }
.result-banner { color: #1b1f24; border: 1px solid #d7e4f7; background: #f7faff; box-shadow: none; }
.result-banner span, .result-banner small { color: #667085; font-size: 12px; }
.result-banner strong { color: #163d73; font-size: 28px; }
.dashboard-command { background: linear-gradient(110deg, #174b91, #1f6feb); box-shadow: none; }
.review-alert, .result-warnings span, .shared-fees { border-color: #fedf89; border-radius: 8px; background: #fffaeb; }
.history-card { grid-template-columns: 78px minmax(0, 1fr) auto; min-height: 142px; }
.history-card p, .history-stats { color: var(--muted); font-size: 12px; }
.history-stats strong { font-size: 14px; }
.history-calendar-heading p, .history-filter-panel > div span { color: var(--muted); font-size: 12px; }
.history-calendar-heading h2, .history-filter-panel > div strong { font-size: 15px; }
.history-account-name strong { font-size: 13px; }
.history-account-name span { font-size: 11px; }
.history-month b { font-size: 13px; }
.history-month span { font-size: 11px; }
.upload-item strong, .batch-drop-zone strong { font-size: 13px; }
.upload-item small, .batch-drop-zone small { color: var(--muted); font-size: 11.5px; }
.form-actions { padding: 14px 20px; }
.empty-state { color: var(--muted); font-size: 13px; }
.empty-state strong { font-size: 15px; }
.empty-state p { font-size: 13px; }
.toast { border-radius: 8px; font-size: 13px; }

/* Dashboard: personal store scope and one-panel month range. */
.dashboard-scope-bar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}
.dashboard-scope-copy { display: flex; align-items: center; gap: 11px; min-width: 220px; }
.dashboard-scope-copy > span { display: grid; width: 36px; height: 36px; color: #175fca; border-radius: 9px; background: #eef5ff; place-items: center; }
.dashboard-scope-copy strong, .dashboard-scope-copy small { display: block; }
.dashboard-scope-copy strong { color: #26313f; font-size: 14px; }
.dashboard-scope-copy small { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.dashboard-scope-controls { display: flex; align-items: center; gap: 10px; }
.dashboard-picker { position: relative; }
.dashboard-picker-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  min-height: 48px;
  padding: 7px 12px;
  color: #344054;
  border: 1px solid #dfe3e8;
  border-radius: 9px;
  background: #fff;
  text-align: left;
}
.dashboard-picker-trigger:hover { border-color: #a9c6f2; background: #fbfdff; }
.dashboard-picker-trigger > span { flex: 1; }
.dashboard-picker-trigger small, .dashboard-picker-trigger strong { display: block; }
.dashboard-picker-trigger small { color: #8a929e; font-size: 10.5px; font-weight: 500; }
.dashboard-picker-trigger strong { overflow: hidden; margin-top: 1px; color: #273444; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-picker-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: 350px;
  padding: 14px;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .14);
}
.dashboard-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid #edf0f3; }
.dashboard-picker-head strong, .dashboard-picker-head small { display: block; }
.dashboard-picker-head strong { color: #273444; font-size: 13px; }
.dashboard-picker-head small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.dashboard-picker-head > div:last-child { display: flex; gap: 4px; }
.dashboard-picker-head button, .dashboard-calendar-foot button { padding: 3px 7px; color: #175fca; border: 0; background: transparent; font-size: 11px; }
.dashboard-store-options { display: grid; max-height: 260px; margin-top: 10px; overflow: auto; }
.dashboard-store-option { display: flex; align-items: center; gap: 9px; padding: 9px 7px; color: #344054; border-radius: 7px; font-size: 13px; cursor: pointer; }
.dashboard-store-option:hover { background: #f5f8fc; }
.dashboard-store-option input { width: 16px; height: 16px; accent-color: #1f6feb; }
.dashboard-month-popover { width: 390px; }
.dashboard-calendar-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 13px; }
.dashboard-calendar-head strong { color: #273444; font-size: 15px; }
.dashboard-calendar-head button { width: 31px; height: 31px; color: #52606f; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 21px; line-height: 1; }
.dashboard-calendar-head button:hover { color: #175fca; border-color: #b8d0f5; background: #f5f9ff; }
.dashboard-month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.dashboard-month { position: relative; height: 42px; color: #52606f; border: 1px solid #e8ebef; border-radius: 8px; background: #fff; font-size: 12.5px; }
.dashboard-month:hover { color: #175fca; border-color: #b8d0f5; background: #f5f9ff; }
.dashboard-month.has-data i { position: absolute; right: 5px; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: #36a56d; }
.dashboard-month.in-range { color: #175fca; border-color: #d5e5fb; background: #eef5ff; }
.dashboard-month.range-edge, .dashboard-month.range-draft { color: #fff; border-color: #1f6feb; background: #1f6feb; }
.dashboard-month.range-edge i, .dashboard-month.range-draft i { background: #fff; }
.dashboard-calendar-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #edf0f3; }
.dashboard-calendar-foot span { color: var(--muted); font-size: 10.5px; }
.dashboard-calendar-foot button { flex: 0 0 auto; }
.dashboard-overview-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  min-height: 190px;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid #dce5f0;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f6f9fd 58%, #edf5ff 100%);
  box-shadow: 0 5px 18px rgba(23, 71, 135, .06);
}
.dashboard-overview-hero::after { position: absolute; right: 110px; bottom: -90px; width: 230px; height: 230px; border: 46px solid rgba(31,111,235,.035); border-radius: 50%; content: ''; pointer-events: none; }
.dashboard-overview-main { position: relative; z-index: 1; padding: 22px 24px; }
.dashboard-overview-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dashboard-overview-title span { color: #7891ae; font-family: "DM Mono", monospace; font-size: 10.5px; letter-spacing: 1px; }
.dashboard-overview-title h2 { margin: 5px 0 3px; color: #1c2c3f; font-size: 20px; letter-spacing: -.3px; }
.dashboard-overview-title p { margin: 0; color: var(--muted); font-size: 12px; }
.dashboard-overview-link { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 8px 11px; color: #175fca; border: 1px solid #cfe0f8; border-radius: 8px; background: rgba(255,255,255,.72); font-size: 12px; text-decoration: none; }
.dashboard-store-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; margin-top: 17px; }
.dashboard-store-card { min-width: 0; padding: 13px 14px; border: 1px solid rgba(213,223,235,.9); border-radius: 10px; background: rgba(255,255,255,.82); }
.dashboard-store-card-head { display: flex; align-items: center; gap: 9px; }
.dashboard-store-card-head > span { display: grid; width: 30px; height: 30px; color: #1f6feb; border-radius: 8px; background: #eef5ff; place-items: center; }
.dashboard-store-card-head strong, .dashboard-store-card-head small { display: block; }
.dashboard-store-card-head strong { overflow: hidden; max-width: 180px; color: #26313f; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-store-card-head small { margin-top: 1px; color: #8a929e; font-size: 10.5px; }
.dashboard-store-amounts { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; }
.dashboard-store-amounts div { display: flex; align-items: baseline; gap: 5px; }
.dashboard-store-amounts strong { color: #163d73; font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.dashboard-store-amounts span { color: #7a8491; font-size: 10.5px; }
.dashboard-store-empty { padding: 18px; border: 1px dashed #cad4df; border-radius: 10px; background: rgba(255,255,255,.65); }
.dashboard-store-empty strong, .dashboard-store-empty span { display: block; }
.dashboard-store-empty strong { color: #344054; font-size: 14px; }
.dashboard-store-empty span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.dashboard-overview-side { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px; color: #fff; background: linear-gradient(155deg, #173e72, #1f66b8); }
.dashboard-overview-side > span { color: #bed4ef; font-size: 11px; }
.dashboard-overview-side > strong { margin: 2px 0 -2px; font-size: 38px; line-height: 1.15; }
.dashboard-overview-side > small { color: #d8e5f4; font-size: 11px; }
.dashboard-overview-side > div { display: flex; justify-content: space-between; margin-top: 13px; padding-top: 10px; color: #d8e5f4; border-top: 1px solid rgba(255,255,255,.15); font-size: 11px; }
.dashboard-overview-side > div + div { margin-top: 5px; padding-top: 5px; border-top: 0; }
.dashboard-overview-side b { color: #fff; font-size: 12px; }
.dashboard-period-tag { align-self: flex-start; padding: 5px 9px; color: #52606f; border-radius: 999px; background: #f2f4f7; font-size: 11px; }
.dashboard-trend-store { position: sticky; left: 0; z-index: 2; display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; padding-right: 8px; background: #fff; }
.dashboard-trend-store strong { color: #344054; font-size: 13px; }
.dashboard-trend-store span { color: #8a929e; font-size: 10.5px; }
.dashboard-trend-scroll { width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: #b8c6df #eef2f7; scrollbar-width: thin; touch-action: pan-x; -webkit-overflow-scrolling: touch; }
.dashboard-trend-scroll::-webkit-scrollbar { height: 7px; }.dashboard-trend-scroll::-webkit-scrollbar-track { border-radius: 999px; background: #eef2f7; }.dashboard-trend-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: #b8c6df; }
.dashboard-trend-controls { display: flex; align-items: center; gap: 8px; }
.dashboard-trend-controls .select { width: 150px; height: 34px; padding-left: 10px; font-size: 11.5px; }
.dashboard-product-sales { margin-bottom: 15px; overflow: hidden; }
.dashboard-product-sales .panel-heading { align-items: flex-start; gap: 20px; }
.dashboard-product-controls { display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: min(100%, 560px); }
.dashboard-product-controls label { display: grid; gap: 5px; min-width: 120px; color: #667085; font-size: 10.5px; }
.dashboard-product-controls .select { min-width: 120px; height: 34px; padding: 0 28px 0 10px; font-size: 11.5px; }
.dashboard-product-summary { display: flex; gap: 14px; padding: 0 22px 10px; color: #7a8491; font-size: 11px; }
.dashboard-product-table table { min-width: 680px; }
.dashboard-product-table th, .dashboard-product-table td { white-space: nowrap; }
.dashboard-product-table td:nth-child(2) { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.dashboard-store-amounts { display: block; margin-top: 11px; }
.dashboard-store-amounts .dashboard-store-currency { display: block; padding-top: 9px; border-top: 1px solid #edf1f5; }
.dashboard-store-currency + .dashboard-store-currency { margin-top: 9px; }
.dashboard-store-currency > span { display: block; margin-bottom: 6px; color: #7891ae; font-size: 10px; font-weight: 700; letter-spacing: .6px; }
.dashboard-store-currency dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.dashboard-store-currency dl > div { display: block; min-width: 0; }
.dashboard-store-currency dt { color: #8a929e; font-size: 9.5px; }
.dashboard-store-currency dd { overflow: hidden; margin: 2px 0 0; color: #163d73; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-store-currency.empty { display: flex; align-items: baseline; gap: 6px; }
.result-metrics { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.remittance-kpis { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.remittance-kpis .rate { border-color: #d9d0fa; background: #f7f5ff; }
.remittance-kpis .rate strong { color: #6941c6; }

.funds-filter { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; padding: 16px 18px; }
.funds-filter label, .funds-form-grid label { display: grid; gap: 6px; color: #667085; font-size: 11px; }
.funds-filter label { min-width: 180px; }
.funds-filter .button:first-of-type { margin-left: auto; }
.funds-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.funds-kpis > div { padding: 17px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.funds-kpis span, .funds-kpis small { display: block; color: var(--muted); font-size: 11px; }
.funds-kpis strong { display: block; margin: 8px 0 3px; color: #17365f; font-size: 21px; font-variant-numeric: tabular-nums; }
.funds-kpis .highlight { border-color: #cce9dc; background: #f1fbf6; }
.funds-kpis .highlight strong { color: #16845b; }
.funds-form { margin-bottom: 14px; padding: 20px; }
.funds-import { margin-bottom: 14px; padding: 20px; }
.funds-import-drop { display: flex; align-items: center; gap: 13px; min-height: 82px; margin-top: 15px; padding: 15px 17px; border: 1px dashed #a9c5ec; border-radius: 10px; background: #f7faff; cursor: pointer; }
.funds-import-drop:hover, .funds-import-drop.dragging { border-color: #1f6feb; background: #eef5ff; }
.funds-import-drop.uploaded { border-style: solid; border-color: #a9dcc5; background: #f3fbf7; }
.funds-import-drop input { display: none; }
.funds-import-drop > span { display: grid; width: 40px; height: 40px; flex: 0 0 auto; color: #1f6feb; border-radius: 10px; background: #e8f1ff; place-items: center; }
.funds-import-drop > div { min-width: 0; flex: 1; }
.funds-import-drop strong, .funds-import-drop small { display: block; }
.funds-import-drop strong { color: #26313f; font-size: 13px; }
.funds-import-drop small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.funds-import-drop > i { color: #175fca; font-size: 11px; font-style: normal; }
.funds-import-errors { margin-top: 12px; padding: 12px 15px; color: #9a3412; border: 1px solid #fed7aa; border-radius: 9px; background: #fff8ed; font-size: 11px; }
.funds-import-errors ul { margin: 7px 0 0; padding-left: 18px; }
.funds-import-errors li + li { margin-top: 3px; }
.funds-import-preview { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 14px; }
.funds-import-preview > div:first-child { display: flex; justify-content: space-between; margin-bottom: 10px; }
.funds-import-preview > div:first-child strong { color: #273444; font-size: 13px; }
.funds-import-preview > div:first-child span { color: var(--muted); font-size: 11px; }
.role-template-add { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding: 18px 20px; }
.role-template-add strong, .role-template-add small { display: block; }
.role-template-add small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.role-template-add > div:last-child { display: flex; gap: 8px; }
.role-template-add input { width: 260px; }
.role-template-card { margin-bottom: 14px; padding: 20px; }
.role-template-card > header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.role-template-card > header strong, .role-template-card > header small { display: block; }
.role-template-card > header strong { color: #273444; font-size: 16px; }
.role-template-card > header small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.role-template-card .permission-editor-grid { margin-top: 15px; }
.role-template-sticky { position: sticky; z-index: 30; bottom: 12px; display: flex; justify-content: flex-end; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(16,24,40,.12); backdrop-filter: blur(8px); }
@media (max-width: 720px) { .role-template-add { align-items: stretch; flex-direction: column; } .role-template-add > div:last-child { flex-direction: column; } .role-template-add input { width: 100%; } }
.funds-type-tabs { display: flex; gap: 7px; margin: 16px 0; }
.funds-type-tabs button { padding: 8px 14px; color: #52606f; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.funds-type-tabs button.active { color: #175fca; border-color: #bfd5f6; background: #eef5ff; font-weight: 700; }
.funds-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.funds-form-grid .select { width: 100%; }
.funds-form-grid .unsaved-change { border-color: #f04438 !important; background: #fff4f2 !important; box-shadow: 0 0 0 2px rgba(240,68,56,.08); }
.funds-table { margin-bottom: 14px; }
.funds-table .number-cell { font-variant-numeric: tabular-nums; }
.funds-actions { display: flex; gap: 5px; }
@media (max-width: 1100px) { .funds-kpis { grid-template-columns: repeat(3, 1fr); } .funds-form-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .funds-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px; } .funds-filter label { min-width: 0; } .funds-filter .button { width: 100%; } .funds-filter .button:first-of-type { margin-left: 0; } .funds-kpis, .funds-form-grid { grid-template-columns: 1fr; } }

@media (max-width: 1000px) {
  .dashboard-scope-bar { align-items: flex-start; flex-direction: column; }
  .dashboard-scope-controls { width: 100%; }
  .dashboard-picker { flex: 1; }
  .dashboard-picker-trigger { width: 100%; }
  .dashboard-overview-hero { grid-template-columns: 1fr; }
  .dashboard-overview-side { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 14px 22px; }
  .dashboard-overview-side > strong { font-size: 25px; }
  .dashboard-overview-side > div { margin: 0; padding: 0 0 0 12px; border-top: 0; border-left: 1px solid rgba(255,255,255,.15); }
  .dashboard-overview-side > div + div { margin: 0; padding: 0 0 0 12px; border-left: 1px solid rgba(255,255,255,.15); }
}
@media (max-width: 680px) {
  .dashboard-scope-controls, .dashboard-overview-title { align-items: stretch; flex-direction: column; width: 100%; }
  .dashboard-picker-popover { right: auto; left: 0; width: min(390px, calc(100vw - 48px)); }
  .dashboard-overview-main { padding: 18px; }
  .dashboard-overview-link { align-self: flex-start; }
  .dashboard-overview-side { grid-template-columns: auto 1fr; }
  .dashboard-overview-side > div { border-left: 0; }
  .dashboard-trend-controls { align-items: flex-end; flex-direction: column; }
}

/* Mobile app layout: full-width cards, touch targets and persistent navigation. */
.mobile-navigation { display: none; }
.mobile-apps-panel, .mobile-apps-backdrop { display: none; }

@media (max-width: 760px) {
  html, body { min-width: 0; width: 100%; overflow-x: hidden; background: #f3f5f9; }
  body { font-size: 13px; }
  .app-shell { display: block; min-height: 100dvh; }
  .sidebar { display: none; }
  .main, .main-inner { width: 100%; min-width: 0; }
  .main-inner { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: 54px;
    padding: env(safe-area-inset-top) 15px 0;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
  }
  .breadcrumb { min-width: 0; }
  .breadcrumb > span, .breadcrumb > svg { display: none; }
  .breadcrumb strong { overflow: hidden; color: #1b1f24; font-size: 17px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { gap: 10px; }
  .global-search, .top-icon, .top-user > span:not(.avatar), .top-user > small { display: none; }
  .top-user .avatar { width: 32px; height: 32px; }
  .exchange-rate-strip { display: none; }

  .content { width: 100%; padding: 16px 12px 24px; }
  .page-header { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .page-header > div:first-child { width: 100%; }
  .page-header h1 { margin: 3px 0 4px; font-size: 23px; line-height: 1.2; }
  .page-header p { max-width: 100%; font-size: 12px; line-height: 1.55; }
  .page-header > :last-child:not(:first-child) { width: 100%; }
  .page-header .report-actions { justify-content: flex-start; }
  .eyebrow, .panel-kicker { font-size: 10px; }

  .panel, .metric-card, .summary-metric, .history-card, .filter-panel,
  .report-identity, .logistics-metrics > div, .freight-kpis > div,
  .freight-result-cards > div, .funds-kpis > div {
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(31,42,68,.035);
  }
  .panel-heading { min-height: 0; padding: 16px 15px 12px; }
  .panel-heading h2 { font-size: 16px; }
  .panel-heading p { line-height: 1.5; }
  .button { min-height: 40px; }
  .select, input.select { min-height: 40px; font-size: 14px; }

  .metric-grid, .summary-grid, .product-stats, .logistics-metrics,
  .freight-kpis, .freight-result-cards, .remittance-kpis, .result-metrics,
  .funds-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric-card, .summary-metric, .product-stats > div,
  .logistics-metrics > div, .freight-kpis > div, .freight-result-cards > div,
  .remittance-kpis > div, .result-metrics > div, .funds-kpis > div {
    min-width: 0;
    min-height: 104px;
    padding: 14px;
  }
  .metric-card > strong, .summary-metric > strong, .product-stats strong,
  .logistics-metrics strong, .freight-kpis strong, .freight-result-cards strong,
  .remittance-kpis strong, .result-metrics strong, .funds-kpis strong { font-size: 18px; overflow-wrap: anywhere; }

  .dashboard-grid, .ai-grid, .admin-grid, .ai-model-hero, .ai-provider-grid,
  .ai-operations-hero, .master-data-grid, .cost-grid, .remittance-total-summary,
  .task-confirmation, .task-correction-grid { grid-template-columns: 1fr; }
  .dashboard-scope-bar { gap: 14px; padding: 15px; }
  .dashboard-scope-controls { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .dashboard-picker { width: 100%; }
  .dashboard-picker-popover { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; max-height: calc(100dvh - 150px); overflow: auto; }
  .dashboard-month-grid { grid-template-columns: repeat(3, 1fr); }
  .dashboard-overview-hero { border-radius: 14px; }
  .dashboard-overview-main { padding: 16px; }
  .dashboard-store-summary-grid { grid-template-columns: 1fr; }
  .dashboard-overview-side { grid-template-columns: auto 1fr; padding: 15px 17px; }
  .dashboard-trend-controls { align-items: stretch; width: 100%; }
  .dashboard-trend-controls .select { width: 100%; }
  .dashboard-trend-panel .panel-heading { flex-direction: column; }
  .dashboard-trend-group { grid-template-columns: 58px minmax(0, 1fr); }
  .dashboard-trend-scroll { margin: 0 -15px; padding: 0 15px 8px; }
  .dashboard-product-sales .panel-heading { gap: 12px; }
  .dashboard-product-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; width: 100%; }
  .dashboard-product-controls label { min-width: 0; }
  .dashboard-product-controls label:first-child, .dashboard-product-controls label:last-child { grid-column: 1 / -1; }
  .dashboard-product-controls .select { width: 100%; }
  .dashboard-product-summary { padding-right: 15px; padding-left: 15px; }

  .subnav { gap: 20px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav button, .subnav a { flex: 0 0 auto; white-space: nowrap; }
  .filter-row, .report-actions, .table-tools, .stage-actions, .cost-choice,
  .shared-fees, .freight-detail-top, .freight-table-tools { align-items: stretch; flex-direction: column; width: 100%; }
  .filter-row label, .filter-row label .select, .filter-button, .search-input,
  .report-actions .button, .table-tools .button { width: 100%; }
  .form-grid, .upload-grid, .recognition-options, .product-filter-bar,
  .logistics-form, .freight-input-grid, .freight-upload-grid,
  .freight-rule-owner-grid, .funds-form-grid, .permission-editor-grid,
  .admin-form-grid, .export-date-grid, .export-module-list { grid-template-columns: 1fr; }
  .form-grid, .upload-grid, .recognition-options, .logistics-form,
  .freight-input-grid, .freight-upload-grid, .freight-rule-owner-grid,
  .permission-editor-grid, .admin-form-grid { padding-right: 15px; padding-left: 15px; }
  .logistics-form .wide { grid-column: auto; }
  .freight-input-grid, .freight-upload-grid, .freight-rule-preview { padding-left: 15px; }
  .freight-assist-row { margin-right: 15px; margin-left: 15px; }
  .selection-actions { grid-column: auto; flex-wrap: wrap; }

  .remittance-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px; }
  .remittance-filter label { min-width: 0; }
  .remittance-filter-status { grid-column: 1 / -1; width: auto; }

  .table-panel { overflow: hidden; }
  .table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 720px; }
  .table-wrap th, .table-wrap td { padding: 11px 13px; font-size: 12px; }
  .table-footer { min-width: 520px; padding: 12px 14px; }
  .history-card { grid-template-columns: 54px minmax(0, 1fr); gap: 13px; padding: 14px; }
  .history-card > :last-child { grid-column: 1 / -1; }
  .history-stats { gap: 14px; flex-wrap: wrap; }
  .pending-assignment { grid-template-columns: 1fr; }
  .pending-assignment .select { grid-column: auto; width: 100%; }
  .report-identity-grid { grid-template-columns: 1fr 1fr; }
  .stepper { width: 100%; overflow-x: auto; padding-bottom: 6px; }
  .step { flex: 0 0 auto; }
  .step-line { width: 34px; margin-right: 7px; margin-left: 7px; }

  .mobile-navigation {
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 64px;
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid #e4e8ef;
    background: rgba(255,255,255,.97);
    box-shadow: 0 -5px 20px rgba(31,42,68,.06);
    backdrop-filter: blur(14px);
  }
  .mobile-nav-item { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; min-width: 0; min-height: 52px; padding: 4px 1px; color: #77808e; border: 0; background: transparent; }
  .mobile-nav-item span { display: grid; place-items: center; width: 30px; height: 27px; border-radius: 9px; }
  .mobile-nav-item small { font-size: 10px; line-height: 1; white-space: nowrap; }
  .mobile-nav-item.active { color: #1f6feb; font-weight: 700; }
  .mobile-nav-item.active span { background: #eaf2ff; }
  .mobile-apps-backdrop { position: fixed; z-index: 98; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: rgba(22, 32, 50, .2); }
  .mobile-apps-panel { position: fixed; z-index: 99; right: 10px; bottom: calc(70px + env(safe-area-inset-bottom)); left: 10px; display: block; padding: 15px; border: 1px solid #e0e6ef; border-radius: 16px; background: rgba(255,255,255,.98); box-shadow: 0 14px 36px rgba(31,42,68,.18); }
  .mobile-apps-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: #1e293b; font-size: 16px; }
  .mobile-apps-panel-head button { width: 30px; height: 30px; color: #7a8491; border: 0; border-radius: 8px; background: #f2f5f9; font-size: 20px; line-height: 1; }
  .mobile-apps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .mobile-app-item { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; min-height: 76px; color: #53647b; border: 1px solid #edf0f4; border-radius: 12px; background: #f9fbfd; }
  .mobile-app-item span { display: grid; width: 38px; height: 38px; color: #2f6feb; border-radius: 11px; background: #eaf2ff; place-items: center; }
  .mobile-app-item strong { font-size: 11px; font-weight: 600; }
  .mobile-app-item.active { color: #175fca; border-color: #cfe0f8; background: #f2f7ff; }
}

@media (max-width: 390px) {
  .content { padding-right: 10px; padding-left: 10px; }
  .metric-grid, .summary-grid, .product-stats, .logistics-metrics,
  .freight-kpis, .freight-result-cards, .remittance-kpis,
  .result-metrics, .funds-kpis { gap: 8px; }
  .mobile-nav-item small { font-size: 9px; }
}