/* ============================================================
   Minha Loja — Design System v3 (Azul corporativo, refinado)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ============ GRAFITE + DOURADO — tema "premium" ============ */
  --bg-body: #0E1013;
  --bg-sidebar: #111418;
  --bg-surface: #14181D;
  --bg-card: #171B21;
  --bg-card-2: #1B2027;
  --bg-card-hover: #1E242C;
  --bg-input: #0F1216;
  --bg-hover: #1E242C;

  --border: #232830;
  --border-light: #2E353F;
  --border-focus: #E3B44A;

  --text-primary: #F5F7FA;
  --text-secondary: #A9B2C0;
  --text-muted: #6E7787;
  --text-inverse: #14100A;

  /* Dourado */
  --accent: #E3B44A;
  --accent-strong: #C99A2E;
  --accent-hover: #B8891F;
  --accent-light: #F2D68C;
  --accent-contrast: #1A1405;
  --accent-bg: rgba(227, 180, 74, 0.12);
  --accent-bg-strong: rgba(227, 180, 74, 0.22);
  --accent-grad: linear-gradient(135deg, #F2D68C 0%, #D9A93C 55%, #C08F22 100%);

  --green: #34D399; --green-bg: rgba(52, 211, 153, 0.13);
  --red: #F87171;   --red-bg: rgba(248, 113, 113, 0.13);
  --amber: #FBBF24; --amber-bg: rgba(251, 191, 36, 0.13);
  --teal: #2DD4BF;

  --sidebar-w: 270px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* Profundidade nítida + fio de luz na borda (em vez de neumorfismo) */
  --hair: 0 0 0 1px rgba(255,255,255,0.045);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.45), var(--hair);
  --shadow-sm: 0 6px 20px rgba(0,0,0,.40), var(--hair);
  --shadow-md: 0 18px 44px rgba(0,0,0,.52), var(--hair);
  --shadow-lg: 0 34px 76px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.06);
  --accent-shadow: rgba(227,180,74,.30);
  --glow: 0 0 0 3px var(--accent-bg-strong);
  --ring: 0 0 0 3px var(--accent-bg-strong);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Sora', 'Inter', -apple-system, sans-serif;
  --fast: 140ms cubic-bezier(.4,0,.2,1);
  --normal: 240ms cubic-bezier(.4,0,.2,1);
  --slow: 380ms cubic-bezier(.4,0,.2,1);
}

[data-theme="light"] {
  --bg-body: #eef2f8;
  --bg-sidebar: #ffffff;
  --bg-surface: #f5f8fc;
  --bg-card: #ffffff;
  --bg-card-2: #f7fafd;
  --bg-card-hover: #f5f8fd;
  --bg-input: #eef2f8;
  --bg-hover: #e9eef7;

  --border: #e0e6f0;
  --border-light: #e8edf5;
  --border-focus: #2563eb;

  --text-primary: #0f1828;
  --text-secondary: #51607a;
  --text-muted: #8b97ad;
  --text-inverse: #ffffff;

  --accent: #2563eb; --accent-strong: #2563eb; --accent-light: #1d4ed8;
  --accent-bg: rgba(37,99,235,0.08); --accent-bg-strong: rgba(37,99,235,0.15);

  --green: #16a34a; --green-bg: rgba(22,163,74,0.10);
  --red: #dc2626; --red-bg: rgba(220,38,38,0.09);
  --amber: #d97706; --amber-bg: rgba(217,119,6,0.10);

  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-sm: 0 4px 14px rgba(16,24,40,.07);
  --shadow-md: 0 12px 32px rgba(16,24,40,.10);
  --shadow-lg: 0 24px 60px rgba(16,24,40,.16);
}

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); background: var(--bg-body); color: var(--text-primary);
  line-height: 1.55; display: flex; min-height: 100vh; overflow: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1 { font-size: 1.6rem; font-weight: 780; letter-spacing: -0.025em; line-height: 1.18; }
h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 1.04rem; font-weight: 680; letter-spacing: -0.01em; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-light); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }
input[type="checkbox"] { accent-color: var(--accent-strong); width: 16px; height: 16px; cursor: pointer; }

/* ============================================================ SIDEBAR */
.sidebar {
  width: var(--sidebar-w); background: var(--bg-sidebar); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 200;
  transition: transform var(--normal);
}
.sidebar-header { padding: 22px 18px 14px; }
.logo {
  display: flex; align-items: center; gap: 11px;
  font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary);
}
.logo svg {
  width: 38px; height: 38px; padding: 7px; flex-shrink: 0;
  background: var(--accent-grad); color: var(--accent-contrast); border-radius: 11px;
  box-shadow: 0 6px 16px var(--accent-shadow); margin: 0 !important; vertical-align: middle !important;
}
.sidebar-nav { flex: 1; padding: 6px 12px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--r-md);
  color: var(--text-secondary); text-decoration: none; font-weight: 560; font-size: 0.93rem;
  transition: background var(--fast), color var(--fast); position: relative; cursor: grab;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 680; }
.nav-icon { flex-shrink: 0; opacity: .82; transition: opacity var(--fast); }
.nav-item:hover .nav-icon, .nav-item.active .nav-icon { opacity: 1; }
.nav-item.active .nav-icon { stroke: var(--accent); }
.sidebar-nav .nav-item::after {
  content: ''; margin-left: auto; width: 16px; height: 16px; flex-shrink: 0; opacity: 0; transition: opacity var(--fast);
  background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23889'%3E%3Ccircle cx='6' cy='4' r='1.2'/%3E%3Ccircle cx='10' cy='4' r='1.2'/%3E%3Ccircle cx='6' cy='8' r='1.2'/%3E%3Ccircle cx='10' cy='8' r='1.2'/%3E%3Ccircle cx='6' cy='12' r='1.2'/%3E%3Ccircle cx='10' cy='12' r='1.2'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-item:hover::after { opacity: .5; }
.sidebar-nav .nav-item:active { cursor: grabbing; }
.nav-item--ghost { opacity: .35; }
.nav-item--chosen { background: var(--accent-bg); color: var(--text-primary); }
.nav-item--drag { box-shadow: var(--shadow-md); background: var(--bg-card-hover); }

.sidebar-phone { padding: 8px 12px 2px; }
.btn-phone {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--r-md);
  border: none; cursor: pointer; color: #fff; font-family: var(--font); text-align: left;
  background: var(--accent-grad); box-shadow: 0 8px 20px var(--accent-shadow);
  transition: transform var(--fast), box-shadow var(--fast), filter var(--fast);
}
.btn-phone:hover { transform: translateY(-1px); box-shadow: 0 12px 26px var(--accent-shadow); filter: brightness(1.05); }
.btn-phone:active { transform: translateY(0); }
.btn-phone__icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: rgba(255,255,255,.18); border-radius: 10px; flex-shrink: 0; }
.btn-phone__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.btn-phone__title { font-weight: 680; font-size: 0.9rem; }
.btn-phone__sub { font-size: 0.73rem; opacity: .85; }

.sidebar-footer { padding: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.sidebar-actions { display: flex; gap: 6px; }
.sidebar-actions .btn { flex: 1; padding: 9px 6px; }
.theme-toggle {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-secondary);
  padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; font-size: 0.83rem;
  font-family: var(--font); font-weight: 640; transition: all var(--fast);
}
.theme-toggle:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }

.menu-toggle {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 300; background: var(--bg-card);
  border: 1px solid var(--border); color: var(--text-primary); width: 42px; height: 42px;
  border-radius: var(--r-md); cursor: pointer; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); transition: all var(--fast);
}
.menu-toggle:hover { background: var(--bg-hover); }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 150; backdrop-filter: blur(3px); }

/* ============================================================ MAIN */
.main-content { flex: 1; margin-left: var(--sidebar-w); height: 100vh; overflow-y: auto; padding: 30px 36px 60px; transition: margin-left var(--normal); }
.page-header { margin-bottom: 26px; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.page-header h1, .page-header h2 { display: flex; align-items: center; gap: 11px; }
.page-header h1 svg, .page-header h2 svg { color: var(--accent); }
.page-subtitle { color: var(--text-secondary); font-size: 0.9rem; margin-top: 5px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: auto; }
.table-wrapper { width: 100%; overflow-x: visible; }

/* ============================================================ BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 17px;
  border-radius: var(--r-sm); font-family: var(--font); font-size: 0.88rem; font-weight: 640;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary);
  cursor: pointer; transition: all var(--fast); white-space: nowrap; line-height: 1.1;
}
.btn svg { flex-shrink: 0; width: 16px; height: 16px; }
.btn:hover { background: var(--bg-hover); border-color: var(--border-light); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-contrast); box-shadow: 0 4px 14px var(--accent-shadow); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); filter: brightness(1.05); box-shadow: 0 8px 20px var(--accent-shadow); }
.btn-success { background: var(--green); border-color: var(--green); color: #04230f; box-shadow: 0 4px 14px rgba(45,212,127,.25); }
.btn-success:hover { filter: brightness(1.06); }
.btn-danger { background: var(--red-bg); border-color: transparent; color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-sm { padding: 7px 12px; font-size: 0.82rem; }
.btn-lg { padding: 14px 24px; font-size: 0.96rem; }
.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--r-sm); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-block { width: 100%; }

/* ============================================================ CARDS */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); transition: box-shadow var(--normal), border-color var(--normal); }
.card:hover { box-shadow: var(--shadow-sm); }
.card-header { padding: 18px 22px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
.card-header h3 { font-size: 0.98rem; color: var(--text-primary); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-header h3 svg { color: var(--accent); width: 18px; height: 18px; }
.card-link { font-size: 0.82rem; font-weight: 640; white-space: nowrap; }
.card-body { padding: 18px 22px; }

/* ============================================================ STAT CARDS */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(218px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; display: flex; align-items: center; gap: 15px; box-shadow: var(--shadow-xs); transition: transform var(--normal), box-shadow var(--normal); position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card--primary::before { background: linear-gradient(180deg, var(--accent-light), var(--accent-strong)); }
.stat-card--success::before { background: var(--green); }
.stat-card--info::before { background: var(--teal); }
.stat-card--danger::before { background: var(--red); }
.stat-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); flex-shrink: 0; }
.stat-icon svg { width: 24px; height: 24px; }
.stat-card--primary .stat-icon { background: var(--accent-bg); color: var(--accent); }
.stat-card--success .stat-icon { background: var(--green-bg); color: var(--green); }
.stat-card--info .stat-icon { background: rgba(45,212,191,0.14); color: var(--teal); }
.stat-card--danger .stat-icon { background: var(--red-bg); color: var(--red); }
.stat-info { display: flex; flex-direction: column; min-width: 0; }
.stat-value { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.stat-label { font-size: 0.73rem; color: var(--text-muted); font-weight: 640; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }

/* ============================================================ DASHBOARD GRID */
.dashboard-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 24px; }
.cal-layout { grid-template-columns: 1.55fr 1fr; align-items: start; }

.stats-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.summary-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; box-shadow: var(--shadow-xs); }
.summary-label { font-size: 0.73rem; color: var(--text-muted); font-weight: 640; text-transform: uppercase; letter-spacing: 0.04em; }
.summary-value { font-size: 1.24rem; font-weight: 780; letter-spacing: -0.02em; }
.summary-value--success { color: var(--green); }

/* ===== Stats v2: tendências, projeção, métodos ===== */
.trends-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.trend-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-xs); }
.trend-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.trend-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 700; }
.trend-value { font-size: 1.7rem; font-weight: 850; letter-spacing: -0.02em; }
.trend-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.trend-foot { font-size: 0.8rem; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text-secondary); }
.dlt { display: inline-flex; align-items: center; gap: 3px; font-size: 0.78rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.dlt-up { color: #0f9b54; background: rgba(45,212,127,0.15); }
.dlt-down { color: #d23b3b; background: rgba(255,93,108,0.15); }

.proj-banner { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding: 16px 20px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--bg-card)), var(--bg-card)); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.proj-ico { font-size: 2rem; flex-shrink: 0; }
.proj-cap { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; }
.proj-main { font-size: 1.1rem; font-weight: 650; margin-top: 2px; }
.proj-main strong { color: var(--accent); font-weight: 850; }
.proj-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }

.mth-row { margin-bottom: 14px; }
.mth-row:last-child { margin-bottom: 0; }
.mth-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.92rem; font-weight: 600; margin-bottom: 5px; }
.mth-bar { height: 12px; border-radius: 999px; background: var(--bg-input); overflow: hidden; }
.mth-bar span { display: block; height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.mth-sub { font-size: 0.76rem; color: var(--text-muted); margin-top: 4px; }

/* ============================================================ CALENDÁRIO */
.cal-card { display: flex; flex-direction: column; }
.cal-head { border-bottom: 1px solid var(--border); }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav .btn-icon { width: 32px; height: 32px; }
.cal-month { font-size: 0.9rem; font-weight: 680; text-transform: capitalize; min-width: 120px; text-align: center; }
.cal-body { padding: 16px 18px 18px; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.cal-weekdays span { text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell {
  aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-input);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px;
  padding: 5px 2px; cursor: pointer; font-family: var(--font); transition: transform var(--fast), border-color var(--fast); position: relative; overflow: hidden;
}
.cal-cell--empty { background: transparent; border-color: transparent; cursor: default; pointer-events: none; }
.cal-cell .cal-day { font-size: 0.78rem; font-weight: 640; color: var(--text-secondary); }
.cal-cell.has-sales { background: rgba(77,141,247, calc(0.10 + var(--i) * 0.32)); border-color: var(--accent-bg-strong); }
.cal-cell.has-sales .cal-day { color: var(--text-primary); font-weight: 720; }
.cal-cell .cal-amt { font-size: 0.62rem; font-weight: 740; color: var(--accent); line-height: 1.1; }
.cal-cell .cal-cnt { font-size: 0.56rem; color: var(--text-muted); }
.cal-cell:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-sm); z-index: 1; }
.cal-cell.is-today { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg-strong); }
.cal-cell.is-today .cal-day { color: var(--accent); }
.cal-hint { margin-top: 12px; font-size: 0.78rem; color: var(--text-muted); text-align: center; }

/* Resumo do mês */
.msum { display: flex; flex-direction: column; }
.msum-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 0.9rem; color: var(--text-secondary); }
.msum-row:last-child { border-bottom: none; }
.msum-row strong { color: var(--text-primary); font-weight: 720; font-size: 0.95rem; }
.msum-bar { margin: 14px 0 6px; }
.day-sec-title { font-size: 0.74rem; font-weight: 740; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 9px; }
.paybar { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--bg-input); }
.paybar .seg { display: block; height: 100%; }
.seg--paid { background: var(--green); }
.seg--partial { background: var(--amber); }
.seg--unpaid { background: var(--red); }
.paybar-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 0.78rem; color: var(--text-secondary); }
.paybar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.paybar-legend .dot { width: 9px; height: 9px; border-radius: 50%; }
.dot--paid { background: var(--green); } .dot--partial { background: var(--amber); } .dot--unpaid { background: var(--red); }
.msum-top { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.msum-cust { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 0.9rem; }
.msum-cust strong { font-weight: 700; }

/* Sub-texto e variantes das métricas */
.summary-sub { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.summary-value--danger { color: var(--red); }

/* Gráfico de barras — últimos 7 dias */
.wk-totals { display: flex; gap: 14px; font-size: 0.82rem; color: var(--text-secondary); }
.wk-totals strong { color: var(--text-primary); font-weight: 760; }
.wk-totals .text-success strong { color: var(--green); }
.wk-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 180px; padding: 8px 0 0; }
.wk-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; min-width: 0; }
.wk-bar-wrap { position: relative; width: 100%; max-width: 38px; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.wk-bar { position: relative; width: 100%; max-width: 34px; background: linear-gradient(180deg, var(--accent-light), var(--accent-strong)); border-radius: 8px 8px 4px 4px; min-height: 0; transition: height var(--slow); overflow: hidden; box-shadow: var(--shadow-xs); }
.wk-bar-profit { position: absolute; bottom: 0; left: 0; right: 0; background: var(--green); border-radius: 0 0 4px 4px; }
.wk-bar-val { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; font-weight: 740; color: var(--text-secondary); white-space: nowrap; }
.wk-day { font-size: 0.72rem; font-weight: 640; color: var(--text-muted); text-transform: capitalize; }
.wk-col.is-today .wk-day { color: var(--accent); font-weight: 800; }
.wk-col.is-today .wk-bar { box-shadow: 0 0 0 2px var(--accent), var(--shadow-sm); }
.wk-legend { display: flex; gap: 18px; margin-top: 16px; justify-content: center; font-size: 0.78rem; color: var(--text-secondary); }
.wk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wk-legend .dot { width: 10px; height: 10px; border-radius: 50%; }

/* Anel de pagamentos (donut) */
.donut-body { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut-svg { width: 140px; height: 140px; flex-shrink: 0; }
.donut-num { font-size: 1.5rem; font-weight: 850; fill: var(--text-primary); }
.donut-lbl { font-size: 0.62rem; font-weight: 640; fill: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.donut-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 4px; }
.dl-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 0.9rem; color: var(--text-secondary); }
.dl-row:last-child { border-bottom: none; }
.dl-row .dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.dl-row span { flex: 1; }
.dl-row strong { color: var(--text-primary); font-weight: 740; }

/* Detalhe do dia (modal) */
.day-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.day-top { display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--amber, #f5b53d) 14%, transparent); border: 1px solid color-mix(in srgb, var(--amber, #f5b53d) 40%, transparent); color: var(--text-primary); padding: 9px 14px; border-radius: var(--r-md); font-size: 0.88rem; margin-bottom: 14px; }
/* Lista dia-a-dia do mês */
.dayrows { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.dayrow { display: grid; grid-template-columns: 30px 38px 1fr auto 42px; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; border-radius: 8px; padding: 9px 8px; cursor: pointer; font-family: var(--font); text-align: left;
  color: var(--text-secondary); transition: background 0.12s; border-bottom: 1px solid var(--border); }
.dayrow:last-child { border-bottom: none; }
.dayrow:hover { background: var(--bg-card-hover, var(--bg-surface)); }
.dayrow-num { font-weight: 800; font-size: 0.95rem; color: var(--text-primary); text-align: center; }
.dayrow-wd { font-size: 0.74rem; color: var(--text-muted); text-transform: capitalize; }
.dayrow-bar { height: 8px; border-radius: 999px; background: var(--bg-input); overflow: hidden; }
.dayrow-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #2dd47f)); }
.dayrow-rev { font-weight: 800; font-size: 0.95rem; white-space: nowrap; }
.dayrow.has .dayrow-rev { color: var(--text-primary); }
.dayrow-cnt { font-size: 0.76rem; color: var(--text-muted); text-align: right; }
.dayrow.is-today { background: var(--accent-bg); }
.dayrow.is-today .dayrow-num { color: var(--accent); }
.dayrow:not(.has) { opacity: 0.62; cursor: default; }
.dayrow:not(.has):hover { background: none; }
.day-metric { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.day-metric span { font-size: 1.1rem; font-weight: 780; letter-spacing: -0.02em; }
.day-metric label { font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 640; }
.day-owed { display: flex; align-items: center; gap: 8px; background: var(--red-bg); color: var(--red); padding: 10px 14px; border-radius: var(--r-md); font-size: 0.88rem; margin-bottom: 16px; }
.day-owed svg { width: 18px; height: 18px; flex-shrink: 0; }
.day-section { margin-top: 14px; }
.day-prod { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.day-prod:last-child { border-bottom: none; }
.day-prod strong { font-weight: 700; min-width: 56px; text-align: right; }
.day-sale { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 10px; }
.day-sale-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.day-sale-cust { font-weight: 700; flex: 1; }
.day-sale-time { font-size: 0.78rem; color: var(--text-muted); }
.day-sale-items { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 8px; }
.day-sale-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.84rem; }

/* ============================================================ LISTAS */
.top-list, .recent-list, .debt-list { display: flex; flex-direction: column; }
.top-item, .recent-item, .debt-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.top-item:last-child, .recent-item:last-child, .debt-item:last-child { border-bottom: none; }
.top-rank { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--accent-bg); color: var(--accent); font-size: 0.78rem; font-weight: 760; flex-shrink: 0; }
.top-info, .recent-info, .debt-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top-name, .recent-customer, .debt-name { font-weight: 620; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-meta, .recent-date, .debt-phone { font-size: 0.78rem; color: var(--text-muted); }
.top-value, .recent-amount { font-weight: 680; font-size: 0.9rem; white-space: nowrap; }
.debt-amount { font-weight: 760; color: var(--red); font-size: 0.9rem; white-space: nowrap; }

/* ============================================================ EMPTY */
.empty-state { text-align: center; padding: 44px 20px; color: var(--text-muted); font-size: 0.95rem; }
.empty-state--success { color: var(--green); }
.empty-icon { display: flex; justify-content: center; margin-bottom: 14px; opacity: 0.4; }
.empty-icon svg { width: 46px; height: 46px; stroke-width: 1.5; }
.empty-text { margin-top: 6px; font-size: 0.85rem; }

/* ============================================================ FORMS */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.78rem; font-weight: 680; color: var(--text-secondary); margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.04em; }
.form-control { width: 100%; padding: 11px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); font-family: var(--font); font-size: 0.92rem; transition: border-color var(--fast), box-shadow var(--fast); outline: none; }
.form-control:focus { border-color: var(--accent); box-shadow: var(--ring); }
.form-control::placeholder { color: var(--text-muted); }
.form-control.is-disabled, .form-control:disabled { opacity: 0.45; cursor: not-allowed; }
select.form-control { cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b97ad' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
textarea.form-control { resize: vertical; min-height: 84px; line-height: 1.5; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 5px; }

.check-row { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 0.88rem; color: var(--text-secondary); text-transform: none; letter-spacing: 0; font-weight: 500; padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm); }
.check-row input { width: 18px; height: 18px; flex-shrink: 0; }

/* Seletor de cor */
.color-picker { display: flex; flex-wrap: wrap; gap: 9px; }
.color-swatch { width: 28px; height: 28px; border-radius: 50%; background: var(--sw); cursor: pointer; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border) inset; transition: transform var(--fast); padding: 0; }
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.selected { border-color: var(--text-primary); box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px var(--sw); }

/* Seletor de ícone */
.icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; max-height: 220px; overflow-y: auto; padding: 4px; }
.icon-swatch { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-input); color: var(--text-secondary); cursor: pointer; transition: all var(--fast); }
.icon-swatch svg { width: 22px; height: 22px; }
.icon-swatch:hover { border-color: var(--accent); color: var(--text-primary); transform: translateY(-1px); }
.icon-swatch.selected { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

/* ============================================================ BADGES */
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); font-size: 0.7rem; font-weight: 720; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.badge--paid { background: var(--green-bg); color: var(--green); }
.badge--partial { background: var(--amber-bg); color: var(--amber); }
.badge--unpaid { background: var(--red-bg); color: var(--red); }
.badge--info { background: var(--accent-bg); color: var(--accent); }
.badge--accent { background: var(--accent-bg); color: var(--accent); }

/* Stock pill */
.stock-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; font-weight: 640; padding: 3px 9px; border-radius: var(--r-pill); background: var(--bg-hover); color: var(--text-secondary); }
.stock-pill svg { width: 13px; height: 13px; }
.stock-pill--low { background: var(--amber-bg); color: var(--amber); }
.stock-pill--out { background: var(--red-bg); color: var(--red); }
.stock-pill--inf { background: var(--accent-bg); color: var(--accent); }

/* ============================================================ TABLE */
.table-wrapper { overflow-x: visible; }
.table { width: 100%; border-collapse: collapse; font-size: 0.88rem; table-layout: auto; }
.table th { text-align: left; padding: 12px 14px; font-size: 0.72rem; font-weight: 720; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg-surface); }
.table td { padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr { transition: background var(--fast); }
.table tbody tr:hover { background: var(--bg-hover); }
.table tbody tr:last-child td { border-bottom: none; }
.table-actions { display: flex; gap: 2px; }
.table-actions .btn-sm { padding: 6px 8px; }
.col-check { width: 44px; text-align: center; padding-left: 16px; padding-right: 6px; }
.col-check input[type="checkbox"] { width: 18px; height: 18px; vertical-align: middle; }
.table--selectable tbody tr:has(.sale-check:checked) { background: var(--accent-bg); }

.bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 16px; margin-bottom: 14px; background: var(--accent-bg); border: 1px solid var(--accent); border-radius: var(--r-md); box-shadow: var(--shadow-xs); animation: fadeIn .2s ease both; }
.bulk-bar[hidden] { display: none; }
.bulk-bar__count { font-size: 0.9rem; color: var(--text-primary); }
.bulk-bar__count strong { color: var(--accent); }
.bulk-bar__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================ SEARCH / FILTER */
.search-bar { position: relative; display: flex; align-items: center; max-width: 340px; flex: 1; }
.search-bar > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; width: 16px; height: 16px; }
.search-bar input { width: 100%; padding: 11px 14px 11px 40px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); font-family: var(--font); font-size: 0.92rem; outline: none; transition: border-color var(--fast), box-shadow var(--fast); }
.search-bar input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.filter-bar .search-bar { flex: 1; min-width: 220px; }
.filter-bar select, .filter-bar input[type="date"],
.hist-avancado select, .hist-avancado input[type="date"] { padding: 11px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); font-family: var(--font); font-size: 0.86rem; outline: none; transition: border-color var(--fast), box-shadow var(--fast); }
.filter-bar select, .hist-avancado select { cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b97ad' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.filter-bar select:focus, .filter-bar input[type="date"]:focus,
.hist-avancado select:focus, .hist-avancado input[type="date"]:focus { border-color: var(--accent); box-shadow: var(--ring); }

/* ============================================================ MODAL */
.modal-overlay { position: fixed; inset: 0; background: rgba(4,8,16,0.66); backdrop-filter: blur(7px); z-index: 500; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--normal), visibility var(--normal); padding: 20px; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); transform: translateY(18px) scale(0.97); transition: transform var(--normal); }
.modal-overlay.active .modal { transform: translateY(0) scale(1); }
.modal-header { padding: 20px 24px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
.modal-title { font-size: 1.12rem; font-weight: 780; display: flex; align-items: center; gap: 8px; }
.modal-close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: transparent; border: none; color: var(--text-muted); cursor: pointer; transition: all var(--fast); }
.modal-close svg { width: 20px; height: 20px; }
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-body { padding: 20px 24px 24px; }

/* Phone link / QR */
.phone-link-hint { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 16px; line-height: 1.5; }
.qr-box { background: #fff; padding: 16px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; width: max-content; max-width: 100%; box-shadow: var(--shadow-sm); }
.qr-box svg { width: 200px; height: 200px; max-width: 58vw; display: block; }
.link-label { font-size: 0.74rem; font-weight: 720; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.link-label svg { width: 14px; height: 14px; }
.link-row { display: flex; gap: 8px; align-items: center; }
.link-row .form-control { font-size: 0.85rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.link-row .btn { flex-shrink: 0; }

/* Settings */
.settings-sec { padding: 4px 0 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.settings-sec:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.settings-sec-title { font-weight: 720; font-size: 0.96rem; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.settings-sec-title svg { width: 18px; height: 18px; color: var(--accent); }

/* ============================================================ LOGIN GATE */
.login-gate { display: none; position: fixed; inset: 0; z-index: 900; background: var(--bg-body); align-items: center; justify-content: center; padding: 24px; }
.login-gate.active { display: flex; }
.login-card { width: 100%; max-width: 360px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 30px 26px; box-shadow: var(--shadow-lg); text-align: center; }
.login-logo { display: inline-flex; align-items: center; gap: 11px; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.login-logo svg { width: 44px; height: 44px; padding: 8px; background: var(--accent-grad); color: var(--accent-contrast); border-radius: 12px; box-shadow: 0 8px 18px var(--accent-shadow); }
.login-sub { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 22px; }
.login-card .form-control { text-align: center; font-size: 1rem; margin-bottom: 14px; }
.login-err { color: var(--red); font-size: 0.85rem; margin-bottom: 12px; }

/* ============================================================ TOAST */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 11px; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); font-size: 0.88rem; font-weight: 560; pointer-events: auto; transform: translateX(120%); transition: transform var(--normal); max-width: 360px; }
.toast.show { transform: translateX(0); }
.toast-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toast-icon svg { width: 20px; height: 20px; }
.toast-message { flex: 1; }
.toast-success { border-left: 3px solid var(--green); } .toast-success .toast-icon { color: var(--green); }
.toast-error { border-left: 3px solid var(--red); } .toast-error .toast-icon { color: var(--red); }
.toast-info { border-left: 3px solid var(--accent); } .toast-info .toast-icon { color: var(--accent); }
.toast-warning { border-left: 3px solid var(--amber); } .toast-warning .toast-icon { color: var(--amber); }

/* ============================================================ POS */
.pos-layout { display: block; padding-bottom: 24px; }
.pos-search { margin-bottom: 12px; }
.pos-search .search-bar { max-width: 100%; }
.pos-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 6px; scrollbar-width: none; }
.pos-chips::-webkit-scrollbar { display: none; }
.pos-chip { flex-shrink: 0; padding: 8px 15px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-family: var(--font); font-size: 0.84rem; font-weight: 640; cursor: pointer; transition: all var(--fast); }
.pos-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.pos-chip.active { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-contrast); box-shadow: 0 4px 12px var(--accent-shadow); }

.pos-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pos-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; cursor: pointer; font-family: var(--font); transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast), background var(--fast); }
.pos-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.pos-card:active { transform: translateY(-1px) scale(0.99); }
.pos-card.in-cart { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 0 1px var(--accent) inset; }
.pos-card-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-md); flex-shrink: 0; }
.pos-card-icon svg { width: 24px; height: 24px; }
.pos-card-name { font-weight: 680; font-size: 0.9rem; line-height: 1.25; color: var(--text-primary); width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; }
.pos-card-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 6px; margin-top: auto; }
.pos-card-price { color: var(--accent); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.02em; }
.pos-card-stock { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; display: inline-flex; align-items: center; }
.pos-card-stock svg { width: 15px; height: 15px; }
.pos-card-stock.out { color: var(--red); }
.pos-card-stock.inf { color: var(--accent); }
.pos-card-qty { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; display: flex; align-items: center; justify-content: center; background: var(--accent-strong); color: var(--accent-contrast); font-size: 0.74rem; font-weight: 760; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }

.cart { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); display: flex; flex-direction: column; position: fixed; bottom: 24px; left: calc(var(--sidebar-w) + 24px); width: 360px; max-width: calc(100vw - var(--sidebar-w) - 48px); max-height: 60vh; box-shadow: var(--shadow-lg); z-index: 100; transition: transform var(--normal), opacity var(--normal); }
.cart.minimized { transform: translateY(calc(100% - 60px)); }
.cart-grabber { display: none; }
.cart-toggle-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; transition: transform var(--normal), background var(--fast); }
.cart-toggle-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.cart.minimized .cart-toggle-btn { transform: rotate(180deg); }
.cart-header { padding: 16px 20px 14px; border-bottom: 1px solid var(--border); font-weight: 780; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.cart-header-ico { display: inline-flex; color: var(--accent); }
.cart-header-ico svg { width: 19px; height: 19px; }
.cart-count { background: var(--accent-strong); color: var(--accent-contrast); font-size: 0.72rem; padding: 3px 9px; border-radius: var(--r-pill); font-weight: 760; }
.cart-items { flex: 1; overflow-y: auto; padding: 10px 20px; min-height: 80px; }
.cart-item { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.cart-item:last-child { border-bottom: none; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 620; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-price { font-size: 0.78rem; color: var(--text-muted); }
.cart-item-qty { display: flex; align-items: center; gap: 5px; }
.cart-item-qty button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-primary); cursor: pointer; font-size: 0.9rem; font-weight: 760; transition: all var(--fast); }
.cart-item-qty button:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.cart-item-qty span { font-weight: 680; min-width: 22px; text-align: center; font-size: 0.88rem; }
.cart-item-total { font-weight: 680; font-size: 0.88rem; min-width: 62px; text-align: right; }
.cart-item-remove { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 5px; display: flex; transition: color var(--fast); }
.cart-item-remove:hover { color: var(--red); }
.cart-footer { border-top: 1px solid var(--border); padding: 16px 20px; }
.cart-total { display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 780; margin-bottom: 14px; }
.cart-total-value { color: var(--accent); font-size: 1.4rem; letter-spacing: -0.02em; }
.cart-empty { text-align: center; padding: 34px 16px; color: var(--text-muted); font-size: 0.88rem; }

/* Botão de item avulso (POS) */
.pos-search { display: flex; gap: 8px; align-items: stretch; }
.pos-search .search-bar { flex: 1; }
.pos-add-custom { flex-shrink: 0; white-space: nowrap; gap: 6px; }
.pos-add-custom svg { width: 16px; height: 16px; }

/* Botão Gamble It no resumo da venda */
.gamble-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--amber); color: var(--amber); background: var(--amber-bg); font-weight: 680; transition: all var(--fast); }
.gamble-btn:hover { background: var(--amber); color: #2a1d00; }
.gamble-btn.is-on { background: var(--amber); color: #2a1d00; box-shadow: 0 4px 14px rgba(245,181,61,.35); }
.gamble-hint { font-size: 0.74rem; color: var(--amber); margin-top: 6px; text-align: center; line-height: 1.35; }
.gamble-hint--muted { color: var(--text-muted); }
.gamble-hint a { color: var(--red); font-weight: 700; text-decoration: underline; cursor: pointer; }

.customer-selector { margin-bottom: 16px; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-xs); }
.customer-selector-label { font-size: 0.78rem; font-weight: 680; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
.customer-selector-row { display: flex; gap: 8px; }
.customer-selector-row .btn:first-child { flex: 1; }
.customer-selector-row .btn { flex-shrink: 0; }

/* Seletor de clientes em círculos (slide horizontal) */
.customer-picker { margin-bottom: 16px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-xs); }
.cust-picker-hint { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-muted); }
.customer-circles { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.cust-slot { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; scroll-snap-align: start; }
.cust-slot .cust-circle { width: 76px; }
/* Mini-controlo de pagamento por baixo do círculo do cliente selecionado */
.cust-pay { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; width: 84px; }
.cust-pay-opt { padding: 5px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-secondary); font-family: var(--font); font-size: 0.7rem; font-weight: 700; cursor: pointer; transition: all var(--fast); }
.cust-pay-opt:hover { border-color: var(--accent); color: var(--text-primary); }
.cust-pay-opt.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.cust-pay-opt--mbway.active { background: rgba(45,212,127,0.16); border-color: #2dd47f; color: #12a35a; }
.cust-pay-amt { width: 84px; margin-top: 2px; padding: 6px 8px; border: 1px solid var(--accent); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); font-family: var(--font); font-size: 0.78rem; outline: none; }
.payment-section--note { background: var(--bg-elevated, var(--bg-input)); border: 1px dashed var(--border-light); border-radius: var(--r-sm); padding: 10px 12px; }
.customer-circles::-webkit-scrollbar { height: 6px; }
.customer-circles::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 99px; }
.cust-circle { flex: 0 0 auto; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: var(--font); padding: 2px; scroll-snap-align: start; }
.cust-circle-av { position: relative; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; color: #fff; background: var(--accent-grad); border: 3px solid transparent; transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast); }
.cust-circle:hover .cust-circle-av { transform: translateY(-2px) scale(1.04); }
.cust-circle-av.cust-anon { background: var(--bg-hover); color: var(--text-secondary); }
.cust-circle-av.cust-anon svg { width: 24px; height: 24px; }
.cust-circle-av.cust-add { background: var(--accent-bg); color: var(--accent); border: 2px dashed var(--accent); }
.cust-circle-av.cust-add svg { width: 22px; height: 22px; }
.cust-circle-name { font-size: 0.72rem; font-weight: 640; color: var(--text-muted); max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-circle.active .cust-circle-av { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg-strong), var(--shadow-sm); transform: translateY(-2px) scale(1.05); }
.cust-circle.active .cust-circle-name { color: var(--accent); font-weight: 760; }
.cust-circle.active .cust-circle-av::after { content: '✓'; position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-card); }

.payment-section { margin-top: 12px; }
.payment-section label { display: block; font-size: 0.78rem; font-weight: 680; color: var(--text-muted); margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.03em; }
.payment-options { display: flex; gap: 6px; margin-bottom: 10px; }
.payment-option { flex: 1; padding: 10px 4px; text-align: center; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-input); color: var(--text-secondary); font-size: 0.78rem; font-weight: 680; cursor: pointer; transition: all var(--fast); font-family: var(--font); }
.payment-option:hover { border-color: var(--accent); color: var(--text-primary); }
.payment-option.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.payment-option--mbway.active { background: rgba(45,212,127,0.14); border-color: #2dd47f; color: #12a35a; }
.payment-options { flex-wrap: wrap; }

/* Modal de pagamento MB WAY com QR */
.mbq { text-align: center; }
.mbq-amount { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 12px; }
.mbq-amount span { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.mbq-amount b { font-size: 2rem; font-weight: 900; color: var(--text-primary); }
.mbq-who { text-align: center; font-weight: 800; font-size: 1rem; color: var(--accent); margin-bottom: 8px; }
/* Secção "Pedir ao cliente" (tu envias um pedido pelo MB WAY) */
.mbq-req { background: rgba(45,212,127,0.10); border: 1px solid rgba(45,212,127,0.4); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.mbq-req-cap { font-weight: 800; font-size: 0.9rem; color: #12a35a; margin-bottom: 8px; }
.mbq-req-num { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.mbq-req-num b { font-size: 1.5rem; font-weight: 900; letter-spacing: 0.02em; color: var(--text-primary); }
.mbq-copy { background: #1b2433; color: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.mbq-copy.copied { background: #0e2a1c; color: #2dd47f; border-color: #1d5b3c; }
[data-theme="light"] .mbq-copy { background: var(--bg-input); color: var(--text-primary); }
.mbq-req-steps { font-size: 0.82rem; color: var(--text-secondary); margin: 8px 0 0; line-height: 1.5; }
.mbq-or { text-align: center; font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 10px 0; }
.mbq-number { text-align: center; font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 12px; }
.mbq-number b { font-size: 1.25rem; font-weight: 900; color: var(--text-primary); letter-spacing: 0.02em; }
.mbq-qr { width: 232px; max-width: 72vw; margin: 0 auto; background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.mbq-qr svg { display: block; width: 100%; height: auto; }
.mbq-tip { font-size: 0.84rem; color: var(--text-secondary); margin: 14px 6px 8px; line-height: 1.5; }
.mbq-link { margin: 4px 0 12px; }
.mbq-link a { font-size: 0.78rem; color: var(--accent); word-break: break-all; }
.mbq-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; color: var(--text-secondary);
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; margin-bottom: 14px; }
.mbq-status .mbq-dot { width: 9px; height: 9px; border-radius: 50%; background: #f5b53d; animation: mbqPulse 1.1s ease-in-out infinite; }
.mbq-status.is-paid { color: #052b16; background: linear-gradient(135deg, #2dd47f, #12a35a); border-color: transparent; }
.mbq-status.is-claimed { color: #5a3c00; background: rgba(245,181,61,0.18); border-color: rgba(245,181,61,0.5); }
.mbq-status.is-claimed .mbq-dot { background: #2dd47f; animation: none; }
@keyframes mbqPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .mbq-status .mbq-dot { animation: none; } }
.payment-amount-row { display: flex; gap: 8px; align-items: center; }
.payment-amount-row input { flex: 1; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); font-family: var(--font); font-size: 0.88rem; outline: none; }
.payment-amount-row input:focus { border-color: var(--accent); box-shadow: var(--ring); }

/* ============================================================ CUSTOMER PROFILE */
.customer-profile { display: flex; flex-direction: column; gap: 20px; }
.customer-profile-header { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.customer-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 780; color: var(--accent-contrast); flex-shrink: 0; }
.customer-meta { flex: 1; min-width: 0; }
.customer-meta h2 { margin-bottom: 2px; }
.customer-meta p { font-size: 0.85rem; color: var(--text-muted); }
.customer-debt-badge { padding: 10px 18px; border-radius: var(--r-md); text-align: center; }
.customer-debt-badge.has-debt { background: var(--red-bg); }
.customer-debt-badge.no-debt { background: var(--green-bg); }
.customer-debt-value { font-size: 1.2rem; font-weight: 780; display: block; }
.customer-debt-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 640; }
.customer-debt-badge.has-debt .customer-debt-value, .customer-debt-badge.has-debt .customer-debt-label { color: var(--red); }
.customer-debt-badge.no-debt .customer-debt-value, .customer-debt-badge.no-debt .customer-debt-label { color: var(--green); }

/* ============================================================ PRODUCTS */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); gap: 16px; }
.product-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-xs); transition: transform var(--normal), box-shadow var(--normal), border-color var(--normal); position: relative; overflow: hidden; }
.product-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--card-accent, var(--accent)); opacity: .9; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-light); }
.product-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 8px; }
.product-card-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-md); flex-shrink: 0; }
.product-card-icon svg { width: 21px; height: 21px; }
.product-card-name { font-weight: 700; font-size: 1rem; }
.product-card-category { font-size: 0.7rem; color: var(--text-secondary); background: var(--bg-hover); padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; font-weight: 620; }
.product-card-prices { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.product-card-selling { font-size: 1.25rem; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; }
.product-card-cost { font-size: 0.82rem; color: var(--text-muted); }
.product-card-margin { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 680; }
.margin-high { background: var(--green-bg); color: var(--green); }
.margin-medium { background: var(--amber-bg); color: var(--amber); }
.margin-low { background: var(--red-bg); color: var(--red); }
.product-card-actions { display: flex; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.product-card-actions .btn { flex: 1; }

/* ============================================================ TABS (legacy) */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab { padding: 11px 18px; font-size: 0.88rem; font-weight: 640; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; position: relative; font-family: var(--font); transition: color var(--fast); }
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--accent); font-weight: 680; }
.tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }

/* ============================================================ SALE DETAIL */
.sale-detail-items { margin: 16px 0; }
.sale-detail-item { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.sale-detail-item:last-child { border-bottom: none; }
.sale-detail-item-name { flex: 1; }
.sale-detail-item-qty { color: var(--text-muted); margin: 0 16px; white-space: nowrap; }
.sale-detail-item-total { font-weight: 680; white-space: nowrap; }
.sale-detail-summary { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; margin-top: 12px; }
.sale-detail-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.9rem; }
.sale-detail-row.total { font-weight: 780; font-size: 1rem; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }

/* ============================================================ UTILITIES */
.text-success { color: var(--green) !important; }
.text-danger { color: var(--red) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--accent) !important; }
.text-center { text-align: center; }
.fw-600 { font-weight: 660; }
.fw-700 { font-weight: 760; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.gap-8 { gap: 8px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.animate-in { animation: fadeIn 0.35s ease both; }
.animate-in-delay-1 { animation-delay: 0.05s; }
.animate-in-delay-2 { animation-delay: 0.10s; }
.animate-in-delay-3 { animation-delay: 0.15s; }
.animate-in-delay-4 { animation-delay: 0.20s; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.confirm-message { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; }

.mobile-nav { display: none; }
.show-mobile { display: none; }

/* ============================================================ RESPONSIVO */
@media (max-width: 1024px) {
  .dashboard-grid, .cal-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  body { overflow: auto; }
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
  .menu-toggle { display: flex; }
  .main-content { margin-left: 0; padding: 64px 14px 92px; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header h1 { font-size: 1.4rem; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card { padding: 15px; gap: 12px; }
  .stat-icon { width: 46px; height: 46px; }
  .stat-value { font-size: 1.25rem; }
  .form-row { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .pos-products-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .search-bar { min-width: 100%; max-width: 100%; }
  .filter-bar select, .filter-bar input[type="date"] { width: 100%; }
  .bulk-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .bulk-bar__actions .btn { flex: 1; }
  .day-metrics { grid-template-columns: 1fr 1fr; }
  .cal-cell .cal-amt { font-size: 0.55rem; }
  .cal-body { padding: 12px; }
  .modal { max-height: 92vh; }
  .toast-container { left: 12px; right: 12px; top: 12px; }
  .toast { max-width: none; }

  .mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-sidebar); border-top: 1px solid var(--border); z-index: 200; justify-content: space-around; padding: 6px 4px env(safe-area-inset-bottom, 6px); box-shadow: 0 -6px 24px rgba(0,0,0,.22); backdrop-filter: blur(8px); }
  .cart { left: 8px; right: 8px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 64vh; box-shadow: 0 -10px 40px rgba(0,0,0,.5); }
  /* Minimizado: só a pega + cabeçalho ficam visíveis, mesmo acima da nav inferior */
  .cart.minimized { transform: translateY(calc(100% - 66px)); }
  .cart-grabber { display: block; height: 20px; cursor: pointer; position: relative; flex-shrink: 0; }
  .cart-grabber::before { content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 42px; height: 5px; border-radius: 99px; background: var(--border-light); }
  .cart-header { padding-top: 6px; }
  .mobile-nav { padding: 6px 2px env(safe-area-inset-bottom, 6px); }
  .mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; min-width: 0; flex: 1; border-radius: var(--r-sm); color: var(--text-muted); font-size: 0.62rem; font-weight: 640; cursor: pointer; border: none; background: none; font-family: var(--font); transition: color var(--fast), background var(--fast); }
  .mobile-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav-item .nav-icon { width: 21px; height: 21px; transition: all var(--fast); }
  .mobile-nav-item.active { color: var(--accent); }
  .mobile-nav-item.active .nav-icon { stroke: var(--accent); }
  .mobile-nav-item:active { background: var(--bg-hover); }

  .table td, .table th { padding: 11px 7px; font-size: 0.8rem; }
  .col-check input[type="checkbox"] { width: 20px; height: 20px; }
  .table-actions { gap: 0; flex-wrap: wrap; justify-content: flex-end; }
  .table-actions .btn-sm { padding: 6px 7px; font-size: 0.75rem; }
  .table-wrapper { overflow-x: visible; margin-bottom: 12px; width: 100%; }
  .sale-row td { white-space: normal; word-break: break-word; }
  
  .hide-mobile { display: none !important; }
  .show-mobile { display: inline !important; }
  
  .filter-bar { gap: 10px; }
  .filter-bar > * { flex: 1 1 100% !important; max-width: 100% !important; }
  .page-header h2 { font-size: 1.3rem; }
  
  .products-grid, .stats-summary { grid-template-columns: 1fr; }
  .cal-cell { padding: 8px 4px; }
  .cal-day { font-size: 0.75rem; }
  .cal-amt { font-size: 0.65rem; }
  
  .pos-products-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; gap: 8px !important; }
  .pos-card { padding: 8px 6px; gap: 4px; align-items: center; text-align: center; min-height: 100px; }
  .pos-card-icon { width: 34px; height: 34px; border-radius: 10px; }
  .pos-card-icon svg { width: 18px; height: 18px; }
  .pos-card-name { font-size: 0.72rem; line-height: 1.15; min-height: 2.3em; margin-bottom: 2px; }
  .pos-card-foot { flex-direction: column; gap: 2px; width: 100%; align-items: center; }
  .pos-card-price { font-size: 0.82rem; }
  .pos-card-stock { font-size: 0.65rem; }
  .pos-card-qty { width: 20px; height: 20px; min-width: 20px; font-size: 0.7rem; top: 4px; right: 4px; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr; }
  .pos-products-grid { grid-template-columns: 1fr 1fr; }
  .main-content { padding-left: 12px; padding-right: 12px; }
  .day-metrics { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 769px) { .mobile-nav { display: none !important; } }

.nav-item, .btn, .btn-phone, .pos-card, .pos-chip, .payment-option, .tab, .mobile-nav-item, .cal-cell { user-select: none; -webkit-user-select: none; }

/* ============================================================ GAMBLE ROULETTE */
.gamble-overlay { position: fixed; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(20,30,55,0.92), rgba(4,7,15,0.96)); z-index: 2000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.gamble-overlay.active { opacity: 1; visibility: visible; }
.gamble-modal { position: relative; background: linear-gradient(160deg, var(--bg-card), var(--bg-surface)); border: 1px solid var(--border-light); border-radius: var(--r-xl); padding: 26px 28px 30px; text-align: center; width: 92%; max-width: 380px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); transform: scale(0.85) translateY(10px); transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.gamble-overlay.active .gamble-modal { transform: scale(1) translateY(0); }
.gamble-badge { display: inline-block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber); padding: 5px 14px; border-radius: var(--r-pill); margin-bottom: 10px; }
.gamble-modal h2 { font-size: 1.7rem; margin-bottom: 4px; font-weight: 850; color: var(--text-primary); letter-spacing: -0.02em; }
.gamble-sub { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 22px; font-weight: 600; }

.roulette-container { position: relative; width: 248px; height: 248px; margin: 0 auto 26px; }
.roulette-glow { position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(circle, rgba(245,181,61,0.35), transparent 65%); filter: blur(8px); animation: roulettePulse 2.4s ease-in-out infinite; }
@keyframes roulettePulse { 0%,100% { opacity: 0.45; transform: scale(0.98); } 50% { opacity: 0.85; transform: scale(1.04); } }
.roulette-wheel { position: relative; width: 100%; height: 100%; border-radius: 50%; border: 7px solid #0b1220; box-shadow: 0 0 0 6px #1a2540, 0 0 36px rgba(245,181,61,0.35), inset 0 0 30px rgba(0,0,0,0.55); transition: transform 4.1s cubic-bezier(0.12, 0.72, 0.12, 1); transform: rotate(0deg); }
.roulette-svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
.roulette-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(145deg, #2a3a5c, #131c2e); border: 3px solid #0b1220; box-shadow: 0 4px 14px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; z-index: 6; }
.roulette-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 26px; height: 34px; background: linear-gradient(180deg, #fff, var(--amber)); clip-path: polygon(50% 100%, 0 0, 100% 0); z-index: 8; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5)); }

.gamble-result { font-size: 1.35rem; font-weight: 850; min-height: 40px; color: var(--text-secondary); opacity: 0; transform: translateY(10px) scale(0.95); transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.gamble-result.show { opacity: 1; transform: translateY(0) scale(1); }
.gamble-result.win-100 { color: var(--green); text-shadow: 0 0 16px rgba(45,212,127,0.6); font-size: 1.65rem; }
.gamble-result.win-50 { color: var(--amber); text-shadow: 0 0 16px rgba(245,181,61,0.6); font-size: 1.5rem; }
.gamble-spin-btn { margin-top: 18px; font-size: 1.1rem; letter-spacing: 0.01em; animation: spinBtnPulse 1.4s ease-in-out infinite; }
.gamble-spin-btn.is-spinning { animation: none; opacity: 0.7; cursor: default; }
@keyframes spinBtnPulse { 0%,100% { transform: scale(1); box-shadow: 0 6px 20px rgba(45,212,127,0.35); } 50% { transform: scale(1.035); box-shadow: 0 10px 30px rgba(45,212,127,0.55); } }
.gamble-result.win-100, .gamble-result.win-50 { animation: winPop 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
@keyframes winPop { 0% { transform: scale(0.2); opacity: 0; } 55% { transform: scale(1.22); opacity: 1; } 75% { transform: scale(0.94); } 100% { transform: scale(1); opacity: 1; } }

/* Festa de vitória do modal */
.gamble-modal.celebrate { animation: modalShake 0.6s ease; }
@keyframes modalShake { 0%,100% { transform: scale(1) translateY(0) rotate(0); } 20% { transform: scale(1.03) rotate(-1.2deg); } 40% { transform: scale(1.02) rotate(1.2deg); } 60% { transform: scale(1.03) rotate(-0.8deg); } 80% { transform: scale(1.01) rotate(0.6deg); } }
.gamble-modal.celebrate-100 { box-shadow: 0 0 0 3px var(--green), 0 0 70px rgba(45,212,127,0.55), 0 30px 80px rgba(0,0,0,0.6); }
.gamble-modal.celebrate-50 { box-shadow: 0 0 0 3px var(--amber), 0 0 70px rgba(245,181,61,0.55), 0 30px 80px rgba(0,0,0,0.6); }
.gamble-modal.celebrate-100 .roulette-glow { background: radial-gradient(circle, rgba(45,212,127,0.6), transparent 65%); }

/* ============================================================ VICTORY FX (confetti) */
.win-fx { position: fixed; inset: 0; pointer-events: none; z-index: 2500; overflow: hidden; }
.win-flash { position: absolute; inset: 0; opacity: 0; animation: winFlash 0.9s ease-out forwards; }
.win-flash--win100 { background: radial-gradient(circle at 50% 42%, rgba(45,212,127,0.55), rgba(255,210,74,0.25) 40%, transparent 70%); }
.win-flash--win50 { background: radial-gradient(circle at 50% 42%, rgba(245,181,61,0.55), transparent 70%); }
@keyframes winFlash { 0% { opacity: 0; transform: scale(0.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }

.confetti-piece { position: fixed; top: 0; will-change: transform, opacity; opacity: 0; animation-name: confettiFall; animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); animation-fill-mode: forwards; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
@keyframes confettiFall {
  0% { opacity: 0; transform: translate3d(0, -12vh, 0) rotate(0deg); }
  8% { opacity: 1; }
  100% { opacity: 0.9; transform: translate3d(var(--drift, 0px), 112vh, 0) rotate(var(--rot, 720deg)); }
}

.win-emoji { position: fixed; bottom: -50px; will-change: transform, opacity; opacity: 0; animation-name: emojiFloat; animation-timing-function: ease-out; animation-fill-mode: forwards; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); }
@keyframes emojiFloat { 0% { opacity: 0; transform: translateY(0) scale(0.4) rotate(0); } 14% { opacity: 1; } 100% { opacity: 0; transform: translateY(-96vh) scale(1.25) rotate(22deg); } }

@media (prefers-reduced-motion: reduce) {
  .confetti-piece, .win-emoji, .win-flash, .gamble-modal.celebrate { animation: none !important; }
  .win-fx { display: none; }
}

/* ============================================================ REGAMBLE / AÇÕES DA ROLETA */
.gamble-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.gamble-regamble-btn { border: 1px solid var(--amber); color: var(--amber); background: var(--amber-bg); font-weight: 720; }
.gamble-regamble-btn:hover { background: var(--amber); color: #2a1d00; }

/* ============================================================ SUB-ABAS DAS ESTATÍSTICAS */
.dash-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.dash-tab { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-family: var(--font); font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: color var(--fast), border-color var(--fast); margin-bottom: -1px; }
.dash-tab svg { width: 18px; height: 18px; }
.dash-tab:hover { color: var(--text-primary); }
.dash-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Gamble It — gráfico de lucro da casa */
.gk-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; height: 150px; padding: 8px 0 0; }
.gk-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.gk-bar-wrap { width: 100%; max-width: 26px; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.gk-bar { width: 100%; max-width: 22px; border-radius: 6px 6px 3px 3px; min-height: 2px; transition: height var(--slow); }
.gk-bar--pos { background: linear-gradient(180deg, #56e39c, var(--green)); }
.gk-bar--neg { background: linear-gradient(180deg, #f87f80, var(--red)); }
.gk-day { font-size: 0.62rem; font-weight: 640; color: var(--text-muted); white-space: nowrap; }

/* Gamble It — histórico de apostas */
.gk-list { display: flex; flex-direction: column; }
.gk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.gk-row:last-child { border-bottom: none; }
.gk-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.gk-row-info { display: flex; flex-direction: column; min-width: 0; }
.gk-row-cust { font-weight: 640; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gk-row-date { font-size: 0.76rem; color: var(--text-muted); }
.gk-row-vals { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.gk-row-bet { color: var(--text-secondary); font-weight: 600; font-size: 0.88rem; }
.gk-row-net { font-weight: 760; font-size: 0.92rem; min-width: 62px; text-align: right; }
.gk-tag { flex-shrink: 0; width: 46px; text-align: center; padding: 5px 0; border-radius: var(--r-sm); font-size: 0.74rem; font-weight: 800; }
.gk-tag--win { background: var(--green-bg); color: var(--green); }
.gk-tag--mid { background: var(--amber-bg); color: var(--amber); }
.gk-tag--lose { background: var(--bg-hover); color: var(--text-muted); }

/* ============================================================ DEFINIÇÕES — ODDS */
.odd-input { display: flex; align-items: center; gap: 8px; }
.odd-input input { flex: 1; }
.odd-input span { font-weight: 740; color: var(--text-muted); }
.odds-bar { display: flex; height: 14px; border-radius: var(--r-pill); overflow: hidden; background: var(--bg-input); margin: 18px 0 12px; }
.odds-bar .seg { display: block; height: 100%; transition: width var(--normal); }
.odds-bar .seg--win100 { background: var(--green); }
.odds-bar .seg--win50 { background: var(--amber); }
.odds-bar .seg--lose { background: var(--border-light); }
.odds-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.84rem; color: var(--text-secondary); }
.odds-legend span { display: inline-flex; align-items: center; gap: 7px; }
.odds-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.odds-legend strong { color: var(--text-primary); }
.odds-warn { color: var(--red); font-size: 0.84rem; font-weight: 600; margin-top: 10px; }

/* ============================================================ GAMBLE — escolha de jogo */
.gamble-stage { display: flex; flex-direction: column; align-items: center; }
.game-badge { display: inline-block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber); padding: 5px 14px; border-radius: var(--r-pill); margin-bottom: 10px; }
.game-badge--bonanza { color: #ff6b9d; background: rgba(255,107,157,0.14); border-color: #ff6b9d; }
.game-title { font-size: 1.5rem; font-weight: 850; color: var(--text-primary); margin-bottom: 16px; letter-spacing: -0.02em; }
.game-choice { display: flex; gap: 12px; width: 100%; margin-bottom: 14px; }
.game-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 10px; border-radius: var(--r-lg); border: 2px solid var(--border-light); background: linear-gradient(160deg, var(--bg-card-hover), var(--bg-surface)); cursor: pointer; font-family: var(--font); transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast); }
.game-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.game-card--bonanza:hover { border-color: #ff6b9d; box-shadow: 0 12px 32px rgba(255,107,157,0.3); }
.game-card-emoji { font-size: 2.6rem; line-height: 1; }
.game-card-name { font-size: 1rem; font-weight: 850; color: var(--text-primary); letter-spacing: 0.01em; }
.game-card-desc { font-size: 0.74rem; color: var(--text-muted); font-weight: 600; }
.game-bet { font-size: 0.9rem; color: var(--text-secondary); }
.game-bet strong { color: var(--amber); }

/* ============================================================ STU BONANZA */
.bonanza-bar-wrap { width: 100%; margin: 6px 0 14px; }
.bonanza-bar { position: relative; height: 22px; border-radius: var(--r-pill); background: var(--bg-input); border: 1px solid var(--border-light); overflow: visible; box-shadow: inset 0 2px 6px rgba(0,0,0,0.4); }
.bonanza-fill { height: 100%; border-radius: var(--r-pill); width: 0; background: linear-gradient(90deg, #4d8df7, #2dd47f); transition: width 0.5s cubic-bezier(.25,.8,.3,1); box-shadow: 0 0 12px rgba(45,212,127,0.5); }
.bonanza-fill.hot { background: linear-gradient(90deg, #2dd47f, #ffd54a, #ff9f45); box-shadow: 0 0 18px rgba(245,181,61,0.7); }
.bonanza-fill.max { background: linear-gradient(90deg, #ffd54a, #2dd47f, #4d8df7, #ff6b9d, #ffd54a); background-size: 300% 100%; animation: bzRainbow 1s linear infinite; box-shadow: 0 0 26px rgba(255,213,74,0.9); }
@keyframes bzRainbow { to { background-position: 300% 0; } }
.bonanza-check { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; }
.bonanza-check span { display: flex; align-items: center; justify-content: center; min-width: 30px; height: 20px; padding: 0 4px; font-size: 0.6rem; font-weight: 800; color: var(--text-primary); background: var(--bg-card); border: 2px solid var(--amber); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }
.bonanza-bar-label { text-align: center; font-size: 0.9rem; font-weight: 850; color: var(--text-primary); margin-top: 6px; }

.bonanza-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: 100%; background: rgba(0,0,0,0.25); padding: 6px; border-radius: var(--r-md); border: 1px solid var(--border); }
.bz-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--bg-card-hover); border-radius: 9px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
.bz-sym { font-size: 1.5rem; line-height: 1; }
.bz-cell.bz-win { background: radial-gradient(circle, rgba(255,213,74,0.4), rgba(45,212,127,0.25)); box-shadow: 0 0 0 2px var(--amber), 0 0 14px rgba(255,213,74,0.7); animation: bzPop 0.42s ease; z-index: 2; }
.bz-cell.bz-win .bz-sym { animation: bzSymPop 0.42s ease; }
@keyframes bzPop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes bzSymPop { 0% { transform: scale(1) rotate(0); } 45% { transform: scale(1.4) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }

/* Partículas, ganhos flutuantes, multiplicadores, checkpoint */
.bz-particle { position: fixed; width: 9px; height: 9px; border-radius: 50%; z-index: 2600; pointer-events: none; animation: bzParticle 0.8s ease-out forwards; }
@keyframes bzParticle { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }
.bz-gain { position: fixed; z-index: 2600; transform: translate(-50%, -50%); font-size: 1.5rem; font-weight: 850; color: var(--green); text-shadow: 0 2px 8px rgba(0,0,0,0.6); pointer-events: none; animation: bzGain 1.1s ease-out forwards; }
@keyframes bzGain { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.5); } 25% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
.bz-mult { position: fixed; z-index: 2600; font-size: 1.7rem; font-weight: 900; color: #fff; background: linear-gradient(145deg, #ff6b9d, #b14dff); padding: 6px 14px; border-radius: var(--r-pill); box-shadow: 0 6px 20px rgba(177,77,255,0.6); pointer-events: none; animation: bzMult 1s cubic-bezier(.175,.885,.32,1.275) forwards; }
@keyframes bzMult { 0% { opacity: 0; transform: scale(0.2) rotate(-15deg); } 30% { opacity: 1; transform: scale(1.2) rotate(6deg); } 70% { transform: scale(1) rotate(0); } 100% { opacity: 0; transform: scale(1.1) translateY(-30px); } }
.bz-checkpoint { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 2600; font-size: 1.5rem; font-weight: 900; letter-spacing: 0.04em; color: #2a1d00; background: linear-gradient(145deg, #ffd54a, #ffb300); padding: 12px 22px; border-radius: var(--r-pill); box-shadow: 0 10px 40px rgba(255,179,0,0.7); pointer-events: none; white-space: nowrap; animation: bzCheck 1.4s ease forwards; }
@keyframes bzCheck { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 35% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -120%) scale(1); } }

.gamble-modal.shake { animation: modalShakeHard 0.4s ease; }
@keyframes modalShakeHard { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-0.6deg); } 40% { transform: translateX(6px) rotate(0.6deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

@media (prefers-reduced-motion: reduce) {
  .bz-particle, .bz-gain, .bz-mult, .bz-checkpoint, .bonanza-fill.max { animation: none !important; }
}

/* ============================================================ CASINO PRO — polish dos jogos */
/* Fundo de casino */
.gamble-overlay { background: radial-gradient(ellipse at 50% 26%, rgba(28,54,42,0.55), rgba(5,8,14,0.97) 68%); }
/* Moldura premium do modal (veludo + ouro) */
.gamble-modal { background: linear-gradient(165deg, #16203358, #0b1220), linear-gradient(160deg, #15203a, #0a0f1b); border: 1px solid rgba(202,162,74,0.35); box-shadow: 0 0 0 2px rgba(202,162,74,0.55), 0 0 0 7px rgba(14,11,6,0.92), 0 34px 90px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.06); }
.game-title { background: linear-gradient(180deg, #ffffff, #ffe6a3); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }

/* Queda satisfatória das peças (gravidade + ressalto) */
.bz-cell.bz-drop { animation: bzDrop 0.5s cubic-bezier(0.22,0.7,0.3,1) both; }
@keyframes bzDrop {
  0% { transform: translateY(calc(var(--drop, 3) * -120%)); opacity: 0; }
  30% { opacity: 1; }
  68% { transform: translateY(8%); }
  84% { transform: translateY(-4%); }
  93% { transform: translateY(2%); }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---- STU ROULLETE: bisel dourado, lâmpadas e centro de ouro ---- */
.roulette-container::before { content: ''; position: absolute; inset: -15px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #ffe6a3 0 3deg, transparent 3deg 16deg); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 9px), #000 calc(50% - 9px)); mask: radial-gradient(circle, transparent 0 calc(50% - 9px), #000 calc(50% - 9px)); opacity: 0.55; animation: bulbsSpin 7s linear infinite; z-index: 0; }
@keyframes bulbsSpin { to { transform: rotate(360deg); } }
.roulette-wheel { border: none; box-shadow: 0 0 0 4px #14100a, 0 0 0 7px #f3d168, 0 0 0 11px #8a6a26, 0 0 0 14px #14100a, 0 0 34px rgba(243,209,104,0.45), inset 0 0 34px rgba(0,0,0,0.6); }
.roulette-hub { background: radial-gradient(circle at 35% 28%, #ffe9a8, #c9912f 58%, #6e4a12); border: 3px solid #3c2a0c; box-shadow: 0 0 0 2px #f3d168, 0 5px 16px rgba(0,0,0,0.6); }
.roulette-pointer { background: linear-gradient(180deg, #fff6dc, #f3d168 55%, #c9912f); filter: drop-shadow(0 3px 5px rgba(0,0,0,0.6)); }

/* ---- STU BONANZA: máquina com moldura de ouro e marquee de luzes ---- */
.bonanza-machine { position: relative; width: 100%; padding: 9px; border-radius: var(--r-lg); background: linear-gradient(160deg, #2a1e0a, #14100a); box-shadow: 0 0 0 2px #f3d168, 0 0 22px rgba(243,209,104,0.25), inset 0 2px 12px rgba(0,0,0,0.6); }
.bonanza-machine::before, .bonanza-machine::after { content: ''; position: absolute; left: 9px; right: 9px; height: 5px; border-radius: 99px; background: repeating-linear-gradient(90deg, #ffe9a8 0 5px, rgba(110,74,18,0.5) 5px 13px); animation: marquee 0.9s linear infinite; }
.bonanza-machine::before { top: -2px; }
.bonanza-machine::after { bottom: -2px; }
@keyframes marquee { to { background-position: 13px 0; } }
.bonanza-grid { background: radial-gradient(ellipse at 50% 30%, #0e1626, #060a12); border: 1px solid rgba(0,0,0,0.6); box-shadow: inset 0 4px 14px rgba(0,0,0,0.7); }
.bz-cell { background: linear-gradient(160deg, #1d2942, #121a2c); box-shadow: inset 0 1px 2px rgba(255,255,255,0.07), inset 0 -3px 6px rgba(0,0,0,0.4); }
.bonanza-bar { box-shadow: inset 0 2px 6px rgba(0,0,0,0.55), 0 0 0 2px rgba(243,209,104,0.55), 0 0 14px rgba(243,209,104,0.2); }
.bonanza-check span { border-color: #f3d168; }

/* Botões de jogar com brilho dourado por baixo do verde */
.gamble-spin-btn { box-shadow: 0 6px 22px rgba(45,212,127,0.4), 0 0 0 1px rgba(243,209,104,0.4); }

/* ============================================================ BONANZA — contador animado + ganho */
.bonanza-bar-label { font-size: 1.2rem; font-weight: 900; letter-spacing: 0.01em; text-shadow: 0 2px 8px rgba(0,0,0,0.55); transition: color 0.2s; }
.bonanza-bar-label.bump { animation: bzCount 0.55s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes bzCount {
  0% { transform: scale(1); }
  30% { transform: scale(1.55); color: #ffd54a; text-shadow: 0 0 20px rgba(255,213,74,0.95), 0 2px 8px rgba(0,0,0,0.55); }
  60% { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.bz-gain { font-size: 1.75rem; font-weight: 900; background: linear-gradient(180deg, #ffffff, #ffd54a); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.5px rgba(120,70,0,0.35); filter: drop-shadow(0 3px 10px rgba(0,0,0,0.7)); white-space: nowrap; }

/* ============================================================ FUNDOS TEMÁTICOS DOS JOGOS */
/* STU BONANZA — estúdio de gravação cheio de dinheiro */
.gamble-modal.theme-bonanza {
  background:
    radial-gradient(circle at 50% -5%, rgba(255,107,208,0.22), transparent 55%),
    radial-gradient(circle at 88% 92%, rgba(150,77,255,0.18), transparent 50%),
    linear-gradient(165deg, #2a1742 0%, #1a1030 55%, #0e0a1d 100%);
}
.gamble-modal.theme-bonanza .game-title,
.gamble-modal.theme-bonanza .game-badge--bonanza { position: relative; z-index: 1; }

/* STU ROULLETE — estúdio de música / casino */
.gamble-modal.theme-roulette {
  background:
    radial-gradient(circle at 50% -5%, rgba(243,209,104,0.20), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 14px, transparent 14px 28px),
    linear-gradient(165deg, #163a22, #08140d);
}

/* ============================================================ BOTÕES DOS JOGOS — MÁXIMO CHAMATIVO */
/* Botão de Jogar/Girar + Aceitar: verde néon com bisel dourado, brilho e shine */
.gamble-spin-btn,
.gamble-actions .btn-success {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #5dffa8, #18c96d 48%, #07a052) !important;
  color: #052b16 !important;
  border: 2px solid #ffe9a8 !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  box-shadow: 0 0 0 3px rgba(243,209,104,0.55), 0 10px 28px rgba(45,212,127,0.6), 0 0 34px rgba(45,212,127,0.55), inset 0 1px 0 rgba(255,255,255,0.55) !important;
  animation: ctaPulse 1.1s ease-in-out infinite !important;
  opacity: 1 !important;
}
/* Mantém-se vibrante durante o jogo (já não fica transparente) */
.gamble-spin-btn.is-spinning { cursor: default; opacity: 1 !important; }

/* Botão de regamble: ouro sólido e brilhante (não transparente) */
.gamble-regamble-btn {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff3cf, #f3c64e 48%, #d59a26) !important;
  color: #3a2600 !important;
  border: 2px solid #fff3cf !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  box-shadow: 0 0 0 3px rgba(255,243,207,0.4), 0 10px 28px rgba(243,198,78,0.6), 0 0 30px rgba(243,198,78,0.5), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  animation: ctaPulse 1.3s ease-in-out infinite !important;
}

/* Brilho a varrer (shine) em todos os botões dos jogos */
.gamble-spin-btn::after,
.gamble-actions .btn-success::after,
.gamble-regamble-btn::after {
  content: ''; position: absolute; top: -10%; left: -70%;
  width: 45%; height: 120%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.75), transparent);
  transform: skewX(-20deg);
  animation: ctaShine 2.4s ease-in-out infinite;
  pointer-events: none;
}
.gamble-regamble-btn::after { animation-duration: 2.9s; }

@keyframes ctaPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes ctaShine { 0% { left: -70%; } 55%,100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
  .gamble-spin-btn, .gamble-actions .btn-success, .gamble-regamble-btn { animation: none !important; }
  .gamble-spin-btn::after, .gamble-actions .btn-success::after, .gamble-regamble-btn::after { display: none; }
}

/* ============================================================ JOGOS v2 — cabeçalho, mascote, títulos */
.game-head { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 8px; }
.game-mascot { width: 60px; height: 62px; flex-shrink: 0; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); animation: mascotBob 2.4s ease-in-out infinite; }
.game-mascot .mascot-svg, .mascot-svg { width: 100%; height: 100%; display: block; }
@keyframes mascotBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
.game-titlewrap { flex: 1; min-width: 0; text-align: left; }
.game-sub2 { font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; margin-top: 2px; }

/* Títulos dos jogos — a parte mais chamativa da UI */
.game-title { font-size: 1.85rem; font-weight: 900; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; margin: 2px 0; position: relative; display: inline-block;
  background: linear-gradient(180deg, #fff 0%, #ffe9a8 45%, #f3c64e 70%, #ffb300 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px rgba(90,50,0,0.35);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4)) drop-shadow(0 0 16px rgba(243,198,78,0.55));
  animation: titlePulse 1.8s ease-in-out infinite; }
.game-title::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.85) 48%, transparent 62%); -webkit-background-clip: text; background-clip: text; color: transparent; mix-blend-mode: screen; animation: titleShine 3s ease-in-out infinite; }
@keyframes titlePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes titleShine { 0%,100% { opacity: 0; transform: translateX(-12%); } 50% { opacity: 1; transform: translateX(12%); } }
.game-title--roulette { background: linear-gradient(180deg, #fff, #ffe9a8 50%, #f3c64e); }
.game-title--bonanza { background: linear-gradient(180deg, #fff, #ffd1ec 40%, #ff6bd0 75%, #b14dff); -webkit-text-stroke-color: rgba(80,0,80,0.35); filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4)) drop-shadow(0 0 16px rgba(255,107,208,0.6)); }
.game-title--plinko { background: linear-gradient(180deg, #fff, #b6fff0 45%, #16d3a3 80%); -webkit-text-stroke-color: rgba(0,60,50,0.35); filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4)) drop-shadow(0 0 16px rgba(22,211,163,0.6)); }
.game-title--choice { font-size: 1.7rem; display: block; margin: 6px auto 16px; }

/* Ecrã de escolha (3 jogos) */
.game-choice--3 { gap: 9px; }
.game-choice--3 .game-card { padding: 14px 6px; }
.game-choice--4 { gap: 8px; flex-wrap: wrap; }
.game-choice--4 .game-card { padding: 12px 6px; flex: 1 1 46%; }
.game-card-ico { width: 50px; height: 52px; margin: 0 auto 2px; }
.game-card-ico .mascot-svg { width: 100%; height: 100%; }
.game-card--bonanza:hover { border-color: #ff6bd0; box-shadow: 0 12px 30px rgba(255,107,208,0.3); }
.game-card--plinko:hover { border-color: #16d3a3; box-shadow: 0 12px 30px rgba(22,211,163,0.3); }
.game-card--megastu:hover { border-color: #b18cff; box-shadow: 0 12px 30px rgba(177,140,255,0.3); }

/* MEGA STU no motor do dono (bingo) */
.oms-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.oms-cards-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.oms-lbl { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; margin-right: 4px; }
.oms-card-opt { min-width: 36px; padding: 6px 10px; border-radius: 10px; border: 2px solid rgba(177,140,255,0.45); background: rgba(0,0,0,0.04); color: #7a4dff; font-weight: 900; cursor: pointer; }
.oms-card-opt.on { background: linear-gradient(160deg, #b18cff, #7a4dff); color: #fff; border-color: #d9c6ff; box-shadow: 0 0 12px rgba(122,77,255,0.5); }
.oms-card-opt:disabled { opacity: 0.5; cursor: default; }
.oms-cards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.oms-card { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 7px; border-radius: 12px;
  background: linear-gradient(160deg, #2a2150, #161033); border: 2px solid rgba(243,209,104,0.35); box-shadow: 0 6px 16px rgba(0,0,0,0.4); width: min(44vw, 184px); }
.oms-cards:has(.oms-card:only-child) .oms-card { width: min(76vw, 250px); }
.oms-cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; font-weight: 800; font-size: 0.82rem;
  background: radial-gradient(circle at 35% 30%, #3a3163, #1c1640); color: #cdb6ff; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4); transition: transform 0.18s; }
.oms-cell.free { background: radial-gradient(circle at 35% 30%, #6b4dff, #3a268f); color: #fff; }
.oms-cell.hit { background: radial-gradient(circle at 35% 30%, #ffe14d, #ff9f1c); color: #1a1404; box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255,213,74,0.9); animation: omsHit 0.4s ease; }
.oms-cell.rowwin { box-shadow: 0 0 0 2px #2dd47f, 0 0 14px rgba(45,212,127,0.9); }
@keyframes omsHit { 0% { transform: scale(1.4); } 60% { transform: scale(0.9); } 100% { transform: scale(1); } }
.oms-draw { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; min-height: 44px; }
.oms-current { min-width: 46px; height: 46px; padding: 0 8px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1.4rem;
  color: #1a1404; background: radial-gradient(circle at 35% 30%, #ffe14d, #ff9f1c); box-shadow: 0 4px 12px rgba(255,159,28,0.5); }
.oms-current.pop { animation: omsPop 0.3s cubic-bezier(.2,1.4,.4,1); }
.oms-current.mega { background: radial-gradient(circle at 35% 30%, #b18cff, #6b4dff); color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 20px rgba(149,108,255,0.95); }
@keyframes omsPop { 0% { transform: scale(0.4); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.oms-chips { display: flex; gap: 5px; flex-wrap: wrap; max-width: 280px; }
.oms-chip { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 0.74rem; background: #2b2550; color: #fff; }
.oms-chip.hit { background: linear-gradient(160deg, #ffe14d, #ff9f1c); color: #1a1404; }
.oms-chip.mega { background: linear-gradient(160deg, #b18cff, #6b4dff); }
.oms-lines { font-size: 0.86rem; font-weight: 700; color: var(--text-secondary); }
.oms-lines b { color: #2dd47f; font-size: 1.05rem; }
.oms-mult { text-align: center; opacity: 0; transition: opacity 0.3s; }
.oms-mult.show { opacity: 1; }
.oms-mult-cap { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; color: #ff9f1c; }
.oms-mult-val { font-size: 2.2rem; font-weight: 900; background: linear-gradient(180deg, #fff, #ffd54a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.oms-mult-val.locked { animation: omsPop 0.5s cubic-bezier(.2,1.4,.4,1); }

/* Texto do resultado — chip legível em qualquer fundo */
.gamble-result { display: inline-block; min-height: 0; margin: 14px auto 0; padding: 9px 18px; border-radius: var(--r-pill); font-size: 1.15rem; font-weight: 850;
  background: rgba(8,11,20,0.72); border: 1px solid rgba(255,255,255,0.12); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.7); backdrop-filter: blur(3px); max-width: 96%; }
.gamble-result:empty { display: none; }
.gamble-result.win-100 { color: #6bffb0; border-color: rgba(45,212,127,0.5); box-shadow: 0 0 24px rgba(45,212,127,0.4); }
.gamble-result.win-50 { color: #ffd54a; border-color: rgba(245,181,61,0.5); box-shadow: 0 0 24px rgba(245,181,61,0.4); }
.gamble-result.win-cash { color: #5eead4; border-color: rgba(45,212,191,0.5); box-shadow: 0 0 24px rgba(45,212,191,0.4); }
.gamble-result.win-respin { color: #8fc0ff; border-color: rgba(77,141,247,0.5); box-shadow: 0 0 24px rgba(77,141,247,0.4); }

/* Ícones SVG nas células / hub */
.bz-cell svg.gico { width: 30px; height: 30px; display: block; }
.bz-cell.bz-win svg.gico { animation: bzSymPop 0.42s ease; }
.roulette-hub svg { width: 30px; height: 30px; }
.bz-cell.bz-scatter { background: radial-gradient(circle, rgba(255,210,74,0.55), rgba(177,77,255,0.3)); box-shadow: 0 0 0 3px #ffd23f, 0 0 22px rgba(255,210,74,0.9); animation: scatterPop 0.6s ease infinite alternate; z-index: 3; }
@keyframes scatterPop { from { transform: scale(1); } to { transform: scale(1.12); } }

/* Botão a saltar (tell das odds diferentes da default) */
.gamble-spin-btn.cta-jump { animation: ctaJump var(--jump, 1s) cubic-bezier(.3,.7,.4,1) infinite !important; }
@keyframes ctaJump { 0%,100% { transform: translateY(0) scale(1); } 28% { transform: translateY(-10px) scale(1.06); } 46% { transform: translateY(0) scale(1); } 60% { transform: translateY(-4px) scale(1.02); } 72% { transform: translateY(0) scale(1); } }

/* Moedas a subir na vitória (sem emojis) */
.win-coin { position: fixed; bottom: -50px; z-index: 2600; opacity: 0; pointer-events: none; animation-name: emojiFloat; animation-timing-function: ease-out; animation-fill-mode: forwards; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)); }
.win-coin svg { width: 100%; height: 100%; }

/* Banner central (checkpoint / free spins) */
.bz-banner { position: fixed; left: 50%; top: 36%; transform: translate(-50%, -50%); z-index: 2600; font-size: 1.5rem; font-weight: 900; letter-spacing: 0.03em; color: #2a1d00; padding: 12px 24px; border-radius: var(--r-pill); pointer-events: none; white-space: nowrap; animation: bzCheck 1.4s ease forwards;
  background: linear-gradient(145deg, #ffd54a, #ffb300); box-shadow: 0 10px 40px rgba(255,179,0,0.7); }
.bz-banner--free { font-size: 1.7rem; color: #fff; background: linear-gradient(145deg, #ff6bd0, #b14dff); box-shadow: 0 10px 50px rgba(177,77,255,0.8); animation: bzFreeBanner 1.6s ease forwards; }
@keyframes bzFreeBanner { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3) rotate(-6deg); } 20% { opacity: 1; transform: translate(-50%,-50%) scale(1.2) rotate(3deg); } 40% { transform: translate(-50%,-50%) scale(1) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-120%) scale(1); } }

/* Barra da bonanza — mais catchy/animada + cometa no topo */
.bonanza-bar { height: 26px; }
.bonanza-fill { background: linear-gradient(90deg, #4d8df7, #2dd47f); background-size: 200% 100%; animation: barFlow 2s linear infinite; }
@keyframes barFlow { to { background-position: 200% 0; } }
.bonanza-spark { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #fff, rgba(255,255,255,0)); box-shadow: 0 0 14px 4px rgba(255,255,255,0.8); transition: left 0.5s cubic-bezier(.25,.8,.3,1); z-index: 4; pointer-events: none; }
.bonanza-check--end span { background: #15151b; color: #ffd54a; }

/* ============================================================ STU PLINKO */
.plinko-board { position: relative; width: 100%; max-width: 320px; margin: 8px auto 0; height: 300px; border-radius: var(--r-lg); background: radial-gradient(ellipse at 50% 20%, #14253f, #070d18); border: 2px solid #1f3050; box-shadow: inset 0 4px 20px rgba(0,0,0,0.6), 0 0 0 2px rgba(22,211,163,0.25); overflow: hidden; }
.plinko-pegs { position: absolute; inset: 8px 8px 44px; display: flex; flex-direction: column; justify-content: space-around; }
.plk-row { display: flex; justify-content: center; gap: 18px; }
.plk-peg { width: 7px; height: 7px; border-radius: 50%; background: #cfe4ff; box-shadow: 0 0 6px rgba(120,180,255,0.7); }
.plinko-ball { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ff5d9e 60%, #c41d6f); box-shadow: 0 0 12px rgba(255,93,158,0.9); z-index: 5; opacity: 0; left: 50%; top: 4px; transform: translateX(-50%); }
.plinko-slots { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; gap: 3px; }
.plk-slot { flex: 1; text-align: center; padding: 6px 0; border-radius: 7px; font-size: 0.62rem; font-weight: 900; color: #fff; }
.plk-slot.s100 { background: linear-gradient(180deg,#2dd47f,#0a9c4f); color: #052b16; }
.plk-slot.s50 { background: linear-gradient(180deg,#f5b53d,#d59a26); color: #3a2600; }
.plk-slot.sre { background: linear-gradient(180deg,#4d8df7,#2563eb); }
.plk-slot.scb { background: linear-gradient(180deg,#2dd4bf,#0e9684); color: #04231f; }
.plk-slot.slo { background: #18233a; color: var(--text-muted); }
.plk-slot.plk-hit { animation: plkHit 0.6s ease; box-shadow: 0 0 20px rgba(255,255,255,0.8); }
@keyframes plkHit { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-8px) scale(1.12); } }
.theme-plinko { background: radial-gradient(circle at 18% 12%, rgba(22,211,163,0.18), transparent 46%), radial-gradient(circle at 84% 84%, rgba(77,141,247,0.16), transparent 46%), linear-gradient(165deg, #0c1f2a, #060d14); }

/* Títulos e números: COR SÓLIDA brilhante + glow (sem background-clip:text, que falha
   nalguns aparelhos e deixava o texto invisível ou em bloco). Robusto e bem chamativo. */
.gamble-modal h2.game-title, .game-title {
  background: none !important; color: #ffe07a !important; -webkit-text-fill-color: #ffe07a !important;
  font-size: 1.85rem; letter-spacing: 0.02em; margin: 2px 0;
  text-shadow: 0 2px 0 rgba(120,70,0,0.5), 0 0 14px rgba(255,205,80,0.85), 0 0 30px rgba(255,180,40,0.5);
  -webkit-text-stroke: 1px rgba(90,50,0,0.45); filter: none; }
.gamble-modal h2.game-title--choice { font-size: 1.7rem; }
.game-title--bonanza { color: #ff8fe0 !important; -webkit-text-fill-color: #ff8fe0 !important; text-shadow: 0 2px 0 rgba(80,0,70,0.5), 0 0 16px rgba(255,107,208,0.9), 0 0 30px rgba(177,77,255,0.5) !important; -webkit-text-stroke-color: rgba(80,0,70,0.45); }
.game-title--plinko { color: #5ff0d0 !important; -webkit-text-fill-color: #5ff0d0 !important; text-shadow: 0 2px 0 rgba(0,60,50,0.5), 0 0 16px rgba(22,211,163,0.9), 0 0 30px rgba(45,212,191,0.5) !important; -webkit-text-stroke-color: rgba(0,60,50,0.45); }
.game-title::after { display: none; }
.bonanza-bar-label .bzl-num { background: none !important; color: #ffd54a !important; -webkit-text-fill-color: #ffd54a !important; text-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 0 12px rgba(255,213,74,0.7); }
.bonanza-bar-label.fire .bzl-num { color: #ff9f3a !important; -webkit-text-fill-color: #ff9f3a !important; text-shadow: 0 0 10px rgba(255,140,20,0.95), 0 2px 3px rgba(0,0,0,0.6); }
.bz-gain { background: none !important; color: #ffe9a8 !important; -webkit-text-fill-color: #ffe9a8 !important; -webkit-text-stroke: 0.5px rgba(120,70,0,0.4); text-shadow: 0 2px 6px rgba(0,0,0,0.7); }
/* Mascote nos cartões de escolha não roda demasiado */
.game-card-ico .mascot-svg { animation: none; }

/* ============================================================ STU PLINKO v2 — física + luzes */
.plinko-board { box-shadow: inset 0 4px 20px rgba(0,0,0,0.6), 0 0 0 2px rgba(22,211,163,0.35), 0 0 26px rgba(22,211,163,0.3); animation: plkBoardGlow 1.8s ease-in-out infinite; }
@keyframes plkBoardGlow { 0%,100% { box-shadow: inset 0 4px 20px rgba(0,0,0,0.6), 0 0 0 2px rgba(22,211,163,0.35), 0 0 22px rgba(22,211,163,0.25); } 50% { box-shadow: inset 0 4px 20px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,210,74,0.5), 0 0 34px rgba(255,210,74,0.4); } }

/* Bola controlada por transform (centro em x,y) */
.plinko-ball { left: 0; top: 0; width: 18px; height: 18px; transform-origin: center; transform: translate(-100px,-100px); transition: none;
  background: radial-gradient(circle at 35% 30%, #fff, #ff5d9e 55%, #c41d6f); box-shadow: 0 0 14px 3px rgba(255,93,158,0.9), 0 0 4px #fff inset; }

/* Pinos a cintilar + flash ao bater */
.plk-peg { animation: pegTwinkle 1.6s ease-in-out infinite; }
@keyframes pegTwinkle { 0%,100% { opacity: 0.55; box-shadow: 0 0 4px rgba(120,180,255,0.5); } 50% { opacity: 1; box-shadow: 0 0 9px rgba(150,200,255,0.95); } }
.plk-peg.plk-peg-hit { animation: pegHit 0.4s ease; }
@keyframes pegHit { 0% { transform: scale(1.9); background: #fff; box-shadow: 0 0 20px 6px #dff0ff; } 100% { transform: scale(1); background: #cfe4ff; } }

.plk-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; transform: translate(-50%,-50%); box-shadow: 0 0 12px 3px #cfe4ff; pointer-events: none; animation: plkSpark 0.42s ease-out forwards; z-index: 6; }
@keyframes plkSpark { 0% { opacity: 1; transform: translate(-50%,-50%) scale(0.3); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.6); } }
.plk-trail { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, rgba(255,93,158,0.7), transparent 70%); transform: translate(-50%,-50%); pointer-events: none; animation: plkTrail 0.36s ease-out forwards; z-index: 4; }
@keyframes plkTrail { from { opacity: 0.7; } to { opacity: 0; transform: translate(-50%,-50%) scale(0.4); } }

/* Luzes a piscar (chase) */
.plk-lights { position: absolute; left: 10px; right: 10px; display: flex; justify-content: space-between; z-index: 2; pointer-events: none; }
.plk-lights--top { top: 4px; }
.plk-lights--bottom { bottom: 38px; }
.plk-bulb { width: 7px; height: 7px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 8px #ffd23f; animation: bulbBlink 1.3s ease-in-out infinite; }
@keyframes bulbBlink { 0%,100% { opacity: 0.22; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 13px 2px #ffd23f; } }

@media (prefers-reduced-motion: reduce) {
  .plk-peg, .plk-bulb, .plinko-board { animation: none !important; }
}

/* ============================================================ SCROLL MOBILE — sem slide lateral nem bounce */
html, body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 768px) {
  html, body { overscroll-behavior: none; }
  .main-content { overscroll-behavior: contain; overflow-x: hidden; }
}

/* ============================================================ MASCOTE LE BANDIT (estados) */
.bandit-svg { width: 100%; height: 100%; display: block; }
.game-mascot .m-happy, .game-mascot .m-angry { display: none; }
.game-mascot[data-mood="happy"] .m-idle, .game-mascot[data-mood="angry"] .m-idle { display: none; }
.game-mascot[data-mood="happy"] .m-happy { display: block; }
.game-mascot[data-mood="angry"] .m-angry { display: block; }
.game-mascot.mascot-react[data-mood="happy"] { animation: mascotHappy 0.6s cubic-bezier(.3,1.4,.5,1); }
.game-mascot.mascot-react[data-mood="angry"] { animation: mascotAngry 0.5s ease; }
@keyframes mascotHappy { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-10px) scale(1.12) rotate(-4deg); } 60% { transform: translateY(0) scale(1.05) rotate(3deg); } 100% { transform: translateY(0) scale(1); } }
@keyframes mascotAngry { 0%,100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-5px) rotate(-3deg); } 40% { transform: translateX(5px) rotate(3deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* Mascote ao lado da slot (bonanza) */
.bonanza-stage-row { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.bonanza-stage-row .bonanza-machine { flex: 1; min-width: 0; }
.bz-mascot { width: 66px; flex-shrink: 0; align-self: flex-end; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }
.bz-mascot .bandit-svg { width: 100%; height: auto; }

/* ============================================================ % DA BARRA — tremer / fogo / explodir */
.bonanza-bar-label { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: visible; }
.bonanza-bar-label .bzl-num { position: relative; z-index: 2; font-size: 1.5rem; font-weight: 900; letter-spacing: 0.01em;
  background: linear-gradient(180deg, #fff, #ffd54a 60%, #ff9f1c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55)); }
.bonanza-bar-label.lvl1 .bzl-num { animation: numTremble1 0.18s infinite; }
.bonanza-bar-label.lvl2 .bzl-num { animation: numTremble2 0.1s infinite; }
@keyframes numTremble1 { 0%,100% { transform: translate(0,0) rotate(0); } 25% { transform: translate(-1px,1px) rotate(-1.5deg); } 75% { transform: translate(1px,-1px) rotate(1.5deg); } }
@keyframes numTremble2 { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-2px,1px) rotate(-2.5deg); } 50% { transform: translate(2px,-1px) rotate(2.5deg); } 80% { transform: translate(-1px,2px); } }
.bonanza-bar-label.fire .bzl-num { background: linear-gradient(180deg, #fff, #ffe08a 45%, #ff7a1c); filter: drop-shadow(0 0 8px rgba(255,150,20,0.9)) drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }
.bzl-flames { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: 54px; height: 26px; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,120,20,0.75), rgba(255,200,40,0.4) 45%, transparent 72%); filter: blur(2px); }
.bonanza-bar-label.fire .bzl-flames { opacity: 1; animation: flamesFlicker 0.18s infinite alternate; }
@keyframes flamesFlicker { from { transform: translateX(-50%) scaleY(1) scaleX(1); } to { transform: translateX(-50%) scaleY(1.3) scaleX(1.1); } }
.bonanza-bar-label.explode .bzl-num { animation: numExplode 0.9s ease; }
@keyframes numExplode { 0% { transform: scale(1); } 22% { transform: scale(1.9); filter: drop-shadow(0 0 24px #ff9f1c); } 45% { transform: scale(1.15); } 68% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* Contador de free spins */
.bz-freecounter { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); z-index: 7; display: flex; flex-direction: column; align-items: center; padding: 4px 16px; border-radius: var(--r-pill);
  background: linear-gradient(145deg, #ff6bd0, #b14dff); box-shadow: 0 6px 22px rgba(177,77,255,0.7); border: 2px solid #fff; }
.bz-freecounter .fc-label { font-size: 0.5rem; font-weight: 800; color: #fff; letter-spacing: 0.1em; }
.bz-freecounter .fc-num { font-size: 1.5rem; font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.bz-freecounter .fc-num.pop { animation: fcPop 0.45s cubic-bezier(.175,.885,.32,1.275); }
@keyframes fcPop { 0% { transform: scale(0.3); opacity: 0; } 55% { transform: scale(1.35); } 100% { transform: scale(1); opacity: 1; } }
.gamble-modal.theme-freespins { box-shadow: 0 0 0 3px #ff6bd0, 0 0 50px rgba(255,107,208,0.55), 0 30px 80px rgba(0,0,0,0.72) !important; }

/* ============================================================ LUCRO — card clicável + modal de detalhe */
.stat-card--clickable { cursor: pointer; }
.stat-card--clickable:hover { border-color: var(--green); transform: translateY(-3px); }
.stat-card--clickable .stat-label svg { width: 13px; height: 13px; vertical-align: -2px; opacity: 0.55; margin-left: 4px; }
.pb-total { font-size: 1.05rem; font-weight: 720; margin-bottom: 6px; }
.pb-list { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; }
.pb-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.pb-row:last-child { border-bottom: none; }
.pb-info { flex: 1; min-width: 0; }
.pb-name { display: block; font-weight: 640; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-meta { font-size: 0.74rem; color: var(--text-muted); }
.pb-barwrap { width: 64px; height: 7px; background: var(--bg-input); border-radius: 99px; overflow: hidden; flex-shrink: 0; }
.pb-bar { height: 100%; background: var(--green); border-radius: 99px; }
.pb-bar--neg { background: var(--red); }
.pb-profit { min-width: 62px; text-align: right; font-weight: 760; font-size: 0.9rem; }

/* ============================================================ DEMO / PAYTABLE / CASHBACK */
.btn-demo { background: linear-gradient(180deg,#ffe9a8,#e0b64a 55%,#b3892f); color:#2a1d00; border:1px solid #8a6a1e; font-weight:800; box-shadow:0 3px 10px rgba(224,182,74,0.35); }
.btn-demo:hover { filter:brightness(1.05); }

/* Botão + painel da tabela de valores (bonanza) */
.bz-pt-btn { position:absolute; top:8px; right:8px; z-index:8; padding:5px 11px; border-radius:var(--r-pill); border:1px solid var(--amber); background:var(--amber-bg); color:var(--amber); font-family:var(--font); font-size:0.66rem; font-weight:800; letter-spacing:0.06em; cursor:pointer; }
.bz-paytable { position:absolute; inset:auto 8px auto 8px; top:40px; z-index:20; background:linear-gradient(160deg,#16203a,#0b1220); border:1px solid var(--border-light); border-radius:var(--r-md); box-shadow:0 0 0 2px rgba(243,209,104,0.5), var(--shadow-lg); padding:10px 12px; }
.bz-paytable-head { display:flex; align-items:center; justify-content:space-between; font-size:0.72rem; font-weight:800; letter-spacing:0.05em; color:var(--amber); margin-bottom:8px; }
.bz-pt-close { background:none; border:none; color:var(--text-secondary); font-size:1.1rem; line-height:1; cursor:pointer; padding:0 4px; }
.bz-paytable-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; }
.bz-pt-row { display:flex; align-items:center; gap:7px; }
.bz-pt-ico { width:24px; height:24px; flex-shrink:0; display:flex; }
.bz-pt-ico svg { width:24px; height:24px; }
.bz-pt-name { flex:1; font-size:0.78rem; font-weight:640; color:var(--text-secondary); }
.bz-pt-val { font-weight:900; color:#ffd54a; font-size:0.92rem; }
.bz-pt-note { font-size:0.68rem; color:var(--text-muted); margin-top:8px; text-align:center; }

/* Animação do valor do cashback */
.cashback-burst { position:fixed; left:50%; top:34%; transform:translate(-50%,-50%); z-index:2600; display:flex; flex-direction:column; align-items:center; gap:2px; pointer-events:none; animation:cbBurst 2s ease forwards; }
.cashback-burst .cb-tag { font-size:0.7rem; font-weight:900; letter-spacing:0.12em; color:#04231f; background:#2dd4bf; padding:3px 12px; border-radius:var(--r-pill); }
.cashback-burst .cb-amount { font-size:2.6rem; font-weight:900; color:#5eead4; text-shadow:0 0 18px rgba(45,212,191,0.9), 0 3px 6px rgba(0,0,0,0.6); -webkit-text-stroke:1px rgba(4,35,31,0.5); }
@keyframes cbBurst { 0% { opacity:0; transform:translate(-50%,-50%) scale(0.3); } 18% { opacity:1; transform:translate(-50%,-50%) scale(1.2); } 35% { transform:translate(-50%,-50%) scale(1); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-130%) scale(1); } }
.cb-coin { position:fixed; z-index:2600; pointer-events:none; transform:translate(-50%,-50%); opacity:0; animation:cbCoin 1.4s ease-out forwards; }
.cb-coin svg { width:100%; height:100%; }
@keyframes cbCoin { 0% { opacity:1; transform:translate(-50%,-50%) scale(0.4); } 100% { opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(180deg); } }

/* ============================================================ PROMOÇÕES TEMPORÁRIAS */
.product-card.has-promo { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset, var(--shadow-xs); position: relative; }
.product-card-promo { position: absolute; top: -9px; left: 12px; background: linear-gradient(90deg,#ff5d1c,#f5b53d); color: #2a1500; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.05em; padding: 3px 9px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }
.promo-old { text-decoration: line-through; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; }
.promo-new { color: var(--amber); font-weight: 900; }
.promo-product-btn.is-on { color: var(--amber); border: 1px solid var(--amber); }
.product-card-selling .promo-new { font-size: 1.2rem; }
/* POS card promo */
.pos-card.has-promo { box-shadow: 0 0 0 1px var(--amber) inset; }
.pos-card-promo { position: absolute; top: 6px; left: 6px; background: linear-gradient(90deg,#ff5d1c,#f5b53d); color: #2a1500; font-size: 0.56rem; font-weight: 900; letter-spacing: 0.04em; padding: 2px 6px; border-radius: var(--r-pill); z-index: 2; }
.pos-price-old { text-decoration: line-through; color: var(--text-muted); font-size: 0.72rem; }
.pos-price-promo { color: var(--amber); font-weight: 800; }

/* ============================================================ MODO VENDEDOR (esconde lucros/stats/gestão) */
body.seller-mode #sidebarNav .nav-item[data-page="dashboard"],
body.seller-mode #sidebarNav .nav-item[data-page="sales"],
body.seller-mode #sidebarNav .nav-item[data-page="customers"],
body.seller-mode #sidebarNav .nav-item[data-page="orders"],
body.seller-mode #sidebarNav .nav-item[data-page="settings"],
body.seller-mode #mobileNav .mobile-nav-item[data-page="dashboard"],
body.seller-mode #mobileNav .mobile-nav-item[data-page="sales"],
body.seller-mode #mobileNav .mobile-nav-item[data-page="customers"],
body.seller-mode #mobileNav .mobile-nav-item[data-page="orders"],
body.seller-mode #mobileNav .mobile-nav-item[data-page="settings"] { display: none !important; }
body.seller-mode .sidebar-actions { display: none !important; }
/* Produtos: só preço; esconde custo, margem e ações de gestão */
body.seller-mode .product-card-cost,
body.seller-mode .product-card-margin,
body.seller-mode .product-card-actions,
body.seller-mode #demoGamesBtn,
body.seller-mode #exportProductsCSV,
body.seller-mode #addProductBtn { display: none !important; }
/* Botão discreto para sair do modo vendedor (pede palavra-passe) */
.seller-exit { position: fixed; bottom: 86px; right: 14px; z-index: 1500; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-muted); box-shadow: var(--shadow-md); cursor: pointer; opacity: 0.55; transition: opacity var(--fast), transform var(--fast); }
.seller-exit:hover { opacity: 1; transform: scale(1.06); color: var(--accent); }
.seller-exit svg { width: 20px; height: 20px; }
@media (min-width: 769px) { .seller-exit { bottom: 20px; right: 20px; } }

/* ============================================================ ABA ADS (marketing) *
.ads-stage { margin-top: 16px; min-height: 320px; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, var(--bg-card-hover), var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; padding: 24px; box-shadow: var(--shadow-sm); }
.ads-stage:fullscreen { background: var(--bg-body); }

/* ============================================================
   Encomendas (dono) — lista de pedidos + contas de clientes
   ============================================================ */
.hidden { display: none !important; }

.orders-subtabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.orders-subtab {
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
  padding: 9px 16px; border-radius: 12px; font-weight: 600; font-size: 0.9rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: all .15s;
}
.orders-subtab:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.orders-subtab.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-light); }
.orders-pill { background: var(--red); color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 0.74rem; font-weight: 800; }
.orders-pill-muted { background: var(--amber); color: var(--text-inverse); }

.order-card, .account-card { padding: 16px 18px; margin-bottom: 12px; }
.order-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.order-date { color: var(--text-muted); font-size: 0.82rem; margin-left: 8px; }
.order-status { padding: 4px 10px; border-radius: 9px; font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.st-pending { background: var(--amber-bg); color: var(--amber); }
.st-accepted { background: var(--accent-bg); color: var(--accent-light); }
.st-done { background: var(--green-bg); color: var(--green); }
.st-rejected { background: var(--red-bg); color: var(--red); }

.order-lines { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.order-line { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--text-secondary); }
.order-note { margin-top: 8px; color: var(--text-muted); font-size: 0.85rem; display: flex; align-items: center; gap: 6px; }
.order-note svg { width: 15px; height: 15px; flex: 0 0 auto; }
.order-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.order-total { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); }
.order-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.order-status svg, .orders-subtab svg { width: 16px; height: 16px; vertical-align: -3px; }

/* segment options (modal aceitar encomenda) */
.seg-options { display: flex; gap: 8px; }
.seg-option {
  flex: 1; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary);
  padding: 11px; border-radius: 11px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all .15s;
}
.seg-option.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-light); }

/* ============================================================
   Ads — showcase rico: zona principal (roda) + categorias animadas
   ============================================================ */
.ads-stage-showcase { align-items: stretch !important; justify-content: flex-start !important; padding: 0 !important; min-height: 360px; overflow: auto; }

/* Categorias *
@keyframes adsShine { 0% { left: -60%; } 55%,100% { left: 130%; } }
@keyframes adsMiniIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================================================
   NEOMORPHISM — tema claro reimaginado (branco/amarelo, ações verdes)
   Scoped a [data-theme="light"] — o tema escuro (jogos/casino) fica intacto.
   ============================================================ */
[data-theme="light"] {
  --bg-body: #eceff4;
  --bg-sidebar: #eceff4;
  --bg-surface: #eef1f6;
  --bg-card: #eceff4;
  --bg-card-2: #eef1f6;
  --bg-card-hover: #e8ebf2;
  --bg-input: #eceff4;
  --bg-hover: #e5e9f0;

  --border: #dfe4ec;
  --border-light: #e6eaf1;
  --border-focus: #f0a500;

  --text-primary: #232a36;
  --text-secondary: #59626f;
  --text-muted: #8a93a3;
  --text-inverse: #ffffff;

  --accent: #e6a000; --accent-strong: #f0a500; --accent-light: #c98500; --accent-contrast: #4a3500;
  --accent-bg: rgba(240,165,0,0.13); --accent-bg-strong: rgba(240,165,0,0.22);
  --accent-hover: #e09600; --accent-grad: linear-gradient(135deg, #ffc83d, #f0a500);
  --accent-shadow: rgba(240,165,0,.30);

  --green: #16a34a; --green-bg: rgba(22,163,74,0.13);

  --nm-d: #c9ced9;   /* sombra escura */
  --nm-l: #ffffff;   /* sombra clara */
}

/* Helpers de relevo */
[data-theme="light"] .card,
[data-theme="light"] .stat-card,
[data-theme="light"] .modal {
  border: none !important;
  box-shadow: 6px 6px 15px var(--nm-d), -6px -6px 15px var(--nm-l) !important;
}
[data-theme="light"] .card:hover,
[data-theme="light"] .stat-card:hover { box-shadow: 8px 8px 20px var(--nm-d), -8px -8px 20px var(--nm-l) !important; }

/* Shell */
[data-theme="light"] .sidebar { border-right: none; box-shadow: 5px 0 18px rgba(180,188,200,0.4); }
[data-theme="light"] .login-card { border: none; box-shadow: 9px 9px 22px var(--nm-d), -9px -9px 22px var(--nm-l); }

/* Nav */
[data-theme="light"] .nav-item { border-radius: 13px; transition: all var(--fast); }
[data-theme="light"] .nav-item:hover { background: var(--bg-card); box-shadow: 3px 3px 8px var(--nm-d), -3px -3px 8px var(--nm-l); }
[data-theme="light"] .nav-item.active {
  background: var(--accent-grad); color: #4a3500;
  box-shadow: 4px 4px 11px rgba(240,165,0,0.35), -4px -4px 11px var(--nm-l);
}
[data-theme="light"] .nav-item.active svg { color: #4a3500; }

/* Botões */
[data-theme="light"] .btn {
  border: none;
  background: var(--bg-card);
  box-shadow: 4px 4px 10px var(--nm-d), -4px -4px 10px var(--nm-l);
  transition: transform var(--fast), box-shadow var(--fast);
}
[data-theme="light"] .btn:hover { box-shadow: 5px 5px 13px var(--nm-d), -5px -5px 13px var(--nm-l); }
[data-theme="light"] .btn:active { transform: translateY(1px); box-shadow: inset 3px 3px 7px var(--nm-d), inset -3px -3px 7px var(--nm-l); }
[data-theme="light"] .btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #1fb85a, #128a3e);
  box-shadow: 4px 4px 11px rgba(18,138,62,0.34), -4px -4px 11px var(--nm-l);
}
[data-theme="light"] .btn-primary:hover { filter: brightness(1.04); box-shadow: 5px 5px 14px rgba(18,138,62,0.42), -5px -5px 14px var(--nm-l); }
[data-theme="light"] .btn-primary:active { box-shadow: inset 3px 3px 8px rgba(13,90,40,0.5); }
[data-theme="light"] .btn-secondary { color: var(--accent-light); }
[data-theme="light"] .btn-danger, [data-theme="light"] .btn-ghost.text-danger { color: var(--red); }
[data-theme="light"] .btn-icon { background: var(--bg-card); }
[data-theme="light"] .btn-block.btn-lg { border-radius: 14px; }

/* Inputs (afundados) */
[data-theme="light"] .form-control,
[data-theme="light"] select.form-control,
[data-theme="light"] textarea.form-control {
  border: none;
  background: var(--bg-input);
  box-shadow: inset 4px 4px 9px var(--nm-d), inset -4px -4px 9px var(--nm-l);
}
[data-theme="light"] .form-control:focus { box-shadow: inset 3px 3px 7px var(--nm-d), inset -3px -3px 7px var(--nm-l), 0 0 0 2px var(--accent); }

/* Tabela */
[data-theme="light"] .table th { background: transparent; border-bottom: 1px solid var(--border); }
[data-theme="light"] .table td { border-bottom: 1px solid var(--border-light); }
[data-theme="light"] .table tbody tr:hover { background: var(--bg-card-hover); }

/* Segmentos / sub-abas / pills neomórficos *
[data-theme="light"] .orders-subtab,
[data-theme="light"] .seg-option {
  border: none; background: var(--bg-card);
  box-shadow: 3px 3px 8px var(--nm-d), -3px -3px 8px var(--nm-l);
}
[data-theme="light"] .orders-subtab.active,
[data-theme="light"] .seg-option.active { background: var(--accent-grad); color: #4a3500; }

/* Stage dos ads em claro */
[data-theme="light"] .ads-stage { background: var(--bg-body); border: none; box-shadow: inset 5px 5px 13px var(--nm-d), inset -5px -5px 13px var(--nm-l); }

/* Avatares e ícones de stat mantêm contraste suave */
[data-theme="light"] .modal-header, [data-theme="light"] .modal-overlay.active .modal { background: var(--bg-card); }
[data-theme="light"] .modal-header { border-bottom: 1px solid var(--border); }

/* ============================================================
   JOGOS v3 — cenário de fundo opaco, janela maior, UI profissional
   (corrige o "bleed" da loja por trás e o layout amador)
   ============================================================ */
/* Overlay base 100% opaco — nada da loja atravessa */
.gamble-overlay { background: radial-gradient(ellipse at 50% 22%, #18213a, #06090f 72%) !important; backdrop-filter: blur(7px); }

/* Cenário temático por jogo (detetado via :has no modal-filho) */
/* Cenários DESENHADOS (SVG) por jogo — vinheta por cima para destacar a cabine */
.gamble-overlay:has(.theme-bonanza) {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(11,7,22,0) 48%, rgba(11,7,22,0.28) 100%),
    url('/img/scene-bonanza.svg') center center / cover no-repeat,
    #0b0716 !important;
}
.gamble-overlay:has(.theme-plinko) {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(4,8,15,0) 48%, rgba(4,8,15,0.28) 100%),
    url('/img/scene-plinko.svg') center center / cover no-repeat,
    #04080f !important;
}
.gamble-overlay:has(.theme-roulette) {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(10,2,4,0) 48%, rgba(10,2,4,0.30) 100%),
    url('/img/scene-roulette.svg') center center / cover no-repeat,
    #0a0204 !important;
}
/* Tira o blur/escurecimento extra para os cenários ilustrados respirarem */
.gamble-overlay:has(.theme-bonanza)::before,
.gamble-overlay:has(.theme-plinko)::before,
.gamble-overlay:has(.theme-roulette)::before { opacity: 0.25; }

/* Camada de "estrelas"/bokeh para dar profundidade ao cenário */
.gamble-overlay::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55; z-index: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.65), transparent),
    radial-gradient(2px 2px at 72% 22%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.6px 1.6px at 40% 72%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.6px 1.6px at 86% 62%, rgba(255,255,255,0.42), transparent),
    radial-gradient(2px 2px at 14% 82%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.4px 1.4px at 60% 90%, rgba(255,255,255,0.4), transparent);
  animation: gSceneTwinkle 4.5s ease-in-out infinite;
}
@keyframes gSceneTwinkle { 0%,100% { opacity: 0.35; } 50% { opacity: 0.7; } }

/* Janela dos jogos maior + cabine mais imponente */
.gamble-modal { width: 94% !important; max-width: 460px !important; padding: 24px 24px 28px !important; z-index: 2; }
@media (min-width: 620px) { .gamble-modal { max-width: 500px !important; } }

/* Cabeçalho/título — limpo, sem sobreposições */
.game-head { align-items: center; gap: 14px; margin-bottom: 14px; }
.game-mascot { width: 66px; height: 68px; }
.game-titlewrap { display: flex; flex-direction: column; }
.game-badge { align-self: flex-start; margin-bottom: 7px; font-size: 0.66rem; letter-spacing: 0.12em; padding: 4px 12px; }
.game-title { font-size: 1.72rem; margin: 0; line-height: 1.04; }
.game-title--choice { font-size: 1.6rem; margin: 4px auto 18px; }
.game-sub2 { margin-top: 7px; font-size: 0.8rem; line-height: 1.3; color: #c9d2e6; }

/* ---- STU BONANZA: máquina/grelha/barra/mascote profissionais ---- */
.bonanza-bar-wrap { margin: 4px 0 16px; }
.bonanza-bar { height: 24px; }
.bonanza-stage-row { align-items: flex-end; gap: 8px; margin-top: 4px; }
.bz-mascot { width: 60px; margin-bottom: 2px; }
.bonanza-machine { padding: 12px; border-radius: 18px;
  background: linear-gradient(160deg, #3a2a10, #1a1206) !important;
  box-shadow: 0 0 0 3px #f3d168, 0 0 0 6px #6e4a12, 0 14px 40px rgba(0,0,0,0.6), inset 0 2px 14px rgba(0,0,0,0.65) !important; }
.bonanza-grid { gap: 6px; padding: 9px; border-radius: 12px; }
.bz-cell { border-radius: 9px; }
.bz-cell svg.gico { width: 28px; height: 28px; }

/* ---- STU PLINKO: tabuleiro maior e mais nítido ---- */
.plinko-board { max-width: 380px; height: 360px; border-width: 3px;
  box-shadow: inset 0 4px 24px rgba(0,0,0,0.65), 0 0 0 3px rgba(22,211,163,0.35), 0 0 30px rgba(22,211,163,0.25) !important; }
.plinko-pegs { inset: 12px 12px 52px; }
.plk-peg { width: 8px; height: 8px; }
.plk-slot { padding: 8px 0; font-size: 0.66rem; border-radius: 8px; }
.plinko-ball { width: 18px; height: 18px; }

/* Botões de jogar/girar mais imponentes */
.gamble-spin-btn { font-size: 1.15rem !important; padding: 15px 20px !important; border-radius: 14px !important; letter-spacing: 0.02em; }

/* ============================================================
   Pedidos de conta de cliente (aba Clientes) + badge de notificação
   ============================================================ */
.nav-item { position: relative; }
.nav-badge {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--red); color: #fff; font-size: 0.72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.3);
  animation: nav-badge-pop .9s ease infinite alternate;
}
@keyframes nav-badge-pop { from { box-shadow: 0 2px 6px rgba(0,0,0,.3); } to { box-shadow: 0 0 0 4px rgba(239,68,68,.25), 0 2px 6px rgba(0,0,0,.3); } }
.mobile-nav-item { position: relative; }
.mobile-nav-item .nav-badge {
  top: 3px; left: 50%; right: auto; bottom: auto; transform: translateX(2px);
  min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.6rem; border: 1.5px solid var(--bg-primary);
}
.pending-card { padding: 14px 16px; margin-bottom: 16px; border-left: 4px solid var(--amber); }
.pending-head { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; margin-bottom: 10px; color: var(--text-primary); }
.pending-head svg { width: 18px; height: 18px; color: var(--amber); }
.pending-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.pending-info { display: flex; flex-direction: column; }
.pending-name { font-weight: 700; }
.pending-meta { font-size: 0.8rem; color: var(--text-muted); }
.pending-actions { display: flex; gap: 8px; flex-wrap: wrap; }
[data-theme="light"] .pending-card { box-shadow: 6px 6px 15px var(--nm-d), -6px -6px 15px var(--nm-l); border-left: 4px solid var(--amber); }

/* ============================================================
   STU BONANZA — tabela de prémios sempre visível ao lado da slot
   ============================================================ */
.gamble-modal.theme-bonanza { max-width: 480px !important; }
@media (min-width: 760px) { .gamble-modal.theme-bonanza { max-width: 760px !important; } }

.bz-layout { display: flex; gap: 14px; align-items: stretch; width: 100%; }
.bz-layout .bonanza-stage-row { flex: 1 1 56%; min-width: 0; }

.bz-paytable-side {
  flex: 1 1 40%; min-width: 0; text-align: left;
  background: linear-gradient(165deg, rgba(20,16,40,0.7), rgba(10,8,22,0.85));
  border: 1px solid rgba(243,209,104,0.4); border-radius: 14px; padding: 12px 12px 14px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
}
.bz-pt-title { font-size: 0.82rem; font-weight: 900; letter-spacing: 0.06em; text-align: center; color: #ffd54a;
  text-shadow: 0 0 10px rgba(255,179,0,0.5); margin-bottom: 8px; }
.bz-pt-sub { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #b9a7e8;
  margin: 8px 0 5px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 3px; }
.bz-pt-icons { display: flex; flex-direction: column; gap: 5px; }
.bz-pt-row { display: flex; align-items: center; gap: 6px; }
.bz-pt-ico { width: 20px; height: 20px; flex: 0 0 auto; }
.bz-pt-ico svg { width: 100%; height: 100%; }
.bz-pt-name { flex: 0 0 56px; font-size: 0.7rem; color: #e7ecf7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-pt-weight { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; min-width: 26px; }
.bz-pt-weight-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f5b53d, #ffd54a); box-shadow: 0 0 5px rgba(255,213,74,0.6); }
.bz-pt-val { flex: 0 0 auto; font-size: 0.78rem; font-weight: 900; color: #ffd54a; min-width: 30px; text-align: right; }

.bz-pt-prizes { display: flex; flex-direction: column; gap: 6px; }
.bz-prize { display: flex; align-items: center; gap: 8px; }
.bz-prize-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 6px currentColor; }
.bz-prize-ico { width: 18px; height: 18px; flex: 0 0 auto; }
.bz-prize-ico svg { width: 100%; height: 100%; }
.bz-prize-info { display: flex; flex-direction: column; line-height: 1.15; }
.bz-prize-info b { font-size: 0.72rem; font-weight: 900; color: #fff; letter-spacing: 0.02em; }
.bz-prize-info small { font-size: 0.62rem; color: #aeb6c9; }

/* Empilha em ecrãs estreitos: tabela continua sempre à vista, por baixo */
@media (max-width: 759px) {
  .bz-layout { flex-direction: column; gap: 10px; }
  .bz-paytable-side { flex: none; }
  .bz-pt-icons { grid-template-columns: 1fr 1fr 1fr; }
}

/* Resultado do Gamble It na encomenda (lado do dono) */
.order-gamble { margin-top: 8px; font-size: 0.86rem; font-weight: 700; color: var(--text-secondary); }
.order-gamble.won { color: var(--green); }
.order-total-old { text-decoration: line-through; color: var(--text-muted); font-weight: 600; font-size: 0.85rem; }

/* ===== Toggle do modo casino (Definições) ===== */
.casino-toggle { display: flex; gap: 12px; flex-wrap: wrap; }
.casino-opt { flex: 1 1 160px; text-align: left; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  background: var(--bg-card); border: 2px solid var(--border); color: var(--text-secondary);
  display: flex; flex-direction: column; gap: 3px; transition: all .15s ease; }
.casino-opt:hover { border-color: var(--green); }
.casino-opt.active { border-color: var(--green); background: rgba(45,212,127,0.1); color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(45,212,127,0.12); }
.casino-opt-title { font-weight: 800; font-size: 1rem; }
.casino-opt-sub { font-size: 0.78rem; opacity: 0.8; }
.casino-status { margin-top: 12px; font-size: 0.84rem; font-weight: 700; }
.casino-status.on { color: var(--green); }
.casino-status.demo { color: var(--amber); }

/* ===== CTA do casino na apresentação (Ads) ===== *

/* ===== Fotos de produto nos Ads ===== */
.ads-photo { width: 150px; height: 150px; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,0.18); }
.ads-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Gestor de fotos por produto */
.ads-img-manager { display: flex; flex-direction: column; gap: 8px; }
.ads-img-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); }
.ads-img-prev { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--accent-bg); color: var(--accent); }
.ads-img-prev img { width: 100%; height: 100%; object-fit: cover; }
.ads-img-prev svg { width: 24px; height: 24px; }
.ads-img-name { flex: 1; font-weight: 600; }
.ads-img-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ===== Botão "Atualizar" (canto inferior esquerdo) ===== */
.app-update-fab {
  position: fixed; left: 14px; bottom: 14px; z-index: 1400;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: none; border-radius: 999px;
  background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border);
  font-size: 0.82rem; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  opacity: 0.85; transition: all .15s ease;
}
.app-update-fab:hover { opacity: 1; color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.app-update-fab svg { flex: 0 0 auto; }
@media (max-width: 700px) { .app-update-fab { bottom: 78px; } }

/* Mini-cards do resumo de stats — clicáveis */
.summary-item--clickable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.summary-item--clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.summary-item--clickable::after { content: ''; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.55; }
.summary-item { position: relative; }

/* ===== Ligar acesso pela internet (modal do telemóvel) ===== */
.tunnel-starting { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--accent-bg); color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; }
.tunnel-starting small { display: block; font-weight: 500; opacity: 0.8; font-size: 0.78rem; margin-top: 2px; }
.tunnel-spinner { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent); animation: tunnel-spin 0.8s linear infinite; }
@keyframes tunnel-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Ads showcase v2 — 3 zonas, hero maior/centrado, carrossel
   automático (sem barras), imagens +20%, brilho atrativo
   ============================================================ */
/* Em modo normal o stage deixa o fogo/glow "respirar" (não corta);
   só em ecrã inteiro é que esconde o overflow (para não dar scroll à página). */
.ads-stage-showcase { overflow: visible !important; }
.ads-stage-showcase:fullscreen { overflow: hidden !important; }

/* Zona 1 — principal: maior e centrada *
/* imagem/ícone do hero +20% e com mais espaço *

/* Carrossel automático — substitui o scroll por animação contínua *
/* Padding generoso no track para o GLOW e o FOGO (chama a -22px + hover -6px + aura)
   não serem cortados pelo overflow:hidden da máscara do marquee *
@keyframes adsMarqueeSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Os carrosséis estendem-se até às margens do ecrã (rebentam o padding do showcase) *

/* CARD = a FOTO do produto a preencher (sem moldura), maior, só nome + preço *
.ads-photo { width: 180px; height: 180px; }
/* padding vertical amplo: overflow-x:auto força overflow-y a cortar, por isso o
   fogo/glow têm de caber dentro do padding do scroller *

/* Brilho para atrair a compra (promos/novidades) */
.ads-glow { animation: adsMiniIn 0.5s ease both, adsGlowPulse 1.8s ease-in-out infinite; }
@keyframes adsGlowPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
  50% { box-shadow: 0 0 26px -2px var(--card-accent), 0 8px 22px rgba(0,0,0,0.22); }
}
/* Reflexo a passar por cima de alguns cards */
.ads-glow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  background-size: 250% 100%; animation: adsGlowSweep 2.6s ease-in-out infinite; }
@keyframes adsGlowSweep { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* Troca de categoria na zona 3 *
@keyframes adsZoneSwap { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Link da internet pronto a copiar */
.tunnel-ready { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 10px; border-radius: 12px;
  background: rgba(45,212,127,0.14); color: var(--green); font-weight: 700; font-size: 0.9rem; animation: tunnel-ready-in .4s ease both; }
.tunnel-ready-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: #04210f; font-weight: 900; flex: 0 0 auto; }
@keyframes tunnel-ready-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.tunnel-copy-ready { animation: tunnel-copy-pulse 1.1s ease-in-out infinite; }
@keyframes tunnel-copy-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(45,212,127,0.45); } 50% { box-shadow: 0 0 0 6px rgba(45,212,127,0); } }

/* Swatch de cor personalizada (qualquer cor) */
.color-swatch--custom { position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #6366f1, #a855f7, #ef4444);
  overflow: hidden; }
.color-swatch--custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; }
.color-swatch--custom-plus { color: #fff; font-weight: 900; font-size: 1rem; text-shadow: 0 1px 2px rgba(0,0,0,0.5); pointer-events: none; }

/* Foto do produto no POS (Vender) */
.pos-card-photo { padding: 0; overflow: hidden; background: #fff; }
.pos-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Histórico: separadores por dia + hora evidente */
.sales-day-sep td { background: var(--accent-bg); padding: 7px 14px !important; border-top: 2px solid var(--accent); }
.sales-day-label { font-weight: 800; text-transform: capitalize; color: var(--text-primary); font-size: 0.92rem; }
.sales-day-meta { float: right; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; }
.sale-time { display: block; font-weight: 800; font-size: 0.98rem; color: var(--text-primary); }
.sale-date-sub { display: block; font-size: 0.74rem; color: var(--text-muted); }
.sale-time-inline { display: none; font-weight: 800; color: var(--accent); font-size: 0.82rem; margin-left: 4px; }
@media (max-width: 760px) { .sale-time-inline { display: inline; } }
.pay-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 0.7rem; font-weight: 700; line-height: 1;
  padding: 2px 7px; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; }
.pay-chip--mbway { background: rgba(45,212,127,0.13); border-color: rgba(45,212,127,0.4); color: #12a35a; }

/* Lista de produtos comprados na linha do histórico */
.sale-items-line { font-size: 0.8rem; color: var(--text-secondary); margin: 3px 0; line-height: 1.35;
  display: flex; align-items: center; gap: 5px; }
.sale-items-line svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); }
/* Clientes: marca "sem dívida" na coluna Dívida */
.cust-paid { display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 700; color: #12a35a;
  background: rgba(45,212,127,0.12); border: 1px solid rgba(45,212,127,0.35); border-radius: 999px; padding: 2px 9px; }

/* Lista de backups */
.backup-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.backup-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); flex-wrap: wrap; }
.backup-info { display: flex; flex-direction: column; }
.backup-date { font-weight: 700; }
.backup-meta { font-size: 0.8rem; color: var(--text-muted); }
.backup-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ===== Bonanza v3: grelha maior + barra estilizada + TURBO (#63-#66) ===== */
.bonanza-grid { gap: 6px; padding: 8px; min-height: 280px; }
.bz-cell { border-radius: 11px; }
.bz-cell svg.gico { width: 34px; height: 34px; }
@media (max-width: 760px) { .bonanza-grid { min-height: 220px; } .bz-cell svg.gico { width: 26px; height: 26px; } }
@media (max-width: 480px) { .bonanza-grid { gap: 4px; padding: 5px; } .bz-cell svg.gico { width: 20px; height: 20px; } }

/* Barra de progresso muito mais viva: brilho a correr + segmentos + pulso */
.bonanza-bar { height: 28px; overflow: hidden; }
.bonanza-fill { position: relative; }
.bonanza-fill::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%);
  background-size: 220% 100%; animation: bzShine 1.4s linear infinite; }
.bonanza-fill.hot::after { animation-duration: 0.9s; }
.bonanza-fill.max::after { animation-duration: 0.5s; }
@keyframes bzShine { from { background-position: 220% 0; } to { background-position: -120% 0; } }
.bonanza-bar { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 9.9%); }
.bonanza-bar-label.fire .bzl-num { animation: bzNumFire 0.3s ease-in-out infinite alternate; }
@keyframes bzNumFire { from { transform: scale(1) rotate(-1.5deg); } to { transform: scale(1.08) rotate(1.5deg); } }

/* Linha JOGAR + TURBO */
.bz-play-row { display: flex; gap: 10px; align-items: stretch; }
.bz-play-row .bz-play-main { flex: 1; }
.bz-turbo-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 86px; padding: 0 14px; font-weight: 900; line-height: 1; border: 2px solid #f5b53d;
  background: linear-gradient(160deg, #2a2008, #1a1404); color: #ffd54a; font-size: 1.25rem;
  border-radius: var(--r-md); transition: transform 0.12s, box-shadow 0.2s, background 0.2s; }
.bz-turbo-btn .bz-turbo-lbl { font-size: 0.62rem; letter-spacing: 0.08em; }
.bz-turbo-btn:hover { transform: translateY(-1px); }
.bz-turbo-btn.is-on { background: linear-gradient(160deg, #ffd54a, #ff9f1c); color: #1a1404; border-color: #fff3c4;
  box-shadow: 0 0 0 2px rgba(255,213,74,0.4), 0 0 18px rgba(255,159,28,0.7); animation: bzTurboPulse 0.7s ease-in-out infinite; }
@keyframes bzTurboPulse { 0%,100% { box-shadow: 0 0 0 2px rgba(255,213,74,0.4), 0 0 14px rgba(255,159,28,0.6); } 50% { box-shadow: 0 0 0 3px rgba(255,213,74,0.6), 0 0 26px rgba(255,159,28,0.95); } }

/* Etiqueta de zona na tabela de prémios (#64) */
.bz-prize-zone { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: var(--r-pill);
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.03em; vertical-align: middle;
  background: rgba(255,255,255,0.1); color: var(--text-secondary); border: 1px solid var(--border-light); }
@media (prefers-reduced-motion: reduce) { .bonanza-fill::after, .bz-turbo-btn.is-on, .bonanza-bar-label.fire .bzl-num { animation: none !important; } }

/* ===== Bonanza: ícones ESPECIAIS de prémio (respin/cashback) — combinação + dopamina (#64) ===== */
.bz-cell.bz-special { z-index: 4; background: radial-gradient(circle, rgba(255,255,255,0.35), rgba(77,141,247,0.25));
  box-shadow: 0 0 0 3px #ffd23f, 0 0 26px rgba(255,213,74,0.95); animation: bzSpecialIn 0.5s cubic-bezier(0.2,1.4,0.5,1) both, bzSpecialPulse 0.7s 0.5s ease-in-out infinite alternate; }
.bz-cell.bz-special svg.gico { filter: drop-shadow(0 0 6px rgba(255,255,255,0.9)); }
.bz-cell.bz-special-hit { animation: bzSpecialIn 0.5s cubic-bezier(0.2,1.4,0.5,1) both, bzSpecialHit 0.45s ease-in-out infinite alternate; box-shadow: 0 0 0 4px #fff, 0 0 34px rgba(255,213,74,1); }
@keyframes bzSpecialIn { from { transform: scale(0.2) rotate(-25deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes bzSpecialPulse { from { transform: scale(1); } to { transform: scale(1.13); } }
@keyframes bzSpecialHit { from { transform: scale(1.05) rotate(-4deg); } to { transform: scale(1.22) rotate(4deg); } }

.bz-banner--respin { font-size: 1.7rem; color: #fff; background: linear-gradient(145deg, #4d8df7, #7fd0ff); box-shadow: 0 10px 50px rgba(77,141,247,0.85); animation: bzFreeBanner 1.5s ease forwards; }
.bz-banner--cash { font-size: 1.7rem; color: #5a3b00; background: linear-gradient(145deg, #ffe14d, #ffb01c); box-shadow: 0 10px 50px rgba(255,176,28,0.85); animation: bzFreeBanner 1.5s ease forwards; }

/* Linha de prémio especial na tabela + ícones inline no texto */
.bz-prize--special { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 4px 6px; margin: 2px -4px; }
.bz-prize--special .bz-prize-ico { width: 26px; height: 26px; animation: bzSpecialPulse 0.9s ease-in-out infinite alternate; }
.bz-prize-info small svg.gico { width: 1.15em; height: 1.15em; vertical-align: -0.25em; margin: 0 1px; }
@media (prefers-reduced-motion: reduce) { .bz-cell.bz-special, .bz-cell.bz-special-hit, .bz-prize--special .bz-prize-ico { animation: none !important; } }

/* ============================================================ ADS v3 — hero imersivo + transição suave + títulos */
/* Zona principal: contentor para cross-fade (slots sobrepostos) *

/* Cartão hero: a FOTO preenche tudo; nome+preço por baixo num véu suave *
/* Fundo 100% BRANCO atrás da foto do produto — mistura-se com as fotos (que têm fundo branco) *

/* Véu inferior + nome/preço sobrepostos, alinhados e bonitos *

/* Hero COM FOTO: fundo branco + texto escuro legível sobre um véu branco *

/* Reflexo MUITO mais subtil (antes era um brilho forte a varrer) *
@keyframes adsReflect { 0%,100% { left: -40%; opacity: 0; } 45% { opacity: 1; } 60% { left: 130%; opacity: 0; } }

/* Títulos das secções (Mais vendidos / categoria) — chip com sublinhado de acento *

/* Mini cards: a foto preenche o card; sem padding de moldura *

@media (max-width: 600px) {
  .ads-zone--hero .ads-hero { min-height: 280px; }
  .ads-card-hero { aspect-ratio: 1 / 1; }
  .ads-mini { width: 210px; }
  .ads-mini-name { font-size: 1rem; }
  .ads-mini-price { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .ads-hero-reflect::before, .ads-card-hero .ads-price, .ads-hero-media--icon svg { animation: none !important; } }

/* ============================================================ JOGOS — cenário VIVO (#68) */
/* Luz a girar + brilhos a flutuar por trás do jogo (dopamina), em todos os temas. */
.gamble-modal[class*="theme-"] { position: relative; overflow: hidden; }
.gamble-modal[class*="theme-"] > * { position: relative; z-index: 1; }
.gamble-modal[class*="theme-"]::before { content: ''; position: absolute; inset: -45%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 12deg, rgba(255,213,74,0.05) 12deg 16deg, transparent 16deg 32deg,
              rgba(150,77,255,0.05) 32deg 36deg, transparent 36deg 60deg);
  animation: scnRays 20s linear infinite; }
.gamble-modal[class*="theme-"]::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7;
  background-image:
    radial-gradient(2px 2px at 12% 92%, rgba(255,223,120,0.9), transparent),
    radial-gradient(2px 2px at 30% 82%, rgba(255,255,255,0.7), transparent),
    radial-gradient(3px 3px at 56% 96%, rgba(255,213,74,0.8), transparent),
    radial-gradient(2px 2px at 73% 86%, rgba(150,200,255,0.7), transparent),
    radial-gradient(2px 2px at 88% 93%, rgba(255,107,208,0.7), transparent),
    radial-gradient(2px 2px at 45% 89%, rgba(255,255,255,0.6), transparent);
  background-repeat: repeat; background-size: 100% 100%; animation: scnFloatUp 7.5s linear infinite; }
.gamble-modal.theme-roulette::before { background: conic-gradient(from 0deg, transparent 0 12deg, rgba(45,212,127,0.06) 12deg 16deg, transparent 16deg 34deg, rgba(243,209,104,0.06) 34deg 38deg, transparent 38deg 60deg); }
@keyframes scnRays { to { transform: rotate(360deg); } }
@keyframes scnFloatUp { 0% { transform: translateY(0); opacity: 0.2; } 30% { opacity: 0.85; } 100% { transform: translateY(-120%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gamble-modal[class*="theme-"]::before, .gamble-modal[class*="theme-"]::after { animation: none !important; } }

/* ============================================================ Editor de imagem do produto (#71) */
.imed-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  background: rgba(6,9,16,0.72); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; padding: 16px; }
.imed-overlay.active { opacity: 1; visibility: visible; }
.imed-modal { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--r-xl); padding: 22px; width: 100%; max-width: 360px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,0.5); transform: scale(0.92); transition: transform 0.25s cubic-bezier(.2,.8,.3,1.2); }
.imed-overlay.active .imed-modal { transform: scale(1); }
.imed-title { font-size: 1.2rem; font-weight: 850; margin-bottom: 6px; color: var(--text-primary); }
.imed-hint { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 14px; line-height: 1.4; }
.imed-stage { position: relative; width: 300px; height: 300px; max-width: 100%; aspect-ratio: 1; margin: 0 auto 14px; overflow: hidden;
  border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 10px rgba(0,0,0,0.12);
  display: grid; place-items: center; cursor: grab; touch-action: none; }
.imed-stage:active { cursor: grabbing; }
.imed-stage img { user-select: none; -webkit-user-drag: none; transform-origin: center; will-change: transform; }
.imed-zoom { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--text-secondary); font-weight: 800; }
.imed-zoom input[type="range"] { flex: 1; accent-color: var(--accent); height: 4px; cursor: pointer; }
.imed-actions { display: flex; gap: 10px; }
.imed-actions .btn { flex: 1; }

/* ============================================================ ADS v4 — fogo nos top-sellers + slider de velocidade + glow fluido + Apresentar */
/* Barra de controlo (velocidade) no topo do showcase — fica acessível também em ecrã inteiro *

/* Fogo / aura nos produtos que vendem bem *
@keyframes adsHotAura { 0%,100% { box-shadow: 0 26px 70px rgba(0,0,0,0.45), 0 0 0 2px #ff7a00 inset, 0 0 30px -6px rgba(255,122,0,0.7); } 50% { box-shadow: 0 26px 70px rgba(0,0,0,0.45), 0 0 0 2px #ffb000 inset, 0 0 48px -2px rgba(255,90,0,0.95); } }
.ads-hot-badge { position: absolute; top: 14px; left: 14px; z-index: 3; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; color: #fff;
  background: linear-gradient(120deg, #ff2d00, #ff9f1c); padding: 5px 11px; border-radius: 999px; box-shadow: 0 4px 14px rgba(255,90,0,0.6); }
/* ===== Fogo dos top-sellers — chama realista, coesa e chamativa ===== */
/* Cartão é overflow:visible; sem mix-blend (para aparecer também sobre o hero BRANCO). */
.ads-fire { position: absolute; top: -40px; left: 0; right: 0; height: 64px; z-index: 4; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center; }
/* brilho quente atrás das chamas */
.ads-fire::before { content: ''; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  width: 70%; height: 34px; border-radius: 50%; filter: blur(8px);
  background: radial-gradient(ellipse at 50% 100%, rgba(255,140,0,0.9), rgba(255,60,0,0.35) 45%, rgba(255,40,0,0) 72%);
  animation: adsFireGlow 1.7s ease-in-out infinite; }
.ads-fire span { position: relative; width: 34px; height: 100%; margin: 0 -11px; transform-origin: 50% 100%;
  border-radius: 50% 50% 48% 48% / 72% 72% 30% 30%; filter: blur(0.8px) drop-shadow(0 -5px 12px rgba(255,110,0,0.5));
  background: radial-gradient(ellipse 72% 100% at 50% 90%, #fff6d8 0%, #ffe35a 24%, #ff9d1a 50%, #ff4500 76%, rgba(255,50,0,0) 100%);
  animation: adsFlame 0.9s ease-in-out infinite alternate; }
/* núcleo claro interior de cada chama */
.ads-fire span::after { content: ''; position: absolute; left: 28%; right: 28%; bottom: 0; height: 58%;
  border-radius: 50% 50% 46% 46% / 72% 72% 28% 28%;
  background: radial-gradient(ellipse at 50% 100%, #fffef6 0%, #fff0a0 52%, rgba(255,225,120,0) 100%);
  animation: adsFlameCore 0.7s ease-in-out infinite alternate; }
.ads-fire span:nth-child(1) { height: 60%; animation-duration: 0.8s; animation-delay: 0.00s; }
.ads-fire span:nth-child(2) { height: 86%; animation-duration: 1.0s; animation-delay: 0.15s; }
.ads-fire span:nth-child(3) { height: 108%; animation-duration: 0.7s; animation-delay: 0.05s; }
.ads-fire span:nth-child(4) { height: 124%; animation-duration: 0.95s; animation-delay: 0.22s; }
.ads-fire span:nth-child(5) { height: 104%; animation-duration: 0.78s; animation-delay: 0.10s; }
.ads-fire span:nth-child(6) { height: 86%; animation-duration: 1.05s; animation-delay: 0.18s; }
.ads-fire span:nth-child(7) { height: 62%; animation-duration: 0.85s; animation-delay: 0.03s; }
.ads-fire span:nth-child(8) { height: 48%; animation-duration: 0.92s; animation-delay: 0.12s; }
.ads-fire span:nth-child(9) { height: 44%; animation-duration: 0.82s; animation-delay: 0.07s; }
.ads-fire--mini { top: -22px; height: 38px; }
.ads-fire--mini span { width: 20px; margin: 0 -7px; }
@keyframes adsFlame {
  0%   { transform: translateX(-9%) scaleY(0.82) scaleX(1.06) rotate(-2deg); border-radius: 50% 50% 48% 48% / 70% 70% 30% 30%; opacity: 0.85; }
  35%  { transform: translateX(6%) scaleY(1.10) scaleX(0.93) rotate(2deg); border-radius: 54% 46% 50% 50% / 80% 70% 30% 30%; }
  70%  { transform: translateX(-4%) scaleY(1.26) scaleX(0.85) rotate(-1deg); border-radius: 48% 52% 46% 50% / 84% 74% 28% 30%; }
  100% { transform: translateX(3%) scaleY(1.38) scaleX(0.80) rotate(1deg); border-radius: 46% 54% 48% 48% / 88% 78% 26% 28%; opacity: 1; }
}
@keyframes adsFlameCore { from { transform: translateY(3%) scaleY(0.85); opacity: 0.8; } to { transform: translateY(-6%) scaleY(1.2); opacity: 1; } }
@keyframes adsFireGlow { 0%,100% { opacity: 0.55; transform: translateX(-50%) scaleX(0.9); } 50% { opacity: 1; transform: translateX(-50%) scaleX(1.1); } }
@keyframes adsHotAuraMini { 0%,100% { box-shadow: 0 0 0 2px #ff7a00, 0 0 14px -4px rgba(255,122,0,0.7); } 50% { box-shadow: 0 0 0 2px #ffb000, 0 0 26px -2px rgba(255,90,0,0.95); } }

/* Glow mais FLUIDO (mais suave e contínuo) */
.ads-glow { animation: adsMiniIn 0.5s ease both, adsGlowPulse 2.6s ease-in-out infinite !important; }
.ads-glow::after { animation: adsGlowSweep 3.4s linear infinite !important; }


/* ============================================================ Definições: Música e sons (#76) */
.audio-sub { font-size: 0.95rem; font-weight: 800; color: var(--text-primary); margin: 4px 0 4px; }
.audio-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.audio-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px;
  background: var(--bg-input); border: 1px solid var(--border-light); border-radius: var(--r-md); }
.audio-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-acts { display: flex; gap: 6px; flex-shrink: 0; }
.audio-vol { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 0.84rem; font-weight: 700; color: var(--text-secondary); }
.audio-vol input[type="range"] { flex: 1; accent-color: var(--accent); height: 4px; }
.audio-hr { border: none; border-top: 1px solid var(--border-light); margin: 18px 0; }

/* ===== BetBack config (Definições) (#77) ===== */
.bb-cfg-list { display: flex; flex-direction: column; gap: 8px; }
.bb-cfg-row { display: flex; align-items: flex-end; gap: 10px; }
.bb-cfg-row label { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 0.74rem; font-weight: 700; color: var(--text-secondary); }
.bb-cfg-row input { padding: 8px 10px; border: 1px solid var(--border-light); border-radius: var(--r-sm); background: var(--bg-input); color: var(--text-primary); font-size: 0.92rem; }
.bb-cfg-row .bb-del { flex: 0 0 auto; }

/* Pagamentos automáticos */
.pay-sec { margin-bottom: 6px; }
.pay-toggle { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; margin-bottom: 4px; }
.pay-input { display: block; width: 100%; margin: 6px 0; padding: 9px 11px; border: 1px solid var(--border-light); border-radius: var(--r-sm); background: var(--bg-input); color: var(--text-primary); font-size: 0.92rem; }
.pay-bank-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.pay-bank-actions .pay-input { width: auto; flex: 1 1 180px; margin: 0; }
.btn-xs { padding: 3px 8px; font-size: 0.74rem; border-radius: var(--r-sm); }

/* Divisão irregular da conta (split por %) */
.split-editor { margin: 8px 0 4px; padding: 10px; border-radius: var(--r-md, 12px); background: var(--bg-input, rgba(0,0,0,0.03)); border: 1px solid var(--border-light); }
.split-mode-toggle { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--bg-card, #fff); box-shadow: inset 0 0 0 1px var(--border-light); margin-bottom: 8px; }
.split-mode-opt { padding: 5px 16px; border: none; border-radius: 999px; background: none; font-weight: 800; font-size: 0.82rem; color: var(--text-secondary); cursor: pointer; }
.split-mode-opt.active { background: linear-gradient(160deg, var(--green, #18c96d), #0ea65a); color: #fff; box-shadow: 0 2px 8px rgba(24,201,109,0.4); }
.split-rows { display: flex; flex-direction: column; gap: 6px; }
.split-row { display: flex; align-items: center; gap: 8px; }
.split-name { flex: 1; font-weight: 700; font-size: 0.9rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.split-pct { display: inline-flex; align-items: center; gap: 2px; }
.split-input { width: 58px; padding: 6px 8px; text-align: right; border: 1px solid var(--border-light); border-radius: var(--r-sm); background: var(--bg-card, #fff); color: var(--text-primary); font-weight: 800; font-size: 0.9rem; }
.split-input-eur { width: 74px; }
.split-mode-opt { padding: 5px 13px; }
.split-pct { color: var(--text-secondary); font-size: 0.82rem; }
.split-pct-fixed { min-width: 42px; text-align: right; font-weight: 800; color: var(--text-secondary); font-size: 0.86rem; }
.split-eur { min-width: 70px; text-align: right; font-weight: 800; color: var(--green, #18c96d); font-size: 0.92rem; }
.split-sum { margin-top: 8px; font-size: 0.8rem; font-weight: 800; text-align: right; }
.split-sum.ok { color: var(--green, #18c96d); }
.split-sum.bad { color: var(--danger, #e2334b); }

/* ============================================================
   MENU DE JOGOS — design partilhado e profissional (igual ao cliente)
   ============================================================ */
.gc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 460px; margin: 8px auto 14px; }
.gc-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 12px 13px;
  border-radius: 18px; cursor: pointer; text-align: center; overflow: hidden;
  background: linear-gradient(165deg, color-mix(in srgb, var(--gc) 17%, #141826), color-mix(in srgb, var(--gc) 6%, #0c0f19));
  border: 1.5px solid color-mix(in srgb, var(--gc) 45%, transparent);
  box-shadow: 0 8px 22px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s; }
.gc-card::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 48% at 50% 0%, color-mix(in srgb, var(--gc) 30%, transparent), transparent 70%); opacity: 0.7; }
.gc-card:hover { transform: translateY(-4px) scale(1.02); border-color: var(--gc);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--gc) 42%, rgba(0,0,0,0.5)); }
.gc-card:active { transform: translateY(-1px) scale(0.99); }
.gc-emblem { position: relative; width: 60px; height: 60px; display: grid; place-items: center;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)); animation: gcEmblemFloat 3s ease-in-out infinite; }
.gc-emblem svg { width: 100%; height: 100%; display: block; }
@keyframes gcEmblemFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.gc-text { position: relative; display: flex; flex-direction: column; gap: 1px; }
.gc-name { font-size: 0.92rem; font-weight: 900; letter-spacing: 0.02em; color: #fff; }
.gc-desc { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.6); }
.gc-go { position: relative; margin-top: 3px; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.09em; color: var(--gc);
  padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--gc) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent); transition: background 0.16s, color 0.16s; }
.gc-card:hover .gc-go { background: var(--gc); color: #0c0f19; }
@media (prefers-reduced-motion: reduce) { .gc-emblem { animation: none; } }

/* ===== Modo Bolsa ===== */
.bolsa-card-on { border: 1px solid var(--green); box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent); }
.bolsa-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); }
.bolsa-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); flex: 0 0 auto;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent); animation: bolsaPulse 1.8s infinite; }
@keyframes bolsaPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.bolsa-pending-note { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); font-size: 0.88rem; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bolsa-settle-list { display: flex; flex-direction: column; gap: 14px; max-height: 56vh; overflow-y: auto; }
.bolsa-settle { padding: 14px; border-radius: var(--r-md); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.bolsa-settle-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.bolsa-settle-total { font-weight: 900; color: var(--green); white-space: nowrap; }
.bolsa-settle-items { list-style: none; padding: 0; margin: 0 0 12px; font-size: 0.84rem; color: var(--text-muted); }
.bolsa-settle-items li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.bolsa-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bolsa-opt { padding: 10px 6px; border-radius: var(--r-sm); border: 1.5px solid var(--border);
  background: var(--bg-input); font-weight: 700; font-size: 0.84rem; cursor: pointer; transition: all 0.14s; color: var(--text-primary); }
.bolsa-opt:hover { border-color: var(--accent); color: var(--text-primary); }
.bolsa-opt.active { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-contrast); }
.bolsa-partial { margin-top: 12px; }
.bolsa-partial label { font-size: 0.84rem; font-weight: 700; }

/* ============================================================
   Tema escuro — toques neumórficos em inputs e botões secundários
   ============================================================ */
[data-theme="dark"] .card { border-color: var(--border); }
[data-theme="dark"] .form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] select.form-control {
  border-color: var(--border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
[data-theme="dark"] .form-control:focus { border-color: var(--accent); box-shadow: var(--ring); }

[data-theme="dark"] .bolsa-opt { box-shadow: var(--shadow-xs); }
[data-theme="dark"] .bolsa-opt.active { box-shadow: inset 2px 2px 5px rgba(0,0,0,.35); }

/* ============================================================
   Perfil do cliente — seleção múltipla de compras + checkpoints
   ============================================================ */
.sel-col { width: 40px; text-align: center; }
.sel-col input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); vertical-align: middle; }
.sel-summary { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 22px 4px;
  padding: 12px 16px; border-radius: var(--r-md); background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); font-size: 0.92rem; animation: adsMiniIn 0.25s ease both; }
.sel-summary[hidden] { display: none; }
.sel-summary .sel-summary-total { margin-left: auto; }
.sel-summary .sel-summary-total strong { color: var(--green); font-size: 1.15rem; }
.sel-summary strong { font-weight: 800; }

.checkpoint-row td { padding: 0 !important; background: transparent; }
.checkpoint-line { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 10px 14px;
  border-radius: var(--r-md); background: color-mix(in srgb, var(--amber) 12%, transparent);
  border-left: 4px solid var(--amber); }
.checkpoint-flag { color: var(--amber); display: inline-flex; flex: 0 0 auto; }
.checkpoint-text { font-weight: 700; color: var(--text-primary); flex: 1; white-space: pre-wrap; word-break: break-word; }
.checkpoint-date { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.del-checkpoint-btn { color: var(--text-muted) !important; padding: 4px 8px !important; flex: 0 0 auto; }
.del-checkpoint-btn:hover { color: var(--red) !important; }

/* ============================================================
   Histórico de Bolsas (modo bolsa) + badge no histórico normal
   ============================================================ */
.bolsa-chip { background: color-mix(in srgb, var(--amber) 18%, transparent) !important; color: var(--amber) !important; }
.bolsa-sess-card { margin-bottom: 16px; }
.bolsa-sess-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bolsa-sess-head h3 { display: flex; align-items: center; gap: 8px; }
.bolsa-sess-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 3px; font-weight: 500; }
.bolsa-sess-status { font-size: 0.74rem; font-weight: 800; padding: 4px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.bolsa-sess-status.active { background: var(--green-bg); color: var(--green); }
.bolsa-sess-status.settled { background: var(--accent-bg); color: var(--accent-light); }
.bolsa-sess-status.open { background: var(--amber-bg); color: var(--amber); }
.bolsa-sess-totals { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.bolsa-sess-kpi { flex: 1 1 120px; background: var(--bg-input); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.bolsa-sess-kpi span { font-size: 0.76rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.bolsa-sess-kpi strong { font-size: 1.3rem; font-weight: 800; }
.bolsa-sess-table th { font-size: 0.76rem; }
.bolsa-sess-toggle { margin-top: 12px; }
.bolsa-sess-toggle.open { color: var(--accent) !important; }
.bolsa-sess-sales { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 6px; }
.bolsa-sess-sales table td { font-size: 0.85rem; }

/* ============================================================
   CARRINHO (Vender) — o botão "Finalizar Venda" NUNCA pode
   ficar fora do ecrã.
   Problema anterior: o painel tinha altura fixa (60vh) e o
   rodapé crescia com o checkout, transbordando para fora.
   Agora: o rodapé tem scroll próprio e o botão fica colado
   em baixo (sticky), sempre visível e clicável.
   Usa dvh (altura real do ecrã) — em telemóveis o 100vh fica
   por baixo da barra do browser.
   ============================================================ */
.cart {
  max-height: 72vh;
  max-height: min(72vh, calc(100dvh - 40px));
}
.cart-items {
  min-height: 0;          /* permite encolher dentro do flex */
  flex: 1 1 auto;
}
.cart-footer {
  min-height: 0;
  flex: 0 1 auto;
  overflow-y: auto;       /* o checkout longo passa a rolar aqui */
  overscroll-behavior: contain;
}
/* o botão acompanha sempre o fundo do rodapé */
.cart-footer #finalizeSaleBtn,
.cart-footer > .btn-block:last-child {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-bottom: 0;
  box-shadow: 0 -10px 16px -6px var(--bg-card);
}

@media (max-width: 768px) {
  .cart {
    max-height: 76vh;
    max-height: min(76dvh, calc(100dvh - 78px));
  }
}

/* a área principal também usa a altura real do ecrã */
.main-content { height: 100dvh; }

/* ============================================================
   CAMADA PREMIUM — grafite + dourado
   Profundidade nítida, tipografia com carácter e ouro só onde
   conta. Vem no fim para ganhar à cascata.
   ============================================================ */

/* ---- Fundo com profundidade (não é um cinzento chapado) ---- */
body {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(227,180,74,0.055), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(120,150,255,0.04), transparent 55%),
    var(--bg-body);
}

/* ---- Tipografia ---- */
h1, h2, h3, .page-header h1, .page-header h2, .card-header h3 {
  font-family: var(--font-display);
  letter-spacing: -0.022em;
  font-weight: 700;
}
.page-header h1, .page-header h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.page-subtitle { color: var(--text-muted); font-size: 0.9rem; }
/* dígitos alinhados — dá ar profissional aos valores */
.stat-value, .cart-total-value, .order-total, .customer-debt-value,
.money, .sales-day-meta, .bolsa-sess-kpi strong, .mth-val, td.fw-600 {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.stat-value, .cart-total-value, .customer-debt-value {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

/* ---- Cartões: superfície com gradiente subtil + fio de luz ---- */
.card, .stat-card, .summary-item, .trend-card, .product-card, .order-card, .account-card {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 42%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--normal), box-shadow var(--normal), border-color var(--normal);
}
.card:hover, .stat-card:hover, .product-card:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow-md);
}
.card-header { border-bottom: 1px solid var(--border); }

/* ---- Botões ---- */
.btn {
  font-weight: 650;
  letter-spacing: -0.006em;
  border-radius: 12px;
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast), border-color var(--fast);
}
.btn:active { transform: translateY(1px) scale(0.995); }

/* Primário = OURO (a ação principal, uma por ecrã) */
.btn-primary {
  background: var(--accent-grad);
  border: none;
  color: var(--accent-contrast);
  font-weight: 750;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  box-shadow: 0 6px 18px rgba(201,154,46,0.30), inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 26px rgba(201,154,46,0.42), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* Sucesso = esmeralda (finalizar / receber) */
.btn-success {
  background: linear-gradient(135deg, #4ADE9B 0%, #22C07C 55%, #16A868 100%);
  border: none; color: #062617; font-weight: 800;
  box-shadow: 0 6px 18px rgba(34,192,124,0.32), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-success:hover { filter: brightness(1.05); box-shadow: 0 12px 30px rgba(34,192,124,0.45), inset 0 1px 0 rgba(255,255,255,0.45); }

.btn-danger { background: var(--red-bg); border: 1px solid transparent; color: var(--red); font-weight: 700; }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-ghost) {
  background: var(--bg-card-2);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
}
.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-ghost):hover {
  background: var(--bg-card-hover); border-color: var(--accent); color: var(--text-primary);
}

/* ---- Campos ---- */
.form-control, .search-bar input, select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 11px;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.form-control:focus, .search-bar input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  outline: none;
}

/* ---- Navegação lateral ---- */
.sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border); }
.nav-item { border-radius: 11px; font-weight: 600; }
.nav-item.active {
  background: linear-gradient(90deg, var(--accent-bg-strong), var(--accent-bg));
  color: var(--accent-light);
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-item.active .nav-icon, .nav-item.active svg { color: var(--accent); stroke: var(--accent); }

/* ---- Navegação do telemóvel ---- */
.mobile-nav { background: color-mix(in srgb, var(--bg-sidebar) 92%, transparent); }
.mobile-nav-item.active { color: var(--accent); }
.mobile-nav-item.active .nav-icon { color: var(--accent); }

/* ---- Etiquetas de estado ---- */
.badge { border-radius: 999px; font-weight: 750; letter-spacing: 0.01em; padding: 4px 11px; }
.badge--paid { background: var(--green-bg); color: var(--green); }
.badge--partial { background: var(--amber-bg); color: var(--amber); }
.badge--unpaid { background: var(--red-bg); color: var(--red); }

/* ---- Carrinho: o botão de finalizar tem de gritar ---- */
.cart { box-shadow: var(--shadow-lg); border: 1px solid var(--border-light); }
.cart-header { font-family: var(--font-display); }
.cart-total-value { color: var(--accent-light); }
.cart-footer #finalizeSaleBtn {
  border-radius: 14px;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* ---- Valores nunca partem a meio (matava o ar premium) ---- */
.stat-value, .cart-total-value, .customer-debt-value, .order-total,
.bolsa-sess-kpi strong, .summary-value {
  white-space: nowrap;
}
.stat-card { padding: 20px 22px; gap: 16px; align-items: center; }
.stat-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stat-value { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.1; font-weight: 750; }
.stat-label {
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.stat-icon { width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.stat-card::before { width: 3px; border-radius: 3px; }

/* tabelas com mais ar */
.table th {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; padding: 14px 16px;
}
.table td { padding: 15px 16px; }
.table tbody tr { transition: background var(--fast); }
.table tbody tr:hover { background: var(--bg-card-2); }

/* ============================================================
   MONTRA DIGITAL (aba Ads) — desenhada para ser lida à distância
   Foto a sangrar, nome enorme, preço em ouro, movimento calmo.
   ============================================================ */
.ads-stage-showcase { overflow: visible !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; }

.mt {
  --mt-gold: #E3B44A;
  display: flex; flex-direction: column; gap: 16px;
  background: radial-gradient(1000px 500px at 20% -10%, rgba(227,180,74,0.07), transparent 60%), #0B0D10;
  border: 1px solid var(--border); border-radius: var(--r-xl); padding: 18px;
  box-shadow: var(--shadow-md);
}

/* --- barra superior --- */
@keyframes mtPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* --- palco (produto em destaque) --- */
@keyframes mtKen { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); } }

/* --- carrossel inferior --- */
@keyframes mtSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- ecrã inteiro: a montra ocupa tudo --- */

/* --- telemóvel --- */
/* o carrossel não pode esticar a montra para fora do ecrã */

/* ============================================================
   CAMADA PREMIUM — VENDER (POS)
   ============================================================ */

/* --- Pesquisa e categorias --- */
.pos-search .search-bar input {
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--bg-input);
  border-radius: var(--r-pill);
  padding: 13px 16px 13px 44px;
  font-size: 0.95rem;
}
.pos-search .search-bar > svg { left: 16px; }
.pos-add-custom { border-radius: var(--r-pill); padding-inline: 18px; }

.pos-chips { gap: 9px; padding-block: 2px 12px; }
.pos-chip {
  background: var(--bg-card-2);
  border-color: var(--border);
  padding: 9px 17px;
  letter-spacing: .01em;
}
.pos-chip.active {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--accent-contrast);
  font-weight: 760;
  box-shadow: 0 6px 18px rgba(227,180,74,.22), inset 0 1px 0 rgba(255,255,255,.35);
}

/* --- Cartões de produto --- */
.pos-products-grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 14px; }
.pos-card {
  background:
    radial-gradient(120% 90% at 50% -30%, rgba(255,255,255,.055), transparent 60%),
    var(--bg-card);
  border-radius: var(--r-lg);
  padding: 15px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.pos-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--accent-grad); opacity: 0;
  transition: opacity var(--fast); pointer-events: none;
  mix-blend-mode: overlay;
}
.pos-card:hover { border-color: var(--border-light); box-shadow: var(--shadow-sm); }
.pos-card:hover::after { opacity: .10; }
.pos-card.in-cart {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(227,180,74,.10), rgba(227,180,74,.03)), var(--bg-card);
  box-shadow: 0 8px 26px rgba(227,180,74,.16), inset 0 0 0 1px rgba(227,180,74,.45);
}
.pos-card-icon { width: 48px; height: 48px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.pos-card-name { font-weight: 640; letter-spacing: -0.005em; }
.pos-card-price {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 1.06rem;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.pos-card-qty {
  background: var(--accent-grad); color: var(--accent-contrast);
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  top: 10px; right: 10px;
}
.pos-card-promo {
  position: absolute; top: 10px; left: 10px;
  background: var(--red); color: #fff;
  font-size: .6rem; font-weight: 800; letter-spacing: .08em;
  padding: 3px 7px; border-radius: 6px;
}
.pos-price-old { color: var(--text-muted); text-decoration: line-through; font-size: .8rem; -webkit-text-fill-color: var(--text-muted); }

/* --- Quem está a comprar --- */
.customer-picker {
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  border-radius: var(--r-lg);
  padding: 16px 18px;
}

/* --- Carrinho --- */
.cart { border-radius: var(--r-xl); background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card)); }
.cart-header { font-family: var(--font-display); letter-spacing: -0.01em; }
.cart-count { background: var(--accent-grad); color: var(--accent-contrast); }
.cart-total-value {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 1.75rem; font-weight: 700; white-space: nowrap;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cart-footer { background: linear-gradient(180deg, transparent, rgba(0,0,0,.28)); }

/* O botão que NUNCA pode desaparecer */
.cart-footer #finalizeSaleBtn,
.cart-footer .btn-block {
  min-height: 56px;
  font-size: 1.02rem;
  font-weight: 780;
  letter-spacing: .01em;
  border-radius: var(--r-md);
  box-shadow: 0 10px 26px rgba(227,180,74,.26), inset 0 1px 0 rgba(255,255,255,.32);
}

/* ---- DESKTOP: carrinho ancorado como coluna, sempre visível ---- */
@media (min-width: 1180px) {
  .pos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 384px;
    gap: 24px;
    align-items: start;
  }
  .pos-layout > div:first-child { min-width: 0; }
  .cart {
    position: sticky; top: 18px;
    left: auto; right: auto; bottom: auto;
    width: auto; max-width: none;
    /* a coluna arranca ~119px abaixo do topo (cabeçalho da página),
       por isso a altura tem de descontar isso ou o rodapé cai fora do ecrã */
    max-height: calc(100dvh - 140px);
    overflow: hidden;
    z-index: 5;
    box-shadow: var(--shadow-md);
  }
  .cart.minimized { transform: none; }
  .cart .cart-toggle-btn { display: none; }
  .cart-header { cursor: default; }
  .cart-items { max-height: none; }
}
.cart-item-info { display: flex; flex-direction: column; gap: 2px; }
.cart-item-name, .cart-item-price { display: block; }
.cart-item-total { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   CORREÇÃO CRÍTICA — overflow horizontal em telemóvel
   O body é flex; sem min-width:0 o layout esticava até 679px
   num ecrã de 375px e cortava botões e cartões.
   ============================================================ */
/* body é flex; .main-content é o flex item. Sem min-width:0 o
   min-content dos filhos (ex.: circulos de clientes) esticava a
   coluna para lá do ecrã e cortava botões em telemóvel. */
.main-content { min-width: 0; }
#pageContent { min-width: 0; max-width: 100%; }

/* --- VENDER em telemóvel --- */
@media (max-width: 768px) {
  .pos-products-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .pos-card { padding: 12px; }
  .pos-card-icon { width: 40px; height: 40px; }
  .pos-card-name { font-size: 0.86rem; }
  .pos-card-price { font-size: 1rem; }
  .pos-search { flex-wrap: wrap; }
  .pos-search .search-bar { flex: 1 1 100%; }
  .pos-add-custom { flex: 1 1 100%; justify-content: center; }
  .cart-footer #finalizeSaleBtn,
  .cart-footer .btn-block { min-height: 58px; font-size: 1.05rem; }
  /* espaço para o carrinho minimizado não tapar o fim da página */
  .pos-layout { padding-bottom: 150px; }
}
/* O rodapé do carrinho (Total + Finalizar) nunca encolhe:
   quem cede espaço é a lista de itens, que tem scroll próprio. */
.cart-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.cart-footer { flex: 0 0 auto; min-height: 0; overflow: visible; }

/* Rede de segurança: se uma tabela não couber no telemóvel,
   passa a deslizar na horizontal em vez de cortar colunas e botões.
   Quando cabe, nada muda (sem barra, sem clipping). */
@media (max-width: 768px) {
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .table-wrapper::-webkit-scrollbar { height: 5px; }
  .table-wrapper::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 99px; }
}

/* ============================================================
   MODO "UMA MÃO" — seletor de cliente dentro do carrinho
   Fica encostado ao rodapé, logo acima do Total e do Finalizar,
   para o polegar chegar a tudo sem sair da mesma zona do ecrã.
   ============================================================ */
.customer-picker--cart {
  flex: 0 0 auto;          /* nunca encolhe: quem cede espaço é a lista de itens */
  min-height: 0;
  margin: 0;
  padding: 12px 16px 10px;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}
.customer-picker--cart .customer-selector-label {
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.customer-picker--cart .cust-picker-hint {
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
  font-weight: 640;
}
.customer-picker--cart .customer-circles {
  gap: 10px;
  padding: 2px 0 6px;
  flex-wrap: nowrap;
  align-items: flex-start;
}
/* Opções de pagamento em 2x2 dentro do carrinho: metade da altura,
   e "Fiado"/"MB WAY" deixam de ficar cortados. */
.customer-picker--cart .cust-pay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 132px;
  margin-top: 7px;
}
.customer-picker--cart .cust-pay-opt { padding: 6px 4px; }
.customer-picker--cart .cust-pay-amt { width: 132px; }
.customer-picker--cart .cust-slot .cust-circle { width: 64px; }
.customer-picker--cart .cust-circle-av { width: 42px; height: 42px; font-size: .95rem; }
.customer-picker--cart .cust-circle-name { font-size: .68rem; }

@media (max-width: 768px) {
  /* mais espaço para os itens: o seletor fica compacto */
  .customer-picker--cart { padding: 10px 14px 8px; }
  .customer-picker--cart .cust-slot .cust-circle { width: 60px; }
  .customer-picker--cart .cust-circle-av { width: 40px; height: 40px; }
  /* a grelha já não precisa de espaço para o antigo bloco no fundo */
  .pos-layout { padding-bottom: 110px; }
}

/* ============================================================
   CLIENTES — resumo do que interessa e lista que responde
   à pergunta "quem me deve?" sem ter de somar nada
   ============================================================ */
.cust-resumo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.cust-resumo-bloco {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.cust-resumo-num {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cust-resumo-lbl {
  font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.cust-resumo-bloco.is-alerta .cust-resumo-num { color: var(--red); }
.cust-resumo-bloco--total.is-alerta {
  border-color: rgba(248,113,113,.35);
  background: linear-gradient(180deg, var(--red-bg), var(--bg-card));
}

.cust-filtros { display: flex; gap: 8px; flex-wrap: wrap; }

/* a linha toda é clicável — o cursor tem de o dizer */
#customersTable tbody tr[data-customer-id] { cursor: pointer; }

@media (max-width: 768px) {
  .cust-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cust-resumo-bloco { padding: 11px 10px; border-radius: var(--r-md); }
  .cust-resumo-num { font-size: 1.15rem; }
  .cust-resumo-lbl { font-size: .62rem; letter-spacing: .05em; }
  .cust-filtros { width: 100%; }
  .cust-filtros .pos-chip { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 768px) {
  /* a linha inteira já abre o perfil — o ícone do olho só ocupa espaço */
  #customersTable .view-customer-btn { display: none; }
  /* as ações ficam numa linha só; a tabela desliza se precisar */
  #customersTable .table-actions { flex-wrap: nowrap; }
  /* o @username não vale três linhas de altura no telemóvel */
  #customersTable tbody tr .text-muted[style*="0.74rem"] { display: none; }
}

/* ============================================================
   HISTÓRICO — filtros que não tapam os dados
   Pesquisa + atalhos sempre à vista; o resto abre a pedido.
   ============================================================ */
.hist-filtros { margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.hist-filtros-topo { display: flex; gap: 10px; align-items: stretch; }
.hist-filtros-topo .search-bar { flex: 1 1 auto; max-width: none; }
.hist-mais { flex: 0 0 auto; gap: 7px; white-space: nowrap; }
.hist-mais.is-ativo { border-color: var(--accent); color: var(--accent); }
.hist-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-grad); color: var(--accent-contrast);
  border-radius: var(--r-pill); font-size: .68rem; font-weight: 800;
}
.hist-atalhos { display: flex; gap: 8px; flex-wrap: wrap; }
.hist-avancado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 14px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.hist-avancado select, .hist-avancado input[type="date"] { width: 100%; }

@media (max-width: 768px) {
  .hist-atalhos .pos-chip { flex: 1 1 auto; text-align: center; }
  .hist-avancado { grid-template-columns: 1fr 1fr; }
  .hist-avancado select { grid-column: 1 / -1; }
}
/* display: grid/inline-flex ganham à regra [hidden] do browser — repor */
.hist-avancado[hidden], .hist-badge[hidden] { display: none !important; }

/* ============================================================
   PAGAMENTO POR CLIENTE — a cor do contorno diz tudo
   1 toque = Fiado (vermelho) · 2 = Pago (verde) · 3 = sai
   Manter premido = menu (Fiado / Pago / Sinal / Tirar)
   ============================================================ */
.cust-circle .cust-circle-av {
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1);
}
.cust-circle.pay-unpaid .cust-circle-av {
  box-shadow: 0 0 0 3px var(--red), 0 0 0 6px rgba(248,113,113,.18);
}
.cust-circle.pay-paid .cust-circle-av {
  box-shadow: 0 0 0 3px var(--green), 0 0 0 6px rgba(52,211,153,.18);
}
.cust-circle.pay-partial .cust-circle-av {
  box-shadow: 0 0 0 3px var(--amber), 0 0 0 6px rgba(251,191,36,.18);
}
.cust-circle.active .cust-circle-av { transform: translateY(-1px); }
/* o visto genérico deixa de fazer sentido: a cor já diz o estado */
.cust-circle.active .cust-circle-av::after { display: none; }

.cust-estado {
  display: block; margin-top: 5px;
  font-size: .64rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  text-align: center; white-space: nowrap;
}
.cust-estado--unpaid { color: var(--red); }
.cust-estado--paid { color: var(--green); }
.cust-estado--partial { color: var(--amber); }

/* --- menu de manter premido --- */
.cust-menu {
  position: fixed; z-index: 4000;
  min-width: 190px; padding: 8px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: custMenuIn .14s cubic-bezier(.4,0,.2,1);
}
@keyframes custMenuIn { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.cust-menu-nome {
  font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 4px 8px 8px;
}
.cust-menu-opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 10px; border: none; border-radius: 9px;
  background: transparent; color: var(--text-primary);
  font-family: var(--font); font-size: .88rem; font-weight: 640;
  text-align: left; cursor: pointer;
  transition: background var(--fast);
}
.cust-menu-opt:hover { background: var(--bg-hover); }
.cust-menu-opt.is-on { background: var(--accent-bg); color: var(--accent); }
.cust-menu-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cust-menu-dot--unpaid { background: var(--red); }
.cust-menu-dot--paid { background: var(--green); }
.cust-menu-dot--partial { background: var(--amber); }
.cust-menu-sinal { padding: 4px 6px 6px; }
.cust-menu-sinal[hidden] { display: none !important; }
.cust-menu-sinal input {
  width: 100%; padding: 9px 11px;
  background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--accent); border-radius: 9px;
  font-family: var(--font); font-size: .9rem; outline: none;
}
.cust-menu-sair {
  margin-top: 4px; border-top: 1px solid var(--border);
  border-radius: 0 0 9px 9px; color: var(--text-muted);
  font-weight: 600; font-size: .82rem;
}
.cust-menu-sair:hover { color: var(--red); background: var(--red-bg); }

/* o seletor dentro do carrinho fica mais baixo sem os 4 botões */
.customer-picker--cart .customer-circles { align-items: flex-start; }

/* ============================================================
   TELEMÓVEL — barra de abas maior e layout mais respirado
   ============================================================ */
:root { --nav-h: 74px; }

@media (max-width: 768px) {
  /* --- barra de abas: alvos de toque generosos --- */
  .mobile-nav {
    padding: 8px 6px calc(env(safe-area-inset-bottom, 0px) + 8px);
    gap: 4px;
    background: linear-gradient(180deg, rgba(20,24,29,.97), var(--bg-sidebar));
    backdrop-filter: blur(12px);
    box-shadow: 0 -10px 30px rgba(0,0,0,.45);
  }
  .mobile-nav-item {
    min-height: 58px;          /* acima do mínimo recomendado de toque */
    padding: 9px 4px;
    gap: 5px;
    justify-content: center;
    border-radius: 14px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: background var(--fast), color var(--fast);
  }
  .mobile-nav-item .nav-icon { width: 24px; height: 24px; }
  /* a aba ativa ganha uma pastilha dourada — vê-se de relance */
  .mobile-nav-item.active {
    background: var(--accent-bg);
    box-shadow: inset 0 0 0 1px rgba(227,180,74,.28);
  }
  .mobile-nav-item:active { transform: scale(.94); }

  /* o conteúdo não pode ficar por baixo da barra */
  .main-content { padding: 64px 14px calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 22px); }
  .cart { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 6px); }

  /* --- respiração geral --- */
  .page-header { gap: 10px; margin-bottom: 18px; }
  .page-header h1 { font-size: 1.45rem; }
  .page-header .page-actions { width: 100%; }
  .page-header .page-actions .btn { flex: 1 1 auto; justify-content: center; }
  .card { border-radius: var(--r-lg); }
  .card-header { padding: 14px 14px 12px; }
  .card-body { padding: 14px; }
  .mb-16 { margin-bottom: 12px; }

  /* separadores internos (Vendas/Bolsas, Encomendas) mais fáceis de acertar */
  .orders-subtab, .seg-option, .lj-tab, .ads-mode {
    min-height: 44px; padding-inline: 16px;
  }
  .orders-subtabs, .ads-mode-toggle { gap: 6px; }
  .ads-mode-toggle { width: 100%; }
  .ads-mode { flex: 1; }

  /* qualquer botão continua confortável de tocar */
  .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; }
  .table-actions .btn-sm { min-height: 34px; min-width: 34px; }
}
@media (max-width: 768px) {
  /* 7 abas não cabem com legenda: mostra-se a legenda só na aba ativa,
     que ganha uma pastilha maior. As outras ficam com o ícone bem visível. */
  .mobile-nav-item { flex: 1 1 0; min-width: 0; }
  .mobile-nav-item span {
    max-width: 0; opacity: 0; overflow: hidden;
    transition: max-width var(--normal), opacity var(--fast);
  }
  .mobile-nav-item.active { flex: 2.6 1 0; flex-direction: row; gap: 7px; padding-inline: 10px; }
  .mobile-nav-item.active span { max-width: 100px; opacity: 1; }
  .mobile-nav-item .nav-icon { flex-shrink: 0; }
}
@media (max-width: 768px) {
  /* afinação: alargar as abas inativas para ficarem acima dos ~44px de toque */
  .mobile-nav { gap: 2px; padding-inline: 4px; }
  .mobile-nav-item.active { flex: 2.1 1 0; }
}
@media (max-width: 768px) {
  /* a pastilha ativa mede-se pelo texto: nenhuma legenda fica cortada */
  .mobile-nav-item.active { flex: 0 0 auto; }
  .mobile-nav-item.active span { max-width: none; white-space: nowrap; }
}

/* ============================================================
   CANAL DA LOJA — a aba Ads
   Um canal de televisão para a montra. O palco é sempre escuro
   (é uma montra, não uma página) e toma a cor do produto que
   está em cena através de --cor. Cada cena entra com a sua
   própria coreografia; as vendas reais fazem-no reagir.
   ============================================================ */

.ads-stage {
  margin-top: 16px;
  padding: 0;
  min-height: 0;
  display: block;
  overflow: hidden;
  background: #06080B;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.ads-stage-showcase { padding: 0 !important; display: block !important; }

.cn {
  --ouro: #E3B44A;
  --cor: #E3B44A;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.3vh, 16px);
  padding: clamp(13px, 1.7vw, 24px);
  min-height: clamp(555px, 79vh, 940px);
  color: #F3F5F8;
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--cor) 12%, transparent), transparent 60%),
    linear-gradient(162deg, #0D1117 0%, #06080B 58%, #0A0E14 100%);
  overflow: hidden;
  font-feature-settings: 'ss01';
  transition: background .9s ease;
}
.cn > *:not(.cn-luz):not(.cn-flashes):not(.cn-faiscas):not(.cn-festa):not(.cn-trono) { position: relative; z-index: 2; min-width: 0; }

/* --- fundo: uma SALA iluminada, não manchas desfocadas.
       Parede, chão, horizonte, anéis finos de luz e uma trama
       têxtil por cima. A cor da cena só tinge; não é o fundo. --- */
.cn-luz { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cn-luz > * { position: absolute; inset: 0; display: block; }

/* 1 · a sala: parede em cima, chão em baixo, linha de horizonte entre os dois */
.cn-luz-sala {
  background:
    /* poça de luz no chão, como num estúdio */
    radial-gradient(72% 34% at 50% 80%, rgba(255,250,238,.17), transparent 74%),
    /* halo da fonte de luz, em cima */
    radial-gradient(56% 38% at 50% 4%, rgba(255,243,214,.18), transparent 72%),
    /* parede → chão, com a dobra suave onde antes havia um risco duro */
    linear-gradient(180deg, #070A10 0%, #0D131B 32%, #141C26 58%, #0E151D 66%, #05080C 100%);
}
/* o horizonte é uma linha de luz que se apaga nas pontas, não uma costura */
.cn-luz-sala::after {
  content: ''; position: absolute; left: 0; right: 0; top: 63.6%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,247,228,.5) 22%, rgba(255,247,228,.62) 50%, rgba(255,247,228,.5) 78%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  filter: blur(1.2px); opacity: .5;
}
/* e espalha-se no chão como um reflexo, sem bordos */
.cn-luz-sala::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(48% 16% at 50% 68%, rgba(255,247,228,.13), transparent 72%);
}

/* 2 · anéis finos a sair da fonte de luz — a tal "guilhoché" de relojoaria */
.cn-luz-arcos {
  background: repeating-radial-gradient(circle at 50% 2%,
    transparent 0 58px, rgba(227,180,74,.085) 58px 59.5px);
  -webkit-mask-image: radial-gradient(86% 78% at 50% 4%, #000 6%, transparent 72%);
  mask-image: radial-gradient(86% 78% at 50% 4%, #000 6%, transparent 72%);
  opacity: .8;
  animation: cnArcos 26s ease-in-out infinite alternate;
}
@keyframes cnArcos { from { transform: scale(1) } to { transform: scale(1.09) } }

/* 3 · trama têxtil fina — vê-se de perto, dá textura de longe */
.cn-luz-trama {
  background:
    repeating-linear-gradient(45deg,  transparent 0 6px, rgba(255,255,255,.028) 6px 7px),
    repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255,255,255,.018) 6px 7px);
  -webkit-mask-image: linear-gradient(180deg, #000 0 58%, rgba(0,0,0,.35) 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 58%, rgba(0,0,0,.35) 72%, transparent 100%);
}

/* 4 · a cor da cena tinge os cantos, sem virar mancha */
.cn-luz-campo { border-radius: 50%; filter: blur(80px); inset: auto; }
.cn-luz-campo:nth-of-type(1) {
  width: 62%; padding-top: 62%; left: -22%; top: -18%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cor) 62%, transparent), transparent 66%);
  opacity: .32; animation: cnCampoA 38s ease-in-out infinite alternate;
}
.cn-luz-campo:nth-of-type(2) {
  width: 54%; padding-top: 54%; right: -18%; bottom: -16%;
  background: radial-gradient(circle, rgba(227,180,74,.6), transparent 68%);
  opacity: .26; animation: cnCampoB 48s ease-in-out infinite alternate;
}
@keyframes cnCampoA { from { transform: translate3d(0,0,0) scale(1) } to { transform: translate3d(8%,6%,0) scale(1.18) } }
@keyframes cnCampoB { from { transform: translate3d(0,0,0) scale(1.1) } to { transform: translate3d(-7%,-9%,0) scale(.94) } }

/* 5 · poeira de luz suspensa */
.cn-luz-motes b {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(var(--s) * 2.6px); height: calc(var(--s) * 2.6px);
  border-radius: 50%; background: rgba(255,248,226,.95);
  box-shadow: 0 0 calc(var(--s) * 8px) rgba(255,230,165,.8);
  opacity: 0; filter: blur(calc((var(--s) - 1) * .45px));
  animation: cnMote var(--t) ease-in-out var(--d) infinite;
}
@keyframes cnMote {
  0%, 100% { opacity: 0; transform: translate3d(0, 16px, 0); }
  18%, 76% { opacity: var(--o); }
  50%      { transform: translate3d(12px, -30px, 0); }
}

/* 6 · varrimento especular de longe a longe */
.cn-luz-varrer {
  inset: -30% auto; width: 44%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.07) 46%, transparent);
  transform: skewX(-14deg); filter: blur(12px);
  animation: cnVarrer 19s ease-in-out 5s infinite;
}
@keyframes cnVarrer { 0% { left: -60% } 55%, 100% { left: 130% } }

/* 7 · grão de filme */
.cn-luz-grao {
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .07; mix-blend-mode: overlay;
  animation: cnGrao .9s steps(3) infinite;
}
@keyframes cnGrao {
  0% { transform: translate3d(0,0,0) } 33% { transform: translate3d(-2%,1%,0) }
  66% { transform: translate3d(1%,-2%,0) } 100% { transform: translate3d(0,0,0) }
}

/* 8 · vinheta */
.cn-luz-vinheta { background: radial-gradient(126% 104% at 50% 40%, transparent 38%, rgba(0,0,0,.55) 100%); }

@media (prefers-reduced-motion: reduce) {
  .cn-luz-campo, .cn-luz-arcos, .cn-luz-motes b, .cn-luz-varrer, .cn-luz-grao { animation: none; }
  .cn-luz-motes b { opacity: var(--o); }
}

/* --- topo --- */
.cn-topo { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 18px); flex: 0 0 auto; }
.cn-marca {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(.86rem, 1.3vw, 1.15rem); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34%;
}
.cn-vivo { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #34D399;
  box-shadow: 0 0 0 0 rgba(52,211,153,.55); animation: cnPulsar 2.4s ease-out infinite; }
@keyframes cnPulsar { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.5) } 70%,100% { box-shadow: 0 0 0 9px rgba(52,211,153,0) } }

.cn-pulso { font-size: clamp(.64rem, .9vw, .76rem); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255,255,255,.42); white-space: nowrap; }
.cn-pulso svg { width: 1em; height: 1em; vertical-align: -.1em; }
.cn-pulso--quente { color: #F7C463; }

.cn-caps { display: flex; gap: 5px; margin-left: auto; flex-wrap: nowrap; overflow: hidden; }
.cn-cap {
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.5); font-family: var(--font); font-weight: 750;
  font-size: clamp(.58rem, .78vw, .7rem); letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: color .25s, background .25s, border-color .25s;
}
.cn-cap:hover { color: #fff; background: rgba(255,255,255,.09); }
.cn-cap.ativo { color: #1B1405; background: var(--accent-grad); border-color: transparent; }

.cn-relogio { font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: clamp(.9rem, 1.5vw, 1.3rem); color: rgba(255,255,255,.72); }

/* --- palco: as cenas vivem aqui dentro e nunca empurram nada --- */
.cn-palco { position: relative; flex: 1 1 auto; min-height: clamp(210px, 30vh, 430px); }
.cn-slot {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; transform: translateX(26px) scale(.985);
  transition: opacity .5s ease, transform .7s cubic-bezier(.2,.8,.25,1);
}
.cn-slot--tras { transform: translateX(-26px) scale(.985); }
.cn-slot--dentro { opacity: 1; transform: none; }
.cn-slot--fora { opacity: 0; transform: translateX(-22px) scale(.99); }

.cn-cena { height: 100%; min-height: 0; display: flex; flex-direction: column;
  gap: clamp(9px, 1.5vh, 18px); }

/* --- coreografia de entrada: nada aparece, tudo entra --- */
@keyframes cnSobe { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes cnSurge { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.cn-slot--dentro .cn-faixa,
.cn-slot--dentro .cn-dq-txt > *,
.cn-slot--dentro .cn-pr-txt > * { animation: cnSobe .62s cubic-bezier(.2,.8,.25,1) both; }
.cn-slot--dentro .cn-dq-txt > *:nth-child(1), .cn-slot--dentro .cn-pr-txt > *:nth-child(1) { animation-delay: .10s; }
.cn-slot--dentro .cn-dq-txt > *:nth-child(2), .cn-slot--dentro .cn-pr-txt > *:nth-child(2) { animation-delay: .18s; }
.cn-slot--dentro .cn-dq-txt > *:nth-child(3), .cn-slot--dentro .cn-pr-txt > *:nth-child(3) { animation-delay: .26s; }
.cn-slot--dentro .cn-dq-txt > *:nth-child(4), .cn-slot--dentro .cn-pr-txt > *:nth-child(4) { animation-delay: .34s; }
.cn-slot--dentro .cn-dq-txt > *:nth-child(5), .cn-slot--dentro .cn-pr-txt > *:nth-child(5) { animation-delay: .42s; }
.cn-slot--dentro .cn-dq-media,
.cn-slot--dentro .cn-pr-media { animation: cnSurge .8s cubic-bezier(.2,.8,.25,1) both; }
.cn-slot--dentro .cn-grelha > *,
.cn-slot--dentro .cn-ults > *,
.cn-slot--dentro .cn-tira > *,
.cn-slot--dentro .cn-combo > * { animation: cnSurge .6s cubic-bezier(.2,.8,.25,1) both; }
.cn-slot--dentro .cn-grelha > *:nth-child(1), .cn-slot--dentro .cn-ults > *:nth-child(1), .cn-slot--dentro .cn-combo > *:nth-child(1) { animation-delay: .10s; }
.cn-slot--dentro .cn-grelha > *:nth-child(2), .cn-slot--dentro .cn-ults > *:nth-child(2), .cn-slot--dentro .cn-combo > *:nth-child(2) { animation-delay: .16s; }
.cn-slot--dentro .cn-grelha > *:nth-child(3), .cn-slot--dentro .cn-ults > *:nth-child(3), .cn-slot--dentro .cn-combo > *:nth-child(3) { animation-delay: .22s; }
.cn-slot--dentro .cn-grelha > *:nth-child(4), .cn-slot--dentro .cn-ults > *:nth-child(4), .cn-slot--dentro .cn-combo > *:nth-child(4) { animation-delay: .28s; }
.cn-slot--dentro .cn-grelha > *:nth-child(5) { animation-delay: .34s; }
.cn-slot--dentro .cn-grelha > *:nth-child(6) { animation-delay: .40s; }
.cn-slot--dentro .cn-grelha > *:nth-child(7) { animation-delay: .46s; }
.cn-slot--dentro .cn-grelha > *:nth-child(8) { animation-delay: .52s; }
.cn-slot--dentro .cn-grelha > *:nth-child(n+9) { animation-delay: .58s; }

/* ------------------------------------------------------------
   PEÇAS
   ------------------------------------------------------------ */

/* o produto num pedestal iluminado — as fotos vêm com fundo
   branco, por isso o branco passa a ser a montra e não um defeito */
.cn-media {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: clamp(13px, 1.5vw, 22px); overflow: hidden;
  background: linear-gradient(168deg, #FFFFFF 0%, #F2F5F9 56%, #E2E7EE 100%);
  box-shadow: 0 26px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.95);
}
/* presa à caixa real do pedestal: com height:100% a imagem resolvia contra
   uma altura que o aspect-ratio depois corrigia, e ficava cortada nas pontas */
.cn-media img { position: absolute; inset: 0; box-sizing: border-box;
  width: 100%; height: 100%; object-fit: contain; padding: 6%;
  filter: drop-shadow(0 14px 26px rgba(18,24,34,.24)); }
.cn-media-sombra { position: absolute; left: 10%; right: 10%; bottom: 0; height: 16%;
  background: radial-gradient(ellipse at 50% 100%, rgba(18,24,34,.20), transparent 72%); pointer-events: none; }

.cn-media--ico {
  background: radial-gradient(72% 72% at 50% 38%, color-mix(in srgb, var(--ic) 26%, #11161D), #090C11 74%);
  box-shadow: 0 26px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
}
.cn-media--ico svg { position: relative; z-index: 2; width: 40%; height: 40%; color: var(--ic);
  filter: drop-shadow(0 12px 28px color-mix(in srgb, var(--ic) 55%, transparent));
  animation: cnFlutua 7s ease-in-out infinite; }
.cn-media--ico .cn-media-sombra { display: none; }
.cn-media-halo { position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; filter: blur(24px);
  background: radial-gradient(circle, color-mix(in srgb, var(--ic) 60%, transparent), transparent 68%);
  animation: cnRespira 5.5s ease-in-out infinite; }
.cn-media-letra { position: absolute; z-index: 1; font-family: var(--font-display); font-weight: 900;
  font-size: 48%; line-height: 1; color: #fff; opacity: .06; }
@keyframes cnFlutua { 0%,100% { transform: translateY(-3%) } 50% { transform: translateY(3%) } }
@keyframes cnRespira { 0%,100% { transform: scale(.94); opacity: .75 } 50% { transform: scale(1.06); opacity: 1 } }
@keyframes cnKen { from { transform: scale(1) } to { transform: scale(1.07) } }
.cn-media--gigante img { animation: cnKen 20s ease-in-out infinite alternate; }

/* preço — sempre a peça mais alta da hierarquia */
.cn-preco { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; }
.cn-preco-num {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; line-height: .95;
  background: linear-gradient(180deg, #FCEFCB 0%, #E3B44A 52%, #C08F22 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cn-preco--g .cn-preco-num { font-size: clamp(2.5rem, 6vw, 5.2rem); }
.cn-preco--m .cn-preco-num { font-size: clamp(1.25rem, 2.4vw, 2rem); }
.cn-preco--p .cn-preco-num { font-size: clamp(.92rem, 1.25vw, 1.12rem); }
.cn-preco-velho { text-decoration: line-through; font-weight: 600; color: rgba(255,255,255,.42); }
.cn-preco--g .cn-preco-velho { font-size: clamp(1rem, 1.7vw, 1.5rem); }
.cn-preco--p .cn-preco-velho { font-size: .72rem; }

.cn-titulo {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 3.3vw, 3.1rem); line-height: 1.03; letter-spacing: -.028em;
  text-wrap: balance;
}

/* selos e tags */
.cn-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-selo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  font-size: clamp(.58rem, .8vw, .72rem); font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.72);
}
.cn-selo svg { width: 1em; height: 1em; }
.cn-selo--promo { background: linear-gradient(120deg,#F2564A,#C0271C); border-color: transparent; color: #fff; }
.cn-selo--top   { background: var(--accent-grad); border-color: transparent; color: #231904; }
.cn-selo--novo  { background: linear-gradient(120deg,#3FBF8F,#26946C); border-color: transparent; color: #04231A; }
.cn-selo--raro  { background: rgba(242,163,60,.16); border-color: rgba(242,163,60,.5); color: #F7C463; }

.cn-tag { position: absolute; top: 7px; left: 7px; z-index: 3;
  padding: 3px 7px; border-radius: 6px; font-size: .56rem; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase; }
.cn-tag--promo { background: #E2483F; color: #fff; }
.cn-tag--top   { background: var(--accent-grad); color: #231904; }
.cn-tag--novo  { background: #3FBF8F; color: #04231A; }

.cn-poupa { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 6px 13px; border-radius: 999px; font-size: clamp(.72rem, 1.05vw, .92rem); font-weight: 700;
  background: rgba(63,191,143,.14); border: 1px solid rgba(63,191,143,.36); color: #8CE7C1; }
.cn-poupa svg { width: 1em; height: 1em; }
.cn-poupa b { color: #B6F2D8; }
.cn-poupa--forte { font-size: clamp(.8rem, 1.3vw, 1.05rem); }

.cn-prova { display: inline-flex; align-items: center; gap: 7px;
  font-size: clamp(.74rem, 1.05vw, .94rem); color: rgba(255,255,255,.58); font-weight: 600; }
.cn-prova svg { width: 1.05em; height: 1.05em; color: var(--cor); }
.cn-prova b { color: #fff; font-weight: 800; }
.cn-prova--aviso { color: #F7C463; }
.cn-prova--aviso svg { color: #F2A33C; }

/* faixa de cabeçalho da cena */
.cn-faixa {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; flex: 0 0 auto;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.11);
  font-size: clamp(.62rem, .92vw, .8rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.cn-faixa svg { width: 1.15em; height: 1.15em; color: var(--cor); }
.cn-faixa--urgente { background: linear-gradient(90deg, rgba(226,72,63,.3), rgba(226,72,63,.06));
  border-color: rgba(226,72,63,.5); color: #FFD9D5; }
.cn-faixa--urgente svg { color: #FF7A6E; }
.cn-faixa--aviso { background: rgba(242,163,60,.14); border-color: rgba(242,163,60,.42); color: #F7C463; }
.cn-faixa--aviso svg { color: #F2A33C; }
.cn-faixa--novo { background: rgba(63,191,143,.14); border-color: rgba(63,191,143,.4); color: #8CE7C1; }
.cn-faixa--novo svg { color: #3FBF8F; }

/* contagem decrescente */
.cn-conta { font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-weight: 800; letter-spacing: .01em; color: var(--ouro); }
.cn-conta--aperta { color: #FF8B7F; animation: cnBate 1s ease-in-out infinite; }
.cn-conta--fim { color: rgba(255,255,255,.4); animation: none; }
@keyframes cnBate { 0%,100% { transform: scale(1) } 50% { transform: scale(1.07) } }

/* cartão pequeno */
.cn-card {
  position: relative; flex: 0 0 auto; width: clamp(104px, 10.5vw, 144px);
  display: flex; flex-direction: column; min-width: 0;
  border-radius: 14px; overflow: hidden; cursor: pointer;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  transition: transform .25s cubic-bezier(.2,.8,.25,1), box-shadow .25s, border-color .25s;
}
.cn-card:hover, .cn-card:focus-visible {
  transform: translateY(-4px); outline: none;
  border-color: rgba(227,180,74,.55); box-shadow: 0 16px 34px rgba(0,0,0,.5);
}
.cn-card .cn-media { flex: 1 1 auto; min-height: 0; height: clamp(60px, 5.4vw, 78px);
  border-radius: 0; box-shadow: none; }
.cn-card .cn-media img { padding: 8%; }
.cn-card-txt { flex: 0 0 auto; padding: 7px 9px 9px; display: flex; flex-direction: column; gap: 2px; }
.cn-card-nome { font-weight: 650; font-size: clamp(.74rem, 1vw, .86rem);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-card-resta { position: absolute; right: 7px; top: 7px; z-index: 3;
  padding: 3px 7px; border-radius: 6px; font-size: .56rem; font-weight: 800;
  background: rgba(242,163,60,.9); color: #2A1A03; }

/* ------------------------------------------------------------
   CENAS
   ------------------------------------------------------------ */

/* 1. DESTAQUE */
.cn-cena--destaque {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center; gap: clamp(14px, 2.8vw, 44px);
}
.cn-dq-media { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.cn-dq-media .cn-media { height: 100%; width: auto; aspect-ratio: 1; max-width: 100%; }
.cn-dq-txt { min-width: 0; min-height: 0; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: clamp(6px, 1vh, 12px); }

/* 2. PROMOÇÃO */
.cn-pr-corpo { flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center; gap: clamp(14px, 2.8vw, 42px); }
.cn-pr-media { position: relative; height: 100%; min-height: 0; display: flex;
  align-items: center; justify-content: center;
  /* folga para o selo de desconto poder assentar no canto sem sair do palco */
  padding: clamp(8px, 1vw, 14px); }
.cn-pr-media .cn-media { height: 100%; width: auto; aspect-ratio: 1; max-width: 100%; }
.cn-pr-txt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(7px, 1.3vh, 15px); }
.cn-selo-desconto {
  position: absolute; top: 0; right: 0; z-index: 4;
  width: clamp(60px, 7.5vw, 108px); aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: baseline; justify-content: center; gap: 1px;
  background: linear-gradient(150deg, #F2564A, #B7231A);
  box-shadow: 0 14px 34px rgba(226,72,63,.45), inset 0 1px 0 rgba(255,255,255,.28);
  font-family: var(--font-display); color: #fff;
  animation: cnSelaGira 6s ease-in-out infinite;
}
.cn-selo-desconto b { font-size: clamp(1.1rem, 2.2vw, 2.1rem); font-weight: 900; line-height: 1; }
.cn-selo-desconto span { font-size: clamp(.6rem, 1vw, .95rem); font-weight: 800; }
@keyframes cnSelaGira { 0%,100% { transform: rotate(-8deg) scale(1) } 50% { transform: rotate(6deg) scale(1.05) } }
.cn-pr-precos { display: flex; align-items: baseline; gap: clamp(8px, 1.6vw, 20px); flex-wrap: wrap; }
.cn-pr-antes { font-size: clamp(1rem, 1.9vw, 1.7rem); font-weight: 600;
  text-decoration: line-through; color: rgba(255,255,255,.4); }
.cn-pr-seta { color: rgba(255,255,255,.3); display: inline-flex; }
.cn-pr-seta svg { width: clamp(16px, 2vw, 28px); height: clamp(16px, 2vw, 28px); }
.cn-pr-agora {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: .95;
  font-size: clamp(2.3rem, 5.6vw, 5rem); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FCEFCB 0%, #E3B44A 52%, #C08F22 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cn-tira { flex: 0 0 auto; display: flex; gap: 10px; overflow: hidden; }

/* 3. PÓDIO */
.cn-podio { flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.8vw, 24px); align-items: end; }
.cn-degrau {
  height: var(--h); min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: clamp(4px, .8vh, 9px);
  padding: clamp(8px, 1.3vw, 17px); border-radius: clamp(12px, 1.4vw, 20px);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.09);
  transform-origin: bottom; cursor: pointer;
}
.cn-slot--dentro .cn-degrau { animation: cnCresce .85s cubic-bezier(.2,.85,.25,1) both; }
.cn-slot--dentro .cn-degrau--1 { animation-delay: .30s; }
.cn-slot--dentro .cn-degrau--2 { animation-delay: .12s; }
.cn-slot--dentro .cn-degrau--3 { animation-delay: .20s; }
@keyframes cnCresce { from { transform: scaleY(0); opacity: 0 } to { transform: scaleY(1); opacity: 1 } }
.cn-degrau--1 {
  background: linear-gradient(180deg, rgba(227,180,74,.24), rgba(227,180,74,.03));
  border-color: rgba(227,180,74,.45); box-shadow: 0 0 70px rgba(227,180,74,.14);
}
.cn-degrau-topo { position: relative; flex: 1 1 auto; min-height: 0; display: flex;
  align-items: center; justify-content: center; width: 100%; }
.cn-media--medalha { width: min(100%, clamp(52px, 7vw, 118px)); aspect-ratio: 1; max-height: 100%; }
.cn-medalha {
  position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); z-index: 4;
  width: clamp(20px, 2.2vw, 30px); height: clamp(20px, 2.2vw, 30px); border-radius: 50%;
  display: grid; place-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(.66rem, 1vw, .88rem);
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.2);
}
.cn-degrau--1 .cn-medalha { background: var(--accent-grad); color: #231904; border-color: transparent;
  box-shadow: 0 6px 18px rgba(227,180,74,.5); }
.cn-degrau-nome { flex: 0 0 auto; margin-top: 6px; font-weight: 700;
  font-size: clamp(.72rem, 1.1vw, .96rem); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cn-degrau-barra { flex: 0 0 auto; width: 70%; height: 3px; border-radius: 99px;
  background: rgba(255,255,255,.09); overflow: hidden; }
.cn-degrau-barra i { display: block; height: 100%; width: 100%; background: var(--accent-grad);
  transform-origin: left; animation: cnBarra 1s .5s cubic-bezier(.2,.8,.25,1) both; }
@keyframes cnBarra { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.cn-degrau-qtd { flex: 0 0 auto; font-size: clamp(.62rem, .9vw, .78rem); color: rgba(255,255,255,.5); }
.cn-degrau-qtd b { color: var(--ouro); font-weight: 800; font-size: 1.15em; }

/* 4. COMBO */
.cn-combo { flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) minmax(0,.92fr);
  align-items: stretch; gap: clamp(8px, 1.8vw, 26px); }
.cn-combo-lado { min-width: 0; min-height: 0; height: 100%; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; cursor: pointer; }
.cn-combo-lado .cn-media { flex: 1 1 auto; min-height: 0; width: auto;
  aspect-ratio: 1; max-width: 100%; }
.cn-combo-nome { font-weight: 700; font-size: clamp(.8rem, 1.3vw, 1.1rem); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cn-combo-mais { align-self: center; display: grid; place-content: center;
  width: clamp(34px, 3.6vw, 58px); aspect-ratio: 1; border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(1.2rem, 2vw, 2rem); color: #231904;
  background: var(--accent-grad); box-shadow: 0 8px 24px rgba(227,180,74,.4);
  animation: cnRespira 3.4s ease-in-out infinite; }
.cn-combo-total { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: clamp(12px, 1.8vw, 26px) clamp(14px, 2vw, 30px); border-radius: clamp(14px, 1.6vw, 22px);
  background: linear-gradient(165deg, rgba(227,180,74,.22), rgba(227,180,74,.03));
  border: 1px solid rgba(227,180,74,.42); }
.cn-combo-lbl { font-size: clamp(.58rem, .8vw, .72rem); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.cn-combo-num { font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  background: linear-gradient(180deg,#FCEFCB,#E3B44A 52%,#C08F22);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.cn-combo-nota { font-size: clamp(.58rem, .85vw, .74rem); color: rgba(255,255,255,.45); }

/* 5. ÚLTIMAS UNIDADES */
.cn-ults { flex: 1 1 auto; min-height: 0; display: grid; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(clamp(130px, 15vw, 200px), clamp(170px, 20vw, 280px)));
  grid-auto-rows: minmax(0, 1fr); gap: clamp(9px, 1.6vw, 20px); }
.cn-ult { position: relative; min-height: 0; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(9px, 1.3vw, 16px); border-radius: clamp(12px, 1.4vw, 18px);
  background: linear-gradient(180deg, rgba(242,163,60,.14), rgba(255,255,255,.015));
  border: 1px solid rgba(242,163,60,.3); }
.cn-ult .cn-media { flex: 1 1 auto; min-height: 0; width: auto; aspect-ratio: 1;
  max-width: 100%; align-self: center; }
.cn-ult > *:not(.cn-media) { flex: 0 0 auto; }
.cn-combo-lado > *:not(.cn-media) { flex: 0 0 auto; }
.cn-ult-num { display: flex; align-items: baseline; gap: 6px; }
.cn-ult-num b { font-family: var(--font-display); font-weight: 900; line-height: 1;
  font-size: clamp(1.4rem, 2.8vw, 2.4rem); color: #F7C463; }
.cn-ult-num span { font-size: clamp(.6rem, .9vw, .76rem); color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.cn-ult-nome { font-weight: 700; font-size: clamp(.76rem, 1.1vw, .95rem);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 6/8. GRELHAS (novidades e mural) */
.cn-grelha { flex: 1 1 auto; min-height: 0; overflow: hidden; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(118px, 12vw, 170px), clamp(150px, 15vw, 215px)));
  grid-auto-rows: min-content; align-content: center; justify-content: center;
  gap: clamp(8px, 1.2vw, 15px); }
.cn-grelha--densa { grid-template-columns: repeat(auto-fit, minmax(clamp(96px, 9.5vw, 140px), clamp(120px, 12vw, 175px))); }
/* nas grelhas o cartão mede-se pelo conteúdo: o pedestal fica quadrado
   em vez de esticar até ao fundo do palco */
.cn-grelha .cn-card { width: auto; align-self: center; }
.cn-grelha .cn-card .cn-media { flex: 0 0 auto; height: auto; aspect-ratio: 1;
  max-height: clamp(88px, 20vh, 205px); }

/* ------------------------------------------------------------
   CARROSSEL, RODAPÉ E REAÇÕES
   ------------------------------------------------------------ */
.cn--sem-rail .cn-rail { display: none; }
.cn-rail { flex: 0 0 auto; width: 100%; min-width: 0; max-width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.cn-rail-track { display: flex; gap: 10px; width: max-content; padding-inline: 4px;
  animation: cnCorre linear infinite; }
.cn-rail:hover .cn-rail-track { animation-play-state: paused; }
@keyframes cnCorre { from { transform: translateX(0) } to { transform: translateX(-50%) } }

.cn-fundo { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; }
.cn-ticker { width: 100%; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.cn-ticker-fita { display: flex; align-items: center; gap: 12px; white-space: nowrap;
  padding-inline: 16px; font-size: clamp(.68rem, .95vw, .82rem); color: rgba(255,255,255,.55); }
.cn-ticker-item b { color: var(--ouro); font-weight: 800; font-variant-numeric: tabular-nums; }
.cn-ticker-sep { color: rgba(255,255,255,.2); }
.cn-ticker-vazio { color: rgba(255,255,255,.32); }

.cn-barra { height: 3px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.cn-barra i { display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--cor), #F5D98B); }

/* "acabou de sair" */
/* Ficavam à direita, mesmo por cima do nome e do preço do produto em
   destaque. Passam para a esquerda, sobre o pedestal, onde tapam muito
   menos e continuam a dar nas vistas. */
.cn-flashes { position: absolute; z-index: 9; display: flex; flex-direction: column; gap: 9px;
  left: clamp(12px, 1.6vw, 24px); top: clamp(54px, 8vh, 100px);
  max-width: min(320px, 42%); pointer-events: none; }
.cn-flash { display: flex; flex-direction: column; gap: 5px;
  padding: 11px 15px; border-radius: 14px;
  background: rgba(9,12,17,.88); backdrop-filter: blur(14px);
  border: 1px solid rgba(227,180,74,.42); box-shadow: 0 18px 44px rgba(0,0,0,.6);
  opacity: 0; transform: translateX(-30px) scale(.96);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.25,1); }
.cn-flash.entra { opacity: 1; transform: none; }
.cn-flash.sai { opacity: 0; transform: translateX(-30px); }
.cn-flash-lbl { display: inline-flex; align-items: center; gap: 5px;
  font-size: .58rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); }
.cn-flash-lbl svg { width: 1.1em; height: 1.1em; }
.cn-flash-itens { display: flex; flex-wrap: wrap; gap: 4px 9px; font-size: .82rem; }
.cn-flash-item b { color: var(--ouro); }
.cn-flash-mais { color: rgba(255,255,255,.45); }
.cn-flash-total { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: #fff; }

/* faíscas na cor do produto */
.cn-faiscas { position: absolute; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; }
.cn-faiscas i { position: absolute; top: -14px; left: var(--x); width: 7px; height: 7px;
  border-radius: 2px; opacity: 0; animation: cnCai var(--t) linear var(--d) forwards; }
@keyframes cnCai {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), 900px) rotate(var(--r)); }
}

/* o produto vendido acende onde quer que esteja */
@keyframes cnVendeu {
  0%   { box-shadow: 0 0 0 0 rgba(227,180,74,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(227,180,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(227,180,74,0); }
}
.cn-vendeu { animation: cnVendeu 1.3s ease-out 2; border-color: rgba(227,180,74,.7) !important; }

/* ondulação dourada no palco quando entra uma venda */
.cn-pulsa::after { content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: radial-gradient(circle at 50% 62%, rgba(227,180,74,.25), transparent 62%);
  animation: cnOnda 1.3s cubic-bezier(.2,.8,.25,1) forwards; }
@keyframes cnOnda { from { opacity: 0; transform: scale(.7) } 40% { opacity: 1 } to { opacity: 0; transform: scale(1.25) } }

/* ------------------------------------------------------------
   COMANDO (fora do palco) E CARTÃO DAS FOTOS
   ------------------------------------------------------------ */
.cn-remoto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 14px; border-radius: var(--r-lg);
  background: var(--bg-card); border: 1px solid var(--border); }
.cn-rem-btn { width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  display: grid; place-content: center;
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); }
.cn-rem-btn:hover { color: var(--accent); border-color: var(--accent); }
.cn-rem-btn svg { width: 17px; height: 17px; }
.cn-rem-sep { width: 1px; height: 22px; background: var(--border); }
.cn-rem-lbl { font-size: .76rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted); }
.cn-rem-min, .cn-rem-max { font-size: .72rem; color: var(--text-muted); }
.cn-remoto input[type="range"] { width: clamp(90px, 16vw, 170px); accent-color: var(--accent); }
.cn-rem-dica { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; color: var(--text-muted); }
.cn-rem-dica svg { width: 14px; height: 14px; }
.cn-fotos-cont { font-size: .76rem; font-weight: 700; color: var(--text-muted); }

/* ------------------------------------------------------------
   APRESENTAR (ecrã inteiro)
   ------------------------------------------------------------ */
.ads-stage:fullscreen { padding: 0 !important; border: none; border-radius: 0; background: #06080B; }
.ads-stage:fullscreen .cn {
  height: 100vh; height: 100dvh; min-height: 0; border-radius: 0;
  padding: clamp(18px, 2.4vh, 38px); gap: clamp(12px, 1.8vh, 24px);
}
.ads-stage:fullscreen .cn-palco { flex: 1 1 auto; min-height: 0; }
/* na apresentação há espaço: o pódio do dono cresce com o resto */
.ads-stage:fullscreen .cn-dono-av { width: clamp(38px, 2.9vw, 54px); height: clamp(38px, 2.9vw, 54px); font-size: clamp(.9rem, 1.1vw, 1.2rem); }
.ads-stage:fullscreen .cn-dono-lugar--1 .cn-dono-av { width: clamp(52px, 3.9vw, 74px); height: clamp(52px, 3.9vw, 74px); font-size: clamp(1.2rem, 1.5vw, 1.7rem); }
.ads-stage:fullscreen .cn-dono-pos { width: clamp(17px, 1.2vw, 23px); height: clamp(17px, 1.2vw, 23px); font-size: clamp(.58rem, .62vw, .72rem); }
.ads-stage:fullscreen .cn-dono-lbl { font-size: clamp(.64rem, .7vw, .8rem); }
.ads-stage:fullscreen .cn-dono-nome { font-size: clamp(.78rem, .9vw, 1rem); }
.ads-stage:fullscreen .cn-dono-lugar--1 .cn-dono-nome { font-size: clamp(.92rem, 1.1vw, 1.2rem); }
.ads-stage:fullscreen .cn-dono-qtd { font-size: clamp(.68rem, .78vw, .86rem); }
.ads-stage:fullscreen .cn-cur-txt { font-size: clamp(1.05rem, 1.5vw, 1.5rem); }
.ads-stage:fullscreen .cn-cur-lbl { font-size: clamp(.62rem, .78vw, .76rem); }
.ads-stage:fullscreen .cn-cur-selo { width: clamp(40px, 3.4vw, 54px); height: clamp(40px, 3.4vw, 54px); }
.ads-stage:fullscreen .cn-cur-selo svg { width: clamp(20px, 1.8vw, 27px); height: clamp(20px, 1.8vw, 27px); }
.ads-stage:fullscreen .cn-rail .cn-card { width: clamp(130px, 9vw, 190px); }
.ads-stage:fullscreen .cn-rail .cn-card .cn-media { height: clamp(90px, 6.5vw, 130px); }
.ads-stage:fullscreen .cn-remoto { display: none; }

/* ------------------------------------------------------------
   TELEMÓVEL E ECRÃS ESTREITOS
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .cn-cena--destaque,
  .cn-pr-corpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0,1.15fr) auto; }
  .cn-dq-txt, .cn-pr-txt { align-items: flex-start; }
  .cn-combo { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; }
  .cn-combo-total { grid-column: 1 / -1; flex-direction: row; gap: 10px; align-items: baseline; justify-content: center; }
}
@media (max-width: 640px) {
  .cn { min-height: clamp(430px, 70vh, 640px); padding: 11px; gap: 9px; }
  .cn-caps { display: none; }
  .cn-pulso { margin-left: auto; }
  .cn-marca { max-width: 46%; }
  .cn-flashes { top: auto; bottom: clamp(56px, 12vh, 96px); left: 11px; right: 11px; max-width: none; }
  .cn-flash, .cn-flash.sai { transform: translateY(16px) scale(.97); }
  .cn-flash.entra { transform: none; }
  .cn-rail { display: none; }
  .cn-podio { gap: 6px; }
  .cn-degrau { padding: 7px 5px; }
  .cn-rem-dica { display: none; }
  .cn-remoto { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .cn *, .cn *::before, .cn *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .cn-slot { transition-duration: .01ms; }
  .cn-rail-track { animation: none; }
}

/* ============================================================
   ESCOLHER CLIENTE — grelha em vez de fila
   Antes era uma tira que deslizava de lado: com muitos clientes
   havia sempre alguém escondido fora do ecrã. Agora vê-se toda a
   gente de uma vez, com os que compram mais vezes à frente, os
   que já estão na venda no topo, e procura por nome quando a
   lista é grande.
   ============================================================ */
.cust-picker-topo {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 10px; margin-bottom: 8px;
}
.cust-picker-topo .customer-selector-label { margin-bottom: 0; min-width: 0; flex: 1 1 auto; }
.cust-picker-topo .cust-picker-hint { overflow: hidden; text-overflow: ellipsis; }

.cust-busca {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--bg-input); border: 1px solid var(--border);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.cust-busca:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.cust-busca svg { width: 14px; height: 14px; color: var(--text-muted); flex: 0 0 auto; }
.cust-busca input {
  width: clamp(88px, 15vw, 150px);
  border: none; background: none; outline: none;
  color: var(--text-primary); font-family: var(--font);
  font-size: .84rem; font-weight: 600;
}
.cust-busca input::-webkit-search-cancel-button { cursor: pointer; }

/* a grelha: toda a gente à vista, sem deslizar de lado */
.customer-picker--cart .customer-circles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 12px 4px;
  align-items: start;
  padding: 2px 2px 4px;
  overflow-x: visible;
  overflow-y: auto;
  max-height: clamp(148px, 26vh, 250px);
  overscroll-behavior-y: contain;
}
.customer-picker--cart .cust-slot { width: 100%; }
.customer-picker--cart .cust-slot .cust-circle { width: 100%; }
.customer-picker--cart .cust-circle-name { max-width: 100%; }

/* separador entre quem já está na venda e os restantes */
.cust-sep {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 9px;
  margin: 2px 0 0;
  font-size: .62rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
}
.cust-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.cust-vazio { grid-column: 1 / -1; padding: 10px 2px; font-size: .82rem; color: var(--text-muted); }
.cust-vazio b { color: var(--accent); }

/* cliente habitual: estrela discreta no canto do avatar */
.cust-estrela {
  position: absolute; right: -2px; top: -2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent-grad);
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.cust-estrela::before {
  content: '★'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; line-height: 1; color: #2B1F05;
}
.cust-circle--habitual .cust-circle-name { color: var(--text-secondary); }

/* alvo de toque maior: no telemóvel o dedo tem de acertar à primeira */
.customer-picker--cart .cust-circle { padding: 4px 2px; border-radius: 10px; }
.customer-picker--cart .cust-circle:hover { background: var(--bg-hover); }
.customer-picker--cart .cust-slot.is-sel .cust-circle { background: var(--accent-bg); }

@media (max-width: 768px) {
  .customer-picker--cart .customer-circles {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    max-height: clamp(140px, 24vh, 210px);
  }
  .cust-picker-topo { flex-wrap: wrap; gap: 6px; }
  .cust-busca { width: 100%; }
  .cust-busca input { width: 100%; }
}

/* o mesmo seletor em grelha na janela de editar venda */
#editCircles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 12px 4px;
  align-items: start;
  overflow-x: visible;
  overflow-y: auto;
  max-height: clamp(150px, 30vh, 250px);
  overscroll-behavior-y: contain;
}
#editCircles .cust-slot,
#editCircles .cust-slot .cust-circle { width: 100%; }
#editCircles .cust-circle { padding: 4px 2px; border-radius: 10px; }
#editCircles .cust-circle:hover { background: var(--bg-hover); }
#editCircles .cust-slot.is-sel .cust-circle { background: var(--accent-bg); }

/* ============================================================
   DONO DO PRODUTO — pódio no Destaque do Canal
   Quem tem levado mais vezes aquele produto ultimamente fica
   com o lugar. É prova social com nome: o melhor argumento de
   venda que a loja tem.
   ============================================================ */
.cn-dono {
  display: flex; flex-direction: column; gap: clamp(4px, .7vh, 8px);
  align-self: stretch; min-width: 0; flex: 0 0 auto;
  padding: clamp(7px, .9vw, 12px) clamp(10px, 1.3vw, 16px);
  border-radius: clamp(11px, 1.2vw, 16px);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.09);
}
.cn-dono-lbl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: clamp(.56rem, .78vw, .7rem); font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.cn-dono-lbl svg { width: 1.15em; height: 1.15em; color: var(--ouro); }

.cn-dono-podio { display: flex; align-items: flex-end; justify-content: flex-start;
  gap: clamp(8px, 1.4vw, 20px); }
.cn-dono-lugar { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.cn-dono-quem { display: flex; align-items: baseline; gap: 5px; max-width: 100%; min-width: 0; }

.cn-dono-av {
  position: relative; flex: 0 0 auto;
  width: clamp(26px, 2.5vw, 36px); height: clamp(26px, 2.5vw, 36px);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: clamp(.72rem, .95vw, .98rem);
  box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.cn-dono-pos {
  position: absolute; right: -3px; bottom: -3px;
  width: clamp(14px, 1.3vw, 19px); height: clamp(14px, 1.3vw, 19px);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: normal; font-weight: 900;
  font-size: clamp(.5rem, .68vw, .64rem);
  background: rgba(255,255,255,.16); color: #fff;
  border: 2px solid #0A0D12;
}
.cn-dono-nome { font-weight: 700; font-size: clamp(.62rem, .88vw, .82rem);
  max-width: clamp(48px, 6vw, 90px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-dono-qtd { font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: clamp(.56rem, .78vw, .7rem); font-weight: 800; color: rgba(255,255,255,.45); }

/* o 1.º lugar é maior, dourado e assenta mais alto */
.cn-dono-lugar--1 { margin-bottom: clamp(3px, .6vh, 8px); }
.cn-dono-lugar--1 .cn-dono-av {
  width: clamp(34px, 3.4vw, 48px); height: clamp(34px, 3.4vw, 48px);
  font-size: clamp(.92rem, 1.2vw, 1.25rem);
  box-shadow: 0 0 0 2px var(--ouro), 0 10px 26px rgba(227,180,74,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
.cn-dono-lugar--1 .cn-dono-pos { background: var(--accent-grad); color: #231904; }
.cn-dono-lugar--1 .cn-dono-nome { color: #fff; font-weight: 800;
  font-size: clamp(.72rem, 1vw, .95rem); max-width: clamp(60px, 8vw, 120px); }
.cn-dono-lugar--1 .cn-dono-qtd { color: var(--ouro); }

/* o pódio acabou de mudar por causa de uma venda */
@keyframes cnDonoMuda {
  0%   { box-shadow: 0 0 0 0 rgba(227,180,74,.55); border-color: rgba(227,180,74,.75); }
  70%  { box-shadow: 0 0 0 12px rgba(227,180,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(227,180,74,0); }
}
.cn-dono--muda { animation: cnDonoMuda 1.4s ease-out 2; }

/* produto ainda sem dono: o lugar está livre — é um convite */
.cn-dono--vago { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cn-dono--vago .cn-dono-convite { font-size: clamp(.68rem, .95vw, .85rem); color: rgba(255,255,255,.45); }

@media (max-width: 640px) {
  .cn-dono { padding: 7px 10px; }
  .cn-dono-podio { gap: 10px; }
  .cn-dono-lugar--3 { display: none; }   /* no telemóvel só o dono e o segundo */
}

/* ============================================================
   AVISOS DE SINCRONIZAÇÃO
   Quando o que se edita não chega ao servidor (sessão expirada
   ou ligação em baixo), tem de se ver. Antes falhava calado.
   ============================================================ */
.sync-aviso {
  position: fixed; z-index: 5000;
  left: 12px; right: 12px; top: 12px;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--bg-card-2, var(--bg-card));
  border: 1px solid var(--border-light, var(--border));
  box-shadow: var(--shadow-lg);
  font-size: .88rem; color: var(--text-primary);
  opacity: 0; transform: translateY(-14px);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.25,1);
}
.sync-aviso.visivel { opacity: 1; transform: none; }
.sync-aviso-ico { flex: 0 0 auto; display: inline-flex; }
.sync-aviso-ico svg { width: 20px; height: 20px; }
.sync-aviso-txt { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.sync-aviso-txt b { font-weight: 800; }
.sync-aviso-btn {
  flex: 0 0 auto; padding: 8px 14px; border-radius: var(--r-pill);
  border: none; cursor: pointer;
  font-family: var(--font); font-weight: 750; font-size: .84rem;
  background: var(--accent-grad); color: var(--accent-contrast, #231904);
}
.sync-aviso-btn:hover { filter: brightness(1.06); }
.sync-aviso--sessao { border-color: var(--red); background:
  linear-gradient(90deg, var(--red-bg), var(--bg-card) 60%); }
.sync-aviso--sessao .sync-aviso-ico { color: var(--red); }
.sync-aviso--rede { border-color: var(--amber); background:
  linear-gradient(90deg, var(--amber-bg), var(--bg-card) 60%); }
.sync-aviso--rede .sync-aviso-ico { color: var(--amber); }

/* pastilha discreta enquanto há coisas por enviar */
.sync-pend {
  position: fixed; z-index: 4900;
  left: 50%; bottom: calc(var(--nav-h, 22px) + env(safe-area-inset-bottom, 0px) + 14px);
  transform: translate(-50%, 12px);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--bg-card-2, var(--bg-card));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: .76rem; font-weight: 700; color: var(--text-secondary);
  white-space: nowrap;
  opacity: 0; transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.25,1);
  pointer-events: none;
}
.sync-pend.visivel { opacity: 1; transform: translate(-50%, 0); }
.sync-pend i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  animation: syncPendPisca 1.4s ease-in-out infinite;
}
@keyframes syncPendPisca { 0%,100% { opacity: .35 } 50% { opacity: 1 } }

@media (min-width: 769px) {
  .sync-aviso { left: auto; right: 20px; top: 16px; max-width: 460px; }
  .sync-pend { bottom: 18px; left: auto; right: 20px; transform: translate(0, 12px); }
  .sync-pend.visivel { transform: translate(0, 0); }
}

/* pastilha verde: a alteração chegou mesmo ao computador */
.sync-pend--ok { border-color: var(--green); color: var(--green); }
.sync-pend--ok svg { width: 14px; height: 14px; }

/* ============================================================
   FESTA DA COMPRA — o cliente é a estrela
   Não é a loja a festejar o dinheiro: é o comprador a ser
   aplaudido, com o avatar dele em grande a saltar e moedas a
   voar. Quem está a ver quer ser o próximo.
   ============================================================ */
.cn-festa {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  pointer-events: none; overflow: hidden; perspective: 1100px;
  opacity: 0; transition: opacity .4s ease;
}
.cn-festa.entra { opacity: 1; }
.cn-festa.sai { opacity: 0; transition: opacity .7s ease; }
.cn-festa-veu {
  position: absolute; inset: 0;
  background:
    radial-gradient(56% 56% at 50% 44%, color-mix(in srgb, var(--cf) 30%, transparent), transparent 70%),
    rgba(4,6,9,.8);
  backdrop-filter: blur(3px);
}

/* raios de luz a rodar por trás do cliente */
.cn-festa-raios { position: absolute; inset: 0; display: grid; place-items: center; }
.cn-festa-raios i {
  position: absolute; width: 2px; height: 130%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ouro) 45%, transparent) 45%, transparent);
  transform: rotate(calc(var(--i) * 30deg)); transform-origin: 50% 50%;
  opacity: 0;
}
.cn-festa.entra .cn-festa-raios { animation: cnRaiosGira 9s linear infinite; }
.cn-festa.entra .cn-festa-raios i { animation: cnRaiosAcende .8s .15s ease forwards; }
@keyframes cnRaiosGira { to { transform: rotate(360deg); } }
@keyframes cnRaiosAcende { to { opacity: .5; } }

.cn-festa-onda { position: absolute; inset: 0; display: grid; place-items: center; }
.cn-festa-onda i {
  position: absolute; width: clamp(140px, 18vw, 240px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ouro) 60%, transparent); opacity: 0;
}
.cn-festa.entra .cn-festa-onda i { animation: cnOndaChoque 1.9s cubic-bezier(.15,.7,.25,1) forwards; }
.cn-festa.entra .cn-festa-onda i:nth-child(2) { animation-delay: .2s; }
.cn-festa.entra .cn-festa-onda i:nth-child(3) { animation-delay: .4s; }
@keyframes cnOndaChoque {
  0%   { opacity: .9; transform: scale(.35); border-width: 3px; }
  100% { opacity: 0;  transform: scale(3.2); border-width: 1px; }
}

.cn-festa-cena {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 22px);
  opacity: 0; transform: translateY(18px) scale(.92);
  transition: transform .75s cubic-bezier(.16,.9,.3,1), opacity .45s ease;
}
.cn-festa.entra .cn-festa-cena { opacity: 1; transform: none; }

.cn-festa-palco { --tam: clamp(120px, 14.5vw, 196px);
  position: relative; display: grid; place-items: center;
  width: var(--tam); aspect-ratio: 1; perspective: 800px; }
.cn-festa-sombra {
  position: absolute; bottom: -6%; left: 16%; right: 16%; height: 12%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.6), transparent 70%);
  filter: blur(6px);
}
.cn-festa.entra .cn-festa-sombra { animation: cnSombraSalta 1.1s .35s ease-in-out 3; }
@keyframes cnSombraSalta { 0%,100% { transform: scaleX(1); opacity: 1 } 45% { transform: scaleX(.6); opacity: .45 } }

/* ---- avatar do cliente em 3D ---- */
.cn-av {
  position: relative; display: grid; place-items: center;
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  transform-style: preserve-3d;
  background:
    radial-gradient(66% 60% at 32% 26%, hsl(var(--h) 78% 72%) 0%, hsl(var(--h) 65% 56%) 40%, hsl(calc(var(--h) + 30) 62% 36%) 100%);
  box-shadow:
    0 22px 46px rgba(0,0,0,.55),
    inset 0 -12px 26px rgba(0,0,0,.3),
    inset 0 10px 22px rgba(255,255,255,.42),
    0 0 0 4px rgba(255,255,255,.1);
}
.cn-av-disco {
  position: absolute; inset: -9%; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ouro) 55%, transparent);
  opacity: .55;
}
.cn-av-letra {
  position: relative; z-index: 2;
  font-family: var(--font-display); font-weight: 900; line-height: 1;
  font-size: calc(var(--tam, 64px) * .44); color: #fff;
  text-shadow: 0 3px 10px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.25);
}
.cn-av-brilho {
  position: absolute; z-index: 3; top: 8%; left: 13%; width: 38%; height: 26%;
  border-radius: 50%; filter: blur(7px); pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.55), transparent 70%);
}
.cn-av--anon { filter: saturate(.25); }

.cn-festa.entra .cn-av--estrela { animation: cnClienteFesteja 2.3s cubic-bezier(.3,.8,.35,1) .1s 2; }
@keyframes cnClienteFesteja {
  0%   { transform: scale(.3) rotateZ(-14deg); }
  18%  { transform: scale(1.14) rotateZ(6deg); }
  30%  { transform: scale(.94) scaleY(.86) rotateZ(-3deg); }   /* aterra e esmaga */
  44%  { transform: translateY(-16%) scale(1.06) scaleY(1.1) rotateZ(4deg); }
  58%  { transform: translateY(0) scale(1) scaleY(.94) rotateZ(-2deg); }
  72%  { transform: translateY(-9%) scale(1.03) rotateZ(3deg); }
  100% { transform: translateY(0) scale(1) rotateZ(0); }
}

/* ---- moedas a saltar do cliente ---- */
.cn-festa-moedas { position: absolute; inset: 0; transform-style: preserve-3d; }
.cn-festa-moedas b {
  position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -13px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; opacity: 0;
  background: radial-gradient(64% 60% at 34% 28%, #FFF6DB, #EFC96E 40%, #C8961F 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), inset 0 -4px 8px rgba(120,80,10,.5), 0 6px 14px rgba(0,0,0,.4);
}
.cn-festa-moedas b i {
  font-family: var(--font-display); font-style: normal; font-weight: 900;
  font-size: 13px; color: #8A5F10;
}
.cn-festa.entra .cn-festa-moedas b { animation: cnMoedaVoa var(--t) var(--d) cubic-bezier(.2,.55,.5,1) forwards; }
@keyframes cnMoedaVoa {
  0%   { opacity: 0; transform: rotate(var(--ang)) translateX(0) rotate(calc(var(--ang) * -1)) translateY(0) rotateY(0); }
  12%  { opacity: 1; }
  55%  { transform: rotate(var(--ang)) translateX(calc(var(--dist) * .62)) rotate(calc(var(--ang) * -1)) translateY(calc(var(--sobe) * -1)) rotateY(calc(var(--gira) * .6)); }
  100% { opacity: 0; transform: rotate(var(--ang)) translateX(var(--dist)) rotate(calc(var(--ang) * -1)) translateY(70px) rotateY(var(--gira)); }
}

.cn-festa-txt { display: flex; flex-direction: column; align-items: center; gap: clamp(3px, .7vh, 8px); text-align: center; }
.cn-festa-lbl {
  padding: 6px 16px; border-radius: 999px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(227,180,74,.45);
  font-size: clamp(.72rem, 1.1vw, .98rem); font-weight: 700; color: #F7DFA4;
}
.cn-festa-lbl b { font-weight: 900; color: #FFF3CE; }
.cn-festa-total {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: .95;
  font-size: clamp(2.4rem, 6.4vw, 5.4rem); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFF8E2 0%, #E3B44A 50%, #B8821F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 30px rgba(227,180,74,.45));
}
.cn-festa-itens { font-size: clamp(.78rem, 1.15vw, 1.02rem); font-weight: 650; color: rgba(255,255,255,.82); }
.cn-festa-quem { font-size: clamp(.66rem, .95vw, .84rem); color: rgba(255,255,255,.45); }

/* ============================================================
   CONQUISTA DO TRONO — 6 encenações
   Um trono em 3D, o dono antigo a perdê-lo e o novo a tomá-lo.
   O palco é o mesmo; muda a coreografia.
   ============================================================ */
.cn-trono {
  position: absolute; inset: 0; z-index: 21;
  display: grid; place-items: center; grid-auto-rows: min-content;
  align-content: center; gap: clamp(10px, 2vh, 22px);
  pointer-events: none; overflow: hidden; perspective: 1200px;
  opacity: 0; transition: opacity .4s ease;
}
.cn-trono.entra { opacity: 1; }
.cn-trono.sai { opacity: 0; transition: opacity .7s ease; }
.cn-tr-veu {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 58% at 50% 42%, color-mix(in srgb, var(--ct) 26%, transparent), transparent 72%),
    rgba(3,5,8,.86);
  backdrop-filter: blur(4px);
}
.cn-tr-luz {
  position: absolute; top: -10%; left: 50%; width: 42%; height: 80%;
  transform: translateX(-50%) perspective(500px) rotateX(16deg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ouro) 30%, transparent), transparent 74%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  filter: blur(18px); opacity: 0;
}
.cn-trono.entra .cn-tr-luz { animation: cnTrLuz 1s .1s ease forwards; }
@keyframes cnTrLuz { to { opacity: .8; } }

.cn-tr-palco {
  position: relative; z-index: 2;
  width: clamp(260px, 34vw, 460px); height: clamp(150px, 20vh, 250px);
  transform-style: preserve-3d;
}
.cn-tr-sombra {
  position: absolute; bottom: 4%; left: 26%; right: 26%; height: 9%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.65), transparent 72%); filter: blur(7px);
}

/* ---- o trono, em 3D ---- */
.cn-tr-movel {
  position: absolute; left: 50%; bottom: 8%;
  width: clamp(84px, 10vw, 128px); height: clamp(96px, 12vw, 150px);
  transform: translateX(-50%) rotateX(-8deg); transform-style: preserve-3d;
}
.cn-tr-movel span { position: absolute; border-radius: 5px;
  background: linear-gradient(160deg, #F3D588 0%, #C9922F 46%, #8C5F12 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px rgba(0,0,0,.45); }
.cn-tr-costas { left: 16%; top: 0; width: 68%; height: 62%; border-radius: 10px 10px 3px 3px; transform: translateZ(-14px); }
.cn-tr-assento { left: 6%; top: 56%; width: 88%; height: 15%; }
.cn-tr-braco { top: 46%; width: 10%; height: 26%; }
.cn-tr-braco--e { left: 2%; }
.cn-tr-braco--d { right: 2%; }
.cn-tr-base { left: 20%; top: 71%; width: 60%; height: 24%; border-radius: 3px 3px 8px 8px;
  background: linear-gradient(160deg, #C9922F, #6E4A0C); }

/* ---- os dois avatares no palco ---- */
.cn-tr-palco .cn-av {
  --tam: clamp(58px, 6.8vw, 94px);
  position: absolute; width: var(--tam); height: auto; aspect-ratio: 1;
  left: 50%; bottom: 30%; margin-left: calc(var(--tam) / -2);
  /* contorno escuro: um cliente de tom dourado desaparecia contra o trono */
  box-shadow:
    0 0 0 3px rgba(6,9,13,.9),
    0 0 0 5px rgba(255,255,255,.14),
    0 18px 38px rgba(0,0,0,.6),
    inset 0 -10px 22px rgba(0,0,0,.3),
    inset 0 8px 18px rgba(255,255,255,.38);
}
.cn-av--velho { z-index: 3; }
.cn-av--novo  { z-index: 4; }

.cn-tr-coroa {
  position: absolute; left: 50%; bottom: 62%; z-index: 6;
  width: clamp(34px, 4vw, 56px); margin-left: calc(clamp(34px, 4vw, 56px) / -2);
  filter: drop-shadow(0 6px 16px rgba(227,180,74,.6));
}
.cn-coroa-svg { display: block; width: 100%; height: auto; }

/* ---- texto ---- */
.cn-tr-txt { position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: clamp(3px, .7vh, 8px); text-align: center; max-width: 90%;
  opacity: 0; transform: translateY(14px); transition: opacity .5s .5s ease, transform .6s .5s cubic-bezier(.2,.8,.25,1); }
.cn-trono.entra .cn-tr-txt { opacity: 1; transform: none; }
.cn-tr-lbl {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(227,180,74,.45);
  font-size: clamp(.58rem, .82vw, .72rem); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: #F7DFA4;
}
.cn-tr-lbl svg { width: 1.1em; height: 1.1em; }
.cn-tr-nomes {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.1rem, 2.6vw, 2.2rem); line-height: 1.1; color: #fff;
}
.cn-tr-nomes b { background: linear-gradient(180deg,#FFF8E2,#E3B44A 55%,#B8821F);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.cn-tr-nomes em { font-style: normal; color: color-mix(in srgb, var(--ct) 70%, #fff); }
.cn-tr-frase { font-size: clamp(.72rem, 1.05vw, .95rem); color: rgba(255,255,255,.62); }
.cn-tr-frase b { color: var(--ouro); font-weight: 800; }
.cn-tr-desafio { font-size: clamp(.62rem, .88vw, .78rem); color: rgba(255,255,255,.36); font-style: italic; }

/* ---- poeira/confetti comum ---- */
.cn-tr-poeira { position: absolute; inset: 0; transform-style: preserve-3d; }
.cn-tr-poeira b {
  position: absolute; top: -4%; left: var(--x); width: 8px; height: 12px; border-radius: 2px;
  background: linear-gradient(180deg, #FFF3CE, #E3B44A 55%, #B8821F);
  opacity: 0; transform: translateZ(var(--z));
}
.cn-trono.entra .cn-tr-poeira b { animation: cnTrPoeira var(--t) var(--d) cubic-bezier(.3,.5,.6,1) forwards; }
@keyframes cnTrPoeira {
  0% { opacity: 0; transform: translate3d(0,0,var(--z)) rotate(0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), 420px, var(--z)) rotate(var(--gira)); }
}

/* ---- estado de partida: cada encenação traz o seu próprio movimento ---- */
.cn-tr-palco .cn-av, .cn-tr-coroa { opacity: 0; }
.cn-trono.entra .cn-tr-palco .cn-av,
.cn-trono.entra .cn-tr-coroa { animation-fill-mode: both; }

/* ============ 1 · GOLPE DE ESTADO ============
   O antigo está sentado; o novo entra de rompante e atira-o dali para fora. */
.cn-trono--golpe.entra .cn-av--velho { animation: cnGolpeVelho 2.6s cubic-bezier(.3,.7,.4,1) both; }
@keyframes cnGolpeVelho {
  0%,34%  { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
  42%     { opacity: 1; transform: translate(-26px,-14px) rotate(-16deg) scale(1.04); }
  100%    { opacity: 0; transform: translate(-300px,-150px) rotate(-560deg) scale(.35); }
}
.cn-trono--golpe.entra .cn-av--novo { animation: cnGolpeNovo 2.6s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes cnGolpeNovo {
  0%   { opacity: 0; transform: translateX(360px) scale(.6) rotate(22deg); }
  30%  { opacity: 1; transform: translateX(60px) scale(1.02) rotate(6deg); }
  42%  { transform: translateX(0) scale(1.16) scaleY(.86) rotate(0); }
  58%  { transform: translateX(0) scale(.98) scaleY(1.08); }
  100% { opacity: 1; transform: none; }
}
.cn-trono--golpe.entra .cn-tr-coroa { animation: cnGolpeCoroa 2.6s cubic-bezier(.3,.8,.35,1) both; }
@keyframes cnGolpeCoroa {
  0%,32% { opacity: 1; transform: translateY(0) rotate(0); }
  46%    { opacity: 1; transform: translateY(-90px) rotate(200deg) scale(1.2); }
  70%    { transform: translateY(-30px) rotate(340deg) scale(1.05); }
  100%   { opacity: 1; transform: translateY(0) rotate(360deg) scale(1); }
}
.cn-trono--golpe.entra .cn-tr-movel { animation: cnTrAbana .5s .95s ease-out 2; }
@keyframes cnTrAbana {
  0%,100% { transform: translateX(-50%) rotateX(-8deg) rotateZ(0); }
  25%  { transform: translateX(-52%) rotateX(-8deg) rotateZ(-3deg); }
  75%  { transform: translateX(-48%) rotateX(-8deg) rotateZ(3deg); }
}

/* ============ 2 · DUELO ============
   Frente a frente, moedas a saltar entre os dois, e um sai maior. */
.cn-trono--duelo.entra .cn-av--velho { animation: cnDueloVelho 2.9s cubic-bezier(.3,.7,.4,1) both; }
@keyframes cnDueloVelho {
  0%   { opacity: 0; transform: translateX(-160px) scale(.8); }
  18%  { opacity: 1; transform: translateX(-92px) scale(1); }
  34%  { transform: translateX(-72px) scale(1.05) rotate(6deg); }
  46%  { transform: translateX(-96px) scale(.98) rotate(-4deg); }
  62%  { transform: translateX(-84px) scale(1) rotate(3deg); }
  100% { opacity: 0; transform: translateX(-230px) scale(.55) rotate(-24deg); }
}
.cn-trono--duelo.entra .cn-av--novo { animation: cnDueloNovo 2.9s cubic-bezier(.25,.9,.35,1) both; }
@keyframes cnDueloNovo {
  0%   { opacity: 0; transform: translateX(160px) scale(.8); }
  18%  { opacity: 1; transform: translateX(92px) scale(1); }
  34%  { transform: translateX(72px) scale(1.05) rotate(-6deg); }
  46%  { transform: translateX(96px) scale(.98) rotate(4deg); }
  62%  { transform: translateX(84px) scale(1) rotate(-3deg); }
  100% { opacity: 1; transform: translateX(0) scale(1.24); }
}
.cn-trono--duelo.entra .cn-tr-coroa { animation: cnDueloCoroa 2.9s ease-out both; }
@keyframes cnDueloCoroa {
  0%,20% { opacity: 0; transform: translateY(-16px) scale(.7); }
  30%    { opacity: 1; transform: translateY(-26px) scale(1) rotate(-10deg); }
  50%    { transform: translateY(-26px) scale(1.05) rotate(10deg); }
  70%    { transform: translateY(-26px) scale(1) rotate(-6deg); }
  100%   { opacity: 1; transform: translateY(-4px) scale(1.15) rotate(0); }
}
.cn-tr-faiscas { position: absolute; left: 50%; bottom: 44%; z-index: 5; }
.cn-tr-faiscas i {
  position: absolute; width: 7px; height: 7px; border-radius: 2px; opacity: 0;
  background: linear-gradient(180deg,#FFF3CE,#E3B44A);
}
.cn-trono--duelo.entra .cn-tr-faiscas i {
  animation: cnDueloFaisca .9s cubic-bezier(.2,.7,.4,1) calc(.9s + var(--i) * .07s) infinite;
}
@keyframes cnDueloFaisca {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(calc((var(--i) - 4.5) * 22px), -46px) scale(.3) rotate(200deg); }
}

/* ============ 3 · CADEIRA MUSICAL ============
   O trono gira, os dois andam à volta, a música pára e só um se senta. */
.cn-trono--cadeiras.entra .cn-tr-movel { animation: cnCadeiraGira 2.4s cubic-bezier(.2,.6,.3,1) both; }
@keyframes cnCadeiraGira {
  0%   { transform: translateX(-50%) rotateX(-8deg) rotateY(0); }
  70%  { transform: translateX(-50%) rotateX(-8deg) rotateY(900deg); }
  100% { transform: translateX(-50%) rotateX(-8deg) rotateY(1080deg); }
}
.cn-trono--cadeiras.entra .cn-av--velho { animation: cnCadeiraVelho 3s cubic-bezier(.3,.7,.4,1) both; }
@keyframes cnCadeiraVelho {
  0%   { opacity: 0; transform: rotate(0) translateX(120px) rotate(0) scale(.85); }
  15%  { opacity: 1; }
  62%  { opacity: 1; transform: rotate(560deg) translateX(120px) rotate(-560deg) scale(.85); }
  78%  { transform: rotate(560deg) translateX(150px) rotate(-560deg) scale(.8); }
  100% { opacity: .35; transform: rotate(560deg) translateX(150px) rotate(-560deg) scale(.62) translateY(16px); }
}
.cn-trono--cadeiras.entra .cn-av--novo { animation: cnCadeiraNovo 3s cubic-bezier(.25,.9,.3,1) both; }
@keyframes cnCadeiraNovo {
  0%   { opacity: 0; transform: rotate(180deg) translateX(120px) rotate(-180deg) scale(.85); }
  15%  { opacity: 1; }
  62%  { opacity: 1; transform: rotate(740deg) translateX(120px) rotate(-740deg) scale(.85); }
  80%  { transform: rotate(720deg) translateX(0) rotate(-720deg) scale(1.15); }
  100% { opacity: 1; transform: rotate(720deg) translateX(0) rotate(-720deg) scale(1); }
}
.cn-trono--cadeiras.entra .cn-tr-coroa { animation: cnCadeiraCoroa 3s ease-out both; }
@keyframes cnCadeiraCoroa {
  0%,72% { opacity: 0; transform: translateY(-40px) scale(.6); }
  86%    { opacity: 1; transform: translateY(4px) scale(1.2); }
  100%   { opacity: 1; transform: translateY(0) scale(1); }
}
.cn-tr-notas { position: absolute; left: 50%; bottom: 58%; z-index: 5; }
.cn-tr-notas i {
  position: absolute; font-style: normal; font-size: clamp(16px, 1.8vw, 26px);
  color: #F7DFA4; opacity: 0; text-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.cn-tr-notas i:nth-child(1) { left: -80px; }
.cn-tr-notas i:nth-child(2) { left: 0; }
.cn-tr-notas i:nth-child(3) { left: 70px; }
.cn-trono--cadeiras.entra .cn-tr-notas i { animation: cnNota 1.5s ease-out both; }
.cn-trono--cadeiras.entra .cn-tr-notas i:nth-child(2) { animation-delay: .3s; }
.cn-trono--cadeiras.entra .cn-tr-notas i:nth-child(3) { animation-delay: .6s; }
@keyframes cnNota {
  0%   { opacity: 0; transform: translateY(0) rotate(-10deg); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-70px) rotate(18deg); }
}

/* ============ 4 · COROA ROUBADA ============
   A coroa levanta voo, atravessa o palco e escolhe outra cabeça. */
.cn-trono--coroa.entra .cn-av--velho { animation: cnCoroaVelho 3s cubic-bezier(.3,.7,.4,1) both; }
@keyframes cnCoroaVelho {
  0%   { opacity: 0; transform: translateX(-100px) scale(.9); }
  14%  { opacity: 1; transform: translateX(-100px) scale(1); }
  44%  { transform: translateX(-100px) scale(1) rotate(0); }
  58%  { transform: translateX(-100px) scale(.94) scaleY(.84) rotate(-8deg); }
  100% { opacity: .38; transform: translateX(-116px) scale(.82) scaleY(.8) rotate(-12deg) translateY(12px); }
}
.cn-trono--coroa.entra .cn-av--novo { animation: cnCoroaNovo 3s cubic-bezier(.25,.9,.3,1) both; }
@keyframes cnCoroaNovo {
  0%   { opacity: 0; transform: translateX(100px) scale(.88); filter: brightness(.55); }
  14%  { opacity: 1; transform: translateX(100px) scale(.92); filter: brightness(.55); }
  62%  { transform: translateX(100px) scale(.92); filter: brightness(.6); }
  74%  { transform: translateX(100px) scale(1.18); filter: brightness(1.35); }
  100% { opacity: 1; transform: translateX(100px) scale(1.06); filter: brightness(1); }
}
.cn-trono--coroa.entra .cn-tr-coroa { animation: cnCoroaVoa 3s cubic-bezier(.3,.5,.4,1) both; }
@keyframes cnCoroaVoa {
  0%,14% { opacity: 1; transform: translateX(-100px) translateY(0) rotateY(0) scale(1); }
  40%    { opacity: 1; transform: translateX(-100px) translateY(-70px) rotateY(180deg) scale(1.1); }
  62%    { transform: translateX(0) translateY(-96px) rotateY(540deg) scale(1.2); }
  78%    { transform: translateX(100px) translateY(-60px) rotateY(900deg) scale(1.1); }
  100%   { opacity: 1; transform: translateX(100px) translateY(-4px) rotateY(1080deg) scale(1); }
}

/* ============ 5 · PÓDIO A GIRAR ============
   A plataforma roda meia-volta e troca os dois de lugar. */
.cn-trono--podio.entra .cn-tr-palco { animation: cnPodioGira 2.8s cubic-bezier(.35,.05,.2,1) both; }
@keyframes cnPodioGira {
  0%   { transform: rotateY(0) rotateX(6deg); }
  100% { transform: rotateY(180deg) rotateX(6deg); }
}
.cn-trono--podio .cn-tr-movel { transform: translateX(-50%) rotateX(-8deg) translateZ(-4px); }
.cn-trono--podio.entra .cn-av--velho { animation: cnPodioVelho 2.8s cubic-bezier(.3,.7,.4,1) both; }
@keyframes cnPodioVelho {
  0%   { opacity: 0; transform: translateZ(78px) scale(1.1); }
  12%  { opacity: 1; transform: translateZ(78px) scale(1.1); }
  100% { opacity: 1; transform: translateZ(78px) scale(.72) translateY(26px) rotateY(180deg); }
}
.cn-trono--podio.entra .cn-av--novo { animation: cnPodioNovo 2.8s cubic-bezier(.25,.9,.3,1) both; }
@keyframes cnPodioNovo {
  0%   { opacity: 0; transform: translateZ(-78px) scale(.72) translateY(26px) rotateY(180deg); }
  12%  { opacity: 1; }
  100% { opacity: 1; transform: translateZ(-78px) scale(1.16) translateY(-14px) rotateY(180deg); }
}
.cn-trono--podio.entra .cn-tr-coroa { animation: cnPodioCoroa 2.8s ease-out both; }
@keyframes cnPodioCoroa {
  0%,55% { opacity: 0; transform: translateY(-50px) scale(.6) rotateY(180deg); }
  75%    { opacity: 1; transform: translateY(-16px) scale(1.2) rotateY(180deg); }
  100%   { opacity: 1; transform: translateY(-22px) scale(1) rotateY(180deg); }
}

/* ============ 6 · ULTRAPASSAGEM ============
   O novo passa-lhe à frente a toda a velocidade; o outro desce de pára-quedas. */
.cn-trono--foguetao.entra .cn-av--novo { animation: cnFogueNovo 3s cubic-bezier(.2,.85,.3,1) both; }
@keyframes cnFogueNovo {
  0%   { opacity: 0; transform: translateY(230px) scale(.6) rotate(-8deg); }
  18%  { opacity: 1; transform: translateY(90px) scale(.85) rotate(-4deg); }
  40%  { transform: translateY(-96px) scale(1.2) rotate(6deg); }
  62%  { transform: translateY(-40px) scale(1.05) rotate(-3deg); }
  100% { opacity: 1; transform: translateY(0) scale(1.08) rotate(0); }
}
.cn-trono--foguetao.entra .cn-av--velho { animation: cnFogueVelho 3s cubic-bezier(.35,.4,.4,1) both; }
@keyframes cnFogueVelho {
  0%   { opacity: 0; transform: translate(0,-10px) scale(1); }
  12%  { opacity: 1; transform: translate(0,-10px) scale(1); }
  34%  { transform: translate(50px,-56px) scale(.94) rotate(14deg); }
  100% { opacity: .5; transform: translate(140px, 46px) scale(.66) rotate(-6deg); }
}
.cn-tr-rasto { position: absolute; left: 50%; bottom: 26%; z-index: 2; }
.cn-tr-rasto i {
  position: absolute; left: -6px; width: 12px; height: 26px; border-radius: 8px; opacity: 0;
  background: linear-gradient(180deg, rgba(255,243,206,.95), rgba(227,180,74,.25), transparent);
}
.cn-tr-rasto i:nth-child(1) { bottom: 0; }
.cn-tr-rasto i:nth-child(2) { bottom: 28px; }
.cn-tr-rasto i:nth-child(3) { bottom: 56px; }
.cn-tr-rasto i:nth-child(4) { bottom: 84px; }
.cn-tr-rasto i:nth-child(5) { bottom: 112px; }
.cn-trono--foguetao.entra .cn-tr-rasto i { animation: cnRasto 1.1s ease-out both; }
.cn-trono--foguetao.entra .cn-tr-rasto i:nth-child(2) { animation-delay: .07s; }
.cn-trono--foguetao.entra .cn-tr-rasto i:nth-child(3) { animation-delay: .14s; }
.cn-trono--foguetao.entra .cn-tr-rasto i:nth-child(4) { animation-delay: .21s; }
.cn-trono--foguetao.entra .cn-tr-rasto i:nth-child(5) { animation-delay: .28s; }
@keyframes cnRasto { 0% { opacity: 0; transform: scaleY(.3); } 30% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(.2) translateY(20px); } }
.cn-tr-paraquedas {
  position: absolute; left: 50%; bottom: 30%; z-index: 3;
  width: clamp(56px, 6.6vw, 92px); margin-left: calc(clamp(56px, 6.6vw, 92px) / -2);
  opacity: 0;
}
.cn-tr-paraquedas span {
  display: block; width: 100%; padding-top: 50%;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #F3D588, #C9922F);
  box-shadow: 0 8px 20px rgba(0,0,0,.4), inset 0 -6px 12px rgba(0,0,0,.2);
}
.cn-trono--foguetao.entra .cn-tr-paraquedas { animation: cnParaquedas 3s cubic-bezier(.35,.4,.4,1) both; }
@keyframes cnParaquedas {
  0%,30% { opacity: 0; transform: translate(0,-40px) scale(.4); }
  46%    { opacity: 1; transform: translate(80px,-30px) scale(1) rotate(6deg); }
  100%   { opacity: .55; transform: translate(140px, 62px) scale(.8) rotate(-5deg); }
}
.cn-trono--foguetao.entra .cn-tr-coroa { animation: cnFogueCoroa 3s ease-out both; }
@keyframes cnFogueCoroa {
  0%,26% { opacity: 1; transform: translate(0,-8px) scale(1); }
  40%    { opacity: 1; transform: translate(0,-120px) scale(1.25) rotate(220deg); }
  100%   { opacity: 1; transform: translate(0,-14px) scale(1) rotate(360deg); }
}

@media (max-width: 700px) {
  .cn-tr-palco { width: min(94%, 340px); height: clamp(130px, 22vh, 190px); }
  .cn-tr-nomes { font-size: clamp(1rem, 4.4vw, 1.5rem); }
  .cn-tr-desafio { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-trono.entra *, .cn-festa.entra * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .cn-trono.entra .cn-tr-palco .cn-av, .cn-trono.entra .cn-tr-coroa { opacity: 1; }
}

/* ============================================================
   APRESENTAR EM ECRÃ VERTICAL
   Num monitor ou tablet de pé, a montra tratava a altura como se
   fosse largura: a foto comia 70% do ecrã e o preço ficava a 49px
   num ecrã de 1400px. Aqui o tamanho passa a medir-se também pela
   altura, e a cena organiza-se como um cartaz de pé.
   ============================================================ */
@media (orientation: portrait) {
  .ads-stage:fullscreen .cn {
    padding: clamp(16px, 2.2vh, 40px);
    gap: clamp(12px, 1.6vh, 26px);
  }

  /* o topo não tem largura para os capítulos; numa apresentação
     ninguém lhes toca, por isso saem e o nome da loja respira */
  .ads-stage:fullscreen .cn-caps { display: none; }
  .ads-stage:fullscreen .cn-marca { max-width: 60%; font-size: clamp(1rem, 2.6vw, 1.6rem); }
  .ads-stage:fullscreen .cn-pulso { margin-left: auto; font-size: clamp(.68rem, 1.5vw, .92rem); }
  .ads-stage:fullscreen .cn-relogio { font-size: clamp(1.1rem, 3vw, 1.9rem); }

  /* --- DESTAQUE: foto em cima, palavra e preço em baixo, em grande --- */
  /* a linha da foto é 1fr e cede o que for preciso; o texto nunca encolhe */
  .ads-stage:fullscreen .cn-cena--destaque {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(12px, 2vh, 32px);
  }
  .ads-stage:fullscreen .cn-dq-media {
    height: 100%; min-height: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .ads-stage:fullscreen .cn-dq-media .cn-media {
    height: 100%; width: auto; aspect-ratio: 1;
    max-width: 100%; max-height: 42vh;
  }
  .ads-stage:fullscreen .cn-dq-txt { align-items: center; text-align: center; }
  .ads-stage:fullscreen .cn-selos { justify-content: center; }

  /* --- PROMOÇÃO --- */
  .ads-stage:fullscreen .cn-pr-corpo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(12px, 2vh, 30px);
  }
  .ads-stage:fullscreen .cn-pr-media { height: 100%; min-height: 0; }
  .ads-stage:fullscreen .cn-pr-media .cn-media {
    height: 100%; width: auto; aspect-ratio: 1;
    max-width: 100%; max-height: 38vh;
  }
  .ads-stage:fullscreen .cn-pr-txt { align-items: center; text-align: center; }
  .ads-stage:fullscreen .cn-pr-precos { justify-content: center; }

  /* --- tipografia: deixa de se medir só pela largura --- */
  .ads-stage:fullscreen .cn-titulo { font-size: clamp(2rem, min(8.5vw, 5vh), 5.6rem); }
  .ads-stage:fullscreen .cn-preco--g .cn-preco-num,
  .ads-stage:fullscreen .cn-pr-agora { font-size: clamp(3rem, min(17vw, 10.5vh), 10rem); }
  .ads-stage:fullscreen .cn-preco--g .cn-preco-velho,
  .ads-stage:fullscreen .cn-pr-antes { font-size: clamp(1.1rem, min(4.5vw, 2.8vh), 2.6rem); }
  .ads-stage:fullscreen .cn-poupa { font-size: clamp(.9rem, min(2.8vw, 1.8vh), 1.5rem); }
  .ads-stage:fullscreen .cn-prova { font-size: clamp(.9rem, min(2.6vw, 1.7vh), 1.4rem); }
  .ads-stage:fullscreen .cn-faixa { font-size: clamp(.7rem, min(2vw, 1.3vh), 1.05rem); }
  .ads-stage:fullscreen .cn-selo { font-size: clamp(.66rem, min(1.9vw, 1.2vh), 1rem); }

  /* --- o pódio do dono cresce com o ecrã --- */
  .ads-stage:fullscreen .cn-dono { align-self: center; width: min(100%, 44rem); }
  .ads-stage:fullscreen .cn-dono-podio { justify-content: center; }
  .ads-stage:fullscreen .cn-dono-av { width: clamp(42px, 7vw, 76px); height: clamp(42px, 7vw, 76px);
    font-size: clamp(1rem, 2.6vw, 1.7rem); }
  .ads-stage:fullscreen .cn-dono-lugar--1 .cn-dono-av { width: clamp(58px, 9.5vw, 104px); height: clamp(58px, 9.5vw, 104px);
    font-size: clamp(1.3rem, 3.4vw, 2.3rem); }
  .ads-stage:fullscreen .cn-dono-pos { width: clamp(19px, 2.8vw, 30px); height: clamp(19px, 2.8vw, 30px);
    font-size: clamp(.62rem, 1.5vw, .9rem); }
  .ads-stage:fullscreen .cn-dono-lbl { font-size: clamp(.64rem, min(1.8vw, 1.2vh), .9rem); }
  .ads-stage:fullscreen .cn-dono-nome { font-size: clamp(.8rem, 2vw, 1.15rem); }
  .ads-stage:fullscreen .cn-dono-lugar--1 .cn-dono-nome { font-size: clamp(.95rem, 2.5vw, 1.4rem); }
  .ads-stage:fullscreen .cn-dono-qtd { font-size: clamp(.72rem, 1.8vw, 1rem); }

  /* --- blocos que esticavam na vertical: travam e centram-se ---
     Numa coluna de 1000px o pódio virava três torres finas e a grelha
     ficava perdida no meio do vazio. */
  .ads-stage:fullscreen .cn-cena { justify-content: center; }
  .ads-stage:fullscreen .cn-podio { height: min(100%, 34vh); flex: 0 0 auto; }
  .ads-stage:fullscreen .cn-ults { max-height: min(100%, 62vh); flex: 0 1 auto; align-content: center; }
  .ads-stage:fullscreen .cn-grelha { max-height: min(100%, 72vh); flex: 0 1 auto; }
  .ads-stage:fullscreen .cn-combo { max-height: min(100%, 64vh); flex: 0 1 auto; }
  .ads-stage:fullscreen .cn-media--medalha { width: min(100%, clamp(80px, 19vw, 170px)); }

  /* --- PÓDIO DO DIA --- */
  .ads-stage:fullscreen .cn-degrau-nome { font-size: clamp(.85rem, min(2.4vw, 1.6vh), 1.3rem); }
  .ads-stage:fullscreen .cn-degrau-qtd { font-size: clamp(.72rem, min(2vw, 1.3vh), 1.05rem); }
  .ads-stage:fullscreen .cn-medalha { width: clamp(24px, 3.4vw, 38px); height: clamp(24px, 3.4vw, 38px);
    font-size: clamp(.78rem, 1.9vw, 1.1rem); }

  /* --- COMBO: um em cima do outro, com o total por baixo --- */
  .ads-stage:fullscreen .cn-combo {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: center;
  }
  .ads-stage:fullscreen .cn-combo-total { grid-column: 1 / -1; flex-direction: row; gap: clamp(10px, 2vw, 20px);
    align-items: baseline; justify-content: center; }
  .ads-stage:fullscreen .cn-combo-nome { font-size: clamp(.95rem, min(2.6vw, 1.7vh), 1.5rem); }
  .ads-stage:fullscreen .cn-combo-num { font-size: clamp(2rem, min(8vw, 5vh), 4.5rem); }
  .ads-stage:fullscreen .cn-combo-mais { width: clamp(42px, 6vw, 72px); font-size: clamp(1.4rem, 3.4vw, 2.4rem); }

  /* --- ÚLTIMAS e GRELHAS: cartões maiores, há largura de sobra --- */
  .ads-stage:fullscreen .cn-ults {
    grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 26vw, 260px), clamp(190px, 32vw, 320px)));
  }
  .ads-stage:fullscreen .cn-ult-num b { font-size: clamp(1.8rem, min(6vw, 4vh), 3.4rem); }
  .ads-stage:fullscreen .cn-ult-nome { font-size: clamp(.9rem, min(2.4vw, 1.6vh), 1.3rem); }
  .ads-stage:fullscreen .cn-grelha {
    grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 27vw, 260px), clamp(190px, 33vw, 320px)));
  }
  .ads-stage:fullscreen .cn-grelha .cn-card .cn-media { max-height: clamp(140px, 28vw, 280px); }
  /* o mural mostra tudo de uma vez: cartões mais pequenos, senão as
     últimas filas ficavam cortadas em cima e em baixo */
  .ads-stage:fullscreen .cn-grelha--densa {
    grid-template-columns: repeat(auto-fit, minmax(clamp(105px, 17vw, 165px), clamp(135px, 21vw, 205px)));
  }
  .ads-stage:fullscreen .cn-grelha--densa .cn-card .cn-media { max-height: clamp(95px, 17vw, 185px); }
  .ads-stage:fullscreen .cn-grelha--densa .cn-card-nome { font-size: clamp(.74rem, 1.7vw, .95rem); }
  .ads-stage:fullscreen .cn-card-nome { font-size: clamp(.85rem, 2.1vw, 1.15rem); }
  .ads-stage:fullscreen .cn-preco--p .cn-preco-num { font-size: clamp(1rem, 2.5vw, 1.4rem); }

  /* --- carrossel e rodapé --- */
  .ads-stage:fullscreen .cn-rail .cn-card { width: clamp(140px, 22vw, 220px); }
  .ads-stage:fullscreen .cn-rail .cn-card .cn-media { height: clamp(100px, 16vw, 160px); }
  .ads-stage:fullscreen .cn-grelha .cn-card { width: auto; }
  .ads-stage:fullscreen .cn-ticker-fita { font-size: clamp(.78rem, min(2vw, 1.3vh), 1.1rem); }
  .ads-stage:fullscreen .cn-cur { padding: clamp(14px, 1.5vh, 24px) clamp(18px, 2.4vw, 32px); }
  .ads-stage:fullscreen .cn-cur-txt { font-size: clamp(1.05rem, min(3vw, 2vh), 1.85rem); }
  .ads-stage:fullscreen .cn-cur-lbl { font-size: clamp(.64rem, min(1.6vw, 1.1vh), .82rem); }
  .ads-stage:fullscreen .cn-cur-selo { width: clamp(44px, 6vw, 68px); height: clamp(44px, 6vw, 68px); }
  .ads-stage:fullscreen .cn-cur-selo svg { width: clamp(22px, 3vw, 34px); height: clamp(22px, 3vw, 34px); }

  /* --- celebrações --- */
  .ads-stage:fullscreen .cn-festa-palco { --tam: clamp(140px, 34vw, 300px); }
  .ads-stage:fullscreen .cn-festa-total { font-size: clamp(2.8rem, min(14vw, 9vh), 8rem); }
  .ads-stage:fullscreen .cn-festa-lbl { font-size: clamp(.85rem, min(2.8vw, 1.8vh), 1.5rem); }
  .ads-stage:fullscreen .cn-festa-itens { font-size: clamp(.9rem, min(2.4vw, 1.6vh), 1.3rem); }
  .ads-stage:fullscreen .cn-tr-palco { width: min(92%, 560px); height: clamp(190px, 26vh, 340px); }
  .ads-stage:fullscreen .cn-tr-nomes { font-size: clamp(1.3rem, min(5.5vw, 3.6vh), 3rem); }
  .ads-stage:fullscreen .cn-tr-frase { font-size: clamp(.82rem, min(2.2vw, 1.5vh), 1.15rem); }
  .ads-stage:fullscreen .cn-tr-palco .cn-av { --tam: clamp(68px, 11vw, 120px); }
  .ads-stage:fullscreen .cn-tr-movel { width: clamp(100px, 16vw, 170px); height: clamp(116px, 19vw, 200px); }
  .ads-stage:fullscreen .cn-tr-coroa { width: clamp(42px, 7vw, 76px); margin-left: calc(clamp(42px, 7vw, 76px) / -2); }
}

/* ecrã vertical muito estreito (telemóvel de pé em ecrã inteiro) */
@media (orientation: portrait) and (max-width: 560px) {
  .ads-stage:fullscreen .cn-dq-media .cn-media { max-height: 34vh; }
  .ads-stage:fullscreen .cn-pr-media .cn-media { max-height: 31vh; }
  .ads-stage:fullscreen .cn-rail { display: none; }
}

/* ============================================================
   CURIOSIDADES — a faixa que vai contando coisas da loja
   Mesma linguagem do resto da montra: barra de acento dourada,
   rótulo em versaletes e o facto em letra grande, legível de longe.
   ============================================================ */
.cn-cur {
  flex: 0 0 auto; align-self: stretch;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: clamp(11px, 1.2vw, 18px);
  padding: clamp(11px, 1.2vh, 18px) clamp(15px, 1.6vw, 26px);
  border-radius: clamp(12px, 1.2vw, 18px);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cor) 12%, transparent), transparent 42%),
    linear-gradient(170deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.1);
  border-top-color: rgba(227,180,74,.3);
  box-shadow: 0 10px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
  pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.25,1);
}
/* barra de acento, como nas faixas das cenas */
.cn-cur::before {
  content: ''; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent-grad);
}
.cn-cur.entra { opacity: 1; transform: none; }
.cn-cur[hidden] { display: none !important; }

.cn-cur-selo {
  flex: 0 0 auto; display: grid; place-content: center;
  width: clamp(34px, 3vw, 46px); height: clamp(34px, 3vw, 46px);
  border-radius: 50%;
  background: radial-gradient(70% 70% at 35% 30%, rgba(227,180,74,.3), rgba(227,180,74,.1));
  border: 1px solid rgba(227,180,74,.38);
}
.cn-cur-selo svg { width: clamp(17px, 1.5vw, 23px); height: clamp(17px, 1.5vw, 23px); color: var(--ouro); }

.cn-cur-corpo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cn-cur-lbl {
  font-size: clamp(.56rem, .72vw, .68rem); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(227,180,74,.78);
}
.cn-cur-txt {
  min-width: 0; line-height: 1.3;
  font-size: clamp(.92rem, 1.35vw, 1.25rem); font-weight: 620;
  color: rgba(255,255,255,.82); text-wrap: pretty;
}
.cn-cur-txt b { color: #fff; font-weight: 820; }

@media (max-width: 640px) {
  .cn-cur { gap: 10px; padding: 10px 13px; align-items: flex-start; }
  .cn-cur-selo { width: 30px; height: 30px; margin-top: 1px; }
  .cn-cur-selo svg { width: 15px; height: 15px; }
  .cn-cur-txt { font-size: .86rem; }
  /* com a faixa de curiosidades há menos altura: o mural encolhe os cartões */
  .cn-grelha--densa { grid-template-columns: repeat(auto-fit, minmax(84px, 112px)); gap: 7px; }
  .cn-grelha--densa .cn-card .cn-media { max-height: 76px; }
  .cn-grelha--densa .cn-card-nome { font-size: .68rem; }
  .cn-grelha--densa .cn-preco--p .cn-preco-num { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-cur { transition: none; }
}

/* Ecrã baixo (portátil pequeno): o pódio do dono é o bloco mais alto da
   coluna de texto. Em vez de esticar a montra, encolhe-se ele. As regras
   do "Apresentar" têm mais especificidade e continuam a mandar lá. */
@media (max-height: 840px) {
  .cn-dono { padding: 7px 11px; gap: 3px; }
  .cn-dono-av { width: clamp(22px, 2.1vw, 30px); height: clamp(22px, 2.1vw, 30px); font-size: clamp(.62rem, .8vw, .8rem); }
  .cn-dono-lugar--1 .cn-dono-av { width: clamp(28px, 2.7vw, 38px); height: clamp(28px, 2.7vw, 38px); font-size: clamp(.78rem, 1vw, 1rem); }
  .cn-dono-lugar--1 { margin-bottom: 2px; }
  .cn-dono-pos { width: 13px; height: 13px; font-size: .46rem; }
  .cn-dono-lbl { font-size: .54rem; }
  .cn-dono-podio { gap: clamp(7px, 1.1vw, 14px); }
}

/* Portátil baixo, fora do "Apresentar": não há altura para tudo.
   O carrossel é o que menos falta faz — repete produtos que as cenas
   já mostram — e sai para o palco e as curiosidades respirarem. */
@media (max-height: 820px) {
  .ads-stage:not(:fullscreen) .cn-rail { display: none; }
  .ads-stage:not(:fullscreen) .cn-palco { min-height: clamp(240px, 34vh, 430px); }
}