:root {
  --bg: #080b12;
  --bg2: #0d1120;
  --surface: #111827;
  --surface2: #1a2235;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.13);
  --accent: #4DFFC3;
  --accent2: #7B5EFF;
  --text: #E8EDF5;
  --text2: #8090A8;
  --text3: #3A4A5E;
  --radius: 14px;
  --radius-sm: 9px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{background:var(--bg);color:var(--text);font-family:'Syne',sans-serif;}

/* NOISE */
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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");}

#bg{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* TOPBAR */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;height:56px;
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;
  background:rgba(8,11,18,0.9);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);}

.logo{display:flex;align-items:center;gap:10px;}
.logo-hex{width:24px;height:24px;background:var(--accent);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  box-shadow:0 0 14px var(--accent);animation:hpulse 3s ease-in-out infinite;}
@keyframes hpulse{0%,100%{box-shadow:0 0 10px var(--accent);}50%{box-shadow:0 0 26px var(--accent),0 0 50px rgba(77,255,195,0.25);}}
.logo-text{font-size:1.2rem;font-weight:800;letter-spacing:-0.02em;}
.logo-accent{color:var(--accent);}

.topnav{display:flex;align-items:center;gap:10px;}
.nav-pill{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:50px;
  background:var(--surface);border:1px solid var(--border);font-size:0.71rem;color:var(--text2);}
.nav-pill.mono{font-family:'DM Mono',monospace;}
.nav-badge{padding:4px 10px;border-radius:50px;font-size:0.63rem;font-weight:700;letter-spacing:0.1em;
  background:linear-gradient(135deg,var(--accent2),#FF5E8A);}

.dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.dot.green{background:var(--accent);}
.dot.green.pulse{animation:dpulse 2s ease-in-out infinite;}
@keyframes dpulse{0%,100%{box-shadow:0 0 0 0 rgba(77,255,195,0.6);}50%{box-shadow:0 0 0 5px rgba(77,255,195,0);}}
.mono{font-family:'DM Mono',monospace;}

/* LAYOUT */
.layout{position:relative;z-index:10;display:grid;grid-template-columns:320px 1fr;
  height:100vh;padding-top:56px;}

/* LEFT PANEL */
.panel-left{background:var(--bg2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:20px 18px;gap:16px;
  overflow-y:auto;}
.panel-left::-webkit-scrollbar{width:3px;}
.panel-left::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}

.section-label{font-family:'DM Mono',monospace;font-size:0.62rem;letter-spacing:0.15em;
  color:var(--text3);font-weight:500;}

/* UPLOAD ZONE */
.upload-zone{border:1px dashed var(--border2);border-radius:var(--radius);
  padding:24px 16px;text-align:center;cursor:pointer;
  background:rgba(77,255,195,0.02);transition:all 0.3s;}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent);background:rgba(77,255,195,0.05);}

.upload-anim{position:relative;width:64px;height:64px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;}
.u-ring{position:absolute;border-radius:50%;border:1px solid var(--accent);
  opacity:0.15;animation:uring 3s ease-out infinite;}
.r1{width:100%;height:100%;animation-delay:0s;}
.r2{width:60%;height:60%;animation-delay:1.5s;}
@keyframes uring{0%{transform:scale(0.8);opacity:0.25;}100%{transform:scale(1.3);opacity:0;}}
.u-core{width:40px;height:40px;z-index:2;background:var(--surface2);
  border-radius:10px;border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;padding:9px;color:var(--accent);}

.upload-heading{font-size:0.95rem;font-weight:700;margin-bottom:5px;}
.upload-sub{font-size:0.74rem;color:var(--text2);margin-bottom:16px;font-family:'DM Mono',monospace;}

.btn-upload{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;
  background:linear-gradient(135deg,var(--accent),rgba(77,255,195,0.75));
  color:#050b10;border:none;border-radius:var(--radius-sm);
  font-family:'Syne',sans-serif;font-weight:700;font-size:0.85rem;
  cursor:pointer;transition:all 0.25s;box-shadow:0 0 18px rgba(77,255,195,0.18);}
.btn-upload:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(77,255,195,0.38);}
.btn-upload svg{width:15px;height:15px;}

/* PROGRESS */
.progress-box{background:var(--surface);border-radius:var(--radius);
  border:1px solid var(--border);padding:16px;}
.pb-header{display:flex;justify-content:space-between;margin-bottom:10px;}
.pb-label{font-size:0.78rem;color:var(--text2);}
.pb-pct{font-size:0.78rem;color:var(--accent);}
.pb-track{height:3px;background:var(--surface2);border-radius:3px;overflow:hidden;margin-bottom:14px;}
.pb-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent2),var(--accent));
  border-radius:3px;transition:width 0.3s ease;box-shadow:0 0 10px var(--accent);}
.pb-steps{display:flex;gap:0;}
.pb-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:0.61rem;color:var(--text3);font-family:'DM Mono',monospace;transition:color 0.3s;}
.pb-step.active{color:var(--accent);}
.pb-step.done{color:var(--text2);}
.step-node{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--text3);transition:all 0.3s;}
.pb-step.active .step-node{border-color:var(--accent);background:var(--accent);box-shadow:0 0 7px var(--accent);}
.pb-step.done .step-node{border-color:var(--text2);background:var(--text2);}

/* GALLERY */
.gallery{display:flex;flex-direction:column;gap:8px;flex:1;}

.gallery-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);cursor:pointer;
  transition:all 0.2s;position:relative;
}
.gallery-item:hover{border-color:var(--border2);background:var(--surface2);}
.gallery-item.active{border-color:var(--accent);background:rgba(77,255,195,0.05);}

.gi-thumb{
  width:36px;height:36px;border-radius:7px;
  background:var(--surface2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:1rem;flex-shrink:0;
}
.gi-info{flex:1;min-width:0;}
.gi-name{font-size:0.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gi-meta{font-size:0.64rem;color:var(--text2);font-family:'DM Mono',monospace;margin-top:2px;}

.gi-del{
  width:26px;height:26px;border-radius:6px;
  background:transparent;border:1px solid transparent;
  color:var(--text3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;flex-shrink:0;
}
.gi-del:hover{border-color:rgba(255,80,80,0.4);background:rgba(255,80,80,0.08);color:#ff6060;}
.gi-del svg{width:13px;height:13px;}

.panel-footer{font-size:0.62rem;color:var(--text3);text-align:center;
  margin-top:auto;padding-top:10px;border-top:1px solid var(--border);}

/* RIGHT PANEL */
.panel-right{display:flex;flex-direction:column;background:var(--bg);overflow:hidden;}

/* EMPTY STATE */
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:40px;}

.e-cube-wrap{position:relative;width:80px;height:80px;margin-bottom:8px;}
.e-cube{width:60px;height:60px;transform-style:preserve-3d;
  animation:cspin 8s linear infinite;margin:0 auto;position:relative;}
@keyframes cspin{from{transform:rotateX(-25deg)rotateY(0deg);}to{transform:rotateX(-25deg)rotateY(360deg);}}
.cf{position:absolute;width:60px;height:60px;
  border:1px solid rgba(77,255,195,0.18);background:rgba(77,255,195,0.02);}
.cf.front{transform:translateZ(30px);}
.cf.back{transform:rotateY(180deg)translateZ(30px);}
.cf.left{transform:rotateY(-90deg)translateZ(30px);}
.cf.right{transform:rotateY(90deg)translateZ(30px);}
.cf.top{transform:rotateX(90deg)translateZ(30px);}
.cf.bottom{transform:rotateX(-90deg)translateZ(30px);}
.e-shadow{width:60px;height:8px;background:radial-gradient(ellipse,rgba(77,255,195,0.12),transparent);
  margin:4px auto 0;border-radius:50%;}

.empty-title{font-size:1rem;font-weight:700;color:var(--text2);}
.empty-sub{font-size:0.78rem;color:var(--text3);font-family:'DM Mono',monospace;}
.empty-hint{font-size:0.7rem;color:var(--text3);padding:7px 16px;
  border:1px solid var(--border);border-radius:50px;font-family:'DM Mono',monospace;}

/* VIEWER AREA */
.viewer-area{flex:1;display:flex;flex-direction:column;padding:20px;gap:16px;overflow-y:auto;}
.viewer-area::-webkit-scrollbar{width:3px;}
.viewer-area::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}

.viewer-container{position:relative;background:var(--surface);
  border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;flex-shrink:0;}
.viewer-topbar{display:flex;justify-content:space-between;align-items:center;
  padding:9px 14px;background:rgba(0,0,0,0.3);border-bottom:1px solid var(--border);}
.vtb-left{display:flex;align-items:center;gap:7px;font-size:0.7rem;}
.vtb-right{font-size:0.7rem;color:var(--text3);}

.vc{position:absolute;width:14px;height:14px;border-color:var(--accent);border-style:solid;opacity:0.5;}
.vc-tl{top:40px;left:7px;border-width:2px 0 0 2px;}
.vc-tr{top:40px;right:7px;border-width:2px 2px 0 0;}
.vc-bl{bottom:7px;left:7px;border-width:0 0 2px 2px;}
.vc-br{bottom:7px;right:7px;border-width:0 2px 2px 0;}

/* INFO ROW */
.info-row{display:flex;gap:14px;align-items:flex-start;}

.icard{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;}
.icard-label{font-family:'DM Mono',monospace;font-size:0.6rem;
  letter-spacing:0.15em;color:var(--text3);margin-bottom:12px;}

/* LINK CARD */
.link-icard{flex:1;}
.link-display{font-size:0.68rem;color:var(--text2);background:var(--surface2);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:9px 12px;word-break:break-all;line-height:1.5;margin-bottom:10px;}
.link-btns{display:flex;gap:8px;margin-bottom:14px;}

.act-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:var(--radius-sm);color:var(--text2);
  font-family:'Syne',sans-serif;font-size:0.78rem;font-weight:600;
  cursor:pointer;transition:all 0.2s;}
.act-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(77,255,195,0.06);}
.act-btn svg{width:14px;height:14px;}

.copy-toast{font-size:0.7rem;color:var(--accent);opacity:0;transition:opacity 0.3s;
  font-family:'DM Mono',monospace;height:16px;}
.copy-toast.show{opacity:1;}

/* STATS MINI */
.stats-mini{border-top:1px solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:6px;}
.sm-row{display:flex;justify-content:space-between;font-size:0.74rem;}
.sm-row span:first-child{color:var(--text2);}
.sm-row .mono{color:var(--text);}
.stat-ok{color:var(--accent);font-family:'DM Mono',monospace;font-size:0.74rem;}

/* QR CARD */
.qr-icard{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0;width:180px;}
.qr-wrap{background:#fff;border-radius:10px;padding:10px;display:flex;align-items:center;justify-content:center;}
.qr-wrap canvas,.qr-wrap img{display:block!important;}
.qr-sub{font-size:0.63rem;color:var(--text3);}

/* GLOBAL TOAST */
.g-toast{position:fixed;bottom:22px;right:22px;z-index:999;
  background:var(--surface2);color:var(--text);
  border:1px solid var(--border2);border-radius:var(--radius-sm);
  padding:11px 18px;font-size:0.78rem;
  transform:translateY(70px);opacity:0;
  transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);pointer-events:none;}
.g-toast.show{transform:translateY(0);opacity:1;}

.hidden{display:none!important;}

body.drag-active .upload-zone{border-color:var(--accent);background:rgba(77,255,195,0.07);}

::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:3px;}
/* QR Download Button */
.qr-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text2);
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qr-download-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(77, 255, 195, 0.08);
}

.qr-download-btn svg {
  width: 14px;
  height: 14px;
}
:root {
  --bg: #080b12;
  --bg2: #0d1120;
  --surface: #111827;
  --surface2: #1a2235;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.13);
  --accent: #4DFFC3;
  --accent2: #7B5EFF;
  --text: #E8EDF5;
  --text2: #8090A8;
  --text3: #3A4A5E;
  --radius: 14px;
  --radius-sm: 9px;
}

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

/* ✅ FIXED SCROLL */
html, body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Syne',sans-serif;
}

/* BACKGROUND */
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.025;}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* TOPBAR */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  background:rgba(8,11,18,0.9);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}

/* LAYOUT FIX */
.layout{
  display:grid;
  grid-template-columns:320px 1fr;
  padding-top:56px;
  min-height:100vh;
}

/* LEFT PANEL */
.panel-left{
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:16px;
  gap:12px;
}

/* RIGHT PANEL */
.panel-right{
  display:flex;
  flex-direction:column;
}

/* VIEWER */
#viewer{
  width:100%;
  height:360px;
}

/* INFO */
.info-row{
  display:flex;
  gap:12px;
}

.qr-icard{
  width:180px;
}

/* GALLERY */
.gallery{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* BUTTON FIX */
.btn-upload{
  width:100%;
  justify-content:center;
}

/* ========================= */
/* 📱 MOBILE RESPONSIVE */
/* ========================= */

@media (max-width: 768px){

  .layout{
    display:block;
  }

  .panel-left{
    width:100%;
    border-right:none;
    border-bottom:1px solid var(--border);
  }

  .panel-right{
    width:100%;
  }

  #viewer{
    height:260px;
  }

  .info-row{
    flex-direction:column;
  }

  .qr-icard{
    width:100%;
  }

  .topbar{
    padding:0 10px;
  }

  body{
    font-size:14px;
  }

}

/* EXTRA SMALL */
@media (max-width: 480px){

  #viewer{
    height:220px;
  }

}