/* Alpha Cell Online — refinamento visual da marca nova (α azul → violeta) */
:root {
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-d: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --pri: #2f6bff;
  --pri2: #1340e0;
  --pri3: #6f9bff;
  --vio: #6a2cff;
  --grad: linear-gradient(135deg, #2f74ff 0%, #1f4fff 45%, #6a2cff 100%);
  --grad-soft: linear-gradient(135deg, rgba(47,116,255,.18), rgba(106,44,255,.12));
  --glow: 0 8px 28px rgba(47, 92, 255, .35);
}
:root[data-theme="light"] { --pri3: #2f6bff; }
body { letter-spacing: -.005em; }

/* Fundo com brilho sutil da marca */
.main {
  background:
    radial-gradient(900px 480px at 100% -8%, rgba(47, 116, 255, .10), transparent 62%),
    radial-gradient(700px 420px at 10% 105%, rgba(106, 44, 255, .07), transparent 60%);
  background-attachment: fixed;
}
:root[data-theme="light"] .main {
  background:
    radial-gradient(900px 480px at 100% -8%, rgba(47, 116, 255, .08), transparent 62%),
    radial-gradient(700px 420px at 10% 105%, rgba(106, 44, 255, .05), transparent 60%);
}

/* Marca */
.wordmark { font: 800 21px/1 var(--font-d); letter-spacing: -.045em; text-transform: lowercase; white-space: nowrap; }
.wordmark span { color: #fff; }
.wordmark b { background: linear-gradient(90deg, #4c8bff, #8b5cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wordmark small { text-transform: uppercase; letter-spacing: .2em; font-size: 8px; margin-top: 6px; }
.wordmark.xl { font-size: 54px; margin-top: 18px; letter-spacing: -.05em; }
:root[data-theme="light"] .logo-prev .wordmark span { color: #fff; }
.brand-mark { filter: drop-shadow(0 6px 18px rgba(47, 92, 255, .35)); flex-shrink: 0; }
.side-brand { padding: 20px 18px 16px; gap: 12px; }

/* Login */
.auth-art { background: radial-gradient(ellipse at 50% 38%, #10204a 0%, #050811 58%, #000 100%); }
.auth-glow { background: radial-gradient(circle, rgba(47,116,255,.38), rgba(106,44,255,.18) 45%, transparent 68%); }
.auth-slogan::before, .auth-slogan::after { background: var(--grad); }
.auth-icons i { background: var(--grad); }
.auth-card { border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)) , var(--card); }
.auth-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 20px; font: 700 11.5px var(--font); letter-spacing: .04em; text-transform: uppercase; color: #9fc0ff; background: var(--grad-soft); border: 1px solid rgba(80,130,255,.35); }

/* Botões */
.btn.pri { background: var(--grad); border-color: transparent; box-shadow: var(--glow); }
.btn.pri:hover { background: var(--grad); filter: brightness(1.1); }
.btn { border-radius: 11px; }
.tabs button.on { background: var(--grad); box-shadow: 0 4px 14px rgba(47,92,255,.35); }
.chip.on { background: var(--grad-soft); }

/* Menu lateral */
.side { background: linear-gradient(180deg, #070a12, #05070c); }
.nav a { border-radius: 11px; }
.nav a.on { background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(80,130,255,.25); }
.nav a.on::before { background: var(--grad); box-shadow: 0 0 14px rgba(80,110,255,.9); }
.nav a.on .ic { color: #8fb1ff; }
.nav a em { background: var(--grad); }
.avatar { background: var(--grad); }

/* Cartões e indicadores */
.card, .kpi { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 40%), var(--card); border-radius: 16px; }
:root[data-theme="light"] .card, :root[data-theme="light"] .kpi { background: var(--card); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.kpi { transition: transform .15s, border-color .15s, box-shadow .15s; }
.kpi.click:hover { box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.kpi-top i { background: var(--grad-soft); color: #8fb1ff; }
.kpi.hero { background: var(--grad); border-color: transparent; box-shadow: var(--glow); }
.kpi b { font-weight: 800; letter-spacing: -.035em; }
.pay-total { background: var(--grad); box-shadow: var(--glow); }
.pdv-tot .row.big b { letter-spacing: -.04em; }
.ph h1, .hello h1 { font-weight: 800; letter-spacing: -.035em; }
.mbox { border-radius: 20px; }
.mhead-ic { background: var(--grad-soft); color: #8fb1ff; }
.badge { font-weight: 700; }
.kc { border-radius: 12px; }

/* Indicador da nuvem girando enquanto sincroniza */
.pill.spin .ic { animation: spin 1.1s linear infinite; }
#cloudPill { cursor: pointer; }

/* Barra inferior (celular) */
.bnav { display: none; }
@media (max-width: 980px) {
  .bnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(7, 10, 18, .92); backdrop-filter: blur(14px); border-top: 1px solid #172033;
  }
  :root[data-theme="light"] .bnav { background: rgba(255,255,255,.94); border-top-color: var(--line); }
  .bnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 12px; color: #8792a8; text-decoration: none; font: 600 10.5px var(--font); }
  .bnav a.on { color: #fff; background: var(--grad-soft); }
  :root[data-theme="light"] .bnav a.on { color: var(--pri); }
  .bnav a.on .ic { color: #8fb1ff; }
  .content { padding-bottom: 96px; }
  body[data-page="pdv"] .content { padding-bottom: 96px; }
  #toasts { bottom: 86px; }
  .top { padding-top: calc(10px + env(safe-area-inset-top)); }
  .wordmark.xl { font-size: 40px; }
  .btn kbd, .nav a kbd, .pdv-search kbd, .pf kbd, .pay-tip { display: none; }
}