@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');

*{box-sizing:border-box;font-family:"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html{scroll-behavior:smooth;-webkit-user-select:none;user-select:none}
:root{
  --accent:#7cfaff;
  --bg1:rgba(255,255,255,.28);
  --bg2:rgba(255,255,255,.12);
}
body{
  margin:0;
  background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    url("https://files.catbox.moe/j0c23v.gif") center/cover fixed;
  color:#fff;
  overflow-x:hidden;
  position:relative
}
body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:radial-gradient(circle at 20% 50%, rgba(124,250,255,0.1) 0%, transparent 50%),
             radial-gradient(circle at 80% 50%, rgba(255,110,199,0.1) 0%, transparent 50%);
  pointer-events:none;
  z-index:0
}
.fx span{
  position:fixed;
  top:-10%;
  animation:fall linear infinite;
  opacity:.85;
  pointer-events:none
}
@keyframes fall{to{transform:translateY(120vh) rotate(360deg)}}
.card{
  max-width:900px;
  margin:90px auto;
  background:var(--bg1);
  backdrop-filter:blur(18px);
  border-radius:30px;
  padding:32px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  position:relative;
  border:2px solid transparent;
  background-image:
    linear-gradient(var(--bg1), var(--bg1)),
    linear-gradient(135deg, rgba(124,250,255,0.5), rgba(255,110,199,0.3), rgba(124,250,255,0.5));
  background-origin:border-box;
  background-clip:padding-box, border-box;
  animation:cardGlow 3s ease-in-out infinite;
}
@keyframes cardGlow{
  0%, 100% { box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 30px rgba(124,250,255,0.2); }
  50% { box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 50px rgba(124,250,255,0.5); }
}
.banner-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0 calc(-50vw + 50%);
  margin-bottom: 20px;
}

.banner {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(124, 250, 255, 0.3), rgba(255, 110, 199, 0.3)),
              url('https://files.catbox.moe/y1ysmo.jpg') center/cover no-repeat;
  background-attachment: fixed;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  backdrop-filter: blur(0px);
  gap: 25px;
  padding: 20px;
  text-align: center;
}

.banner-title {
  font-family: 'Pacifico', cursive;
  font-size: 56px;
  font-weight: bold;
  background: linear-gradient(90deg, #FF1493 0%, #FF6B9D 14.3%, #FFA500 28.6%, #FFFF00 42.9%, #7cfaff 57.1%, #5eb8ff 71.4%, #8B5AFF 85.7%, #FF1493 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 15px rgba(124, 250, 255, 0.8));
  margin: 0;
  text-align: center;
  letter-spacing: 3px;
  animation: fadeIn 1s ease-out, rainbowWave 4s linear infinite;
  width: 100%;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

@keyframes rainbowWave {
  0% { background-position: 0% center; }
  25% { background-position: 100% center; }
  50% { background-position: 200% center; }
  75% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

.banner-buttons {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  max-width: none;
  z-index: 10;
}

.banner-buttons button {
  padding: 10px 18px;
  background: rgba(124, 250, 255, 0.25);
  border: none;
  color: #7cfaff;
  border-radius: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
  backdrop-filter: blur(8px);
  white-space: nowrap;
  box-shadow: 0 0 20px rgba(124, 250, 255, 0.4), inset 0 0 20px rgba(124, 250, 255, 0.1);
  text-shadow: 0 0 10px rgba(124, 250, 255, 0.6);
}

.banner-buttons button:hover {
  background: rgba(124, 250, 255, 0.4);
  box-shadow: 0 0 30px rgba(124, 250, 255, 0.8), inset 0 0 30px rgba(124, 250, 255, 0.3), 0 5px 15px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}
.banner-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  background: transparent;
  backdrop-filter: blur(0px);
  border: none;
  border-radius: 20px;
  padding: 40px 50px;
  width: 95%;
  max-width: 700px;
  box-shadow: none;
}

.player-song-name {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 20px var(--accent), 0 0 40px rgba(124, 250, 255, 0.6), 0 0 60px rgba(124, 250, 255, 0.4);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 1px;
  opacity: 1;
}

.player-visualizer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  height: 120px;
  width: 100%;
}

.player-bar {
  width: 10px;
  height: 40px;
  background: linear-gradient(180deg, #7cfaff, rgba(124, 250, 255, 0.6));
  border-radius: 5px;
  animation: wave 0.6s ease-in-out infinite;
  box-shadow: 0 0 15px #7cfaff, 0 0 25px rgba(124, 250, 255, 0.8);
}

.player-bar:nth-child(1) { animation-delay: 0s; height: 70px; }
.player-bar:nth-child(2) { animation-delay: 0.1s; height: 60px; }
.player-bar:nth-child(3) { animation-delay: 0.2s; height: 90px; }
.player-bar:nth-child(4) { animation-delay: 0.3s; height: 50px; }
.player-bar:nth-child(5) { animation-delay: 0.4s; height: 85px; }
.player-bar:nth-child(6) { animation-delay: 0.5s; height: 55px; }
.player-bar:nth-child(7) { animation-delay: 0.6s; height: 88px; }
.player-bar:nth-child(8) { animation-delay: 0.7s; height: 65px; }
.player-bar:nth-child(9) { animation-delay: 0.8s; height: 80px; }
.player-bar:nth-child(10) { animation-delay: 0.9s; height: 60px; }
.player-bar:nth-child(11) { animation-delay: 1s; height: 85px; }
.player-bar:nth-child(12) { animation-delay: 1.1s; height: 52px; }
.player-bar:nth-child(13) { animation-delay: 1.2s; height: 82px; }
.player-bar:nth-child(14) { animation-delay: 1.3s; height: 62px; }
.player-bar:nth-child(15) { animation-delay: 1.4s; height: 87px; }
.player-bar:nth-child(16) { animation-delay: 1.5s; height: 67px; }

@keyframes wave {
  0%, 100% { height: 70px; }
  50% { height: 25px; }
}

.player-progress-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.player-progress-info {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.player-time-left,
.player-time-right {
  font-size: 13px;
  color: #7cfaff;
  text-shadow: 0 0 10px #7cfaff;
  opacity: 0.8;
  font-weight: 600;
  min-width: 40px;
  text-align: center;
}

.player-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(124, 250, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(124, 250, 255, 0.4);
  border: none;
  cursor: grab;
  transition: height 0.2s ease;
}

.player-progress-bar:hover {
  height: 12px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 0 30px rgba(124, 250, 255, 0.7);
}

.player-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7cfaff, rgba(124, 250, 255, 0.8));
  border-radius: 10px;
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 15px #7cfaff, 0 0 25px rgba(124, 250, 255, 0.6);
}

.top{
  display:flex;
  gap:26px;
  align-items:center;
  flex-wrap:wrap;
  animation:fadeIn 0.8s ease-out;
}
@keyframes fadeIn{
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}
.avatar{
  width:150px;height:150px;border-radius:50%;
  border:4px solid var(--accent);
  box-shadow:0 0 25px var(--accent), 0 0 50px var(--accent);
  object-fit:cover;
  animation:pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow{
  0%, 100% { box-shadow: 0 0 25px var(--accent), 0 0 50px var(--accent); }
  50% { box-shadow: 0 0 40px var(--accent), 0 0 80px var(--accent); }
}
.name{
  font-family:'Pacifico', cursive;
  font-size:36px;
  font-weight:700;
  letter-spacing:2px;
  color: #fff;
  background: linear-gradient(90deg, #ff00ff, #00ffff, #ffff00, #ff1493);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 10px rgba(124,250,255,0.6), 0 0 20px rgba(255,0,255,0.6);
  animation: gradientFlow 6s linear infinite, shimmerGlow 2s ease-in-out infinite;
}

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

@keyframes shimmerGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 10px rgba(124,250,255,0.8)) drop-shadow(0 0 20px rgba(255,0,255,0.4));
  }
  50% { 
    filter: drop-shadow(0 0 20px rgba(124,250,255,1)) drop-shadow(0 0 40px rgba(255,0,255,0.8));
  }
}

@keyframes shimmerFlow {
  0% { left: -100%; }
  100% { left: 100%; }
}

.char {
  display: inline-block;
  position: relative;
  animation: charGlow 2s ease-in-out infinite;
}

.char:nth-child(1) { animation-delay: 0s; }
.char:nth-child(2) { animation-delay: 0.15s; }
.char:nth-child(3) { animation-delay: 0.3s; }
.char:nth-child(4) { animation-delay: 0.45s; }
.char:nth-child(5) { animation-delay: 0.6s; }
.char:nth-child(6) { animation-delay: 0.75s; }
.char:nth-child(7) { animation-delay: 0.9s; }
.char:nth-child(8) { animation-delay: 1.05s; }

@keyframes charGlow {
  0%, 100% { 
    text-shadow: 0 0 8px rgba(124, 250, 255, 0.6), 0 0 15px rgba(124, 250, 255, 0.3);
    filter: brightness(1);
  }
  50% { 
    text-shadow: 0 0 20px rgba(124, 250, 255, 1), 0 0 40px rgba(124, 250, 255, 0.8), 0 0 60px rgba(255, 0, 255, 0.6);
    filter: brightness(1.3);
  }
}
.role{opacity:.85}
.typing{
  margin-top:8px;
  font-size:15px;
  color:var(--accent);
  min-height:20px;
  text-shadow:0 0 10px var(--accent);
  letter-spacing:1px;
}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.box{
  background:rgba(0,0,0,.25);
  border-radius:18px;
  padding:16px;
  border:2px solid transparent;
  background-clip:padding-box;
  box-shadow:inset 0 0 20px rgba(124, 250, 255, 0.2), 0 0 25px rgba(124, 250, 255, 0.1);
  transition:all 0.3s ease;
}
.box:hover{
  box-shadow:inset 0 0 30px rgba(124, 250, 255, 0.4), 0 0 40px rgba(124, 250, 255, 0.3);
}
.box h3{margin:0 0 10px;color:var(--accent)}
.box p{margin:4px 0;font-size:14px}
.actions{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
button{
  padding:12px 18px;
  border:none;
  border-radius:14px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-user-select:none;
  user-select:none
}
button::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:rgba(255,255,255,0.2);
  transition:left 0.5s ease;
  pointer-events:none;
}
button:hover::before{
  left:100%;
}
button:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,0,0,0.3);
}
.fb{background:#1877f2;color:#fff}
.tt{background:#000;color:#fff}
.ins{background:#e1306c;color:#fff}
.bank{color:#fff}
.mb{background:#1e88e5;}
.tcb{background:#e53935;}
.tpbank{background:linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%);}
.vcb{background:linear-gradient(135deg, #009966 0%, #00c77b 100%);}
.loc{background:#fff;color:#000}
.bank-btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  justify-content:flex-start
}
.bank-btn img{
  width:26px;
  height:26px;
  object-fit:contain;
  flex-shrink:0
}
.social-btn{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start
}
.social-btn img{
  width:22px;
  height:22px;
  object-fit:contain;
  flex-shrink:0
}
.gallery{
  margin:80px auto;
  max-width:900px;
  animation:slideIn 1s ease-out 0.5s both
}
@keyframes slideIn{
  from { opacity:0; transform:translateY(50px); }
  to { opacity:1; transform:translateY(0); }
}
.gallery h2{
  text-align:center;
  margin-bottom:16px;
  font-size:28px;
  color:#fff;
  text-shadow:0 0 20px rgba(124,250,255,0.8);
  letter-spacing:2px
}
.track{
  overflow-x: auto;
  overflow-y: hidden;
  width:100%;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.track::-webkit-scrollbar {
  display: none;
}
.track-inner{
  display:flex;
  gap:16px;
  width:max-content;
  animation:scroll 35s linear infinite;
}
@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.track:hover .track-inner{animation-play-state:paused}
.track img{
  height:180px;
  border-radius:20px;
  flex-shrink:0;
  transition:transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
  filter:brightness(0.9);
  cursor:pointer;
}
.track img:hover{
  transform:scale(1.15);
  filter:brightness(1.3) drop-shadow(0 0 15px rgba(124, 250, 255, 0.6));
}
.contact-form-container{
  max-width:700px;
  margin:80px auto;
  padding:0 20px;
  animation:slideIn 1s ease-out 0.5s both
}
.contact-form-box{
  background:linear-gradient(135deg, rgba(124,250,255,0.1), rgba(255,105,180,0.1));
  backdrop-filter:blur(25px);
  border-radius:30px;
  padding:50px 40px;
  border:2px solid rgba(124,250,255,0.4);
  box-shadow:0 0 80px rgba(124,250,255,0.3), inset 0 0 50px rgba(124,250,255,0.1);
  position:relative;
  overflow:hidden
}
.contact-form-box::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-50%;
  width:200px;
  height:200px;
  background:radial-gradient(circle, rgba(124,250,255,0.1) 0%, transparent 70%);
  border-radius:50%;
  animation:float 8s ease-in-out infinite
}
@keyframes float{
  0%, 100% { transform:translateY(0) translateX(0); }
  50% { transform:translateY(-30px) translateX(-30px); }
}
.contact-form-title{
  font-family:'Pacifico', cursive;
  font-size:32px;
  font-weight:700;
  background:linear-gradient(135deg, #7cfaff, #5eb8ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-align:center;
  margin:0 0 40px;
  text-shadow:0 0 30px rgba(124,250,255,0.3);
  position:relative;
  z-index:1
}
.contact-form-fields{
  display:flex;
  flex-direction:column;
  gap:24px;
  position:relative;
  z-index:1
}
.form-field-group{
  display:flex;
  flex-direction:column;
  gap:10px
}
.form-field-label{
  color:#7cfaff;
  font-weight:700;
  font-size:16px;
  text-shadow:0 0 15px rgba(124,250,255,0.6);
  letter-spacing:0.5px
}
.form-field-input,
.form-field-textarea{
  padding:16px 20px;
  background:rgba(0,0,0,0.3);
  border:2px solid rgba(124,250,255,0.4);
  border-radius:20px;
  color:#fff;
  font-family:inherit;
  font-size:16px;
  transition:all 0.3s ease;
  backdrop-filter:blur(10px);
  resize:vertical;
  min-height:48px;
  -webkit-appearance:none;
  appearance:none
}
.form-field-input::placeholder,
.form-field-textarea::placeholder{
  color:rgba(255,255,255,0.4)
}
.form-field-input:focus,
.form-field-textarea:focus{
  outline:none;
  background:rgba(0,0,0,0.4);
  border-color:rgba(124,250,255,0.8);
  box-shadow:0 0 30px rgba(124,250,255,0.4), inset 0 0 15px rgba(124,250,255,0.1);
  transform:translateY(-2px)
}
.form-field-textarea{
  min-height:140px;
  resize:both
}
.form-field-submit{
  padding:16px 32px;
  background:linear-gradient(135deg, rgba(124,250,255,0.5), rgba(255,105,180,0.5));
  border:2px solid rgba(124,250,255,0.7);
  border-radius:20px;
  color:#fff;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:0 0 40px rgba(124,250,255,0.4), inset 0 0 20px rgba(255,255,255,0.1);
  letter-spacing:1px;
  text-shadow:0 0 10px rgba(124,250,255,0.4);
  margin-top:10px
}
.form-field-submit:hover{
  background:linear-gradient(135deg, rgba(124,250,255,0.7), rgba(255,105,180,0.7));
  box-shadow:0 0 60px rgba(124,250,255,0.6), inset 0 0 25px rgba(255,255,255,0.15);
  transform:translateY(-4px);
  border-color:rgba(124,250,255,1)
}
.form-field-submit:active{
  transform:scale(0.96)
}
.form-field-submit.loading{
  opacity:0.7;
  pointer-events:none
}
.form-field-status{
  text-align:center;
  min-height:24px;
  font-size:16px;
  font-weight:700;
  margin-top:15px;
  letter-spacing:0.5px
}
.status-success{
  color:#00ff88 !important;
  text-shadow:0 0 15px rgba(0,255,136,0.8) !important;
  animation:successPulse 0.5s ease-out
}
.status-error{
  color:#ff6b6b !important;
  text-shadow:0 0 15px rgba(255,107,107,0.8) !important;
  animation:errorShake 0.5s ease-out
}
@keyframes successPulse{
  0% { transform:scale(0.9); opacity:0; }
  100% { transform:scale(1); opacity:1; }
}
@keyframes errorShake{
  0%, 100% { transform:translateX(0); }
  25% { transform:translateX(-5px); }
  75% { transform:translateX(5px); }
}
.playlist-icon{
  position:fixed;
  top:20px;
  right:85px;
  z-index:1000;
  width:55px;
  height:55px;
  background:linear-gradient(135deg, rgba(124,250,255,0.5), rgba(255,105,180,0.5));
  border:3px solid rgba(124,250,255,0.8);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:26px;
  transition:all 0.3s ease;
  box-shadow:0 0 30px rgba(124,250,255,0.6);
  backdrop-filter:blur(10px)
}
.playlist-icon:hover{
  background:linear-gradient(135deg, rgba(124,250,255,0.8), rgba(255,105,180,0.8));
  transform:scale(1.1);
  box-shadow:0 0 50px rgba(124,250,255,0.9)
}
.playlist-icon:active{
  transform:scale(0.95)
}
.mute-corner{
  position:fixed;
  top:20px;
  right:20px;
  z-index:1000;
  width:55px;
  height:55px;
  background:linear-gradient(135deg, rgba(124,250,255,0.5), rgba(255,105,180,0.5));
  border:3px solid rgba(124,250,255,0.8);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:28px;
  transition:all 0.3s ease;
  box-shadow:0 0 30px rgba(124,250,255,0.6);
  backdrop-filter:blur(10px)
}
.mute-corner:hover{
  background:linear-gradient(135deg, rgba(124,250,255,0.8), rgba(255,105,180,0.8));
  transform:scale(1.1);
  box-shadow:0 0 50px rgba(124,250,255,0.9)
}
.mute-corner:active{
  transform:scale(0.95)
}
.playlist-container{
  position:fixed;
  top:85px;
  right:20px;
  z-index:999;
  background:linear-gradient(135deg, rgba(124,250,255,0.2), rgba(255,105,180,0.2));
  backdrop-filter:blur(15px);
  border:2px solid rgba(124,250,255,0.5);
  border-radius:20px;
  padding:16px;
  max-height:350px;
  width:280px;
  overflow-y:auto;
  box-shadow:0 0 40px rgba(124,250,255,0.4);
  display:none
}
.playlist-container.active{
  display:block
}
.playlist-title{
  color:#7cfaff;
  font-weight:700;
  font-size:14px;
  text-shadow:0 0 10px rgba(124,250,255,0.8);
  margin:0 0 12px;
  text-align:center;
  letter-spacing:1px
}
.playlist-item{
  padding:10px 12px;
  background:rgba(0,0,0,0.3);
  border:1.5px solid rgba(124,250,255,0.3);
  border-radius:12px;
  margin-bottom:8px;
  cursor:pointer;
  transition:all 0.3s ease;
  color:#fff;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px
}
.playlist-item-image{
  font-size:18px;
  min-width:28px;
  max-width:28px;
  text-align:center;
  flex-shrink:0
}
.playlist-item-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.playlist-item-name.long{
  text-overflow:ellipsis;
}
.playlist-item:hover{
  background:rgba(124,250,255,0.2);
  border-color:rgba(124,250,255,0.8);
  box-shadow:0 0 15px rgba(124,250,255,0.4)
}
.playlist-item.active{
  background:linear-gradient(135deg, rgba(124,250,255,0.5), rgba(255,105,180,0.3));
  border-color:rgba(124,250,255,0.9);
  box-shadow:0 0 20px rgba(124,250,255,0.6);
  font-weight:600
}
.search-song-input{
  width:100%;
  padding:10px 14px;
  background:linear-gradient(135deg, rgba(0,0,0,0.4), rgba(0,0,0,0.5));
  border:2px solid rgba(124,250,255,0.5);
  border-radius:12px;
  color:#7cfaff;
  font-size:13px;
  margin-bottom:12px;
  transition:all 0.3s ease;
  font-weight:500;
  text-shadow:0 0 5px rgba(124,250,255,0.3)
}
.search-song-input::placeholder{
  color:rgba(124,250,255,0.6);
  font-weight:500
}
.search-song-input:focus{
  outline:none;
  background:linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.6));
  border-color:rgba(124,250,255,1);
  box-shadow:0 0 20px rgba(124,250,255,0.6), inset 0 0 10px rgba(124,250,255,0.1);
  transform:scale(1.02)
}
.category-buttons{
  display:flex;
  gap:8px;
  margin-bottom:12px;
  flex-wrap:wrap;
  justify-content:center
}
.category-btn{
  padding:8px 14px;
  background:linear-gradient(135deg, rgba(0,0,0,0.4), rgba(0,0,0,0.5));
  border:2px solid rgba(124,250,255,0.4);
  border-radius:10px;
  color:#7cfaff;
  font-size:12px;
  cursor:pointer;
  transition:all 0.3s ease;
  font-weight:600;
  text-shadow:0 0 5px rgba(124,250,255,0.3);
  flex:1;
  min-width:60px
}
.category-btn:hover{
  background:linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.6));
  border-color:rgba(124,250,255,0.8);
  box-shadow:0 0 15px rgba(124,250,255,0.5)
}
.category-btn.active{
  background:linear-gradient(135deg, rgba(124,250,255,0.4), rgba(255,105,180,0.3));
  border-color:rgba(124,250,255,0.9);
  box-shadow:0 0 20px rgba(124,250,255,0.7);
  transform:scale(1.05)
}
.playlist-scroll{
  scrollbar-width:thin;
  scrollbar-color:rgba(124,250,255,0.5) rgba(0,0,0,0.2)
}
.playlist-scroll::-webkit-scrollbar{
  width:6px
}
.playlist-scroll::-webkit-scrollbar-track{
  background:rgba(0,0,0,0.2);
  border-radius:10px
}
.playlist-scroll::-webkit-scrollbar-thumb{
  background:rgba(124,250,255,0.5);
  border-radius:10px
}
.playlist-scroll::-webkit-scrollbar-thumb:hover{
  background:rgba(124,250,255,0.8)
}
.add-song-section{
  border-top:1px solid rgba(124,250,255,0.3);
  padding-top:12px;
  margin-top:12px
}
.add-song-input{
  width:100%;
  padding:8px 10px;
  background:rgba(0,0,0,0.3);
  border:1.5px solid rgba(124,250,255,0.3);
  border-radius:10px;
  color:#fff;
  font-size:12px;
  margin-bottom:8px;
  transition:all 0.3s ease
}
.add-song-input::placeholder{
  color:rgba(255,255,255,0.4)
}
.add-song-input:focus{
  outline:none;
  background:rgba(0,0,0,0.4);
  border-color:rgba(124,250,255,0.8);
  box-shadow:0 0 10px rgba(124,250,255,0.3)
}
.add-song-btn{
  width:100%;
  padding:8px;
  background:linear-gradient(135deg, rgba(124,250,255,0.4), rgba(255,105,180,0.4));
  border:1.5px solid rgba(124,250,255,0.6);
  border-radius:10px;
  color:#fff;
  font-size:12px;
  cursor:pointer;
  transition:all 0.3s ease
}
.add-song-btn:hover{
  background:linear-gradient(135deg, rgba(124,250,255,0.6), rgba(255,105,180,0.6));
  box-shadow:0 0 15px rgba(124,250,255,0.4)
}
.now-playing{
  padding:10px 12px;
  background:linear-gradient(135deg, rgba(124,250,255,0.3), rgba(255,105,180,0.2));
  border:1.5px solid rgba(124,250,255,0.5);
  border-radius:12px;
  margin-bottom:12px;
  text-align:center;
  color:#7cfaff;
  font-weight:600;
  font-size:12px;
  text-shadow:0 0 10px rgba(124,250,255,0.6)
}
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.75);
  display:none;justify-content:center;align-items:center;z-index:999
}
.modal .box{
  background:#fff;color:#000;padding:22px;border-radius:22px;
  width:300px;text-align:center
}
.info-box,
.info-box h3,
.info-box p,
.info-box a{
  font-family:'Comic Neue', cursive;
}
.info-box{
  border:1px solid rgba(124,250,255,0.2);
  background:rgba(0,0,0,0.3);
  backdrop-filter:blur(10px);
  transition:all 0.3s ease;
  line-height:1.6
}
.info-box:hover{
  border-color:rgba(124,250,255,0.6);
  background:rgba(124,250,255,0.05);
  box-shadow:0 0 25px rgba(124,250,255,0.3)
}
.floating-emoji{
  position:absolute;
  font-size:30px;
  animation:float-up 4s ease-in infinite;
  pointer-events:none;
}
@keyframes float-up{
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-100px) rotate(10deg); opacity: 0; }
}

.role{
  opacity:.85;
  animation:roleFloat 2s ease-in-out infinite
}
@keyframes roleFloat{
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-5px); }
}

.corner-text{
  display:inline-block;
  margin-right:20px;
  font-family:'Pacifico', cursive;
  font-size:24px;
  font-weight:400;
  color:#7cfaff;
  letter-spacing:2px;
  opacity:0.8;
  pointer-events:none;
  text-shadow:0 2px 6px rgba(124,250,255,0.3);
  position:relative;
}
.corner-text::after{
  content:'';
  position:absolute;
  bottom:-12px;
  left:0;
  width:140%;
  height:4px;
  background:linear-gradient(95deg, transparent, #7cfaff 15%, #7cfaff 85%, transparent);
  border-radius:3px;
  opacity:0.7;
}
.corner-text::before{
  content:'';
  position:absolute;
  bottom:-20px;
  left:5%;
  width:120%;
  height:3px;
  background:linear-gradient(95deg, transparent 5%, #7cfaff 20%, #7cfaff 80%, transparent 95%);
  border-radius:3px;
  opacity:0.6;
}

.google-signin-container {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
  min-height: 50px;
  align-items: center;
}

.google-signin-container div {
  display: flex;
  justify-content: center !important;
}

.google-signin-container iframe {
  background: rgba(0,0,0,0.2) !important;
  border-radius: 14px !important;
  border: 2px solid rgba(124,250,255,0.3) !important;
}

#contactFormWrapper {
  animation: slideIn 0.5s ease-out;
}

footer{
  text-align:center;
  padding:30px 0;
  opacity:.7;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  position:relative
}

@media(max-width:768px){
  .banner-section{
    height:auto;
    min-height:auto
  }
  .banner-overlay{
    justify-content:flex-start;
    padding-top:80px;
    padding-bottom:20px;
    gap:15px
  }
  .banner-title{
    font-size:32px;
    margin:0;
    line-height:1.3
  }
  .banner-buttons{
    position:static;
    left:auto;
    top:auto;
    width:100%;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin:10px 0
  }
  .banner-buttons button{
    padding:8px 12px;
    font-size:12px
  }

  .banner-player{
    gap:15px;
    width:90%;
    max-width:100%
  }
  .player-song-name{
    font-size:13px
  }
  .player-visualizer{
    height:80px
  }
  .player-bar{
    width:6px
  }
  .player-progress-info{
    gap:8px
  }
  .player-time-left,
  .player-time-right{
    font-size:11px
  }
  .grid{grid-template-columns:1fr}
  .card{
    margin:40px 16px;
    padding:20px;
    border-radius:20px
  }
  .top{
    flex-direction:column;
    text-align:center;
    gap:16px
  }
  .avatar{
    width:120px;
    height:120px
  }
  .name{
    font-size:28px
  }
  .name,.role{
    margin:0
  }
  button{
    width:100%;
    padding:14px 16px;
    font-size:15px
  }
  .bank-btn span,.social-btn span{
    font-size:14px;
    word-break:break-word
  }
  .mute-corner{
    top:15px;
    right:15px;
    width:50px;
    height:50px;
    font-size:24px
  }
  .playlist-icon{
    top:15px;
    right:80px;
    width:50px;
    height:50px;
    font-size:22px
  }
  .playlist-container{
    top:75px;
    right:15px;
    width:240px;
    max-height:300px
  }
  .actions{
    flex-direction:column;
    gap:10px
  }
  .contact-form-box{
    padding:40px 24px
  }
  .contact-form-title{
    font-size:26px;
    margin-bottom:30px
  }
  .form-field-submit{
    padding:14px 24px;
    font-size:16px
  }
  .gallery{
    margin:40px 16px
  }
  .gallery h2{
    font-size:22px;
    margin-bottom:12px
  }
  .track img{
    height:140px;
    border-radius:15px
  }
  .corner-text{
    font-size:18px;
    margin-right:12px
  }
}

@media(max-width:480px){
  .banner-title{
    font-size:24px;
    margin:0;
    line-height:1.2
  }
  .banner-buttons button{
    padding:6px 10px;
    font-size:11px
  }
  .player-song-name{
    font-size:12px
  }
  .player-visualizer{
    height:60px
  }
  .player-bar{
    width:5px
  }
  .player-time-left,
  .player-time-right{
    font-size:10px
  }
  .card{
    margin:30px 12px;
    padding:14px
  }
  .avatar{
    width:90px;
    height:90px
  }
  .name{
    font-size:20px
  }
  .box{
    padding:12px;
    border-radius:10px;
    background:rgba(0,0,0,0.5);
    border:1px solid rgba(124,250,255,0.3)
  }
  .info-box{
    background:rgba(0,0,0,0.55);
    border:1px solid rgba(124,250,255,0.4);
  }
  .info-box h3,
  .info-box p{
    font-weight:400
  }
  .box h3{
    font-size:15px;
    margin-bottom:8px;
    font-weight:700
  }
  .box p{
    font-size:13px;
    margin:5px 0;
    line-height:1.5;
    color:#e8e8e8
  }
  button{
    padding:10px 12px;
    font-size:12px;
    border-radius:10px
  }
  .bank-btn img,.social-btn img{
    width:18px;
    height:18px
  }
  .mute-corner{
    width:40px;
    height:40px;
    font-size:18px;
    top:10px;
    right:10px
  }
  .contact-form-box{
    padding:16px 12px;
    margin:30px 12px;
    border-radius:15px
  }
  .contact-form-title{
    font-size:16px;
    margin-bottom:12px
  }
  .form-field-group{
    gap:6px
  }
  .form-field-label{
    font-size:12px
  }
  .form-field-input,
  .form-field-textarea{
    padding:10px 12px;
    font-size:13px;
    border-radius:8px
  }
  .form-field-textarea{
    min-height:90px
  }
  .form-field-submit{
    padding:10px 16px;
    font-size:12px;
    border-radius:8px;
    margin-top:6px
  }
  .gallery{
    margin:30px 12px
  }
  .track img{
    height:100px;
    border-radius:10px
  }
  footer{
    padding:16px 0;
    font-size:11px
  }
}

@media(max-width:480px){
  .info-box,
  .info-box h3,
  .info-box p,
  .info-box a{
    font-family:"Segoe UI", Arial, sans-serif !important;
  }
}