/* Coxia · identidade própria: violeta + rosa-coral + sol + menta + céu.
   Cada aba tem a sua cor (--tema). A cor do texto no vídeo continua vindo do produto ou da cena. */
:root{
  --bg:#fff8f3;--card:#fff;--ink:#22183f;--soft:#6c6488;--line:#efe7ef;
  --violeta:#7b4dff;--rosa:#ff5c8a;--sol:#ffb020;--menta:#14b88a;--ceu:#2f8cff;--cinza:#8b84a3;
  --violeta-f:#efe9ff;--rosa-f:#ffe8ef;--sol-f:#fff3d6;--menta-f:#dcf7ee;--ceu-f:#e3f0ff;--cinza-f:#f0eef5;
  --tema:var(--violeta);--tema-f:var(--violeta-f);
  --ok:#0f8a66;--ok-fundo:#dcf7ee;--alerta:#8a5a00;--alerta-fundo:#fff1cf;--erro:#c0263d;--erro-fundo:#ffe4e8;
  --ui:"Manrope","Segoe UI",system-ui,sans-serif;--tit:"Poppins","Manrope",system-ui,sans-serif;
  --sombra:0 6px 18px #4a2a8a14;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#141024;--card:#1f1936;--ink:#f4f0ff;--soft:#b3abcf;--line:#2f2850;
  --violeta:#a585ff;--rosa:#ff7fa3;--sol:#ffc53d;--menta:#3fd8ad;--ceu:#6aaeff;--cinza:#a59ec0;
  --violeta-f:#2c2350;--rosa-f:#3a1f33;--sol-f:#3a2f15;--menta-f:#143a33;--ceu-f:#172c4a;--cinza-f:#2a2540;
  --ok:#5fe0b5;--ok-fundo:#143a33;--alerta:#ffd27a;--alerta-fundo:#3a2f15;--erro:#ff98aa;--erro-fundo:#3d1a26;--sombra:none}}
.c-violeta,.t-violeta{--tema:var(--violeta);--tema-f:var(--violeta-f)}
.c-rosa,.t-rosa{--tema:var(--rosa);--tema-f:var(--rosa-f)}
.c-sol,.t-sol{--tema:var(--sol);--tema-f:var(--sol-f)}
.c-menta,.t-menta{--tema:var(--menta);--tema-f:var(--menta-f)}
.c-ceu,.t-ceu{--tema:var(--ceu);--tema-f:var(--ceu-f)}
.c-cinza{--tema:var(--cinza);--tema-f:var(--cinza-f)}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:500 16px/1.5 var(--ui);padding:0 max(16px,env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));-webkit-tap-highlight-color:transparent}
main{max-width:640px;margin:0 auto;padding-top:max(16px,env(safe-area-inset-top))}
section,.sub{display:grid;gap:14px}
[hidden]{display:none!important}
h1,h2,h3{margin:0;line-height:1.2;font-family:var(--tit);font-weight:800;letter-spacing:-.01em}
h1{font-size:28px}h2{font-size:20px}h3{font-size:17px}
p{margin:0}.leve{color:var(--soft);font-size:14px;font-weight:500}
button,input,select,textarea{font:inherit;color:inherit}
button,.botao-arq{cursor:pointer;border:0;border-radius:14px;padding:11px 16px;font-weight:800;background:var(--tema-f);color:var(--ink);min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .1s}
button:active{transform:scale(.97)}
button.forte{background:var(--tema);color:#fff}
.t-sol button.forte,.c-sol button.forte{color:#2b1d00}
button.largo{width:100%}
button.mini{padding:6px 12px;min-height:36px;font-size:14px}
button:disabled{opacity:.45;cursor:not-allowed}
.leve-btn{background:none;color:var(--soft);font-weight:700;text-decoration:underline}
input,select,textarea{width:100%;padding:11px 12px;border:2px solid var(--line);border-radius:14px;background:var(--card)}
input:focus,select:focus,textarea:focus{border-color:var(--tema);outline:none}
input[type=color]{height:46px;padding:4px}
input[type=range]{padding:0;border:0;accent-color:var(--tema)}
textarea{resize:vertical}
:focus-visible{outline:3px solid var(--tema);outline-offset:2px}
.caixa{background:var(--card);border-radius:22px;padding:16px;display:grid;gap:12px;min-width:0;box-shadow:var(--sombra);border:1.5px solid var(--line)}
section > .caixa:first-child,.sub > .caixa:first-child{border-top:5px solid var(--tema)}
.pilha{display:grid;gap:12px}
.campo{display:grid;gap:4px;font-weight:800;font-size:14px;min-width:0}
.check{display:flex;gap:10px;align-items:center;font-weight:700}
.check input{width:24px;height:24px;flex:none;accent-color:var(--tema)}
.dois{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.linha-form{display:flex;gap:8px;flex-wrap:wrap}.linha-form input{flex:1;min-width:110px}
.titulo-linha,.topo{display:flex;justify-content:space-between;align-items:center;gap:8px}
.marca{display:flex;gap:10px;align-items:center}.marca img{border-radius:12px;flex:none}
.filtros,.chips{display:flex;gap:8px;flex-wrap:wrap}
.filtros button,.chips button{background:var(--card);border:2px solid var(--tema-f)}
.filtros button[aria-pressed=true],.chips button[aria-pressed=true]{background:var(--tema);border-color:var(--tema);color:#fff}
.chips button{min-height:36px;padding:6px 12px;font-size:14px}
.hash{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--soft)}
.pilula{background:var(--sol-f);color:var(--ink);border-radius:99px;padding:6px 12px;font-size:13px;font-weight:800;white-space:nowrap}
.pilula:empty{display:none}
.barra{height:12px;border-radius:99px;background:var(--tema-f);overflow:hidden}.barra.grossa{height:18px}
.barra i{display:block;height:100%;width:0;background:var(--tema);border-radius:99px;transition:width .4s}
.agora{background:linear-gradient(135deg,var(--violeta),var(--rosa));color:#fff;border-radius:24px;padding:20px;display:grid;gap:10px;box-shadow:0 10px 24px #7b4dff33}
.agora small{opacity:.85;font-weight:800;letter-spacing:.08em}
.agora h2{font-size:24px}
.agora button{background:#fff;color:var(--ink)}
.live{--tema:var(--rosa);--tema-f:var(--rosa-f)}
.live button.forte{background:var(--rosa);color:#fff}
.linha{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1.5px dashed var(--line)}
.linha:first-child{border-top:0}
label.linha{cursor:pointer}
.linha input[type=checkbox]{width:28px;height:28px;flex:none;margin:2px 0 0;accent-color:var(--menta)}
.hora{font-weight:800;font-size:19px;min-width:60px;font-variant-numeric:tabular-nums;color:var(--tema)}
.feito .txt,.feito .hora{text-decoration:line-through;color:var(--soft)}
.mus{display:block;width:fit-content;background:var(--rosa-f);color:var(--erro);font-weight:800;border-radius:8px;padding:2px 8px;font-size:13px;margin-bottom:4px}
.selo{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:800;background:var(--sol-f);color:var(--alerta);white-space:normal}
.aviso{background:var(--alerta-fundo);color:var(--alerta);border-radius:14px;padding:10px 12px;font-weight:700;font-size:14px}
.erro{background:var(--erro-fundo);color:var(--erro);border-radius:14px;padding:8px 12px;font-weight:700;font-size:14px}
.okmsg{background:var(--ok-fundo);color:var(--ok);border-radius:14px;padding:8px 12px;font-weight:800;font-size:14px}
.num{background:var(--tema-f);border-radius:16px;padding:10px 12px}.num b{display:block;font-size:24px}
.cronometro{font-family:var(--tit);font-size:42px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;color:var(--rosa)}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0003;vertical-align:-2px;margin-right:4px}
/* capa (boas-vindas) */
.capa{background:linear-gradient(150deg,var(--violeta),var(--rosa));color:#fff;border-radius:28px;padding:24px 20px;display:grid;gap:8px;justify-items:start;box-shadow:0 12px 28px #7b4dff40}
.capa img{border-radius:20px;box-shadow:0 6px 16px #0003}
.capa h1{font-size:44px;letter-spacing:-.02em}
.capa p{font-size:17px;font-weight:700;opacity:.95}
.faixas{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.faixas li{background:var(--tema-f);color:var(--ink);border-radius:99px;padding:4px 10px;font-size:13px;font-weight:800}
/* menu Mais: blocos coloridos e grandes */
.grade-menu{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.grade-menu button{flex-direction:column;min-height:104px;font-size:32px;background:var(--tema-f);border-radius:22px;border:2px solid transparent}
.grade-menu button span{font-size:14px;color:var(--ink)}
.grade-menu button:hover{border-color:var(--tema)}
.rot{background:var(--card);border:1.5px solid var(--line);border-left:6px solid var(--tema);border-radius:18px;padding:14px;display:grid;gap:8px;box-shadow:var(--sombra)}
.rot .fala{font-size:17px;line-height:1.45}
.rot.ok{opacity:.55}
details summary{cursor:pointer;font-weight:800;font-size:16px;color:var(--ink)}
details.caixa > summary{color:var(--tema)}
.dentro{display:grid;gap:8px;padding-top:8px;font-size:15px}
/* palco do editor: vídeo 9:16 com a camada de prévia por cima */
.palco{position:relative;width:100%;max-width:380px;margin:0 auto;aspect-ratio:9/16;background:#000;border-radius:22px;overflow:hidden;box-shadow:0 10px 24px #0003}
.palco video{width:100%;height:100%;object-fit:cover;display:block}
.camada{position:absolute;inset:0;pointer-events:none}
.camada canvas{width:100%;height:100%}
/* barra de baixo: cada aba com a sua cor */
nav{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1.5px solid var(--line);display:flex;justify-content:center;gap:4px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:5;box-shadow:0 -6px 18px #4a2a8a10}
nav button{flex:1;max-width:120px;background:none;font-size:12px;padding:4px 2px;color:var(--soft);flex-direction:column;gap:0;border-radius:16px}
nav button span{font-size:22px}
nav button[aria-current=page]{color:var(--ink);background:var(--tema-f);box-shadow:inset 0 -3px 0 var(--tema)}
#toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);font-weight:800;border-radius:99px;padding:10px 18px;max-width:88vw;text-align:center;z-index:9}
a{color:var(--tema);font-weight:800}
@media (prefers-reduced-motion:reduce){.barra i{transition:none}button:active{transform:none}}
/* fotos de produto e gerador */
.prod-sum{display:flex;align-items:center;gap:10px}
.mini-foto{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none;background:var(--tema-f)}
.mini-foto.grande{width:84px;height:84px;border-radius:14px}
.foto-prod{width:100%;max-width:260px;border-radius:16px;justify-self:center;box-shadow:var(--sombra)}
details.destaque{background:linear-gradient(160deg,var(--ceu-f),var(--card) 60%);border-color:transparent}