@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root {
    --primary-color: #00f5c3;
    --primary-darker: #00b295;
    --background: #0f0f0f;
    --card-bg: #1a1a1a;
    --text: #e0e0e0;
    --text-secondary: #a0a0a0;
    --border: #2c2c2c;
    --status-active: #2ecc71;
    --status-active-bg: #2ecc7120;
    --error-color: #e74c3c;
    --premium-gold: #f1c40f;
    --status-pending: #f39c12;
    --status-pending-bg: #f39c1220;
    --status-canceled: #e74c3c;
    --status-canceled-bg: #e74c3c20;
    --promo-orange: #ff9f43;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Poppins', sans-serif; background-color: var(--background); color: var(--text); padding: 2rem; min-height: 100vh; }

/* --- CORREÇÃO DO BUG DA TELA PRETA --- */
#login-overlay, #credits-overlay, #email-capture-overlay, #feature-lock-overlay, #model-choice-overlay, #saved-model-overlay, #onboarding-overlay, #generation-progress-overlay, #catalog-tour-overlay, #product-association-overlay, #plans-lightbox-overlay, #plans-v2-overlay, #edit-products-overlay, #look-selector-overlay, #video-config-overlay, #status-blocking-overlay, #credits-purchase-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
}

#credits-overlay {
    backdrop-filter: none;
    background-color: rgba(0, 0, 0, 0.75);
}

/* Modal de Captura de Email */
#email-capture-overlay {
    z-index: 7000 !important; /* Acima de tudo */
}

#email-capture-box {
    background-color: var(--card-bg);
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--primary-color);
    box-shadow: 0 10px 40px rgba(0,0,0,0.9);
    width: 90%;
    max-width: 450px;
    text-align: center;
    position: relative;
}

#email-capture-close-btn {
    position: absolute; top: 1rem; right: 1rem; background: none; border: none;
    color: #666; font-size: 1.8rem; cursor: pointer; transition: color 0.2s; line-height: 1;
}
#email-capture-close-btn:hover { color: var(--text); }

#feature-lock-overlay {
    z-index: 6000 !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#feature-lock-overlay.visible, #email-capture-overlay.visible, #model-choice-overlay.visible, #saved-model-overlay.visible, #onboarding-overlay.visible, #generation-progress-overlay.visible, #catalog-tour-overlay.visible, #product-association-overlay.visible, #plans-lightbox-overlay.visible, #plans-v2-overlay.visible, #edit-products-overlay.visible, #look-selector-overlay.visible, #video-config-overlay.visible, #status-blocking-overlay.visible, #credits-purchase-overlay.visible {
    display: flex;
    opacity: 1;
}

#login-box, #credits-box, #request-code-box, #request-success-box, #feature-lock-box, #video-config-box, #status-blocking-box {
    background-color: var(--card-bg);
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    width: 90%;
    max-width: 450px;
    text-align: center;
}
#request-code-box, #request-success-box { display: none; }

#login-box h2, #credits-box h2, #request-code-box h2, #request-success-box h2, #email-capture-box h2, #status-blocking-box h2 { color: var(--primary-color); margin-bottom: 0.75rem; }
#login-box p, #credits-box p, #request-code-box p, #request-success-box p, #email-capture-box p, #status-blocking-box p { color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.6; }

/* ESTILOS DO MODAL DE COMPRA DE CRÉDITOS */
#credits-purchase-box {
    background-color: var(--card-bg);
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 50px rgba(0,0,0,0.9);
    width: 90%;
    max-width: 600px;
    text-align: center;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
#credits-purchase-overlay.visible #credits-purchase-box { transform: scale(1); }

#credits-purchase-close-btn {
    position: absolute; top: 1rem; right: 1rem; background: none; border: none;
    color: #888; font-size: 2rem; cursor: pointer; transition: color 0.2s, transform 0.2s; line-height: 1;
}
#credits-purchase-close-btn:hover { color: var(--text); transform: rotate(90deg); }

#credits-purchase-box h2 { color: var(--primary-color); margin-bottom: 0.5rem; font-size: 1.8rem; }
#credits-purchase-box .subtitle { color: var(--text-secondary); margin-bottom: 1.5rem; }

.credits-info-alert {
    background: rgba(0, 245, 195, 0.05);
    border: 1px dashed var(--primary-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 2rem;
    text-align: left;
    font-size: 0.9rem;
    color: var(--text);
}
.credits-info-alert span { display: block; margin-bottom: 0.3rem; }
.credits-info-alert span:last-child { margin-bottom: 0; }

.credits-options-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.credit-option-card {
    background: #252525;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: transform 0.2s, border-color 0.2s;
    width: 100%;
    max-width: 300px;
}
.credit-option-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
}
.credit-option-card.recommended {
    border-color: var(--premium-gold);
    background: linear-gradient(180deg, #252525 0%, #1a1a1a 100%);
}
.credit-option-card .badge {
    position: absolute;
    top: -12px;
    background: var(--premium-gold);
    color: #000;
    font-weight: bold;
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: uppercase;
}
.credit-amount {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.credit-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}
.credit-option-card.recommended .credit-price {
    color: var(--premium-gold);
}

@media(max-width: 600px) {
    .credits-options-container { flex-direction: column; align-items: center; }
}

/* ESTILOS DO MODAL DE CONFIGURAÇÃO DE VÍDEO */
#video-config-box {
    max-width: 550px;
    position: relative;
    text-align: left;
}
#video-config-close-btn {
    position: absolute; top: 1rem; right: 1rem; background: none; border: none;
    color: #666; font-size: 1.8rem; cursor: pointer; transition: color 0.2s; line-height: 1;
}
#video-config-close-btn:hover { color: var(--text); }

.video-config-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.video-thumbnail-preview {
    width: 80px;
    height: 106px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid var(--border);
}
.video-config-title h2 {
    margin-bottom: 0.2rem !important;
    font-size: 1.4rem;
}
.video-config-title p {
    margin-bottom: 0 !important;
    font-size: 0.9rem;
}
.video-movements-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}
.video-movement-option {
    background: #252525;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.video-movement-option:hover {
    border-color: var(--primary-color);
    background: #2a2a2a;
}
.video-movement-option.selected {
    border-color: var(--primary-color);
    background: rgba(0, 245, 195, 0.1);
    color: var(--primary-color);
    font-weight: 500;
}
.video-duration-selector {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}
.duration-btn {
    flex: 1;
    padding: 0.6rem;
    background: #252525;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.duration-btn.selected {
    background: var(--primary-color);
    color: #000;
    border-color: var(--primary-color);
    font-weight: bold;
}

/* ESTILOS DOS CARDS DE VÍDEO */
.video-card {
    background: #252525;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.video-card.processing {
    border: 1px dashed var(--primary-color);
    background: rgba(0, 245, 195, 0.05);
}
.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 9/16; /* Formato vertical */
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
    cursor: pointer;
}
.video-wrapper img.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Garante que o vídeo apareça */
}
.play-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.video-wrapper:hover .play-overlay {
    background: rgba(0,0,0,0.1);
}
.play-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.play-icon::after {
    content: '';
    width: 0; 
    height: 0; 
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 14px solid #000;
    margin-left: 4px;
}
/* Loader sobre o vídeo em processamento */
.processing-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    z-index: 10;
}
.processing-overlay .loader {
    width: 30px; height: 30px;
    border-width: 3px;
    margin-bottom: 0.5rem;
}

#feature-lock-box {
    border: 1px solid var(--premium-gold);
    position: relative;
    background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
#feature-lock-overlay.visible #feature-lock-box {
    transform: scale(1);
}
#feature-lock-box .lock-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    display: block;
    filter: drop-shadow(0 0 10px rgba(241, 196, 15, 0.3));
}
#feature-lock-box h2 {
    color: var(--premium-gold);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}
#feature-lock-box .feature-benefit {
    background-color: rgba(241, 196, 15, 0.08);
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    color: #fff;
    font-weight: 500;
    font-size: 0.95rem;
    border: 1px dashed rgba(241, 196, 15, 0.4);
    text-align: center;
}
#feature-lock-close-btn {
    position: absolute; top: 1rem; right: 1rem; background: none; border: none;
    color: #666; font-size: 1.8rem; cursor: pointer; transition: color 0.2s; line-height: 1;
}
#feature-lock-close-btn:hover { color: var(--text); }
.premium-upgrade-btn { 
    width: 100%; padding: 1rem; 
    background: linear-gradient(45deg, #f1c40f, #b7950b); 
    border: none; border-radius: 8px; color: #000; 
    font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: 0.3s; 
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.2);
}
.premium-upgrade-btn:hover { transform: scale(1.02); box-shadow: 0 6px 20px rgba(241, 196, 15, 0.4); opacity: 1; }

#code-input, #whatsapp-input, #payment-email-input { width: 100%; padding: 1rem; background: #1f1f1f; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 1.2rem; text-align: center; margin-bottom: 1rem; letter-spacing: 2px; font-family: inherit; }
#code-input:focus, #whatsapp-input:focus, #payment-email-input:focus { outline: none; border-color: var(--primary-color); }
#login-btn, .modal-primary-btn, #submit-whatsapp-btn, #submit-email-btn { width: 100%; padding: 1rem; background: linear-gradient(45deg, var(--primary-color), var(--primary-darker)); border: none; border-radius: 8px; color: #0f0f0f; font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: 0.3s; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; }
#login-btn:hover:not(:disabled), .modal-primary-btn:hover, #submit-whatsapp-btn:hover:not(:disabled), #submit-email-btn:hover:not(:disabled) { opacity: 0.9; }
#login-btn:disabled, #submit-whatsapp-btn:disabled, #submit-email-btn:disabled { opacity: 0.5; cursor: wait; }
#login-error, #request-code-error, #email-capture-error { color: var(--error-color); margin-top: 1rem; font-size: 0.9rem; min-height: 1.2em; }
#request-code-link, .back-to-login-link { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.85rem; margin-top: 1.5rem; text-decoration: underline; }
#request-code-link:hover, .back-to-login-link:hover { color: var(--text); }
#request-success-box .support-link { margin-top: 1rem; display: block; }

.spinner { width: 20px; height: 20px; border: 3px solid rgba(15, 15, 15, 0.3); border-top-color: #0f0f0f; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.container { width: 100%; max-width: 1200px; background-color: var(--card-bg); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); padding: 2rem; display: none; margin: 0 auto; }

/* --- CORREÇÃO DO BLUR: APLICAR APENAS NO WRAPPER INTERNO --- */
#provador-content-wrapper.disabled, .content-blurred { 
    filter: blur(5px); 
    pointer-events: none; 
    user-select: none; 
}

header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--border); }
.header-content { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.header-icon svg { width: 50px; height: 50px; stroke: var(--primary-color); stroke-width: 1.5; }
h1 { color: var(--primary-color); background: none; font-size: 1.8rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;}
header p { color: var(--text-secondary); font-size: 0.9rem; }

.header-credits-desktop {
    position: relative;
    background-color: #252525;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: none; 
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: help;
}
.header-credits-desktop #header-credits-value-desktop {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.1rem;
}
.header-credits-desktop .tooltip-text {
    visibility: hidden; opacity: 0; width: max-content; max-width: 220px; background-color: var(--card-bg); color: var(--text); text-align: center; border-radius: 6px; padding: 8px 12px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); transition: opacity 0.3s; border: 1px solid var(--border); box-shadow: 0 4px 15px rgba(0,0,0,0.5); font-size: 0.85rem; pointer-events: none;
}
.header-credits-desktop .tooltip-text::after {
    content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--border) transparent transparent transparent;
}
.header-credits-desktop:hover .tooltip-text {
    visibility: visible; opacity: 1;
}

.header-credits-mobile {
    display: none;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: #252525;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}
#header-credits-value-mobile {
    color: var(--primary-color);
    font-weight: bold;
}

.tabs { display: flex; gap: 0.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border); flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-link { padding: 0.8rem 1.5rem; border: none; background: none; color: var(--text-secondary); font-family: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.3s ease; white-space: nowrap; }
.tab-link:hover { color: var(--text); }
.tab-link.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
#looks-tab-content, #conta-tab-content, #catalogo-tab-content, #videos-tab-content { display: none; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.info-card { background-color: #252525; padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
.info-card.full-width { grid-column: 1 / -1; }
.info-label { font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.5rem; }
.info-value { font-size: 1.1rem; font-weight: 500; color: var(--text); }
.status-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; background-color: var(--status-active-bg); color: var(--status-active); border: 1px solid var(--status-active); }
.status-badge.pending { background-color: var(--status-pending-bg); color: var(--status-pending); border-color: var(--status-pending); }
.status-badge.canceled { background-color: var(--status-canceled-bg); color: var(--status-canceled); border-color: var(--status-canceled); }
.progress-bar { width: 100%; height: 10px; background-color: var(--border); border-radius: 5px; overflow: hidden; margin-top: 0.5rem; }
.progress-bar-inner { height: 100%; background: linear-gradient(90deg, var(--primary-darker), var(--primary-color)); border-radius: 5px; transition: width 0.5s ease; }
.support-link { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1.5rem; background-color: #25D366; color: white; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background-color 0.3s; }
.support-link:hover { background-color: #1DAE50; }
.main-section { margin-bottom: 2.5rem; }
h2.section-title { font-size: 1.4rem; font-weight: 600; color: #ccc; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.section-subtitle { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0; margin-bottom: 0; font-weight: 400; }
.config-section { background: #252525; padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border); }
.config-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.config-row:last-child { margin-bottom: 0; }
.config-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.95rem; }
.config-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.config-row select, .model-select, .form-group select {
    width: 100%; 
    background: #1f1f1f; 
    border: 1px solid var(--border); 
    color: var(--text); 
    padding: 0.75rem; 
    border-radius: 8px; 
    font-family: inherit; 
    font-size: 1rem; 
    cursor: pointer; 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a0a0a0' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}
.config-row select:focus, .model-select:focus, .form-group select:focus { outline: none; border-color: var(--primary-color); }
.model-select { margin-bottom: 1rem; }

.catalogo-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media(min-width: 768px) {
    .catalogo-form-grid { grid-template-columns: 1fr 1fr; }
    .catalogo-form-grid .full-width { grid-column: 1 / -1; }
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.form-group label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group textarea {
    width: 100%;
    background: #1f1f1f;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.75rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
}
.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}
.form-group input[readonly][disabled] {
     background-color: #2a2a2a;
     cursor: not-allowed;
     color: var(--text-secondary);
}
.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.catalog-upload-group {
    gap: 0.5rem;
}

.catalog-upload-group .upload-box .loader {
    position: absolute;
    z-index: 3;
}
.catalog-upload-group input[readonly] {
    background-color: #2a2a2a;
    text-align: center;
    font-size: 0.8rem;
    cursor: default;
    color: var(--text-secondary);
    border-color: #2a2a2a;
}

.subsection-title {
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    grid-column: 1 / -1;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.appearance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.appearance-grid > div {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}
#logo-fields-group, #banner-fields-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}
#logo-upload-box {
    width: 150px;
    height: 150px;
}
#banner-upload-box {
    width: 100%;
    height: 150px;
}
#logo-upload-box img.preview {
     object-fit: contain;
}
#banner-upload-box img.preview {
     object-fit: cover;
}
.disabled-content {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.3s ease;
}

#catalog-link-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #1f1f1f;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    flex-wrap: wrap;
}
#catalog-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#catalog-link:hover {
    text-decoration: underline;
}
.copy-btn {
    background: #333;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    transition: background-color 0.2s;
    flex-shrink: 0;
}
.copy-btn:hover {
    background-color: #444;
}
.copy-btn svg {
    width: 16px;
    height: 16px;
}

.catalog-actions-container {
    display: flex;
    gap: 1rem;
}
.catalog-actions-container .primary-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    background-color: #1f1f1f;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--text);
    cursor: pointer;
}
.checkbox-group input[type="checkbox"] {
     width: 18px;
     height: 18px;
     cursor: pointer;
}

#global-person-upload {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
#global-person-upload .model-select,
#global-person-upload .upload-box {
    width: 100%;
    max-width: 400px;
}
#global-person-upload .upload-box {
    height: 400px; 
}

.pairs-container { display: flex; flex-direction: column; gap: 1.5rem; }
.pair-card { background: #252525; border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; position: relative; }
.pair-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.pair-title { font-weight: 600; color: var(--primary-color); }
.remove-pair-btn { background: #444; color: white; border: none; border-radius: 4px; padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.85rem; transition: background-color 0.2s; }
.remove-pair-btn:hover { background-color: #c0392b; }
.pair-uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.upload-wrapper { display: flex; flex-direction: column; }
.upload-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.9rem; color: #ccc; }
.help-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background-color: #ffffff; color: var(--background); border-radius: 50%; font-size: 14px; font-weight: bold; cursor: pointer; user-select: none; transition: all 0.2s; }
.help-icon:hover { background-color: var(--primary-color); color: #ffffff; transform: scale(1.1); }

/* ALTERAÇÃO: Borda verde pontilhada */
.upload-box {
    border: 2px dashed var(--primary-color);
    border-radius: 8px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: #1f1f1f;
    transition: border-color: 0.3s;
}
.upload-box:hover { border-color: var(--primary-color); }
.upload-box input { display: none; }
.upload-box img.preview {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: none;
}
.upload-label { color: #888; z-index: 2; pointer-events: none; text-align: center; padding: 0.5rem; }
.upload-box .spinner-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    display: none; align-items: center; justify-content: center; z-index: 5;
}

/* ALTERAÇÃO: Textarea com borda verde pontilhada */
textarea { 
    width: 100%; 
    background: #1f1f1f; 
    border: 2px dashed var(--primary-color); 
    color: var(--text); 
    padding: 1rem; 
    border-radius: 8px; 
    min-height: 80px; 
    font-family: inherit; 
    resize: vertical; 
}
textarea:focus { outline: none; border-color: var(--primary-color); }

.actions-row { display: flex; gap: 1rem; margin-top: 1.5rem; }
.primary-btn { flex: 1; padding: 1rem; background: linear-gradient(45deg, var(--primary-color), var(--primary-darker)); border: none; border-radius: 8px; color: #0f0f0f; font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: 0.3s; }
.primary-btn:hover:not(:disabled) { opacity: 0.9; transform: scale(1.02); }
.primary-btn:disabled { opacity: 0.5; cursor: wait; }
.secondary-btn { padding: 1rem 2rem; background: #2a2a2a; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-weight: 500; cursor: pointer; transition: all 0.3s; }
.secondary-btn:hover { background: #333; border-color: var(--primary-color); }
.reset-btn { flex: 1; padding: 1rem; background: transparent; border: 1px solid #c0392b; border-radius: 8px; color: #c0392b; font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: all 0.3s; }
.reset-btn:hover { background: #c0392b; color: white; }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.result-card { background: #252525; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
.result-card-header { font-weight: 600; margin-bottom: 0.5rem; color: var(--primary-color); font-size: 0.9rem; }
.result-image-container { 
    background: #000; 
    border-radius: 8px; 
    min-height: 300px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    margin-bottom: 1rem; 
    text-align: center;
}
.result-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 8px;
}
.result-card .error-text { color: #ff8f8f; font-size: 0.85rem; padding: 1rem; }

/* --- NOVO LAYOUT DE BOTÕES DO CARD (COM !IMPORTANT PARA GARANTIR) --- */
.result-actions, .look-actions { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    gap: 0.5rem !important; 
    margin-top: auto; 
}
.result-actions .share-btn, .look-actions .share-btn { 
    justify-content: center; 
    font-size: 0.85rem; 
    padding: 0.5rem 0.75rem; 
    white-space: nowrap;
    width: 100%;
    min-width: 0; /* Evita overflow no grid */
}
/* Botão de vídeo em destaque */
.create-video-btn {
    grid-column: 1 / -1 !important; /* Ocupa as duas colunas */
    background: linear-gradient(45deg, var(--primary-color), var(--primary-darker)) !important;
    color: #0f0f0f !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none !important;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 10px rgba(0, 245, 195, 0.2);
    padding: 0.8rem !important;
}
.create-video-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 15px rgba(0, 245, 195, 0.3);
}

.error-banner { background: #e74c3c40; border: 1px solid var(--error-color); color: #ff8f8f; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; display: none; }
.loader { width: 48px; height: 48px; border: 5px solid #FFF; border-bottom-color: var(--primary-color); border-radius: 50%; animation: rotation 1s linear infinite; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.share-btn { background-color: #2a2a2a; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem 1rem; text-decoration: none; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease-in-out; display: inline-flex; align-items: center; gap: 0.5rem; }
.share-btn:hover:not(:disabled) { background-color: #333; border-color: var(--primary-color); transform: translateY(-2px); }
#modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 3001; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
#modal-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); background-color: var(--card-bg); padding: 2rem; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.5); width: 90%; max-width: 500px; z-index: 3002; opacity: 0; visibility: hidden; transition: opacity 0.3s, transform 0.3s, visibility 0.3s; }
#modal-overlay.visible, #modal-container.visible { opacity: 1; visibility: visible; }
#modal-container.visible { transform: translate(-50%, -50%) scale(1); }
#modal-title { color: var(--primary-color); margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
#modal-text { line-height: 1.6; font-size: 0.95rem; }
#modal-close-btn { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: #888; font-size: 1.8rem; cursor: pointer; transition: color 0.2s; line-height: 1; }
#modal-close-btn:hover { color: var(--text); }

.looks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
.look-item { background: #252525; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; }
.look-item img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 1rem;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
    background-color: #111;
}

#load-more-looks-btn, #load-more-videos-btn { margin-top: 2rem; width: 100%; }

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Alinha os itens na base */
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
}
.section-header > div:first-child {
    display: flex;
    flex-direction: column;
}
.section-header .section-title { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

/* Correção do botão do header */
#create-new-video-btn {
    width: auto !important;
    flex-grow: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

.refresh-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.refresh-btn svg { width: 20px; height: 20px; stroke: currentColor; transition: transform 0.3s ease; }
.refresh-btn.loading svg { animation: spin 1.5s linear infinite; }
.refresh-btn:hover:not(:disabled) { color: var(--primary-color); border-color: var(--primary-color); }
.refresh-btn:hover:not(:disabled) svg { transform: rotate(90deg); }
.refresh-btn.disabled { cursor: not-allowed; opacity: 0.5; }

.preferred-models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}
.preferred-model-slot {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.preferred-model-slot .model-image-container {
    border: 1px solid var(--border);
    border-radius: 8px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #1f1f1f;
}
.preferred-model-slot .model-image-container img.preview {
    position: absolute; width: 100%; height: 100%; object-fit: cover;
    object-position: center top; display: none;
}
.preferred-model-slot .model-image-container .placeholder-text {
    color: var(--text-secondary); font-size: 0.9rem;
}
.preferred-model-slot .model-name-input {
    width: 100%;
    padding: 0.75rem;
    background: #1f1f1f;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9rem;
    text-align: center;
}
.preferred-model-slot .model-name-input:focus {
     outline: none; border-color: var(--primary-color);
}
.save-single-model-btn {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.7rem 1rem !important;
    font-size: 0.9rem;
}

#save-model-modal-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}
#save-model-modal-options button { width: 100%; }
#save-model-name-input {
    width: 100%; padding: 0.75rem; background: #1f1f1f; border: 1px solid var(--border);
    border-radius: 8px; color: var(--text); font-size: 1rem; margin-bottom: 1rem;
}
#save-model-name-input:focus { outline: none; border-color: var(--primary-color); }

.global-model-mode .pair-uploads {
    grid-template-columns: 1fr;
    justify-items: center;
}
.global-model-mode .pair-uploads .upload-wrapper {
    width: 100%;
    max-width: 400px;
}

#product-association-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85); display: none; align-items: flex-start;
    justify-content: center; z-index: 2005; backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    padding: 3rem 1rem; overflow-y: auto;
}
#product-association-overlay.visible { opacity: 1; pointer-events: auto; display: flex; }
#product-association-lightbox {
    background-color: var(--card-bg); padding: 2.5rem; border-radius: 16px;
    border: 1px solid var(--border); box-shadow: 0 10px 50px rgba(0,0,0,0.9);
    width: 90%; max-width: 600px; text-align: left; position: relative;
    transform: scale(0.95); transition: transform 0.3s ease; margin: auto;
}
#product-association-overlay.visible #product-association-lightbox { transform: scale(1); }
#product-association-close-btn {
    position: absolute; top: 1rem; right: 1rem; background: none; border: none;
    color: #888; font-size: 2rem; cursor: pointer;
    transition: color 0.2s, transform 0.2s; line-height: 1;
}
#product-association-close-btn:hover { color: var(--text); transform: rotate(90deg); }
#product-association-lightbox h2 { color: var(--primary-color); margin-bottom: 1.5rem; font-size: 1.6rem; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; }
#product-association-lightbox h3 { font-size: 1.2rem; color: var(--text); margin-bottom: 0.5rem; text-align: center;}
#product-association-lightbox p { color: var(--text-secondary); text-align: center; margin-bottom: 1.5rem; }
.product-association-view { display: none; }
.product-association-view.active { display: block; }

.lightbox-image-preview {
    width: 120px; height: 160px; margin: 0 auto 1.5rem auto; border: 2px solid var(--border); border-radius: 8px; overflow: hidden;
}
.lightbox-image-preview img {
    width: 100%; height: 100%; object-fit: cover; object-position: center top;
}

.product-association-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.product-association-tab-btn { flex: 1; padding: 0.8rem 1rem; background: none; border: none; font-family: inherit; color: var(--text-secondary); font-size: 1rem; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s ease; }
.product-association-tab-btn:hover { background-color: #252525; }
.product-association-tab-btn.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.product-association-tab-btn:disabled { color: #666; cursor: not-allowed; opacity: 0.6; }

.position-selector-buttons { display: flex; gap: 1rem; justify-content: center; margin-bottom: 1.5rem; flex-wrap: wrap; }
.position-selector-buttons .secondary-btn { flex: 1; min-width: 120px;}
.back-to-list-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.9rem; text-decoration: underline; margin-top: 1rem; display: block; text-align: center; }

.product-list-container { max-height: 250px; overflow-y: auto; background: #252525; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 1rem; }
.product-list-item { padding: 1rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: background-color 0.2s; }
.product-list-item:last-child { border-bottom: none; }
.product-list-item:hover { background-color: #333; }

#product-association-form .form-group { margin-bottom: 1rem; }
#product-association-status { margin-top: 1.5rem; font-size: 0.9rem; text-align: center; min-height: 1.2em; }

@media(max-width: 768px) {
    #product-association-lightbox { padding: 2rem 1.5rem; }
    #product-association-lightbox h2 { font-size: 1.4rem; }
    .product-association-tab-btn { font-size: 0.9rem; }
    .video-movements-grid { grid-template-columns: 1fr; }
}

#plans-lightbox-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85); display: none; align-items: center;
    justify-content: center; z-index: 2001; backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
#plans-lightbox-overlay.visible { opacity: 1; pointer-events: auto; display: flex; }
#plans-lightbox {
    background-color: var(--card-bg); padding: 2.5rem; border-radius: 16px;
    border: 1px solid var(--border); box-shadow: 0 10px 50px rgba(0,0,0,0.9);
    width: 90%; max-width: 800px; text-align: center; position: relative;
    transform: scale(0.95); transition: transform 0.3s ease;
}
#plans-lightbox-overlay.visible #plans-lightbox { transform: scale(1); }
#plans-close-btn {
    position: absolute; top: 1rem; right: 1rem; background: none; border: none;
    color: #888; font-size: 2rem; cursor: pointer;
    transition: color 0.2s, transform 0.2s; line-height: 1;
}
#plans-close-btn:hover { color: var(--text); transform: rotate(90deg); }
#plans-lightbox h2 { color: var(--primary-color); margin-bottom: 0.5rem; font-size: 2rem; }
#plans-lightbox p { color: var(--text-secondary); margin-bottom: 2.5rem; max-width: 450px; margin-left: auto; margin-right: auto; }
.plans-container { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; }
.plan-card {
    background-color: #252525; border: 2px solid var(--border); border-radius: 12px;
    padding: 2rem; flex: 1; min-width: 280px; max-width: 350px; display: flex;
    flex-direction: column; transition: all 0.3s ease; position: relative; overflow: hidden;
}
.plan-card:hover { transform: translateY(-10px); border-color: var(--primary-darker); }
.plan-card.recommended { border-color: var(--primary-color); transform: scale(1.05); }
.plan-card.recommended:hover { transform: scale(1.05) translateY(-10px); }
.recommended-badge {
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    background: var(--primary-color); color: var(--background); padding: 0.3rem 1.5rem;
    font-size: 0.8rem; font-weight: bold; border-radius: 0 0 8px 8px;
}
.plan-card h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text); }
.plan-price { margin-bottom: 1.5rem; }
.plan-price .price-value { font-size: 2.8rem; font-weight: 600; color: var(--primary-color); line-height: 1; }
.plan-price .price-value small { font-size: 1.8rem; }
.price-period { color: var(--text-secondary); font-size: 0.9rem; }
.plan-features { list-style: none; text-align: left; margin-bottom: 2rem; flex-grow: 1; padding-left: 0;}
.plan-features li { margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
.plan-features svg { width: 20px; height: 20px; stroke: var(--primary-color); flex-shrink: 0; }
.plan-cta-btn {
    width: 100%; padding: 1rem; border-radius: 8px; font-weight: bold;
    font-size: 1.1rem; cursor: pointer; transition: 0.3s;
    text-decoration: none; display: block; margin-top: auto;
    border: none;
}
.plan-cta-btn.primary { background: linear-gradient(45deg, var(--primary-color), var(--primary-darker)); color: #0f0f0f; }
.plan-cta-btn.primary:hover { opacity: 0.9; }
.plan-cta-btn.secondary { background: transparent; border: 2px solid var(--primary-darker); color: var(--primary-color); }
.plan-cta-btn.secondary:hover { background: var(--primary-darker); color: #0f0f0f; }
.payment-info { display: flex; align-items: center; justify-content: center; gap: 0.75rem; color: var(--text-secondary); font-size: 0.9rem; margin-top: 1.5rem; }
.payment-info svg { width: 24px; height: 24px; stroke: var(--text-secondary); }

#plans-v2-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: none; justify-content: center;
    z-index: 2002; backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    align-items: flex-start; overflow-y: auto; padding: 3rem 1rem;
}
#plans-v2-overlay.visible { opacity: 1; pointer-events: auto; display: flex; }
#plans-v2-box {
    background-color: var(--card-bg); padding: 2.5rem; border-radius: 16px;
    border: 1px solid var(--border); box-shadow: 0 10px 50px rgba(0,0,0,0.9);
    width: 90%; max-width: 550px; text-align: center; position: relative;
    transform: scale(0.95); transition: transform 0.3s ease;
    margin-top: auto; margin-bottom: auto;
}
#plans-v2-overlay.visible #plans-v2-box { transform: scale(1); }
#plans-v2-close-btn {
    position: absolute; top: 1rem; right: 1rem; background: none; border: none;
    color: #888; font-size: 2rem; cursor: pointer;
    transition: color 0.2s, transform 0.2s; line-height: 1;
}
#plans-v2-close-btn:hover { color: var(--text); transform: rotate(90deg); }
#plans-v2-box h2 { color: var(--primary-color); margin-bottom: 0.5rem; font-size: 2rem; }
#plans-v2-box p.subtitle { color: var(--text-secondary); margin-bottom: 2rem; max-width: 450px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.plan-selector-wrapper { margin-bottom: 2rem; text-align: left; }
.plan-selector-wrapper label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-secondary); }
#plan-v2-select { width: 100%; background: #1f1f1f; border: 1px solid var(--border); color: var(--text); padding: 0.85rem 1rem; border-radius: 8px; font-family: inherit; font-size: 1rem; cursor: pointer; }
#plan-v2-select:focus { outline: none; border-color: var(--primary-color); }
.plan-details-card { background-color: #252525; border: 2px solid var(--primary-darker); border-radius: 12px; padding: 2rem; margin-bottom: 2rem; }
.plan-details-card h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text); }
.plan-details-card .plan-price { margin-bottom: 1.5rem; display: flex; justify-content: center; align-items: baseline; gap: 0.5rem; flex-direction: row; }
.plan-details-card .installments { font-size: 1.5rem; color: var(--text-secondary); }
.plan-details-card .price-value { font-size: 2.8rem; font-weight: 600; color: var(--primary-color); line-height: 1; }
.plan-details-card .price-value small { font-size: 2rem; }
#plans-v2-box .plan-cta-btn { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; }

#edit-products-overlay, #look-selector-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85); display: none; align-items: flex-start;
    justify-content: center; z-index: 3000; backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    padding: 3rem 1rem; overflow-y: auto;
}
#edit-products-overlay.visible, #look-selector-overlay.visible {
    opacity: 1; pointer-events: auto; display: flex;
}
#edit-products-lightbox, #look-selector-lightbox {
    background-color: var(--card-bg); padding: 2.5rem; border-radius: 16px;
    border: 1px solid var(--border); box-shadow: 0 10px 50px rgba(0,0,0,0.9);
    width: 90%; max-width: 800px; text-align: left; position: relative;
    transform: scale(0.95); transition: transform 0.3s ease; margin: auto;
}
#look-selector-lightbox { max-width: 900px; }

#edit-products-overlay.visible #edit-products-lightbox,
#look-selector-overlay.visible #look-selector-lightbox {
    transform: scale(1);
}

#edit-products-close-btn, #look-selector-close-btn {
    position: absolute; top: 1rem; right: 1rem; background: none; border: none;
    color: #888; font-size: 2rem; cursor: pointer;
    transition: color 0.2s, transform 0.2s; line-height: 1;
}
#edit-products-close-btn:hover, #look-selector-close-btn:hover {
    color: var(--text); transform: rotate(90deg);
}
#edit-products-lightbox h2, #look-selector-lightbox h2 { display: flex; align-items: center; gap: 0.5rem; color: var(--primary-color); margin-bottom: 1.5rem; }
#product-search-input { width: 100%; padding: 0.75rem; background: #1f1f1f; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 1rem; margin-bottom: 1rem; }
#product-list-for-editing { max-height: 60vh; overflow-y: auto; background: #252525; border-radius: 8px; border: 1px solid var(--border); }

.edit-product-images-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}
.edit-image-slot {
    aspect-ratio: 3 / 4;
    border: 2px dashed var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: #1f1f1f;
    transition: border-color 0.3s;
}
.edit-image-slot:hover { border-color: var(--primary-color); }
.edit-image-slot img {
    position: absolute; width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    display: none;
}
.edit-image-slot .placeholder-text { color: #888; z-index: 2; pointer-events: none; }

#look-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.5rem;
}
.look-selector-item {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
}
.look-selector-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 245, 195, 0.5);
    border-color: var(--primary-color);
}
.look-selector-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.prompt-templates { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.prompt-templates h4 { width: 100%; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.prompt-templates button { background-color: #333; color: var(--primary-color); border: 1px solid var(--border); border-radius: 16px; padding: 0.4rem 0.9rem; font-family: inherit; font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease; }
.prompt-templates button:hover { background-color: var(--primary-color); color: var(--background); border-color: var(--primary-color); }

#onboarding-overlay, #generation-progress-overlay, #catalog-tour-overlay, #feature-lock-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; z-index: 4000; backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.3s ease; }
#onboarding-overlay.visible, #generation-progress-overlay.visible, #catalog-tour-overlay.visible, #feature-lock-overlay.visible { display: flex; opacity: 1; }

#onboarding-box, #generation-progress-box, #catalog-tour-box, #feature-lock-box { background-color: var(--card-bg); padding: 2rem; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 10px 40px rgba(0,0,0,0.8); width: 90%; max-width: 420px; text-align: center; }

.onboarding-logo { margin-bottom: 1rem; }
.onboarding-logo svg { width: 100%; max-width: 200px; height: auto; }
.onboarding-logo .logo-text { fill: var(--primary-color); }
#onboarding-step-0 .onboarding-icon { font-size: 2.5rem; margin-bottom: 1rem; }

#onboarding-box h2 { color: var(--text); font-size: 1.5rem; margin-bottom: 1rem; font-weight: 600; }
.onboarding-step-header {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 auto 1rem auto;
    line-height: 1;
}
.onboarding-icon { font-size: 3.5rem; margin-bottom: 1rem; line-height: 1; }
#onboarding-box h3 { color: var(--primary-color); margin-bottom: 0.5rem; font-size: 1.2rem; }
#onboarding-box p { color: var(--text-secondary); line-height: 1.6; font-size: 0.9rem; min-height: 60px; }
.onboarding-step { display: none; }
.onboarding-step.active { display: block; }
.onboarding-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.onboarding-nav button { flex: 1; }
#onboarding-finish-btn, #onboarding-start-btn { font-size: 1rem; text-align: center; }

#catalog-tour-box .tour-icon svg { width: 50px; height: 50px; stroke: var(--primary-color); stroke-width: 1.5; margin-bottom: 1.5rem; }
#catalog-tour-box h3 { color: var(--primary-color); margin-bottom: 1rem; font-size: 1.3rem; }
#catalog-tour-box p { color: var(--text-secondary); line-height: 1.6; font-size: 0.95rem; margin-bottom: 2rem; }

#generation-progress-box h2 { color: var(--primary-color); margin-bottom: 0.75rem; }
#progress-counter { color: var(--text-secondary); font-size: 1rem; margin-bottom: 1.5rem; }
.progress-content { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
#progress-clothing-preview { width: 80px; height: 106px; object-fit: cover; object-position: center top; border-radius: 8px; border: 2px solid var(--border); background-color: #000; }
.progress-steps-list { list-style: none; text-align: left; flex-grow: 1; }
.progress-steps-list li { padding: 0.5rem 0; color: var(--text-secondary); font-weight: 500; position: relative; padding-left: 25px; transition: color 0.3s ease; }
.progress-steps-list li::before { content: '○'; position: absolute; left: 0; font-size: 1.2rem; line-height: 1; transition: all 0.3s ease; }
.progress-steps-list li.active { color: var(--primary-color); }
.progress-steps-list li.active::before { content: '●'; color: var(--primary-color); }
.progress-steps-list li.done { color: var(--status-active); }
.progress-steps-list li.done::before { content: '✔'; color: var(--status-active); }

#overall-progress-bar { width: 100%; height: 12px; background-color: #2a2a2a; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
#overall-progress-bar-inner { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary-darker), var(--primary-color)); border-radius: 6px; transition: width 0.4s ease; }

.wizard-progress-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    position: relative;
}
.wizard-progress-bar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 15%;
    right: 15%;
    height: 2px;
    background-color: var(--border);
    transform: translateY(-50%);
    z-index: 1;
}
.wizard-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 2;
    transition: color 0.3s ease;
    text-align: center;
}
.wizard-progress-step .step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background-color: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all 0.3s ease;
}
.wizard-progress-step.active {
    color: var(--primary-color);
}
.wizard-progress-step.active .step-circle {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: var(--background);
}
.wizard-progress-step.completed {
    color: var(--status-active);
}
.wizard-progress-step.completed .step-circle {
    border-color: var(--status-active);
    background-color: var(--status-active);
    color: var(--background);
}
.wizard-step {
    display: none;
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
}

@media(max-width: 768px) {
    body { padding: 0; }
    .container { padding: 1.5rem; }
    h1 { font-size: 1.6rem; }
    h2.section-title { font-size: 1.2rem; }
    .pair-uploads { grid-template-columns: 1fr; }
    .results-grid { grid-template-columns: 1fr; }
    .actions-row { flex-direction: column; }
    .tabs { justify-content: flex-start; }
    .tab-link { padding: 0.8rem 1rem; font-size: 0.9rem; }
    .account-grid { grid-template-columns: 1fr; }
    .looks-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .header-credits-desktop { display: none !important; }
    .header-credits-mobile { display: inline-flex; }

    .header-content { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .header-text { margin-bottom: 0.5rem; }
    h1 { margin: 0; } 
    .preferred-models-grid { grid-template-columns: 1fr; }
    #global-person-upload .model-select, #global-person-upload .upload-box { max-width: 100%; }
    #global-person-upload .upload-box { height: 350px; }
    .global-model-mode .pair-uploads .upload-wrapper { max-width: 100%; }
    #generate-all-btn, #reset-btn { width: 100%; }
    #plans-lightbox, #plans-v2-box { padding: 2rem 1.5rem; width: 100%; max-width: 100%; height: 100%; overflow-y: auto; border-radius: 0; margin: 0; }
    #plans-v2-overlay { padding: 0; }
    .plans-container { flex-direction: column; align-items: center; gap: 2rem; }
    .plan-card { width: 100%; max-width: 400px; }
    .plan-card.recommended { transform: scale(1); }
    .plan-card.recommended:hover { transform: translateY(-10px); }
    #plans-v2-box .plan-details-card .plan-price { flex-direction: column; align-items: center; gap: 0.25rem; }
    #plans-v2-box .plan-details-card .price-value { font-size: 2.8rem; }
    .payment-info { font-size: 0.85rem; }
    #edit-products-lightbox { padding: 2rem 1.5rem; width: 100%; max-width: 100%; height: 100%; overflow-y: auto; border-radius: 0; }
    #edit-products-overlay { padding: 0; }
    .edit-product-images-container { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    
    .appearance-grid {
        grid-template-columns: 1fr;
    }
    .wizard-progress-bar {
        justify-content: space-around;
    }
    .wizard-progress-bar::before {
        left: 10%; right: 10%;
    }
    .wizard-progress-step .step-label {
        font-size: 0.8rem;
    }
}

#model-choice-overlay, #saved-model-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 4001;
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#model-choice-overlay.visible, #saved-model-overlay.visible {
    display: flex;
    opacity: 1;
}

#model-choice-box, #saved-model-box {
    background-color: #202020;
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    width: 90%;
    max-width: 400px;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
#model-choice-overlay.visible #model-choice-box,
#saved-model-overlay.visible #saved-model-box {
    transform: scale(1);
}

#model-choice-box h2, #saved-model-box h2 {
    color: var(--text);
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.model-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.model-options-list label {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.model-options-list label:last-child {
    border-bottom: none;
}

.model-options-list label:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.model-options-list .icon {
    margin-right: 1rem;
    color: var(--text-secondary);
    transition: color 0.2s;
}
.model-options-list .icon svg {
    width: 24px;
    height: 24px;
}

.model-options-list .text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    flex-grow: 1;
    transition: color 0.2s;
}

.model-options-list input[type="radio"] {
    display: none;
}

.model-options-list .radio-custom {
    height: 22px;
    width: 22px;
    border: 2px solid var(--text-secondary);
    border-radius: 50%;
    margin-left: auto;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.model-options-list .radio-custom::after {
    content: '';
    width: 12px;
    height: 12px;
    background-color: var(--primary-color);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s;
}

.model-options-list input[type="radio"]:checked + .radio-custom {
    border-color: var(--primary-color);
}

.model-options-list input[type="radio"]:checked + .radio-custom::after {
    transform: scale(1);
}

.model-options-list input[type="radio"]:checked ~ .icon,
.model-options-list input[type="radio"]:checked ~ .text {
    color: var(--text);
}

/* Estilo para opções bloqueadas (premium) */
.model-options-list .text.locked {
    opacity: 0.7;
}
.model-options-list .icon.locked {
    opacity: 0.7;
}
.premium-lock-icon {
    margin-left: 0.5rem;
    font-size: 0.9rem;
}

#model-choice-trigger, .saved-model-trigger-btn {
    width: 100%;
    background: #1f1f1f;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.75rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: border-color 0.2s;
    margin-bottom: 1rem;
}
#model-choice-trigger:hover, .saved-model-trigger-btn:hover {
    border-color: var(--primary-color);
}

#model-choice-trigger .icon svg, .saved-model-trigger-btn .icon svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}
#model-choice-trigger .text, .saved-model-trigger-btn .text {
    flex-grow: 1;
    text-align: left;
}
#model-choice-trigger .chevron, .saved-model-trigger-btn .chevron {
    color: var(--text-secondary);
}

/* --- ESTILOS DO CONTADOR PROMOCIONAL --- */
.promo-countdown {
    color: #ff9f43;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    border: 1px dashed #ff9f43;
    border-radius: 6px;
    background: rgba(255, 159, 67, 0.1);
    display: inline-block;
}

/* --- ESTILO DARK PREMIUM (OFERTA BLACK FRIDAY) --- */
#plan-card-light {
background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%) !important;
border: 1px solid var(--premium-gold) !important;
box-shadow: 0 0 30px rgba(241, 196, 15, 0.15); /* Brilho dourado */
position: relative;
overflow: hidden;
transform: scale(1.02); /* Leve destaque de tamanho */
z-index: 10;
}

/* Fita de Oferta Relâmpago mais elegante */
#plan-card-light .recommended-badge {
background: linear-gradient(90deg, #f1c40f, #b7950b) !important;
color: #000 !important;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.75rem;
width: 100%;
border-radius: 0;
top: 0;
}

/* Título */
#plan-card-light h3 {
margin-top: 1.5rem; /* Espaço para a fita */
color: #ffffff;
font-size: 1.3rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.2rem;
}

/* Timer Integrado */
#plan-card-light .promo-timer-internal {
color: var(--premium-gold);
font-family: monospace;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: rgba(241, 196, 15, 0.08);
padding: 0.3rem;
border-radius: 4px;
border: 1px solid rgba(241, 196, 15, 0.2);
}

/* Preço Gigante */
#plan-card-light .plan-price {
margin-bottom: 0.5rem;
}
#plan-card-light .plan-price .price-value {
font-size: 3.2rem; /* Maior que os outros */
color: var(--premium-gold) !important;
text-shadow: 0 0 10px rgba(241, 196, 15, 0.3);
}

/* Subtexto Vitalício */
.price-subtext {
display: block;
font-size: 0.8rem;
color: #a0a0a0;
margin-top: -5px;
margin-bottom: 1.5rem;
font-weight: 400;
}

/* Lista de Benefícios */
#plan-card-light .plan-features li {
color: #e0e0e0;
margin-bottom: 0.9rem;
}
#plan-card-light .plan-features svg {
stroke: var(--premium-gold) !important;
filter: drop-shadow(0 0 2px var(--premium-gold));
}

/* Botão de Ação */
#plan-card-light .plan-cta-btn {
background: linear-gradient(90deg, #f1c40f, #d4ac0d) !important;
color: #000 !important;
font-weight: 800 !important;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(241, 196, 15, 0.25);
border: none;
}
#plan-card-light .plan-cta-btn:hover {
box-shadow: 0 6px 25px rgba(241, 196, 15, 0.4);
transform: translateY(-2px);
}

/* --- ESTILOS PARA O BLUR E OVERLAY DO TRIAL --- */
.content-blurred {
filter: blur(5px);
pointer-events: none;
user-select: none;
}

#trial-blur-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 100;
border-radius: 12px;
}

#trial-blur-overlay .overlay-content {
background-color: var(--card-bg);
padding: 2rem;
border-radius: 12px;
border: 1px solid var(--primary-color);
text-align: center;
box-shadow: 0 10px 40px rgba(0,0,0,0.8);
max-width: 400px;
width: 90%;
}

#trial-blur-overlay h3 {
color: var(--primary-color);
margin-bottom: 1rem;
font-size: 1.4rem;
}

#trial-blur-overlay p {
color: var(--text);
margin-bottom: 1.5rem;
line-height: 1.6;
}

#go-to-looks-btn {
width: 100%;
padding: 1rem;
background: linear-gradient(45deg, var(--primary-color), var(--primary-darker));
border: none;
border-radius: 8px;
color: #0f0f0f;
font-weight: bold;
font-size: 1.1rem;
cursor: pointer;
transition: 0.3s;
}

#go-to-looks-btn:hover {
opacity: 0.9;
transform: scale(1.02);
}

/* --- CLASSE PARA BOTÃO LARANJA PROMOCIONAL --- */
.btn-promo-orange {
background: transparent !important;
border: 1px solid var(--promo-orange) !important;
color: var(--promo-orange) !important;
}
.btn-promo-orange:hover {
background: rgba(255, 159, 67, 0.1) !important;
}