/* NEW Studio — painel de vídeos para YouTube (mesma fonte do Radar de ofertas: Urbanist) */
@font-face { font-family: "Urbanist"; src: url(/studio/fontes/Urbanist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* marca */
  --vermelho: #ff0033;              /* vermelho do YouTube: logo, gráfico, indicadores */
  --vermelho-acao: #e6002e;         /* fundo de botão/pílula com texto branco (contraste AA 4,8:1) */
  --vermelho-forte: #c80028;        /* hover do botão */
  --vermelho-fundo: rgba(255, 0, 51, .12);
  --verde: #2ba640;
  --amarelo: #f5b400;

  /* forma */
  --raio-g: 20px;
  --raio: 14px;
  --raio-p: 12px;
  --alvo: 44px;                     /* altura mínima de controle */

  /* movimento */
  --saida: cubic-bezier(.23, 1, .32, 1);
  --mola: cubic-bezier(.34, 1.3, .64, 1);

  /* tipo: escala fixa ~1,2 */
  --fonte: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-16: 16px;
  --t-18: 18px;
  --t-titulo: clamp(28px, 1.1rem + 1.7vw, 42px);
}
:root, [data-tema="escuro"] {
  --fundo: #0f0f0f;
  --painel: #141414;
  --cartao: #1c1c1c;
  --cartao-2: #262626;
  --borda: #2e2e2e;
  --borda-forte: #444;
  --texto: #f3f3f3;
  --suave: #b0b0b0;
  --apagado: #8e8e8e;               /* 5,1:1 no cartão */
  --vermelho-texto: #ff4d6d;        /* vermelho para texto pequeno sobre escuro */
  --verde-texto: #4cc35f;
  --amarelo-texto: #f0b429;
  --anel: #ff4d6d;
  --sombra: none;
  --sombra-flutua: 0 24px 60px -20px rgba(0, 0, 0, .75);
  color-scheme: dark;
}
[data-tema="claro"] {
  --fundo: #f3f2f0;
  --painel: #fbfbfa;
  --cartao: #ffffff;
  --cartao-2: #f4f2ef;
  --borda: #e4e0db;
  --borda-forte: #c9c4bd;
  --texto: #111111;
  --suave: #55524e;
  --apagado: #6e6a65;               /* 4,8:1 no cinza claro */
  --vermelho-texto: #cc0029;
  --verde-texto: #1d7a2e;
  --amarelo-texto: #8a6100;
  --anel: #cc0029;
  --sombra: 0 1px 2px rgba(40, 25, 10, .04);
  --sombra-flutua: 0 24px 60px -24px rgba(40, 20, 10, .35);
  color-scheme: light;
}


* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: var(--fundo); color: var(--texto); font: 500 var(--t-15)/1.5 var(--fonte);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.brilho { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.brilho i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: .22; background: var(--vermelho); }
.brilho i:first-child { left: -25vmax; top: -30vmax; }
.brilho i:last-child { right: -30vmax; bottom: -35vmax; opacity: .12; }
.caixa {
  position: relative; width: min(400px, 100%); display: grid; gap: 18px;
  padding: 32px 28px 28px; border-radius: var(--raio-g);
  background: var(--cartao); border: 1px solid var(--borda); box-shadow: var(--sombra-flutua);
  animation: sobe .55s var(--saida) both;
}
@keyframes sobe { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.marca { display: flex; align-items: center; gap: 12px; }
.logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--vermelho-acao) center/cover no-repeat; color: #fff; font-weight: 800; font-size: 19px; }
.logo.com-imagem { background-color: transparent; }
.marca b { display: block; font-size: var(--t-18); font-weight: 800; letter-spacing: -.01em; }
.marca b span { color: var(--vermelho-texto); }
.marca small { color: var(--suave); font-size: var(--t-13); }
h1 { margin: 6px 0 0; font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.sub { margin: -10px 0 4px; color: var(--suave); font-size: var(--t-14); }
label { display: grid; gap: 6px; font-weight: 700; font-size: var(--t-14); }
input {
  height: 50px; padding: 0 14px; border-radius: var(--raio-p); border: 1px solid var(--borda);
  background: var(--cartao-2); color: var(--texto); font: 500 16px var(--fonte); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus { border-color: var(--anel); box-shadow: 0 0 0 4px var(--vermelho-fundo); }
.erro { margin: 0; min-height: 20px; color: var(--vermelho-texto); font-size: var(--t-14); font-weight: 600; }
button {
  height: 50px; border: 0; border-radius: var(--raio-p); background: var(--vermelho-acao); color: #fff;
  font: 800 16px var(--fonte); cursor: pointer; transition: background-color .2s, transform .15s var(--saida);
}
button:hover { background: var(--vermelho-forte); }
button:active { transform: scale(.97); }
button[disabled] { opacity: .6; cursor: progress; }
:focus-visible { outline: 2px solid var(--anel); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .caixa { animation: none; } }