/* =========================================================
   AutoMarkt AI — styles_new.css (versão sólida/contraste alto)
   ========================================================= */

/* ===== RESET E VARIÁVEIS ===== */
:root {
  /* Fundo e superfícies (mais opacas) */
  --bg-primary: #05070e;     /* fundo da página */
  --surface-1: #0b0f1a;      /* header */
  --surface-2: #0f1524;      /* painéis */
  --surface-3: #141a2e;      /* itens/inputs */
  --surface-4: #0a0f1d;      /* botões/internos */

  /* Acentos */
  --accent-cyan: #00d4ff;
  --accent-purple: #8b5cf6;
  --accent-pink: #ec4899;
  --accent-green: #10b981;
  --accent-orange: #f59e0b;
  --accent-red: #ef4444;

  /* Texto */
  --text-primary: #ffffff;
  --text-secondary: #e6e8ef;
  --text-muted: #a6abc2;
  --text-disabled: #6b7280;

  /* Estados */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  --gradient-secondary: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 10px rgba(0,0,0,.45);
  --shadow-lg: 0 14px 30px rgba(0,0,0,.55);
  --shadow-neon: 0 0 30px rgba(0,212,255,.35);
  --shadow-purple: 0 0 30px rgba(139,92,246,.35);

  /* Raio e transições */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-full: 9999px;
  --transition-fast: .15s cubic-bezier(.4,0,.2,1);
  --transition-normal: .3s cubic-bezier(.4,0,.2,1);

  /* Z */
  --z-header: 100; --z-modal: 1000; --z-toast: 2000; --z-splash: 3000;
}

* { margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; font-size:16px; }
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height:100vh; line-height:1.6; overflow-x:hidden; position:relative;
}
:focus-visible{ outline:2px solid rgba(0,212,255,.6); outline-offset:2px; border-radius:6px; }

/* ===== SPLASH ===== */
.splash-screen{ position:fixed; inset:0; background:var(--bg-primary); display:flex; align-items:center; justify-content:center; z-index:var(--z-splash); overflow:hidden; }
.splash-content{ text-align:center; position:relative; z-index:2; }
.splash-logo{ position:relative; margin-bottom:2rem; display:inline-block; }
.logo-image{ width:120px; height:120px; filter: drop-shadow(0 0 18px rgba(0,212,255,.45)); animation:logoFloat 3s ease-in-out infinite; }
.logo-glow{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:150px; height:150px; border-radius:50%; background:radial-gradient(circle, rgba(0,212,255,.28) 0%, transparent 70%); animation:glowPulse 2s ease-in-out infinite; }
.splash-title{ font-family:'Orbitron', monospace; font-size:3rem; font-weight:900; background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:.5rem; }
.splash-subtitle{ font-size:1.1rem; color:var(--text-secondary); margin-bottom:2.4rem; font-family:'JetBrains Mono', monospace; }
.progress-container{ width:320px; margin:0 auto; }
.progress-bar{ width:100%; height:5px; background:#0e1628; border-radius:var(--radius-full); overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.progress-fill{ height:100%; width:0%; background:var(--gradient-primary); box-shadow:0 0 12px rgba(0,212,255,.6); transition:width .3s ease; }
.progress-text{ margin-top:.6rem; font-family:'JetBrains Mono', monospace; color:var(--text-muted); font-size:.9rem; }

/* ===== CANVAS (sempre atrás) ===== */
#bg-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:-1 !important; pointer-events:none; }

/* ===== HEADER (opaco) ===== */
.main-header{
  position:sticky; top:0; z-index:var(--z-header);
  background: var(--surface-1);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow-md);
  padding:1rem 0;
}
.header-container{ max-width:1400px; margin:0 auto; padding:0 2rem; display:flex; align-items:center; justify-content:space-between; }
.header-logo{ display:flex; align-items:center; gap:1rem; }
.header-logo-img{ width:48px; height:48px; filter: drop-shadow(0 0 10px rgba(0,212,255,.35)); transition:transform var(--transition-normal), filter var(--transition-normal); }
.header-logo-img:hover{ transform:scale(1.07); filter: drop-shadow(0 0 18px rgba(0,212,255,.6)); }
.brand-info{ display:flex; flex-direction:column; }
.brand-title{ display:flex; align-items:center; gap:.5rem; }
.brand-text{ font-family:'Orbitron', monospace; font-size:1.5rem; font-weight:900; background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.brand-version{ font-size:.72rem; color:#b4c3ff; background:#0f2741; padding:.2rem .5rem; border-radius:8px; font-family:'JetBrains Mono', monospace; border:1px solid rgba(0,212,255,.25); }
.brand-subtitle{ font-size:.82rem; color:var(--text-secondary); }

.status-indicators{ display:flex; gap:1rem; }
.status-item{
  display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem;
  background: var(--surface-3);
  border:1px solid rgba(255,255,255,.06); border-radius:14px;
  transition:transform var(--transition-normal), border-color var(--transition-normal);
}
.status-item:hover{ transform:translateY(-2px); border-color:rgba(0,212,255,.35); }
.status-dot{ width:10px; height:10px; border-radius:50%; box-shadow:0 0 10px currentColor; }
.status-online{ background:var(--success); color:var(--success); }
.status-api{ background:var(--accent-cyan); color:var(--accent-cyan); }
.status-warning{ background:var(--warning); color:var(--warning); }
.status-error{ background:var(--error); color:var(--error); }
.status-label{ font-size:.8rem; color:#cfd6ff; font-family:'JetBrains Mono', monospace; }

/* ===== MAIN (acima do canvas) ===== */
.main-content{ position:relative; z-index:2 !important; padding:2rem 0; min-height:calc(100vh - 200px); }
.content-container{ max-width:1400px; margin:0 auto; padding:0 2rem; display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }

/* ===== PANELS (opacos) ===== */
.control-panel, .output-panel{
  background: var(--surface-2);
  border:1px solid rgba(255,255,255,.07);
  border-radius:24px;
  box-shadow: var(--shadow-lg);
  transition:transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  position:relative; overflow:hidden;
}
.control-panel:hover, .output-panel:hover{ transform:translateY(-3px); box-shadow:0 20px 40px rgba(0,0,0,.6); border-color:rgba(0,212,255,.22); }
.panel-header{
  padding:1.4rem 2rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 100%);
}
.panel-title{ display:flex; align-items:center; gap:.6rem; font-size:1.15rem; font-weight:800; color:#f2f6ff; }
.title-icon{ opacity:.9; }
.panel-actions{ display:flex; gap:.5rem; }
.action-btn{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background: var(--surface-4);
  color:#cbd5ff; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; cursor:pointer; transition:transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.action-btn:hover{ background:#1a2140; color:#fff; border-color:#3b4fa8; transform:scale(1.06); }
.action-btn:active{ transform:scale(.96); }
.panel-content{ padding:2rem; }

/* ===== FORM ===== */
.config-section{ margin-bottom:2rem; }
.section-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; }
.section-title{ font-size:.95rem; font-weight:700; color:#cdd6ff; text-transform:uppercase; letter-spacing:.08em; font-family:'JetBrains Mono', monospace; }
.toggle-btn{ background:none; border:none; color:#9fb0ff; cursor:pointer; padding:.4rem .6rem; border-radius:10px; transition:background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.toggle-btn:hover{ background:#172041; color:#fff; }
.toggle-btn.active{ transform:rotate(180deg); color:#00d4ff; }
.advanced-content, .ai-content{ display:none; animation:slideDown .3s ease; }
.advanced-content.expanded, .ai-content.expanded{ display:block; }

.input-group{ margin-bottom:1.4rem; }
.input-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }

.input-label{ display:flex; align-items:center; justify-content:space-between; font-size:.92rem; font-weight:600; color:#c7d0ff; margin-bottom:.55rem; }
.label-required{ color:var(--accent-pink); font-weight:800; }

.input-wrapper, .select-wrapper, .textarea-wrapper{ position:relative; }

.modern-input, .modern-select, .modern-textarea{
  width:100%; padding:1rem 1.1rem;
  background: var(--surface-3);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px; color:#f6f8ff; font-size:1rem; outline:none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.modern-input:hover, .modern-select:hover, .modern-textarea:hover{ border-color:rgba(0,212,255,.25); }
.modern-input:focus, .modern-select:focus, .modern-textarea:focus{
  border-color:#38d9ff; box-shadow:0 0 0 3px rgba(0,212,255,.16); background:#101c39;
}
.modern-textarea{ min-height:120px; resize:vertical; }

/* erro inline pelo JS */
.input-wrapper.error .modern-input, .input-wrapper.error .modern-textarea{
  border-color:var(--error)!important; box-shadow:0 0 0 3px rgba(239,68,68,.18);
}

.modern-select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; padding-right:3rem; }
.select-arrow{ position:absolute; top:50%; right:1rem; transform:translateY(-50%); color:#9fb0ff; pointer-events:none; transition:transform var(--transition-fast), color var(--transition-fast); }
.modern-select:focus + .select-arrow{ transform:translateY(-50%) rotate(180deg); color:#38d9ff; }

/* Slider */
.slider-wrapper{ position:relative; }
.modern-slider{ width:100%; height:6px; border-radius:999px; background:#162246; outline:none; -webkit-appearance:none; appearance:none; }
.modern-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--gradient-primary); box-shadow:0 0 12px rgba(0,212,255,.6); cursor:pointer; transition:transform var(--transition-fast);
}
.modern-slider::-webkit-slider-thumb:hover{ transform:scale(1.15); }
.modern-slider::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--gradient-primary); border:none; box-shadow:0 0 12px rgba(0,212,255,.6); cursor:pointer; }
.slider-value{ font-family:'JetBrains Mono', monospace; color:#38d9ff; font-weight:700; }

/* Checkboxes */
.checkbox-group{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1.2rem; }
.modern-checkbox{ display:flex; align-items:center; gap:.75rem; cursor:pointer; transition:transform var(--transition-fast); }
.modern-checkbox:hover{ transform:translateY(-1px); }
.modern-checkbox input{ display:none; }
.checkbox-mark{
  width:22px; height:22px; border:2px solid rgba(255,255,255,.15); border-radius:8px;
  background:#0f1833; display:flex; align-items:center; justify-content:center; transition:all var(--transition-fast);
}
.checkbox-mark::after{ content:'✓'; color:#051226; font-weight:900; font-size:14px; opacity:0; transition:opacity var(--transition-fast); }
.modern-checkbox input:checked + .checkbox-mark{ background:var(--gradient-primary); border-color:#38d9ff; box-shadow:0 0 12px rgba(0,212,255,.35); }
.modern-checkbox input:checked + .checkbox-mark::after{ opacity:1; }
.checkbox-label{ font-size:.92rem; color:#dbe3ff; }

/* Botão Gerar */
.generate-btn{
  width:100%; padding:1.15rem 1.8rem; margin-top:1.6rem;
  background: var(--gradient-primary); color:#031020; font-weight:900; font-size:1.06rem;
  border:none; border-radius:14px; box-shadow:0 16px 32px rgba(0,212,255,.2);
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  cursor:pointer; transition:transform var(--transition-normal), box-shadow var(--transition-normal), filter var(--transition-normal);
  position:relative; overflow:hidden;
}
.generate-btn::before{ content:''; position:absolute; inset:0; left:-100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transition:left .55s; }
.generate-btn:hover{ transform:translateY(-2px); box-shadow:0 22px 44px rgba(0,212,255,.28); }
.generate-btn:hover::before{ left:100%; }
.generate-btn:active{ transform:translateY(0); }
.generate-btn:disabled{ opacity:.55; cursor:not-allowed; }

/* ===== OUTPUT ===== */
.loading-section{ text-align:center; padding:3rem 2rem; }
.loading-animation{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.loading-spinner{ width:60px; height:60px; border:3px solid rgba(255,255,255,.08); border-top:3px solid var(--accent-cyan); border-radius:50%; animation:spin 1s linear infinite; }
.loading-text{ font-size:1.1rem; color:#cbd3ff; font-family:'JetBrains Mono', monospace; }
.loading-progress{ width:220px; height:4px; background:#102045; border-radius:999px; overflow:hidden; }
.loading-bar{ height:100%; background:var(--gradient-primary); border-radius:999px; animation:loadingProgress 2s ease-in-out infinite; }

.output-placeholder{ text-align:center; padding:3.6rem 2rem; color:var(--text-muted); }
.placeholder-icon{ font-size:3.6rem; margin-bottom:1.2rem; opacity:.75; }
.output-placeholder h3{ font-size:1.45rem; color:#e9ecff; margin-bottom:.8rem; }
.output-placeholder p{ color:#c9d2ff; }
.placeholder-features{ display:flex; flex-direction:column; gap:.8rem; max-width:340px; margin:1rem auto 0; }
.feature-item{ display:flex; align-items:center; gap:.7rem; padding:.75rem 1rem; background:#0f1833; border:1px solid rgba(255,255,255,.07); border-radius:12px; }
.feature-icon{ font-size:1.1rem; }

.output-result{ animation:slideUp .45s ease; }
.result-meta{
  display:flex; gap:2rem; padding:1rem 0; margin-bottom:1.3rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-family:'JetBrains Mono', monospace; font-size:.82rem;
}
.meta-label{ color:#a7b3e6; text-transform:uppercase; letter-spacing:.06em; }
.meta-value{ color:#38d9ff; font-weight:800; }
.result-content{ font-size:1rem; line-height:1.8; color:#f7f8ff; }
.result-content h1, .result-content h2, .result-content h3{ color:#ffffff; margin:1.4rem 0 1rem; font-weight:800; }
.result-content h2{ background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-size:1.5rem; }
.result-content p{ margin-bottom:1rem; color:#e9ecff; }
.result-content strong{ color:#5fe1ff; }
.result-content em{ color:#b79cff; }
.result-content code{ background:#0e1b3a; padding:.22rem .45rem; border-radius:8px; font-family:'JetBrains Mono', monospace; color:#5fe1ff; border:1px solid rgba(95,225,255,.18); }
.result-content pre{ background:#0c1633; border:1px solid rgba(255,255,255,.08); padding:1rem; border-radius:12px; overflow-x:auto; }

/* ===== FOOTER ===== */
.main-footer{ background: var(--surface-1); border-top:1px solid rgba(255,255,255,.07); padding:3rem 0 2rem; margin-top:4rem; }
.footer-container{ max-width:1400px; margin:0 auto; padding:0 2rem; }
.footer-content{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.footer-section h4{ color:#f1f5ff; font-size:1.12rem; margin-bottom:1rem; font-weight:800; }
.developer-info{ display:flex; flex-direction:column; gap:.45rem; }
.developer-name{ font-size:1.06rem; font-weight:800; color:#5fe1ff; }
.developer-title, .developer-education, .developer-focus{ color:#d3dcff; font-size:.92rem; }
.developer-contact a{ color:#bfa9ff; text-decoration:none; transition:color var(--transition-fast); }
.developer-contact a:hover{ color:#5fe1ff; text-decoration:underline; }
.footer-version{ color:#a7b3e6; font-size:.82rem; margin-top:1rem; font-family:'JetBrains Mono', monospace; }

/* ===== TOASTS ===== */
.toast-container{ position:fixed; bottom:2rem; right:2rem; z-index:var(--z-toast); display:flex; flex-direction:column; gap:1rem; max-width:400px; }
.toast{
  padding:1rem 1.4rem; border-radius:12px; color:#fff; font-weight:700;
  box-shadow: var(--shadow-lg); border-left:4px solid; cursor:pointer;
  background:#0f1526; border:1px solid rgba(255,255,255,.08);
  transition:transform var(--transition-fast), background var(--transition-fast);
}
.toast:hover{ transform:translateX(-4px); }
.toast.success{ background:#15321f; border-color:var(--success); }
.toast.error{ background:#2c1519; border-color:var(--error); }
.toast.warning{ background:#2f2614; border-color:var(--warning); }
.toast.info{ background:#12233f; border-color:var(--info); }

/* ===== ANIMAÇÕES ===== */
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes glowPulse{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:.6;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes loadingProgress{0%{transform:translateX(-100%)}50%{transform:translateX(0%)}100%{transform:translateX(100%)}}

/* ===== RESPONSIVO ===== */
@media (max-width:1200px){
  .content-container{ grid-template-columns:1fr; gap:2rem; }
  .header-container{ padding:0 1rem; }
  .status-indicators{ gap:.6rem; }
}
@media (max-width:768px){
  .header-container{ flex-direction:column; gap:1rem; text-align:center; }
  .status-indicators{ flex-wrap:wrap; justify-content:center; }
  .input-row{ grid-template-columns:1fr; gap:1rem; }
  .checkbox-group{ flex-direction:column; gap:1rem; }
  .footer-content{ grid-template-columns:1fr; gap:2rem; text-align:center; }
  .splash-title{ font-size:2rem; }
  .toast-container{ left:1rem; right:1rem; bottom:1rem; }
}
@media (max-width:480px){
  .main-content{ padding:1rem 0; }
  .content-container{ padding:0 1rem; }
  .panel-content{ padding:1.4rem; }
  .panel-header{ padding:1rem 1.4rem; }
  .progress-container{ width:260px; }
}

/* ===== FULLSCREEN ===== */
.output-panel.fullscreen{ position:fixed; inset:0; width:100vw; height:100vh; z-index:var(--z-modal); border-radius:0; max-width:none; }
.output-panel.fullscreen .panel-content{ height:calc(100vh - 80px); overflow-y:auto; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:#0b1020; }
::-webkit-scrollbar-thumb{ background:#2bbef0; border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:#8b5cf6; }

/* ===== SELEÇÃO ===== */
::selection{ background:rgba(0,212,255,.3); color:#fff; }
::-moz-selection{ background:rgba(0,212,255,.3); color:#fff; }

/* ===== HOTFIX DE VISIBILIDADE DO RESULTADO ===== */
.output-panel .output-result.visible{ display:block !important; opacity:1 !important; visibility:visible !important; }
.output-panel .output-result .result-content.visible{ display:block !important; opacity:1 !important; visibility:visible !important; white-space:normal !important; overflow:auto !important; }
.output-panel .output-result .result-content.hidden{ display:none !important; opacity:0 !important; visibility:hidden !important; white-space:nowrap !important; overflow:hidden !important; }

/* ===== REDUZIR MOVIMENTO ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}