/* Studio Temperare - Design System v2 — Premium Glassmorphism */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{
--primary:#E8403E;--primary-dark:#C53030;--primary-light:#FEE2E2;
--secondary:#5B21B6;--secondary-light:#EDE9FE;
--accent:#F59E0B;
--bg:#F0F2F7;--card:rgba(255,255,255,0.65);--text:#111827;--muted:#6B7280;
--border:rgba(0,0,0,0.06);--input-bg:rgba(255,255,255,0.7);--radius:16px;
--shadow:0 4px 24px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
--shadow-lg:0 20px 60px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.04);
--blur:saturate(180%) blur(20px);
--transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
}
[data-theme="dark"]{
--bg:#0B0E17;--card:rgba(22,24,40,0.72);--text:#E8E8F0;--muted:#8B8BA0;
--border:rgba(255,255,255,0.07);--input-bg:rgba(255,255,255,0.06);
--shadow:0 4px 24px rgba(0,0,0,0.25);--shadow-lg:0 20px 60px rgba(0,0,0,0.4);
--primary-light:rgba(232,64,62,0.15);--secondary-light:rgba(91,33,182,0.15);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter','Red Hat Display',system-ui,sans-serif}
body{background:var(--bg);color:var(--text);min-height:100vh;
background-image:
radial-gradient(ellipse at 0% 0%,rgba(232,64,62,0.07),transparent 50%),
radial-gradient(ellipse at 100% 100%,rgba(91,33,182,0.05),transparent 50%),
radial-gradient(ellipse at 50% 50%,rgba(245,158,11,0.03),transparent 60%);
background-attachment:fixed}
.glass{background:var(--card);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
transition:var(--transition)}
header{height:64px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;
position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.7);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
border-bottom:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,0.04)}
[data-theme="dark"] header{background:rgba(11,14,23,0.8)}
.logo{display:flex;align-items:center;gap:10px}
.logo-box{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-size:16px}
.logo h1{font-size:16px;font-weight:700;letter-spacing:-0.3px}
.logo h1 span{color:var(--primary)}
.hdr-actions{display:flex;align-items:center;gap:8px}
.nav-tab{padding:8px 16px;border-radius:10px;border:1px solid transparent;background:transparent;
color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:var(--transition);
display:flex;align-items:center;gap:7px}
.nav-tab:hover{background:rgba(232,64,62,0.06);color:var(--text)}
.nav-tab.active{background:var(--primary);color:#fff;border-color:var(--primary);
box-shadow:0 2px 12px rgba(232,64,62,0.25)}
.btn-sm{padding:7px 14px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,0.5);
color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:6px}
.btn-sm:hover{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 12px rgba(232,64,62,0.25);transform:translateY(-1px)}
.btn-sm:active{transform:translateY(0)}
main{max-width:1500px;margin:0 auto;padding:20px;display:flex;gap:20px}
aside{width:380px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;
max-height:calc(100vh - 100px);overflow-y:auto;padding-right:4px}
aside::-webkit-scrollbar{width:5px}
aside::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:3px}
.panel{padding:20px}
.panel-title{font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.step-num{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-size:10px;font-weight:800}
label.field-label{font-size:11px;font-weight:600;color:var(--muted);display:block;margin-bottom:5px}
input[type=text],input[type=file],textarea,select{width:100%;padding:11px 14px;border-radius:12px;
border:1px solid var(--border);background:var(--input-bg);color:var(--text);font-size:13px;outline:none;
transition:var(--transition);font-family:inherit}
input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(232,64,62,0.08);
background:rgba(255,255,255,0.9)}
[data-theme="dark"] select{background:#2A2638;color:#E8E8F0;border-color:rgba(236,67,65,0.55);color-scheme:dark}
[data-theme="dark"] select option{background:#1E1E32;color:#E8E8F0}
[data-theme="dark"] select option:checked{background:#EC4341;color:#fff}
textarea{resize:none}
.toggle-group{display:flex;gap:4px;padding:3px;background:rgba(0,0,0,0.03);border-radius:12px}
[data-theme="dark"] .toggle-group{background:rgba(255,255,255,0.05)}
.toggle-btn{flex:1;padding:9px;text-align:center;border-radius:10px;border:none;font-size:12px;
font-weight:600;cursor:pointer;transition:var(--transition);background:transparent;color:var(--muted)}
.toggle-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 12px rgba(232,64,62,0.3)}
.toggle-btn:hover:not(.active){background:rgba(232,64,62,0.06)}
.cat-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;
border-radius:10px;border:1px solid transparent;transition:all .2s;margin-bottom:4px}
.cat-row:hover{background:rgba(236,67,65,0.04);border-color:rgba(236,67,65,0.15)}
.cat-info{display:flex;align-items:center;gap:8px}
.cat-info .emoji{font-size:18px}
.cat-info .name{font-size:13px;font-weight:500}
.cat-info .count{font-size:10px;color:var(--muted)}
.qty-ctrl{display:flex;align-items:center;gap:3px}
.qty-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:transparent;
color:var(--text);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.qty-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.qty-input{width:40px;height:28px;text-align:center;border-radius:7px;border:1px solid var(--border);
background:var(--input-bg);color:var(--text);font-size:13px;font-weight:600}
.total-bar{display:flex;align-items:center;justify-content:space-between;padding-top:10px;
margin-top:10px;border-top:1px solid var(--border);font-size:13px;font-weight:600}
.total-badge{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700}
.total-ok{background:rgba(34,197,94,0.1);color:#16A34A}
.total-warn{background:rgba(236,67,65,0.1);color:var(--primary)}
.btn-generate{width:100%;padding:15px;border-radius:14px;border:none;
background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;
font-size:14px;font-weight:700;cursor:pointer;transition:var(--transition);
display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:0.2px;
box-shadow:0 4px 16px rgba(232,64,62,0.2)}
.btn-generate:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(232,64,62,0.35)}
.btn-generate:active{transform:translateY(0)}
.btn-generate:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none}
.progress-wrap{display:none}
.progress-wrap.show{display:block}
.progress-bar-bg{height:6px;background:rgba(0,0,0,0.06);border-radius:3px;overflow:hidden;margin-top:6px}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));
border-radius:3px;transition:width .3s;width:0}
.gallery{flex:1;min-height:500px;padding:28px;display:flex;flex-direction:column}
.gallery-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.gallery-header h2{font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px;letter-spacing:-0.3px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;flex:1;align-content:start}
.img-card{aspect-ratio:1;border-radius:14px;overflow:hidden;position:relative;cursor:pointer;
background:rgba(0,0,0,0.02);border:1px solid var(--border);transition:var(--transition)}
.img-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(232,64,62,0.15)}
.img-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1)}
.img-card:hover img{transform:scale(1.03)}
.img-card .overlay{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,0.75));
opacity:0;transition:opacity .3s;display:flex;align-items:flex-end;padding:14px}
.img-card:hover .overlay{opacity:1}
.img-card .overlay span{color:#fff;font-size:12px;font-weight:600}
.score-badge{position:absolute;top:10px;left:10px;z-index:2;padding:4px 8px;border-radius:999px;
font-size:11px;font-weight:800;color:#fff;background:#6B7280;box-shadow:0 2px 8px rgba(0,0,0,.2);
backdrop-filter:blur(8px)}
.score-good{background:rgba(22,163,106,0.9)}.score-mid{background:rgba(217,119,6,0.9)}.score-bad{background:rgba(220,38,38,0.9)}
.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;
color:var(--muted);gap:12px;padding:60px 40px;text-align:center;grid-column:1/-1}
.placeholder i{font-size:48px;opacity:0.2}
.placeholder p{font-size:14px;line-height:1.5}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.12}}
.skeleton{animation:pulse 1.5s infinite;background:linear-gradient(110deg,rgba(0,0,0,0.04) 40%,rgba(0,0,0,0.08) 50%,rgba(0,0,0,0.04) 60%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:14px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal-bg.show{display:flex;animation:modalFadeIn 0.3s ease}
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
.modal-content{max-width:920px;width:100%;max-height:90vh;border-radius:24px;overflow:hidden;
display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.modal-img{flex:1;overflow:auto;padding:20px;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,0.02)}
.modal-img img{max-width:100%;max-height:70vh;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,0.1)}
.modal-footer{padding:18px 24px;display:flex;align-items:center;justify-content:space-between;
border-top:1px solid var(--border)}
.modal-footer .prompt-text{font-size:11px;color:var(--muted);max-width:60%;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.quality-box{font-size:11px;color:var(--muted);max-width:60%;line-height:1.35}
.quality-box strong{color:var(--text)}
.details-area{margin-top:8px}
.details-area textarea{min-height:60px}
.infog-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.infog-grid input,.infog-grid select{padding:8px 10px;font-size:12px}
.infog-section{margin-bottom:10px;padding:10px;border-radius:10px;background:rgba(0,0,0,0.02);border:1px solid var(--border)}
[data-theme="dark"] .infog-section{background:rgba(255,255,255,0.02)}
.infog-section-title{font-size:11px;font-weight:700;color:var(--primary);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.prominence-wrap{margin-bottom:10px}
.prominence-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.prominence-value{font-size:13px;font-weight:700;color:var(--primary);min-width:36px;text-align:right}
.prominence-bar{display:flex;align-items:center;gap:8px}
.prominence-bar span{font-size:10px;color:var(--muted);white-space:nowrap}
input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;
background:linear-gradient(90deg,var(--primary),var(--secondary));outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;
border-radius:50%;background:#fff;border:2px solid var(--primary);box-shadow:0 2px 6px rgba(0,0,0,0.15);cursor:pointer}
.smart-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px}
.btn-smart{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(232,64,62,0.2);
background:linear-gradient(135deg,rgba(232,64,62,0.06),rgba(91,33,182,0.04));color:var(--text);font-size:13px;font-weight:700;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:8px;transition:var(--transition)}
.btn-smart:hover{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 16px rgba(232,64,62,0.25)}
.btn-smart:disabled{opacity:.55;cursor:wait}
.smart-panel{display:none;margin-bottom:12px;padding:14px;border-radius:12px;
background:linear-gradient(135deg,rgba(91,33,182,0.06),rgba(232,64,62,0.04));
border:1px solid rgba(91,33,182,0.12)}
.smart-panel.show{display:block;animation:slideDown 0.3s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.smart-panel h3{font-size:12px;margin-bottom:6px;color:var(--secondary);font-weight:700}
.smart-panel p{font-size:12px;color:var(--muted);line-height:1.4;margin-bottom:6px}
.smart-chips{display:flex;gap:6px;flex-wrap:wrap}
.smart-chip{font-size:10px;font-weight:700;padding:4px 9px;border-radius:999px;
background:var(--primary-light);color:var(--primary);transition:var(--transition)}
.smart-chip:hover{background:var(--primary);color:#fff}
.power-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;
padding:9px 10px;border-radius:10px;background:rgba(0,0,0,0.025);border:1px solid var(--border)}
.power-row span{font-size:12px;font-weight:700}
.power-row small{display:block;font-size:10px;color:var(--muted);font-weight:500;margin-top:1px}
.switch{width:42px;height:23px;border-radius:999px;background:rgba(0,0,0,0.14);position:relative;flex-shrink:0;cursor:pointer;transition:.2s}
.switch::after{content:"";position:absolute;width:19px;height:19px;border-radius:50%;background:#fff;top:2px;left:2px;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:.2s}
input:checked+.switch{background:var(--primary)}
input:checked+.switch::after{left:21px}
.erp-results{display:none;margin-top:8px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--input-bg)}
.erp-results.show{display:block}
.erp-item{width:100%;border:none;border-bottom:1px solid var(--border);background:transparent;color:var(--text);
padding:9px 10px;text-align:left;cursor:pointer}
.erp-item:last-child{border-bottom:none}
.erp-item:hover{background:rgba(236,67,65,0.08)}
.erp-item strong{display:block;font-size:12px}
.erp-item span{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.copy-panel{display:none;margin-top:10px;padding:12px;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,0.025)}
.copy-panel.show{display:block}
.copy-panel h3{font-size:12px;color:var(--primary);margin-bottom:6px}
.copy-panel p,.copy-panel li{font-size:12px;color:var(--muted);line-height:1.35}
.copy-panel ul{padding-left:16px;margin:6px 0}
.sku-dashboard{display:none;margin-bottom:14px;padding:12px;border-radius:12px;border:1px solid var(--border);
background:rgba(255,255,255,.44)}
.sku-dashboard.show{display:block;animation:slideDown 0.3s ease}
.sku-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.sku-top h3{font-size:14px;margin-bottom:2px;font-weight:800}
.sku-top p{font-size:11px;color:var(--muted);line-height:1.35}
.metric-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.metric{padding:10px;border-radius:12px;background:rgba(0,0,0,.02);border:1px solid var(--border);
transition:var(--transition)}
.metric:hover{border-color:rgba(232,64,62,0.15);box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.metric strong{display:block;font-size:18px;color:var(--text);font-weight:800}
.metric span{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
/* Dropzone */
.dropzone{border:2px dashed var(--border);border-radius:14px;padding:28px 16px;text-align:center;
cursor:pointer;transition:var(--transition);background:rgba(0,0,0,0.01)}
.dropzone:hover{border-color:rgba(232,64,62,0.3);background:rgba(232,64,62,0.02)}
.dropzone.dragover{border-color:var(--primary);background:rgba(232,64,62,0.06);
box-shadow:0 0 0 4px rgba(232,64,62,0.08)}
/* Scrollbar */
aside::-webkit-scrollbar{width:4px}
aside::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.08);border-radius:2px}
aside::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.15)}
/* Panel hover */
.panel{padding:20px;transition:var(--transition)}
.glass.panel:hover{box-shadow:var(--shadow-lg);border-color:rgba(0,0,0,0.08)}
/* Selection ring on active states */
::selection{background:rgba(232,64,62,0.15);color:var(--text)}
/* Smooth page transitions */
@media(prefers-reduced-motion:no-preference){
*{scroll-behavior:smooth}
}
@media(max-width:900px){.metric-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){main{flex-direction:column}aside{width:100%;max-height:none}}

/* ===== ESMAGA CONCORRENCIA v2 ===== */
.crush-container{max-width:960px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.crush-hero{display:flex;align-items:center;gap:20px;padding:28px 32px;
background:linear-gradient(135deg,rgba(232,64,62,0.08),rgba(91,33,182,0.06));
border:1px solid rgba(232,64,62,0.12)}
.crush-hero-icon{width:56px;height:56px;border-radius:16px;flex-shrink:0;
background:linear-gradient(135deg,var(--primary),var(--secondary));
display:flex;align-items:center;justify-content:center;
font-size:24px;color:#fff;box-shadow:0 8px 24px rgba(232,64,62,0.3)}
.crush-hero-text h2{font-size:22px;font-weight:800;letter-spacing:-0.5px;margin-bottom:4px}
.crush-hero-text p{font-size:14px;color:var(--muted);line-height:1.5}
.crush-hero-text strong{color:var(--primary);font-weight:700}

.crush-step{padding:24px}
.crush-step-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.crush-step-header h3{font-size:15px;font-weight:700}
.crush-hint{font-size:12px;color:var(--muted);margin-top:2px}

.crush-url-row{display:flex;gap:10px}
.crush-url-input-wrap{flex:1;position:relative}
.crush-url-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px}
.crush-url-input{padding-left:40px!important;font-size:14px!important;height:48px}

.crush-btn-scrape{height:48px;padding:0 24px;border-radius:12px;border:1px solid rgba(232,64,62,0.2);
background:linear-gradient(135deg,rgba(232,64,62,0.08),rgba(91,33,182,0.05));
color:var(--text);font-size:14px;font-weight:700;cursor:pointer;
display:flex;align-items:center;gap:8px;white-space:nowrap;transition:var(--transition)}
.crush-btn-scrape:hover{background:var(--primary);color:#fff;border-color:var(--primary);
box-shadow:0 6px 20px rgba(232,64,62,0.3);transform:translateY(-1px)}
.crush-btn-scrape:disabled{opacity:0.6;cursor:wait;transform:none}

.crush-result{display:flex;flex-direction:column;gap:16px;animation:slideDown 0.4s ease}

.crush-success{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;
background:linear-gradient(135deg,rgba(22,163,106,0.08),rgba(22,163,106,0.03));
border:1px solid rgba(22,163,106,0.15)}
.crush-success-left{display:flex;align-items:center;gap:14px}
.crush-success-icon{width:40px;height:40px;border-radius:12px;flex-shrink:0;
background:linear-gradient(135deg,#16A34A,#059669);
display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;
box-shadow:0 4px 12px rgba(22,163,106,0.3)}
.crush-success h3{font-size:15px;font-weight:700;color:#16A34A}

.crush-grid{display:grid;grid-template-columns:340px 1fr;gap:16px}
@media(max-width:800px){.crush-grid{grid-template-columns:1fr}}

.crush-images{padding:16px;display:flex;flex-direction:column;gap:12px}
.crush-img-main{position:relative;border-radius:12px;overflow:hidden;background:rgba(0,0,0,0.03);
aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.crush-img-main img{width:100%;height:100%;object-fit:contain}
.crush-img-badge{position:absolute;top:10px;left:10px;padding:5px 10px;border-radius:8px;
background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:700;
display:flex;align-items:center;gap:5px}
.crush-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.crush-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:10px;cursor:pointer;
border:2px solid transparent;transition:var(--transition);flex-shrink:0}
.crush-thumbs img:hover{border-color:var(--primary);transform:scale(1.05)}

.crush-data{display:flex;flex-direction:column;gap:12px}
.crush-data-card{padding:16px}
.crush-data-card .field-label{display:flex;align-items:center;gap:6px;margin-bottom:8px;
font-size:12px;font-weight:700;color:var(--muted)}
.crush-data-card .field-label i{color:var(--primary);font-size:11px}
.crush-textarea-title{font-size:15px!important;font-weight:600!important;line-height:1.4;
background:transparent!important;border:none!important;resize:none;color:var(--text);padding:0!important}
.crush-textarea{font-size:13px!important;line-height:1.5;resize:none;
background:rgba(0,0,0,0.02)!important;border-color:transparent!important}
.crush-textarea:focus{border-color:var(--primary)!important}

.crush-btn-generate{position:relative;width:100%;padding:18px 32px;border-radius:16px;border:none;
background:linear-gradient(135deg,var(--primary),#B91C1C,var(--secondary));background-size:200% 200%;
animation:gradientShift 3s ease infinite;
color:#fff;font-size:16px;font-weight:800;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:10px;
box-shadow:0 8px 32px rgba(232,64,62,0.3);transition:var(--transition);
letter-spacing:0.3px;overflow:hidden}
.crush-btn-generate:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(232,64,62,0.4)}
.crush-btn-generate:active{transform:translateY(0)}
.crush-btn-generate:disabled{opacity:0.6;cursor:wait;transform:none;animation:none}
.crush-btn-glow{position:absolute;inset:-2px;border-radius:18px;
background:linear-gradient(135deg,var(--primary),var(--secondary));opacity:0.15;filter:blur(12px);
animation:glowPulse 2s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:0.1;transform:scale(1)}50%{opacity:0.25;transform:scale(1.02)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Botao Autopiloto IA */
.btn-smart{background:linear-gradient(135deg,var(--primary),var(--secondary))!important;
color:#fff!important;font-weight:700!important;border:none!important;
box-shadow:0 4px 16px rgba(232,64,62,0.25);transition:var(--transition)}
.btn-smart:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(232,64,62,0.35)}
.btn-smart:disabled{opacity:0.6;cursor:wait;transform:none}

.autocomplete-list { display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; z-index:100; max-height:200px; overflow-y:auto; list-style:none; padding:0; margin:4px 0 0 0; box-shadow:0 10px 25px rgba(0,0,0,0.2); }
.autocomplete-list li { padding:10px 14px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--border); color:var(--text); transition:background 0.2s; }
.autocomplete-list li:last-child { border-bottom:none; }
.autocomplete-list li:hover { background:var(--hover-bg); }

/* Widget do Diretor de Cena AI (Agente Interno) */
#ai-director-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Botão da bolha */
#ai-director-bubble {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, var(--primary), #8B0000);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(232, 64, 62, 0.4);
    position: relative;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#ai-director-bubble:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 48px rgba(232, 64, 62, 0.6);
}

#ai-director-bubble i {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* Pulsação de IA */
.bubble-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    opacity: 0;
    animation: bubblePulse 2.5s infinite;
}

@keyframes bubblePulse {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }
    50% {
        opacity: 0;
        transform: scale(1.3);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* Painel de Chat */
#ai-director-panel {
    width: 380px;
    height: 520px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(18, 18, 18, 0.72);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Estado Minimizado/Expandido */
#ai-director-widget.collapsed #ai-director-panel {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.7) translateY(40px);
    pointer-events: none;
    height: 0;
    width: 0;
}

#ai-director-widget.collapsed #ai-director-bubble {
    display: flex;
}

#ai-director-widget.expanded #ai-director-bubble {
    display: none;
}

/* Cabeçalho do Painel */
.panel-header {
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon {
    font-size: 20px;
    color: var(--primary);
    filter: drop-shadow(0 0 8px rgba(232, 64, 62, 0.6));
}

.panel-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.3px;
}

.status-indicator {
    font-size: 11px;
    color: #10B981;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #10B981;
    display: inline-block;
    box-shadow: 0 0 6px #10B981;
    animation: statusPulse 1.8s infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

#ai-director-close {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s;
}

#ai-director-close:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
}

/* Corpo do Chat */
.panel-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.panel-body::-webkit-scrollbar {
    width: 6px;
}

.panel-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* Balões de Mensagem */
.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    animation: msgFadeIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes msgFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-message.user {
    align-self: flex-end;
}

.chat-message.assistant, .chat-message.system {
    align-self: flex-start;
}

.message-content {
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

.chat-message.user .message-content {
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 16px rgba(232, 64, 62, 0.15);
}

.chat-message.assistant .message-content {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-message.system .message-content {
    background: rgba(232, 64, 62, 0.06);
    color: var(--text);
    border: 1px solid rgba(232, 64, 62, 0.12);
    border-radius: 14px;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    align-self: flex-start;
    animation: msgFadeIn 0.3s forwards;
}

.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
}

/* Rodapé do Chat */
.panel-footer {
    padding: 14px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#ai-chat-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

#ai-chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 14px;
    color: var(--text);
    font-size: 13px;
    transition: all 0.3s;
}

#ai-chat-input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(232, 64, 62, 0.15);
}

#ai-chat-send {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(232, 64, 62, 0.2);
}

#ai-chat-send:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(232, 64, 62, 0.3);
}

#ai-chat-send:active {
    transform: translateY(0);
}

/* Responsividade Mobile */
@media (max-width: 480px) {
    #ai-director-widget {
        bottom: 15px;
        right: 15px;
    }
    #ai-director-panel {
        width: calc(100vw - 30px);
        height: 480px;
    }
}