/* Clip Studio — extraído do index.html (Passo 0 da refatoração). Não editar aqui e no HTML ao mesmo tempo. */
* { box-sizing: border-box; margin: 0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
outline:2px solid var(--acc); outline-offset:2px; }
body { background:radial-gradient(125% 55% at 84% -8%, rgba(255,90,44,.10), transparent 58%) fixed, var(--bg); color:var(--txt); font:14px/1.5 -apple-system,"Segoe UI",sans-serif; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
header { position:relative; display:flex; align-items:center; gap:14px; padding:10px 18px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); box-shadow:0 1px 0 rgba(0,0,0,.35), 0 8px 20px -16px rgba(0,0,0,.7); }
header h1 { font:600 23px/1.15 Oswald,-apple-system,sans-serif; letter-spacing:0.02em; }
header select { background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:14px; }
.spacer { flex:1; }
.usage { color:var(--dim); font-size:12px; font-family:ui-monospace,monospace; white-space:nowrap; }
main { flex:1; display:flex; min-height:0; position:relative; }
/* chat */
/* chat como gaveta (drawer) sobreposta, em todos os tamanhos */
.chatrail { flex-shrink:0; width:46px; display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:16px;
background:var(--well); border-right:1px solid var(--line); color:var(--acc); cursor:pointer; }
.chatrail:hover { background:var(--panel2); }
.chatrail svg.ic { width:20px; height:20px; }
.raillbl { writing-mode:vertical-rl; transform:rotate(180deg); font-family:Oswald,-apple-system,sans-serif;
text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:600; color:var(--dim); }
#chatCol { position:absolute; top:0; left:0; bottom:0; width:min(360px,88vw); z-index:40;
transform:translateX(-100%); transition:transform .24s ease; background:var(--panel);
border-right:1px solid var(--line-strong,#403823); box-shadow:24px 0 50px -30px rgba(0,0,0,.8);
display:flex; flex-direction:column; min-height:0; }
#chatCol.open { transform:none; }
.chat-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); flex-shrink:0; }
.chat-head b { font-family:Oswald,-apple-system,sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:15px; }
.chat-head .iconbtn { margin-left:auto; width:30px; height:30px; display:grid; place-items:center; background:transparent; border:0; color:var(--dim); border-radius:7px; cursor:pointer; }
.chat-head .iconbtn:hover { background:var(--panel2); color:var(--txt); }
.chat-head .iconbtn svg { width:18px; height:18px; }
#chatScrim.scrim { position:absolute; inset:0; z-index:35; background:rgba(0,0,0,.45); display:none; }
#chatScrim.scrim.open { display:block; }
@media (prefers-reduced-motion: reduce) { #chatCol { transition:none; } }
#msgs { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:92%; padding:9px 12px; border-radius:12px; }
/* o pre-wrap desceu do .msg para o texto: a linha de autor/hora não deve
herdar quebra de linha literal */
.msg .msgtxt { white-space:pre-wrap; }
.msg.user { background:var(--sel); align-self:flex-end; }
.msg.claude { background:var(--panel2); align-self:flex-start; }
.msg.sys { color:var(--dim); font-size:12px; align-self:center; text-align:center; }
.msgmeta { display:flex; gap:6px; align-items:baseline; font-size:11px; color:var(--dim);
margin-bottom:3px; font-variant-numeric:tabular-nums; }
.msgmeta b { font-family:Oswald,-apple-system,sans-serif; text-transform:uppercase;
letter-spacing:.06em; font-weight:600; }
.msg.user .msgmeta { justify-content:flex-end; }
/* bolha viva: fica no fim da conversa enquanto há trabalho em curso */
.msg.working { align-self:stretch; max-width:100%; background:var(--panel2);
border:1px dashed var(--line-strong,#403823); }
.msg.working .wtop { display:flex; gap:9px; align-items:center; }
.msg.working .wstep { font-size:13px; }
.msg.working .wmeta { font-size:11px; color:var(--dim); margin-top:5px; padding-left:23px;
font-variant-numeric:tabular-nums; }
#chatForm { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
#chatInput { flex:1; background:var(--panel2); border:1px solid var(--line); border-radius:10px; color:var(--txt); padding:10px 12px; font:inherit; resize:none; height:64px; }
button { background:var(--acc); color:#15120b; border:0; border-radius:9px; padding:8px 14px; font-weight:700; cursor:pointer; font-size:14px;
transition:filter .15s ease, transform .06s ease, border-color .15s ease, background-color .15s ease; }
button.sec { background:var(--panel2); color:var(--txt); border:1px solid var(--line); font-weight:500; }
button:hover:not(:disabled) { filter:brightness(1.07); }
button.sec:hover:not(:disabled) { border-color:var(--acc); color:var(--acc-soft); }
button:active:not(:disabled) { transform:translateY(1px); }
select:hover, input:hover { border-color:var(--line); }
header select:hover, .opts select:hover, #musicBar select:hover, #bulkBar select:hover { border-color:var(--acc); }
button:disabled { opacity:.45; cursor:default; }
/* ícones SVG: alinhamento automático em qualquer botão/label que contenha .ic */
button:has(svg.ic), .lbl:has(svg.ic), .agCollabRow:has(svg.ic) { display:inline-flex; align-items:center; gap:7px; }
svg.ic { width:16px; height:16px; flex-shrink:0; stroke-width:1.8; }
.lbl svg.ic { width:14px; height:14px; opacity:.85; }
header h1 { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; flex-shrink:0; }
/* projeto + menu ⋯ */
.projwrap { position:relative; display:flex; align-items:center; gap:6px; }
.kebab { display:grid; place-items:center; width:34px; height:34px; background:transparent; border:1px solid var(--line); border-radius:9px; color:var(--dim); cursor:pointer; flex-shrink:0; }
.kebab:hover { color:var(--txt); border-color:var(--line-strong,#403823); }
.kebab svg { width:18px; height:18px; }
.menu { position:absolute; top:42px; left:0; z-index:60; min-width:210px; background:var(--panel2); border:1px solid var(--line-strong,#403823); border-radius:12px; padding:6px; box-shadow:0 24px 50px -20px rgba(0,0,0,.8); display:none; flex-direction:column; gap:2px; }
.menu.open { display:flex; }
.menu button { display:flex; align-items:center; gap:10px; width:100%; justify-content:flex-start; background:transparent; border:0; color:var(--txt); font:inherit; font-size:13.5px; font-weight:500; text-align:left; padding:9px 10px; border-radius:8px; cursor:pointer; }
.menu button:hover { background:var(--panel); }
.menu button svg.ic { width:16px; height:16px; color:var(--dim); }
.menu button.danger, .menu button.danger svg.ic { color:var(--down,#f0705a); }
/* barra de abas Cortes/Agendador/Análise */
.topTabs { display:flex; gap:2px; margin-left:8px; flex-shrink:0; }
.topTabs button { display:inline-flex; align-items:center; gap:7px; background:transparent; border:0; color:var(--dim); font:inherit; font-weight:600; font-size:14px; padding:9px 13px; border-radius:9px; cursor:pointer; transition:.15s; }
.topTabs button svg { width:16px; height:16px; }
.topTabs button:hover { color:var(--txt); }
.topTabs button[aria-selected="true"] { color:var(--acc); background:var(--panel2); }
@media (max-width:900px){ .topTabs button span, .topTabs button { font-size:0; } .topTabs button svg { width:18px; height:18px; } .topTabs button { padding:9px 11px; } }
/* header cabe sem empurrar Agendador/Análise pra fora: seletor limitado, uso encolhe, botões nunca somem */
#projSel { flex:0 1 300px; min-width:110px; }
header > .usage { min-width:0; overflow:hidden; text-overflow:ellipsis; }
header > button, header > select#driveSel { flex-shrink:0; }
header h1 svg.ic, #agendaCol h2 svg.ic, #analyticsCol h2 svg.ic { width:22px; height:22px; color:var(--acc); stroke-width:1.9; }
#newProj h2 { display:inline-flex; align-items:center; gap:9px; }
#newProj h2 svg.ic { width:20px; height:20px; color:var(--acc); }
#agendaCol h2, #analyticsCol h2 { display:inline-flex; align-items:center; gap:9px; }
/* clips */
#clipsCol { flex:1; overflow-y:auto; padding:16px; }
#status { display:none; align-items:center; gap:10px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-bottom:14px; flex-wrap:wrap; box-shadow:0 8px 22px -16px rgba(0,0,0,.55); }
.spin { width:14px; height:14px; border:2px solid var(--dim); border-top-color:var(--acc); border-radius:50%; animation:sp 0.8s linear infinite; flex-shrink:0; }
@keyframes sp { to { transform:rotate(360deg); } }
.pbar { flex-basis:100%; height:7px; background:var(--well); border-radius:6px; overflow:hidden; }
.pfill { height:100%; width:100%; background:linear-gradient(90deg,var(--acc),var(--acc-soft)); border-radius:6px; transform:scaleX(0); transform-origin:left; transition:transform .6s ease; }
.pct { color:var(--acc); font-weight:700; font-family:ui-monospace,monospace; font-size:14px; }
.card .pbar { display:none; margin-top:2px; }
.badge.run { background:var(--run-bg); color:var(--acc); }
#grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr)); gap:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px;
box-shadow:0 12px 30px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.03);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform:translateY(-2px); border-color:rgba(255,138,95,.28);
box-shadow:0 22px 46px -22px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.05); }
@media (prefers-reduced-motion:reduce){ .card, .card:hover { transition:none; transform:none; } }
.card .top { display:flex; gap:8px; align-items:center; }
.num { background:var(--acc); color:#15120b; font:800 14px/1.55 ui-monospace,monospace; letter-spacing:.02em; border-radius:7px; padding:1px 8px; box-shadow:0 2px 6px -3px rgba(0,0,0,.5); }
.card h3 { font:600 19px/1.25 Oswald,-apple-system,sans-serif; letter-spacing:0.005em; flex:1; text-wrap:balance; }
.badge { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; background:var(--panel2); border:1px solid var(--line); border-radius:20px; padding:3px 9px; color:var(--dim); white-space:nowrap; }
.badge.ok { background:var(--ok-bg); color:var(--ok-ink); }
.badge.cloud { background:var(--cloud-bg); color:var(--cloud-ink); }
.badge.pub { background:var(--pub-bg); color:var(--pub-ink); }
/* Selo de publicado: onde e quando o corte foi ao ar. Tudo escopado em .pubs
porque a classe .pub já existe no calendário da agenda (.ev.pub). */
.pubs { display:flex; flex-direction:column; gap:4px; }
.pubs .pub { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--dim);
background:var(--pub-bg); border:1px solid rgba(211,168,245,.22); border-radius:8px; padding:4px 8px; }
.pubs .pub b { color:var(--pub-ink); font-weight:600; }
.pubs .pub time { color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.pubs .pubSemData { color:var(--dim); font-style:italic; }
.pubs .pubTag { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--dim);
border:1px solid var(--line); border-radius:20px; padding:1px 6px; }
.pubs .pub a { color:var(--acc-soft); margin-left:auto; }
.pubs .pubIco { font-size:11px; }
.card.jaFoi { border-color:rgba(211,168,245,.3); }
.agClip.jaFoi { border-color:rgba(211,168,245,.3); }
.dopen { display:flex; align-items:center; justify-content:center; background:#000; border-radius:9px; aspect-ratio:9/16; max-height:400px; margin:0 auto; width:100%; color:var(--txt); text-decoration:none; overflow:hidden; position:relative; }
.dopen img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:.55; }
.dopen span { position:relative; background:rgba(17,19,24,.78); border-radius:20px; padding:6px 14px; font-weight:700; }
#musicBar, #bulkBar { display:none; align-items:center; gap:8px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin-bottom:14px; flex-wrap:wrap; box-shadow:0 8px 22px -16px rgba(0,0,0,.5); }
#musicBar .lbl, #bulkBar .lbl { font-size:12px; color:var(--dim); text-transform:uppercase; }
#musicBar select, #musicBar input[type=text], #bulkBar select { background:var(--panel); color:var(--txt); border:1px solid var(--line); border-radius:7px; padding:5px 8px; font-size:14px; }
#musicBar input[type=text] { flex:1; min-width:160px; }
#bulkBar .sep { width:1px; height:22px; background:var(--line); margin:0 4px; }
#musicResults { display:none; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px; margin:-8px 0 14px; max-height:240px; overflow-y:auto; }
#bulkStrip { display:none; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin:-8px 0 14px; }
.mrow { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:7px; font-size:14px; }
.mrow:hover { background:var(--panel2); }
.mrow .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mrow .lic { color:var(--dim); font-size:12px; }
.mrow button { padding:2px 9px; font-size:12px; }
.opts input[type=range], #musicBar input[type=range] { accent-color:var(--acc); }
.opts input[type=range] { width:100%; }
#musicBar input[type=range] { width:90px; }
.mstrip { display:none; }
.mwave { width:100%; height:36px; display:block; background:var(--well); border-radius:7px; cursor:grab; touch-action:none; }
.mstrip-row { display:flex; gap:8px; align-items:center; margin-top:4px; }
/* preview ao vivo dos efeitos de render */
.fx-area { position:absolute; pointer-events:none; overflow:hidden; }
.fx-vig { position:absolute; inset:0; opacity:0; background:radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.92) 106%); }
.fx-grain { position:absolute; inset:0; opacity:0; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:260px 260px; }
.fx-grain.on { animation:grainmove .4s steps(3) infinite; }
@keyframes grainmove { 0%{background-position:0 0} 33%{background-position:-84px 46px} 66%{background-position:58px -72px} 100%{background-position:0 0} }
@media (prefers-reduced-motion: reduce) {
.fx-grain.on { animation:none; }
.pfill { transition:none; }
.spin { animation:none; border-top-color:var(--dim); opacity:.7; }
}
/* ---- responsivo ---- */
@media (max-width: 760px) {
header { padding:8px 10px; gap:8px; flex-wrap:wrap; }
header h1 { display:none; } /* a aba do navegador já leva o nome */
.usage { display:none; }
#projSel { flex:1; min-width:0; }
#chatForm { padding-bottom:max(12px, env(safe-area-inset-bottom)); }
#clipsCol { padding:10px; padding-bottom:max(10px, env(safe-area-inset-bottom)); }
.opts { grid-template-columns:1fr 1fr; }
}
/* toque: alvos ≥44px pelo método de input, não pela largura da tela */
@media (pointer: coarse) {
button { min-height:44px; padding:10px 16px; }
.hltools button, .mrow button { min-height:44px; padding:8px 12px; font-size:14px; }
header select, .opts select, #musicBar select, #bulkBar select { min-height:44px; padding:10px 8px; }
#chatInput { min-height:64px; }
.meta input { min-height:38px; padding:6px 8px; width:84px; font-size:14px; }
input[type=range] { min-height:34px; }
#musicBar input[type=range] { width:130px; }
.mwave { height:48px; }
}
.meta { color:var(--dim); font-size:12px; }
.meta input { width:70px; background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:6px; padding:2px 6px; font:12px ui-monospace,monospace; }
@font-face { font-family:Oswald; src:url('/assets/fonts/Oswald-Variable.ttf'); font-weight:200 700; font-display:swap; }
video { width:100%; max-height:400px; background:#000; border-radius:9px; display:block; }
.vwrap { position:relative; }
.vwrap video { aspect-ratio:9/16; object-fit:contain; }
.hl-area { position:absolute; pointer-events:none; overflow:hidden; }
.hl { position:absolute; left:50%; transform:translateX(-50%); max-width:84%; width:max-content;
font-family:Oswald,-apple-system,sans-serif; font-weight:600; text-align:center;
border-radius:.38em; padding:.42em .62em; line-height:1.28; cursor:grab;
pointer-events:auto; user-select:none; white-space:pre-wrap; word-break:break-word; touch-action:none; }
.hl.white { background:rgba(255,255,255,.97); color:#17171a; }
.hl.black { background:rgba(17,17,20,.92); color:#fff; }
.hl.accent { background:rgba(247,201,72,.98); color:#111114; }
.hl.none { background:none; color:#fff; text-shadow:0 0 6px rgba(0,0,0,.9), 0 2px 4px rgba(0,0,0,.8); }
.hl[contenteditable="true"] { cursor:text; user-select:text; outline:2px dashed var(--acc); }
.hl:hover:not([contenteditable="true"]) { outline:1.5px dashed rgba(247,201,72,.7); }
.hltools { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.hltools .lbl { font-size:12px; color:var(--dim); text-transform:uppercase; }
.hltools button { padding:3px 9px; font-size:12px; }
.hltools select { background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:7px; padding:3px 6px; font-size:12px; text-transform:none; }
.hl { transition:opacity .3s; }
.hltools button.on { outline:2px solid var(--acc); }
.hook, .why { display:flex; align-items:flex-start; gap:7px; font-size:14px; }
.hook { font-style:italic; color:var(--ink-soft); }
.why { color:var(--dim); }
.hook svg.ic, .why svg.ic { flex-shrink:0; margin-top:3px; width:15px; height:15px; }
.hook svg.ic { color:var(--acc); } .why svg.ic { color:var(--acc-soft); }
/* card enxuto: linha essencial (legenda/formato/música) sempre visível */
.ess { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
.ess label { display:flex; flex-direction:column; gap:3px; flex:1; min-width:92px;
font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--dim); }
.ess select { background:var(--panel2); color:var(--txt); border:1px solid var(--line);
border-radius:8px; padding:6px 8px; font-size:13px; text-transform:none; }
/* disclosure "Ajustes avançados" */
.adv { border-top:1px solid var(--line); margin-top:2px; }
.advbtn { display:flex; align-items:center; gap:7px; width:100%; background:transparent; border:0;
color:var(--dim); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; padding:9px 0 2px; }
.advbtn:hover { color:var(--txt); }
.advbtn svg { width:14px; height:14px; transition:transform .2s ease; }
.advbtn[aria-expanded="true"] svg { transform:rotate(90deg); }
.advbody { display:none; flex-direction:column; gap:10px; padding-top:8px; }
.advbody.open { display:flex; }
@media (prefers-reduced-motion: reduce) { .advbtn svg { transition:none; } }
.opts { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.opts label { font-size:12px; color:var(--dim); text-transform:uppercase; display:block; margin-bottom:2px; }
.opts select, .card input.head { width:100%; background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:7px; padding:5px 7px; font-size:14px; text-transform:none; }
.opts input[type=range] { display:block; margin-top:4px; }
.card input.head { font-weight:700; }
.btns { display:flex; gap:7px; flex-wrap:wrap; }
/* o editor visual é um link (abre uma página), mas fica na fileira dos botões
do card e precisa parecer um deles */
a.sec.btn-editor { display:inline-flex; align-items:center; gap:6px; text-decoration:none;
background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:9px;
padding:8px 14px; font-size:14px; font-weight:500; }
a.sec.btn-editor:hover { border-color:var(--acc); color:var(--acc-soft); }
/* pontinho: este corte tem ajuste manual por cima do que a IA fez */
.pt-edit { width:6px; height:6px; border-radius:50%; background:var(--acc); }
.post { background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:14px; white-space:pre-wrap; color:var(--ink-soft); display:none; }
.empty { color:var(--dim); text-align:center; margin-top:60px; }
/* novo projeto */
/* tela inicial: projetos recentes */
#recentProjects { max-width:900px; margin:34px auto 0; padding:0 8px; }
#recentProjects:empty { display:none; }
.rt { display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.eyebrow { font-family:Oswald,-apple-system,sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:600; color:var(--dim); }
.rtsub { font-size:12.5px; color:var(--faint,#7a6f57); }
.projgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.pcard { background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer; transition:.16s; box-shadow:0 10px 26px -18px rgba(0,0,0,.6); }
.pcard:hover { border-color:rgba(255,138,95,.28); transform:translateY(-2px); }
.pcard:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.pth { aspect-ratio:16/9; background:linear-gradient(160deg,var(--panel2),var(--well)); overflow:hidden; }
.pth img { width:100%; height:100%; object-fit:cover; display:block; }
.pi { padding:10px 12px; display:flex; flex-direction:column; gap:5px; }
.pn { font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm { font-family:ui-monospace,monospace; font-size:11px; color:var(--dim); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pm .pill { padding:1px 7px; border-radius:20px; font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.pill.ready { background:var(--ok-bg); color:var(--ok-ink); }
.pill.cloud { background:var(--cloud-bg); color:var(--cloud-ink); }
.pill.edit { background:var(--panel2); color:var(--dim); }
.pill.proc { background:var(--run-bg); color:var(--acc); }
#newProj { max-width:560px; margin:28px auto 60px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:14px; box-shadow:0 34px 80px -34px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.03); }
#newProj h2 { font:600 23px/1.2 Oswald,-apple-system,sans-serif; letter-spacing:0.01em; }
#newProj input[type=text] { background:var(--panel2); border:1px solid var(--line); border-radius:10px; color:var(--txt); padding:11px 13px; font:inherit; width:100%; }
.or { color:var(--dim); text-align:center; font-size:12px; }
#drop { border:2px dashed var(--line); border-radius:12px; padding:26px; text-align:center; color:var(--dim); cursor:pointer; }
#drop.over, #batchDrop.over { border-color:var(--acc); color:var(--txt); }
#newProj .sep2 { border:0; border-top:1px solid var(--line); margin:6px 0; }
#batchDrop { border:2px dashed var(--line); border-radius:12px; padding:18px; text-align:center; color:var(--dim); cursor:pointer; }
#newProj .chk { display:flex; gap:8px; align-items:center; font-size:14px; color:var(--txt); }
#newProj .chk input { accent-color:var(--acc); width:16px; height:16px; }
#batchList { display:flex; flex-direction:column; gap:6px; }
.bitem { display:flex; gap:8px; align-items:center; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:7px 10px; font-size:14px; cursor:pointer; }
.bitem .bname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bitem .bstep { color:var(--dim); font-size:12px; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ---- Agendador ---- */
#agendaCol { display:none; overflow-y:auto; padding:16px; }
body.view-agenda main { display:none; }
body.view-agenda #agendaCol { display:block; }
.agHead { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.agHead h2 { margin:0; }
.agCollabRow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 10px; }
#agCollabs { min-width:260px; }
#agClips { margin-top:6px; }
.agClip { border:1px solid var(--line); border-radius:10px; padding:10px; margin:10px 0;
display:grid; grid-template-columns:132px 1fr; gap:12px; align-items:start; }
.agClip video { width:132px; aspect-ratio:9/16; border-radius:8px; background:#000; object-fit:cover; }
.agClip textarea { width:100%; min-height:66px; margin-top:4px; }
.agRow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.agTgl { display:inline-flex; align-items:center; gap:4px; font-size:13px; cursor:pointer; user-select:none; }
.agTgl input { cursor:pointer; }
.agSep { color:var(--dim); }
.agQitem { border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin:6px 0;
display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.agQitem .st { font-size:12px; padding:2px 9px; border-radius:20px; background:var(--panel2); font-weight:600; }
.st-pending{ color:#f7c948 } .st-containered{ color:#4aa3f7 } .st-published{ color:#48c774 } .st-failed{ color:#f75c5c }
@media (max-width:760px){ .agClip { grid-template-columns:96px 1fr; } .agClip video{ width:96px; } }
/* ---- calendário da agenda ---- */
.calHead { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0 12px; }
.calHead h3 { margin:0; font-family:Oswald,-apple-system,sans-serif; text-transform:uppercase; letter-spacing:.03em; font-size:16px; }
.legend { display:flex; gap:14px; align-items:center; }
.legend span { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); }
.legend i { width:10px; height:10px; border-radius:3px; }
.week { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
@media (max-width:820px){ .week { grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .week { grid-template-columns:1fr; } }
.day { background:var(--panel); border:1px solid var(--line); border-radius:11px; min-height:130px; padding:8px; display:flex; flex-direction:column; gap:6px; }
.day.td { border-color:var(--acc); box-shadow:inset 0 0 0 1px rgba(255,90,44,.3); }
.day .dh { display:flex; align-items:baseline; justify-content:space-between; }
.day .dn { font-family:ui-monospace,monospace; font-size:11px; color:var(--dim); text-transform:uppercase; }
.day .dd { font-family:Oswald,-apple-system,sans-serif; font-size:17px; font-weight:600; }
.day.td .dd { color:var(--acc); }
.ev { position:relative; border-radius:8px; padding:6px 8px; font-size:11.5px; line-height:1.3; border-left:3px solid; background:var(--panel2); }
.ev .evh { font-weight:600; color:var(--txt); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:14px; }
.ev .evt { font-family:ui-monospace,monospace; font-size:10px; color:var(--dim); }
.ev.sch { border-color:var(--cloud-ink); } .ev.pub { border-color:var(--ok); } .ev.err { border-color:var(--down,#f0705a); }
.ev .evdel { position:absolute; top:3px; right:4px; width:16px; height:16px; line-height:1; padding:0; background:transparent; border:0; color:var(--faint,#7a6f57); font-size:15px; cursor:pointer; border-radius:4px; }
.ev .evdel:hover { color:var(--down,#f0705a); background:transparent; }
/* ---- Aprovações ---- */
/* Mesmos tokens do estúdio de propósito: a sala do DONO (aprovacao.py) é que
tem folha própria, porque é página pública em celular, não esta tela. */
#aprovCol { display:none; overflow-y:auto; padding:16px; }
body.view-aprov main { display:none; }
body.view-aprov #aprovCol { display:block; }
#aprovCol h2 svg.ic { width:22px; height:22px; color:var(--acc); stroke-width:1.9; }
#aprovCol h2 { display:inline-flex; align-items:center; gap:9px; }
.apGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; margin:14px 0 8px; }
.apBox { border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--panel);
box-shadow:0 12px 30px -18px rgba(0,0,0,.65); }
.apBox h3 { font:600 15px/1.2 Oswald,-apple-system,sans-serif; text-transform:uppercase;
letter-spacing:.05em; margin-bottom:10px; }
.apCampos { display:flex; flex-wrap:wrap; gap:10px 14px; margin:10px 0 12px; }
.apCampos label { font-size:12px; color:var(--dim); display:flex; align-items:center; gap:6px; }
.apCampos input, .apCampos select { background:var(--panel2); color:var(--txt);
border:1px solid var(--line); border-radius:8px; padding:7px 9px; font:13px inherit; }
.apChk { display:flex; align-items:center; gap:8px; font-size:14px; }
.apChk input { width:17px; height:17px; accent-color:var(--acc); }
.apTit { font:600 14px/1.2 Oswald,-apple-system,sans-serif; text-transform:uppercase;
letter-spacing:.06em; color:var(--dim); margin:22px 0 10px; display:flex; align-items:center; gap:9px; }
.apTag { font-size:12px; background:var(--panel2); border:1px solid var(--line);
border-radius:99px; padding:1px 9px; color:var(--dim); font-family:-apple-system,sans-serif; letter-spacing:0; }
.apRow { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
border:1px solid var(--line); border-radius:11px; padding:10px 12px; margin:7px 0; background:var(--panel2); }
/* Estado pela cor da borda inteira, como .ev.sch/.ev.pub já fazem, mais o
chip de status na própria linha. Faixa lateral fica só nos chips pequenos
do calendário, onde ela é marcador de categoria e não decoração. */
.apRow.aguard { border-color:var(--acc-soft); }
.apRow.repr { border-color:var(--down,#f0705a); }
.apRow.exp { border-color:var(--line); opacity:.72; }
.apRow .t { font-weight:600; }
.apRow .s { font-size:12px; color:var(--dim); margin-top:2px; }
.apRow .acs { display:flex; gap:7px; flex-wrap:wrap; }
.apRow button { font-size:12px; padding:6px 10px; }
.apLink { font:12px/1.4 ui-monospace,monospace; color:var(--dim); word-break:break-all; }
.apAp { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.apAp:last-child { border-bottom:0; }
.apAviso { display:none; border:1px solid var(--line); border-radius:10px; padding:11px 14px;
background:var(--panel2); font-size:13px; margin:12px 0; }
.apVazio { color:var(--dim); font-size:13px; padding:10px 2px; }
/* ---- Análise ---- */
#analyticsCol { display:none; overflow-y:auto; padding:16px; }
body.view-analytics main { display:none; }
body.view-analytics #analyticsCol { display:block; }
.anTiles { display:flex; gap:12px; flex-wrap:wrap; margin:12px 0 18px; }
.anTile { border:1px solid var(--line); border-radius:12px; padding:12px 16px; background:var(--panel); min-width:130px; box-shadow:0 12px 30px -18px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.03); }
.anTile .k { font-size:12px; color:var(--dim); }
.anTile .v { font-size:22px; font-weight:700; margin-top:2px; }
.anRow { display:grid; grid-template-columns:28px 64px 1fr auto; gap:12px; align-items:center;
border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:8px 0; background:var(--panel2); }
.anRow .rank { font-weight:700; color:var(--dim); text-align:center; }
.anRow img.th { width:64px; aspect-ratio:9/16; object-fit:cover; border-radius:7px; background:#000; }
.anRow .thx { width:64px; aspect-ratio:9/16; border-radius:7px; background:#0c0913; display:flex; align-items:center; justify-content:center; font-size:20px; }
.anRow .ti { font-weight:600; font-size:.95rem; }
.anRow .cap { color:var(--dim); font-size:.82rem; margin-top:2px; }
.anBadge { font-size:11px; color:var(--acc); border:1px solid rgba(247,201,72,.4); background:rgba(247,201,72,.08); border-radius:20px; padding:1px 7px; margin-left:6px; }
.anStats { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.anStat { text-align:center; min-width:46px; }
.anStat .n { font-weight:700; font-size:1rem; }
.anStat .l { font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:640px){ .anRow { grid-template-columns:24px 1fr; } .anRow img.th, .anRow .thx { display:none; } .anStats { grid-column:1/-1; } }