/* Bright blue, pale blue and white, based on the user's Alipay reference. */
:root {
  --primary: #1677ff;
  --primary-strong: #0969e8;
  --primary-deep: #0754b8;
  --primary-light: #eaf3ff;
  --text: #202936;
  --text-secondary: #536176;
  --border: #d4deeb;
  --soft: #f1f6ff;
  --muted: #536176;
  /* Existing components consume these aliases. */
  --green: var(--primary-strong);
  --green-dark: var(--primary-deep);
  color: var(--text);
  background: #f3f5f9;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline-color: #70abff;
}

.sidebar,.topbar { background: #fff; border-color: var(--border); }
.brand { color: #18273c; }
.brand-mark { background: linear-gradient(145deg,#2184ff,#0869e5); }
.brand small,.nav-label,.nav-item,.local-note,.sidebar-version,
.breadcrumb,.save-indicator,.page-heading p,.eyebrow,.help-button {
  color: var(--text-secondary);
}
.breadcrumb strong { color: #273c59; }
.breadcrumb .slash { color: #a3b2c7; }
.connection-dot { background: var(--primary); }
.avatar { color: #2368bc; background: #edf5ff; border-color: #c8ddf7; }
.nav-item.active { color: var(--primary-deep); background: #e8f2ff; }
.nav-count { color: #0758b9; background: #cfe3ff; }
.help-button { background: #f6f9fd; border-color: var(--border); }
.help-button .small { color: #71849f; }

.hero { background: linear-gradient(110deg,#eaf4ff,#dceeff); border-color: #bdd9fc; }
.hero h2 { color: #173d72; }
.hero-copy>p,.text-button { color: #2d5d99; }
.text-button:hover { color: var(--primary-deep); }
.button.primary { background: var(--primary-strong); color: #fff; }
.button.primary:hover:not(:disabled) { background: var(--primary-deep); }
.button.secondary { background: #fff; border-color: #b9cce6; color: #31557f; }
.button.secondary:hover:not(:disabled) { background: #edf5ff; }
.stats.stats-compact { background: #fff; border-color: var(--border); }
.stat-mini { color: var(--text-secondary); }
.stat-mini+.stat-mini { border-color: #d9e2ef; }
.stat-mini strong,.stat-mini:nth-child(3) strong { color: var(--primary-deep); }
.stat-mini:nth-child(2) strong { color: #a65a06; }

.section-toolbar,.tabs { border-color: #d5dfed; }
.tab { color: #536176; }
.tab.active { color: var(--primary-deep); }
.tab>span { color: #536883; background: #e7edf6; }
.tab.active>span { color: #0759c1; background: #d5e7ff; }
.search-field,.list-tools select { background: #fff; border-color: #bccde4; }
.search-field input,.list-tools select { color: #283e5d; }
.search-field input::placeholder,.search-field .icon { color: #64758c; }
.order-card { background: #fff; border-color: #cbd9eb; box-shadow: 0 2px 5px #21487806; }
.order-card:hover { border-color: #8ebcff; box-shadow: 0 4px 15px #1677ff0a; }
.merchant-name { color: #435671; }
.product-info h3 { color: #1c2737; }
.product-info p { color: #5b6b81; }
.product-price { color: #1c2e48; }
.shipping-panel { background: #f6f9ff; border: 0; }
.shipping-label,.shipping-state { color: #4c6382; }
.tracking-number { color: #194e91; }
.copy-button { color: #3675c5; }
.copy-button:hover { color: #0754b8; background: #dcecff; }
.order-meta,.record-method { color: #586d89; }
.order-card-footer { background: #fafcff; border-color: #e0e9f6; }
.detail-button { color: #1c65c0; }
.detail-button:hover { color: #064cae; }
.status-badge.pending { color: #9e5b08; }
.status-badge.received,.received-label,.record-time { color: #087748; }
.undo-button { color: #966017; }
.list-footer,.page-footer,.page-footer>span:first-child { color: #60748f; }

.mobile-nav { background: #fffffff5; border-color: #d7e2f2; }
.mobile-nav>button { color: #586e8f; }
.mobile-nav>button.active,.mobile-scan b { color: var(--primary-deep); }
.mobile-scan>span { background: var(--primary-strong); box-shadow: 0 3px 12px #1677ff29; }
.empty-state { background: #fafdff; border-color: #b9d1f1; }
.empty-state p { color: #596e8b; }
.empty-icon { color: var(--primary-strong); background: #e5f1ff; }

.modal { color: #253a56; border-color: #cbdcf1; box-shadow: 0 25px 100px #12305b30; }
.modal::backdrop { background: #102d4d70; }
.modal .eyebrow,.modal-description,.divider,.scan-footnote { color: #586e8c; }
.modal::before { background: #d4e1f2; }
.icon-button { color: #527298; background: #eef4fc; }
.icon-button:hover { background: #dfedff; }
.manual-form input { color: #264f83; border-color: #adc9ed; background: #fcfdff; }
.manual-form input::placeholder { color: #6a80a0; }
.divider::before,.divider::after { background: #e2eaf6; }
.scan-stage { background: #102744; }
.camera-placeholder { color: #c6e2ff; background: radial-gradient(circle at 50% 50%,#204e82,#102744 80%); }
.camera-placeholder:hover:not(:disabled) { background: radial-gradient(circle at 50% 50%,#2a619a,#102744 85%); }
.camera-placeholder strong { color: #f5fbff; }
.camera-placeholder>span,.scanner-hint { color: #d3e8ff; }
.camera-placeholder:focus-visible { outline-color: #84baff; }
.scan-corners i { border-color: #a4d4ff; }
.scan-line { background: #6fc5ff; box-shadow: 0 0 12px #1677ff; }
.scanner-hint { text-shadow: 0 1px 3px #0d2345; }
.camera-guide { color: #164c91; background: #eaf3ff; border-color: #85b6f9; }
.camera-guide p { color: #164c91; }
.button.camera-attention { outline-color: #70aaff; }
.scan-feedback { color: #14603d; border-color: #a5d4ba; background: #eaf8f0; }
.scan-feedback.warning { color: #795000; background: #fff4d9; border-color: #d8bc7b; }
.scan-feedback.error { color: #933c28; background: #fff0ea; border-color: #dda898; }
.notice.warning { color: #795000; background: #fff4d9; border-color: #d8bc7b; }

.detail-summary { background: #edf5ff; }
.detail-summary p,.detail-line dt,.detail-section h3>span,
.timeline p,.timeline time,.help-steps p,.help-note { color: #5c7290; }
.detail-line { border-color: #e0e9f5; }
.detail-line dd,.detail-address,.timeline strong { color: #315785; }
.detail-address { background: #f2f7ff; }
.detail-address strong { color: #244974; }
.timeline li { border-color: #cfdef0; }
.timeline li:last-child { border-color: transparent; }
.timeline li:before { background: #a3c5ee; }
.timeline li:first-child:before { background: var(--primary); box-shadow: 0 0 0 4px #e9f2ff; }
.confirm-copy { color: #536e90; }
.confirm-info { background: #edf5ff; }
.confirm-info code { color: #285d9e; }
.help-steps li:before { color: #1765cd; background: #eaf3ff; }
.help-note { background: #f2f7ff; }
.toast { color: #fff; background: #154d97; box-shadow: 0 7px 22px #144e9c2b; }