:root{
    --bg:#0b0e11; --panel:#11141a; --panel-2:#0f1319;
    --muted:#8aa0b8; --text:#e8eef7; --accent:#ff6a3d; --accent-2:#6ae3ff;
    --ok:#36d399; --warn:#ffcc66; --err:#ff6b6b; --radius:18px;
    --shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:
      radial-gradient(1200px 600px at 10% -10%, rgba(106,227,255,.08), transparent 60%),
      radial-gradient(800px 400px at 110% 10%, rgba(255,106,61,.07), transparent 50%),
      var(--bg);
    color:var(--text);
    font:16px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  }
  .wrap{ width:min(1300px, 95vw); margin: 34px auto 70px; }
  .site-header{
    background: rgba(9,12,16,.92);
    border-bottom:1px solid rgba(255,255,255,.05);
    backdrop-filter: blur(12px);
    position:sticky;
    top:0;
    z-index:10;
  }
  .header-inner{
    width:min(1300px, 95vw);
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:16px 0;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .brand img{
    height:44px;
    width:auto;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,.4));
  }
  .brand-copy{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .brand-copy strong{ font-size:15px; letter-spacing:.4px; }
  .brand-copy span{ font-size:13px; color:var(--muted); }
  .partner-badge{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 14px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(15,20,27,.85);
    text-transform:uppercase;
    letter-spacing:.4px;
    color:#cfe6ff;
    font-size:12px;
    font-weight:700;
  }
  .partner-badge img{
    height:38px;
    width:auto;
    filter: drop-shadow(0 4px 18px rgba(0,0,0,.35));
  }
  @media (max-width:640px){
    .header-inner{ flex-direction:column; align-items:flex-start; }
  }
  .title{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap }
  .title h1{
    margin:0; font-weight:800; letter-spacing:.2px; font-size:clamp(22px, 4vw, 32px);
    background: linear-gradient(90deg, #fff, #9fdcff 30%, #ffd1c2 70%, #fff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .title small{color:var(--muted)}
  .tab-bar{
    display:flex;
    gap:10px;
    margin:24px 0 18px;
    padding:6px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.06);
    background: linear-gradient(120deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  }
  .tab-btn{
    flex:1;
    border:none;
    background:transparent;
    color:var(--muted);
    font-weight:700;
    letter-spacing:.3px;
    padding:12px 18px;
    border-radius:14px;
    cursor:pointer;
    transition: background .25s, color .25s, transform .2s, box-shadow .25s;
  }
  .tab-btn:hover{ color:#fff; }
  .tab-btn.active{
    background: linear-gradient(140deg, rgba(106,227,255,.35), rgba(255,106,61,.4));
    color:#0b0e11;
    box-shadow:0 10px 25px rgba(0,0,0,.35);
  }
  .tab-panel{ display:none; }
  .tab-panel.active{ display:block; }

  /* Grid — se expande al tener resultado */
  .grid{ display:grid; gap:18px; grid-template-columns: 1.05fr .95fr; transition: grid-template-columns .35s ease }
  body.analyzed .grid{ grid-template-columns: .8fr 1.2fr; } /* overlay gana más espacio */
  @media (min-width:1400px){ body.analyzed .grid{ grid-template-columns: .75fr 1.25fr; } }
  @media (max-width: 980px){ .grid{ grid-template-columns: 1fr; } }

  .card{
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) , var(--panel);
    border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
  .card .head{
    padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06);
    color:#cfe6ff; font-weight:600; letter-spacing:.3px; display:flex; align-items:center; gap:10px;
  }
  .card .body{ padding:18px; }

  /* Dropzone */
  .dropzone{
    position:relative; border:1.5px dashed rgba(255,255,255,.18);
    border-radius:16px; padding:26px; min-height:280px;
    display:flex; align-items:center; justify-content:center; text-align:center;
    background: linear-gradient(145deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    transition: border-color .25s, transform .25s, box-shadow .25s; overflow:hidden;
  }
  .dropzone.mini{ min-height:220px; padding:18px; }
  .dropzone:hover{ border-color: rgba(106,227,255,.6); box-shadow:0 0 0 4px rgba(106,227,255,.08) inset; }
  .dropzone.dragover{ transform: scale(1.01); border-color:var(--accent-2); box-shadow:0 0 0 6px rgba(106,227,255,.12) inset; }
  .dropzone input[type="file"]{ display:none; }
  .dz-content{opacity:.95}
  .dz-content h3{ margin:.2rem 0 .4rem; font-size:18px; }
  .dz-content p{ margin:0; color:var(--muted); font-size:14px; }
  .dz-actions{ margin-top:14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
  .btn{
    -webkit-tap-highlight-color: transparent; appearance:none; border:none; cursor:pointer; font-weight:700;
    padding:12px 16px; border-radius:12px; letter-spacing:.2px;
    transition: transform .15s ease, filter .15s ease, opacity .15s ease, box-shadow .2s;
  }
  .btn:disabled{ opacity:.5; cursor:not-allowed; }
  .btn-ghost{ background:rgba(255,255,255,.06); color:#eaf6ff; }
  .btn-ghost:hover{ filter:brightness(1.1) }
  .btn-primary{
    background: linear-gradient(135deg, var(--accent), #ff9a6b);
    color:#0b0e11; box-shadow:0 8px 22px rgba(255,106,61,.35);
  }
  .btn-primary:hover{ transform: translateY(-1px) }
  .btn-primary:active{ transform: translateY(0) scale(.98) }

  /* Overlay preview (más alto al analizar) */
  .preview{
    position:relative; width:100%; background: var(--panel-2);
    border-radius:14px; border:1px solid rgba(255,255,255,.06);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    min-height: 340px; transition: min-height .35s ease;
  }
  body.analyzed .preview{ min-height: clamp(460px, 55vh, 780px); } /* más grande */
  .preview.empty::after{
    content:'El overlay aparecerá aquí'; color:var(--muted); font-size:14px; letter-spacing:.3px;
  }
  .preview img{ width:100%; height:100%; object-fit:contain; opacity:0; transform: scale(1.01); transition: opacity .4s, transform .4s; }
  .preview img.show{ opacity:1; transform: scale(1) }

  /* Toolbar dentro del overlay */
  .tools{
    position:absolute; top:10px; right:10px; display:flex; gap:8px;
    background: rgba(15,20,27,.55); border:1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(6px); padding:8px; border-radius:12px;
  }
  .chip{ padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.3px }
  .chip.excellent{ background: linear-gradient(90deg,#32d583,#7ef8b6); color:#0b0e11 }
  .chip.strong{ background: linear-gradient(90deg,#18a0fb,#7ad1ff); color:#0b0e11 }
  .chip.good{ background: linear-gradient(90deg,#ffd56a,#fff1a6); color:#0b0e11 }
  .chip.needs{ background: linear-gradient(90deg,#ff9a6b,#ffd1c2); color:#0b0e11 }
  .chip.weak{ background: linear-gradient(90deg,#ff6b6b,#ffb3b3); color:#0b0e11 }

  /* Score */
  .score{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.05)), #0f141a;
    border:1px solid rgba(255,255,255,.06);
    padding:14px 16px; border-radius:14px; margin-top:12px;
  }
  .score .label{ color:#cfe6ff; font-weight:700; letter-spacing:.3px; }
  .score .value{
    font-size: clamp(22px, 6vw, 34px);
    font-weight:800; line-height:1; letter-spacing:.6px;
    background: linear-gradient(90deg,#fff,#9fdcff 50%,#ffd1c2);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .meta{ color:var(--muted); font-size:12px; margin-top:6px;}

  /* Guide */
  .guide{
    margin-top:14px; padding:14px; border-radius:14px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border:1px solid rgba(255,255,255,.06);
  }
  .guide h4{ margin:0 0 8px; font-size:14px; color:#cfe6ff; letter-spacing:.3px }
  .guide ul{ margin:0; padding-left:16px; display:grid; gap:6px; }
  .guide li{ color:#dfebff; font-size:14px }
  .guide .tip{ margin-top:10px; color:#a6c6ff; font-size:13px }

  .ab-inputs{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
    margin-top:16px;
  }
  .ab-slot{
    border:1px solid rgba(255,255,255,.05);
    border-radius:18px;
    padding:16px;
    background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.01));
  }
  .slot-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
  }
  .pill{
    background: rgba(255,255,255,.08);
    color:#dff2ff;
    padding:4px 12px;
    border-radius:999px;
    font-size:12px;
    letter-spacing:.3px;
    text-transform:uppercase;
  }
  .ab-actions{
    margin-top:20px;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
  }
  #abStatus{ font-size:13px; color:var(--muted); }
  .ab-results{
    margin-top:22px;
    display:grid;
    gap:18px;
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
  }
  .score.winner{
    border-color: rgba(255,106,61,.6);
    box-shadow:0 6px 24px rgba(255,106,61,.25);
  }

  /* Loading & toast */
  .loading{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(7,10,14,.55); backdrop-filter: blur(4px); opacity:0; pointer-events:none; transition: opacity .2s; z-index: 50; }
  .loading.show{opacity:1; pointer-events:auto;}
  .spinner{ width:64px; height:64px; border-radius:50%; border:4px solid rgba(255,255,255,.12); border-top-color: var(--accent); animation: spin 1s linear infinite; box-shadow: 0 0 40px rgba(255,106,61,.35); }
  @keyframes spin{ to{ transform: rotate(360deg); } }
  .toast{ position:fixed; bottom:22px; right:22px; background:#161b22; color:#f6f8fa; border:1px solid rgba(255,255,255,.08); padding:12px 14px; border-radius:10px; opacity:0; pointer-events:none; transform: translateY(8px); transition:.25s; z-index:60; }
  .toast.show{ opacity:1; pointer-events:auto; transform: translateY(0) }
  .toast.err{ border-color: rgba(255,107,107,.5); box-shadow: 0 8px 20px rgba(255,107,107,.2) }
  .toast.ok{ border-color: rgba(54,211,153,.5); box-shadow: 0 8px 20px rgba(54,211,153,.2) }

  .row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
  .grow{ flex:1 }
  .thumb{ width:54px; height:54px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,.08) }
  .muted{ color:var(--muted) }
  a.link{ color:#a7deff; text-decoration:none }
  a.link:hover{ text-decoration:underline }

  @media (max-width:560px){
    .dropzone{ min-height:240px; padding:20px }
    .dz-actions{ gap:8px }
    .score{ flex-direction:column; align-items:flex-start; gap:8px }
  }

  /* Lightbox fullscreen */
  .lightbox{ position:fixed; inset:0; background:rgba(5,8,12,.9); display:none; align-items:center; justify-content:center; z-index:80; }
  .lightbox.show{ display:flex; }
  .lightbox img{ max-width:94vw; max-height:92vh; object-fit:contain; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
  .lightbox .close{ position:absolute; top:18px; right:18px; font-size:26px; line-height:1; padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); cursor:pointer; }