@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

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

:root{
  --cyan:#00f0ff;
  --magenta:#ff00e5;
  --yellow:#ffe600;
  --pink:#ff3df0;
  --bg-dark:rgba(5,5,20,0.55);
  --border-glow:0 0 8px var(--cyan),0 0 20px rgba(0,240,255,0.3);
  --font-tech:'Share Tech Mono',monospace;
  --font-display:'Orbitron',sans-serif;
}

html,body{
  width:100%;height:100%;
  overflow:hidden;
  background:#02030a;
  color:#d8f6ff;
  font-family:var(--font-tech);
}

#bg-canvas{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  z-index:0;
  display:block;
}

.hidden{display:none!important;}

/* ============ LOCK SCREEN ============ */
.lock-screen{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at center,rgba(20,0,30,0.95),rgba(0,0,5,0.98));
}
.lock-content{
  text-align:center;
  padding:50px 70px;
  border:2px solid var(--magenta);
  background:rgba(30,0,40,0.7);
  backdrop-filter:blur(12px);
  box-shadow:0 0 30px var(--magenta),inset 0 0 30px rgba(255,0,229,0.1);
  animation:lockPulse 2s ease-in-out infinite;
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
}
.lock-icon{font-size:48px;color:var(--magenta);margin:10px 0;text-shadow:0 0 20px var(--magenta);}
.lock-text{
  font-family:var(--font-display);
  font-size:22px;letter-spacing:3px;
  color:#fff;margin:20px 0 30px;
  text-transform:uppercase;
}
.lock-buttons{display:flex;gap:20px;justify-content:center;}
@keyframes lockPulse{
  0%,100%{box-shadow:0 0 30px var(--magenta),inset 0 0 30px rgba(255,0,229,0.1);}
  50%{box-shadow:0 0 50px var(--magenta),0 0 80px rgba(255,0,229,0.4),inset 0 0 40px rgba(255,0,229,0.2);}
}

/* ============ BUTTONS ============ */
.btn-cyber{
  font-family:var(--font-display);
  font-size:13px;letter-spacing:2px;
  padding:10px 22px;
  background:linear-gradient(135deg,rgba(0,240,255,0.1),rgba(255,0,229,0.1));
  border:1px solid var(--cyan);
  color:var(--cyan);
  cursor:pointer;
  text-transform:uppercase;
  position:relative;
  transition:all 0.25s;
  text-shadow:0 0 5px var(--cyan);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.btn-cyber:hover{
  background:linear-gradient(135deg,rgba(0,240,255,0.25),rgba(255,0,229,0.25));
  color:#fff;
  box-shadow:0 0 15px var(--cyan),0 0 30px rgba(0,240,255,0.4);
  border-color:var(--magenta);
}

/* ============ APP LAYOUT ============ */
.app{
  position:relative;z-index:1;
  width:100%;height:100%;
  display:flex;flex-direction:column;
  padding:12px 18px 18px;
}

/* ============ TOP BAR ============ */
.top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 18px;
  background:var(--bg-dark);
  border:1px solid rgba(0,240,255,0.4);
  backdrop-filter:blur(14px);
  box-shadow:0 0 15px rgba(0,240,255,0.2);
  margin-bottom:12px;
  clip-path:polygon(15px 0,100% 0,100% calc(100% - 10px),calc(100% - 15px) 100%,0 100%,0 10px);
}
.top-bar-left{display:flex;align-items:baseline;gap:10px;}
.title-main{
  font-family:var(--font-display);
  font-size:20px;font-weight:900;
  color:var(--cyan);
  text-shadow:0 0 10px var(--cyan);
  letter-spacing:2px;
}
.title-sub{
  font-size:13px;color:var(--magenta);
  text-shadow:0 0 6px var(--magenta);
  letter-spacing:1px;
}
.top-bar-center{display:flex;align-items:center;gap:8px;font-size:12px;color:#7fffbf;}
.status-dot{
  width:8px;height:8px;border-radius:50%;
  background:#00ff88;
  box-shadow:0 0 8px #00ff88;
  animation:blink 1.6s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.3;}}
.btn-home{font-size:11px;padding:7px 16px;}

/* ============ MAIN GRID ============ */
.main-grid{
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  min-height:0;
  perspective:1200px;
  perspective-origin:50% 50%;
}

/* ============ PANEL ============ */
.panel{
  position:relative;
  background:var(--bg-dark);
  border:1px solid rgba(0,240,255,0.35);
  backdrop-filter:blur(14px);
  padding:16px 18px;
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:inset 0 0 30px rgba(0,240,255,0.05),0 0 20px rgba(0,240,255,0.1),
    0 20px 60px rgba(0,0,0,0.4),0 8px 30px rgba(0,0,0,0.3);
  transform-style:preserve-3d;
  transition:transform 0.15s ease-out,box-shadow 0.3s,border-color 0.3s;
  transform-origin:center center;
  will-change:transform;
}
.panel::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(
    var(--holo-angle,135deg),
    transparent 0%,
    rgba(0,240,255,0.0) 20%,
    rgba(0,240,255,var(--holo-intensity,0)) 35%,
    rgba(180,0,255,var(--holo-intensity,0)) 45%,
    rgba(255,0,229,var(--holo-intensity,0)) 55%,
    rgba(255,200,0,var(--holo-intensity,0)) 65%,
    rgba(0,240,255,0.0) 80%,
    transparent 100%
  );
  background-position:var(--holo-x,50%) var(--holo-y,50%);
  background-size:200% 200%;
  pointer-events:none;
  z-index:10;
  mix-blend-mode:screen;
  opacity:0.7;
  border-radius:inherit;
}
.panel::after{
  content:'';
  position:absolute;inset:-1px;
  border-radius:inherit;
  background:linear-gradient(
    var(--holo-angle,135deg),
    transparent 30%,
    rgba(0,240,255,0.15) 45%,
    rgba(255,0,229,0.15) 55%,
    transparent 70%
  );
  background-size:200% 200%;
  background-position:var(--holo-x,50%) var(--holo-y,50%);
  pointer-events:none;
  z-index:-1;
  filter:blur(8px);
  opacity:0.5;
}
.panel>*{
  transform:translateZ(var(--depth,0px));
}
.panel-title{--depth:20px;position:relative;z-index:5;}
.upload-zone{--depth:10px;position:relative;z-index:4;}
.playlist{--depth:5px;position:relative;z-index:3;}
.visualizer{--depth:15px;position:relative;z-index:4;}
.player-controls{--depth:12px;position:relative;z-index:4;}
.video-wrapper{--depth:10px;position:relative;z-index:4;}
.panel-audio{border-color:rgba(0,240,255,0.5);}
.panel-video{border-color:rgba(255,0,229,0.5);}

/* ============ ANIMATABLE CUSTOM PROPERTIES ============ */
@property --holo-angle{syntax:'<angle>';inherits:false;initial-value:135deg;}
@property --holo-x{syntax:'<percentage>';inherits:false;initial-value:50%;}
@property --holo-y{syntax:'<percentage>';inherits:false;initial-value:50%;}
@property --holo-intensity{syntax:'<number>';inherits:false;initial-value:0;}

/* ============ HOLOGRAPHIC SHIMMER ============ */
@keyframes holoShimmer{
  0%{--holo-angle:135deg;--holo-x:0%;--holo-y:0%;--holo-intensity:0.12;}
  25%{--holo-angle:225deg;--holo-x:100%;--holo-y:0%;--holo-intensity:0.18;}
  50%{--holo-angle:315deg;--holo-x:100%;--holo-y:100%;--holo-intensity:0.12;}
  75%{--holo-angle:45deg;--holo-x:0%;--holo-y:100%;--holo-intensity:0.18;}
  100%{--holo-angle:135deg;--holo-x:0%;--holo-y:0%;--holo-intensity:0.12;}
}
.panel-audio:hover::before{
  animation:holoShimmer 4s linear infinite;
}
.panel-video:hover::before{
  animation:holoShimmer 4s linear infinite reverse;
}
.panel-audio:hover{
  border-color:rgba(0,240,255,0.8);
  box-shadow:inset 0 0 40px rgba(0,240,255,0.08),0 0 40px rgba(0,240,255,0.25),
    0 25px 70px rgba(0,0,0,0.5),0 0 80px rgba(0,240,255,0.1);
}
.panel-video:hover{
  border-color:rgba(255,0,229,0.8);
  box-shadow:inset 0 0 40px rgba(255,0,229,0.08),0 0 40px rgba(255,0,229,0.25),
    0 25px 70px rgba(0,0,0,0.5),0 0 80px rgba(255,0,229,0.1);
}

/* ============ LIGHT REFLECTION STRIP ============ */
.panel-light-strip{
  position:absolute;
  top:0;left:-100%;
  width:60%;height:100%;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.02) 30%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.02) 70%,
    transparent 100%
  );
  transform:skewX(-15deg);
  pointer-events:none;
  z-index:11;
  transition:left 0.6s ease;
}
.panel:hover .panel-light-strip{
  left:150%;
}

/* ============ DEPTH SHADOW LAYER ============ */
.panel-shadow-layer{
  position:absolute;inset:0;
  border-radius:inherit;
  box-shadow:
    0 0 0 1px rgba(0,240,255,0.1),
    0 30px 60px -10px rgba(0,0,0,0.6),
    0 15px 30px -5px rgba(0,0,0,0.4);
  pointer-events:none;
  z-index:-2;
  transform:translateZ(-20px);
}
.panel-video .panel-shadow-layer{
  box-shadow:
    0 0 0 1px rgba(255,0,229,0.1),
    0 30px 60px -10px rgba(0,0,0,0.6),
    0 15px 30px -5px rgba(0,0,0,0.4);
}

/* ============ EDGE GLOW ============ */
.panel-edge-glow{
  position:absolute;inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
  opacity:0;
  transition:opacity 0.4s;
}
.panel-audio .panel-edge-glow{
  background:linear-gradient(var(--holo-angle,135deg),
    rgba(0,240,255,0.4) 0%,transparent 20%,transparent 80%,rgba(0,240,255,0.4) 100%);
  filter:blur(4px);
}
.panel-video .panel-edge-glow{
  background:linear-gradient(var(--holo-angle,135deg),
    rgba(255,0,229,0.4) 0%,transparent 20%,transparent 80%,rgba(255,0,229,0.4) 100%);
  filter:blur(4px);
}
.panel:hover .panel-edge-glow{opacity:1;}

/* ============ TITLE DEPTH EFFECT ============ */
.panel-title{
  position:relative;
  text-shadow:
    0 0 8px var(--cyan),
    0 1px 0 rgba(0,240,255,0.3),
    0 2px 0 rgba(0,240,255,0.15),
    0 3px 4px rgba(0,0,0,0.4);
  transform:translateZ(25px);
  transition:transform 0.2s,text-shadow 0.3s;
}
.panel:hover .panel-title{
  transform:translateZ(35px);
  text-shadow:
    0 0 12px var(--cyan),
    0 0 25px var(--cyan),
    0 1px 0 rgba(0,240,255,0.4),
    0 2px 0 rgba(0,240,255,0.2),
    0 4px 8px rgba(0,0,0,0.5);
}
.panel-video .panel-title{
  text-shadow:
    0 0 8px var(--magenta),
    0 1px 0 rgba(255,0,229,0.3),
    0 2px 0 rgba(255,0,229,0.15),
    0 3px 4px rgba(0,0,0,0.4);
}
.panel-video:hover .panel-title{
  text-shadow:
    0 0 12px var(--magenta),
    0 0 25px var(--magenta),
    0 1px 0 rgba(255,0,229,0.4),
    0 2px 0 rgba(255,0,229,0.2),
    0 4px 8px rgba(0,0,0,0.5);
}

/* ============ LENTICULAR GRID OVERLAY ============ */
.panel-lenticular{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:9;
  opacity:0.03;
  background:repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.5) 0px,
    rgba(255,255,255,0.5) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode:overlay;
}

.panel-corner{
  position:absolute;width:22px;height:22px;
  border-color:var(--cyan);border-style:solid;border-width:0;
  pointer-events:none;
  z-index:12;
}
.panel-video .panel-corner{border-color:var(--magenta);}
.panel-corner.tl{top:6px;left:6px;border-top-width:2px;border-left-width:2px;}
.panel-corner.tr{top:6px;right:6px;border-top-width:2px;border-right-width:2px;}
.panel-corner.bl{bottom:6px;left:6px;border-bottom-width:2px;border-left-width:2px;}
.panel-corner.br{bottom:6px;right:6px;border-bottom-width:2px;border-right-width:2px;}

.panel-title{
  font-family:var(--font-display);
  font-size:16px;font-weight:700;
  letter-spacing:2px;
  color:var(--cyan);
  text-shadow:0 0 8px var(--cyan);
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px dashed rgba(0,240,255,0.3);
}
.panel-video .panel-title{color:var(--magenta);text-shadow:0 0 8px var(--magenta);border-color:rgba(255,0,229,0.3);}

/* ============ UPLOAD ZONE ============ */
.upload-zone{
  border:2px dashed rgba(0,240,255,0.4);
  padding:18px;
  text-align:center;
  cursor:pointer;
  transition:all 0.3s;
  background:rgba(0,240,255,0.03);
  margin-bottom:10px;
  flex-shrink:0;
}
.upload-zone.drag-over{
  border-color:var(--cyan);
  background:rgba(0,240,255,0.12);
  box-shadow:0 0 20px rgba(0,240,255,0.3),inset 0 0 20px rgba(0,240,255,0.1);
  animation:pulse 0.9s ease-in-out infinite;
}
.panel-video .upload-zone{border-color:rgba(255,0,229,0.4);background:rgba(255,0,229,0.03);}
.panel-video .upload-zone.drag-over{
  border-color:var(--magenta);
  background:rgba(255,0,229,0.12);
  box-shadow:0 0 20px rgba(255,0,229,0.3),inset 0 0 20px rgba(255,0,229,0.1);
}
@keyframes pulse{
  0%,100%{transform:scale(1);}50%{transform:scale(1.01);}
}
.upload-icon{font-size:32px;color:var(--cyan);text-shadow:0 0 10px var(--cyan);margin-bottom:6px;}
.panel-video .upload-icon{color:var(--magenta);text-shadow:0 0 10px var(--magenta);}
.upload-text{font-size:13px;color:#a0e8ff;margin-bottom:4px;}
.upload-sub{font-size:11px;color:#6a8a9a;margin:6px 0;}
.btn-select{margin-top:4px;font-size:11px;padding:7px 18px;}

/* ============ PLAYLIST ============ */
.playlist{
  flex:1;
  overflow-y:auto;
  margin-bottom:10px;
  border:1px solid rgba(0,240,255,0.2);
  background:rgba(0,10,20,0.4);
  padding:4px;
  min-height:80px;
  max-height:180px;
}
.panel-video .playlist{border-color:rgba(255,0,229,0.2);max-height:120px;}
.playlist::-webkit-scrollbar{width:6px;}
.playlist::-webkit-scrollbar-track{background:rgba(0,0,0,0.3);}
.playlist::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:3px;}
.panel-video .playlist::-webkit-scrollbar-thumb{background:var(--magenta);}

.playlist-item{
  padding:7px 10px;
  font-size:12px;
  color:#9cc;
  cursor:pointer;
  border-bottom:1px solid rgba(0,240,255,0.08);
  transition:all 0.2s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  position:relative;
}
.playlist-item:hover{background:rgba(0,240,255,0.08);color:#d8f6ff;}
.playlist-item.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(0,240,255,0.15),transparent);
  text-shadow:0 0 6px var(--cyan);
}
.playlist-item.active::after{
  content:'';position:absolute;left:0;bottom:0;
  width:100%;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  box-shadow:0 0 8px var(--cyan);
  animation:glowLine 1.5s ease-in-out infinite;
}
@keyframes glowLine{
  0%,100%{opacity:0.7;}50%{opacity:1;}
}
.playlist-empty{padding:20px;text-align:center;color:#556;font-size:12px;font-style:italic;}

/* ============ VISUALIZER ============ */
.visualizer{
  width:100%;height:70px;
  background:rgba(0,0,0,0.4);
  border:1px solid rgba(0,240,255,0.2);
  margin-bottom:8px;
  flex-shrink:0;
}

/* ============ AUDIO CONTROLS ============ */
.player-controls{flex-shrink:0;}
.progress-row{
  display:flex;align-items:center;gap:8px;
  margin-bottom:8px;
}
.time-label{font-size:11px;color:#7cf;min-width:40px;text-align:center;}
.progress-bar{
  flex:1;height:6px;
  background:rgba(0,240,255,0.15);
  position:relative;cursor:pointer;
  border-radius:3px;
}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  width:0%;
  border-radius:3px;
  box-shadow:0 0 8px var(--cyan);
  transition:width 0.1s linear;
}
.progress-thumb{
  position:absolute;top:50%;
  width:12px;height:12px;
  background:#fff;
  border-radius:50%;
  transform:translate(-50%,-50%);
  left:0%;
  box-shadow:0 0 8px var(--cyan),0 0 15px var(--magenta);
  opacity:0;transition:opacity 0.2s;
}
.progress-bar:hover .progress-thumb{opacity:1;}

.control-row{
  display:flex;align-items:center;gap:8px;
  justify-content:center;
}
.ctrl-btn{
  width:38px;height:34px;
  background:rgba(0,240,255,0.08);
  border:1px solid rgba(0,240,255,0.4);
  color:var(--cyan);
  font-size:14px;
  cursor:pointer;
  transition:all 0.2s;
  display:flex;align-items:center;justify-content:center;
  border-radius:3px;
}
.ctrl-btn:hover{
  background:rgba(0,240,255,0.2);
  color:#fff;
  box-shadow:0 0 10px var(--cyan);
}
.ctrl-play{
  width:46px;height:40px;font-size:16px;
  background:linear-gradient(135deg,rgba(0,240,255,0.2),rgba(255,0,229,0.2));
  border-color:var(--cyan);
}
.ctrl-btn.active{
  background:rgba(255,0,229,0.25);
  border-color:var(--magenta);
  color:var(--magenta);
  box-shadow:0 0 10px var(--magenta);
}

.volume-group{
  display:flex;align-items:center;gap:5px;
  margin:0 10px;
}
.vol-icon{font-size:13px;}
.volume-slider{
  -webkit-appearance:none;appearance:none;
  width:90px;height:4px;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan) 75%,rgba(0,240,255,0.2) 75%);
  border-radius:2px;
  outline:none;cursor:pointer;
}
.volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px var(--cyan);
  cursor:pointer;
}

/* ============ VIDEO ============ */
.video-wrapper{
  position:relative;
  width:100%;
  background:#000;
  border:1px solid rgba(255,0,229,0.3);
  border-radius:4px;
  overflow:hidden;
  margin-bottom:10px;
  flex-shrink:0;
  aspect-ratio:16/9;
}
.video-element{
  width:100%;height:100%;
  display:block;
  background:#000;
  object-fit:contain;
}
.video-placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#556;font-size:14px;
  background:linear-gradient(135deg,rgba(10,5,20,0.9),rgba(5,0,15,0.95));
  z-index:1;
  gap:10px;
}
.placeholder-icon{font-size:48px;opacity:0.4;}
.video-element[src]:not([src=""]) + .video-placeholder,
.video-element.playing ~ .video-placeholder{display:none;}

.video-controls{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,0.8));
  opacity:0;transition:opacity 0.3s;
  z-index:2;
}
.video-wrapper:hover .video-controls{opacity:1;}
.vctrl-btn{
  background:transparent;border:none;
  color:var(--magenta);font-size:14px;
  cursor:pointer;padding:4px 8px;
  text-shadow:0 0 5px var(--magenta);
}
.vctrl-btn:hover{color:#fff;}
.vprogress{
  flex:1;height:5px;
  background:rgba(255,255,255,0.2);
  border-radius:3px;cursor:pointer;position:relative;
}
.vprogress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--magenta),var(--cyan));
  border-radius:3px;
  box-shadow:0 0 6px var(--magenta);
}
.vtime{font-size:11px;color:#ddd;min-width:85px;text-align:center;}
.vvol-group{display:flex;align-items:center;}
.vvol{
  width:70px;
  background:linear-gradient(90deg,var(--magenta) 0%,var(--magenta) 75%,rgba(255,0,229,0.2) 75%);
}
.vvol::-webkit-slider-thumb{box-shadow:0 0 8px var(--magenta);}

/* ============ EASTER OVERLAY ============ */
.easter-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,0.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
  pointer-events:auto;
}
.easter-overlay .easter-main{
  position:relative;z-index:3;
  font-size:44px;
  letter-spacing:6px;
}
.easter-glitch{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.03) 4px);
  animation:glitchMove 0.15s infinite;
  pointer-events:none;
}
@keyframes glitchMove{
  0%{transform:translate(0,0);}
  25%{transform:translate(-2px,1px);}
  50%{transform:translate(2px,-1px);}
  75%{transform:translate(-1px,2px);}
  100%{transform:translate(1px,-2px);}
}
.easter-overlay canvas#bg-canvas{z-index:0;}
.easter-text{
  position:relative;z-index:3;
  font-family:var(--font-display);
  font-size:42px;font-weight:900;
  text-align:center;
  color:#fff;
  text-shadow:
    3px 0 var(--cyan),-3px 0 var(--magenta),
    0 0 20px #fff,0 0 40px var(--pink);
  letter-spacing:5px;
  animation:easterFlicker 0.4s infinite;
  margin-bottom:30px;
  padding:0 40px;
}
.easter-subtext{
  position:relative;z-index:3;
  font-size:16px;
  color:var(--yellow);
  text-shadow:0 0 10px var(--yellow);
  margin-top:15px;
  letter-spacing:2px;
}
@keyframes easterFlicker{
  0%,100%{opacity:1;}
  50%{opacity:0.85;}
}
.easter-subtext{
  font-family:var(--font-tech);
  font-size:15px;
  font-weight:400;
  color:var(--yellow);
  text-shadow:0 0 10px var(--yellow);
  margin-top:12px;
  letter-spacing:3px;
  animation:easterFlicker 0.6s infinite;
}
.easter-close{
  position:relative;z-index:3;
  margin-top:28px;
}

/* ============ MINI EASTER ============ */
.mini-easter{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:1500;
  pointer-events:none;
  animation:miniExplode 1.5s ease-out forwards;
}
.mini-number{
  font-family:var(--font-display);
  font-size:120px;font-weight:900;
  color:var(--yellow);
  text-shadow:0 0 30px var(--yellow),0 0 60px var(--magenta);
}
@keyframes miniExplode{
  0%{transform:translate(-50%,-50%) scale(0.3);opacity:0;}
  30%{transform:translate(-50%,-50%) scale(1.3);opacity:1;}
  70%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  100%{transform:translate(-50%,-60%) scale(1);opacity:0;}
}

/* ============ CRT / VIGNETTE / FILM GRAIN ============ */
.crt{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:9000;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.03) 0px,
      rgba(0,0,0,0.03) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode:multiply;
}
.vignette{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:8999;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,0.65) 100%);
}
.film-grain{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:8998;pointer-events:none;opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:128px 128px;
  animation:grain 0.5s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-2%,-3%)}
  20%{transform:translate(3%,2%)}
  30%{transform:translate(-1%,3%)}
  40%{transform:translate(2%,-2%)}
  50%{transform:translate(-3%,1%)}
  60%{transform:translate(1%,-1%)}
  70%{transform:translate(-2%,3%)}
  80%{transform:translate(3%,-3%)}
  90%{transform:translate(-1%,2%)}
}

/* ============ CORNER DECORATIONS ============ */
.app::before,.app::after{
  content:'';position:fixed;width:40px;height:40px;
  border-color:var(--cyan);border-style:solid;
  opacity:0.3;z-index:100;pointer-events:none;
}
.app::before{top:6px;left:6px;border-width:2px 0 0 2px;}
.app::after{bottom:6px;right:6px;border-width:0 2px 2px 0;}

/* ============ PANEL ENTRANCE ANIMATION ============ */
@keyframes panelSlideIn{
  0%{opacity:0;transform:translateY(40px) rotateX(15deg) scale(0.95);}
  60%{opacity:1;transform:translateY(-5px) rotateX(-2deg) scale(1.01);}
  100%{opacity:1;transform:translateY(0) rotateX(0) scale(1);}
}
.panel{
  animation:panelSlideIn 0.8s cubic-bezier(0.23,1,0.32,1) both;
}
.panel-audio{animation-delay:0.2s;}
.panel-video{animation-delay:0.4s;}

/* ============ AMBIENT FLOATING ORBS ============ */
.ambient-orb{
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter:blur(80px);
  mix-blend-mode:screen;
  animation:orbFloat 12s ease-in-out infinite;
}
.ambient-orb-1{
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(0,240,255,0.08),transparent 70%);
  top:10%;left:5%;
  animation-delay:0s;
}
.ambient-orb-2{
  width:250px;height:250px;
  background:radial-gradient(circle,rgba(255,0,229,0.06),transparent 70%);
  top:60%;right:8%;
  animation-delay:-4s;
}
.ambient-orb-3{
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(125,252,0,0.04),transparent 70%);
  bottom:15%;left:40%;
  animation-delay:-8s;
}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  25%{transform:translate(30px,-20px) scale(1.1);}
  50%{transform:translate(-20px,30px) scale(0.9);}
  75%{transform:translate(20px,10px) scale(1.05);}
}

/* ============ TOP BAR ENHANCEMENT ============ */
.top-bar{
  transform-style:preserve-3d;
  transition:transform 0.2s ease-out;
  animation:panelSlideIn 0.6s cubic-bezier(0.23,1,0.32,1) both;
}

/* ============ VISUALIZER GLASS EFFECT ============ */
.visualizer{
  border:1px solid rgba(0,240,255,0.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 15px rgba(0,0,0,0.3),
    0 0 20px rgba(0,240,255,0.05);
  background:linear-gradient(180deg,rgba(0,10,20,0.5),rgba(0,5,15,0.6));
  border-radius:4px;
}

/* ============ CONTROL BUTTONS 3D ============ */
.ctrl-btn{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 2px 4px rgba(0,0,0,0.3),
    0 0 0 1px rgba(0,240,255,0.1);
  text-shadow:0 0 8px var(--cyan);
  transition:all 0.15s ease;
}
.ctrl-btn:active{
  transform:scale(0.92) translateY(1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.4),0 0 0 1px rgba(0,240,255,0.1);
}
.ctrl-play{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 3px 8px rgba(0,0,0,0.4),
    0 0 15px rgba(0,240,255,0.1);
}

/* ============ PROGRESS BAR GLOW ============ */
.progress-fill{
  box-shadow:0 0 10px var(--cyan),0 0 20px rgba(0,240,255,0.3),0 0 2px var(--cyan);
  position:relative;
}
.progress-fill::after{
  content:'';
  position:absolute;right:-2px;top:-4px;bottom:-4px;width:4px;
  background:var(--cyan);
  border-radius:2px;
  box-shadow:0 0 8px var(--cyan),0 0 15px var(--cyan);
  animation:progGlow 1.5s ease-in-out infinite;
}
@keyframes progGlow{
  0%,100%{opacity:0.6;box-shadow:0 0 8px var(--cyan),0 0 12px var(--cyan);}
  50%{opacity:1;box-shadow:0 0 12px var(--cyan),0 0 20px var(--cyan);}
}

/* ============ PLAYLIST GLOW ACTIVE ============ */
.playlist-item.active{
  background:linear-gradient(90deg,rgba(0,240,255,0.15),rgba(0,240,255,0.05));
  box-shadow:inset 3px 0 0 var(--cyan),0 0 10px rgba(0,240,255,0.1);
}

/* ============ UPLOAD ZONE DEPTH ============ */
.upload-zone{
  box-shadow:inset 0 2px 10px rgba(0,0,0,0.2);
  transition:all 0.3s ease;
}
.upload-zone:hover{
  box-shadow:inset 0 2px 15px rgba(0,240,255,0.1),0 0 20px rgba(0,240,255,0.1);
  transform:translateZ(15px);
}

/* ============ LOCK SCREEN 3D ============ */
.lock-content{
  transform-style:preserve-3d;
  perspective:800px;
}
.lock-icon{
  transform:translateZ(30px);
  transition:transform 0.3s;
}
.lock-content:hover .lock-icon{
  transform:translateZ(50px) scale(1.1);
}
.lock-text{
  transform:translateZ(15px);
}

/* ============ RESPONSIVE ============ */
@media(max-width:1100px){
  .main-grid{grid-template-columns:1fr;perspective:none;}
  .app{overflow-y:auto;}
  html,body{overflow:auto;}
  .playlist{max-height:140px;}
  .panel{transform:none!important;transform-style:flat;animation:none!important;}
  .panel::before,.panel::after{display:none;}
  .panel-light-strip,.panel-shadow-layer,.panel-edge-glow,.panel-lenticular{display:none;}
  .panel>*{transform:none!important;}
  .ambient-orb{display:none;}
  .top-bar{transform:none!important;transform-style:flat;animation:none!important;}
}