:root{
  --bg: #0b0d12;
  --panel: rgba(20,22,28,.7);
  --accent: #4f8cff;
  --accent-2: #7c5cff;
  --text: #eef1f6;
  --text-dim: #9aa3b2;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;
  overscroll-behavior:none;
}

.hidden{display:none !important;}

/* ---------- Dropzone ---------- */
.dropzone{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow-y:auto;
  background:
    radial-gradient(circle at 20% 20%, rgba(124,92,255,.18), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(79,140,255,.18), transparent 45%),
    var(--bg);
  padding:24px;
  transition:background .2s ease;
}

.dropzone.dragover{
  background:
    radial-gradient(circle at 20% 20%, rgba(124,92,255,.32), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(79,140,255,.32), transparent 45%),
    var(--bg);
}

.dropzone-inner{
  max-width:480px;
  width:100%;
  text-align:center;
  padding:48px 32px;
  border:1.5px dashed rgba(255,255,255,.18);
  border-radius:20px;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(6px);
}

.dz-icon{
  width:56px;
  height:56px;
  color:var(--accent);
  margin-bottom:8px;
}

.dropzone-inner h1{
  font-size:1.4rem;
  margin:12px 0 8px;
  font-weight:600;
}

.dropzone-inner p{
  color:var(--text-dim);
  font-size:.92rem;
  line-height:1.5;
  margin:0 0 22px;
}

.btn-primary{
  appearance:none;
  border:none;
  border-radius:999px;
  padding:13px 28px;
  font-size:.98rem;
  font-weight:600;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  cursor:pointer;
  box-shadow:0 8px 24px rgba(79,140,255,.3);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(79,140,255,.4);}
.btn-primary:active{transform:translateY(0);}

.hint{
  margin-top:16px !important;
  font-size:.78rem !important;
  color:rgba(255,255,255,.35) !important;
}

/* ---------- Project library (continue an earlier project) ---------- */
.project-library{
  max-width:480px;
  width:100%;
  margin-top:28px;
  animation:splash-rise .4s ease both;
}
.project-library h2{
  font-size:.85rem;
  font-weight:600;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin:0 0 12px;
  text-align:left;
}
.project-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:260px;
  overflow-y:auto;
}
.project-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition:background .15s ease, transform .1s ease;
  text-align:left;
}
.project-card:hover{background:rgba(255,255,255,.09); transform:translateY(-1px);}
.project-card:active{transform:translateY(0);}

.project-thumb{
  width:52px;
  height:52px;
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.project-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

.project-info{flex:1; min-width:0;}
.project-title{
  font-size:.88rem;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.project-date{
  font-size:.72rem;
  color:var(--text-dim);
  margin-top:2px;
}

.project-remove{
  width:28px;
  height:28px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.06);
  color:var(--text-dim);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
}
.project-remove:hover{background:rgba(255,80,80,.25); color:#fff;}

/* ---------- Viewer ---------- */
.viewer{
  position:fixed;
  inset:0;
  background:#000;
}

#scene{
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
  cursor:grab;
}
#scene:active{cursor:grabbing;}

.loading{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:rgba(0,0,0,.55);
  color:var(--text-dim);
  font-size:.85rem;
  z-index:5;
}

.spinner{
  width:34px;
  height:34px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg);}}

.drag-hint{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(20,22,28,.6);
  backdrop-filter:blur(6px);
  color:var(--text-dim);
  font-size:.78rem;
  padding:8px 16px;
  border-radius:999px;
  pointer-events:none;
  opacity:1;
  transition:opacity .6s ease;
  z-index:4;
}
.drag-hint.faded{opacity:0;}

/* ---------- Hotspots ---------- */
.hotspot-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
}

.hotspot-marker{
  position:absolute;
  top:0;
  left:0;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  cursor:pointer;
  will-change:transform;
}

.hotspot-marker .ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:rgba(79,140,255,.35);
  animation:hs-pulse 1.8s ease-out infinite;
}

.hotspot-marker .dot{
  position:relative;
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 2px 10px rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
}

.hotspot-marker .dot svg{
  width:9px;
  height:9px;
  color:#fff;
}

.hotspot-marker.type-photo .dot{background:linear-gradient(135deg,#20c2a6,#0ea5e9);}
.hotspot-marker.type-photo .ring{background:rgba(32,194,166,.35);}
.hotspot-marker.type-info .dot{background:linear-gradient(135deg,#ffb020,#ff7a1e);}
.hotspot-marker.type-info .ring{background:rgba(255,176,32,.35);}

.hotspot-marker.is-new{
  animation:hs-pop .4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes hs-pulse{
  0%{ transform:scale(.5); opacity:.55; }
  100%{ transform:scale(1.9); opacity:0; }
}

@keyframes hs-pop{
  0%{ transform:scale(0); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}

.transition-fade{
  position:absolute;
  inset:0;
  background:#000;
  opacity:0;
  pointer-events:none;
  transition:opacity .32s ease;
  z-index:8;
}
.transition-fade.show{opacity:1;}

.toolbar{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  padding:8px;
  background:var(--panel);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  z-index:6;
}

.tbtn{
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.06);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
.tbtn svg{width:20px;height:20px;}
.tbtn:hover{background:rgba(255,255,255,.14);}
.tbtn:active{transform:scale(.92);}
.tbtn.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));}
.tbtn:disabled{opacity:.45;cursor:default;}
.tbtn.busy svg{animation:tbtn-spin .8s linear infinite;}

@keyframes tbtn-spin{to{transform:rotate(360deg);}}

.tbar-sep{
  width:1px;
  align-self:stretch;
  background:rgba(255,255,255,.12);
  margin:4px 2px;
}

/* Read-only (shared/customer) mode: hide editing controls */
body.readonly .editor-only{display:none !important;}

/* ---------- Toast ---------- */
.toast{
  position:absolute;
  left:50%;
  bottom:82px;
  transform:translateX(-50%) translateY(8px);
  max-width:88vw;
  background:rgba(20,22,28,.85);
  backdrop-filter:blur(8px);
  color:var(--text);
  font-size:.82rem;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  z-index:9;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Splash (branded loading screen) ---------- */
.splash{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:linear-gradient(160deg,#ff8a1e,#ff5b1e 55%,#e6420f);
  color:#fff;
  transition:opacity .5s ease, visibility .5s ease;
}
.splash.hide{opacity:0; visibility:hidden; pointer-events:none;}

.splash-badge{
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
  animation:splash-pop .6s cubic-bezier(.34,1.56,.64,1);
}
.splash-badge svg{width:32px;height:32px;color:#fff;}

.splash-title{
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:.02em;
  animation:splash-rise .5s ease .1s both;
}
.splash-sub{
  font-size:.9rem;
  color:rgba(255,255,255,.85);
  animation:splash-rise .5s ease .2s both;
}
.splash-spinner{
  margin-top:18px;
  width:30px;
  height:30px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  animation:spin .8s linear infinite;
}

@keyframes splash-pop{
  0%{transform:scale(.5); opacity:0;}
  100%{transform:scale(1); opacity:1;}
}
@keyframes splash-rise{
  0%{transform:translateY(10px); opacity:0;}
  100%{transform:translateY(0); opacity:1;}
}

/* ---------- Long-press ring ---------- */
.press-ring{
  position:absolute;
  width:56px;
  height:56px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:7;
}
.press-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.press-ring circle{
  fill:none;
  stroke:#fff;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:119.4;
  stroke-dashoffset:119.4;
}
.press-ring.animate circle{
  animation:press-ring-fill .48s linear forwards;
}
@keyframes press-ring-fill{
  to{stroke-dashoffset:0;}
}

/* ---------- Long-press type menu ---------- */
.type-menu{
  position:absolute;
  z-index:7;
  display:flex;
  gap:8px;
  padding:8px;
  background:var(--panel);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  transform:translate(-50%,-115%) scale(.85);
  opacity:0;
  transition:opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.type-menu.show{
  opacity:1;
  transform:translate(-50%,-115%) scale(1);
  pointer-events:auto;
}
.type-opt{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:72px;
  padding:10px 6px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
  font-size:.68rem;
  transition:background .15s ease, transform .1s ease;
}
.type-opt:hover{background:rgba(255,255,255,.12);}
.type-opt:active{transform:scale(.94);}
.type-opt-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;
  align-items:center;
  justify-content:center;
}
.type-opt-icon svg{width:18px;height:18px;color:#fff;}

/* ---------- Description entry panel ---------- */
.desc-panel, .info-panel{
  position:absolute;
  inset:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(6,7,10,0);
  transition:background .25s ease;
  pointer-events:none;
}
.desc-panel.show, .info-panel.show{
  background:rgba(6,7,10,.6);
  pointer-events:auto;
}
.desc-panel.hidden, .info-panel.hidden{display:none;}

.desc-card{
  width:min(92vw,380px);
  background:#171a20;
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:20px;
  transform:scale(.9) translateY(14px);
  opacity:0;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
}
.desc-panel.show .desc-card{transform:scale(1) translateY(0); opacity:1;}

.desc-card h3{margin:0 0 12px; font-size:1.05rem;}
.desc-card textarea{
  width:100%;
  min-height:100px;
  resize:vertical;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:var(--text);
  font-family:inherit;
  font-size:.9rem;
  padding:12px;
}
.desc-card textarea:focus{outline:1.5px solid var(--accent);}

.desc-photo-row{margin-top:12px;}
.desc-photo-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:rgba(255,255,255,.05);
  border:1px dashed rgba(255,255,255,.2);
  border-radius:12px;
  color:var(--text-dim);
  font-size:.82rem;
  cursor:pointer;
}
.desc-photo-btn svg{width:18px;height:18px;flex-shrink:0;}
.desc-photo-btn.has-photo{color:var(--accent);border-color:var(--accent);}

.desc-actions{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.desc-btn{
  padding:9px 18px;
  border-radius:999px;
  border:none;
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
}
.desc-btn.ghost{background:rgba(255,255,255,.08); color:var(--text);}
.desc-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;}

/* ---------- Info / photo view panel ---------- */
.info-card{
  width:min(92vw,420px);
  max-height:82vh;
  overflow:auto;
  background:#171a20;
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:18px;
  position:relative;
  transform:scale(.9) translateY(14px);
  opacity:0;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
}
.info-panel.show .info-card{transform:scale(1) translateY(0); opacity:1;}

.info-close{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.08);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.info-close svg{width:16px;height:16px;}

.info-img{
  width:100%;
  border-radius:12px;
  margin-bottom:12px;
  display:block;
}
.info-text{
  margin:0;
  font-size:.92rem;
  line-height:1.55;
  color:var(--text);
  white-space:pre-wrap;
}

@media (max-width:520px){
  .dropzone-inner{padding:36px 22px;}
  .dropzone-inner h1{font-size:1.2rem;}
  .toolbar{bottom:16px;gap:6px;padding:6px;}
  .tbtn{width:40px;height:40px;}
  .toast{bottom:76px; font-size:.76rem; padding:8px 14px;}
  .type-opt{width:62px; font-size:.62rem;}
  .desc-card, .info-card{padding:16px;}
}