:root{
  --primary:#0A192F;            /* midnight blue */
  --secondary:#E6E6E6;          /* platinum */
  --accent:#D4AF37;             /* gold */
  --aqua:#00E5FF;               /* cyan */
  --neon:#5b49ff;               /* electric violet */
  --glass:rgba(255,255,255,.06);
}

/* Background + polish */
.noise:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.grad{
  background:
    radial-gradient(1100px 650px at 12% 18%, rgba(91,73,255,.38), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(0,229,255,.20), transparent 55%),
    radial-gradient(900px 600px at 70% 92%, rgba(212,175,55,.14), transparent 55%),
    linear-gradient(180deg, #070511 0%, #0A192F 55%, #070511 100%);
}

.esh-stars:before,
.esh-stars:after{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background-repeat:repeat;
  opacity:.22;
}
.esh-stars:before{
  background-image: radial-gradient(circle at 20px 30px, rgba(255,255,255,.35) 1px, transparent 1px),
                    radial-gradient(circle at 120px 90px, rgba(255,255,255,.25) 1px, transparent 1px),
                    radial-gradient(circle at 70px 140px, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 180px 180px;
}
.esh-stars:after{
  background-image: radial-gradient(circle at 40px 60px, rgba(255,255,255,.22) 1px, transparent 1px),
                    radial-gradient(circle at 160px 130px, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 220px 220px;
  opacity:.18;
}

.glass-panel{
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--glass);
}

/* 3D icon */
.icon3d{
  width:46px; height:46px;
  border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(91,73,255,.10), 0 14px 44px rgba(0,0,0,.35);
  transform-style:preserve-3d;
  transform: perspective(700px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
  transition: transform .12s ease-out;
}
.icon3d img{ width:24px; height:24px; }

@keyframes eshFloat{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
.icon3d-float{ animation: eshFloat 3.2s ease-in-out infinite; }

/* Thumbs */
.esh-thumb{ width:84px; height:84px; border-radius:18px; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.esh-thumb2{ width:64px; height:64px; border-radius:16px; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }

/* Subtle framed media */
.esh-frame{ border-radius: 1.5rem; position:relative; overflow:hidden; }
.esh-frame:after{ content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,.10), rgba(255,255,255,0), rgba(0,229,255,.10));
  mix-blend-mode: overlay;
}

/* Clamp helper without plugins */
.esh-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }