/* Criador de capas para Reels · mesmo tema escuro do painel. */
.reels-shell {color:#f7f6fc;padding-bottom:36px;min-width:0}
.reels-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);gap:20px;align-items:start}
.reels-form {display:flex;flex-direction:column;gap:14px;min-width:0}
.reels-step {display:flex;gap:14px;padding:20px;border:1px solid #2c2a35;background:#121217;border-radius:18px}
.reels-num {flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(120,77,234,.22);color:#dccbff;font-weight:800;font-size:13px}
.reels-step-body {flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.reels-step-body strong {font-size:15px;font-weight:750}
.reels-step-body p {margin:0;font-size:12.5px;color:#9e9da9;line-height:1.5}
.reels-photo {position:relative;display:flex;align-items:center;gap:14px;margin-top:4px;padding:12px;border:1px dashed #4a3f63;border-radius:14px;background:#17151f;cursor:pointer;min-height:84px}
.reels-photo:hover {background:#1d1928;border-color:#8d66e5}
.reels-photo input {position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.reels-photo canvas {width:60px;height:80px;border-radius:9px;flex:0 0 auto;background:#000}
.reels-photo span {display:flex;flex-direction:column;gap:3px;font-size:13px;font-weight:700;overflow-wrap:anywhere;min-width:0}
.reels-photo small {font-size:11px;color:#9e9da9;font-weight:500}
.reels-photo-empty {flex:1;align-items:center;text-align:center}
.reels-photo-empty b {font-size:22px;color:#c4b0f4;line-height:1}
.reels-photo:focus-within {outline:2px solid #aa87f7;outline-offset:2px}
.reels-step textarea {width:100%;resize:vertical;min-height:88px;padding:12px 14px;border:1px solid #34323f;background:#14141b;border-radius:11px;color:#fff;outline:none;font:inherit;font-size:15px;line-height:1.4}
.reels-step textarea:focus {border-color:#9c79e7}
.reels-count {align-self:flex-end;font-size:11px;color:#8d8a99;font-variant-numeric:tabular-nums}
.reels-error {padding:12px 14px;border-radius:12px;color:#ffbcbc;background:#291d22;border:1px solid #6d3b4a;font-size:13px;line-height:1.45}
.reels-generate {display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 18px;border:0;border-radius:13px;background:#7c4dea;color:#fff;font-weight:800;font-size:15px;cursor:pointer}
.reels-generate:hover:not(:disabled) {background:#8d62f0}
.reels-generate:disabled {opacity:.7;cursor:default}
.reels-spin {width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:reels-spin .8s linear infinite}
@keyframes reels-spin {to{transform:rotate(360deg)}}
.reels-hint {margin:0;font-size:12px;color:#9e9da9;text-align:center;line-height:1.45}
.reels-preview {position:sticky;top:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.reels-preview-label {font-size:12px;color:#aaa8b6;font-weight:700}
.reels-frame {position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;border:1px solid #2c2a35;background:#0b0b0f}
.reels-frame canvas {display:block;width:100%;height:100%}
.reels-frame.is-busy canvas {filter:brightness(.55) blur(2px);transition:filter .3s}
/* Faixa 3:4 que o Instagram mostra na grade do perfil */
.reels-safe {position:absolute;left:0;right:0;top:12.5%;bottom:12.5%;border-top:1px dashed rgba(255,255,255,.22);border-bottom:1px dashed rgba(255,255,255,.22);pointer-events:none}
.reels-actions {display:flex;gap:10px}
.reels-actions button {flex:1;padding:13px 14px;border-radius:12px;font-weight:800;font-size:14px;cursor:pointer}
.reels-download {border:0;background:#f4f4f5;color:#101012}
.reels-download:disabled {opacity:.35;cursor:default}
.reels-share {border:1px solid #57447e;background:#241b37;color:#d9c5ff}
@media (max-width:860px){
 .reels-grid {grid-template-columns:1fr}
 .reels-preview {position:static;max-width:340px;width:100%;margin:0 auto}
 .reels-step {padding:16px}
}
/* Conta da OpenAI da loja */
.reels-key {display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border:1px solid #23493f;background:#0f1a17;border-radius:16px}
.reels-key-dot {width:10px;height:10px;border-radius:50%;background:#00e5c6;box-shadow:0 0 0 4px rgba(0,229,198,.15);flex:0 0 auto}
.reels-key-info {flex:1;min-width:180px;display:flex;flex-direction:column;gap:3px}
.reels-key-info strong {font-size:14px}
.reels-key-info small {font-size:12px;color:#9fb5ae;overflow-wrap:anywhere}
.reels-link {border:0;background:none;color:#c4b0f4;font-weight:700;font-size:13px;cursor:pointer;padding:6px 4px}
.reels-link:hover {text-decoration:underline}
.reels-link.is-danger {color:#ff9fa8}
.reels-key-form {border-color:#4a3f63;background:#15121d}
.reels-key-steps {margin:2px 0 4px;padding-left:18px;font-size:12.5px;color:#b8b6c4;line-height:1.6}
.reels-key-steps a {color:#d9c5ff}
.reels-key-row {display:flex;gap:10px;flex-wrap:wrap}
.reels-key-row input {flex:1;min-width:200px;padding:12px 14px;border:1px solid #34323f;background:#14141b;border-radius:11px;color:#fff;outline:none;font:inherit;font-size:14px;font-family:ui-monospace,Menlo,monospace}
.reels-key-row input:focus {border-color:#9c79e7}
.reels-key-save {padding:12px 18px;border:0;border-radius:11px;background:#7c4dea;color:#fff;font-weight:800;cursor:pointer}
.reels-key-save:disabled {opacity:.7;cursor:default}
/* Foto escolhida + trocar */
.reels-photo-chosen {display:flex;align-items:center;gap:14px;margin-top:4px;padding:12px;border:1px solid #2f2b3c;border-radius:14px;background:#17151f;flex-wrap:wrap}
.reels-photo-chosen canvas {width:60px;height:80px;border-radius:9px;flex:0 0 auto;background:#000}
.reels-photo-chosen > span {flex:1;min-width:120px;display:flex;flex-direction:column;gap:3px;font-size:13px;overflow-wrap:anywhere}
.reels-photo-chosen small {font-size:11px;color:#9e9da9}
/* Botões secundários (também usados como <label> com input de arquivo) */
.reels-btn-secondary {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 16px;border:1px solid #57447e;background:#241b37;color:#e6dbff;border-radius:12px;font:inherit;font-weight:800;font-size:14px;cursor:pointer;text-align:center;overflow:hidden}
.reels-btn-secondary:hover:not(:disabled) {background:#2f2448;border-color:#8d66e5}
.reels-btn-secondary:disabled {opacity:.5;cursor:default}
.reels-btn-secondary small {font-size:11px;font-weight:500;color:#b5a8d4}
.reels-btn-secondary input {position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.reels-btn-secondary:focus-within {outline:2px solid #aa87f7;outline-offset:2px}
.reels-change-photo {padding:10px 14px;font-size:13px}
/* Capa pronta */
.reels-done {display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid #23493f;background:#0f1a17;border-radius:14px;font-size:13px;color:#cfe6df;line-height:1.45}
.reels-done strong {color:#00e5c6;font-size:15px}
.reels-next {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.reels-live {font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:#00e5c6;background:rgba(0,229,198,.12);border-radius:6px;padding:2px 7px;margin-left:6px;vertical-align:2px}
/* Posição do texto */
.reels-positions {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2px}
.reels-positions button {display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 8px;border:1px solid #31303b;color:#bcbac7;background:#191920;border-radius:12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.reels-positions button:hover {border-color:#5d5470}
.reels-positions button.chosen {background:rgba(120,77,234,.20);border-color:#8d66e5;color:#fff}
.reels-positions button:focus-visible {outline:2px solid #aa87f7;outline-offset:2px}
@media (max-width:520px){.reels-next {grid-template-columns:1fr}}
@media (max-width:520px){
 .reels-key-info {flex-basis:calc(100% - 26px)}
 .reels-key .reels-link {padding:4px 0;margin-right:14px}
}
/* Estilo do texto: fonte, cor e posição */
.reels-style-row {display:flex;flex-direction:column;gap:7px;margin-top:6px}
.reels-style-label {font-size:12px;font-weight:700;color:#c9c6d6}
.reels-style-label small {font-weight:500;color:#8d8a99;margin-left:4px}
.reels-style-note {margin:4px 0 0 !important;font-size:11.5px !important;color:#8d8a99 !important}
.reels-fonts {display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
.reels-fonts button {display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border:1px solid #31303b;color:#bcbac7;background:#191920;border-radius:12px;font:inherit;cursor:pointer;min-width:0}
.reels-fonts button b {font-size:24px;line-height:1.15;color:#fff}
.reels-fonts button span {font-size:12.5px;font-weight:700}
.reels-fonts button small {font-size:10.5px;color:#8d8a99}
.reels-fonts button:hover {border-color:#5d5470}
.reels-fonts button.chosen {background:rgba(120,77,234,.20);border-color:#8d66e5;color:#fff}
.reels-colors {display:flex;flex-wrap:wrap;gap:9px}
.reels-swatch {position:relative;width:34px;height:34px;border-radius:50%;border:2px solid #2a2934;background:var(--sw);cursor:pointer;padding:0;flex:0 0 auto}
.reels-swatch.chosen {border-color:#fff;box-shadow:0 0 0 3px rgba(141,102,229,.7)}
.reels-swatch:focus-visible,.reels-swatch-custom:focus-within {outline:2px solid #aa87f7;outline-offset:3px}
.reels-swatch-custom {display:grid;place-items:center;background:conic-gradient(#ff3b30,#ffd400,#3ddc4a,#00e5c6,#2f9bff,#a57cff,#ff4fa3,#ff3b30);overflow:hidden}
.reels-swatch-custom.chosen {background:var(--sw)}
.reels-swatch-custom input {position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.reels-swatch-custom span {font-weight:800;font-size:18px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
.reels-swatch-custom.chosen span {display:none}
/* Foto e Texto: no computador, um embaixo do outro (como antes) */
.reels-pair {display:flex;flex-direction:column;gap:14px;min-width:0}

/* ===== Celular: layout compacto ===== */
@media (max-width:600px){
 .reels-form {gap:10px}
 .reels-desc {display:none !important}
 /* número e título na mesma linha, conteúdo ocupando a largura toda */
 .reels-step {display:grid;grid-template-columns:auto 1fr;align-items:center;align-content:start;column-gap:8px;row-gap:8px;padding:11px;border-radius:14px}
 .reels-step-body {display:contents}
 .reels-step-body > *:not(strong) {grid-column:1/-1;margin-top:0}
 .reels-step-body strong {font-size:14px}
 .reels-num {width:22px;height:22px;flex-basis:22px;font-size:11px}
 /* 1 Foto e 2 Texto lado a lado */
 .reels-pair {display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .reels-pair .reels-live {display:none}
 .reels-pair .reels-step-body strong {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .reels-photo {min-height:0;height:100px;padding:8px;margin:0;border-radius:11px}
 .reels-photo-empty {font-size:12px}
 .reels-photo-empty b {font-size:20px}
 .reels-photo-empty small {display:none}
 .reels-photo-chosen {height:100px;margin:0;padding:8px;gap:8px;flex-wrap:nowrap;justify-content:center;border-radius:11px}
 .reels-photo-chosen canvas {width:54px;height:72px}
 .reels-photo-name {display:none !important}
 .reels-change-photo {padding:8px 9px;font-size:12px;line-height:1.2}
 .reels-step textarea {min-height:100px;height:100px;padding:8px 10px;font-size:14px;resize:none;border-radius:11px}
 .reels-count {margin-top:-4px;font-size:10px}
 /* 3 Estilo do texto, mais compacto */
 .reels-style-row {margin-top:0;gap:5px}
 .reels-style-label {font-size:11px}
 .reels-fonts {grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .reels-fonts button {padding:6px 2px;gap:0;border-radius:10px}
 .reels-fonts button b {font-size:17px;line-height:1.2}
 .reels-fonts button span {font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .reels-fonts button small {display:none}
 .reels-colors {display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
 .reels-swatch {width:100%;height:auto;aspect-ratio:1;border-width:2px}
 .reels-swatch.chosen {box-shadow:0 0 0 2px rgba(141,102,229,.8)}
 .reels-swatch-custom span {font-size:14px}
 .reels-positions {gap:6px}
 .reels-positions button {flex-direction:row;justify-content:center;gap:5px;padding:7px 4px;font-size:12px;border-radius:10px}
 .reels-positions button svg {width:16px;height:16px}
 /* conta OpenAI, avisos e botões */
 .reels-key {padding:10px 12px;gap:8px;border-radius:13px}
 .reels-key-info strong {font-size:13px}
 .reels-key-info small {font-size:11px}
 .reels-done {padding:10px 12px;font-size:12px;border-radius:12px}
 .reels-done strong {font-size:14px}
 .reels-next {grid-template-columns:1fr 1fr;gap:8px}
 .reels-btn-secondary {padding:9px 8px;font-size:12.5px;border-radius:11px}
 .reels-btn-secondary small {font-size:10px}
 .reels-generate {padding:13px 16px;font-size:14.5px;border-radius:12px}
 .reels-hint {font-size:11px}
 .reels-error {padding:10px 12px;font-size:12px}
}
.reels-short {display:none}
@media (max-width:600px){
 .reels-short {display:inline}
 .reels-done {flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px}
 .reels-key {flex-wrap:nowrap}
 .reels-key-info {flex:1 1 auto;flex-basis:auto;min-width:0}
 .reels-key-info strong,.reels-key-info small {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .reels-key .reels-link {padding:4px 2px;margin:0 0 0 6px;font-size:12px;white-space:nowrap}
}
/* Depois da capa pronta, só o botão de escolher outra foto (largura total) */
.reels-next.is-single {grid-template-columns:1fr}
@media (max-width:600px){.reels-next.is-single {grid-template-columns:1fr}}