:root { font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202437; background: #f7f8fc; font-synthesis: none; text-rendering: optimizeLegibility; --muted: #858a9e; --line: #eceef4; --purple: #6d5ce8; --green: #2aaf84; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }
.sidebar { background: #fff; border-right: 1px solid var(--line); bottom: 0; display: flex; flex-direction: column; left: 0; padding: 28px 18px 18px; position: fixed; top: 0; width: 244px; z-index: 2; }
.brand { align-items: center; color: #22253a; display: flex; font: 800 22px Manrope, sans-serif; gap: 10px; letter-spacing: -.8px; padding: 0 9px; text-decoration: none; }
.brand-mark { align-items: center; background: linear-gradient(145deg,#8676ff,#6252d9); border-radius: 11px; box-shadow: 0 5px 12px #6d5ce833; color: white; display: flex; font: 800 16px Manrope,sans-serif; height: 31px; justify-content: center; width: 31px; }
.workspace-label { color: #a4a7b7; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; margin: 48px 10px 13px; }
.nav-list { display: grid; gap: 5px; }
.nav-item { align-items: center; background: transparent; border: 0; border-radius: 9px; color: #777d90; display: flex; font-size: 13px; font-weight: 600; gap: 12px; min-height: 43px; padding: 0 11px; text-align: left; transition: .15s ease; width: 100%; }
.nav-item:hover { background: #f7f6ff; color: #5144bf; }
.nav-item.active { background: #f0eeff; color: #5d50d6; }
.nav-icon { font-size: 17px; text-align: center; width: 19px; }
.nav-count { background: #e5e1ff; border-radius: 20px; color: #5c4ed1; font-size: 10px; margin-left: auto; min-width: 20px; padding: 3px 6px; text-align: center; }
.sidebar-bottom { margin-top: auto; }
.demo-note { align-items: center; background: #f8f9fc; border: 1px solid #eff0f5; border-radius: 10px; display: flex; gap: 10px; padding: 12px 10px; }
.demo-note strong,.demo-note small { display: block; }
.demo-note strong { font-size: 11px; }
.demo-note small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.status-dot { background: #35b989; border-radius: 50%; box-shadow: 0 0 0 3px #dff6ee; height: 7px; margin: 0 3px; width: 7px; }
.reset-button { background: none; border: 0; color: #9296a7; font-size: 11px; margin: 10px 8px 0; padding: 6px 2px; }
.reset-button:hover { color: #5d50d6; }
.main-content { margin-left: 244px; min-height: 100vh; }
.topbar { align-items: center; background: #fff; border-bottom: 1px solid var(--line); display: flex; height: 65px; justify-content: space-between; padding: 0 42px; }
.breadcrumb { color: #9a9daf; font-size: 12px; }
.breadcrumb span { color: #d1d3dc; margin: 0 9px; }
.breadcrumb strong { color: #373b50; font-weight: 600; }
.avatar { align-items: center; background: #efeaff; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #e1dcff; color: #6556d8; display: flex; font-size: 12px; font-weight: 700; height: 33px; justify-content: center; width: 33px; }
.page-content { margin: 0 auto; max-width: 1330px; padding: 35px 42px 24px; }
.welcome-row,.page-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 24px; }
.eyebrow { color: #a3a6b6; font-size: 9px; font-weight: 700; letter-spacing: 1.15px; margin: 0 0 7px; }
h1,h2,p { margin-top: 0; }
h1 { color: #24273b; font: 700 25px Manrope,sans-serif; letter-spacing: -.7px; margin-bottom: 5px; }
h2 { color: #303348; font: 700 14px Manrope,sans-serif; letter-spacing: -.15px; margin-bottom: 5px; }
.muted,.panel-heading p { color: var(--muted); font-size: 11px; margin-bottom: 0; }
.primary-button { align-items: center; background: #6858df; border: 0; border-radius: 8px; box-shadow: 0 4px 10px #6656dd28; color: #fff; display: flex; font-size: 11px; font-weight: 600; gap: 13px; padding: 11px 14px; }
.primary-button:hover { background: #5849ce; }
.primary-button span { font-size: 15px; line-height: 10px; }
.stats-grid { display: grid; gap: 14px; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 18px; }
.stat-card,.panel { background: #fff; border: 1px solid #edeef4; border-radius: 11px; box-shadow: 0 3px 13px #28315a05; }
.stat-card { min-height: 126px; padding: 16px 17px 13px; }
.stat-top { align-items: center; color: #797e91; display: flex; font-size: 10px; font-weight: 600; justify-content: space-between; }
.stat-icon,.attention-icon { align-items: center; border-radius: 8px; display: inline-flex; font-size: 15px; height: 30px; justify-content: center; width: 30px; }
.purple { background: #f0edff; color: #7060dc; }
.green { background: #e4f8f0; color: #26a879; }
.orange { background: #fff3e5; color: #e29335; }
.blue { background: #e9f3ff; color: #5288d7; }
.stat-value { color: #292c40; display: block; font: 700 23px Manrope,sans-serif; letter-spacing: -.7px; margin: 10px 0 4px; }
.stat-card small { color: #a2a5b4; font-size: 9px; }
.dashboard-grid { display: grid; gap: 16px; grid-template-columns: 1.55fr 1fr; margin-bottom: 17px; }
.panel { padding: 19px 20px; }
.panel-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 20px; }
.period-pill,.count-chip { background: #f6f6fb; border: 1px solid #eeeff5; border-radius: 7px; color: #777c90; font-size: 9px; padding: 7px 10px; white-space: nowrap; }
.chart-panel { min-height: 256px; }
.chart-total { color: #34374a; font: 700 21px Manrope,sans-serif; margin-top: 17px; }
.chart-total span { color: #a1a4b3; font: 400 9px "DM Sans",sans-serif; margin-left: 6px; }
.chart { align-items: end; border-bottom: 1px solid #eff0f5; display: flex; gap: 12px; height: 95px; justify-content: space-between; margin-top: 6px; padding: 0 2px; }
.chart-column { align-items: center; color: #a3a6b4; display: flex; flex: 1; flex-direction: column; font-size: 9px; gap: 6px; height: 100%; justify-content: end; }
.bar-wrap { align-items: end; display: flex; height: 77px; justify-content: center; width: 100%; }
.bar { background: linear-gradient(180deg,#9184ff,#6b5ae2); border-radius: 4px 4px 1px 1px; min-height: 3px; transition: height .25s ease; width: min(25px,65%); }
.attention-panel { min-height: 256px; }
.attention-panel .panel-heading { margin-bottom: 10px; }
.attention-row { align-items: center; background: transparent; border: 0; border-top: 1px solid #f0f1f5; display: flex; gap: 10px; padding: 12px 0; text-align: left; width: 100%; }
.attention-row > span:nth-child(2) { flex: 1; }
.attention-row strong,.attention-row small { display: block; }
.attention-row strong { color: #414458; font-size: 10px; font-weight: 600; }
.attention-row small { color: #a0a3b2; font-size: 9px; margin-top: 4px; }
.attention-row b { color: #b2b4c0; font-size: 14px; font-weight: 400; }
.empty-message { color: #8e93a5; font-size: 11px; padding: 24px 0; text-align: center; }
.table-panel { padding: 18px 20px; }
.table-panel .panel-heading { margin-bottom: 13px; }
.text-button { background: none; border: 0; color: #6759d8; font-size: 10px; font-weight: 600; padding: 8px 0 8px 8px; white-space: nowrap; }
.table-scroll { overflow-x: auto; width: 100%; }
table { border-collapse: collapse; min-width: 720px; text-align: left; width: 100%; }
th { border-bottom: 1px solid #eff0f5; color: #a2a5b4; font-size: 8px; font-weight: 700; letter-spacing: .65px; padding: 11px 9px; white-space: nowrap; }
td { border-bottom: 1px solid #f1f2f6; color: #696e81; font-size: 10px; padding: 12px 9px; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td strong { color: #3f4357; font-weight: 600; }
.order-id { color: #6354d1; }
.badge { border-radius: 20px; display: inline-block; font-size: 9px; font-weight: 600; padding: 5px 9px; }
.badge.processing { background: #fff4e5; color: #d5892b; }
.badge.shipped { background: #edf2ff; color: #607bd1; }
.badge.delivered { background: #e6f7f0; color: #299c76; }
.small-button { background: #f0eeff; border: 0; border-radius: 6px; color: #5d50d1; font-size: 9px; font-weight: 600; padding: 7px 9px; white-space: nowrap; }
.small-button:hover { background: #e4e0ff; }
.action-cell { text-align: right; }
.footer { color: #abb0bf; font-size: 9px; padding: 0 42px 24px; }
.footer span { margin: 0 5px; }
.page-heading { margin-bottom: 21px; }
.page-heading h1 { margin-bottom: 5px; }
.toolbar { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 13px; }
.search-box { align-items: center; border: 1px solid #e9eaf1; border-radius: 7px; color: #9b9eae; display: flex; gap: 7px; min-width: 230px; padding: 0 10px; }
.search-box:focus-within { border-color: #a69cf0; box-shadow: 0 0 0 3px #6b5ae20c; }
.search-box span { font-size: 19px; }
.search-box input { background: none; border: 0; color: #43475a; font-size: 10px; height: 34px; outline: 0; width: 100%; }
.search-box input::placeholder { color: #a4a7b5; }
select { background: #fff; border: 1px solid #e9eaf1; border-radius: 7px; color: #73788b; font-size: 10px; min-width: 130px; padding: 9px 10px; }
.helper-line,.quiet-label { color: #9da1b0; font-size: 10px; }
.helper-line { margin: 12px 3px 0; }
.quiet-label { white-space: nowrap; }
.count-chip { font-weight: 600; }
.product-name { align-items: center; display: flex; gap: 9px; }
.product-thumb { align-items: center; background: #f0eeff; border-radius: 7px; color: #6657d5; display: inline-flex; font-size: 12px; font-weight: 700; height: 30px; justify-content: center; width: 30px; }
.sku { color: #999dad; font-size: 9px; }
.stock-cell { color: #45495b; font-weight: 600; }
.stock-cell small { background: #fff3e6; border-radius: 5px; color: #d48b34; font-size: 8px; margin-left: 5px; padding: 4px 6px; }
.quantity-controls { align-items: center; display: flex; gap: 8px; }
.quantity-controls button { background: #f6f6fa; border: 1px solid #ededf3; border-radius: 5px; color: #6e61d3; font-size: 14px; height: 25px; line-height: 1; width: 25px; }
.quantity-controls button:hover { background: #efedff; }
.quantity-controls span { color: #52566a; font-size: 10px; min-width: 15px; text-align: center; }
.low-stock { color: #db8b2f; }
.empty-state { align-items: center; color: #9498aa; display: flex; flex-direction: column; padding: 38px 12px 32px; }
.empty-state > span { background: #f3f1ff; border-radius: 12px; color: #7567dc; font-size: 19px; margin-bottom: 12px; padding: 10px 14px; }
.empty-state strong { color: #484c60; font-size: 12px; }
.empty-state p { font-size: 10px; margin: 5px 0 0; }
.profit-stats .stat-card { min-height: 133px; }
.profit-value { color: #259d77 !important; }
@media (max-width: 1050px) {
  .sidebar { width: 210px; }
  .main-content { margin-left: 210px; }
  .page-content { padding-left: 26px; padding-right: 26px; }
  .topbar { padding: 0 26px; }
  .footer { padding-left: 26px; }
  .stats-grid { gap: 10px; }
  .stat-card { padding: 14px 12px; }
  .dashboard-grid { grid-template-columns: 1.3fr 1fr; }
}
@media (max-width: 760px) {
  .sidebar { bottom: auto; height: auto; padding: 13px 14px 10px; position: sticky; top: 0; width: 100%; }
  .brand { font-size: 19px; }
  .brand-mark { height: 28px; width: 28px; }
  .workspace-label,.sidebar-bottom { display: none; }
  .nav-list { display: flex; gap: 3px; margin-top: 12px; overflow-x: auto; }
  .nav-item { flex: 0 0 auto; font-size: 10px; gap: 6px; min-height: 34px; padding: 0 9px; width: auto; }
  .nav-icon { font-size: 14px; width: 14px; }
  .nav-count { margin-left: 1px; min-width: 17px; padding: 2px 5px; }
  .main-content { margin-left: 0; }
  .topbar { height: 49px; padding: 0 17px; }
  .page-content { padding: 24px 16px 20px; }
  .welcome-row,.page-heading { align-items: flex-start; gap: 10px; }
  h1 { font-size: 22px; }
  .primary-button { font-size: 10px; padding: 10px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stat-value { font-size: 20px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .panel { padding: 15px 13px; }
  .table-panel { padding: 15px 12px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .search-box { width: 100%; }
  select { width: 100%; }
  .quiet-label { white-space: normal; }
  .footer { padding: 0 16px 20px; }
}
@media (max-width: 390px) {
  .nav-item { padding: 0 7px; }
  .nav-item { font-size: 9px; }
  .stat-card small { font-size: 8px; }
}