/* ─── palette & fonts ─────────────────────────── */
:root{
  --bg:#071118;--cyan:#00eaff;--green:#2eff8c;--red:#ff475a;--yellow:#ffd54d;
  --glass:rgba(10,17,23,.72);--outline:rgba(0,234,255,.35);
  --font-head:'Orbitron',sans-serif;--font-body:'Poppins',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-body);}
body{background:var(--bg);height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;}

.download-container {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

/* Download button (no more fixed positioning here) */
.download-btn {
  background: var(--green);
  color: #001410;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(46,255,140,.4);
  transition: transform .13s, box-shadow .13s;
}
.download-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(46,255,140,.6);
}


/* interactive 3-D canvas */
#bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  background:transparent;
  pointer-events:none;          /* ← lets clicks reach the UI */
  touch-action:none;            /* ← smoother mobile panning */
}

/* panel card */
.panel{
  padding:40px 55px;background:var(--glass);border:2px solid var(--outline);
  border-radius:18px;backdrop-filter:blur(9px);text-align:center;
  box-shadow:0 0 22px rgba(0,234,255,.25);
}
.logo{width:90px;margin-bottom:14px}
h1{font-family:var(--font-head);font-size:2.1rem;color:var(--cyan);margin-bottom:28px}

/* buttons */
.controls{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-bottom:36px}
.btn{padding:12px 24px;font-weight:600;border:none;border-radius:14px;cursor:pointer;
     transition:transform .13s,box-shadow .13s}
.btn:hover{transform:translateY(-3px)}
.neon-cyan{background:#03c8f5;color:#001014}
.neon-green{background:var(--green);color:#001410}
.neon-red{background:var(--red);color:#140001}

h2.sub{font-family:var(--font-head);font-size:1.4rem;color:var(--yellow);margin-bottom:20px}
.fan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px}

/* ─── ORB (unchanged) ─── */
@keyframes swirl{0%{transform:rotateX(0)rotateY(0)}100%{transform:rotateX(360deg)rotateY(360deg)}}
.fan-orb{position:relative;width:180px;height:180px;border-radius:50%;perspective:800px;display:flex;align-items:center;justify-content:center}
.fan-orb .core{width:120px;height:120px;border-radius:50%;background:#021018 radial-gradient(circle at 70% 30%,#042033 0%,#000 80%);
               box-shadow:inset 0 0 30px rgba(0,234,255,.15),0 0 20px rgba(0,234,255,.18);
               display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.fan-orb .core::before{content:'';position:absolute;inset:-15px;border-radius:50%;
                       background:conic-gradient(var(--cyan) 0 90deg,transparent 90 180deg,
                                                var(--cyan) 180 270deg,transparent 270 360deg);
                       filter:blur(6px);mix-blend-mode:screen;animation:swirl 10s linear infinite}
.fan-orb.connected .core::after,
.fan-orb.disconnected .core::after{
    content:'';position:absolute;bottom:12px;right:14px;width:12px;height:12px;border-radius:50%}
.fan-orb.connected .core::after{background:var(--green);box-shadow:0 0 8px var(--green)}
.fan-orb.disconnected .core::after{background:var(--red);box-shadow:0 0 8px var(--red)}
.fan-orb h3{font-family:var(--font-head);font-size:1.15rem;color:var(--cyan);z-index:1}
.fan-orb p{font-size:.8rem;color:#c3e2f0;margin-top:4px;z-index:1}

/* toast popup */
#toastStack{position:fixed;top:20px;right:22px;display:flex;flex-direction:column;gap:12px;z-index:9999}
.toast{padding:14px 22px;border-radius:12px;font-weight:500;color:#011;
       background:var(--cyan);box-shadow:0 0 12px rgba(0,234,255,.4);
       animation:fadeIn .3s ease, fadeOut .3s ease 4.2s forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes fadeOut{to{opacity:0;transform:translateY(-10px)}}

/* upload line */
.upload{display:flex;gap:14px;justify-content:center;margin-bottom:28px}
.url-input{
  flex:1;min-width:260px;padding:12px 14px;border-radius:12px;border:none;
  font-size:.95rem;outline:none;
  background:#0f1d25;color:#cde8f5;
  border:2px solid var(--outline);
}
.url-input:disabled{opacity:.35;cursor:not-allowed}

/* disabled button */
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important;box-shadow:none;}