.metric-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
  margin-bottom:20px;
}
.metric-grid.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.metric-card, .panel {
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.metric-card {
  padding:24px 24px;
  min-height:156px;
  display:flex;
  flex-direction:column;
}
.metric-card.accent-dark {
  background:linear-gradient(180deg, #1a1a1a 0%, #111111 100%);
  border-color:#1e1e1e;
}
.metric-card.accent-dark .metric-label,
.metric-card.accent-dark small { color:#d2c2b3 }
.metric-card.accent-dark strong { color:#fff }
.metric-label {
  font-size:12px;
  font-weight:700;
  color:#7a736b;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.metric-label svg { width:17px; color:#9c9184 }
.metric-card strong {
  font:800 34px Manrope;
  letter-spacing:-.07em;
  color:var(--ink);
  margin:18px 0 4px;
  line-height:1;
}
.metric-card small { font-size:11px; color:#93887c }
.dashboard-grid {
  display:grid;
  grid-template-columns:1.65fr 1fr;
  gap:18px;
  margin-bottom:18px;
}
.bottom-grid { grid-template-columns:1.6fr 1fr }
.panel { min-width:0 }
.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:24px 24px 16px;
}
.panel-heading p { font-size:11px; margin:2px 0 }
.panel-heading .eyebrow { margin-bottom:6px }
.panel-chip {
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  background:var(--accent-soft-2);
  border:1px solid rgba(149,115,89,.12);
  border-radius:999px;
  padding:8px 11px;
  color:var(--accent);
}
.bar-chart {
  height:240px;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:18px;
  align-items:end;
  padding:25px 34px 24px;
}
.bar-item {
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  color:#998f84;
  font-size:11px;
}
.bar-track {
  flex:1;
  width:100%;
  max-width:48px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:flex-end;
}
.bar-value {
  width:100%;
  background:linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 100%);
  border-radius:8px 8px 0 0;
  min-height:4px;
  transition:height .3s;
}
.bar-item:last-child .bar-value {
  background:linear-gradient(180deg, #4a4037 0%, #1b1b1e 100%);
}
.performance-panel { display:flex; flex-direction:column }
.performance-value {
  padding:8px 24px 18px;
  display:flex;
  flex-direction:column;
}
.performance-value span { color:#7d746b; font-weight:700; font-size:12px }
.performance-value strong {
  font:800 27px Manrope;
  letter-spacing:-.045em;
  margin:9px 0;
}
.performance-value small { color:#93887c; font-size:11px }
.performance-line {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:19px 24px;
  color:#6d665d;
  font-size:12px;
}
.performance-line strong { color:#1d1a17 }
.performance-line span { display:flex; align-items:center; gap:8px }
.status-dot { height:7px; width:7px; background:#aaa; border-radius:50% }
.status-dot.warning { background:var(--warning) }
.performance-panel .text-link { margin:auto 24px 22px }
.text-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--accent);
  font-size:12px;
  font-weight:800;
}
.text-link svg { width:15px; height:15px }
.ranking-list { padding:0 24px 18px }
.ranking-row {
  border-top:1px solid var(--line);
  padding:17px 0;
  display:flex;
  align-items:center;
  gap:13px;
}
.ranking-position { font:700 12px Manrope; color:#aaa092 }
.ranking-name { font-weight:700; flex:1 }
.ranking-row strong { font:800 14px Manrope; white-space:nowrap }
.ranking-row strong small { font:500 10px 'DM Sans'; color:#9f9588 }
.table-panel { margin-bottom:20px }
.table-scroll { overflow:auto }
.data-table {
  width:100%;
  border-collapse:collapse;
  min-width:730px;
  text-align:left;
}
.data-table th {
  padding:14px 23px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  color:#918577;
  background:#fcfbf8;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.data-table td {
  padding:17px 23px;
  border-bottom:1px solid #f2ece4;
  vertical-align:middle;
  color:#645d55;
  font-size:12px;
}
.data-table td strong { color:#26211d; font-weight:800 }
.data-table tbody tr:last-child td { border-bottom:none }
.data-table tbody tr:hover { background:#fcfaf7 }
.data-table.compact td, .data-table.compact th { padding:14px 22px }
.right { text-align:right }
.mono { font-family:Consolas, monospace; font-size:11px !important }
.muted { color:var(--ink-soft) !important }
.tiny { font-size:11px }
.badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#f3f0eb;
  color:#675f57;
  font-size:10px;
  padding:6px 10px;
  font-weight:800;
  white-space:nowrap;
  text-transform:capitalize;
  border:1px solid rgba(149,115,89,.1);
}
.badge.published, .badge.confirmed, .badge.delivered, .badge.paid {
  background:var(--success-soft);
  color:var(--success);
  border-color:rgba(85,119,100,.16);
}
.badge.draft, .badge.pending, .badge.unpaid, .badge.warning {
  background:var(--warning-soft);
  color:var(--warning);
  border-color:rgba(184,137,80,.16);
}
.badge.cancelled, .badge.failed, .badge.inactive {
  background:var(--danger-soft);
  color:var(--danger);
  border-color:rgba(179,93,83,.12);
}
.notice {
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:16px;
  padding:15px 18px;
  margin-bottom:18px;
  border:1px solid transparent;
  font-size:13px;
}
.notice.success {
  background:var(--success-soft);
  color:var(--success);
  border-color:rgba(85,119,100,.14);
}
.notice.danger {
  background:var(--danger-soft);
  color:var(--danger);
  border-color:rgba(179,93,83,.14);
}
.btn {
  appearance:none;
  border:none;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:12px 15px;
  font-weight:700;
  transition:transform .15s, box-shadow .15s, background .15s, color .15s;
}
.btn:hover { transform:translateY(-1px) }
.btn-primary {
  background:linear-gradient(180deg, #1f1f20 0%, #111111 100%);
  color:#fff;
  box-shadow:0 14px 30px rgba(17,17,17,.14);
}
.btn-primary:hover { box-shadow:0 18px 34px rgba(17,17,17,.18) }
.btn-soft {
  background:var(--accent-soft-2);
  color:var(--accent);
  border:1px solid rgba(149,115,89,.14);
}
.btn-table {
  background:#fff;
  color:#403932;
  border:1px solid var(--line);
  padding:9px 12px;
  border-radius:12px;
}
.btn-block { width:100% }
.filter-form {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:20px;
}
.empty {
  display:grid;
  place-items:center;
  padding:30px;
  color:#948a7e;
  font-size:12px;
}
.count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  background:#f1ece4;
  color:#665d55;
  font-size:11px;
  font-weight:800;
}
.product-cell, .customer-cell {
  display:flex;
  align-items:center;
  gap:10px;
}
.product-thumbnail {
  width:42px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(180deg, #f1ece4 0%, #e7ddd0 100%);
  border:1px solid var(--line);
}
.panel-heading-wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 24px 18px;
}