:root {
  --color-bg-main: #050505;
  --color-bg-card: #0D0D12;
  --color-border: #1B1B22;
  --color-text-main: #EDEDED;
  --color-text-secondary: #B7B7C2;
  --color-brand: #A100FF;
  --color-brand-hover: #5B00B5;
  --color-success: #00FF85;
  --color-error: #FF3B3B;
  --color-badge-warning: #B7B7C2;
  --radius-card: 18px;
  --radius-btn: 14px;
  --shadow-dark: 0 6px 32px 0 #000c;
  --font-ui: 'Inter', sans-serif;
  --font-title: 'Montserrat', sans-serif;
}

body {
  background: var(--color-bg-main) !important;
  color: var(--color-text-main);
  font-family: var(--font-ui);
  margin: 0;
  min-height: 100vh;
}

.card, .panel, .modal__panel, .products-table-card, .table-card, .stats-grid, .timeline-card, .funnel-card, .logistics-card, .media-card, .bumps-empty__card {
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-dark);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 900;
  color: var(--color-text-main);
  letter-spacing: -0.5px;
}

.panel-header, .view-header, .products-head, .bumps-head {
  border-bottom: 1.5px solid var(--color-border);
  margin-bottom: 2.2rem;
}

button, .ghost {
  font-family: var(--font-ui);
  border-radius: var(--radius-btn);
  border: none;
  padding: 0.85em 1.7em;
  font-weight: 700;
  background: var(--color-brand);
  color: #EDEDED;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, border-color 0.18s;
  box-shadow: 0 0 0 0 var(--color-brand);
  font-size: 1.05em;
  letter-spacing: 0.01em;
}
button:hover, .ghost:hover {
  background: #B326FF;
  box-shadow: 0 0 12px 0 var(--color-brand);
}
.ghost {
  background: rgba(13, 13, 18, 0.56);
  border: 1.5px solid #5B00B5;
  color: #EDEDED;
  box-shadow: none;
}
.ghost:hover {
  background: rgba(91, 0, 181, 0.2);
  border-color: #A100FF;
  color: #EDEDED;
}

input:not([type="checkbox"]), select, textarea {
  background: var(--color-bg-main);
  color: var(--color-text-main);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 0.85em 1.1em;
  font-family: var(--font-ui);
  font-size: 1rem;
  transition: border 0.18s, box-shadow 0.18s;
}
input:not([type="checkbox"]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(161, 0, 255, 0.35);
}

select {
  background-color: #0d0d12;
  color: #ededed;
  border-color: rgba(161, 0, 255, 0.25);
}

select option {
  background-color: #0d0d12;
  color: #ededed;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  width: 44px;
  min-width: 44px;
  height: 24px;
  margin: 0;
  border: 1px solid #5b00b5;
  border-radius: 999px;
  background: #0d0d12;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ededed;
  transition: transform 180ms ease;
}

input[type="checkbox"]:checked {
  background: #a100ff;
  border-color: #a100ff;
}

input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(161, 0, 255, 0.35);
}

input[type="checkbox"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
::placeholder {
  color: var(--color-text-secondary);
  opacity: 1;
}

.badge, .chip {
  display: inline-block;
  border-radius: 999px;
  font-size: 0.92em;
  font-weight: 700;
  padding: 0.32em 1.1em;
  background: var(--color-border);
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
}
.badge--success {
  background: var(--color-success);
  color: #050505;
}
.badge--error {
  background: var(--color-error);
  color: #fff;
}
.badge--warning {
  background: var(--color-badge-warning);
  color: #050505;
}

/* Barra de progresso checkout */
.progress-bar {
  width: 100%;
  height: 7px;
  background: var(--color-border);
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 2.2rem;
}
.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand), var(--color-brand-hover));
  border-radius: 7px;
  transition: width 0.3s;
}

/* Cards e containers */
.products-table, .data-table, .timeline-table {
  background: transparent;
  color: var(--color-text-main);
}
.products-table th, .data-table th, .timeline-table th {
  color: var(--color-text-secondary);
  font-weight: 800;
  background: var(--color-bg-card);
  border-bottom: 1.5px solid var(--color-border);
}
.products-table td, .data-table td, .timeline-table td {
  border-bottom: 1px solid var(--color-border);
}

/* Status */
.product-status--active {
  color: var(--color-success);
}
.product-status--draft {
  color: var(--color-text-secondary);
}

/* Responsividade básica */
@media (max-width: 900px) {
  .stats-grid, .products-table-card, .table-card, .timeline-card, .funnel-card {
    padding: 1rem;
  }
  .products-table, .data-table, .timeline-table {
    font-size: 0.97em;
  }
}