/* ═══════════════════════════════════════════════════════════════
   FACE PLAN™ — camada visual da demonstração pública
   Traz o acabamento do app atual (vidro, bordas douradas, sombras)
   para o build antigo que ranqueia no Google.

   Só altera aparência. Nenhum texto, link ou estrutura de conteúdo
   muda, então o que o Google indexa continua idêntico.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --gold-dim:rgba(201,169,110,.13);
  --gold-border:rgba(201,169,110,.3);
  --dark-4:#222;
  --shadow-sm:0 2px 12px rgba(0,0,0,.35);
  --shadow-md:0 8px 28px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-lg:0 18px 48px rgba(0,0,0,.55);
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --glass:rgba(17,17,17,.72);
}

/* ── CABEÇALHO ─────────────────────────────────────────────── */
header{
  padding:14px 22px;
  border-bottom:1px solid rgba(201,169,110,.12);
  background:var(--glass);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 24px rgba(0,0,0,.25);
  position:relative;
  z-index:100;
}

/* A logo é uma arte própria: precisa de fundo escuro, não do bloco dourado. */
.logo-icon{
  width:40px;height:40px;
  border-radius:11px;
  overflow:hidden;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(201,169,110,.22);
  box-shadow:var(--shadow-sm);
}
.logo-icon img{width:100%;height:100%;object-fit:contain;display:block;padding:3px;}
.logo-main{font-size:16px;letter-spacing:.06em;}
.logo-sub{letter-spacing:.16em;}
/* A subida do cabeçalho virou o H1 da página: neutraliza o estilo padrão de
   título do navegador para que ele continue lendo como legenda da marca. */
h1.logo-sub{font-size:9px;font-weight:500;line-height:1.25;}

/* ── COLUNA DE CONTROLES ───────────────────────────────────── */
.sidebar{
  background:rgba(13,13,13,.85);
  border-right:1px solid rgba(201,169,110,.1);
  padding:18px 16px;
  gap:16px;
  box-shadow:4px 0 24px rgba(0,0,0,.2);
}

.toolbar{border-bottom:1px solid rgba(201,169,110,.1);padding:12px 20px;}

/* ── CARTÕES ───────────────────────────────────────────────── */
.card{
  background:rgba(17,17,17,.75);
  border-radius:var(--radius-lg);
  border:1px solid rgba(201,169,110,.12);
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .35s cubic-bezier(.25,.8,.25,1),
             box-shadow .35s cubic-bezier(.25,.8,.25,1),
             border-color .35s;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 42px rgba(0,0,0,.5), 0 0 28px rgba(201,169,110,.05);
}

/* ── BOTÃO PRINCIPAL ───────────────────────────────────────── */
.gen-btn{
  padding:14px;
  background:linear-gradient(135deg,#e8d4a8 0%,var(--gold) 45%,#8A6030 100%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md);
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 6px 24px rgba(201,169,110,.25), inset 0 1px 0 rgba(255,255,255,.2);
  transition:all .28s;
  position:relative;
  overflow:hidden;
}
.gen-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(201,169,110,.34), inset 0 1px 0 rgba(255,255,255,.25);
}
.gen-btn::after{
  content:'';position:absolute;top:-30%;bottom:-30%;width:36%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.gen-btn:hover::after{animation:fpBtnShine 1s cubic-bezier(.4,0,.2,1);}
@keyframes fpBtnShine{to{left:135%;}}

/* ── ESTADO INICIAL ────────────────────────────────────────── */
.empty{max-width:min(390px,92vw);padding:12px 8px;}
/* O build antigo deixava este bloco em opacity .3 — apagava a logo. */
.empty-ico{
  width:84px;height:84px;
  margin:0 auto 18px;
  padding:10px;
  border-radius:22px;
  overflow:hidden;
  opacity:1;
  font-size:0;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(201,169,110,.2);
  box-shadow:var(--shadow-md), 0 0 40px rgba(201,169,110,.08);
  display:flex;align-items:center;justify-content:center;
}
.empty-ico img{width:100%;height:100%;object-fit:contain;display:block;}
.empty h2{letter-spacing:.03em;}

.step{transition:border-color .3s, background .3s;}
.snum{box-shadow:0 2px 10px rgba(201,169,110,.2);}

/* ── CAMPOS ────────────────────────────────────────────────── */
input,select,textarea{transition:border-color .22s, box-shadow .22s;}
input:focus,select:focus,textarea:focus{
  border-color:var(--gold-border) !important;
  box-shadow:0 0 0 3px rgba(201,169,110,.1);
}

/* ── ACABAMENTO GERAL ──────────────────────────────────────── */
button:focus-visible,a:focus-visible,input:focus-visible{
  outline:2px solid rgba(201,169,110,.55) !important;
  outline-offset:2px;
}
::selection{background:rgba(201,169,110,.32);color:#FFF8EC;}

::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(201,169,110,.18);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:rgba(201,169,110,.32);}

@media (prefers-reduced-motion: reduce){
  .card,.card:hover,.gen-btn:hover{transform:none;}
  .gen-btn::after{display:none;}
}

@media (max-width:760px){
  header{padding:11px 14px;}
  .logo-icon{width:34px;height:34px;border-radius:9px;}
  h1.logo-sub{font-size:8px;letter-spacing:.1em;}
  .empty-ico{width:70px;height:70px;border-radius:18px;}
}