/* ==========================================================================
   ZMILE ART — APP CHROME (NEBULA DS 05)
   Camada compartilhada aplicada a TODAS as telas internas (dashboard, admin,
   produção, planejamento, postagens, etc.) — replica EXATAMENTE o tratamento
   do dashboard do usuário, de forma idêntica e centralizada.

   Uso na página:
   <link rel="stylesheet" href="/assets/ds/zmile-ds.css">
   <link rel="stylesheet" href="/assets/ds/zmile-app.css">
   + bloco de fundo (canvas/aura/orb/beams/rain) + <script src="/assets/ds/zmile-ds.js">
   + <script src="/assets/ds/zmile-app.js">

   Não inventa nada: usa as animações/tokens do DS 05.
   ========================================================================== */

/* ---------- TOKENS NEBULA (retune dos nomes comuns das telas) ---------- */
:root {
  --bg: #050505; --bg-deep: #000000; --bg2: #0A0A0C;
  --card: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.1); --border2: rgba(255,255,255,.055);
  --line: rgba(255,255,255,.1); --line-strong: rgba(255,255,255,.2);
  --text: #ffffff; --texto: #ffffff;
  --muted: rgba(255,255,255,.62); --muted2: rgba(255,255,255,.84);
  --text-soft: rgba(255,255,255,.84); --text-muted: rgba(255,255,255,.62);
  --suave: rgba(255,255,255,.84);
  --gold: #fbbf24; --gold-claro: #fde68a; --gold-light: #fde68a;
  --indigo: #f97316; --indigo-l: #fb923c; --indigo-escuro: #ea580c;
  --violet: #a855f7; --violet-soft: #c4b5fd;
  --orange: #f97316; --orange-soft: #fb923c;
  --navy: #0A0A0C; --azul-escuro: #0A0A0C;
  --green: #22C55E; --verde: #22C55E; --red: #EF4444; --vermelho: #EF4444; --amber: #F59E0B;
  --r: 16px; --radius: 16px; --radius-lg: 20px; --radius-xl: 24px;
}

/* ---------- Override dos TOKENS de tema CLARO herdados (wizards/skills antigos) ----------
   Páginas legadas definem :root claro (--fundo:#F8FAFF, --borda:#E5E7EB, --texto-suave:#6B7280,
   --card:#FFFFFF, --cor-claro:#FFF0F6...). Como este arquivo carrega DEPOIS do <style> da página,
   estes valores vencem e puxam tudo para o dark. (Superfícies #fff hardcoded → normalizador JS.) */
:root {
  --fundo: rgba(10,10,14,.72) !important;
  --bg-claro: rgba(10,10,14,.72) !important;
  --card: rgba(20,20,26,.72) !important; --card2: rgba(28,28,36,.7) !important;
  --painel: rgba(14,14,20,.8) !important; --surface: rgba(14,14,20,.8) !important;
  --borda: rgba(255,255,255,.10) !important; --borda2: rgba(255,255,255,.06) !important;
  --texto: #ffffff !important; --texto2: rgba(255,255,255,.82) !important;
  --texto-suave: rgba(255,255,255,.7) !important; --texto-fraco: rgba(255,255,255,.55) !important;
  --cinza: rgba(255,255,255,.66) !important; --cinza-claro: rgba(255,255,255,.1) !important;
  --cor-claro: rgba(255,255,255,.07) !important;
}

/* ---------- BASE / ATMOSFERA ---------- */
body { background: var(--bg-deep); }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46vw 38vw at 92% -8%, rgba(249,115,22,0.05), transparent 62%),
    radial-gradient(44vw 40vw at -4% 108%, rgba(168,85,247,0.04), transparent 62%); }
/* SCRIM — véu escuro entre o fundo animado (z-0) e o conteúdo (z-1). Calma o brilho
   do orb/beams pra o conteúdo nunca "lavar" em telas esparsas, sem matar a animação.
   ::after é o último filho do body → pinta sobre as camadas de fundo; conteúdo (z-1) fica acima. */
body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(6,6,10,0.62) 0%, rgba(6,6,10,0.46) 28%, rgba(6,6,10,0.46) 72%, rgba(6,6,10,0.58) 100%),
    radial-gradient(120vw 80vh at 50% 50%, transparent, rgba(6,6,10,0.28) 80%); }
::selection { background: rgba(249,115,22,.3); color: #fff; }
*:focus-visible { outline: 2px solid rgba(249,115,22,.7); outline-offset: 2px; border-radius: 6px; }

/* ---------- CAMADAS DE FUNDO ANIMADO (atrás de tudo) ---------- */
#fog-canvas, .purple-orb, .bg-aura-wrapper, .dash-beams, .dash-bg-img, .rain-layer, .gradient-blur { z-index: 0; }
#fog-canvas { opacity: .9 !important; }
.dash-bg-img { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.dash-bg-img img { width: 100%; height: 100%; object-fit: cover; opacity: .3; mix-blend-mode: luminosity; }
.dash-bg-grad1 { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5,5,5,.92), rgba(5,5,5,.66) 45%, #050505); }
.dash-bg-grad2 { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 60% 0%, rgba(249,115,22,.12), transparent 62%); }
.dash-beams { position: fixed; inset: 0; pointer-events: none; display: flex; width: min(1100px, 100%); left: 50%; transform: translateX(-50%); opacity: .55; }
.dash-beam-col { flex: 1; border-left: 1px solid rgba(255,255,255,.04); position: relative; overflow: hidden; }
.dash-beam-col:last-child { border-right: 1px solid rgba(255,255,255,.04); }
.dash-beam { position: absolute; top: 0; left: -1px; width: 1px; height: 16rem; }
/* conteúdo acima do fundo + do scrim — TODO filho do body que não seja camada de fundo.
   Robusto: não depende de enumerar classes de wrapper (evita conteúdo "lavado" pelo scrim). */
body > *:not(.dash-bg-img):not(#fog-canvas):not(.purple-orb):not(.bg-aura-wrapper):not(.dash-beams):not(.rain-layer):not(.gradient-blur):not(.gradient-blur-2):not([class*="overlay"]):not(.drawer):not(script):not(style):not(link):not(template) {
  position: relative; z-index: 1;
}
/* Modais/overlays/drawers fixos (filhos do body) NÃO podem ser rebaixados para
   position:relative pela regra acima — senão caem no fluxo e abrem fora da tela.
   Ficam excluídos do lift; aqui só garantimos que fiquem acima do fundo. */
body > [class*="overlay"], body > .drawer { z-index: 1000; }
.sidebar, .main, aside, main, .content, .topbar, .page-shell { position: relative; z-index: 1; }

/* ---------- TIPOGRAFIA DS 05 ---------- */
body, input, button, textarea, select { font-family: 'Inter', -apple-system, sans-serif; }
.topbar-title, .ct, .stat-val, .sb-nome, .modal-header h3, h1, h2 { font-family: 'Manrope', sans-serif; }
.sb-label, .stat-lbl, .topbar-date { font-family: 'JetBrains Mono', monospace; }

/* ---------- SIDEBAR — translúcida + navegação animada ---------- */
.sidebar { background: rgba(8,8,10,0.38) !important; backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15); border-right: 1px solid rgba(255,255,255,.07) !important; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(249,115,22,.25); }
.sb-logo span, .sb-nome { font-weight: 800; letter-spacing: -.02em; }
.sb-user { background: linear-gradient(180deg, rgba(249,115,22,.05), transparent); }
.sb-label { font-size: .58rem; letter-spacing: 1.8px; color: rgba(255,255,255,.3); }
.sidebar > * { flex-shrink: 0; }
.nav-item { position: relative; overflow: hidden; flex-shrink: 0; gap: 11px; padding: 9px 13px; margin: 3px 11px; border-radius: 11px; min-height: 44px;
  transition: background .25s ease, transform .25s cubic-bezier(0.16,1,0.3,1), box-shadow .25s ease;
  animation: navIn .5s cubic-bezier(0.16,1,0.3,1) backwards; }
@keyframes navIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
.nav-item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.12) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .65s cubic-bezier(0.16,1,0.3,1); }
.nav-item:hover:not(.locked)::after { transform: translateX(130%); }
.nav-item:hover:not(.locked) { background: rgba(255,255,255,.06); transform: translateX(4px); }
.nav-ic { width: 32px; height: 32px; border-radius: 9px; transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), background .25s ease, box-shadow .25s ease, color .25s ease; }
.nav-item:hover:not(.locked) .nav-ic { background: rgba(249,115,22,.14); transform: scale(1.14) rotate(-6deg); box-shadow: 0 0 16px -4px rgba(249,115,22,.7); }
.nav-lbl { transition: color .2s ease, letter-spacing .2s ease; }
.nav-item:hover:not(.locked) .nav-lbl { color: #fff; letter-spacing: .2px; }
.nav-item.active { background: rgba(249,115,22,.13) !important; border-color: transparent !important; }
.nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; border-radius: 0 4px 4px 0; background: linear-gradient(180deg,#fdba74,#f97316); box-shadow: 0 0 12px rgba(249,115,22,.85); z-index: 2; animation: navBarGrow .4s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes navBarGrow { to { height: 62%; } }
.nav-item.active .nav-lbl { color: #fff !important; font-weight: 700; }
.nav-item.active .nav-ic { background: rgba(249,115,22,.2) !important; color: #fdba74; box-shadow: 0 0 18px -5px rgba(249,115,22,.7); animation: navIcPulse 2.6s ease-in-out infinite; }
@keyframes navIcPulse { 0%,100% { box-shadow: 0 0 16px -6px rgba(249,115,22,.5); } 50% { box-shadow: 0 0 22px -2px rgba(249,115,22,.85); } }
.nav-item.locked { opacity: .42; }
.nav-item.locked .nav-ic { background: rgba(255,255,255,.03); }

/* ---------- TOPBAR ---------- */
.topbar-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.topbar-date { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* ---------- SISTEMA DE CARDS — sólido, profundidade, flashlight ---------- */
.card { border-radius: 20px;
  background: linear-gradient(162deg, rgba(23,23,28,.74) 0%, rgba(12,12,16,.74) 100%);
  backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 42px -28px rgba(0,0,0,.92);
  position: relative; overflow: hidden; isolation: isolate;
  transition: border-color .3s ease, transform .4s cubic-bezier(0.16,1,0.3,1), box-shadow .4s ease; }
.card::after { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--sec-rgb,249,115,22),.7), transparent); opacity: .7; pointer-events: none; }
.card::before { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(var(--sec-rgb,249,115,22),.13), transparent 42%); }
.card:hover::before { opacity: 1; }
.card:hover { transform: translateY(-4px); border-color: rgba(var(--sec-rgb,249,115,22),.5) !important;
  box-shadow: 0 26px 52px -34px rgba(0,0,0,.92), 0 0 38px -32px rgba(var(--sec-rgb,249,115,22),.7), inset 0 0 0 1px rgba(var(--sec-rgb,249,115,22),.14) !important; }
.ch { padding: 18px 22px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ct { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.cs { font-size: .72rem; color: rgba(255,255,255,.45); margin-top: 4px; }
.cb { padding: 18px 22px 20px; }
.cl { color: #fb923c; font-weight: 700; transition: color .2s; } .cl:hover { color: #fff; }

/* ---------- MÉTRICAS ---------- */
.stat { border-radius: 20px; padding: 20px; position: relative; overflow: hidden;
  background: linear-gradient(162deg, rgba(var(--m-rgb,249,115,22),.07) 0%, rgba(255,255,255,.012) 60%);
  border: 1px solid rgba(var(--m-rgb,249,115,22),.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 38px -30px rgba(0,0,0,.8);
  transition: border-color .3s ease, transform .35s cubic-bezier(0.16,1,0.3,1), box-shadow .35s ease; }
.stat::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(var(--m-rgb,249,115,22),.18), transparent 46%); }
.stat:hover::after { opacity: 1; }
.stat:hover { transform: translateY(-4px); border-color: rgba(var(--m-rgb,249,115,22),.6) !important;
  box-shadow: 0 26px 52px -32px rgba(0,0,0,.88), 0 0 40px -30px rgba(var(--m-rgb,249,115,22),.7), inset 0 0 0 1px rgba(var(--m-rgb,249,115,22),.14) !important; }
.metric-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.metric-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; background: rgba(var(--m-rgb,249,115,22),.16); border: 1px solid rgba(var(--m-rgb,249,115,22),.32); box-shadow: 0 8px 20px -10px rgba(var(--m-rgb,249,115,22),.6); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.stat:hover .metric-ic { transform: scale(1.08); box-shadow: 0 10px 26px -8px rgba(var(--m-rgb,249,115,22),.8); }
.stat .stat-val { font-size: 2.05rem !important; font-weight: 800 !important; line-height: 1 !important; color: rgb(var(--m-rgb,249,115,22)) !important; }
.stat .stat-lbl { font-size: .62rem; color: rgba(255,255,255,.55); letter-spacing: 1.2px; text-transform: uppercase; }

/* ---------- RÓTULOS DE SEÇÃO ---------- */
.sec-label { font-family: 'JetBrains Mono', monospace; font-size: .7rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,.58); margin: 36px 2px 15px; display: flex; align-items: center; gap: 11px; }
.sec-label::before { content: ''; width: 20px; height: 3px; border-radius: 3px; flex-shrink: 0; background: rgb(var(--sec-rgb,249,115,22)); box-shadow: 0 0 10px rgba(var(--sec-rgb,249,115,22),.85); }
.sec-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--sec-rgb,249,115,22),.28), transparent); }

/* ---------- BOTÕES / DETALHES (recolor NEBULA) ---------- */
.btn-modal-primario, .btn-primary, .btn-primario { background: linear-gradient(135deg,#f97316,#fb923c) !important; border: none !important; color: #fff !important; }
input:focus, textarea:focus, select:focus { border-color: rgba(249,115,22,.45) !important; box-shadow: 0 0 0 3px rgba(249,115,22,.12); }

@media (max-width: 900px) { .content { padding: 18px 18px 40px; } }

/* ==========================================================================
   CAMADA DS DOS WIZARDS / TUTORIAIS / GUIAS  (NEBULA)
   Os wizards bespoke são templados — compartilham .info-bar, .sb-step*,
   .step-card*, .step-header*, .main-body. Aqui o DS é aplicado UMA vez e
   propaga pra todos. Mantém o --cor de cada skill como ACENTO (não como
   fundo colorido berrante). Carrega depois do <style> da página → vence.
   ========================================================================== */

/* ---- Barra de topo colorida (info-bar / infobar / top-info) → dark com acento ---- */
.info-bar, .infobar, .info-bar-wrap, .top-info-bar {
  background: rgba(10,10,14,.55) !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.72) !important; box-shadow: none !important;
}
.info-bar *, .infobar * { color: rgba(255,255,255,.72) !important; }
.topbar, .topnav, .top-nav, .nav-bar, .navbar, .info-bar-text, .info-bar-phase {
  background: rgba(10,10,14,.55) !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; box-shadow: none !important;
}
.topnav, .topnav *, .top-nav *, .nav-title { color: rgba(255,255,255,.82) !important; }

/* ---- Áreas estruturais → escuras/transparentes ---- */
.main-body, .wizard, .wizard-layout, .wizard-main, .step-main, .conteudo-wizard { background: transparent !important; }
.sidebar-steps, .wizard-sidebar, .sb-steps { background: rgba(8,8,11,.34) !important; }

/* ---- Sidebar de passos (sb-step*) ---- */
.sb-steps-title { color: rgba(255,255,255,.5) !important; }
.sb-step { border-color: rgba(255,255,255,.06) !important; background: transparent !important; }
.sb-step-num {
  background: rgba(255,255,255,.06) !important; color: rgba(255,255,255,.7) !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
}
.sb-step.active .sb-step-num, .sb-step-num.active {
  background: rgba(255,255,255,.04) !important; color: #fff !important;
  border-color: var(--cor, #f97316) !important; box-shadow: 0 0 14px -2px var(--cor, #f97316) !important;
}
.sb-step-num.done { background: rgba(34,197,94,.18) !important; color: #22c55e !important; border-color: rgba(34,197,94,.4) !important; }
.sb-step-label, .sb-step-name, .sb-step-val, .sb-step-value, .sb-step-sub, .sb-step-info { color: rgba(255,255,255,.6) !important; }
.sb-step.active .sb-step-label, .sb-step-label.active, .sb-step.active .sb-step-name { color: #fff !important; }

/* ---- Cartões de etapa → frosted dark NEBULA ---- */
.step-card, .step-card-body, .step-card-header, .q-card, .card-pergunta, .sub-active, .preview-card, .summary-card, .resumo-card {
  background: linear-gradient(162deg, rgba(23,23,28,.74), rgba(16,16,20,.82)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #fff !important; box-shadow: 0 18px 40px rgba(0,0,0,.4) !important;
}
.step-card-header { background: rgba(255,255,255,.02) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }

/* ---- Tipografia DS (headings dos wizards) ---- */
.step-header-title, .step-header-info h2, .step-card h2, .sub-active-q, .wizard h2, .q-title {
  font-family: 'Manrope', 'Oswald', Inter, sans-serif !important; color: #fff !important; font-weight: 700 !important;
}
.step-header-sub, .step-header-info .step-sub, .q-sub { color: rgba(255,255,255,.55) !important; }
.step-header-tag, .step-badge { background: rgba(255,255,255,.06) !important; color: var(--cor, #fb923c) !important; border: 1px solid rgba(255,255,255,.1) !important; }
.step-header-icon, .step-header-num { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.1) !important; color: var(--cor, #fb923c) !important; }

/* ---- Inputs / selects / textareas dentro dos wizards ---- */
.step-card input, .step-card textarea, .step-card select, .wizard input, .wizard textarea, .wizard select,
.sub-active input, .sub-active textarea, .ds-input, .float-input, .input-api, .age-selects select, .date-field input, .budget-wrap {
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #fff !important;
}
.step-card input:focus, .wizard input:focus, .sub-active input:focus, .ds-input:focus { border-color: var(--cor, #f97316) !important; box-shadow: 0 0 0 3px rgba(249,115,22,.12) !important; }

/* ---- Acento --cor em botões/realces do wizard ---- */
.btn-next, .publish-btn, .btn-continuar, .btn-lancar {
  background: linear-gradient(135deg, var(--cor, #f97316), color-mix(in srgb, var(--cor, #f97316) 78%, #fff 22%)) !important;
  border: none !important; color: #fff !important;
}

/* ---- Telas de RESULTADO (resultado-carrossel/postagem/roteiro): header colorido → dark ---- */
.header { background: rgba(10,10,14,.6) !important; box-shadow: none !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.header h1, .header-left h1 { font-family: 'Manrope', 'Oswald', Inter, sans-serif !important; color: #fff !important; }
.header h1 + *, .header-sub, .header p { color: rgba(255,255,255,.6) !important; }