:root{
  --bg:#0b0f19;
  --panel:#11182b;
  --panel2:#0f1526;
  --line:rgba(255,255,255,.10);
  --muted:rgba(255,255,255,.65);
  --glow:0 18px 50px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box}
body{background:radial-gradient(1200px 600px at 20% 10%, rgba(90,120,255,.10), transparent 60%),
               radial-gradient(900px 500px at 90% 30%, rgba(0,255,190,.07), transparent 55%),
               var(--bg);
     color:#fff}

.topbar{backdrop-filter: blur(10px); background:rgba(11,15,25,.72); border-bottom:1px solid var(--line)}
.navbar .navbar-brand{letter-spacing:.2px}
.brand-mark{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(90,120,255,.9), rgba(0,255,190,.55));
  box-shadow:0 10px 30px rgba(90,120,255,.18);
  font-weight:800;
}

.btn-ghost{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}
.btn-ghost:hover{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); color:#fff}

.hero{padding:64px 0 36px}
.pill{
  display:inline-flex; align-items:center;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.85);
  font-size:.90rem;
}
.text-grad{
  background:linear-gradient(90deg, rgba(90,120,255,1), rgba(0,255,190,1));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--glow);
}
.badge-soft{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  background:rgba(0,255,190,.10);
  border:1px solid rgba(0,255,190,.18);
  color:rgba(255,255,255,.85);
  font-size:.85rem;
}
.preview-frame{border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.10)}
.preview-skeleton{
  width:100%; height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.08), rgba(255,255,255,.04));
  animation:shimmer 1.35s infinite linear;
}
@keyframes shimmer{
  0%{transform:translateX(-30%)}
  100%{transform:translateX(30%)}
}
.chip{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.82);
  font-size:.85rem;
}

.tool{padding:22px 0 0}
.card-pro{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  box-shadow:var(--glow);
}

.sep{border-color:rgba(255,255,255,.10); opacity:1}

.canvas-wrap{
  position:relative;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background:rgba(0,0,0,.25);
  min-height:320px;
}
#mainCanvas, #compareCanvas{display:block; width:100%; height:auto}

.empty-state{
  position:absolute; inset:0;
  display:grid; place-items:center;
  text-align:center;
  padding:16px;
  color:rgba(255,255,255,.85);
}
.empty-icon{
  width:54px;height:54px;border-radius:16px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  margin:0 auto 10px;
  font-size:22px;
}

.thumbs{user-select:none}
.thumb-list{
  display:flex; gap:10px; overflow:auto; padding-bottom:6px;
}
.thumb{
  width:74px; height:74px; border-radius:14px;
  overflow:hidden; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  position:relative;
  cursor:pointer;
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb.active{outline:2px solid rgba(0,255,190,.65); border-color:transparent}
.thumb .x{
  position:absolute; top:6px; right:6px;
  width:22px; height:22px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:12px;
}

.controls .ctrl{margin-bottom:14px}
input[type="range"]{accent-color:rgba(0,255,190,.85)}

.compare-layer{
  position:absolute; inset:0;
  pointer-events:none;
}
.compare-layer #compareCanvas{
  position:absolute; inset:0; width:100%; height:100%;
}
.compare-layer input{
  position:absolute; left:12px; right:12px; bottom:12px;
  pointer-events:auto;
}

.link-lite{color:rgba(255,255,255,.72); text-decoration:none}
.link-lite:hover{color:#fff; text-decoration:none}


/* Red-eye brush cursor hint */
.canvas-wrap.brush-on { cursor: crosshair; }
.canvas-wrap.brush-on::after{
  content:"Pincel ojos rojos activo";
  position:absolute; top:12px; left:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.85);
  font-size:.85rem;
  pointer-events:none;
}