/* RESET & NO SCROLL */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html, body{
  width:100%;
  height:100%;
  overflow:hidden;
}

/* BACKGROUND */
body{
  display:flex;
  justify-content:center;
  align-items:center;
  font-family:'Inter', sans-serif;

  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.15), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.12), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.1), transparent 40%),
    linear-gradient(135deg, #0a0a12, #151525);
}

/* Floating glass blobs */
body::before,
body::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.05));
  filter:blur(100px);
}

body::before{ top:-120px; left:-120px; }
body::after{ bottom:-140px; right:-140px; }

/* APP PANEL */
.app{
  width:900px;
  max-width:94%;
  padding:32px;
  border-radius:28px;
  background:rgba(255,255,255,.08);
  backdrop-filter: blur(28px);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 50px 150px rgba(0,0,0,.85);
  color:#fff;
  position:relative;
}

/* HEADER */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:26px;
}

.header h1{
  font-family:'Orbitron', monospace;
  letter-spacing:4px;
  font-size:20px;
}

button{
  padding:12px 30px;
  border-radius:30px;
  border:none;
  cursor:pointer;
  letter-spacing:3px;
  font-size:12px;
  background:#fff;
  transition:.3s;
}

button:hover{
  transform:translateY(-2px);
}

/* GRADIENT PREVIEW */
.preview{
  height:130px;
  border-radius:20px;
  margin-bottom:26px;
  border:1px solid rgba(255,255,255,.15);
}

/* PALETTE */
.palette{
  display:flex;
  height:380px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.9);
}

.color{
  flex:1;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  padding-bottom:18px;
  transition:.35s;
  position:relative;
}

.color:hover{
  flex:1.25;
}

.color span{
  padding:7px 18px;
  border-radius:20px;
  font-size:12px;
  letter-spacing:3px;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.15);
  transition:.3s;
}

.color.copied span{
  background:rgba(0,255,170,.3);
  border-color:rgba(0,255,170,.7);
}