/* =========================================================================
   Fábrica de Carrosséis · Painel de Aprovação
   Identidade: executiva, sóbria, preto + amarelo Ultralize. Mobile-first.
   ========================================================================= */

:root{
  --bg:      #000000;
  --bg-1:    #101012;
  --bg-2:    #16161a;
  --bg-3:    #1c1c21;
  --line:    rgba(255,255,255,.075);
  --line-2:  rgba(255,255,255,.14);
  --ink:     #f3f2ee;
  --ink-2:   #a7a7ae;
  --ink-3:   #6c6c74;
  --yellow:  #FAB90F;
  --yellow-2:#FFD35C;
  --yellow-dim: rgba(250,185,15,.10);
  --yellow-line: rgba(250,185,15,.45);
  --green:   #58d68a;
  --red:     #f2755f;
  --info:    #7cc7e8;
  --shadow:  0 18px 40px -18px rgba(0,0,0,.7);

  --sans: "Work Sans", "Helvetica Neue", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --r:   14px;
  --r-s: 9px;
  --pad: clamp(16px, 4.5vw, 26px);
  --topbar-h: 56px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
[x-cloak]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  padding-bottom:120px;                 /* espaço p/ actionbar */
  overflow-x:hidden;
}

/* atmosfera: grão + halo amarelo discreto no topo */
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::before{
  content:""; position:fixed; z-index:0; pointer-events:none;
  top:-30%; left:50%; transform:translateX(-50%);
  width:120vw; height:60vh;
  background:radial-gradient(50% 60% at 50% 0%, rgba(250,185,15,.06), transparent 70%);
}
body>*{ position:relative; z-index:1; }

/* ============================ TOPO ============================ */
.topbar{
  position:sticky; top:0; z-index:40;
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  background:linear-gradient(180deg, rgba(10,10,11,.92), rgba(10,10,11,.72));
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand__logo{ height:16px; width:auto; display:block; }
.brand__div{ width:1px; height:16px; background:var(--line-2); }
.brand__name{ font-weight:800; font-size:14px; letter-spacing:.12em; }
.brand__thin{ color:var(--ink-3); font-weight:600; }
@media (max-width:420px){ .brand__thin{ display:none; } }

.topbar__right{ display:flex; align-items:center; gap:14px; }
.daystamp{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.05; }
.daystamp__dow{ font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
.daystamp__date{ font-family:var(--mono); font-size:12px; color:var(--ink-2); font-weight:500; }
.sync__dot{ width:8px; height:8px; border-radius:50%; display:block; }
.sync--online .sync__dot{ background:var(--green); box-shadow:0 0 10px var(--green); animation:pulse 2.4s infinite; }
.sync--offline .sync__dot{ background:var(--red); box-shadow:0 0 10px var(--red); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ==================== PENDÊNCIAS ==================== */
.pending{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px var(--pad);
  font-family:var(--mono); font-size:11.5px; color:var(--ink-2);
  background:var(--bg-1); border-bottom:1px solid var(--line);
}
.pending__lead{ color:var(--ink-3); text-transform:uppercase; letter-spacing:.16em; font-size:9.5px; }
.pending__item b{ color:var(--ink); font-weight:700; }
.pending__sep{ color:var(--ink-3); }
.pending__spacer{ flex:1; }
.pending__todo{ color:var(--yellow); font-weight:500; }

.logout{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); background:none; border:1px solid var(--line-2); border-radius:20px;
  padding:5px 11px; cursor:pointer; transition:.18s;
}
.logout:hover{ color:var(--ink); border-color:var(--ink-3); }

/* ==================== LOGIN ==================== */
.login-screen{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:var(--pad);
}
.login-card{
  width:100%; max-width:360px; display:flex; flex-direction:column; gap:14px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r);
  padding:32px 28px; box-shadow:var(--shadow);
}
.login-card__logo{ height:20px; width:auto; margin-bottom:6px; }
.login-card__title{ font-size:20px; font-weight:800; letter-spacing:-.02em; }
.login-card__sub{ color:var(--ink-2); font-size:13px; margin-top:-8px; margin-bottom:4px; }
.login-field{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--ink-2); }
.login-field input{
  background:var(--bg-3); border:1px solid var(--line); border-radius:9px;
  color:var(--ink); font-family:inherit; font-size:14.5px; padding:11px 12px; outline:none;
}
.login-field input:focus{ border-color:var(--yellow-line); box-shadow:0 0 0 3px var(--yellow-dim); }
.login-erro{ color:var(--red); font-size:12.5px; margin-top:-4px; }

/* ==================== NAV DOS GATES ==================== */
.gates{
  position:sticky; top:var(--topbar-h); z-index:35;
  display:flex; gap:2px; padding:8px var(--pad) 0;
  background:linear-gradient(180deg, rgba(10,10,11,.9), rgba(10,10,11,.55));
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.gate{
  flex:1; position:relative; background:none; border:0; cursor:pointer;
  display:flex; align-items:baseline; justify-content:center; gap:7px;
  padding:11px 4px 14px; color:var(--ink-3);
  font-family:inherit; transition:color .2s;
}
.gate__i{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; opacity:.7; }
.gate__l{ font-size:14px; font-weight:600; letter-spacing:-.01em; }
.gate__c{
  font-family:var(--mono); font-size:10px; font-weight:700;
  background:var(--yellow); color:#000; border-radius:20px;
  min-width:16px; height:16px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
}
.gate--on{ color:var(--ink); }
.gate--on .gate__i{ color:var(--yellow); opacity:1; }
.gates__ink{
  position:absolute; bottom:-1px; height:2px; width:calc((100% - 2*var(--pad))/3);
  left:var(--pad); background:var(--yellow); border-radius:2px;
  box-shadow:0 0 12px var(--yellow);
  transform:translateX(calc(var(--pos,0) * 100%));
  transition:transform .32s cubic-bezier(.5,.05,.2,1);
}

/* ==================== PALCO / VIEWS ==================== */
.stage{ padding:var(--pad); max-width:720px; margin:0 auto; }
.view__head{ margin-bottom:18px; }
.view__title{ font-size:clamp(21px,5.5vw,27px); font-weight:800; letter-spacing:-.03em; }
.view__sub{ color:var(--ink-2); font-size:13px; margin-top:3px; max-width:52ch; }

/* ==================== TAGS / SCORE ==================== */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em;
  padding:3px 8px; border-radius:20px; border:1px solid var(--line-2);
  color:var(--ink-2);
}
.tag__dot{ width:6px; height:6px; border-radius:50%; }
.tag--noticia .tag__dot{ background:var(--info); box-shadow:0 0 6px var(--info); }
.tag--ideia .tag__dot{ background:var(--yellow); box-shadow:0 0 6px var(--yellow); }
.tag--ideia{ border-color:var(--yellow-line); }

.score{ display:inline-flex; align-items:center; gap:7px; margin-left:auto; }
.score__n{ font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:-.02em; }
.score__bar{ width:46px; height:4px; border-radius:4px; background:var(--bg-3); overflow:hidden; }
.score__bar i{ display:block; height:100%; border-radius:4px; background:var(--ink-3); }
.score--hi .score__n{ color:var(--yellow); }
.score--hi .score__bar i{ background:linear-gradient(90deg,var(--yellow),var(--yellow-2)); box-shadow:0 0 8px var(--yellow); }
.score--mid .score__bar i{ background:var(--ink-2); }

/* ==================== GATE 1 · PAUTAS ==================== */
.pautas{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.pauta{
  position:relative; display:flex; gap:13px;
  padding:15px 16px 15px 14px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer; overflow:hidden;
  transition:border-color .2s, background .2s, transform .12s;
  animation:rise .5s both; animation-delay:var(--d,0ms);
}
@keyframes rise{ from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none} }
.pauta::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--yellow); transform:scaleY(0); transform-origin:top;
  transition:transform .24s cubic-bezier(.5,.05,.2,1);
}
.pauta:hover{ border-color:var(--line-2); }
.pauta:active{ transform:scale(.994); }
.pauta--on{ background:var(--yellow-dim); border-color:var(--yellow-line); }
.pauta--on::before{ transform:scaleY(1); }

.pauta__check{
  flex:none; width:24px; height:24px; border-radius:7px;
  border:1.5px solid var(--line-2); margin-top:2px;
  display:grid; place-items:center; transition:.2s;
}
.pauta__check svg{ width:14px; height:14px; fill:none; stroke:#000; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .25s .05s; }
.pauta--on .pauta__check{ background:var(--yellow); border-color:var(--yellow); box-shadow:0 0 14px rgba(250,185,15,.4); }
.pauta--on .pauta__check svg{ stroke-dashoffset:0; }

.pauta__body{ min-width:0; flex:1; }
.pauta__meta{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.pauta__id{ font-family:var(--mono); font-size:10px; color:var(--ink-3); }
.pauta__title{ font-size:16px; font-weight:700; letter-spacing:-.02em; line-height:1.28; }
.pauta__resumo{ color:var(--ink-2); font-size:13px; margin-top:5px; }
.pauta__angulo{
  margin-top:10px; padding:8px 10px; border-radius:var(--r-s);
  background:var(--bg-2); border:1px solid var(--line);
  font-size:12.5px; color:var(--ink); display:flex; gap:8px;
}
.pauta__angulo-k{ font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.14em; color:var(--yellow); padding-top:2px; flex:none; }
.pauta__foot{ margin-top:9px; }
.pauta__fonte{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }
.pauta__fonte::before{ content:"◆ "; color:var(--ink-3); opacity:.5; }

/* ==================== GATE 4 · BACKLOG ==================== */
.backlog__item{ cursor:default; }
.backlog__item::before{ background:var(--red); }
.backlog__ts{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-left:auto; }
.backlog__acoes{ margin-top:11px; }

/* ==================== GATE 5 · FILA ==================== */
.fila__item{ cursor:default; }
.fila__item::before{ background:var(--info); }
.fila__status{ margin-left:auto; }
.fila__status .tag__dot{ background:var(--info); box-shadow:0 0 6px var(--info); }

/* ==================== GATE 2 · COPY ==================== */
.carrosel-pick{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.chip{
  font-family:var(--mono); font-size:12px; font-weight:500; color:var(--ink-2);
  background:var(--bg-1); border:1px solid var(--line); border-radius:20px;
  padding:6px 14px; cursor:pointer; transition:.18s;
}
.chip:hover{ border-color:var(--line-2); color:var(--ink); }
.chip--on{ background:var(--yellow); color:#000; border-color:var(--yellow); font-weight:700; }
.carrosel-pick__empty{ color:var(--ink-3); font-size:12.5px; align-self:center; }

.copy__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.copy__title{ font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.3; }
.copy__engine{ font-family:var(--mono); font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; padding-top:4px; }

.slides{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.slide{
  display:flex; gap:12px; padding:13px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .2s;
}
.slide--edited{ border-color:var(--yellow-line); }
.slide__rail{ flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; width:40px; }
.slide__n{ font-family:var(--mono); font-size:15px; font-weight:700; color:var(--ink-3); }
.slide__type{
  writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg);
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); padding:4px 0;
}
.slide__type--capa{ color:var(--yellow); }
.slide__type--cta{ color:var(--info); }
.slide__main{ flex:1; min-width:0; }
.slide__text{
  font-size:14.5px; line-height:1.5; cursor:text; border-radius:8px;
  padding:6px 8px; margin:-6px -8px; transition:background .15s;
}
.slide__text:hover{ background:var(--bg-2); }
.slide__text::after{ content:"✎"; font-size:11px; color:var(--ink-3); margin-left:6px; opacity:0; transition:.15s; }
.slide__text:hover::after{ opacity:.6; }

.slide__ta{
  width:100%; min-height:96px; resize:vertical;
  background:var(--bg-3); border:1px solid var(--yellow-line); border-radius:9px;
  color:var(--ink); font-family:inherit; font-size:14.5px; line-height:1.5;
  padding:11px 12px; outline:none;
}
.slide__ta:focus{ box-shadow:0 0 0 3px var(--yellow-dim); }
.slide__edit-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:9px; }

.diff{ margin-top:11px; border-radius:9px; overflow:hidden; border:1px solid var(--line); font-size:13px; }
.diff__row{ display:flex; gap:9px; padding:8px 11px; }
.diff__k{ font-family:var(--mono); font-size:8.5px; text-transform:uppercase; letter-spacing:.14em; padding-top:3px; flex:none; width:38px; }
.diff__row--old{ background:rgba(242,117,95,.07); color:var(--ink-3); text-decoration:line-through; text-decoration-color:rgba(242,117,95,.5); }
.diff__row--old .diff__k{ color:var(--red); }
.diff__row--new{ background:rgba(88,214,138,.07); color:var(--ink); }
.diff__row--new .diff__k{ color:var(--green); }

.slide__tools{ margin-top:11px; }
.linkbtn{ background:none; border:0; color:var(--ink-3); font-family:var(--mono); font-size:11px; cursor:pointer; padding:2px 0; transition:color .15s; }
.linkbtn:hover{ color:var(--yellow); }
.prompt-box--slide{ margin-top:9px; }

.prompt-box{ }
.prompt-box--carousel{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 14px; margin-bottom:16px;
}
.prompt-box__lbl{ display:block; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); margin-bottom:8px; }
.prompt-box__row{ display:flex; gap:8px; }
.prompt-box__in{
  flex:1; min-width:0; background:var(--bg-3); border:1px solid var(--line); border-radius:9px;
  color:var(--ink); font-family:inherit; font-size:13px; padding:10px 12px; outline:none;
}
.prompt-box__in:focus{ border-color:var(--yellow-line); box-shadow:0 0 0 3px var(--yellow-dim); }
.prompt-box__in::placeholder{ color:var(--ink-3); }

/* ==================== GATE 3 · CARDS (preview estilo Instagram Stories) ==================== */
.story{ margin:0 calc(var(--pad)*-1); }
.story__progress{ display:flex; gap:4px; padding:0 var(--pad) 10px; }
.story__seg{ flex:1; height:3px; border-radius:3px; background:var(--bg-3); transition:background .2s; }
.story__seg--done,
.story__seg--on{ background:var(--yellow); }

.story__stage{
  position:relative; max-width:420px; margin:0 auto;
  border-radius:18px; overflow:hidden; background:var(--bg-1);
  border:1px solid var(--line-2); box-shadow:var(--shadow);
}
.story__card img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--bg-3); }
.story__tap{ position:absolute; top:0; bottom:0; width:34%; background:none; border:0; cursor:pointer; z-index:2; }
.story__tap--prev{ left:0; }
.story__tap--next{ right:0; }
.story__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(0,0,0,.45); border:1px solid var(--line-2); color:var(--ink);
  font-size:19px; line-height:1; cursor:pointer; backdrop-filter:blur(6px);
  transition:opacity .15s;
}
.story__nav:disabled{ opacity:0; pointer-events:none; }
.story__nav--prev{ left:10px; }
.story__nav--next{ right:10px; }
.story__count{
  position:absolute; top:14px; right:14px; z-index:3;
  font-family:var(--mono); font-size:10.5px; color:var(--ink);
  background:rgba(0,0,0,.45); border-radius:20px; padding:4px 10px; backdrop-filter:blur(6px);
}
.story__caption{
  max-width:420px; margin:14px auto 0; padding:13px 15px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r);
}
.story__caption-k{
  display:block; font-family:var(--mono); font-size:9px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--yellow); margin-bottom:6px;
}
.story__caption p{ font-size:14px; line-height:1.5; }

/* ==================== BOTÕES ==================== */
.btn{
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:-.01em;
  border:1px solid transparent; border-radius:11px; padding:13px 18px;
  cursor:pointer; transition:transform .1s, background .18s, border-color .18s, opacity .18s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn--primary{ background:var(--yellow); color:#000; box-shadow:0 8px 22px -10px rgba(250,185,15,.65); }
.btn--primary:hover:not(:disabled){ background:var(--yellow-2); }
.btn--ghost{ background:var(--bg-2); color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink-3); }
.btn--yellow{ background:var(--yellow); color:#000; }
.btn--danger-ghost{ background:none; color:var(--red); border-color:rgba(242,117,95,.35); }
.btn--danger-ghost:hover{ background:rgba(242,117,95,.08); }
.btn--block{ width:100%; }
.btn--grow{ flex:1; }
.btn--tiny{ padding:8px 13px; font-size:12.5px; border-radius:9px; }
.btn__badge{ background:rgba(0,0,0,.25); color:#000; font-family:var(--mono); font-size:11px; font-weight:700; border-radius:20px; min-width:18px; height:18px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; }

/* ==================== ACTIONBAR ==================== */
.actionbar{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(10,10,11,0), rgba(10,10,11,.92) 22%);
  backdrop-filter:blur(12px);
  transform:translateY(120%); transition:transform .3s cubic-bezier(.5,.05,.2,1);
  max-width:720px; margin:0 auto;
}
.actionbar--show{ transform:none; }
.actionbar__row{ display:flex; gap:9px; }

/* ==================== SKELETONS ==================== */
.skeleton-list{ display:flex; flex-direction:column; gap:11px; }
.skeleton{ height:96px; border-radius:var(--r); background:linear-gradient(100deg,var(--bg-1) 30%,var(--bg-2) 50%,var(--bg-1) 70%); background-size:200% 100%; animation:shimmer 1.3s infinite; }
.skeleton--tall{ height:150px; }
.skeleton--card{ height:60vh; max-width:340px; margin:0 auto; }
.deck-skeleton{ padding:4px 0; }
@keyframes shimmer{ from{background-position:200% 0} to{background-position:-200% 0} }

/* ==================== TOASTS ==================== */
.toasts{ position:fixed; left:0; right:0; bottom:96px; z-index:60; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 var(--pad); }
.toast{
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  padding:11px 16px; border-radius:11px; box-shadow:var(--shadow);
  background:var(--bg-2); border:1px solid var(--line-2); color:var(--ink);
  max-width:520px;
}
.toast--ok{ border-color:var(--yellow-line); }
.toast--ok::before{ content:"✓ "; color:var(--yellow); font-weight:700; }
.toast--info::before{ content:"→ "; color:var(--info); }
.toast--warn{ border-color:rgba(242,117,95,.4); }
.toast--warn::before{ content:"! "; color:var(--red); font-weight:700; }

/* ==================== DESKTOP ==================== */
@media (min-width:760px){
  body{ padding-bottom:130px; }
  .pauta{ padding:18px 20px; }
  .pauta__title{ font-size:17px; }
  .stage{ padding:30px var(--pad) var(--pad); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.05ms !important; }
}