styles.css

/* Dark theme */
*{box-sizing:border-box;font-family:'Hind Madurai',sans-serif;}
html,body{height:100%;margin:0;background:#000;color:#eee;}

header{display:flex;align-items:center;gap:.7rem;padding:.6rem 1rem;}
#logo{height:40px;} 
#title{font-size:1.35rem;font-weight:500;color:#fff;}

#container{display:flex;height:calc(100% - 66px);}
#left{width:40%;padding:1.2rem;}
#right {
    width:55%;
    display:flex;
    flex-direction:column;     /* stack children vertically */
    align-items:center;
    justify-content:flex-start;/* top-align the viewer */
    padding:1rem;
}
  
  

/* Section titles */
h3{margin:.6rem 0;color:#fff;}

/* Dashed separators */
hr.dashed{border:0;border-top:2px dashed #222;margin:1.4rem 0;}

/* Text area */
textarea{
  width:100%;
  background:#111;
  color:#eee;
  border:2px solid #444;
  padding:.6rem;
  margin-bottom:.6rem;
  resize:vertical;
}

/* Drop zone */
.drop-zone{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:220px;
  margin-bottom:1rem;
  cursor:pointer;
  border:2px dashed #444;
  color:#888;
}
.drop-zone.hover{border-color:#bbb;color:#bbb;}
#preview{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}
#dzText{pointer-events:none;}

/* Sliding gallery */
#examplesWrap{
  overflow-x:auto;
  white-space:nowrap;
  margin-bottom:.8rem;
  background:#000;
}
#examples img{
  width:140px;
  height:140px;
  object-fit:cover;
  display:inline-block;
  cursor:pointer;
  border:2px solid #444;
  margin-right:.4rem;
}
#examples img.selected{border:2px solid #0a84ff;}
#examplesWrap::-webkit-scrollbar{height:6px;background:#111;}
#examplesWrap::-webkit-scrollbar-thumb{background:#444;}
#examplesWrap{scrollbar-color:#444 #111;scrollbar-width:thin;}

/* Buttons with gradient animation and cover effect */
button {
  position: relative;
  overflow: hidden;
  padding: .6rem 1.4rem;
  font-size: 1rem;
  border: none;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(45deg, #ff6b6b, #5f27cd, #54a0ff, #1dd1a1);
  background-size: 300% 300%;
  animation: gradientMove 8s ease infinite;
}
button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  opacity: 0;
  transition: opacity 0.4s ease;
}
button:hover::after { opacity: 1; }
button:disabled {
  opacity: .35;
  cursor: not-allowed;
  animation-play-state: paused;
}
@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Status + timer */
#statusLine{margin:1rem 0;font-size:.9rem;display:flex;gap:.6rem;}
#timer{font-variant-numeric:tabular-nums;}

/* Log panel */
pre{
  white-space:pre-wrap;
  background:#111;
  padding:.5rem;
  height:140px;
  overflow:auto;
  border:2px solid #333;
  color:#ddd;
}

/* ─── Panorama viewer ────────────────────────────────────── */
/* Full width of its column, and 60% of the *viewport* height */
/* Wrap the panorama in a fixed-height container */
.viewer-wrap {
    width: 100%;
    height: 60vh;        /* 60% of the viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  }
  
  /* Have the viewer fill its wrapper */
  .viewer {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
#placeholder{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#666;
  }


/* Explore-Forward button / slider block */
#exploreControls{width:100%;margin-top:1rem;text-align:center;}
#exploreBtn{margin-bottom:1rem;}

/* Stylish slider */
#frameSlider{
  appearance:none;width:100%;height:8px;border-radius:4px;background:#333;cursor:pointer;
  outline:none;--fill:#0a84ff; /* progression color */
}
#frameSlider::-webkit-slider-thumb{
  appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(45deg,#ff6b6b,#5f27cd,#54a0ff,#1dd1a1);
  background-size:300% 300%;animation:gradientMove 8s ease infinite;border:none;
}
#frameSlider::-moz-range-thumb{
  width:20px;height:20px;border:none;border-radius:50%;background:linear-gradient(45deg,#ff6b6b,#5f27cd,#54a0ff,#1dd1a1);
  background-size:300% 300%;animation:gradientMove 8s ease infinite;
}


/* styles.css */

.pnlm-load-box,
.pnlm-load-bar,
.pnlm-load-text {
  display: none !important;
}