/* OpenDesign-inspired depth tokens */
:root {
  --accent: #f59e0b;
  --accent-dark: #d97706;
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.35);
  --depth-1: 0 2px 8px rgba(6, 13, 26, 0.06), 0 1px 2px rgba(6, 13, 26, 0.04);
  --depth-2: 0 8px 24px rgba(6, 13, 26, 0.1), 0 2px 6px rgba(6, 13, 26, 0.05);
  --depth-3: 0 20px 50px rgba(6, 13, 26, 0.14), 0 8px 16px rgba(6, 13, 26, 0.08);
  --lift: translateY(-2px);
}

.card-3d {
  background: var(--card-bg);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: var(--depth-2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-3d:hover {
  transform: var(--lift);
  box-shadow: var(--depth-3);
}

.tabs-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
}
.tab-btn {
  padding: 12px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--text3);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.badge-pending { background: #fef3c7; color: #92400e; }
.badge-approved { background: #d1fae5; color: #065f46; }
.badge-rejected { background: #fee2e2; color: #991b1b; }
.badge-converted { background: #ede9fe; color: #5b21b6; }

.commerce-wrap {
  margin: 0;
  min-height: calc(100vh - var(--topbar-h) - 24px);
}
.commerce-page .commerce-wrap {
  margin: 0;
  min-height: auto;
}