/* Modo Cliente — azul-noite com destaque violeta→azul, cartões arredondados, fonte do sistema e ícones SVG embutidos (nada de recursos de terceiros). */
:root {
  color-scheme: dark;
  --fundo: #080c1c; --superficie: #0f1530; --superficie-2: #151c3d; --menu: #0b1027; --texto: #eef1ff; --suave: #9ba6cf; --borda: #232d57;
  --marca: #a99bff; --marca-2: #6ea8ff; --marca-texto: #ffffff; --destaque: #fb923c;
  --g1: #6d4aff; --g2: #2f6df0; --gradiente: linear-gradient(135deg, var(--g1), var(--g2));
  --verde: #5eead4; --verde-fundo: #0e2a2c; --vermelho: #ff9a8f; --vermelho-fundo: #3a1620; --ambar: #fcd34d; --ambar-fundo: #33280d;
  --azul: #8ab4ff; --azul-fundo: #14234f; --violeta: #c4b5fd; --violeta-fundo: #271d57; --cinza: #a8b0cf; --cinza-fundo: #1a2142;
  --sombra: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(3,6,20,.45);
  --raio: 16px; --fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --menu-largura: 256px;
}
/* Temas (o cliente escolhe no botão de paleta; a escolha fica só neste navegador). O padrão é o escuro "Noite". */
:root[data-tema="claro"] {
  color-scheme: light;
  --fundo: #f1f3fb; --superficie: #ffffff; --superficie-2: #f1f3fc; --menu: #ffffff; --texto: #141a38; --suave: #57608a; --borda: #dde2f3;
  --marca: #5b3fe0; --marca-2: #2563eb;
  --verde: #0f766e; --verde-fundo: #e2f6f3; --vermelho: #b42318; --vermelho-fundo: #fdecea; --ambar: #92400e; --ambar-fundo: #fff4e0;
  --azul: #1d4ed8; --azul-fundo: #e8efff; --violeta: #5b3fe0; --violeta-fundo: #eee9ff; --cinza: #4b5578; --cinza-fundo: #eceff8;
  --sombra: 0 1px 2px rgba(20,26,56,.06), 0 8px 24px rgba(20,26,56,.07);
}
:root[data-tema="oceano"] { --g1: #0369a1; --g2: #2563eb; --fundo: #06141f; --superficie: #0b1f2e; --superficie-2: #11293b; --menu: #081a28; --borda: #1c3a52;
  --suave: #8fb0c8; --marca: #7dd3fc; --marca-2: #38bdf8; --azul-fundo: #0e2c4a; }
:root[data-tema="floresta"] { --g1: #15803d; --g2: #0f766e; --fundo: #07130e; --superficie: #0d1f17; --superficie-2: #132a20; --menu: #09180f; --borda: #1f3d2e;
  --suave: #93b7a2; --marca: #86efac; --marca-2: #4ade80; --azul-fundo: #0f2e2a; }
:root[data-tema="por-do-sol"] { --g1: #c2410c; --g2: #be185d; --fundo: #1a0d0a; --superficie: #26140f; --superficie-2: #321b14; --menu: #1f0f0b; --borda: #4a2a20;
  --suave: #c9a595; --marca: #fdba74; --marca-2: #fb923c; --azul-fundo: #3a2018; }
:root[data-tema="ametista"] { --g1: #a21caf; --g2: #6d28d9; --fundo: #130a1f; --superficie: #1c1030; --superficie-2: #271742; --menu: #160c26; --borda: #3a2663;
  --suave: #b5a0d6; --marca: #e9a8ff; --marca-2: #d8b4fe; --azul-fundo: #2a1a52; }
:root[data-tema="grafite"] { --g1: #475569; --g2: #334155; --fundo: #0f1115; --superficie: #181b22; --superficie-2: #20242d; --menu: #13161c; --borda: #2c313c;
  --suave: #9aa3b2; --marca: #cbd5e1; --marca-2: #94a3b8; --azul-fundo: #1f2a3a; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.6 var(--fonte); }
h1 { font-size: 1.25rem; line-height: 1.25; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; line-height: 1.3; margin: 0 0 12px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h3 { font-size: 1rem; margin: 0 0 6px; }
p { margin: 0 0 10px; } p:last-child { margin-bottom: 0; }
a { color: var(--marca); }
:focus-visible { outline: 3px solid var(--marca-2); outline-offset: 2px; border-radius: 6px; }
.icone { flex: none; vertical-align: -4px; }
.suave { color: var(--suave); font-size: .92rem; }
.pequeno { font-size: .85rem; }

/* topo */
.topo { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borda); }
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none;
  background: var(--gradiente); }
.logo .icone { width: 20px; height: 20px; }
.marca h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-direita { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.topo-direita form { margin: 0; }
.usuario { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--suave); }
.pagina { max-width: 1020px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: 18px; }
.pagina.estreita { max-width: 740px; }

/* cartões */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); }
.cartao > h2:first-child .icone { color: var(--marca); }
.destaque-topo { background: linear-gradient(90deg, var(--g1), var(--g2)) top / 100% 3px no-repeat, var(--superficie); }
.linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.medidor { display: grid; gap: 2px; align-content: start; padding: 16px 18px; }
.medidor .rotulo { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: .88rem; font-weight: 600; }
.medidor strong { font-size: 1.7rem; line-height: 1.2; letter-spacing: -.02em; }
.medidor small { color: var(--suave); font-size: .8rem; }
.medidor.principal { background: var(--gradiente); border-color: transparent; color: #fff; }
.medidor.principal .rotulo, .medidor.principal small { color: rgba(255,255,255,.82); }
.boas-vindas { display: grid; gap: 4px; padding: 4px 2px 0; } .boas-vindas h2 { font-size: 1.4rem; margin: 0; }

/* formulários */
.formulario { display: grid; gap: 16px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
label small, .dica { font-weight: 400; color: var(--suave); font-size: .85rem; }
.opcao { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
fieldset { border: 1px solid var(--borda); border-radius: 12px; margin: 0; padding: 12px 14px 14px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
legend { padding: 0 6px; font-weight: 600; font-size: .95rem; }
fieldset .opcao { padding: 8px 12px; border: 1px solid var(--borda); border-radius: 99px; background: var(--superficie-2); cursor: pointer; }
fieldset .opcao:has(input:checked) { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 12%, transparent); }
input, select, textarea { font: inherit; font-weight: 400; color: var(--texto); background: var(--superficie-2); border: 1.5px solid var(--borda); border-radius: 12px; padding: 11px 12px; width: 100%; min-height: 46px; }
input[type=checkbox] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--marca); flex: none; }
input[type=file] { padding: 10px; background: var(--superficie-2); border-style: dashed; cursor: pointer; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; border: 0; border-radius: 8px; padding: 8px 14px; margin-right: 12px; background: var(--gradiente); color: #fff; cursor: pointer; }
input:focus, select:focus, textarea:focus { border-color: var(--marca); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-2) 35%, transparent); }
select[multiple] { padding: 6px; } textarea { resize: vertical; }
.opcao-grande { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--borda); border-radius: 12px; background: var(--superficie-2); font-weight: 500; }

/* botões */
button, .botao { font: inherit; font-weight: 700; min-height: 46px; padding: 10px 20px; border: 0; border-radius: 12px; background: var(--gradiente); color: #fff;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter .15s, transform .05s; }
button:hover, .botao:hover { filter: brightness(1.08); } button:active, .botao:active { transform: translateY(1px); }
button.secundario, .botao.secundario { background: transparent; color: var(--texto); border: 1.5px solid var(--borda); }
button.secundario:hover, .botao.secundario:hover { background: var(--superficie-2); filter: none; }
.botao.grande, button.grande { width: 100%; min-height: 52px; font-size: 1.05rem; }
.botao.perigo, button.perigo { background: var(--vermelho); color: var(--vermelho-fundo); }
.botao.pequeno, button.pequeno { min-height: 38px; padding: 6px 14px; font-size: .9rem; border-radius: 10px; }

/* avisos */
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--azul-fundo); color: var(--texto); margin: 0; }
.aviso .icone { margin-top: 3px; color: var(--azul); }
.aviso.erro { background: var(--vermelho-fundo); border-color: var(--vermelho); } .aviso.erro .icone { color: var(--vermelho); }
.aviso.ok { background: var(--verde-fundo); border-color: var(--verde); } .aviso.ok .icone { color: var(--verde); }
.aviso.atencao { background: var(--ambar-fundo); border-color: var(--ambar); } .aviso.atencao .icone { color: var(--ambar); }
.aviso > div { min-width: 0; }

/* pedidos */
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pedido { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px; background: var(--superficie-2); }
.pedido > div:first-child { min-width: 0; flex: 1 1 240px; overflow-wrap: anywhere; }
.pedido strong a { color: var(--texto); text-decoration: none; } .pedido strong a:hover { color: var(--marca); text-decoration: underline; }
.acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .acoes form { margin: 0; }
.acoes > span:not(.suave) { font-size: .92rem; color: var(--suave); }
.aviso-prazo { flex-basis: 100%; }
.pedido .botao, .pedido button { min-height: 38px; padding: 6px 14px; font-size: .9rem; border-radius: 10px; }
.vazio { text-align: center; padding: 18px 8px; color: var(--suave); }
.selo { display: inline-block; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie); color: var(--suave); vertical-align: middle; white-space: nowrap; }

/* extrato */
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th { text-align: left; padding: 8px 10px; color: var(--suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--borda); white-space: nowrap; }
.tabela td { text-align: left; padding: 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.mais { color: var(--verde); font-weight: 700; white-space: nowrap; } .menos { color: var(--vermelho); font-weight: 700; white-space: nowrap; }
.rolagem { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

/* etapas do pedido */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; counter-reset: etapa; }
.etapas li { text-align: center; font-size: .78rem; color: var(--suave); display: grid; gap: 6px; justify-items: center; font-weight: 600; }
.etapas li::before { counter-increment: etapa; content: counter(etapa); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-2); border: 2px solid var(--borda); font-weight: 700; }
.etapas li.feita::before { content: "✓"; background: var(--gradiente); border-color: transparent; color: #fff; }
.etapas li.atual { color: var(--texto); } .etapas li.atual::before { border-color: var(--marca-2); color: var(--marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca-2) 25%, transparent); }
.explica { display: grid; gap: 8px; margin-top: 14px; }
.player video { width: 100%; max-height: 70vh; background: #000; border-radius: 12px; display: block; }
.ajuda { background: var(--superficie-2); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.ajuda summary { cursor: pointer; font-weight: 600; } .ajuda p { margin-top: 8px; }
.passos { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; }
.grade-ajustes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.historico li { font-size: .9rem; padding: 8px 0; border-bottom: 1px solid var(--borda); } .historico li:last-child { border-bottom: 0; }
.historico { gap: 0; }
.termos h2, .termos h3 { margin: 16px 0 6px; } .termos .item { margin: 2px 0 2px 8px; }
.termos { max-height: 60vh; overflow: auto; }

/* entrada (login) */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 20px 16px;
  background: radial-gradient(900px 500px at 15% -10%, color-mix(in srgb, var(--marca-2) 22%, transparent), transparent), radial-gradient(700px 400px at 100% 110%, color-mix(in srgb, var(--destaque) 16%, transparent), transparent), var(--fundo); }
.entrada .cartao { width: min(100%, 420px); display: grid; gap: 16px; padding: 28px 24px; }
.entrada .marca { flex-direction: column; text-align: center; gap: 10px; } .entrada .logo { width: 56px; height: 56px; border-radius: 16px; } .entrada .logo .icone { width: 30px; height: 30px; }
.entrada h1 { font-size: 1.6rem; white-space: normal; }
.seguranca { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--suave); font-size: .82rem; text-align: center; }

@media (max-width: 720px) {
  .linha { grid-template-columns: 1fr; }
  .medidor { grid-template-columns: 1fr auto; align-items: center; } .medidor .rotulo { grid-column: 1; } .medidor strong { grid-column: 2; grid-row: 1 / span 2; font-size: 1.4rem; } .medidor small { grid-column: 1; }
  .cartao { padding: 16px; }
  .etapas { gap: 2px; } .etapas li { font-size: .68rem; }
  .usuario span.nome { display: none; }
  .topo-direita .botao, .topo-direita button { padding: 8px 12px; min-height: 40px; }
  .tabela thead { display: none; } .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { border: 1px solid var(--borda); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--superficie-2); }
  .tabela td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .tabela td::before { font-weight: 400; color: var(--suave); font-size: .8rem; text-align: left; flex: none; }
  .tabela td:nth-child(1)::before { content: "Data"; } .tabela td:nth-child(2)::before { content: "Tipo"; } .tabela td:nth-child(3)::before { content: "Valor"; }
  .tabela td:nth-child(4)::before { content: "Motivo"; } .tabela td:nth-child(5)::before { content: "Vídeo"; } .tabela td:nth-child(6)::before { content: "Origem"; }
  .tabela td[colspan] { display: block; text-align: center; } .tabela td[colspan]::before { content: none; }
  .pedido .acoes { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .topo, button, .botao { display: none; } }

/* editor interativo */
.pagina.larga { max-width: 1280px; }
.editor-grade { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; gap: 18px; align-items: start; }
.editor-video { position: sticky; top: 76px; }
.sem-borda { border: 0; padding: 0; margin: 0; display: block; min-width: 0; }
.sem-borda:disabled { opacity: .55; pointer-events: none; }
.contadores { display: grid; gap: 8px; margin: 12px 0; } .contadores div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--borda); padding-bottom: 6px; }
.contadores dt { color: var(--suave); font-size: .88rem; } .contadores dd { margin: 0; }
.abas { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 2px solid var(--borda); margin-bottom: 14px; }
.aba { background: transparent; color: var(--suave); border-radius: 10px 10px 0 0; min-height: 42px; padding: 8px 16px; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.aba[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--marca-2); background: var(--superficie-2); }
.cenas { display: grid; gap: 10px; }
.cena { border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie-2); overflow: hidden; }
.cena > summary { cursor: pointer; padding: 12px 14px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; list-style: none; }
.cena > summary::-webkit-details-marker { display: none; }
.cena > summary strong { white-space: nowrap; } .cena > summary .trecho { color: var(--suave); font-size: .9rem; flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cena[open] > summary { border-bottom: 1px solid var(--borda); background: var(--superficie); }
.cena-corpo { padding: 14px; display: grid; gap: 16px; }
.grupo { display: grid; gap: 6px; } .grupo > h3 { margin: 0; font-size: .88rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.linha-botoes select, .linha-botoes input { width: auto; flex: 1 1 140px; min-height: 40px; }
.opcoes-midia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opcao-midia { padding: 0; min-height: 0; background: var(--superficie); color: var(--texto); border: 2px solid var(--borda); border-radius: 12px; overflow: hidden; display: grid; font-weight: 600; font-size: .8rem; text-align: center; }
.opcao-midia[aria-pressed="true"] { border-color: var(--marca-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-2) 30%, transparent); }
.opcao-midia img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--superficie-2); }
.opcao-midia .sem-img { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--superficie-2); color: var(--suave); }
.opcao-midia span.nome { padding: 6px 4px; }
.botao-mini { min-height: 38px; padding: 6px 12px; font-size: .88rem; border-radius: 10px; background: var(--superficie); color: var(--texto); border: 1.5px solid var(--borda); }
.botao-mini:hover { background: var(--superficie-2); filter: none; } .botao-mini[aria-pressed="true"] { border-color: var(--marca-2); background: color-mix(in srgb, var(--marca) 14%, transparent); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--superficie); border: 1px solid var(--borda); font-size: .85rem; }
.chip button { min-height: 0; padding: 0 4px; background: transparent; color: var(--vermelho); border-radius: 6px; font-size: 1rem; line-height: 1.2; }
.cartao-texto { border: 1px solid var(--borda); border-radius: 12px; padding: 12px; display: grid; gap: 8px; background: var(--superficie-2); margin-bottom: 8px; }
.barra-mudancas { position: sticky; bottom: 12px; z-index: 6; display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap;
  background: var(--superficie); border: 1.5px solid var(--marca-2); border-radius: 14px; padding: 12px 16px; box-shadow: var(--sombra); }
.barra-mudancas[hidden], [role="tabpanel"][hidden] { display: none; }
.lista-mini { margin: 4px 0 0; padding-left: 1.1rem; font-size: .88rem; color: var(--suave); }
.rodape-editor { align-items: flex-start; } .rodape-editor small { display: block; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--texto); color: var(--fundo); padding: 10px 18px; border-radius: 99px; z-index: 20; font-weight: 600; box-shadow: var(--sombra); max-width: calc(100vw - 32px); }
.girando { display: inline-block; width: 16px; height: 16px; border: 3px solid var(--borda); border-top-color: var(--marca); border-radius: 50%; animation: gira 0.9s linear infinite; vertical-align: -3px; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .editor-grade { grid-template-columns: 1fr; } .editor-video { position: static; } }
@media (prefers-reduced-motion: reduce) { .girando { animation: none; } }

/* andamento da produção */
.barra-progresso { height: 14px; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--borda); overflow: hidden; margin: 10px 0 6px; }
.barra-progresso > span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--g1), var(--g2)); transition: width .8s ease; }
.linha-progresso { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; } .linha-progresso strong { font-size: 1.4rem; }
.etapas-and { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.etapas-and li { display: flex; align-items: center; gap: 10px; color: var(--suave); }
.etapas-and li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--borda); background: var(--superficie-2); display: grid; place-items: center; font-size: .8rem; flex: none; }
.etapas-and li.feita { color: var(--texto); } .etapas-and li.feita::before { content: "✓"; background: var(--gradiente); border-color: transparent; color: #fff; }
.etapas-and li.atual { color: var(--texto); font-weight: 700; } .etapas-and li.atual::before { border-color: var(--marca-2); border-top-color: var(--marca); animation: gira .9s linear infinite; }
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-height: 360px; overflow: auto; padding: 2px; }
.mini { position: relative; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; background: var(--superficie-2); aspect-ratio: 16 / 9; }
.mini img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.mini span { position: absolute; left: 4px; bottom: 4px; padding: 1px 7px; border-radius: 99px; font-size: .72rem; font-weight: 700; background: rgba(0, 0, 0, .65); color: #fff; }
@keyframes aparece { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.mini.nova { animation: aparece .4s ease; }
@media (prefers-reduced-motion: reduce) { .etapas-and li.atual::before, .mini.nova { animation: none; } .barra-progresso > span { transition: none; } }

[hidden] { display: none !important; }

/* ============ Novo visual: menu lateral, topo, estados ============ */
body { background: radial-gradient(1000px 520px at 85% -12%, color-mix(in srgb, var(--g1) 16%, transparent), transparent), var(--fundo); background-attachment: fixed; }
h1 { font-weight: 700; } h2 { font-weight: 650; }
.pular { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--superficie); color: var(--texto); padding: 10px 16px; border-radius: 10px; border: 2px solid var(--marca-2); }
.pular:focus { left: 8px; }

.app { display: grid; grid-template-columns: var(--menu-largura) minmax(0, 1fr); min-height: 100vh; }
.coluna { min-width: 0; display: flex; flex-direction: column; }
.menu { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 18px 14px; background: var(--menu); border-right: 1px solid var(--borda); }
.menu-marca { display: flex; align-items: center; gap: 12px; padding: 2px 6px; }
.menu-marca strong { display: block; font-size: 1.05rem; line-height: 1.2; } .menu-marca small { color: var(--suave); font-size: .78rem; }
.menu-saldo { border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--g1) 24%, transparent), color-mix(in srgb, var(--g2) 14%, transparent)); }
.menu-saldo span { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: .8rem; font-weight: 600; }
.menu-saldo strong { font-size: 1.45rem; letter-spacing: -.02em; line-height: 1.2; }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 9px 12px; border-radius: 12px; border: 1px solid transparent; background: transparent;
  color: var(--suave); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; text-align: left; }
.menu-item:hover { color: var(--texto); background: var(--superficie-2); filter: none; }
.menu-item[aria-current="page"] { color: var(--texto); background: color-mix(in srgb, var(--g1) 22%, transparent); border-color: color-mix(in srgb, var(--g1) 55%, transparent); }
.menu-item[aria-current="page"] .icone { color: var(--marca); }
.menu-item.desativado { opacity: .5; cursor: not-allowed; }
.menu-item.desativado:hover { background: transparent; color: var(--suave); }
.menu-item .pilula { margin-left: auto; }
button.menu-item { justify-content: flex-start; }
.pilula { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--gradiente); color: #fff; letter-spacing: .02em; }
.menu-fim { margin-top: auto; display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--borda); }
.menu-fim form { margin: 0; }
.menu-fim .menu-item .icone { color: var(--suave); }
.veu { display: none; }

.topo { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 24px; min-height: 68px;
  background: color-mix(in srgb, var(--fundo) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); }
.topo h1 { font-size: 1.25rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-esq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topo-direita { gap: 10px; flex-wrap: nowrap; }
.chip-saldo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie); font-weight: 700; white-space: nowrap; }
.chip-saldo .icone { color: var(--marca); } .chip-saldo small { color: var(--suave); font-weight: 600; font-size: .75rem; }
.chip-usuario { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie); max-width: 220px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gradiente); color: #fff; font-weight: 700; flex: none; }
.chip-usuario .nome { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botao-menu { display: none; min-height: 44px; width: 44px; padding: 0; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: 12px; }
.botao-menu:hover { background: var(--superficie-2); filter: none; }
.pagina { max-width: 1120px; width: 100%; padding: 24px 24px 56px; }
.pagina.estreita { max-width: 780px; }

/* cartões e botões no novo estilo */
.cartao { border-radius: 18px; }
.cartao > h2:first-child { font-size: 1.05rem; }
.medidor.principal { box-shadow: 0 10px 30px color-mix(in srgb, var(--g1) 35%, transparent); }
.medidor .rotulo { text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
button, .botao { box-shadow: 0 4px 14px color-mix(in srgb, var(--g1) 30%, transparent); }
button.secundario, .botao.secundario, .botao-mini, .aba, .chip button, .opcao-midia, .menu-item, .botao-menu { box-shadow: none; }
button:disabled { opacity: .55; cursor: not-allowed; }
.aviso { border-radius: 14px; }
.acoes-topo { display: flex; align-items: center; gap: 10px; }

/* estados: cor + ícone (o ícone vem do CSS, serve para o que o servidor e o JS desenham) */
.selo { display: inline-flex; align-items: center; gap: 5px; }
[class*="estado-"] .selo::before { content: ""; width: 1em; height: 1em; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; flex: none; }
.estado-enviado .selo, .estado-produzindo_previa .selo, .estado-em_revisao .selo, .estado-gerando_final .selo { color: var(--azul); border-color: var(--azul); background: var(--azul-fundo); }
.estado-previa_pronta .selo { color: var(--ambar); border-color: var(--ambar); background: var(--ambar-fundo); }
.estado-aprovado .selo { color: var(--violeta); border-color: var(--violeta); background: var(--violeta-fundo); }
.estado-entregue .selo, .estado-concluido .selo { color: var(--verde); border-color: var(--verde); background: var(--verde-fundo); }
.estado-falhou .selo { color: var(--vermelho); border-color: var(--vermelho); background: var(--vermelho-fundo); }
.estado-cancelado .selo, .estado-expirado .selo { color: var(--cinza); border-color: var(--cinza); background: var(--cinza-fundo); }
.estado-enviado .selo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E"); }
.estado-produzindo_previa .selo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7%22/%3E%3Cpath d=%22M21 4v5h-5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7%22/%3E%3Cpath d=%22M21 4v5h-5%22/%3E%3C/svg%3E"); }
.estado-em_revisao .selo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7%22/%3E%3Cpath d=%22M21 4v5h-5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7%22/%3E%3Cpath d=%22M21 4v5h-5%22/%3E%3C/svg%3E"); }
.estado-gerando_final .selo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7%22/%3E%3Cpath d=%22M21 4v5h-5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7%22/%3E%3Cpath d=%22M21 4v5h-5%22/%3E%3C/svg%3E"); }
.estado-previa_pronta .selo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m10 8.5 5 3.5-5 3.5z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m10 8.5 5 3.5-5 3.5z%22/%3E%3C/svg%3E"); }
.estado-aprovado .selo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6z%22/%3E%3Cpath d=%22m9 12 2.2 2.2L15 10%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6z%22/%3E%3Cpath d=%22m9 12 2.2 2.2L15 10%22/%3E%3C/svg%3E"); }
.estado-entregue .selo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8 12.5 2.8 2.8L16 9.5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8 12.5 2.8 2.8L16 9.5%22/%3E%3C/svg%3E"); }
.estado-concluido .selo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8 12.5 2.8 2.8L16 9.5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8 12.5 2.8 2.8L16 9.5%22/%3E%3C/svg%3E"); }
.estado-falhou .selo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 4 2.5 20h19z%22/%3E%3Cpath d=%22M12 10v4M12 17.2v.1%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 4 2.5 20h19z%22/%3E%3Cpath d=%22M12 10v4M12 17.2v.1%22/%3E%3C/svg%3E"); }
.estado-cancelado .selo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m9 9 6 6M15 9l-6 6%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m9 9 6 6M15 9l-6 6%22/%3E%3C/svg%3E"); }
.estado-expirado .selo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E"); }
.pedido { border-left: 4px solid var(--borda); }
.estado-enviado.pedido, .estado-produzindo_previa.pedido, .estado-em_revisao.pedido, .estado-gerando_final.pedido { border-left-color: var(--azul); }
.estado-previa_pronta.pedido { border-left-color: var(--ambar); } .estado-aprovado.pedido { border-left-color: var(--violeta); }
.estado-entregue.pedido { border-left-color: var(--verde); } .estado-falhou.pedido { border-left-color: var(--vermelho); }
.estado-cancelado.pedido, .estado-expirado.pedido { border-left-color: var(--cinza); }
.estado-produzindo_previa .selo::before, .estado-gerando_final .selo::before, .estado-em_revisao .selo::before { animation: gira 1.6s linear infinite; }

/* vistas da tela inicial (Início / Meus vídeos / Extrato), só com JavaScript; sem ele tudo aparece */
html.js body[data-vista="inicio"] [data-vista-de]:not([data-vista-de~="inicio"]),
html.js body[data-vista="videos"] [data-vista-de]:not([data-vista-de~="videos"]),
html.js body[data-vista="extrato"] [data-vista-de]:not([data-vista-de~="extrato"]) { display: none; }

/* classes que substituem estilos escritos no HTML (a política de segurança do site não aceita estilo solto no HTML) */
.espaco-topo { margin-top: 12px; } .espaco-topo-g { margin-top: 16px; }

/* tablet e celular: o menu vira gaveta */
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .menu { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(86vw, 300px); transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--sombra); }
  body.menu-aberto .menu { transform: none; }
  body.menu-aberto .veu { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(3, 6, 20, .6); }
  .botao-menu { display: inline-flex; }
  .topo { padding: 10px 16px; min-height: 60px; } .pagina { padding: 16px 16px 48px; }
  .chip-usuario .nome { display: none; } .chip-usuario { padding: 4px; }
  .chip-saldo small { display: none; }
}
@media (max-width: 640px) { .topo { flex-wrap: wrap; } .topo-direita { display: contents; } .topo-esq { flex: 1 1 0; } .acoes-topo { order: 3; flex: 1 0 100%; flex-wrap: wrap; } .acoes-topo:empty { display: none; } }
@media (max-width: 480px) { .topo { gap: 8px; } .topo-esq { gap: 8px; } .topo h1 { font-size: 1rem; } .chip-saldo { padding: 6px 10px; font-size: .9rem; } .chip-saldo .icone { display: none; } .avatar { width: 30px; height: 30px; } }
@media (prefers-reduced-motion: reduce) { .menu { transition: none; } .estado-produzindo_previa .selo::before, .estado-gerando_final .selo::before, .estado-em_revisao .selo::before { animation: none; } }
@media print { .menu, .veu { display: none !important; } .app { display: block; } }

/* seletor de tema */
.tema { position: relative; }
.botao-tema { min-height: 44px; width: 44px; padding: 0; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: 50%; box-shadow: none; }
.botao-tema:hover { background: var(--superficie-2); filter: none; }
.tema-painel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 300px; padding: 14px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra); display: grid; gap: 10px; }
.tema-painel[hidden] { display: none; }
.tema-painel h2 { font-size: .85rem; margin: 0; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.tema-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tema-opcao { white-space: nowrap; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 10px; border-radius: 12px; background: var(--superficie-2); color: var(--texto); border: 2px solid transparent; box-shadow: none; font-size: .88rem; justify-content: flex-start; }
.tema-opcao:hover { filter: none; border-color: var(--borda); }
.tema-opcao[aria-pressed="true"] { border-color: var(--marca-2); }
.amostra { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 2px solid rgba(255,255,255,.25); }
.amostra[data-tema="noite"] { background: linear-gradient(135deg, #6d4aff, #2f6df0); }
.amostra[data-tema="oceano"] { background: linear-gradient(135deg, #0369a1, #38bdf8); }
.amostra[data-tema="floresta"] { background: linear-gradient(135deg, #15803d, #4ade80); }
.amostra[data-tema="por-do-sol"] { background: linear-gradient(135deg, #c2410c, #be185d); }
.amostra[data-tema="ametista"] { background: linear-gradient(135deg, #a21caf, #6d28d9); }
.amostra[data-tema="grafite"] { background: linear-gradient(135deg, #475569, #94a3b8); }
.amostra[data-tema="claro"] { background: linear-gradient(135deg, #ffffff, #dde2f3); border-color: #9aa3c4; }
@media (max-width: 640px) { .tema { position: static; } .tema-painel { position: fixed; left: 12px; right: 12px; top: 68px; width: auto; } }

/* ============ "Meus vídeos" em cartões com telinha ============ */
.lista-cartoes { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; align-items: stretch; }
.lista-cartoes .vazio { grid-column: 1 / -1; }
.lista-cartoes .pedido { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--borda); border-left-width: 1px; border-radius: 16px; background: var(--superficie-2); }
.lista-cartoes .pedido:hover { border-color: color-mix(in srgb, var(--marca-2) 55%, var(--borda)); }
.lista-cartoes .estado-enviado.pedido, .lista-cartoes .estado-produzindo_previa.pedido, .lista-cartoes .estado-em_revisao.pedido, .lista-cartoes .estado-gerando_final.pedido { border-left-color: var(--borda); box-shadow: inset 0 3px 0 var(--azul); }
.lista-cartoes .estado-previa_pronta.pedido { border-left-color: var(--borda); box-shadow: inset 0 3px 0 var(--ambar); }
.lista-cartoes .estado-aprovado.pedido { border-left-color: var(--borda); box-shadow: inset 0 3px 0 var(--violeta); }
.lista-cartoes .estado-entregue.pedido { border-left-color: var(--borda); box-shadow: inset 0 3px 0 var(--verde); }
.lista-cartoes .estado-falhou.pedido { border-left-color: var(--borda); box-shadow: inset 0 3px 0 var(--vermelho); }
.lista-cartoes .estado-cancelado.pedido, .lista-cartoes .estado-expirado.pedido { border-left-color: var(--borda); box-shadow: inset 0 3px 0 var(--cinza); }
.tela { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--g1) 38%, transparent), transparent), linear-gradient(160deg, var(--superficie), var(--fundo)); }
.tela-icone { width: 44px; height: 44px; background: color-mix(in srgb, var(--texto) 55%, transparent); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.estado-previa_pronta .tela-icone { background: var(--ambar); } .estado-entregue .tela-icone { background: var(--verde); } .estado-falhou .tela-icone { background: var(--vermelho); } .estado-aprovado .tela-icone { background: var(--violeta); }
.tela-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; pointer-events: none; opacity: 0; transition: opacity .25s; }
.tela.com-quadro .tela-video { opacity: 1; } .tela.com-quadro .tela-icone { opacity: 0; }
.tela.com-quadro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 35%, transparent 65%, rgba(0,0,0,.35)); pointer-events: none; }
.tela-link { position: absolute; inset: 0; z-index: 2; border-radius: 0; }
.tela-link:focus-visible { outline-offset: -4px; }
.tela .selo { position: absolute; left: 10px; top: 10px; z-index: 3; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(6px); }
.pedido-corpo { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1 1 auto; min-width: 0; }
.pedido-titulo { margin: 0; font-size: 1rem; line-height: 1.3; min-height: 1.3em; }
.pedido-titulo a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); text-decoration: none; }
.pedido-titulo a:hover { color: var(--marca); text-decoration: underline; }
.pedido-meta { margin: 0; color: var(--suave); font-size: .82rem; }
.pedido-texto { margin: 6px 0 0; font-size: .9rem; color: var(--suave); min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pedido-aviso { margin: 4px 0 0; font-size: .8rem; color: var(--ambar); }
.pedido-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.pedido-acoes form { margin: 0; }
.pedido-acoes .botao, .pedido-acoes button { min-height: 38px; padding: 6px 16px; font-size: .9rem; border-radius: 10px; }
.estado-enviado .tela-icone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E"); }
.estado-produzindo_previa .tela-icone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7%22/%3E%3Cpath d=%22M21 4v5h-5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7%22/%3E%3Cpath d=%22M21 4v5h-5%22/%3E%3C/svg%3E"); }
.estado-em_revisao .tela-icone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7%22/%3E%3Cpath d=%22M21 4v5h-5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7%22/%3E%3Cpath d=%22M21 4v5h-5%22/%3E%3C/svg%3E"); }
.estado-gerando_final .tela-icone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7%22/%3E%3Cpath d=%22M21 4v5h-5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7%22/%3E%3Cpath d=%22M21 4v5h-5%22/%3E%3C/svg%3E"); }
.estado-previa_pronta .tela-icone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m10 8.5 5 3.5-5 3.5z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m10 8.5 5 3.5-5 3.5z%22/%3E%3C/svg%3E"); }
.estado-aprovado .tela-icone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6z%22/%3E%3Cpath d=%22m9 12 2.2 2.2L15 10%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6z%22/%3E%3Cpath d=%22m9 12 2.2 2.2L15 10%22/%3E%3C/svg%3E"); }
.estado-entregue .tela-icone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8 12.5 2.8 2.8L16 9.5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8 12.5 2.8 2.8L16 9.5%22/%3E%3C/svg%3E"); }
.estado-concluido .tela-icone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8 12.5 2.8 2.8L16 9.5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8 12.5 2.8 2.8L16 9.5%22/%3E%3C/svg%3E"); }
.estado-falhou .tela-icone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 4 2.5 20h19z%22/%3E%3Cpath d=%22M12 10v4M12 17.2v.1%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 4 2.5 20h19z%22/%3E%3Cpath d=%22M12 10v4M12 17.2v.1%22/%3E%3C/svg%3E"); }
.estado-cancelado .tela-icone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m9 9 6 6M15 9l-6 6%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m9 9 6 6M15 9l-6 6%22/%3E%3C/svg%3E"); }
.estado-expirado .tela-icone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E"); }
@media (max-width: 480px) { .lista-cartoes { grid-template-columns: 1fr; } .topo .tema { display: none; } }

.lista-cartoes .pedido > .tela { flex: 0 0 auto; }

/* ===== Início no estilo do layout de referência: boas-vindas, recursos, "Seus vídeos" e a coluna Plano / Uso do mês / Atalhos / Dica ===== */
.chip-cliente { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 10px; border-radius: 99px; background: var(--violeta-fundo); color: var(--violeta); }
.menu-titulo { margin: 18px 10px 6px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.menu-embreve { list-style: none; margin: 0; padding: 0; }
.pilula.suave { background: var(--cinza-fundo); color: var(--cinza); }
.inicio-grade { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start; }
.inicio-principal { display: grid; gap: 18px; min-width: 0; }
.inicio-lateral { display: grid; gap: 14px; min-width: 0; }
.heroi { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px; align-items: center; padding: 8px 4px; }
.heroi-ola { margin: 0 0 4px; font-weight: 600; }
.heroi-titulo { margin: 0 0 10px; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; letter-spacing: -.03em; }
.destaque-texto { background: var(--gradiente); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroi-arte { width: 100%; height: auto; max-height: 240px; }
.arte-tela { fill: var(--superficie-2); stroke: var(--borda); stroke-width: 2; } .arte-faixa { fill: var(--borda); } .arte-base { fill: var(--superficie-2); stroke: var(--borda); }
.arte-selo { filter: drop-shadow(0 6px 10px rgba(20, 12, 70, .35)); }
.recursos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.recursos li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.recurso-icone { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--violeta-fundo); color: var(--violeta); }
.recursos strong { display: block; font-size: .88rem; } .recursos small { color: var(--suave); font-size: .76rem; }
.secao-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .secao-cab h2 { margin: 0; }
.ver-todos { display: inline-flex; align-items: center; gap: 4px; color: var(--marca-2); font-weight: 600; font-size: .9rem; text-decoration: none; } .ver-todos:hover { text-decoration: underline; }
.novo-video { list-style: none; } .novo-video a { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 170px; height: 100%; border: 1.5px dashed var(--borda); border-radius: var(--raio); color: var(--texto); text-decoration: none; text-align: center; padding: 14px; }
.novo-video a:hover { border-color: var(--marca); background: var(--superficie-2); } .novo-video small { color: var(--suave); }
.plano { border-color: color-mix(in srgb, var(--g1) 55%, var(--borda)); background: linear-gradient(160deg, color-mix(in srgb, var(--g1) 14%, var(--superficie)), var(--superficie)); }
.plano-topo { display: flex; align-items: center; gap: 10px; } .plano-topo h2 { margin: 0; flex: 1; font-size: 1.05rem; }
.plano-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--gradiente); color: #fff; }
.plano-itens { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.plano-itens li { display: flex; align-items: center; gap: 8px; } .plano-itens .icone { width: 18px; height: 18px; color: var(--verde); flex: 0 0 auto; }
.uso-cab { display: flex; justify-content: space-between; align-items: baseline; } .uso-cab h2 { margin: 0; font-size: 1.05rem; } .uso-cab strong { font-size: 1.05rem; }
.uso progress { width: 100%; height: 10px; margin: 10px 0 8px; border: 0; border-radius: 99px; overflow: hidden; background: var(--cinza-fundo); appearance: none; -webkit-appearance: none; }
.uso progress::-webkit-progress-bar { background: var(--cinza-fundo); border-radius: 99px; } .uso progress::-webkit-progress-value { background: var(--gradiente); border-radius: 99px; } .uso progress::-moz-progress-bar { background: var(--g2); border-radius: 99px; }
.uso progress.cheio::-webkit-progress-value { background: var(--destaque); } .uso progress.cheio::-moz-progress-bar { background: var(--destaque); }
.atalhos h2, .dica h2 { margin: 0 0 8px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.atalhos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.atalhos a { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 12px; color: var(--texto); text-decoration: none; } .atalhos a:hover { background: var(--superficie-2); }
.atalhos a > span { flex: 1; min-width: 0; } .atalhos strong { display: block; font-size: .9rem; } .atalhos small { color: var(--suave); font-size: .76rem; }
.atalhos a > .icone:first-child { color: var(--violeta); } .atalhos a > .icone:last-child { width: 16px; height: 16px; color: var(--suave); }
.dica p { margin: 0; color: var(--suave); font-size: .9rem; line-height: 1.5; }
@media (max-width: 1100px) { .inicio-grade { grid-template-columns: minmax(0, 1fr); } .inicio-lateral { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .heroi { grid-template-columns: minmax(0, 1fr); } .heroi-arte { max-height: 180px; order: -1; } .recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inicio-lateral { grid-template-columns: minmax(0, 1fr); } }
.links-entrada { margin: 4px 0 0; text-align: center; font-size: .92rem; } .links-entrada a { color: var(--marca-2); font-weight: 600; }

.resumo-pedido { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; } .resumo-pedido li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borda); } .resumo-pedido li span { color: var(--suave); }
.faq details { border-top: 1px solid var(--borda); padding: 10px 2px; } .faq details:first-of-type { border-top: 0; } .faq summary { cursor: pointer; font-weight: 600; } .faq details[open] summary { color: var(--marca-2); } .faq details p { margin: 8px 0 0; color: var(--suave); }
.orcamento { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); } .selo-orc { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--azul-fundo); color: var(--azul); }
.estado-orc-aprovado .selo-orc { background: var(--verde-fundo); color: var(--verde); } .estado-orc-recusado .selo-orc, .estado-orc-cancelado .selo-orc { background: var(--cinza-fundo); color: var(--cinza); }
textarea { width: 100%; min-height: 80px; font: inherit; }
.cartao .linha-botoes { margin-top: 14px; }

/* ===== botões de trabalho do cartão, motivos, contador de remontagens e filtros de Meus vídeos ===== */
.pedido-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pedido-acoes form { margin: 0; }
.botao.desativado, button.desativado { opacity: .45; cursor: not-allowed; pointer-events: auto; } .botao.desativado:hover { background: inherit; }
.botao.secundario.acao-apagar, button.secundario.acao-apagar { color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 45%, var(--borda)); }
.pedido-motivo { display: flex; gap: 6px; margin: 8px 0 0; color: var(--suave); font-size: .8rem; line-height: 1.4; }
.contador-rem { margin: 6px 0 0; font-size: .82rem; color: var(--suave); } .contador-rem strong { color: var(--texto); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.filtro { font: inherit; font-size: .85rem; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--borda); background: transparent; color: var(--suave); cursor: pointer; }
.filtro[aria-pressed="true"] { background: var(--violeta-fundo); color: var(--violeta); border-color: var(--violeta); } .filtro .conta { opacity: .8; margin-left: 4px; }
#filtro-busca { flex: 1 1 180px; min-width: 150px; max-width: 280px; margin-left: auto; }
li.pedido[hidden] { display: none; }

/* ===== editor: lista curta de músicas licenciadas, com prévia de áudio ===== */
.faixas { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.faixa { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2); } .faixa.atual { border-color: var(--verde); }
.faixa-info { display: grid; gap: 2px; } .faixa audio { width: 100%; height: 34px; }
.abas { flex-wrap: wrap; }

/* ===== pacotes: vitrine, economia, saldo em vídeos e validade ===== */
.menu-videos { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .82rem; color: var(--suave); } .menu-videos strong { color: var(--texto); }
.chip-videos { margin-right: 6px; }
.lotes { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; } .lotes li { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; padding: 6px 0; border-bottom: 1px solid var(--borda); } .lotes small { color: var(--suave); }
.lotes li.alerta small { color: var(--ambar); font-weight: 700; }
.titulo-secao { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; font-size: 1.15rem; }
.vitrine { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.produto { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); } .produto.com-economia { border-color: var(--marca); box-shadow: 0 10px 30px color-mix(in srgb, var(--g1) 22%, transparent); }
.produto h3 { margin: 0; font-size: 1.05rem; } .produto-preco { margin: 4px 0 0; font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; } .produto-video { margin: 0; color: var(--suave); }
.produto-economia { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; padding: 8px 10px; border-radius: 10px; background: var(--verde-fundo); color: var(--verde); font-size: .86rem; }
.produto-itens { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 4px; color: var(--suave); font-size: .88rem; } .produto-itens li::before { content: "• "; }
.produto form { margin-top: auto; }
.produto-economia .icone { flex: 0 0 auto; margin-top: 2px; } .produto-economia span { min-width: 0; }
.creditos .uso-cab strong { font-size: 1.6rem; }
.campo-contato { display: grid; gap: 4px; margin: 0 0 8px; font-size: .85rem; color: var(--suave); } .campo-contato input { min-height: 40px; padding: 8px 10px; }
.tabela-precos { width: 100%; max-width: 420px; border-collapse: collapse; margin: 8px 0; } .tabela-precos th, .tabela-precos td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); } .tabela-precos th { color: var(--suave); font-weight: 600; font-size: .85rem; }