/* =========================================================================
   OUTLET CARIOCA — Design System
   Paleta extraída da logo real da loja (static/logo.svg): laranja vibrante
   como cor de marca, marrom quase-preto para fundo (o próprio contorno da
   logo) e amarelo-sol como acento de "outlet" (preço, promoção, destaque).
   Este arquivo é carregado depois do Bootstrap e só reescreve aparência
   (cores, tipografia, espaçamento, sombras). Nenhuma classe, id, atributo
   data-bs-* ou estrutura usada pelo JS/Django é alterada aqui.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root,
[data-bs-theme="dark"] {
  /* ---- Paleta de marca (extraída de static/logo.svg) ---- */
  --ol-orange-200: #ffd9b8;
  --ol-orange-300: #ffb066;
  --ol-orange-400: #ff8c33;
  --ol-orange-500: #ff6600;
  --ol-orange-600: #e55c00;
  --ol-orange-700: #c24e00;
  --ol-orange-800: #8a3700;
  --ol-orange-900: #612700;

  --ol-gold-300: #fcec8f;
  --ol-gold-400: #fae35c;
  --ol-gold-500: #f8dc23;
  --ol-gold-600: #d9bd0a;

  --ol-red-400: #f3888c;
  --ol-red-500: #ef4444;
  --ol-red-600: #d63a3a;

  --ol-sky-400: #74d3fb;
  --ol-sky-500: #38bdf8;
  --ol-sky-600: #1f9bd6;

  --ol-leaf-400: #4ad080;
  --ol-leaf-500: #2fbe72;
  --ol-leaf-600: #1f9c5c;

  /* ---- Superfícies (marrom quase-preto, o próprio contorno da logo) ---- */
  --ol-bg: #170d06;
  --ol-surface: #22140b;
  --ol-surface-2: #301d10;
  --ol-surface-3: #402a17;
  --ol-border: #46301b;
  --ol-border-soft: rgba(255, 237, 219, 0.10);
  --ol-text: #fbf1e7;
  --ol-text-muted: rgba(251, 241, 231, 0.64);

  /* ---- Overrides do sistema de cores do Bootstrap 5.3 ---- */
  --bs-font-sans-serif: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --bs-primary: var(--ol-orange-500);
  --bs-primary-rgb: 255, 102, 0;
  --bs-primary-text-emphasis: #ffb066;
  --bs-primary-bg-subtle: #2e1502;
  --bs-primary-border-subtle: #7a3a04;

  --bs-success: var(--ol-leaf-500);
  --bs-success-rgb: 47, 190, 114;
  --bs-success-text-emphasis: #79e6a6;
  --bs-success-bg-subtle: #0a2a1d;
  --bs-success-border-subtle: #1b6b3e;

  --bs-info: var(--ol-sky-500);
  --bs-info-rgb: 56, 189, 248;
  --bs-info-text-emphasis: #86d9f7;
  --bs-info-bg-subtle: #062634;
  --bs-info-border-subtle: #0e5a78;

  --bs-warning: var(--ol-gold-500);
  --bs-warning-rgb: 248, 220, 35;
  --bs-warning-text-emphasis: #fce98f;
  --bs-warning-bg-subtle: #332b03;
  --bs-warning-border-subtle: #7d6a0c;

  --bs-danger: var(--ol-red-500);
  --bs-danger-rgb: 239, 68, 68;
  --bs-danger-text-emphasis: #f3a6a9;
  --bs-danger-bg-subtle: #301012;
  --bs-danger-border-subtle: #7a2a2e;

  --bs-secondary: #7a6a58;
  --bs-secondary-rgb: 122, 106, 88;
  --bs-secondary-text-emphasis: #d8c9b8;
  --bs-secondary-bg-subtle: #241c14;
  --bs-secondary-border-subtle: #4a3c2c;
  --bs-secondary-color: rgba(251, 241, 231, 0.68);
  --bs-secondary-bg: var(--ol-surface-2);

  --bs-dark: #241407;
  --bs-dark-rgb: 36, 20, 7;
  --bs-dark-text-emphasis: #e4d2c0;
  --bs-dark-bg-subtle: #170d06;
  --bs-dark-border-subtle: var(--ol-border);

  --bs-light: var(--ol-text);
  --bs-light-rgb: 251, 241, 231;
  --bs-light-text-emphasis: #fbf1e7;
  --bs-light-bg-subtle: #26170d;
  --bs-light-border-subtle: var(--ol-border);

  --bs-body-bg: var(--ol-bg);
  --bs-body-bg-rgb: 23, 13, 6;
  --bs-body-color: var(--ol-text);
  --bs-body-color-rgb: 251, 241, 231;
  --bs-emphasis-color: #ffffff;
  --bs-tertiary-color: rgba(251, 241, 231, 0.5);
  --bs-tertiary-bg: var(--ol-surface);

  --bs-border-color: var(--ol-border);
  --bs-border-color-translucent: var(--ol-border-soft);

  --bs-link-color: var(--ol-orange-400);
  --bs-link-color-rgb: 255, 140, 51;
  --bs-link-hover-color: var(--ol-orange-300);
  --bs-link-hover-color-rgb: 255, 176, 102;

  --bs-heading-color: #ffffff;
  --bs-focus-ring-color: rgba(255, 102, 0, 0.35);

  --bs-form-valid-color: var(--ol-leaf-400);
  --bs-form-valid-border-color: var(--ol-leaf-500);
  --bs-form-invalid-color: var(--ol-red-400);
  --bs-form-invalid-border-color: var(--ol-red-500);

  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius: 0.65rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-border-radius-2xl: 1.5rem;
  --bs-border-radius-pill: 50rem;

  --bs-box-shadow-sm: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28);
  --bs-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.45);
}

/* =========================================================================
   Base
   ========================================================================= */
html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255, 102, 0, 0.12), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(248, 220, 35, 0.06), transparent 55%),
    var(--ol-bg);
  letter-spacing: 0.01em;
}

body > .container-fluid {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.display-4 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
}

.display-4::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 0.25rem;
  margin: 0.6rem 0 1.5rem;
  border-radius: var(--bs-border-radius-pill);
  background: linear-gradient(90deg, var(--ol-orange-400), var(--ol-gold-500));
}
.display-4.text-center::after {
  margin-left: auto;
  margin-right: auto;
}

a {
  transition: color .15s ease-in-out;
}

::selection {
  background: rgba(255, 102, 0, 0.35);
  color: #fff;
}

/* Scrollbar */
* {
  scrollbar-color: var(--ol-surface-3) transparent;
  scrollbar-width: thin;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--ol-surface-3);
  border-radius: var(--bs-border-radius-pill);
  border: 2px solid var(--ol-bg);
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--ol-orange-700);
}

/* =========================================================================
   Header
   ========================================================================= */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background:
    linear-gradient(120deg, #1c0f06 0%, #3a1d09 45%, #1c0f06 100%) !important;
  border-bottom: 1px solid rgba(255, 140, 51, 0.25);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}

.app-header .brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #fff;
}

.app-header .brand-mark img {
  height: 40px;
  width: 40px;
  border-radius: var(--bs-border-radius);
  background: #fff2;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.45);
}

.app-header .brand-mark .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.app-header .brand-mark .brand-text small {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ol-gold-400);
}

.app-header h1 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.app-header .user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--bs-border-radius-pill);
  font-size: 0.9rem;
}

/* =========================================================================
   Sidebar / Offcanvas
   ========================================================================= */
button[data-bs-target="#sidebar"] {
  border-radius: var(--bs-border-radius-pill);
  box-shadow: var(--bs-box-shadow-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
button[data-bs-target="#sidebar"]:hover {
  background-color: var(--ol-orange-700) !important;
  border-color: var(--ol-orange-700);
}

#sidebar.offcanvas {
  width: 250px;
  background: linear-gradient(190deg, #241407 0%, #150b05 100%) !important;
  border-right: 1px solid var(--ol-border);
}

#sidebar .offcanvas-header {
  border-bottom: 1px solid var(--ol-border-soft);
  padding: 1rem 1.1rem;
}

#sidebar .sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

#sidebar .sidebar-brand img {
  height: 32px;
  width: 32px;
  border-radius: 0.5rem;
  background: #fff2;
}

#sidebar .sidebar-brand .fw-semibold {
  font-size: 0.95rem;
  line-height: 1.15;
}

#sidebar .sidebar-brand small {
  color: var(--ol-text-muted);
  font-size: 0.7rem;
}

#sidebar .nav-link {
  color: rgba(251, 241, 231, 0.82);
  border-radius: 0.6rem;
  margin: 0.15rem 0.6rem;
  font-weight: 500;
  transition: background-color .15s ease-in-out, color .15s ease-in-out, transform .1s ease-in-out;
}
#sidebar .nav-link:hover {
  background-color: rgba(255, 102, 0, 0.16);
  color: #fff;
}
#sidebar .nav-link:active {
  transform: scale(0.99);
}
#sidebar .nav > a.nav-link.px-3 {
  border-left: 3px solid transparent;
}
#sidebar .nav > a.nav-link.px-3:hover {
  border-left-color: var(--ol-orange-400);
}

#sidebar .submenu .nav-link {
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 0.5rem;
  margin: 0.2rem 0.6rem 0.2rem 0;
  padding-left: 1.4rem !important;
  font-size: 0.92rem;
  color: rgba(251, 241, 231, 0.75) !important;
}
#sidebar .submenu .nav-link:hover {
  background-color: rgba(255, 102, 0, 0.14);
  color: #fff !important;
}

#sidebar .nav-item > a .bi-chevron-down {
  transition: transform .2s ease-in-out;
  color: var(--ol-text-muted);
}
#sidebar a[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
  color: var(--ol-orange-300);
}

#sidebar form .btn-link {
  color: var(--ol-red-400) !important;
  font-weight: 500;
}
#sidebar form .btn-link:hover {
  color: var(--ol-red-500) !important;
}

#sidebar .px-3.pb-3.mt-auto {
  border-top: 1px solid var(--ol-border-soft);
  padding-top: 0.85rem !important;
}

/* =========================================================================
   Footer
   ========================================================================= */
.app-footer {
  border-top: 1px solid var(--ol-border-soft);
  background: linear-gradient(0deg, #180d06 0%, transparent 100%);
}
.app-footer .text-muted {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* =========================================================================
   Cards
   ========================================================================= */
.card {
  --bs-card-bg: var(--ol-surface);
  --bs-card-border-color: var(--ol-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.22);
}

.card.shadow-lg {
  box-shadow: var(--bs-box-shadow-lg) !important;
}

.card-header {
  --bs-card-cap-bg: rgba(255, 255, 255, 0.03);
  font-weight: 600;
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  --bs-btn-border-radius: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform .08s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.btn:active {
  transform: translateY(1px);
}
.btn.btn-sm {
  --bs-btn-border-radius: 0.5rem;
}

.btn-primary {
  --bs-btn-color: #2b1300;
  --bs-btn-bg: var(--ol-orange-500);
  --bs-btn-border-color: var(--ol-orange-600);
  --bs-btn-hover-color: #2b1300;
  --bs-btn-hover-bg: var(--ol-orange-600);
  --bs-btn-hover-border-color: var(--ol-orange-700);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--ol-orange-700);
  --bs-btn-active-border-color: var(--ol-orange-700);
  --bs-btn-focus-shadow-rgb: 255, 102, 0;
  --bs-btn-disabled-bg: var(--ol-orange-800);
  --bs-btn-disabled-border-color: var(--ol-orange-800);
  background-image: linear-gradient(135deg, var(--ol-orange-400), var(--ol-orange-600));
  border-color: transparent;
  box-shadow: 0 0.3rem 0.8rem rgba(255, 102, 0, 0.28);
}
.btn-primary:hover {
  background-image: linear-gradient(135deg, var(--ol-orange-500), var(--ol-orange-700));
}

.btn-success {
  --bs-btn-color: #04140c;
  --bs-btn-bg: var(--ol-leaf-500);
  --bs-btn-border-color: #22a763;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #22a763;
  --bs-btn-hover-border-color: #178a53;
  --bs-btn-active-bg: #178a53;
  --bs-btn-active-border-color: #178a53;
  --bs-btn-focus-shadow-rgb: 47, 190, 114;
  background-image: linear-gradient(135deg, #3fd082, #1c9a5b);
  border-color: transparent;
  box-shadow: 0 0.3rem 0.8rem rgba(47, 190, 114, 0.22);
}

.btn-warning {
  --bs-btn-color: #241905;
  --bs-btn-bg: var(--ol-gold-500);
  --bs-btn-border-color: var(--ol-gold-600);
  --bs-btn-hover-color: #241905;
  --bs-btn-hover-bg: var(--ol-gold-400);
  --bs-btn-hover-border-color: var(--ol-gold-500);
  --bs-btn-active-bg: var(--ol-gold-600);
  --bs-btn-focus-shadow-rgb: 248, 220, 35;
  background-image: linear-gradient(135deg, var(--ol-gold-400), var(--ol-gold-600));
  border-color: transparent;
  box-shadow: 0 0.3rem 0.8rem rgba(248, 220, 35, 0.22);
}

.btn-danger {
  --bs-btn-bg: var(--ol-red-500);
  --bs-btn-border-color: var(--ol-red-600);
  --bs-btn-hover-bg: var(--ol-red-600);
  --bs-btn-hover-border-color: #b52f2f;
  --bs-btn-active-bg: #b52f2f;
  --bs-btn-focus-shadow-rgb: 239, 68, 68;
  background-image: linear-gradient(135deg, #f16060, var(--ol-red-600));
  border-color: transparent;
  box-shadow: 0 0.3rem 0.8rem rgba(239, 68, 68, 0.2);
}

.btn-info {
  --bs-btn-color: #04202c;
  --bs-btn-bg: var(--ol-sky-500);
  --bs-btn-border-color: var(--ol-sky-600);
  --bs-btn-hover-color: #04202c;
  --bs-btn-hover-bg: var(--ol-sky-400);
  --bs-btn-active-bg: var(--ol-sky-600);
  --bs-btn-focus-shadow-rgb: 56, 189, 248;
  background-image: linear-gradient(135deg, var(--ol-sky-400), var(--ol-sky-600));
  border-color: transparent;
  box-shadow: 0 0.3rem 0.8rem rgba(56, 189, 248, 0.2);
}

.btn-secondary {
  --bs-btn-bg: var(--ol-surface-3);
  --bs-btn-border-color: var(--ol-border);
  --bs-btn-color: var(--ol-text);
  --bs-btn-hover-bg: #4a3320;
  --bs-btn-hover-border-color: #4a3320;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #4a3320;
  --bs-btn-focus-shadow-rgb: 122, 106, 88;
}

.btn-dark {
  --bs-btn-bg: var(--ol-surface-2);
  --bs-btn-border-color: var(--ol-border);
  --bs-btn-hover-bg: var(--ol-surface-3);
  --bs-btn-hover-border-color: var(--ol-border);
  --bs-btn-active-bg: var(--ol-surface-3);
  --bs-btn-focus-shadow-rgb: 36, 20, 7;
}

.btn-light {
  --bs-btn-bg: var(--ol-text);
  --bs-btn-color: #170d06;
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-color: #170d06;
}

.btn-outline-primary {
  --bs-btn-color: var(--ol-orange-300);
  --bs-btn-border-color: var(--ol-orange-500);
  --bs-btn-hover-bg: var(--ol-orange-500);
  --bs-btn-hover-border-color: var(--ol-orange-500);
  --bs-btn-hover-color: #2b1300;
  --bs-btn-active-bg: var(--ol-orange-600);
  --bs-btn-active-border-color: var(--ol-orange-600);
  --bs-btn-focus-shadow-rgb: 255, 102, 0;
}

.btn-outline-secondary {
  --bs-btn-color: var(--ol-text-muted);
  --bs-btn-border-color: var(--ol-border);
  --bs-btn-hover-bg: var(--ol-surface-3);
  --bs-btn-hover-border-color: var(--ol-border);
  --bs-btn-hover-color: #fff;
  --bs-btn-focus-shadow-rgb: 122, 106, 88;
}

.btn-outline-danger {
  --bs-btn-color: var(--ol-red-400);
  --bs-btn-border-color: var(--ol-red-500);
  --bs-btn-hover-bg: var(--ol-red-500);
  --bs-btn-hover-border-color: var(--ol-red-500);
  --bs-btn-focus-shadow-rgb: 239, 68, 68;
}

.btn-outline-warning {
  --bs-btn-color: var(--ol-gold-400);
  --bs-btn-border-color: var(--ol-gold-500);
  --bs-btn-hover-bg: var(--ol-gold-500);
  --bs-btn-hover-color: #241905;
  --bs-btn-focus-shadow-rgb: 248, 220, 35;
}

.btn-outline-info,
.btn-outline-success {
  --bs-btn-focus-shadow-rgb: 56, 189, 248;
}

/* =========================================================================
   Forms
   ========================================================================= */
.form-control,
.form-select {
  background-color: var(--ol-surface-2);
  border-color: var(--ol-border);
  color: var(--ol-text);
  border-radius: 0.55rem;
}
.form-control::placeholder {
  color: rgba(251, 241, 231, 0.38);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--ol-surface-2);
  border-color: var(--ol-orange-400);
  color: var(--ol-text);
  box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.25);
}
.form-control:disabled,
.form-select:disabled {
  background-color: var(--ol-surface);
  color: var(--ol-text-muted);
}

.form-check-input {
  background-color: var(--ol-surface-2);
  border-color: var(--ol-border);
}
.form-check-input:checked {
  background-color: var(--ol-orange-500);
  border-color: var(--ol-orange-500);
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.25);
}

.form-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: rgba(251, 241, 231, 0.85);
}

.input-group-text {
  background-color: var(--ol-surface-2);
  border-color: var(--ol-border);
  color: var(--ol-text-muted);
}

/* =========================================================================
   Tables
   ========================================================================= */
.table-responsive {
  border: 1px solid var(--ol-border);
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
}
.table-responsive .table {
  margin-bottom: 0;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ol-text);
  --bs-table-border-color: var(--ol-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
  --bs-table-striped-color: var(--ol-text);
  --bs-table-hover-bg: rgba(255, 102, 0, 0.10);
  --bs-table-hover-color: #ffffff;
  vertical-align: middle;
}

.table thead {
  background: linear-gradient(120deg, #2b1608, #1c0f06);
}
.table thead th {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom-width: 1px;
  white-space: nowrap;
}

.table td {
  font-size: 0.93rem;
}

/* =========================================================================
   Badges & Alerts
   ========================================================================= */
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--bs-border-radius-pill);
  padding: 0.42em 0.8em;
}

.alert {
  border-radius: var(--bs-border-radius);
  border-width: 1px;
}

/* =========================================================================
   Modals & Toasts & Offcanvas
   ========================================================================= */
.modal-content {
  --bs-modal-bg: var(--ol-surface);
  --bs-modal-border-color: var(--ol-border);
  border-radius: var(--bs-border-radius-lg);
}
.modal-header {
  border-bottom-color: var(--ol-border-soft);
}
.modal-footer {
  border-top-color: var(--ol-border-soft);
}

.toast {
  --bs-toast-bg: var(--ol-surface);
  --bs-toast-border-color: var(--ol-border);
  --bs-toast-header-bg: var(--ol-surface-2);
}

.offcanvas {
  --bs-offcanvas-bg: var(--ol-surface);
}

/* =========================================================================
   Pagination
   ========================================================================= */
.pagination {
  --bs-pagination-bg: var(--ol-surface);
  --bs-pagination-border-color: var(--ol-border);
  --bs-pagination-color: var(--ol-text);
  --bs-pagination-hover-bg: var(--ol-surface-2);
  --bs-pagination-hover-border-color: var(--ol-border);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-active-bg: var(--ol-orange-500);
  --bs-pagination-active-border-color: var(--ol-orange-500);
  --bs-pagination-active-color: #2b1300;
  --bs-pagination-focus-bg: var(--ol-surface-2);
  --bs-pagination-focus-color: #fff;
  gap: 0.25rem;
}
.pagination .page-link {
  border-radius: 0.5rem !important;
}

/* =========================================================================
   Dashboard widgets (stat cards, charts)
   ========================================================================= */
.stat-card {
  border-radius: var(--bs-border-radius-lg);
  padding: 1.1rem 1.25rem;
}

.chart-card {
  background: var(--ol-surface);
  border: 1px solid var(--ol-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.22);
  padding: 1.25rem;
}
.chart-card h5 {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ol-text-muted);
  margin-bottom: 1rem;
}

/* Outlet-style price emphasis, opt-in via .price-tag */
.price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-weight: 800;
  color: var(--ol-gold-400);
}

/* =========================================================================
   Auth / Login
   ========================================================================= */
.auth-shell {
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--ol-surface);
  border: 1px solid var(--ol-border);
  border-radius: var(--bs-border-radius-2xl);
  box-shadow: var(--bs-box-shadow-lg);
  padding: 2.25rem 2rem;
}

.auth-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  width: 108px;
  height: 108px;
  border-radius: 1.5rem;
  background: linear-gradient(150deg, rgba(255, 102, 0, 0.20), rgba(248, 220, 35, 0.12));
  border: 1px solid rgba(255, 140, 51, 0.3);
  box-shadow: 0 0 0 6px rgba(255, 102, 0, 0.06);
}
.auth-emblem img {
  width: 84px;
  height: 84px;
}

.auth-title {
  text-align: center;
  font-weight: 800;
  font-size: 1.4rem;
  margin-bottom: 0.15rem;
}
.auth-subtitle {
  text-align: center;
  color: var(--ol-text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.75rem;
}

/* =========================================================================
   Responsive polish
   ========================================================================= */
@media (max-width: 767.98px) {
  .app-header h1 {
    font-size: 1.05rem;
  }
  .app-header .brand-mark img {
    height: 32px;
    width: 32px;
  }
}