/* Portal 0.7 — Skins e temas do painel (26/10/2026). Carregado depois de portal-ux.css. Prefixo .th-. */
:root{
 --th-frame-a:#1c2232;
 --th-frame-b:#121722;
 --th-frame-line:#2a3650;
 --th-pick-bg:#16305a;
 --th-shadow:0 8px 24px rgba(0,0,0,.35);
 --th-scrim:rgba(5,9,16,.6);
}
.th [hidden]{display:none!important}
.th .ux-page-head{margin-bottom:var(--space-16)}
.th .ux-section{margin:var(--space-24) 0 0}
.th .ux-section:first-of-type{margin-top:0}
.th-empty{margin:0;font-size:14px;line-height:20px;color:var(--ux-muted)}
.th-empty-btn{width:auto;margin-top:var(--space-16);padding:0 var(--space-24)}
.th .ux-band+.th-pick,.th .ux-band+.th-work{margin-top:var(--space-12)}

/* ---- escolher o arquivo ---- */
.th-pick{width:100%;min-height:88px;padding:var(--space-16);display:flex;align-items:center;gap:var(--space-16);border:1px dashed var(--ux-card-line);border-radius:var(--radius-14);background:var(--ux-card);color:var(--ux-text);text-align:left;font:inherit;cursor:pointer}
.th-pick:disabled{cursor:default;opacity:.5}
.th-pick-ico{flex:0 0 40px;width:40px;height:40px;border-radius:var(--radius-10);display:grid;place-items:center;background:var(--th-pick-bg);color:var(--ux-blue-soft)}
.th-pick-text{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.th-pick-title{font:500 15px/22px var(--font-display)}
.th-pick-sub{font-size:13px;line-height:20px;color:var(--ux-muted)}
@media (hover:hover) and (pointer:fine){.th-pick:hover:not(:disabled){background:var(--ux-hover)}}

/* ---- andamento da análise ---- */
.th-work{margin-top:var(--space-16);display:flex;flex-direction:column;gap:var(--space-12)}
.th-progress{display:flex;flex-direction:column;gap:var(--space-12)}
.th-progress-text{margin:0;font-size:14px;line-height:20px;color:var(--ux-text)}
.th-bar{height:6px;border-radius:3px;background:var(--ux-track);overflow:hidden}
.th-bar-fill{display:block;height:100%;width:0;background:var(--ux-blue);transition:width .2s ease}
.th-cancel{align-self:flex-start}

/* ---- arquivo / tema escolhido ---- */
.th-file{display:flex;align-items:center;gap:var(--space-12);min-height:64px;padding:var(--space-12) var(--space-16);border:1px solid var(--ux-card-line);border-radius:var(--radius-12);background:var(--ux-card)}
.th-file-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}
.th-file-name{font-size:15px;line-height:22px;color:var(--ux-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-file-sub{font-size:13px;line-height:20px;color:var(--ux-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-swap{flex:0 0 auto;min-width:var(--ux-col);min-height:44px;padding:0;border:0;background:none;color:var(--ux-link);font:500 13px var(--font-display);cursor:pointer;text-align:right}
.th-swap:disabled{opacity:.45;cursor:default}

/* ---- prévia no painel (1920×720 e 1280×480 têm a mesma proporção, 8:3) ---- */
.th-frame{position:relative;padding:var(--space-8);border:1px solid var(--th-frame-line);border-radius:var(--radius-16);background:linear-gradient(160deg,var(--th-frame-a),var(--th-frame-b));box-shadow:var(--th-shadow)}
.th-shot{display:block;width:100%;aspect-ratio:8/3;object-fit:contain;border-radius:var(--radius-10);background:#000}
.th-tag{position:absolute;right:calc(var(--space-8) + 6px);top:calc(var(--space-8) + 6px);padding:2px 6px;border-radius:4px;background:var(--th-scrim);color:#fff;font:500 9px/14px var(--font-mono);letter-spacing:1.2px;text-transform:uppercase;pointer-events:none}
.th-seg{margin-top:calc(-1 * var(--space-4))}

/* ---- o que o tema usa / temas no carro ---- */
.th-block{display:flex;flex-direction:column;gap:var(--space-8)}
.th-row{display:flex;align-items:center;gap:var(--space-12);min-height:60px;padding:var(--space-12) var(--space-16)}
.th-row+.th-row{border-top:1px solid var(--ux-divider)}
.th-row-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.th-row-name{font-size:15px;line-height:22px;color:var(--ux-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-row-sub{font-size:13px;line-height:20px;color:var(--ux-muted)}
.th-row-actions{flex:0 0 auto;display:flex;align-items:center;gap:var(--space-12)}
.th-row-actions .ux-link{min-height:44px;width:auto;padding:0}
.th-none{margin:0;padding:var(--space-16);font-size:14px;line-height:20px;color:var(--ux-muted)}
.th-note{margin:0;padding:var(--space-12) var(--space-16);border-top:1px solid var(--ux-divider);font-size:13px;line-height:20px;color:var(--ux-muted)}
.th-default{display:block;width:100%;min-height:48px;padding:0 var(--space-16);text-align:left;border-top:1px solid var(--ux-divider)}

/* ---- problemas e avisos ---- */
.th-problems{display:flex;flex-direction:column;gap:var(--space-8)}
.th .ux-band.is-red{border-color:var(--ux-red-line);background:var(--ux-red-deep);color:var(--ux-red-text)}
.th-list{margin:0;padding:var(--space-12) var(--space-16) var(--space-12) calc(var(--space-16) + 18px);border:1px solid var(--ux-red-line);border-radius:var(--radius-12);background:var(--ux-card);display:flex;flex-direction:column;gap:var(--space-8);font-size:14px;line-height:20px;color:var(--ux-text)}
.th-hint{margin:0;font-size:13px;line-height:20px;color:var(--ux-muted)}
.th-copy{align-self:flex-start;width:auto;padding:0 var(--space-24)}
.th-list{max-height:320px;overflow:auto}
.th-again{align-self:stretch;width:100%}

/* ---- instalado / falhou ---- */
.th-outcome{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-16);border:1px solid var(--ux-sky-line);border-radius:var(--radius-12);background:var(--ux-sky-deep)}
.th-outcome-ico{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ux-sky);color:var(--ux-sky-deep)}
.th-outcome-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}
.th-outcome-title{font:500 15px/22px var(--font-display);color:var(--ux-text)}
.th-outcome-sub{font-size:13px;line-height:20px;color:var(--ux-label)}
.th-outcome.is-fail{border-color:var(--ux-red-line);background:var(--ux-red-deep)}
.th-outcome.is-fail .th-outcome-ico{background:var(--ux-red);color:var(--ux-red-deep)}
.th-outcome.is-fail .th-outcome-sub{color:var(--ux-red-text)}

/* ---- como criar ---- */
.th-steps{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:var(--space-12)}
.th-steps li{padding-left:4px}
.th-step-title{display:block;font:500 15px/22px var(--font-display);color:var(--ux-text)}
.th-step-sub{display:block;font-size:13px;line-height:20px;color:var(--ux-muted)}
.th-kit{display:inline-flex;align-items:center;justify-content:center;margin-top:var(--space-16);min-height:44px;padding:0 var(--space-24);text-decoration:none}

/* ---- rodapé fixo: "Cancelar" (contorno, 104 px) e "Instalar no carro" (o resto) ---- */
.th-foot .ux-footbar-inner{display:flex;gap:var(--space-8)}
.th-foot .th-cancel-btn{flex:0 0 104px;width:104px}
.th-foot .th-install{flex:1 1 auto;width:auto}
.th-foot .th-install:disabled{opacity:1;background:var(--th-pick-bg);color:var(--ux-blue-soft)}

@media (min-width:1024px){
 .th-frame{max-width:calc(60vh * 8 / 3);margin:0 auto}
}

/* 29/10/2026: miniatura da skin (prévia da galeria) na lista Temas no carro */
.th-thumb{flex:none;display:block;width:112px;aspect-ratio:8/3;border-radius:8px;overflow:hidden;background:#05070a}
.th-thumb img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:520px){.th-thumb{width:84px}}

/* 30/10/2026: kit de IA - texto de abertura, aviso e dados do arquivo */
.th-how-lead{margin:0 0 var(--space-16);font-size:14px;line-height:21px;color:var(--ux-text)}
.th-how-note{margin:var(--space-16) 0 0;font-size:13px;line-height:20px;color:var(--ux-muted)}
.th-kit-meta{margin:var(--space-8) 0 0;font-size:12px;line-height:18px;color:var(--ux-muted)}