/* SaudaScout Flat Design System
   Products carry the color; interface surfaces stay calm and readable. */

:root {
  /* Primitive tokens */
  --ss-white: #ffffff;
  --ss-stone-25: #fcfcfb;
  --ss-stone-50: #f7f7f4;
  --ss-stone-100: #efefea;
  --ss-stone-200: #dfded6;
  --ss-stone-300: #c9c7bb;
  --ss-slate-500: #667085;
  --ss-slate-700: #344054;
  --ss-slate-900: #101828;
  --ss-green-600: #168a5b;
  --ss-green-50: #eefaf4;
  --ss-amber-600: #b7791f;
  --ss-amber-50: #fff8e6;
  --ss-red-600: #c2413c;
  --ss-red-50: #fff1f0;
  --ss-blue-600: #2563eb;
  --ss-blue-50: #eff6ff;

  /* Semantic tokens */
  --bg: var(--ss-stone-50) !important;
  --bg2: var(--ss-white) !important;
  --bg3: var(--ss-stone-100) !important;
  --card: var(--ss-white) !important;
  --card2: var(--ss-white) !important;
  --card-bg: var(--ss-white) !important;
  --border: var(--ss-stone-200) !important;
  --border2: var(--ss-stone-300) !important;
  --text: var(--ss-slate-900) !important;
  --muted: var(--ss-slate-500) !important;
  --muted2: var(--ss-slate-700) !important;
  --primary: #111827 !important;
  --primary-hover: #000000 !important;
  --primary-glow: rgba(17, 24, 39, 0.08) !important;
  --secondary: var(--ss-green-600) !important;
  --accent: var(--ss-blue-600) !important;
  --green: var(--ss-green-600) !important;
  --green-dim: var(--ss-green-50) !important;
  --yellow: var(--ss-amber-600) !important;
  --yellow-dim: var(--ss-amber-50) !important;
  --red: var(--ss-red-600) !important;
  --red-dim: var(--ss-red-50) !important;
  --radius-card: 8px;
  --radius-control: 6px;
  --shadow-flat-hover: 0 8px 22px rgba(16, 24, 40, 0.08);
}

html {
  background: var(--bg) !important;
}

body {
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--text) !important;
  letter-spacing: 0 !important;
}

.getting-started-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--border2);
  border-radius: 6px;
  background: var(--bg2);
  color: var(--text);
  font: 700 12px var(--font-head, Inter, sans-serif);
  cursor: pointer;
}

.getting-started-btn:hover,
.getting-started-btn:focus-visible {
  border-color: var(--secondary);
  color: var(--secondary);
  outline: none;
}

.getting-started-btn > span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  font-size: 12px;
}

.getting-started-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .46);
}

.getting-started-modal {
  width: min(720px, 100%);
  padding: 26px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .2);
}

.getting-started-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.getting-started-modal h2 { margin: 0 0 5px; color: var(--text); font: 800 22px/1.2 var(--font-head, Inter, sans-serif); }
.getting-started-modal p { margin: 0; color: var(--muted); font-size: 13px; }
.getting-started-close { border: 0; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
.getting-started-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.getting-started-option { min-height: 170px; padding: 18px; text-align: left; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); cursor: pointer; }
.getting-started-option:hover, .getting-started-option:focus-visible { border-color: var(--secondary); box-shadow: var(--shadow-flat-hover); outline: none; }
.getting-started-option strong { display: block; margin-bottom: 8px; font-size: 15px; }
.getting-started-option small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 700px) { .getting-started-options { grid-template-columns: 1fr; } .getting-started-option { min-height: auto; } }

body::before,
.loader-radar-pulse,
.loader-radar-pulse::before,
.loader-radar-pulse::after {
  display: none !important;
}

* {
  letter-spacing: 0 !important;
}

a,
button,
.chip,
.card,
.kanban-card,
.kpi-card,
.status-pill-btn,
.view-btn,
.nav-btn,
.dropdown-menu-item {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease,
    box-shadow 180ms ease, transform 180ms ease !important;
}

button,
.nav-btn,
.sync-btn,
.primary-btn,
.push-btn,
.filter-toggle-btn,
.modal-btn-blue,
.modal-btn-green,
.modal-btn-purple,
.sort-btn,
.chip,
.action-tab-btn,
.status-pill-btn,
.view-btn,
.task-card-btn {
  border-radius: var(--radius-control) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

button:hover,
.nav-btn:hover,
.sync-btn:hover,
.primary-btn:hover,
.push-btn:hover,
.filter-toggle-btn:hover,
.sort-btn:hover,
.chip:hover,
.action-tab-btn:hover,
.status-pill-btn:hover,
.view-btn:hover,
.task-card-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-flat-hover) !important;
}

.topbar,
header.topbar,
header {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.topbar::before,
.topbar::after,
.page-header::before,
.page-header::after,
.filters::before,
.filters::after {
  display: none !important;
}

.brand-badge,
.topbar-live,
.topbar-track-indicator,
.topbar-credit-badge,
.pill-count,
.health-pill,
.status-pill,
.channel-badge,
.tier-badge,
.ali-badge,
.cs-preview-badge,
.pc-badge,
.verdict-pill,
.confidence-badge,
.tag,
.badge {
  border-radius: 999px !important;
  box-shadow: none !important;
  background-image: none !important;
}

.topbar-live,
.brand-badge,
.topbar-track-indicator {
  background: var(--bg3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.topbar-trending-label,
.filter-label,
.kpi-label,
.metric-label,
.matrix-lbl,
.smart-btn-label,
.dropdown-menu-header {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.topbar-trending-item,
.topbar-season,
.topbar-pkr,
.topbar-stat,
.results-count {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--muted2) !important;
  box-shadow: none !important;
}

.topbar-trending-item::after {
  color: var(--green) !important;
}

.page-header,
.filters,
.action-tab-header,
.control-panel,
.status-ribbon-bar,
.kpi-ribbon,
.content-area,
.main {
  background: transparent !important;
}

.page-title,
.brand-title,
.daraz-modal-title {
  color: var(--text) !important;
  font-weight: 800 !important;
}

.card,
.kpi-card,
.kanban-card,
.smart-btn,
.filters,
.control-panel,
.list-table-wrapper,
.order-drawer,
.product-drawer,
.modal-box,
.daraz-modal,
.task-drawer-panel,
.loader-hub-card,
.china-sourcing-panel,
.price-collapse-section,
.formula-estimate-row,
.hot-ali-section,
.st-unavailable-strip,
.empty-state {
  background: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--text) !important;
}

.card:hover,
.kpi-card:hover,
.kanban-card:hover,
.smart-btn:hover,
.china-sourcing-panel:hover {
  border-color: var(--border2) !important;
  box-shadow: var(--shadow-flat-hover) !important;
}

.card img,
.product-img,
.product-image,
.card-image,
.learn-image-preview,
#customImagePreviewThumb,
#preview_img_thumb {
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
}

.card-metrics,
.stock-matrix-box,
.source-prices,
.hot-ali-chips,
.task-filter-bar {
  background: transparent !important;
}

.metric,
.matrix-item,
.source-price-chip,
.hot-ali-chip,
.reason-line,
.pc-signal,
.task-item-card,
.ad-playbook-drawer {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: none !important;
}

input,
select,
textarea,
.odoo-select,
.modal-input,
.chatter-textarea {
  background: var(--ss-white) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.modal-input:focus,
.chatter-textarea:focus {
  outline: 2px solid rgba(37, 99, 235, 0.16) !important;
  border-color: var(--accent) !important;
}

.sync-btn,
.primary-btn,
.modal-btn-blue,
.modal-btn-green,
.modal-btn-purple,
.task-card-btn.primary,
.sort-btn.active,
.chip.active,
.view-btn.active,
.status-pill-btn.active,
.action-tab-btn.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--primary) !important;
}

.push-btn,
.filter-toggle-btn,
.nav-btn,
.task-card-btn.secondary {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.dropdown-menu-item,
.topbar-actions-dropdown-menu {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-flat-hover) !important;
}

.dropdown-menu-item:hover {
  background: var(--bg3) !important;
  color: var(--text) !important;
}

.kpi-value,
.card-score,
.score-value,
.metric-value,
.matrix-val,
.smart-btn-val,
.card-amount,
.card-profit,
.topbar-stat-val {
  color: var(--text) !important;
  font-weight: 800 !important;
}

.card-profit,
.health-healthy,
.status-delivered,
.badge-verified,
.success,
[style*="#10b981"],
[style*="#047857"],
[style*="#22c55e"] {
  color: var(--green) !important;
}

[style*="#f59e0b"],
[style*="#ff7a1a"],
[style*="#ff6000"] {
  color: var(--yellow) !important;
}

[style*="#f87171"],
[style*="#ef4444"] {
  color: var(--red) !important;
}

.run-rate-track,
.task-progress-bar-bg,
.hot-ali-score-bar,
.loader-bar-bg {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.run-rate-progress,
.task-progress-bar-fill,
.hot-ali-score-fill,
.loader-bar-fill {
  background: var(--green) !important;
  box-shadow: none !important;
}

.list-table {
  background: var(--card) !important;
  color: var(--text) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.list-table th,
.list-table td {
  border-color: var(--border) !important;
}

.list-table th,
.group-header-row {
  background: var(--bg3) !important;
  color: var(--muted2) !important;
}

.notebook-tab {
  background: transparent !important;
  color: var(--muted2) !important;
  border-color: var(--border) !important;
}

.notebook-tab.active {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border-bottom-color: var(--primary) !important;
}

.modal-overlay,
.order-drawer-overlay,
.product-drawer-overlay,
.task-drawer-overlay {
  background: rgba(16, 24, 40, 0.34) !important;
  backdrop-filter: none !important;
}

.skeleton-bone {
  background: linear-gradient(90deg, var(--ss-stone-100), var(--ss-stone-200), var(--ss-stone-100)) !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .topbar,
  header.topbar,
  header {
    padding-inline: 14px !important;
  }

  .kpi-ribbon,
  .control-panel,
  .status-ribbon-bar,
  .main,
  .content-area {
    padding-inline: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* Refined Figma direction: future prediction, softer flat surfaces, fewer outlines. */
:root {
  --ss-ink: #101828;
  --ss-page: #f5f8fb;
  --ss-panel: #f7fafc;
  --ss-line: #e6ecf2;
  --ss-line-soft: rgba(230, 236, 242, 0.62);
  --ss-signal: #00a676;
  --ss-future: #335cff;
  --ss-risk: #ffb020;
  --ss-danger: #d92d20;
  --bg: var(--ss-page) !important;
  --bg2: #ffffff !important;
  --bg3: var(--ss-panel) !important;
  --card: #ffffff !important;
  --border: var(--ss-line-soft) !important;
  --border2: var(--ss-line) !important;
  --text: var(--ss-ink) !important;
  --muted: #667085 !important;
  --muted2: #475467 !important;
  --primary: var(--ss-ink) !important;
  --primary-hover: #020617 !important;
  --secondary: var(--ss-signal) !important;
  --accent: var(--ss-future) !important;
  --green: var(--ss-signal) !important;
  --yellow: var(--ss-risk) !important;
  --red: var(--ss-danger) !important;
  --shadow-flat-hover: 0 18px 42px rgba(16, 24, 40, 0.10) !important;
}

body {
  background: var(--ss-page) !important;
}

.topbar,
header.topbar,
header {
  border-bottom-color: rgba(230, 236, 242, 0.78) !important;
}

.card,
.kanban-card,
.kpi-card,
.smart-btn,
.control-panel,
.filters,
.action-tab-header,
.status-ribbon-bar,
.order-drawer,
.product-drawer,
.daraz-modal,
.modal-box,
.task-drawer-panel,
.loader-hub-card {
  border-color: transparent !important;
  box-shadow: 0 16px 38px rgba(16, 24, 40, 0.07) !important;
}

.card,
.kanban-card {
  border-left: 0 !important;
}

.card::before,
.kanban-card::before {
  box-shadow: none !important;
  width: 3px !important;
  border-radius: 0 6px 6px 0 !important;
  background: var(--ss-signal) !important;
  opacity: 0.82 !important;
}

.card:hover,
.kanban-card:hover,
.kpi-card:hover,
.smart-btn:hover {
  border-color: transparent !important;
  box-shadow: var(--shadow-flat-hover) !important;
}

.metric,
.matrix-item,
.source-price-chip,
.hot-ali-chip,
.reason-line,
.pc-signal,
.task-item-card,
.ad-playbook-drawer,
.formula-estimate-row,
.price-collapse-section,
.china-sourcing-panel,
.st-unavailable-strip {
  background: var(--ss-panel) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.topbar-trending-item,
.topbar-season,
.topbar-pkr,
.results-count,
.chip,
.sort-btn,
.view-btn,
.status-pill-btn,
.action-tab-btn,
.nav-btn,
.filter-toggle-btn,
.push-btn,
.task-card-btn.secondary {
  background: #ffffff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.chip,
.sort-btn,
.view-btn,
.status-pill-btn,
.action-tab-btn {
  color: #475467 !important;
}

.chip.active,
.sort-btn.active,
.view-btn.active,
.status-pill-btn.active,
.action-tab-btn.active,
.sync-btn,
.primary-btn,
.modal-btn-blue,
.modal-btn-green,
.modal-btn-purple,
.modal-primary-btn,
.task-card-btn.primary,
#topbarCreditBadge button,
[style*="background:#00B9AE"],
[style*="background: #00B9AE"],
[style*="linear-gradient"][style*="#00B9AE"],
[style*="linear-gradient"][style*="#7c3aed"],
[style*="linear-gradient"][style*="#6366f1"],
[style*="linear-gradient"][style*="#4f46e5"],
[style*="linear-gradient"][style*="#ec4899"] {
  background: var(--ss-ink) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: var(--ss-ink) !important;
  box-shadow: none !important;
}

.push-btn,
.export-daraz-btn,
.card-action-btn[data-action="daraz"],
[style*="linear-gradient"][style*="#f97316"],
[style*="linear-gradient"][style*="#ea580c"],
[style*="linear-gradient"][style*="#f59e0b"] {
  background: var(--ss-ink) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: var(--ss-ink) !important;
  box-shadow: none !important;
}

.daraz-connect-btn,
.topbar-credit-badge,
[style*="rgba(0,185,174"],
[style*="rgba(0, 185, 174"],
[style*="border: 2px solid #00B9AE"],
[style*="border:2px solid #00B9AE"],
[style*="border-color: #00B9AE"] {
  background: #ffffff !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

[style*="color:#00B9AE"],
[style*="color: #00B9AE"],
[style*="color:#ec4899"],
[style*="color: #ec4899"],
[style*="color: #7c3aed"],
[style*="color:#7c3aed"] {
  color: var(--ss-future) !important;
}

.score-circle,
.score-circle.s-high,
.score-circle.s-med,
.score-circle.s-low {
  background: #eafbf4 !important;
  background-image: none !important;
  color: var(--ss-signal) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.verdict-badge,
.verdict-badge.INVEST,
.verdict-badge.WATCH,
.verdict-badge.SMALL-TEST,
.verdict-badge.AVOID,
.health-pill,
.status-pill,
.channel-badge,
.cat-tag,
.ali-badge,
.tier-badge {
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.verdict-badge.INVEST,
.health-healthy,
.status-delivered,
.badge-verified {
  background: #eafbf4 !important;
  color: var(--ss-signal) !important;
}

.verdict-badge.WATCH,
.health-low_stock,
.status-pending,
.badge-shipping {
  background: #fff7e8 !important;
  color: #b76e00 !important;
}

.verdict-badge.SMALL-TEST,
.cat-tag,
.gender-badge.men {
  background: #eef3ff !important;
  color: var(--ss-future) !important;
}

.verdict-badge.AVOID,
.health-out_of_stock,
.status-returned,
.status-cancelled {
  background: #fff1f0 !important;
  color: var(--ss-danger) !important;
}

.confidence-track,
.run-rate-track,
.task-progress-bar-bg,
.hot-ali-score-bar,
.loader-bar-bg {
  background: #edf2f7 !important;
  border: 0 !important;
}

.confidence-fill,
.run-rate-progress,
.task-progress-bar-fill,
.hot-ali-score-fill,
.loader-bar-fill {
  background: var(--ss-signal) !important;
  background-image: none !important;
}

.list-table-wrapper {
  border-color: transparent !important;
  box-shadow: 0 16px 38px rgba(16, 24, 40, 0.06) !important;
}

.list-table th,
.group-header-row {
  background: var(--ss-panel) !important;
  color: #475467 !important;
}

input,
select,
textarea,
.odoo-select,
.modal-input,
.chatter-textarea {
  border-color: transparent !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(230, 236, 242, 0.88) !important;
}

input:focus,
select:focus,
textarea:focus,
.modal-input:focus,
.chatter-textarea:focus {
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--ss-future), 0 0 0 4px rgba(51, 92, 255, 0.10) !important;
}

.card::before,
.kanban-card::before {
  display: none !important;
}

.card-rank {
  background: #eef3ff !important;
  color: var(--ss-future) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.timing-pill {
  background: #eafbf4 !important;
  color: var(--ss-signal) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.confidence-bar-bg {
  background: #edf2f7 !important;
  border: 0 !important;
}

.confidence-bar-fill {
  background: var(--ss-signal) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.china-sourcing-header,
.hot-ali-header {
  background: #ffffff !important;
  background-image: none !important;
  border-color: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.cs-title-text,
.hot-ali-label,
.hot-ali-price {
  color: var(--ss-future) !important;
}

.cs-plus-btn,
.hot-ali-boost {
  background: #eef3ff !important;
  border-color: transparent !important;
  color: var(--ss-future) !important;
  box-shadow: none !important;
}

.china-sourcing-content,
.hot-ali-section {
  background: var(--ss-panel) !important;
  border-color: transparent !important;
}

.hot-ali-chip {
  color: var(--text) !important;
}

.hot-ali-meta,
.hot-ali-score-bar,
.hot-ali-score-fill {
  border-color: transparent !important;
}

.reason-line.warn {
  background: #fff7e8 !important;
  color: #b76e00 !important;
}

/* Charming Seaside Commerce Intelligence
   Figma palette: #B3EBF2, #85D1DB, #B6F2D1, #C9FDF2.
   Light predictive surfaces, readable dark text, and calm seaside accents. */
:root {
  --ss-seaside-1: #b3ebf2;
  --ss-seaside-2: #85d1db;
  --ss-seaside-3: #b6f2d1;
  --ss-seaside-4: #c9fdf2;
  --ss-command: #123f48;
  --ss-command-2: #1c6570;
  --ss-command-3: #0e343b;
  --ss-page: #ffffff;
  --ss-canvas: #ffffff;
  --ss-card: #ffffff;
  --ss-panel: #ffffff;
  --ss-line: rgba(28, 101, 112, 0.16);
  --ss-line-strong: rgba(28, 101, 112, 0.28);
  --ss-text: #102a33;
  --ss-text-soft: #51727a;
  --ss-future: #257d8c;
  --ss-signal: #10a66b;
  --ss-cyan: #48bfd0;
  --ss-risk: #c78017;
  --ss-danger: #e5484d;
  --ss-command-glow: 0 14px 34px rgba(18, 63, 72, 0.16);
  --ss-card-glow: 0 18px 45px rgba(28, 101, 112, 0.10);
  --bg: var(--ss-page) !important;
  --bg2: var(--ss-card) !important;
  --bg3: var(--ss-panel) !important;
  --card: var(--ss-card) !important;
  --card2: var(--ss-card) !important;
  --border: var(--ss-line) !important;
  --border2: var(--ss-line-strong) !important;
  --text: var(--ss-text) !important;
  --muted: var(--ss-text-soft) !important;
  --muted2: #43546b !important;
  --primary: var(--ss-command) !important;
  --primary-hover: #050b14 !important;
  --secondary: var(--ss-signal) !important;
  --accent: var(--ss-future) !important;
  --green: var(--ss-signal) !important;
  --yellow: var(--ss-risk) !important;
  --red: var(--ss-danger) !important;
}

body {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

.topbar,
header.topbar,
header {
  background: linear-gradient(135deg, var(--ss-seaside-4), var(--ss-seaside-1) 52%, var(--ss-seaside-2)) !important;
  color: var(--ss-text) !important;
  border-bottom: 1px solid rgba(18, 63, 72, 0.10) !important;
  box-shadow: var(--ss-command-glow) !important;
}

.topbar *,
header.topbar *,
header * {
  color: inherit;
}

.topbar-logo svg rect:first-child,
.topbar-logo svg rect:nth-child(2),
.topbar-logo svg rect:nth-child(3) {
  fill: rgba(255, 255, 255, 0.12) !important;
  stroke: rgba(255, 255, 255, 0.22) !important;
}

.topbar-logo svg rect:nth-child(4),
.topbar-logo svg circle {
  fill: var(--ss-signal) !important;
  stroke: rgba(0, 184, 132, 0.6) !important;
}

.topbar-logo svg text:first-of-type {
  fill: var(--ss-text) !important;
}

.topbar-logo svg text:last-of-type {
  fill: var(--ss-signal) !important;
}

.topbar-trending-label,
.topbar-stat-label,
.topbar-season,
.topbar-pkr,
.dropdown-menu-header {
  color: rgba(16, 42, 51, 0.66) !important;
}

.topbar-trending-item,
.topbar-track-indicator,
.topbar-credit-badge,
#topbarCreditBadge,
.topbar-season,
.topbar-seasons-wrapper > * {
  background: rgba(255, 255, 255, 0.42) !important;
  color: var(--ss-command) !important;
  border-color: rgba(18, 63, 72, 0.10) !important;
}

.topbar-stat-val,
.topbar-track-indicator,
.topbar-pkr,
.topbar-credit-badge,
#topbarCreditBadge {
  color: var(--ss-command) !important;
}

header.topbar #topbar-pkr,
.topbar #topbar-pkr,
#topbar-pkr.topbar-pkr {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 58px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.42) !important;
  color: var(--ss-command) !important;
  border: 1px solid rgba(18, 63, 72, 0.10) !important;
}

.topbar-trending-item::after,
.topbar-live::before {
  color: var(--ss-signal) !important;
}

#topbarCreditBadge button,
.topbar-credit-badge button {
  background: var(--ss-signal) !important;
  color: #ffffff !important;
  border: 0 !important;
}

.main,
.content-area {
  background: transparent !important;
}

.page-header {
  padding-top: 28px !important;
  padding-bottom: 18px !important;
}

.page-title {
  font-size: 28px !important;
  color: var(--ss-text) !important;
  letter-spacing: 0 !important;
}

.action-tab-header,
.control-panel,
.filters,
.status-ribbon-bar,
.kpi-ribbon {
  background: rgba(255, 255, 255, 0.64) !important;
  border: 0 !important;
  box-shadow: 0 18px 42px rgba(48, 70, 110, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.card,
.kanban-card,
.kpi-card {
  position: relative !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  border: 0 !important;
  box-shadow: var(--ss-card-glow) !important;
  overflow: hidden !important;
}

.card::after,
.kanban-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(16, 166, 107, 0.74), rgba(72, 191, 208, 0.22) 44%, transparent 72%) top left / 100% 3px no-repeat,
    radial-gradient(circle at 92% 8%, rgba(179, 235, 242, 0.60), transparent 96px) !important;
  opacity: 1 !important;
}

.card:hover,
.kanban-card:hover,
.kpi-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 24px 60px rgba(48, 70, 110, 0.16) !important;
}

.card-thumb-wrap,
.product-img,
.product-image,
.card-image {
  background: var(--ss-panel) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(123, 144, 173, 0.14) !important;
}

.card-rank,
.cat-tag,
.gender-badge,
.channel-badge,
.health-pill,
.status-pill,
.verdict-badge,
.ali-badge,
.tier-badge {
  border-radius: 7px !important;
  border: 0 !important;
  box-shadow: none !important;
}

.card-rank,
.cat-tag {
  background: rgba(179, 235, 242, 0.60) !important;
  color: var(--ss-future) !important;
}

.score-circle,
.score-circle.s-high,
.score-circle.s-med,
.score-circle.s-low {
  background: linear-gradient(180deg, rgba(182, 242, 209, 0.75), rgba(201, 253, 242, 0.42)) !important;
  color: var(--ss-signal) !important;
  border: 0 !important;
  box-shadow: 0 10px 26px rgba(16, 166, 107, 0.13) !important;
}

.score-num,
.score-lbl {
  color: var(--ss-signal) !important;
}

.confidence-bar-bg,
.run-rate-track,
.task-progress-bar-bg,
.hot-ali-score-bar,
.loader-bar-bg {
  background: rgba(18, 63, 72, 0.08) !important;
  border: 0 !important;
}

.confidence-bar-fill,
.run-rate-progress,
.task-progress-bar-fill,
.hot-ali-score-fill,
.loader-bar-fill {
  background: linear-gradient(90deg, var(--ss-signal), var(--ss-cyan)) !important;
  box-shadow: 0 0 18px rgba(72, 191, 208, 0.26) !important;
}

.sparkline-wrap svg path,
.sparkline-wrap svg polyline {
  stroke: var(--ss-signal) !important;
}

.sparkline-wrap svg path:first-of-type {
  fill: rgba(0, 184, 132, 0.12) !important;
}

.metric,
.matrix-item,
.smart-btn,
.reason-line,
.pc-signal,
.source-price-chip,
.hot-ali-chip,
.formula-estimate-row,
.price-collapse-section,
.china-sourcing-panel,
.st-unavailable-strip {
  background: rgba(247, 250, 255, 0.92) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(123, 144, 173, 0.09) !important;
}

.metric-label,
.matrix-lbl,
.smart-btn-label {
  color: #718399 !important;
}

.metric-value,
.matrix-val,
.smart-btn-val,
.price-tag {
  color: var(--ss-text) !important;
}

.verdict-badge.INVEST,
.timing-pill {
  background: rgba(182, 242, 209, 0.60) !important;
  color: var(--ss-signal) !important;
}

.verdict-badge.WATCH,
.reason-line.warn {
  background: rgba(242, 169, 31, 0.12) !important;
  color: #9a6400 !important;
}

.verdict-badge.SMALL-TEST {
  background: rgba(179, 235, 242, 0.66) !important;
  color: var(--ss-future) !important;
}

.verdict-badge.AVOID {
  background: rgba(229, 72, 77, 0.10) !important;
  color: var(--ss-danger) !important;
}

.china-sourcing-header,
.hot-ali-header {
  background: rgba(179, 235, 242, 0.34) !important;
  color: var(--ss-text) !important;
  border: 0 !important;
}

.cs-title-text,
.hot-ali-label,
.hot-ali-price,
.hot-ali-boost,
.cs-plus-btn {
  color: var(--ss-future) !important;
}

.cs-plus-btn,
.hot-ali-boost {
  background: rgba(201, 253, 242, 0.78) !important;
}

.export-daraz-btn,
.card-action-btn[data-action="daraz"],
.sync-btn,
.primary-btn,
.modal-btn-blue,
.modal-btn-green,
.modal-btn-purple,
.modal-primary-btn,
.task-card-btn.primary,
.chip.active,
.sort-btn.active,
.view-btn.active,
.status-pill-btn.active,
.action-tab-btn.active {
  background: linear-gradient(135deg, var(--ss-command), var(--ss-command-3)) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 12px 24px rgba(7, 17, 31, 0.16) !important;
}

.export-daraz-btn:hover,
.card-action-btn[data-action="daraz"]:hover,
.sync-btn:hover,
.primary-btn:hover,
.modal-btn-blue:hover,
.modal-btn-green:hover,
.modal-btn-purple:hover,
.modal-primary-btn:hover {
  box-shadow: 0 18px 34px rgba(7, 17, 31, 0.24) !important;
}

.chip,
.sort-btn,
.view-btn,
.status-pill-btn,
.action-tab-btn,
.nav-btn,
.filter-toggle-btn,
.push-btn,
.task-card-btn.secondary {
  background: rgba(255, 255, 255, 0.74) !important;
  color: var(--ss-text-soft) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(123, 144, 173, 0.10) !important;
}

.dropdown-menu-item,
.topbar-actions-dropdown-menu,
.task-drawer-panel,
.daraz-modal,
.modal-box,
.order-drawer,
.product-drawer {
  background: #ffffff !important;
  color: var(--ss-text) !important;
  border: 0 !important;
  box-shadow: 0 28px 70px rgba(7, 17, 31, 0.20) !important;
}

.topbar-actions-dropdown-menu *,
.dropdown-menu-item *,
.dropdown-menu-header,
.topbar-actions-dropdown-menu .dropdown-menu-header {
  color: var(--ss-text) !important;
}

.topbar-actions-dropdown-menu .dropdown-menu-header {
  opacity: 0.58 !important;
}

input,
select,
textarea,
.odoo-select,
.modal-input,
.chatter-textarea {
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: inset 0 0 0 1px rgba(123, 144, 173, 0.14) !important;
}

input:focus,
select:focus,
textarea:focus,
.modal-input:focus,
.chatter-textarea:focus {
  box-shadow: inset 0 0 0 1px var(--ss-future), 0 0 0 4px rgba(67, 97, 238, 0.12) !important;
}

@media (max-width: 768px) {
  .topbar,
  header.topbar,
  header {
    background: linear-gradient(135deg, var(--ss-seaside-4), var(--ss-seaside-1)) !important;
  }

  .page-title {
    font-size: 23px !important;
  }
}

.topbar-stat,
.topbar-stats,
.topbar-live {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html,
body {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}