/* ===========================
   FLAK UI v2
   =========================== */

:root{
  --bg:#050816;
  --bg2:#0b1028;
  --primary:#00BFFF;
  --secondary:#7B2FF7;
  --text:#ffffff;
  --muted:#b6c2d9;
  --glass:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.12);
  --success:#22c55e;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
  background:linear-gradient(-45deg,#050816,#08152d,#0d1f42,#050816);
  background-size:400% 400%;
  animation:bgMove 18s ease infinite;
  min-height:100vh;
  overflow-x:hidden;
}

@keyframes bgMove{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* Floating blurred lights */
body::before,
body::after{
  content:"";
  position:fixed;
  width:300px;
  height:300px;
  border-radius:50%;
  filter:blur(80px);
  z-index:-1;
}

body::before{
  top:-120px;
  left:-120px;
  background:#00BFFF55;
  animation:floatBlob 12s ease-in-out infinite;
}

body::after{
  bottom:-120px;
  right:-120px;
  background:#7B2FF755;
  animation:floatBlob 14s ease-in-out infinite reverse;
}

@keyframes floatBlob{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(60px,-40px);}
}

/* Header */

header{
  position:sticky;
  top:0;
  z-index:999;
  backdrop-filter:blur(18px);
  background:rgba(5,8,22,.75);
  border-bottom:1px solid var(--border);
}

.nav{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo img{
  width:48px;
  animation:floatLogo 4s ease-in-out infinite;
}

@keyframes floatLogo{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

.logo span{
  font-size:22px;
  font-weight:700;
}

nav a{
  color:white;
  text-decoration:none;
  margin-left:20px;
  transition:.3s;
}

nav a:hover{
  color:var(--primary);
}

/* Main container */

.container{
  max-width:1000px;
  margin:auto;
  padding:40px 20px;
}

/* Glass card */

.card{
  background:var(--glass);
  border:1px solid var(--border);
  backdrop-filter:blur(18px);
  border-radius:24px;
  padding:28px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:fadeUp .8s ease;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Headings */

h1{
  font-size:40px;
  text-align:center;
  margin-bottom:10px;
}

p.subtitle{
  text-align:center;
  color:var(--muted);
  margin-bottom:30px;
}

/* Inputs */

input,
select{
  width:100%;
  margin-bottom:18px;
  padding:16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:white;
  font-size:16px;
  outline:none;
  transition:.3s;
}

input:focus,
select:focus{
  border-color:var(--primary);
  box-shadow:0 0 20px rgba(0,191,255,.35);
}

button{
  width:100%;
  padding:16px;
  border:none;
  border-radius:14px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  color:white;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:.25s;
}

button:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 0 25px rgba(0,191,255,.5);
}

button:active{
  transform:scale(.96);
}

/* Hashtags */

#hashtags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:25px;
}

.tag{
  padding:10px 16px;
  border-radius:999px;
  background:linear-gradient(90deg,#00BFFF,#7B2FF7);
  color:white;
  animation:tagIn .35s ease forwards;
}

@keyframes tagIn{
  from{
    opacity:0;
    transform:translateY(15px) scale(.8);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

footer{
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
}

@media(max-width:768px){

.nav{
  flex-direction:column;
  gap:15px;
}

nav a{
  margin:0 10px;
}

h1{
  font-size:30px;
}

.card{
  padding:20px;
}

}

/* Toast */

.toast{

position:fixed;

top:-80px;

left:50%;

transform:translateX(-50%);

padding:15px 25px;

background:#00BFFF;

color:white;

border-radius:12px;

transition:.5s;

z-index:9999;

font-weight:bold;

box-shadow:0 0 30px #00BFFF;

}

.toast.show{

top:30px;

}


/* Ripple */

button{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

width:20px;

height:20px;

background:rgba(255,255,255,.6);

border-radius:50%;

transform:translate(-50%,-50%);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

from{

opacity:1;

transform:translate(-50%,-50%) scale(0);

}

to{

opacity:0;

transform:translate(-50%,-50%) scale(20);

}

}