@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{
  --panel-w: 440px;
  --radius: 30px;
  --field-radius: 18px;
  --progress-w: 360px;
  --progress-h: 10px;
  --font: Inter, sans-serif;
  --text:#fff;
  --muted:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.16);
  --panel:rgba(0,0,0,.42);
  --blue:#53b8ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;font-family:var(--font);color:var(--text);background:#000}
body{position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 100%,rgba(0,140,255,.24),transparent 28%),radial-gradient(circle at 72% 86%,rgba(0,140,255,.12),transparent 12%),linear-gradient(to bottom,#000 0%,#000 64%,#031628 100%);z-index:0}
body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:42vh;background:radial-gradient(circle,rgba(0,140,255,.65) 1px,transparent 1.6px);background-size:16px 16px;opacity:.22;filter:blur(1px);z-index:0;pointer-events:none}
a{color:#fff;text-decoration:none}
button,input{font:inherit}
.page-shell{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;z-index:1}
.logo-link{position:fixed;top:28px;left:28px;z-index:30;display:inline-flex;cursor:pointer}
.logo-link:hover{opacity:.92}
.logo-link img{height:56px;width:auto;display:block}
.card,.upload-panel,.industry-tile,.project-wrap{position:relative}
.card{
  width:min(var(--panel-w), calc(100vw - 48px));
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(12px);
  border:1px solid var(--line);
  border-radius:30px;
  padding:34px 34px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.title{font-size:34px;line-height:.98;font-weight:600;letter-spacing:-.04em;text-align:center;margin:0 0 16px}
.subtitle{text-align:center;font-size:13px;color:var(--muted);margin:0 0 22px;line-height:1.5}
.subtitle a,.footer-link{color:var(--blue)}
.label,.project-heading,.project-subheading,.upload-title{
  display:block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)
}
.label{margin:14px 0 8px}
.text-input,.project-input{
  width:100%;height:52px;border-radius:18px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:#fff;padding:0 18px;font-size:15px;outline:none
}
.text-input::placeholder,.project-input::placeholder{color:rgba(255,255,255,.5)}
.text-input:focus,.project-input:focus{border-color:rgba(83,184,255,.45);box-shadow:0 0 0 3px rgba(83,184,255,.08)}
.primary-btn,.next-btn,.done-btn,.skip-btn{
  display:inline-flex;align-items:center;justify-content:center;height:46px;min-width:160px;padding:0 24px;
  border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none
}
.primary-btn:hover,.next-btn:hover,.done-btn:hover,.skip-btn:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
.primary-btn{width:100%;margin-top:22px;background:#fff;color:#000;border-color:#fff}
.primary-btn:hover{background:#fff;color:#000;opacity:.95}
.footer-link{display:block;text-align:center;margin-top:16px;font-size:14px;font-weight:500}
.error-note{min-height:18px;text-align:center;color:#ff8c8c;font-size:12px;margin:8px 0 0}
.project-wrap{width:min(760px, calc(100vw - 64px))}
.project-heading{
  color:#fff !important;
  font-size:34px !important;
  letter-spacing:-.04em !important;
  text-transform:none !important;
  font-weight:500 !important;
  margin:0 0 8px !important;
}
.project-subheading{margin:0 0 18px;font-weight:400}
.project-actions{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.progress{width:var(--progress-w);height:var(--progress-h);border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.progress > span{display:block;height:100%;border-radius:999px;background:#fff}
.bottom-progress{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:10}
.industry-page{padding-top:20px}
.industry-grid{width:min(760px, calc(100vw - 56px));display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:24px;align-items:start}
.industry-tile,.industry-card{
  width:100%;background:rgba(0,0,0,.42);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:30px;
  overflow:hidden;cursor:pointer;padding:0;transition:transform .18s ease,border-color .18s ease, background .18s ease;display:block
}
.industry-tile:hover,.industry-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.industry-image-wrap{aspect-ratio:1.35 / 1;overflow:hidden;background:rgba(255,255,255,.03)}
.industry-image-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.industry-copy{padding:18px 20px 20px;text-align:center}
.industry-label{display:block;font-size:14px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:#fff}
.upload-page{justify-content:center;padding-top:40px}
.upload-panel{width:min(560px, calc(100vw - 48px));border:1px solid var(--line);border-radius:30px;padding:24px 26px 26px;background:rgba(0,0,0,.42);backdrop-filter:blur(12px)}
.upload-title{text-align:center;margin:0 0 18px}
.drop-zone{position:relative;min-height:320px;border:1px dashed rgba(255,255,255,.28);border-radius:24px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;z-index:20}
.drop-zone.dragover{border-color:#7fd0ff;box-shadow:0 0 0 3px rgba(80,180,255,.18) inset}
.upload-icon-btn{background:none;border:none;padding:0;cursor:pointer;width:100%;display:flex;justify-content:center;z-index:30}
.upload-icon-btn img{display:none}
.upload-icon-btn::before{content:'+';display:grid;place-items:center;width:92px;height:92px;border-radius:999px;background:transparent;border:none;box-shadow:none;color:rgba(255,255,255,.92);font-size:72px;font-weight:300;line-height:1}
.drop-zone h3{margin:0;font-size:16px}
.drop-zone p{margin:0;font-size:12px;color:var(--muted)}
.local-note,.viewer-hud{display:none !important}
.drop-zone p:last-of-type{display:block !important}
.file-warning{display:block !important;color:var(--muted);max-width:420px;line-height:1.45}
.file-name{min-height:18px;font-size:12px;margin-top:14px;text-align:center;color:var(--muted)}
.upload-actions{display:flex;justify-content:center;margin-top:18px}
.done-btn{min-width:160px}
.viewer-page{background:#000}
#viewerCanvas{position:fixed;inset:0;width:100%;height:100%;display:none;z-index:2}
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:50;background:rgba(0,0,0,.35)}
.overlay img{max-width:min(780px, 78vw);max-height:78vh;width:auto;height:auto;display:block}
.instructions-wrap{position:relative}
.instructions-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border:none;background:transparent;color:#fff;cursor:pointer;font-size:28px;line-height:1}
.local-note{position:fixed;right:14px;bottom:14px;z-index:60;background:rgba(0,0,0,.7);color:#fff;padding:10px 12px;border-radius:12px;font-size:11px;display:none}
.overlay-panel{width:min(560px, calc(100vw - 48px));min-height:280px;border:1px solid rgba(94,190,255,.45);border-radius:24px;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 28px 24px}
.overlay-dark{background:rgba(0,0,0,.8)}
.overlay-title{margin:0 0 20px;color:#64c5ff;font-size:22px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.overlay-symbol{width:88px;height:88px;display:flex;align-items:center;justify-content:center;color:#57bfff;font-size:42px;line-height:1;margin-bottom:22px;clip-path: polygon(50% 2%, 97% 86%, 3% 86%);border:4px solid #57bfff;border-radius:0}
.retry-btn{min-width:220px;height:46px;border:1px solid rgba(94,190,255,.45);border-radius:999px;background:rgba(255,255,255,.04);color:#fff;font-size:12px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.debug-box{position:fixed;left:18px;bottom:18px;z-index:61;max-width:min(560px, calc(100vw - 36px));background:rgba(0,0,0,.84);border:1px solid rgba(94,190,255,.45);border-radius:12px;padding:12px 14px;color:#9ddcff;font-size:12px;line-height:1.45;white-space:pre-wrap;display:none}
.loading-box{width:min(560px, calc(100vw - 48px));border:1px solid rgba(94,190,255,.45);border-radius:24px;background:rgba(0,0,0,.88);padding:28px 28px 26px;text-align:center}
.loading-bar{width:100%;height:18px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin:14px auto 0}
.loading-bar > span{display:block;width:35%;height:100%;background:linear-gradient(90deg, #39a9ff 0%, #9ee0ff 50%, #39a9ff 100%);border-radius:999px;animation: loadingSlide 1.35s ease-in-out infinite;transform:translateX(-110%)}
.loading-status{margin-top:10px;font-size:12px;color:#9ddcff}
@keyframes loadingSlide{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}
@media (max-width: 900px){.industry-grid{grid-template-columns:1fr;gap:20px}.project-wrap{width:min(720px, calc(100vw - 42px))}}
@media (max-width: 640px){.logo-link img{height:44px}.card{padding:28px 24px 20px}.title{font-size:28px}.footer-link{font-size:13px}.project-wrap{width:calc(100vw - 38px)}.project-actions{flex-direction:column;align-items:flex-start}.progress{width:min(var(--progress-w), 100%)}.upload-panel{width:calc(100vw - 34px)}}

.overlay-actions{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;}
.overlay-panel .ghost-btn{min-width:120px;}


/* added help widget for auth/onboarding */
.support-widget{
  position:fixed;right:24px;bottom:24px;display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(255,255,255,.25);background:#fff;color:#000;border-radius:999px;
  padding:10px 16px 10px 12px;text-decoration:none;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;box-shadow:0 8px 24px rgba(0,0,0,.28);z-index:40;
}
.support-widget img{width:18px;height:18px}
.help-menu{
  position:fixed;right:24px;bottom:78px;width:220px;background:rgba(0,0,0,.92);
  border:1px solid var(--line);border-radius:20px;padding:12px;display:none;z-index:41;
}
.help-menu.open{display:block}
.help-menu a{display:block;color:#fff;text-decoration:none;padding:12px 10px;border-radius:12px;
  text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.help-menu a:hover{background:rgba(255,255,255,.06)}

.password-strength-wrap{margin-top:14px}
.password-strength-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12px;color:var(--muted);margin-bottom:8px}
.password-strength-head strong{color:#fff;font-weight:600;font-size:12px}
.password-strength{height:10px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden}
.password-strength span{display:block;height:100%;width:20%;background:#ff9b8d;border-radius:999px;transition:width .2s ease, background .2s ease}

.project-heading{
  color:#fff !important;
  font-size:34px !important;
  letter-spacing:-.04em !important;
  text-transform:none !important;
  font-weight:500 !important;
  margin:0 0 8px !important;
}
.project-subheading{margin:0 0 18px !important}
.skip-later-btn{
  display:inline-block;
  color:var(--blue);
  margin-top:14px;
  margin-bottom:14px;
  font-size:14px;
  text-decoration:none;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  box-shadow:none !important;
}
.skip-later-btn:hover{text-decoration:underline}
.project-actions-project-name{
  justify-content:flex-end !important;
}
.project-actions-project-name .next-btn{
  min-width:160px;
}
.project-wrap{
  padding-bottom:88px;
}
.project-wrap > .bottom-progress{
  position:fixed;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
}
@media (max-width:640px){
  .support-widget{right:14px;bottom:14px}
  .help-menu{right:14px;bottom:66px}
  .project-heading{font-size:28px !important}
}

.password-strength-wrap{margin-top:14px}
.password-strength-head{display:flex;align-items:center;justify-content:flex-start;gap:10px;font-size:12px;color:var(--muted);margin-bottom:0}
.password-strength-head strong{color:#fff !important;font-weight:600;font-size:12px}
.password-strength{display:none !important}
.error-note{color:#fff;margin-top:10px;min-height:18px;font-size:12px}
.primary-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

.primary-btn[disabled]{opacity:.5;cursor:not-allowed}
.password-strength{display:none !important}


.retry-secondary{
  min-width:140px;
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
}

.viewer-toolbar{
  position:fixed;
  top:28px;
  right:28px;
  z-index:55;
  display:none;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:min(720px, calc(100vw - 48px));
}
.viewer-tool-btn{
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.58);
  color:#fff;
  padding:0 18px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(10px);
}
.viewer-tool-btn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(83,184,255,.4);
}
.media-panel{
  width:min(760px, calc(100vw - 40px));
  min-height:auto;
  align-items:stretch;
  text-align:left;
}
.media-form-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  width:100%;
}
.media-form-grid label{
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#fff;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.media-form-grid label span{
  color:rgba(255,255,255,.72);
}
.media-form-grid input,
.media-form-grid select{
  width:100%;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:#fff;
  padding:0 14px;
  outline:none;
}
.media-form-grid .media-wide{
  grid-column:1 / -1;
}
.media-note{
  margin-top:14px;
  color:rgba(255,255,255,.7);
  font-size:12px;
  line-height:1.45;
}
.logo-link img.custom-logo,
.brand-logo.custom-logo{
  object-fit:contain;
}
@media (max-width: 780px){
  .viewer-toolbar{
    top:18px;
    right:18px;
    left:18px;
    justify-content:flex-start;
  }
  .media-form-grid{
    grid-template-columns:1fr;
  }
}


.failed-panel{position:relative}
.modal-x-btn{position:absolute;top:14px;right:14px;border:none;background:transparent;color:#fff;font-size:28px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;width:auto;height:auto}
.modal-x-btn:hover{opacity:.8}
.overlay-actions-centered{justify-content:center}

.viewer-toolbar{background:rgba(0,0,0,.36);backdrop-filter:blur(16px);padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 34px rgba(0,0,0,.28)}
.viewer-tool-btn.icon-btn{width:46px;height:46px;padding:0;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:18px;letter-spacing:0;text-transform:none}
.viewer-tool-btn.icon-btn .tool-icon{font-size:20px;line-height:1}
.viewer-mini-panel{position:fixed;top:92px;right:28px;display:none;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:rgba(0,0,0,.42);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);color:#fff;z-index:56;box-shadow:0 18px 34px rgba(0,0,0,.28)}
.viewer-mini-panel.open{display:flex}
.viewer-mini-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;font-size:20px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.viewer-mini-btn:hover{background:rgba(255,255,255,.14)}
#rotatePanel{top:146px}
@media (max-width:780px){
  .viewer-mini-panel{top:auto;bottom:94px;right:18px}
  #rotatePanel{bottom:38px}
}


.viewer-tool-btn.is-active{
  background:rgba(83,184,255,.16);
  border-color:rgba(83,184,255,.42);
  box-shadow:0 10px 22px rgba(8,72,122,.22);
}
.viewer-tool-btn.icon-btn#toggleDayNightBtn .tool-icon{
  font-size:18px;
}


.leave-editor-panel{
  position:relative;
  width:min(520px, calc(100vw - 40px));
  min-height:auto;
  align-items:center;
  text-align:center;
}
.leave-editor-copy{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:14px;
  line-height:1.5;
}

.viewer-mini-panel{
  top:112px !important;
}
#rotatePanel{
  top:174px !important;
}
@media (max-width:780px){
  .viewer-mini-panel{
    bottom:112px !important;
  }
  #rotatePanel{
    bottom:48px !important;
  }
}


.viewer-crosshair{
  position:fixed;
  inset:0;
  display:none;
  pointer-events:none;
  z-index:52;
}
.viewer-crosshair span{
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:14px;
  transform:translate(-50%,-50%);
}
.viewer-crosshair span::before,
.viewer-crosshair span::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.viewer-crosshair span::before{
  width:14px;
  height:14px;
  border:1px solid rgba(255,255,255,.84);
  border-radius:50%;
  box-shadow:0 0 8px rgba(83,184,255,.28);
}
.viewer-crosshair span::after{
  width:4px;
  height:4px;
  background:#fff;
  border-radius:50%;
}
body.viewer-page .viewer-crosshair{display:block}

.viewer-slider-panel{
  width:min(290px, calc(100vw - 56px));
  padding:14px 16px 16px;
  gap:10px;
  top:84px;
}
#scalePanel{right:92px}
#rotatePanel{right:28px}
.viewer-panel-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:11px;
  color:rgba(255,255,255,.72);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.viewer-panel-label-row strong{
  color:#fff;
  font-size:12px;
}
.viewer-range{
  width:100%;
  accent-color:#53b8ff;
}
.viewer-rotate-panel{
  display:grid;
  gap:10px;
}

.media-icon-picker{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
  width:100%;
  margin-bottom:16px;
}
.media-icon-choice{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  border-radius:18px;
  padding:12px;
  cursor:pointer;
  transition:.2s ease;
}
.media-icon-choice img{
  display:block;
  width:100%;
  height:auto;
}
.media-icon-choice.is-active,
.media-icon-choice:hover{
  border-color:rgba(83,184,255,.44);
  background:rgba(83,184,255,.12);
  box-shadow:0 8px 24px rgba(11,73,122,.18);
}
.media-form-grid-compact{
  grid-template-columns:1fr;
}
.media-form-grid-compact .media-wide{
  grid-column:auto;
}
.media-form-grid select,
.role-select-wrap select{
  color:#000;
  background:#fff;
}
.info-tag-panel{
  width:min(560px, calc(100vw - 40px));
  min-height:auto;
}
.info-tag-copy{
  margin-top:10px;
  color:rgba(255,255,255,.82);
  line-height:1.6;
  white-space:pre-wrap;
}
@media (max-width: 900px){
  #scalePanel{right:18px;top:88px}
  #rotatePanel{right:18px;top:180px}
}


.modal-x-plain{
  position:absolute;
  top:18px;
  right:18px;
  border:none;
  background:transparent;
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  padding:0;
  width:auto;
  height:auto;
}
.modal-x-plain:hover{opacity:.8}
.overlay-actions-bottom{
  justify-content:center;
  margin-top:26px;
}
.media-panel{position:relative}
.video-tag-panel{
  width:min(920px, calc(100vw - 40px));
  min-height:auto;
  position:relative;
}
.video-embed-wrap{
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:20px;
  overflow:hidden;
  background:#000;
  margin-top:10px;
}
.video-embed-wrap iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.viewer-hud{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  min-width:280px;
  max-width:min(80vw, 680px);
  padding:12px 18px;
  border-radius:16px;
  text-align:center;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  z-index:58;
}
.media-icon-choice{padding:10px}
.media-icon-choice img{max-height:84px;object-fit:contain}


.viewer-inline-input{
  width:78px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:#fff;
  padding:0 10px;
  font-size:13px;
}
.viewer-slider-panel{
  width:min(320px, calc(100vw - 56px));
}
.viewer-panel-controls{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
}
.viewer-panel-controls .viewer-range{
  min-width:0;
}
.viewer-rotate-panel{
  display:grid;
  gap:12px;
}
.viewer-panel-label-row{
  margin-bottom:6px;
}
.modal-x-plain{
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}


/* viewer panel visibility + alignment fix */
.viewer-mini-panel{
  display:none;
}
.viewer-mini-panel.open{
  display:grid !important;
}
.viewer-slider-panel{
  width:min(320px, calc(100vw - 56px));
  padding:14px 16px 16px;
  gap:10px;
  top:88px !important;
  display:none;
}
#scalePanel{
  right:92px !important;
  top:88px !important;
}
#rotatePanel{
  right:28px !important;
  top:88px !important;
}
@media (max-width:780px){
  #scalePanel{
    right:18px !important;
    top:88px !important;
    bottom:auto !important;
  }
  #rotatePanel{
    right:18px !important;
    top:88px !important;
    bottom:auto !important;
  }
}


/* viewer toolbar stacked on right */
.viewer-toolbar{
  position:fixed;
  top:28px;
  right:28px;
  z-index:55;
  display:none;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;
  justify-content:flex-start;
  max-width:none;
}
.viewer-tool-btn{
  width:52px;
  height:52px;
  padding:0;
  justify-content:center;
}
.publish-tool-btn{
  font-size:18px;
  font-weight:700;
}

/* panels open to the left of the stacked UI and align to the top */
.viewer-mini-panel{
  display:none;
}
.viewer-mini-panel.open{
  display:grid !important;
}
.viewer-slider-panel{
  width:min(320px, calc(100vw - 120px));
  padding:14px 16px 16px;
  gap:10px;
  top:28px !important;
  right:96px !important;
  display:none;
}
#scalePanel{
  top:28px !important;
  right:96px !important;
}
#rotatePanel{
  top:28px !important;
  right:96px !important;
}
.publish-viewer-panel{
  width:min(560px, calc(100vw - 40px));
  min-height:auto;
}
@media (max-width:780px){
  .viewer-toolbar{
    top:18px;
    right:18px;
  }
  .viewer-slider-panel{
    right:86px !important;
    top:18px !important;
    width:min(280px, calc(100vw - 120px));
  }
}


/* viewer ui minimal aligned stack */
.viewer-toolbar{
  position:fixed;
  top:28px;
  right:28px;
  z-index:55;
  display:none;
  flex-direction:column;
  gap:12px;
  align-items:center;
  justify-content:flex-start;
  max-width:none;
}
.viewer-tool-btn{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
  border-radius:0 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.viewer-tool-btn:hover{
  background:transparent !important;
  border:none !important;
  opacity:.82;
}
.viewer-tool-btn .tool-icon,
.publish-tool-btn{
  font-size:22px;
  line-height:1;
}
.viewer-slider-panel{
  top:28px !important;
  right:102px !important;
  width:min(320px, calc(100vw - 140px));
}
#scalePanel,
#rotatePanel{
  top:28px !important;
  right:102px !important;
}
.publish-viewer-panel{
  width:min(600px, calc(100vw - 40px));
  min-height:auto;
  position:relative;
}
.publish-link-row{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  margin-top:8px;
}
.publish-link-input{
  width:100%;
  height:52px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
  color:#fff;
  padding:0 18px;
  font-size:14px;
  outline:none;
}
.publish-link-input::placeholder{
  color:rgba(255,255,255,.5);
}
@media (max-width:780px){
  .viewer-toolbar{
    top:18px;
    right:18px;
  }
  .viewer-slider-panel,
  #scalePanel,
  #rotatePanel{
    top:18px !important;
    right:86px !important;
    width:min(280px, calc(100vw - 120px));
  }
}


/* transform controls */
#movePanel{
  right:96px !important;
  top:28px !important;
}
.viewer-toolbar{
  gap:10px;
}
.viewer-tool-btn.icon-btn#viewerProjectsBtn{
  width:58px;
  height:58px;
  background:rgba(166, 28, 28, 0.28);
  border-color:rgba(255,120,120,.45);
  box-shadow:0 12px 28px rgba(90,0,0,.22);
}
.viewer-tool-btn.icon-btn#viewerProjectsBtn .tool-icon{
  font-size:22px;
}
.viewer-tool-btn.icon-btn#viewerProjectsBtn:hover{
  background:rgba(190, 38, 38, 0.34);
}


/* project name heading correction */
.project-heading{
  color:#fff !important;
  font-size:34px !important;
  letter-spacing:-.04em !important;
  text-transform:none !important;
  font-weight:500 !important;
  margin:0 0 8px !important;
}
.project-subheading{
  margin:0 0 18px !important;
  font-weight:400 !important;
  text-transform:none !important;
  letter-spacing:.12em !important;
}

/* stronger right-side viewer icons */
.viewer-toolbar{
  align-items:center !important;
}
.viewer-tool-btn.icon-btn{
  width:58px !important;
  height:58px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}
.viewer-tool-btn.icon-btn:hover{
  background:rgba(83,184,255,.12) !important;
  border-color:rgba(83,184,255,.34) !important;
}
.viewer-tool-btn.icon-btn .tool-icon{
  font-size:26px !important;
  line-height:1 !important;
}
#addMediaBtn .tool-icon{
  font-size:38px !important;
  font-weight:700 !important;
  text-shadow:0 0 18px rgba(83,184,255,.42);
}
.publish-tool-btn{
  width:58px !important;
  height:58px !important;
  border-radius:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.toolbar-image-icon{
  display:block;
  width:28px;
  height:28px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
.toolbar-image-icon-exit{
  width:30px;
  height:30px;
}
.toolbar-image-icon-back{
  width:30px;
  height:30px;
}
.exit-icon-btn{
  background:rgba(150, 32, 32, .16) !important;
  border-color:rgba(255,90,90,.28) !important;
}
.exit-icon-btn:hover{
  background:rgba(190,44,44,.26) !important;
  border-color:rgba(255,110,110,.42) !important;
}
.back-icon-btn{
  background:rgba(255,255,255,.05) !important;
}


/* viewer toolbar as independent buttons, no holder */
.viewer-toolbar{
  position:fixed;
  top:28px;
  right:28px;
  z-index:55;
  display:none;
  flex-direction:column;
  gap:12px;
  align-items:center !important;
  justify-content:flex-start;
  max-width:none;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  backdrop-filter:none !important;
}
.viewer-toolbar::before,
.viewer-toolbar::after{
  display:none !important;
  content:none !important;
}
.viewer-tool-btn,
.publish-tool-btn{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  border-radius:14px !important;
}

/* panels aligned to the top publish button and open left */
.viewer-mini-panel{
  display:none;
}
.viewer-mini-panel.open{
  display:grid !important;
}
.viewer-slider-panel{
  top:28px !important;
  right:96px !important;
}
#scalePanel{
  top:28px !important;
  right:96px !important;
}
#rotatePanel{
  top:28px !important;
  right:96px !important;
}
#movePanel{
  top:28px !important;
  right:96px !important;
}

/* publish modal spacing */
.publish-link-row{
  margin-top:14px;
  margin-bottom:18px !important;
}
.publish-link-input{
  margin-bottom:0 !important;
}
.copy-note{
  margin-top:8px !important;
}

@media (max-width:780px){
  .viewer-toolbar{
    top:18px;
    right:18px;
  }
  .viewer-slider-panel,
  #scalePanel,
  #rotatePanel,
  #movePanel{
    top:18px !important;
    right:86px !important;
  }
}


/* make publish and exit match */
.publish-tool-btn,
.exit-icon-btn{
  background:rgba(150, 32, 32, .16) !important;
  border:1px solid rgba(255,90,90,.28) !important;
  color:#fff !important;
}
.publish-tool-btn:hover,
.exit-icon-btn:hover{
  background:rgba(190,44,44,.26) !important;
  border-color:rgba(255,110,110,.42) !important;
}
.publish-tool-btn{
  font-size:22px !important;
  font-weight:700 !important;
}


/* neutralize project UI buttons and strengthen backdrop */
.viewer-tool-btn.icon-btn,
.publish-tool-btn,
.exit-icon-btn,
.back-icon-btn{
  background: rgba(12, 18, 28, 0.78) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #fff !important;
}
.viewer-tool-btn.icon-btn:hover,
.publish-tool-btn:hover,
.exit-icon-btn:hover,
.back-icon-btn:hover{
  background: rgba(18, 28, 42, 0.9) !important;
  border-color: rgba(83,184,255,0.28) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.34) !important;
}
.publish-tool-btn,
.exit-icon-btn{
  background: rgba(12, 18, 28, 0.82) !important;
  border-color: rgba(255,255,255,0.16) !important;
}


/* embedded website/shop overlay */
#linkTagOverlay .info-tag-copy{
  margin-bottom:14px;
}
#linkTagFrame{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#fff;
}


.link-embed-note{
  margin-top:10px;
  margin-bottom:14px;
  color:rgba(255,255,255,.72);
  line-height:1.5;
  font-size:13px;
}


/* published view-only mode */
body.viewer-view-only .upload-panel,
body.viewer-view-only .bottom-progress,
body.viewer-view-only #scalePanel,
body.viewer-view-only #rotatePanel,
body.viewer-view-only #movePanel,
body.viewer-view-only #publishProjectBtn,
body.viewer-view-only #toggleScalePanelBtn,
body.viewer-view-only #toggleRotatePanelBtn,
body.viewer-view-only #toggleMovePanelBtn,
body.viewer-view-only #resetTransformBtn,
body.viewer-view-only #addMediaBtn,
body.viewer-view-only #addSceneModelBtn,
body.viewer-view-only #viewerProjectsBtn,
body.viewer-view-only #publishViewerModal,
body.viewer-view-only .debug-box,
body.viewer-view-only .local-note{
  display:none !important;
}

body.viewer-view-only #viewerToolbar{
  display:flex !important;
}

body.viewer-view-only .viewer-toolbar{
  top:28px;
  right:28px;
  gap:12px;
}

body.viewer-view-only #toggleDayNightBtn,
body.viewer-view-only #toggleFlyModeBtn{
  display:flex !important;
}

body.viewer-view-only #editInfoTagBtn,
body.viewer-view-only #editVideoTagBtn,
body.viewer-view-only #editLinkTagBtn{
  display:none !important;
}

body.viewer-view-only .overlay-actions.overlay-actions-centered{
  justify-content:center;
}

#toggleFlyModeBtn.is-active{
  background: rgba(83,184,255,0.16) !important;
  border-color: rgba(83,184,255,0.36) !important;
  box-shadow: 0 12px 28px rgba(11,73,122,.22) !important;
}


/* UI translucency + media polish */
.viewer-tool-btn.icon-btn,
.publish-tool-btn,
.exit-icon-btn,
.back-icon-btn{
  background: rgba(12, 18, 28, 0.80) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.media-form-grid input,
.media-form-grid textarea,
.media-form-grid select,
.info-tag-copy,
.link-embed-note{
  color:#fff !important;
}

.video-embed-wrap{
  border-radius:8px !important;
}

.media-icon-choice,
.media-icon-choice.is-active,
.media-icon-choice:hover{
  border-color:rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.06) !important;
  box-shadow:none !important;
}


/* viewer icon translucency + svg icon sizing */
.viewer-tool-btn.icon-btn,
.publish-tool-btn,
.exit-icon-btn,
.back-icon-btn{
  background: rgba(12, 18, 28, 0.60) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}
.viewer-tool-btn.icon-btn:hover,
.publish-tool-btn:hover,
.exit-icon-btn:hover,
.back-icon-btn:hover{
  background: rgba(18, 28, 42, 0.72) !important;
}
#flyModeIcon svg{
  width:24px;
  height:24px;
  display:block;
  stroke:currentColor;
}


/* remove blue selected overlay on fly mode */
#toggleFlyModeBtn.is-active{
  background: rgba(12, 18, 28, 0.60) !important;
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28) !important;
}
#toggleFlyModeBtn.is-active:hover{
  background: rgba(18, 28, 42, 0.72) !important;
  border-color: rgba(255,255,255,0.20) !important;
}


.modal-pen-plain{
  position:absolute;
  top:18px;
  left:18px;
  border:none;
  background:transparent;
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  padding:0;
  width:auto;
  height:auto;
  opacity:.95;
}
.modal-pen-plain:hover{
  opacity:.8;
}
body.viewer-view-only .modal-pen-plain{
  display:none !important;
}


/* 2026-03-30 fixes */
.fly-mode-plane-icon{display:block;width:24px;height:24px;object-fit:contain;}
.viewer-tool-btn .tool-icon img{display:block;width:24px;height:24px;object-fit:contain;}
.media-icon-choice{position:relative;}
.media-icon-choice.is-active{border-color:rgba(83,184,255,.55) !important;background:rgba(83,184,255,.14) !important;box-shadow:0 8px 24px rgba(11,73,122,.22) !important;}
.media-icon-choice:hover{border-color:rgba(83,184,255,.36) !important;background:rgba(83,184,255,.10) !important;box-shadow:0 6px 18px rgba(11,73,122,.16) !important;}
.media-icon-choice.is-active::after{content:"";position:absolute;inset:8px;border:1px solid rgba(83,184,255,.45);border-radius:14px;pointer-events:none;}


.support-note{
  margin:12px 0 0;
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.55;
  text-align:center;
}
.conversion-queue-card{
  margin-top:18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:rgba(255,255,255,.03);
  padding:16px 18px;
}
.conversion-queue-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.conversion-queue-head h3{
  margin:0;
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.conversion-queue-empty{
  color:rgba(255,255,255,.58);
  font-size:12px;
}
.conversion-queue-table-wrap{overflow-x:auto}
.conversion-queue-table{width:100%;border-collapse:collapse}
.conversion-queue-table th,.conversion-queue-table td{
  text-align:left;
  padding:10px 6px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:12px;
}
.conversion-queue-table th{
  color:rgba(255,255,255,.58);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.conversion-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  border-radius:999px;
  padding:8px 12px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}
.conversion-status-pill.queued{color:#8fd4ff;border-color:rgba(83,184,255,.26);background:rgba(83,184,255,.08)}
.conversion-status-pill.processing{color:#fff0b4;border-color:rgba(255,220,120,.26);background:rgba(255,220,120,.08)}
.conversion-status-pill.awaiting{color:#ffd4d4;border-color:rgba(255,120,120,.26);background:rgba(255,120,120,.08)}
.fly-mode-plane-icon{width:24px;height:24px;object-fit:contain;display:block;filter:brightness(0) invert(1)}
@media (max-width:640px){
  .conversion-queue-card{padding:14px}
  .conversion-queue-head h3{font-size:13px}
}


/* auto conversion progress in upload tile */
.drop-zone-copy{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  text-align:center;
}
.drop-zone.is-processing{
  border-style:solid;
}
.drop-zone.is-processing .drop-zone-copy{
  display:none;
}
.upload-inline-progress{
  width:min(360px, 88%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.upload-inline-progress[hidden]{display:none !important}
.upload-inline-stage{
  color:#fff;
  font-size:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.upload-inline-bar{
  width:100%;
  height:14px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
}
.upload-inline-bar span{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#39a9ff 0%,#9ee0ff 50%,#39a9ff 100%);
  transition:width .35s ease;
}
.upload-inline-subtext{
  color:rgba(255,255,255,.74);
  font-size:12px;
  line-height:1.5;
  max-width:320px;
  text-align:center;
}
.upload-actions.is-hidden,
.support-note.is-hidden,
.file-name.is-hidden{
  display:none !important;
}


/* Cognito auth screens */
.auth-card{max-width:460px}
.auth-intro-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(83,184,255,.12);
  border:1px solid rgba(83,184,255,.24);
  color:#9ddcff;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.auth-meta-block{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.03);
}
.auth-meta-block p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.55;
}
.auth-summary-card{
  display:grid;
  gap:14px;
  margin-bottom:18px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:rgba(255,255,255,.03);
}
.auth-summary-card div{
  display:grid;
  gap:6px;
}
.auth-summary-card span{
  color:rgba(255,255,255,.58);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.auth-summary-card strong{
  color:#fff;
  font-size:15px;
  font-weight:600;
}
.auth-inline-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}
.ghost-auth-btn,
.ghost-auth-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#fff;
  text-decoration:none;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
}
.ghost-auth-btn:hover,
.ghost-auth-link:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.26);
}
@media (max-width:640px){
  .auth-inline-actions{flex-direction:column;align-items:stretch}
  .ghost-auth-btn,.ghost-auth-link{width:100%}
}


.eula-copy{max-height:260px;overflow:auto;text-align:left}.eula-copy p{margin:0 0 12px;color:var(--muted);line-height:1.6}.eula-copy p strong{color:#fff}.eula-check{display:flex;align-items:flex-start;gap:12px;margin-top:18px;color:#fff;font-size:14px;line-height:1.5}.eula-check input{margin-top:3px}.profile-inline-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}.profile-inline-actions .ghost-btn{min-width:180px}
.demo-bypass-card{margin:14px 0 18px;padding:16px 18px;border:1px solid rgba(83,184,255,.22);border-radius:18px;background:rgba(83,184,255,.08)}
.demo-bypass-card strong{display:block;margin-bottom:8px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#9ddcff}
.demo-bypass-card p{margin:0;color:rgba(255,255,255,.82);line-height:1.7;font-size:13px}


/* 2026-04-12 quality-of-life updates */
.viewer-scale-reference{position:fixed;left:28px;bottom:28px;z-index:54;display:none;pointer-events:none;opacity:.85}.viewer-scale-reference img{height:180px;width:auto;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));}.viewer-scale-reference.is-visible{display:block}.toolbar-image-icon-publish{width:14px;height:14px}.custom-icon-upload input[type=file]{height:auto;padding:12px 14px}.media-preview-row{display:flex;align-items:center;justify-content:flex-start;min-height:52px}.media-preview-row img{width:56px;height:56px;object-fit:contain;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);padding:6px}.overlay-panel.info-tag-panel,.overlay-panel.video-tag-panel{border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 34px rgba(0,0,0,.28)}#closeInfoTagActionBtn{display:none !important}.center-cta{margin-top:auto}.pricing-card .ghost-btn,.pricing-card .primary-btn{min-width:200px;justify-content:center}.eula-copy{max-height:420px}.eula-copy h2{margin:0 0 14px;font-size:20px;color:#fff}.eula-copy ul{margin:0 0 14px 18px;color:var(--muted);line-height:1.6}.eula-copy li{margin:0 0 6px}.fly-mode-plane-icon{filter:brightness(0) invert(1)}


.viewer-scale-panel{width:220px!important;align-items:center}
.viewer-scale-controls-vertical{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.viewer-range-vertical{writing-mode:bt-lr;-webkit-appearance:slider-vertical;width:22px;height:180px;padding:0;margin:0}
.scale-size-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.scale-reference-note{font-size:11px;line-height:1.5;color:rgba(255,255,255,.82);margin-bottom:8px;text-align:center}
.viewer-move-target-row{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid rgba(83,184,255,.22);border-radius:14px;background:rgba(83,184,255,.08);margin-bottom:8px}
.viewer-move-target-row img{width:42px;height:42px;object-fit:contain;flex:0 0 auto}
.viewer-move-target-row strong{display:block;font-size:12px;color:#fff}
.viewer-move-target-row span{display:block;font-size:10px;line-height:1.4;color:rgba(255,255,255,.72)}
.media-inline-toggle{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);border-radius:14px;padding:10px 12px;color:#fff;font-size:12px;text-transform:none;letter-spacing:0}
.media-inline-toggle input{width:auto;height:auto}
.viewer-scale-reference{display:none!important}
.instructions-wrap{position:relative}
.instructions-close{position:absolute;right:16px;top:16px;z-index:2;width:auto;height:auto;border:none;border-radius:0;background:transparent;color:#fff;font-size:30px;line-height:1;padding:0;box-shadow:none}

#addSceneModelBtn .tool-icon{font-size:22px!important}


/* 2026-04-13 follow-up amendments */
.overlay-panel.info-tag-panel,
.overlay-panel.video-tag-panel,
.overlay-panel.publish-viewer-panel,
.overlay-panel.media-panel{position:relative;}
.toolbar-image-icon-publish{width:28px !important;height:28px !important;}
.publish-tool-btn{width:58px !important;height:58px !important;min-width:58px !important;}
.viewer-scale-reference{position:fixed !important;left:50% !important;top:50% !important;transform:translate(-50%,-50%) !important;z-index:54;display:none;pointer-events:none;opacity:.95;}
.viewer-scale-reference img{height:min(58vh,520px);width:auto;display:block;filter:drop-shadow(0 12px 28px rgba(0,0,0,.4));}
.viewer-scale-reference.is-visible{display:block !important;}
.viewer-delete-secondary-btn{width:100%;margin-top:8px;display:flex;justify-content:center;}


/* v4 transform panel adjustments */
#toggleScalePanelBtn,#toggleRotatePanelBtn{display:none !important;}
.viewer-transform-panel{max-height:min(82vh,860px);overflow:auto;padding-right:14px;}
.viewer-transform-panel .viewer-scale-controls-vertical{display:grid;gap:10px;align-items:center;margin-bottom:16px;}
.viewer-transform-panel .viewer-range-vertical{writing-mode:vertical-lr;direction:rtl;height:180px;width:18px;justify-self:center;}
.viewer-transform-selectors{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 16px;}
.viewer-transform-selectors label{display:grid;gap:6px;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.16em;}
.viewer-transform-selectors select{height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;padding:0 12px;}
.viewer-transform-panel .viewer-move-target-row{margin-bottom:8px;}
.viewer-transform-section{border-top:1px solid rgba(255,255,255,.08);padding-top:12px;margin-top:12px;}
.viewer-transform-section:first-of-type{border-top:none;padding-top:0;margin-top:0;}
.viewer-scale-reference{display:none!important;}
@media (max-width:780px){.viewer-transform-selectors{grid-template-columns:1fr;}}

.instructions-close{width:auto !important;height:auto !important;border:none !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;padding:0 !important;}


/* 2026-04-13 transform/media UI amendments */
.viewer-transform-panel{max-height:none !important;overflow:visible !important;padding-right:0 !important;width:min(420px,calc(100vw - 120px)) !important;}
.viewer-scale-panel{width:100% !important;align-items:stretch !important;}
.viewer-transform-panel .viewer-scale-controls-vertical{display:none !important;}
.viewer-scale-controls-horizontal{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;margin:4px 0 12px;}
.viewer-range-horizontal{width:100%;min-width:140px;}
.scale-size-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap;}
.viewer-transform-selectors select{appearance:none;-webkit-appearance:none;-moz-appearance:none;height:42px;border-radius:14px;border:1px solid rgba(83,184,255,.28);background:rgba(12,18,28,.78);color:#fff;padding:0 38px 0 14px;background-image:linear-gradient(45deg, transparent 50%, #8fd4ff 50%), linear-gradient(135deg, #8fd4ff 50%, transparent 50%);background-position:calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;}
.viewer-transform-selectors select option{color:#000;background:#fff;}
.viewer-transform-panel .viewer-panel-controls{grid-template-columns:1fr 88px;gap:10px;}
.viewer-inline-input{width:88px !important;}
.media-icon-choice-text{display:flex;align-items:center;justify-content:center;min-height:84px;padding:12px 10px;text-align:center;}
.media-icon-choice-text span{font-size:12px;line-height:1.35;color:#fff;letter-spacing:.08em;text-transform:uppercase;}
.media-inline-toggle-switch{justify-content:space-between;padding:12px 14px;background:rgba(12,18,28,.78);border:1px solid rgba(83,184,255,.22);} 
.media-switch{position:relative;display:inline-flex;align-items:center;}
.media-switch input{position:absolute;opacity:0;pointer-events:none;}
.media-switch-slider{position:relative;display:inline-block;width:46px;height:26px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);transition:.2s ease;}
.media-switch-slider::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s ease;box-shadow:0 2px 8px rgba(0,0,0,.24);}
.media-switch input:checked + .media-switch-slider{background:rgba(83,184,255,.24);border-color:rgba(83,184,255,.45);}
.media-switch input:checked + .media-switch-slider::after{transform:translateX(20px);background:#8fd4ff;}
@media (max-width:780px){.viewer-transform-panel{width:min(92vw,420px)!important}.viewer-scale-controls-horizontal{grid-template-columns:1fr;}.scale-size-label-left,.scale-size-label-right{justify-self:center;}.viewer-transform-panel .viewer-panel-controls{grid-template-columns:1fr;}}


/* 2026-04-13 v4d UI tweaks */
.media-icon-picker{grid-template-columns:repeat(4,minmax(0,1fr));}
.media-icon-choice-wide{grid-column:1 / -1; min-height:52px !important; padding:14px 16px !important; border-radius:14px !important;}
.media-icon-choice-wide span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;}
.media-inline-toggle, .media-inline-toggle-switch{border:none !important; background:transparent !important; padding:0 !important; justify-content:flex-start !important; box-shadow:none !important;}
.media-inline-toggle-switch{margin-top:6px; width:100%;}
.media-inline-toggle-switch > span:first-child{min-width:120px; color:rgba(255,255,255,.78);}
.media-switch-slider{background:rgba(12,18,28,.78); border-color:rgba(83,184,255,.24);}
.media-switch input:checked + .media-switch-slider{background:rgba(83,184,255,.24); border-color:rgba(83,184,255,.45);}
.toolbar-image-icon-publish{width:24px !important;height:24px !important;object-fit:contain;filter:brightness(0) invert(1);}
.publish-tool-btn{width:58px !important;height:58px !important;min-width:58px !important;}


/* 2026-04-13 hotfix: publish icon + custom icon upload + toggle layout */
.media-icon-choice-wide{grid-column:1 / -1 !important;width:100% !important;display:flex !important;align-items:center !important;justify-content:center !important;min-height:56px !important;padding:14px 18px !important;border-radius:14px !important;}
.media-icon-choice-wide span{width:100%;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;}
#customIconUploadWrap{width:100% !important;}
#customIconUploadWrap input[type=file]{width:100% !important;display:block !important;}
.media-inline-toggle,.media-inline-toggle-switch{align-items:center !important;justify-content:flex-start !important;gap:12px !important;}
.media-inline-toggle-switch > span:first-child{min-width:auto !important;}
.media-switch-slider{background:rgba(255,255,255,.1) !important;border-color:rgba(255,255,255,.16) !important;}
.toolbar-image-icon-publish{width:20px !important;height:20px !important;object-fit:contain !important;filter:none !important;}
.publish-tool-btn{width:58px !important;height:58px !important;min-width:58px !important;}

.media-upload-btn{width:100%;justify-content:center;}
.media-inline-toggle.media-inline-toggle-switch{display:flex;align-items:center;justify-content:flex-start;gap:14px;margin-top:4px;}
.media-inline-toggle.media-inline-toggle-switch > span:first-child{min-width:auto;color:rgba(255,255,255,.78);text-transform:none;letter-spacing:0;font-size:14px;margin:0;}
.media-switch{margin-left:0;}
.toolbar-image-icon-mediaadd,.toolbar-image-icon-modeladd{width:22px;height:22px;object-fit:contain;}


/* --- v11 auth/onboarding mobile refinements --- */
@media (max-width:900px){
  .page-shell{justify-content:flex-start;padding:112px 20px 100px}
  .logo-link{position:fixed;top:16px;left:16px}
  .logo-link img{height:42px}
  .card,.upload-panel,.project-wrap{width:min(100%, 560px)}
  .auth-card{max-width:none;width:100%}
  .viewer-toolbar{top:16px;right:16px;left:16px;max-width:none;justify-content:flex-start}
}
@media (max-width:640px){
  .page-shell{padding:96px 14px 88px}
  .card{padding:22px 16px 16px;border-radius:22px}
  .text-input,input.text-input,textarea.text-input,.contact-form-grid input,.contact-form-grid textarea{font-size:16px}
  .primary-btn,.ghost-btn,.next-btn,.done-btn,.retry-btn,.retry-secondary{width:100%;justify-content:center}
  .project-wrap{width:100%;padding-bottom:72px}
  .project-actions,.project-actions-project-name,.overlay-actions{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
  .upload-panel{width:100%;padding:18px 16px 18px}
  .drop-zone{min-height:260px;padding:20px}
  .overlay-panel,.media-panel,.loading-box{width:min(100%, calc(100vw - 24px));padding:20px 16px}
  .media-form-grid{grid-template-columns:1fr}
  .viewer-tool-btn{width:100%;justify-content:center}
  .support-widget{right:12px;bottom:12px;padding:10px 12px 10px 10px;font-size:11px;letter-spacing:.14em}
  .support-widget span{display:none}
  .help-menu{right:12px;bottom:62px;width:200px}
}


/* viewer interface refresh */
body.viewer-page .logo-link{display:inline-flex !important;z-index:72;}
body.viewer-page .logo-link img{height:52px;}
#viewerCanvas canvas{touch-action:none;}
.viewer-toolbar{position:fixed;top:96px;right:20px;display:none;flex-direction:column;gap:10px;align-items:center;justify-content:flex-start;max-width:none;z-index:65;}
.viewer-tool-btn,.publish-tool-btn{width:46px !important;height:46px !important;min-width:46px !important;padding:0 !important;border-radius:14px !important;border:1px solid rgba(255,255,255,.16);background:rgba(8,14,22,.82);backdrop-filter:blur(12px);display:inline-flex;align-items:center;justify-content:center;font-size:0 !important;letter-spacing:0 !important;}
.viewer-tool-btn:hover{background:rgba(20,30,46,.94);border-color:rgba(143,211,255,.35);}
.viewer-tool-svg,.tool-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:#fff;}
.viewer-tool-svg svg,.tool-icon svg{width:18px;height:18px;stroke:currentColor;display:block;}
#dayNightIcon svg,#flyModeIcon svg{width:18px;height:18px;}
.toolbar-image-icon,.toolbar-image-icon-publish,.toolbar-image-icon-back,.toolbar-image-icon-exit,.toolbar-image-icon-mediaadd,.toolbar-image-icon-modeladd{display:none !important;}
.viewer-mini-panel{z-index:64;top:96px !important;right:78px !important;border-radius:18px;background:rgba(8,14,22,.88);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 34px rgba(0,0,0,.28);}
#rotatePanel{right:78px !important;}
.viewer-view-only #viewerToolbar{display:flex !important;}
body.viewer-view-only #publishProjectBtn, body.viewer-view-only #toggleScalePanelBtn, body.viewer-view-only #toggleRotatePanelBtn, body.viewer-view-only #toggleMovePanelBtn, body.viewer-view-only #resetTransformBtn, body.viewer-view-only #addMediaBtn, body.viewer-view-only #addSceneModelBtn, body.viewer-view-only #viewerProjectsBtn{display:none !important;}
.viewer-bottom-toolbar,.viewer-bottom-nav,.editor-bottom-toolbar,.viewer-mode-tabs,.viewer-footer-actions,.bottom-screen-tools{display:none !important;}
.instructions-card-wrap{position:relative;width:min(420px, calc(100vw - 32px));}
.instructions-card{display:grid;gap:14px;padding:22px 20px;border-radius:24px;background:rgba(19,35,68,.86);border:1px solid rgba(143,211,255,.14);box-shadow:0 24px 48px rgba(0,0,0,.28);backdrop-filter:blur(12px);}
.instructions-kicker{margin:0;color:#8fd3ff;font-size:12px;letter-spacing:.24em;text-transform:uppercase;}
.instructions-title{margin:0;color:#fff;font-size:clamp(28px,3vw,36px);line-height:1.02;letter-spacing:-.04em;}
.instructions-body{margin:0;color:rgba(255,255,255,.84);line-height:1.65;font-size:15px;}
.instructions-list{margin:0;padding-left:18px;color:rgba(255,255,255,.76);display:grid;gap:8px;line-height:1.55;font-size:14px;}
.instructions-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border:none;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:24px;line-height:1;}
.mobile-joystick-shell{position:fixed;left:16px;bottom:18px;z-index:70;display:none;}
.mobile-joystick-shell[hidden]{display:none !important;}
.mobile-joystick-card{display:grid;gap:8px;}
.mobile-joystick-label{color:rgba(255,255,255,.72);font-size:11px;letter-spacing:.18em;text-transform:uppercase;}
.mobile-joystick-base{width:118px;height:118px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.5);backdrop-filter:blur(10px);position:relative;touch-action:none;box-shadow:0 18px 40px rgba(0,0,0,.28);}
.mobile-joystick-knob{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);box-shadow:0 8px 20px rgba(0,0,0,.22);}
@media (max-width:900px), (pointer:coarse){.mobile-joystick-shell.is-visible{display:block;} .viewer-toolbar{top:86px;right:14px;gap:8px;} .viewer-tool-btn,.publish-tool-btn{width:42px !important;height:42px !important;min-width:42px !important;} .viewer-mini-panel{right:14px !important;left:14px;top:auto !important;bottom:92px !important;width:auto !important;} body.viewer-page .logo-link{top:16px;left:16px;} body.viewer-page .logo-link img{height:42px;} .instructions-card-wrap{width:min(360px, calc(100vw - 24px));}}


/* final viewer/editor ui refinements */
.viewer-toolbar{position:fixed !important;top:28px !important;right:28px !important;z-index:72 !important;display:none;flex-direction:column;gap:10px;align-items:center;justify-content:flex-start;max-width:none;background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;backdrop-filter:none !important;}
.viewer-tool-btn,.publish-tool-btn{width:48px !important;height:48px !important;min-width:48px !important;border-radius:14px !important;border:1px solid rgba(255,255,255,.14) !important;background:rgba(12,20,32,.74) !important;color:#fff !important;display:inline-flex;align-items:center;justify-content:center;padding:0 !important;box-shadow:0 12px 28px rgba(0,0,0,.18);backdrop-filter:blur(10px);}
.viewer-tool-btn:hover,.publish-tool-btn:hover{background:rgba(26,38,58,.88) !important;border-color:rgba(83,184,255,.36) !important;}
.viewer-tool-svg,.tool-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:#fff;}
.viewer-tool-svg svg,.tool-icon svg{width:18px;height:18px;stroke:currentColor;display:block;}
#dayNightIcon svg,#flyModeIcon svg{width:18px;height:18px;}
.back-icon-btn,.exit-icon-btn{background:rgba(12,20,32,.78) !important;}
.viewer-mini-panel{z-index:71;top:96px !important;right:92px !important;border-radius:18px;background:rgba(8,14,22,.92);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 34px rgba(0,0,0,.28);}
#scalePanel,#rotatePanel,#movePanel{right:92px !important;top:96px !important;}
.viewer-bottom-toolbar,.viewer-bottom-nav,.editor-bottom-toolbar,.viewer-mode-tabs,.viewer-footer-actions,.bottom-screen-tools{display:none !important;}
.instructions-card-wrap{position:relative;width:min(470px, calc(100vw - 32px));}
.instructions-card{display:grid;gap:16px;padding:22px 20px;border-radius:24px;background:rgba(19,35,68,.86);border:1px solid rgba(143,211,255,.14);box-shadow:0 24px 44px rgba(0,0,0,.22);}
.instructions-kicker{margin:0;color:#8fd3ff;font-size:11px;letter-spacing:.26em;text-transform:uppercase;}
.instructions-title{margin:0;font-size:clamp(2rem, 4vw, 2.7rem);line-height:1.02;}
.instructions-body{margin:0;color:rgba(255,255,255,.78);line-height:1.7;}
.instructions-visual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.instructions-visual-item{padding:14px 12px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);display:grid;gap:8px;text-align:left;}
.instructions-visual-icon{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:rgba(143,211,255,.1);color:#8fd3ff;}
.instructions-visual-icon svg{width:20px;height:20px;stroke:currentColor;display:block;}
.instructions-visual-item strong{font-size:13px;line-height:1.25;}
.instructions-visual-item small{font-size:12px;line-height:1.45;color:rgba(255,255,255,.68);}
.instructions-list{margin:0;padding-left:18px;color:rgba(255,255,255,.75);display:grid;gap:8px;line-height:1.5;}
.instructions-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(10,18,30,.72);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.logo-link{position:fixed;top:24px;left:24px;z-index:72;display:inline-flex;cursor:pointer;}
.logo-link img,.logo-link img.custom-logo{height:52px;width:auto;max-width:180px;object-fit:contain;display:block;}
@media (max-width:900px), (pointer:coarse){
  .viewer-toolbar{top:18px !important;right:14px !important;gap:8px;}
  .viewer-tool-btn,.publish-tool-btn{width:42px !important;height:42px !important;min-width:42px !important;border-radius:12px !important;}
  .viewer-mini-panel,#scalePanel,#rotatePanel,#movePanel{right:14px !important;left:14px;top:auto !important;bottom:92px !important;width:auto !important;}
  .instructions-card-wrap{width:min(420px, calc(100vw - 24px));}
  .instructions-card{padding:18px 16px 18px;gap:14px;}
  .instructions-visual-grid{grid-template-columns:1fr;gap:10px;}
  .logo-link{top:16px;left:16px;}
  .logo-link img,.logo-link img.custom-logo{height:42px;max-width:140px;}
}



/* final viewer/editor control alignment pass */
.instructions-card{
  background:rgba(44,48,55,.68) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 24px 48px rgba(0,0,0,.24) !important;
}
.instructions-kicker{
  color:rgba(255,255,255,.68) !important;
}
.instructions-body,
.instructions-list,
.instructions-visual-item small{
  color:rgba(255,255,255,.84) !important;
}

.viewer-toolbar{
  gap:10px !important;
}

.viewer-tool-btn,
.publish-tool-btn,
.back-icon-btn,
.exit-icon-btn{
  width:48px !important;
  min-width:48px !important;
  height:48px !important;
  min-height:48px !important;
  padding:0 !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(33,37,43,.78) !important;
  color:#fff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 14px 28px rgba(0,0,0,.18);
}

.viewer-tool-btn:hover,
.publish-tool-btn:hover,
.back-icon-btn:hover,
.exit-icon-btn:hover{
  background:rgba(56,61,69,.82) !important;
  border-color:rgba(255,255,255,.2) !important;
}

.viewer-tool-svg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.viewer-tool-svg svg{
  width:19px !important;
  height:19px !important;
  display:block;
  stroke:currentColor;
}

.viewer-slider-panel{
  width:min(340px, calc(100vw - 48px)) !important;
  padding:16px !important;
  gap:14px !important;
}

.viewer-transform-panel,
.viewer-scale-panel,
.viewer-rotate-panel{
  row-gap:14px !important;
}

.viewer-transform-selectors{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.viewer-transform-panel .viewer-range,
.viewer-scale-panel .viewer-range,
.viewer-rotate-panel .viewer-range,
.viewer-scale-controls-horizontal .viewer-range{
  display:none !important;
}

.scale-size-label{
  display:none !important;
}

.viewer-panel-controls{
  grid-template-columns:1fr !important;
  gap:8px !important;
  align-items:start !important;
}

.viewer-scale-controls-horizontal{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  align-items:start !important;
}

.viewer-inline-input{
  width:100% !important;
  height:44px !important;
  border-radius:14px !important;
  padding:0 14px !important;
  font-size:14px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

.viewer-panel-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px !important;
}

.viewer-move-target-row{
  margin-bottom:2px;
}

.viewer-move-target-row strong{
  display:block;
  margin-bottom:6px;
}

.viewer-move-target-row span{
  color:rgba(255,255,255,.72);
  line-height:1.45;
}

.viewer-transform-selectors label,
.viewer-transform-panel label{
  display:grid;
  gap:8px;
}

.viewer-transform-selectors select{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:0 14px;
}

@media (max-width: 780px){
  .viewer-tool-btn,
  .publish-tool-btn,
  .back-icon-btn,
  .exit-icon-btn{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
  }
  .viewer-tool-svg svg{
    width:18px !important;
    height:18px !important;
  }
  .viewer-slider-panel{
    width:min(320px, calc(100vw - 36px)) !important;
    padding:14px !important;
  }
  .instructions-card-wrap{
    width:min(380px, calc(100vw - 24px));
  }
}


/* 2026-04-24 viewer/editor canonical UI override */
.viewer-mobile-menu-btn{
  display:none;
  position:fixed;
  top:28px;
  right:28px;
  z-index:70;
  width:48px;
  height:48px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(18,22,28,.82);
  color:#fff;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-direction:column;
  padding:0;
  cursor:pointer;
  backdrop-filter:blur(12px);
  box-shadow:0 14px 28px rgba(0,0,0,.2);
}
.viewer-mobile-menu-btn span{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:999px;
  transition:transform .2s ease, opacity .2s ease;
}
body.viewer-mobile-menu-open .viewer-mobile-menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.viewer-mobile-menu-open .viewer-mobile-menu-btn span:nth-child(2){opacity:0}
body.viewer-mobile-menu-open .viewer-mobile-menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.viewer-toolbar{
  position:fixed !important;
  top:28px !important;
  right:28px !important;
  z-index:65 !important;
  display:none;
  flex-direction:column;
  gap:12px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  max-width:none !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  backdrop-filter:none !important;
}
.viewer-toolbar::before,
.viewer-toolbar::after{display:none !important;content:none !important;}

#publishProjectBtn,
#resetTransformBtn,
#viewerProjectsBtn,
#toggleMovePanelBtn,
#toggleScalePanelBtn,
#toggleRotatePanelBtn,
#addMediaBtn,
#toggleDayNightBtn,
#toggleFlyModeBtn,
#addSceneModelBtn{
  width:50px !important;
  height:50px !important;
  min-width:50px !important;
  min-height:50px !important;
  padding:0 !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(24,28,34,.82) !important;
  color:#fff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 14px 28px rgba(0,0,0,.2) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}
#publishProjectBtn:hover,
#resetTransformBtn:hover,
#viewerProjectsBtn:hover,
#toggleMovePanelBtn:hover,
#toggleScalePanelBtn:hover,
#toggleRotatePanelBtn:hover,
#addMediaBtn:hover,
#toggleDayNightBtn:hover,
#toggleFlyModeBtn:hover,
#addSceneModelBtn:hover{
  background:rgba(44,49,56,.9) !important;
  border-color:rgba(255,255,255,.2) !important;
}
#publishProjectBtn .viewer-tool-svg svg,
#resetTransformBtn .viewer-tool-svg svg,
#viewerProjectsBtn .viewer-tool-svg svg,
#toggleMovePanelBtn .viewer-tool-svg svg,
#toggleScalePanelBtn .viewer-tool-svg svg,
#toggleRotatePanelBtn .viewer-tool-svg svg,
#addMediaBtn .viewer-tool-svg svg,
#toggleDayNightBtn .viewer-tool-svg svg,
#toggleFlyModeBtn .viewer-tool-svg svg,
#addSceneModelBtn .viewer-tool-svg svg{
  width:20px !important;
  height:20px !important;
  display:block;
  stroke:currentColor;
}

.instructions-wrap.instructions-card-wrap{
  position:relative;
  width:min(460px, calc(100vw - 32px));
  max-height:calc(100svh - 32px);
}
.instructions-card{
  position:relative;
  width:100%;
  padding:28px 24px 22px !important;
  border-radius:26px !important;
  background:rgba(52,58,66,.7) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.22) !important;
}
.instructions-close{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  width:36px !important;
  height:36px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#fff !important;
  padding:0 !important;
  z-index:2;
}
.instructions-visuals,
.instructions-visual-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:18px 0 14px;
}
.instructions-visual-item{
  display:grid;
  gap:8px;
  align-content:start;
  text-align:center;
  padding:12px 10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.instructions-visual-icon{
  width:42px;
  height:42px;
  margin:0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.instructions-visual-icon svg{
  width:20px;
  height:20px;
  display:block;
  stroke:currentColor;
}
.instructions-visual-item strong{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.instructions-visual-item small{
  color:rgba(255,255,255,.74);
  line-height:1.35;
}
.instructions-list{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
}

.leave-editor-panel{
  width:min(500px, calc(100vw - 40px)) !important;
  min-height:auto !important;
  padding:30px 26px 26px !important;
}
.leave-editor-copy{
  margin:10px 0 24px !important;
}
.leave-editor-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:12px !important;
  width:100%;
}
.leave-editor-actions .retry-btn{
  width:100%;
  justify-content:center;
}

.viewer-transform-panel{
  width:min(520px, calc(100vw - 140px)) !important;
  max-height:calc(100svh - 110px) !important;
  overflow:auto !important;
  padding:16px 16px 18px !important;
  gap:14px !important;
}
.viewer-transform-search{
  display:grid;
  gap:10px;
}
.viewer-transform-search label{
  display:grid;
  gap:8px;
  color:#fff;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.viewer-transform-search-input{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:0 14px;
}
.viewer-transform-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.viewer-axis-field{
  display:grid;
  gap:8px;
  min-width:0;
}
.viewer-axis-field .viewer-panel-label-row{
  margin-bottom:0 !important;
}
.viewer-axis-field .viewer-inline-input{
  width:100% !important;
  height:44px !important;
}
.viewer-transform-range{
  display:none !important;
}
.viewer-move-target-row{
  margin-bottom:0 !important;
}
.viewer-move-target-row strong{
  display:block;
  margin-bottom:6px;
}
.viewer-move-target-row span{
  color:rgba(255,255,255,.74);
  line-height:1.45;
}

@media (max-width:900px){
  .instructions-visual-grid{grid-template-columns:1fr;}
  .viewer-mobile-menu-btn{
    display:inline-flex;
    top:18px;
    right:18px;
  }
  .viewer-toolbar{
    top:76px !important;
    right:16px !important;
    display:none !important;
    padding:12px !important;
    border-radius:22px !important;
    background:rgba(15,18,24,.92) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 20px 40px rgba(0,0,0,.3) !important;
  }
  .viewer-toolbar.is-mobile-open{
    display:flex !important;
  }
  .viewer-toolbar[hidden]{
    display:none !important;
  }
  .logo-link{
    top:18px;
    left:18px;
    z-index:71;
  }
  .logo-link img{
    height:46px;
  }
  .instructions-wrap.instructions-card-wrap{
    width:min(100vw - 24px, 420px);
    max-height:calc(100svh - 24px);
  }
  .instructions-card{
    padding:24px 18px 18px !important;
    border-radius:22px !important;
  }
  .instructions-visuals,
.instructions-visual-grid{
    grid-template-columns:1fr;
  }
  .viewer-transform-panel,
  #scalePanel,
  #rotatePanel,
  #movePanel{
    left:16px !important;
    right:16px !important;
    width:auto !important;
    top:148px !important;
    bottom:auto !important;
    max-height:calc(100svh - 170px) !important;
  }
  .viewer-transform-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}
@media (max-width:560px){
  .viewer-transform-grid{
    grid-template-columns:1fr;
  }
  .leave-editor-actions{
    grid-template-columns:1fr;
  }
  .instructions-close{
    top:12px !important;
    right:12px !important;
  }
}



/* 2026-04-24 viewer/editor final canonical override */
#viewerScaleReference{
  display: none !important;
}

#toggleScalePanelBtn,
#toggleRotatePanelBtn,
#scalePanel,
#rotatePanel{
  display: none !important;
}

.mobile-joystick-label{
  display: none !important;
}

.viewer-mobile-menu-btn{
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  top: 18px !important;
  right: 18px !important;
  border-radius: 14px !important;
  background: rgba(24,28,34,.84) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.2) !important;
  z-index: 86 !important;
}
.viewer-mobile-menu-btn span{
  width: 18px !important;
}

.viewer-toolbar{
  position: fixed !important;
  top: 28px !important;
  right: 28px !important;
  z-index: 82 !important;
  display: none;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  max-width: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}
.viewer-toolbar::before,
.viewer-toolbar::after{
  display: none !important;
  content: none !important;
}

#publishProjectBtn,
#resetTransformBtn,
#viewerProjectsBtn,
#toggleMovePanelBtn,
#addMediaBtn,
#addSceneModelBtn,
#toggleDayNightBtn,
#toggleFlyModeBtn,
.viewer-tool-btn,
.publish-tool-btn,
.back-icon-btn,
.exit-icon-btn{
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(24,28,34,.82) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
#publishProjectBtn:hover,
#resetTransformBtn:hover,
#viewerProjectsBtn:hover,
#toggleMovePanelBtn:hover,
#addMediaBtn:hover,
#addSceneModelBtn:hover,
#toggleDayNightBtn:hover,
#toggleFlyModeBtn:hover,
.viewer-tool-btn:hover,
.publish-tool-btn:hover,
.back-icon-btn:hover,
.exit-icon-btn:hover{
  background: rgba(44,49,56,.9) !important;
  border-color: rgba(255,255,255,.2) !important;
}
#publishProjectBtn .viewer-tool-svg svg,
#resetTransformBtn .viewer-tool-svg svg,
#viewerProjectsBtn .viewer-tool-svg svg,
#toggleMovePanelBtn .viewer-tool-svg svg,
#addMediaBtn .viewer-tool-svg svg,
#addSceneModelBtn .viewer-tool-svg svg,
#toggleDayNightBtn .viewer-tool-svg svg,
#toggleFlyModeBtn .viewer-tool-svg svg,
.viewer-tool-svg svg{
  width: 19px !important;
  height: 19px !important;
}

#movePanel{
  right: 92px !important;
  top: 96px !important;
  width: min(420px, calc(100vw - 140px)) !important;
  max-height: calc(100svh - 120px) !important;
  overflow: auto !important;
}
.viewer-transform-panel{
  padding-top: 18px !important;
}
.viewer-transform-search{
  display: grid !important;
  gap: 10px !important;
}
.viewer-transform-search label{
  display: grid !important;
  gap: 8px !important;
}
.viewer-transform-search-input{
  width: 100% !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  padding: 0 14px !important;
}
.viewer-transform-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.viewer-axis-field{
  min-width: 0 !important;
}
.viewer-axis-field .viewer-panel-label-row{
  margin-bottom: 6px !important;
}
.viewer-axis-field .viewer-inline-input{
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 10px !important;
}
.viewer-transform-panel .viewer-range,
.viewer-scale-panel .viewer-range,
.viewer-rotate-panel .viewer-range{
  display: none !important;
}
.viewer-panel-close{
  display: none;
}

.instructions-wrap.instructions-card-wrap{
  width: min(460px, calc(100vw - 32px)) !important;
  max-height: calc(100svh - 32px) !important;
}
.instructions-card{
  overflow: auto !important;
}

@media (max-width: 900px), (pointer: coarse){
  .viewer-mobile-menu-btn{
    display: inline-flex !important;
  }
  .viewer-toolbar{
    top: 72px !important;
    right: 18px !important;
    display: none !important;
    gap: 8px !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .viewer-toolbar.is-mobile-open{
    display: flex !important;
  }
  .viewer-toolbar[hidden]{
    display: none !important;
  }
  #publishProjectBtn,
  #resetTransformBtn,
  #viewerProjectsBtn,
  #toggleMovePanelBtn,
  #addMediaBtn,
  #addSceneModelBtn,
  #toggleDayNightBtn,
  #toggleFlyModeBtn,
  .viewer-tool-btn,
  .publish-tool-btn,
  .back-icon-btn,
  .exit-icon-btn{
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
  }
  #movePanel{
    left: 14px !important;
    right: 14px !important;
    top: 126px !important;
    width: auto !important;
    max-height: calc(100svh - 146px) !important;
    padding-top: 16px !important;
  }
  .viewer-panel-close{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 3 !important;
  }
  .viewer-transform-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .viewer-axis-field .viewer-inline-input{
    height: 40px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
  }
  .instructions-wrap.instructions-card-wrap{
    width: min(calc(100vw - 20px), 360px) !important;
    max-height: calc(100svh - 20px) !important;
  }
  .instructions-card{
    padding: 18px 14px 16px !important;
    border-radius: 20px !important;
  }
  .instructions-close{
    top: 10px !important;
    right: 10px !important;
  }
}

@media (max-width: 420px){
  .viewer-transform-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}



/* final mobile viewer fixes */
.viewer-scale-reference img{
  height:225px !important;
}

@media (max-width: 900px), (pointer: coarse){
  body.viewer-page .logo-link{
    top:12px !important;
    left:12px !important;
    z-index:90 !important;
  }

  body.viewer-page .logo-link img{
    height:40px !important;
  }

  .viewer-mobile-menu-btn{
    top:calc(env(safe-area-inset-top, 0px) + 12px) !important;
    right:12px !important;
    width:44px !important;
    height:44px !important;
    border-radius:14px !important;
    z-index:92 !important;
  }

  .viewer-mobile-menu-btn span{
    width:18px !important;
  }

  body.viewer-mobile-menu-open .viewer-toolbar{
    display:flex !important;
  }

  .viewer-toolbar{
    top:calc(env(safe-area-inset-top, 0px) + 64px) !important;
    right:12px !important;
    left:auto !important;
    gap:6px !important;
    align-items:flex-end !important;
    z-index:90 !important;
    max-width:none !important;
  }

  #publishProjectBtn,
  #resetTransformBtn,
  #viewerProjectsBtn,
  #toggleMovePanelBtn,
  #toggleScalePanelBtn,
  #toggleRotatePanelBtn,
  #addMediaBtn,
  #toggleDayNightBtn,
  #toggleFlyModeBtn,
  #addSceneModelBtn,
  .viewer-tool-btn,
  .publish-tool-btn{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    border-radius:12px !important;
  }

  #publishProjectBtn .viewer-tool-svg svg,
  #resetTransformBtn .viewer-tool-svg svg,
  #viewerProjectsBtn .viewer-tool-svg svg,
  #toggleMovePanelBtn .viewer-tool-svg svg,
  #toggleScalePanelBtn .viewer-tool-svg svg,
  #toggleRotatePanelBtn .viewer-tool-svg svg,
  #addMediaBtn .viewer-tool-svg svg,
  #toggleDayNightBtn .viewer-tool-svg svg,
  #toggleFlyModeBtn .viewer-tool-svg svg,
  #addSceneModelBtn .viewer-tool-svg svg,
  .viewer-tool-svg svg{
    width:17px !important;
    height:17px !important;
  }

  .instructions-wrap.instructions-card-wrap{
    position:fixed !important;
    top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 20px) !important;
    z-index:94 !important;
  }

  .instructions-card{
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 20px) !important;
    overflow:auto !important;
    padding:18px 16px 16px !important;
    gap:12px !important;
  }

  .instructions-close{
    top:10px !important;
    right:10px !important;
    width:36px !important;
    height:36px !important;
    border-radius:999px !important;
    background:rgba(24,28,34,.78) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:4 !important;
  }

  .instructions-kicker{
    font-size:11px !important;
    letter-spacing:.18em !important;
    padding-right:44px !important;
  }

  .instructions-title{
    font-size:clamp(30px, 7vw, 44px) !important;
    line-height:1.02 !important;
    padding-right:44px !important;
  }

  .instructions-body{
    font-size:clamp(16px, 3.9vw, 20px) !important;
    line-height:1.45 !important;
  }

  .instructions-visual-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .instructions-visual-item{
    min-height:0 !important;
    padding:14px 12px !important;
    gap:8px !important;
  }

  .instructions-visual-item strong{
    font-size:12px !important;
    letter-spacing:.16em !important;
  }

  .instructions-visual-item small,
  .instructions-list{
    font-size:14px !important;
    line-height:1.5 !important;
  }

  .mobile-joystick-shell{
    left:12px !important;
    bottom:12px !important;
    z-index:89 !important;
  }

  .mobile-joystick-base{
    width:104px !important;
    height:104px !important;
  }

  .mobile-joystick-knob{
    width:44px !important;
    height:44px !important;
  }

  .viewer-slider-panel,
  .viewer-mini-panel{
    left:12px !important;
    right:12px !important;
    width:auto !important;
    max-width:none !important;
    top:auto !important;
    bottom:110px !important;
  }
}

@media (max-width: 560px){
  .instructions-title{
    font-size:clamp(24px, 8vw, 36px) !important;
  }

  .instructions-body{
    font-size:15px !important;
  }

  .instructions-list{
    gap:6px !important;
  }
}

@media (orientation: landscape) and (max-width: 900px){
  .instructions-wrap.instructions-card-wrap{
    top:10px !important;
    right:64px !important;
    left:auto !important;
    width:min(430px, calc(100vw - 140px)) !important;
    max-height:calc(100dvh - 20px) !important;
  }

  .mobile-joystick-base{
    width:96px !important;
    height:96px !important;
  }
}



/* mobile viewer stack under burger/X + scale reference sizing */
@media (max-width: 900px), (pointer: coarse){
  .viewer-mobile-menu-btn{
    top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right:12px !important;
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
  }

  .viewer-mobile-menu-btn > span{
    display:inline-flex !important;
    flex-direction:column !important;
    gap:5px !important;
    align-items:center !important;
    justify-content:center !important;
    width:18px !important;
    height:18px !important;
  }

  .viewer-mobile-menu-btn span{
    width:18px !important;
    height:2px !important;
  }

  .viewer-toolbar{
    top:calc(env(safe-area-inset-top, 0px) + 58px) !important;
    right:12px !important;
    left:auto !important;
    gap:5px !important;
    align-items:flex-end !important;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 76px) !important;
    overflow:visible !important;
  }

  #publishProjectBtn,
  #resetTransformBtn,
  #viewerProjectsBtn,
  #toggleMovePanelBtn,
  #toggleScalePanelBtn,
  #toggleRotatePanelBtn,
  #addMediaBtn,
  #toggleDayNightBtn,
  #toggleFlyModeBtn,
  #addSceneModelBtn,
  .viewer-tool-btn,
  .publish-tool-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border-radius:11px !important;
  }

  #publishProjectBtn .viewer-tool-svg svg,
  #resetTransformBtn .viewer-tool-svg svg,
  #viewerProjectsBtn .viewer-tool-svg svg,
  #toggleMovePanelBtn .viewer-tool-svg svg,
  #toggleScalePanelBtn .viewer-tool-svg svg,
  #toggleRotatePanelBtn .viewer-tool-svg svg,
  #addMediaBtn .viewer-tool-svg svg,
  #toggleDayNightBtn .viewer-tool-svg svg,
  #toggleFlyModeBtn .viewer-tool-svg svg,
  #addSceneModelBtn .viewer-tool-svg svg,
  .viewer-tool-svg svg{
    width:16px !important;
    height:16px !important;
  }

  .mobile-joystick-base{
    width:96px !important;
    height:96px !important;
  }

  .mobile-joystick-knob{
    width:40px !important;
    height:40px !important;
  }

  .instructions-wrap.instructions-card-wrap{
    top:calc(env(safe-area-inset-top, 0px) + 8px) !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 16px) !important;
  }

  .instructions-card{
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 16px) !important;
    padding:16px 14px 14px !important;
    gap:10px !important;
  }

  .instructions-close{
    top:8px !important;
    right:8px !important;
    width:34px !important;
    height:34px !important;
    pointer-events:auto !important;
  }

  .instructions-title{
    font-size:clamp(22px, 7.5vw, 34px) !important;
    padding-right:40px !important;
  }

  .instructions-body{
    font-size:15px !important;
    line-height:1.4 !important;
  }

  .instructions-visual-item{
    padding:12px 10px !important;
  }

  .instructions-visual-item small,
  .instructions-list{
    font-size:13px !important;
    line-height:1.45 !important;
  }
}

@media (orientation: landscape) and (max-width: 900px){
  .viewer-toolbar{
    top:10px !important;
  }

  .instructions-wrap.instructions-card-wrap{
    top:8px !important;
    right:58px !important;
    left:auto !important;
    width:min(360px, calc(100vw - 120px)) !important;
    max-height:calc(100dvh - 16px) !important;
  }

  .instructions-title{
    font-size:clamp(20px, 4vw, 28px) !important;
  }

  .instructions-body{
    font-size:14px !important;
  }
}



/* 2026-04-24 final mobile viewer/editor correction pass */
.mobile-joystick-shell.is-visible:not([hidden]){
  display:block !important;
}

@media (max-width: 900px), (pointer: coarse){
  .viewer-mobile-menu-btn{
    top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right:12px !important;
    width:44px !important;
    height:44px !important;
    border-radius:14px !important;
    z-index:96 !important;
  }

  .viewer-mobile-menu-btn span{
    width:18px !important;
    height:2px !important;
  }

  .viewer-toolbar{
    position:fixed !important;
    top:calc(env(safe-area-inset-top, 0px) + 60px) !important;
    right:12px !important;
    left:auto !important;
    width:auto !important;
    max-width:none !important;
    max-height:none !important;
    overflow:visible !important;
    gap:6px !important;
    align-items:end !important;
    z-index:95 !important;
  }

  body.viewer-mobile-menu-open .viewer-toolbar,
  .viewer-toolbar.is-mobile-open{
    display:grid !important;
    grid-template-columns:repeat(2, 38px) !important;
    grid-auto-rows:38px !important;
    justify-content:end !important;
  }

  #publishProjectBtn,
  #resetTransformBtn,
  #viewerProjectsBtn,
  #toggleMovePanelBtn,
  #toggleScalePanelBtn,
  #toggleRotatePanelBtn,
  #addMediaBtn,
  #toggleDayNightBtn,
  #toggleFlyModeBtn,
  #addSceneModelBtn,
  .viewer-tool-btn,
  .publish-tool-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border-radius:11px !important;
    padding:0 !important;
  }

  #publishProjectBtn .viewer-tool-svg svg,
  #resetTransformBtn .viewer-tool-svg svg,
  #viewerProjectsBtn .viewer-tool-svg svg,
  #toggleMovePanelBtn .viewer-tool-svg svg,
  #toggleScalePanelBtn .viewer-tool-svg svg,
  #toggleRotatePanelBtn .viewer-tool-svg svg,
  #addMediaBtn .viewer-tool-svg svg,
  #toggleDayNightBtn .viewer-tool-svg svg,
  #toggleFlyModeBtn .viewer-tool-svg svg,
  #addSceneModelBtn .viewer-tool-svg svg,
  .viewer-tool-svg svg{
    width:15px !important;
    height:15px !important;
  }

  .instructions-wrap.instructions-card-wrap{
    position:fixed !important;
    top:calc(env(safe-area-inset-top, 0px) + 8px) !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 16px) !important;
    z-index:98 !important;
  }

  .instructions-card{
    display:grid !important;
    gap:10px !important;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 16px) !important;
    overflow:auto !important;
    padding:16px 14px 14px !important;
    border-radius:22px !important;
    background:rgba(44,48,55,.72) !important;
    border:1px solid rgba(255,255,255,.12) !important;
  }

  .instructions-close{
    position:absolute !important;
    top:8px !important;
    right:8px !important;
    width:34px !important;
    height:34px !important;
    border-radius:999px !important;
    background:rgba(24,28,34,.8) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    z-index:4 !important;
    pointer-events:auto !important;
  }

  .instructions-kicker{
    font-size:11px !important;
    letter-spacing:.16em !important;
    padding-right:40px !important;
  }

  .instructions-title{
    font-size:clamp(24px, 7vw, 34px) !important;
    line-height:1.02 !important;
    padding-right:40px !important;
  }

  .instructions-body{
    font-size:15px !important;
    line-height:1.42 !important;
  }

  .instructions-visual-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .instructions-visual-item{
    min-height:0 !important;
    padding:12px 10px !important;
    gap:8px !important;
  }

  .instructions-visual-icon{
    width:56px !important;
    height:56px !important;
  }

  .instructions-visual-item strong{
    font-size:12px !important;
    letter-spacing:.14em !important;
  }

  .instructions-visual-item small,
  .instructions-list{
    font-size:13px !important;
    line-height:1.45 !important;
  }

  .mobile-joystick-shell{
    left:12px !important;
    bottom:12px !important;
    z-index:94 !important;
  }

  .mobile-joystick-base{
    width:96px !important;
    height:96px !important;
  }

  .mobile-joystick-knob{
    width:40px !important;
    height:40px !important;
  }
}

@media (orientation: landscape) and (max-width: 900px){
  .instructions-wrap.instructions-card-wrap{
    top:8px !important;
    right:58px !important;
    left:auto !important;
    width:min(360px, calc(100vw - 120px)) !important;
    max-height:calc(100dvh - 16px) !important;
  }

  .instructions-title{
    font-size:clamp(20px, 4vw, 28px) !important;
  }

  .instructions-body{
    font-size:14px !important;
  }

  .instructions-visual-grid{
    gap:8px !important;
  }

  .mobile-joystick-base{
    width:88px !important;
    height:88px !important;
  }
}



/* 2026-04-24 paused build fix: much smaller mobile instructions */
@media (max-width: 900px), (pointer: coarse){
  .instructions-wrap.instructions-card-wrap{
    top:calc(env(safe-area-inset-top, 0px) + 6px) !important;
    left:8px !important;
    right:8px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 12px) !important;
  }

  .instructions-card{
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 12px) !important;
    padding:12px 12px 12px !important;
    gap:8px !important;
    border-radius:18px !important;
  }

  .instructions-close{
    top:6px !important;
    right:6px !important;
    width:30px !important;
    height:30px !important;
    font-size:18px !important;
  }

  .instructions-kicker{
    font-size:9px !important;
    letter-spacing:.12em !important;
    padding-right:34px !important;
  }

  .instructions-title{
    font-size:clamp(16px, 5vw, 22px) !important;
    line-height:1.04 !important;
    padding-right:34px !important;
  }

  .instructions-body{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .instructions-visual-grid{
    gap:8px !important;
  }

  .instructions-visual-item{
    padding:8px 8px !important;
    gap:6px !important;
    border-radius:14px !important;
  }

  .instructions-visual-icon{
    width:40px !important;
    height:40px !important;
  }

  .instructions-visual-item strong{
    font-size:10px !important;
    letter-spacing:.1em !important;
  }

  .instructions-visual-item small,
  .instructions-list{
    font-size:11px !important;
    line-height:1.35 !important;
  }
}

@media (orientation: landscape) and (max-width: 900px){
  .instructions-wrap.instructions-card-wrap{
    top:6px !important;
    right:52px !important;
    left:auto !important;
    width:min(300px, calc(100vw - 90px)) !important;
    max-height:calc(100dvh - 12px) !important;
  }

  .instructions-title{
    font-size:clamp(14px, 3vw, 18px) !important;
  }

  .instructions-body,
  .instructions-visual-item small,
  .instructions-list{
    font-size:10px !important;
    line-height:1.28 !important;
  }

  .instructions-visual-icon{
    width:34px !important;
    height:34px !important;
  }
}



/* 2026-04-24 mobile interaction + fly controls */
.mobile-fly-controls{
  position:fixed;
  left:12px;
  bottom:116px;
  z-index:95;
  display:none;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
.mobile-fly-controls[hidden]{
  display:none !important;
}
.mobile-fly-controls.is-visible{
  display:grid !important;
}
.mobile-fly-btn{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(24,28,34,.82);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-shadow:0 12px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.mobile-fly-btn svg{
  width:18px;
  height:18px;
  display:block;
  stroke:currentColor;
}

@media (max-width: 900px), (pointer: coarse){
  .mobile-joystick-shell{
    left:12px !important;
    bottom:12px !important;
  }

  .mobile-fly-controls{
    left:12px !important;
    bottom:116px !important;
  }

  .viewer-toolbar{
    align-items:end !important;
  }

  body.viewer-mobile-menu-open .viewer-toolbar,
  .viewer-toolbar.is-mobile-open{
    display:grid !important;
    grid-template-columns:repeat(2, 38px) !important;
    grid-auto-rows:38px !important;
    justify-content:end !important;
  }
}

@media (orientation: landscape) and (max-width: 900px){
  .mobile-joystick-shell{
    left:10px !important;
    bottom:10px !important;
  }

  .mobile-fly-controls{
    left:10px !important;
    bottom:100px !important;
  }

  body.viewer-mobile-menu-open .viewer-toolbar,
  .viewer-toolbar.is-mobile-open{
    grid-template-columns:repeat(3, 34px) !important;
    grid-auto-rows:34px !important;
    gap:5px !important;
  }

  #publishProjectBtn,
  #resetTransformBtn,
  #viewerProjectsBtn,
  #toggleMovePanelBtn,
  #toggleScalePanelBtn,
  #toggleRotatePanelBtn,
  #addMediaBtn,
  #toggleDayNightBtn,
  #toggleFlyModeBtn,
  #addSceneModelBtn,
  .viewer-tool-btn,
  .publish-tool-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    border-radius:10px !important;
  }

  #publishProjectBtn .viewer-tool-svg svg,
  #resetTransformBtn .viewer-tool-svg svg,
  #viewerProjectsBtn .viewer-tool-svg svg,
  #toggleMovePanelBtn .viewer-tool-svg svg,
  #toggleScalePanelBtn .viewer-tool-svg svg,
  #toggleRotatePanelBtn .viewer-tool-svg svg,
  #addMediaBtn .viewer-tool-svg svg,
  #toggleDayNightBtn .viewer-tool-svg svg,
  #toggleFlyModeBtn .viewer-tool-svg svg,
  #addSceneModelBtn .viewer-tool-svg svg,
  .viewer-tool-svg svg{
    width:14px !important;
    height:14px !important;
  }

  .mobile-fly-btn{
    width:38px;
    height:38px;
    border-radius:10px;
  }

  .mobile-fly-btn svg{
    width:16px;
    height:16px;
  }
}

/* QOL: make viewer instruction panels 25% smaller on mobile so they do not overlap controls. */
@media (max-width: 768px), (pointer: coarse) {
  body.viewer-page .instructions-overlay,
  .instructions-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 64px 12px 96px !important;
    overflow: hidden !important;
  }

  body.viewer-page .instructions-wrap.instructions-card-wrap,
  body.viewer-page .instructions-card-wrap,
  .instructions-wrap.instructions-card-wrap,
  .instructions-card-wrap {
    transform: scale(.75) !important;
    transform-origin: center center !important;
    width: min(470px, calc((100vw - 24px) / .75)) !important;
    max-width: calc((100vw - 24px) / .75) !important;
  }

  body.viewer-page .instructions-card,
  .instructions-card {
    max-height: calc((100dvh - 180px) / .75) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 430px) {
  body.viewer-page .instructions-overlay,
  .instructions-overlay {
    padding-top: 54px !important;
    padding-bottom: 88px !important;
  }

  body.viewer-page .instructions-wrap.instructions-card-wrap,
  body.viewer-page .instructions-card-wrap,
  .instructions-wrap.instructions-card-wrap,
  .instructions-card-wrap {
    transform: scale(.72) !important;
    width: min(470px, calc((100vw - 18px) / .72)) !important;
    max-width: calc((100vw - 18px) / .72) !important;
  }

  body.viewer-page .instructions-card,
  .instructions-card {
    max-height: calc((100dvh - 168px) / .72) !important;
  }
}

/* QOL controls: prevent mobile long-press text selection in the viewer/editor. */
body.viewer-page,
body.viewer-page button,
body.viewer-page .viewer-toolbar,
body.viewer-page .viewer-mobile-menu,
body.viewer-page .joystick,
body.viewer-page .joystick * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body.viewer-page button,
body.viewer-page .joystick,
body.viewer-page .joystick * {
  touch-action: manipulation;
}
body.viewer-page input,
body.viewer-page textarea,
body.viewer-page select {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.media-editor-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
}
.media-delete-btn{
  border-color:rgba(255,105,105,.35)!important;
  color:#ff8a8a!important;
  background:rgba(255,105,105,.08)!important;
}
.media-delete-btn:hover{
  border-color:rgba(255,105,105,.65)!important;
  background:rgba(255,105,105,.14)!important;
}
@media(max-width:640px){
  .media-editor-actions{justify-content:stretch;}
  .media-editor-actions button{flex:1 1 100%;}
}

/* Test branch feature stage: upload source choice, time-of-day panel, wider media panels */
.project-source-panel{max-width:900px;text-align:center;}
.project-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px;}
.project-source-card{border:1px solid rgba(255,255,255,.14);background:linear-gradient(145deg,rgba(9,25,44,.82),rgba(2,8,16,.92));border-radius:22px;padding:26px 22px;color:#fff;text-align:left;box-shadow:0 24px 60px rgba(0,0,0,.32);cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;min-height:180px;display:flex;flex-direction:column;gap:10px;}
.project-source-card:hover{transform:translateY(-3px);border-color:rgba(77,184,255,.55);box-shadow:0 26px 70px rgba(0,137,255,.18);}
.project-source-card strong{font-size:20px;letter-spacing:.02em;}
.project-source-card small{color:rgba(255,255,255,.72);line-height:1.45;font-size:14px;}
.source-card-icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:rgba(84,190,255,.14);border:1px solid rgba(84,190,255,.28);color:#7fe2ff;font-size:24px;}
.source-choice-note{max-width:620px;margin:0 auto;}
.source-back-btn{position:absolute;top:22px;left:22px;}
.floorplan-panel{position:relative;max-width:720px;}
.viewer-time-panel{display:none;right:92px;top:28px;width:300px;}
.viewer-time-panel.is-open{display:block;}
.publish-toggle-row{margin-top:14px;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.86);font-size:14px;justify-content:center;}
.publish-toggle-row input{width:18px;height:18px;accent-color:#58c7ff;}
.overlay-panel.media-panel{width:min(70vw,920px) !important;max-height:70vh !important;overflow:auto;}
.media-panel textarea{min-height:130px;}
@media (max-width:900px){
  .project-source-grid{grid-template-columns:1fr;}
  .project-source-card{min-height:138px;padding:20px;}
  .viewer-time-panel{left:14px !important;right:14px !important;top:auto !important;bottom:92px !important;width:auto !important;}
  .overlay-panel.media-panel{width:min(100%,calc(100vw - 20px)) !important;max-height:70vh !important;}
}

/* Test branch QOL: publish sticky-note toggle + time-of-day panel polish */
.publish-switch-row{
  margin:16px auto 0;
  max-width:520px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 16px;
  border:1px solid rgba(88,199,255,.24);
  border-radius:18px;
  background:rgba(4,12,24,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer;
}
.publish-switch-copy{display:flex;flex-direction:column;gap:3px;text-align:left;line-height:1.25;}
.publish-switch-copy strong{font-size:14px;font-weight:700;letter-spacing:.01em;color:#fff;}
.publish-switch-copy small{font-size:12px;color:rgba(255,255,255,.62);font-weight:500;}
.publish-switch{position:relative;display:inline-flex;width:48px;height:28px;flex:0 0 48px;}
.publish-switch input{opacity:0;width:0;height:0;position:absolute;}
.publish-switch-slider{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);transition:.22s ease;box-shadow:inset 0 2px 8px rgba(0,0,0,.35);}
.publish-switch-slider:before{content:"";position:absolute;width:22px;height:22px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 5px 15px rgba(0,0,0,.35);transition:.22s ease;}
.publish-switch input:checked + .publish-switch-slider{background:linear-gradient(135deg,#34b8ff,#7c5cff);border-color:rgba(88,199,255,.8);box-shadow:0 0 20px rgba(52,184,255,.24), inset 0 2px 8px rgba(0,0,0,.18);}
.publish-switch input:checked + .publish-switch-slider:before{transform:translateX(20px);}
.viewer-time-panel{padding:16px 16px 14px;backdrop-filter:blur(18px);}
.sun-time-track-row{display:flex;align-items:center;justify-content:space-between;margin:12px 4px 4px;color:rgba(255,255,255,.88);}
.sun-time-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:15px;}
.sun-time-controls{display:block;margin-top:8px;}
.sun-time-range{width:100%;}
.viewer-tool-btn.is-active #dayNightIcon,
.viewer-tool-btn.is-active .viewer-tool-svg{color:#58c7ff;}
.failed-panel .overlay-title{letter-spacing:.02em;}

@media (max-width:768px){
  .publish-switch-row{padding:12px 13px;gap:12px;}
  .publish-switch-copy strong{font-size:13px;}
  .publish-switch-copy small{font-size:11px;}
  .viewer-time-panel{left:14px!important;right:14px!important;bottom:92px!important;top:auto!important;width:auto!important;}
}

/* TEST BRANCH FEATURE STAGE 2: upload choice, mobile intro centering, sticky notes, material editor, realism tweaks */
.project-source-panel { max-width: 900px; }
.project-source-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:18px; margin-top:22px; }
.project-source-card { min-height:190px; border:1px solid rgba(95,211,255,.26); border-radius:28px; background:linear-gradient(145deg, rgba(7,18,34,.92), rgba(10,39,63,.72)); color:#f4fbff; padding:24px; text-align:left; cursor:pointer; box-shadow:0 24px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.project-source-card:hover { transform:translateY(-3px); border-color:rgba(95,211,255,.62); box-shadow:0 30px 90px rgba(0,0,0,.42), 0 0 40px rgba(95,211,255,.12); }
.source-card-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:18px; margin-bottom:18px; color:#8fe7ff; background:rgba(95,211,255,.12); border:1px solid rgba(95,211,255,.24); font-size:28px; }
.project-source-card strong { display:block; font-size:1.22rem; letter-spacing:-.02em; margin-bottom:8px; }
.project-source-card small { color:rgba(226,244,255,.72); line-height:1.55; }
.floorplan-panel { max-width:760px; }
.done-btn[hidden] { display:none !important; }
.viewer-textarea { width:100%; min-height:112px; border:1px solid rgba(95,211,255,.22); border-radius:18px; background:rgba(4,14,27,.92); color:#f5fbff; padding:14px 16px; resize:vertical; outline:none; font:inherit; }
.viewer-textarea:focus, .viewer-select:focus, .viewer-color-input:focus { border-color:rgba(95,211,255,.7); box-shadow:0 0 0 3px rgba(95,211,255,.12); }
.viewer-field-label { display:grid; gap:7px; color:rgba(226,244,255,.78); font-size:.82rem; margin:10px 0; }
.viewer-select, .viewer-color-input { width:100%; min-height:42px; border:1px solid rgba(95,211,255,.22); border-radius:14px; background:rgba(4,14,27,.92); color:#f5fbff; padding:8px 10px; }
.viewer-color-input { padding:4px; }
.viewer-sticky-panel, .viewer-material-panel { width:min(360px, calc(100vw - 28px)); }
.sticky-note-object { pointer-events:auto; }
.sticky-note-card { position:absolute; z-index:30; max-width:260px; padding:14px 16px; border-radius:20px; border:1px solid rgba(95,211,255,.32); background:linear-gradient(145deg, rgba(6,26,47,.94), rgba(11,62,92,.84)); color:#edfaff; box-shadow:0 24px 80px rgba(0,0,0,.35), 0 0 28px rgba(95,211,255,.12); font-size:.9rem; line-height:1.45; }
.sticky-note-card-actions { display:flex; gap:8px; margin-top:12px; }
.sticky-note-action { width:28px; height:28px; border-radius:999px; border:1px solid rgba(95,211,255,.32); background:rgba(255,255,255,.06); color:#eaffff; display:grid; place-items:center; cursor:pointer; }
@media (max-width: 768px) {
  .project-source-grid { grid-template-columns:1fr; }
  .project-source-card { min-height:150px; border-radius:24px; padding:20px; }
  .instructions-overlay { align-items:center !important; justify-content:center !important; padding:calc(68px + env(safe-area-inset-top)) 14px calc(110px + env(safe-area-inset-bottom)) !important; }
  .instructions-wrap, .instructions-card-wrap, .instructions-card { margin-left:auto !important; margin-right:auto !important; transform-origin:center center !important; }
  .instructions-card { max-height:calc(100dvh - 190px) !important; overflow:auto !important; }
}

/* Test branch stage 3 amends */
.analytics-all-note{margin-top:14px;color:rgba(214,230,255,.72);font-size:14px;line-height:1.55;text-align:center;}
.project-source-panel{max-width:920px;margin:0 auto;}
.project-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:26px;}
.project-source-card{min-height:210px;border-radius:26px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(18,30,48,.82),rgba(8,14,24,.72));color:#fff;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;box-shadow:0 24px 70px rgba(0,0,0,.28);cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.project-source-card:hover{transform:translateY(-3px);border-color:rgba(83,184,255,.46);background:linear-gradient(180deg,rgba(24,42,68,.9),rgba(9,18,34,.78));}
.project-source-card strong{font-size:18px;letter-spacing:.02em;text-transform:uppercase;}
.project-source-card small{max-width:260px;color:rgba(214,230,255,.72);line-height:1.45;}
.source-card-icon{width:58px;height:58px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;background:rgba(83,184,255,.12);border:1px solid rgba(83,184,255,.24);color:#76d5ff;font-size:28px;}
.viewer-panel-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.viewer-panel-reset{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;line-height:1;}
.viewer-panel-reset:hover{background:rgba(83,184,255,.16);border-color:rgba(83,184,255,.42);}
.viewer-tool-btn.icon-btn#addStickyNoteBtn,
.viewer-tool-btn.icon-btn#toggleMaterialEditorBtn{width:48px !important;height:48px !important;min-width:48px !important;padding:0 !important;border-radius:14px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}
.viewer-tool-btn.icon-btn#addStickyNoteBtn[hidden]{display:none !important;}
.viewer-tool-btn.icon-btn#addStickyNoteBtn .viewer-tool-svg,
.viewer-tool-btn.icon-btn#toggleMaterialEditorBtn .viewer-tool-svg{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;}
.viewer-tool-btn.icon-btn#addStickyNoteBtn svg,
.viewer-tool-btn.icon-btn#toggleMaterialEditorBtn svg{width:24px;height:24px;display:block;}
.viewer-sticky-panel textarea{min-height:104px;width:100%;resize:vertical;}
.publish-password-row{margin-top:12px;}
.delete-selected-model-btn,.viewer-danger-btn,#deleteSelectedSceneModelBtn{text-align:center !important;justify-content:center !important;align-items:center !important;}
body.viewer-page .instructions-overlay{align-items:center !important;justify-content:center !important;}
body.viewer-page .instructions-card-wrap{margin:auto !important;}
@media (max-width:900px), (pointer:coarse){
  .project-source-grid{grid-template-columns:1fr;gap:16px;}
  .project-source-card{min-height:172px;padding:22px;}
  .viewer-tool-btn.icon-btn#addStickyNoteBtn,
  .viewer-tool-btn.icon-btn#toggleMaterialEditorBtn{width:42px !important;height:42px !important;min-width:42px !important;border-radius:12px !important;}
  .viewer-tool-btn.icon-btn#addStickyNoteBtn .viewer-tool-svg,
  .viewer-tool-btn.icon-btn#toggleMaterialEditorBtn .viewer-tool-svg,
  .viewer-tool-btn.icon-btn#addStickyNoteBtn svg,
  .viewer-tool-btn.icon-btn#toggleMaterialEditorBtn svg{width:22px;height:22px;}
}

/* Test branch project source choice refinements */
.source-choice-message{min-height:22px;margin-top:16px;color:rgba(133,214,255,.92);font-size:14px;text-align:center;}
.project-source-card-soon{position:relative;}
.project-source-card-soon::after{content:"COMING SOON";position:absolute;top:14px;right:14px;border:1px solid rgba(95,211,255,.38);border-radius:999px;padding:5px 9px;font-size:10px;letter-spacing:.12em;color:#b9efff;background:rgba(95,211,255,.08);}
.project-source-card-soon:hover{transform:none;}
@media (max-width:720px){.project-source-card-soon::after{top:12px;right:12px;font-size:9px;}}

/* Test branch: project source cards visual refinement */
.project-source-card{align-items:center !important;text-align:center !important;position:relative !important;overflow:hidden !important;padding:30px 24px 26px !important;}
.project-source-card::before{content:"";position:absolute;inset:-40% -20% auto;height:120px;background:radial-gradient(circle at 50% 40%, rgba(84,190,255,.18), transparent 62%);pointer-events:none;}
.source-card-icon{display:none !important;}
.source-card-art{width:112px;height:112px;margin:0 auto 8px;color:#7fe2ff;display:grid;place-items:center;filter:drop-shadow(0 14px 28px rgba(48,184,255,.18));}
.source-card-art svg{width:100%;height:100%;}
.source-card-badge{position:static;display:inline-flex;align-items:center;justify-content:center;margin:0 auto 8px;border:1px solid rgba(95,211,255,.38);border-radius:999px;padding:6px 12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#b9efff;background:rgba(95,211,255,.08);}
.project-source-card-soon::after{display:none !important;}
.project-source-card strong{position:relative;z-index:1;font-size:22px !important;}
.project-source-card small{position:relative;z-index:1;max-width:280px;margin:0 auto;}
@media(max-width:720px){.source-card-art{width:96px;height:96px}.project-source-card{padding:24px 20px 22px !important}.source-card-badge{margin-bottom:8px}}

/* Test branch stage 5: source progress, viewer panels, sticky/material controls */
.bottom-progress .progress span#bottomProgressFill{transition:width .32s ease;}
.viewer-tool-btn.icon-btn#addStickyNoteBtn,
.viewer-tool-btn.icon-btn#toggleMaterialEditorBtn{
  background:rgba(12,20,32,.74) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18) !important;
  color:#fff !important;
}
.viewer-tool-btn.icon-btn#addStickyNoteBtn:hover,
.viewer-tool-btn.icon-btn#toggleMaterialEditorBtn:hover{
  background:rgba(26,38,58,.88) !important;
  border-color:rgba(83,184,255,.36) !important;
}
.viewer-panel-close{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.viewer-time-panel{display:none;}
.viewer-time-panel.is-open{display:block;}
.viewer-field-label .viewer-file-input{
  margin-top:8px;
  width:100%;
  color:rgba(255,255,255,.82);
  font-size:12px;
}
.sticky-note-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  align-items:center;
}
.sticky-note-actions .retry-btn,
.sticky-note-actions .ghost-btn{
  min-height:42px;
  justify-content:center;
  text-align:center;
}
.ghost-btn.danger{
  border-color:rgba(255,120,120,.36) !important;
  color:#ffd0d0 !important;
}
@media (max-width:720px){
  .sticky-note-actions{grid-template-columns:1fr;}
}

/* Test branch 20/05 viewer/editor QOL fixes */
#linkTagOverlay .video-tag-panel{
  width:80vw !important;
  max-width:80vw !important;
  height:80vh !important;
  max-height:80vh !important;
  display:flex;
  flex-direction:column;
}
#linkTagOverlay .video-embed-wrap{flex:1 1 auto;min-height:0;height:auto !important;}
#linkTagOverlay iframe{height:100% !important;min-height:0 !important;}
.media-editor-actions{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:12px !important;margin-top:14px !important;}
.media-editor-actions .media-delete-btn{background:transparent !important;border:0 !important;box-shadow:none !important;color:#fff !important;text-align:center !important;justify-content:center !important;padding:4px 0 !important;width:auto !important;min-width:0 !important;font-weight:600 !important;letter-spacing:.02em !important;text-transform:none !important;}
.media-editor-actions #saveMediaBtn{align-self:center !important;justify-content:center !important;text-align:center !important;min-width:170px !important;}
#toggleFlyModeBtn.is-active{background:rgba(12,20,32,.74) !important;border-color:rgba(255,255,255,.14) !important;color:#fff !important;box-shadow:0 12px 28px rgba(0,0,0,.18) !important;}
.sun-time-track-row{align-items:center !important;}
.sun-time-icon{display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important;}
.sun-time-note{text-align:center !important;margin-bottom:10px !important;}
.sun-time-reset{position:static !important;display:flex !important;align-items:center !important;justify-content:center !important;margin:8px auto 0 !important;width:auto !important;min-width:160px !important;height:auto !important;padding:9px 14px !important;border-radius:999px !important;border:1px solid rgba(255,255,255,.16) !important;background:rgba(255,255,255,.07) !important;color:#fff !important;font-size:12px !important;letter-spacing:.04em !important;}
.viewer-tool-btn.icon-btn#addStickyNoteBtn,
.viewer-tool-btn.icon-btn#toggleMaterialEditorBtn{background:rgba(12,20,32,.74) !important;border-color:rgba(255,255,255,.14) !important;color:#fff !important;}
.viewer-tool-btn.icon-btn#addStickyNoteBtn:hover,
.viewer-tool-btn.icon-btn#toggleMaterialEditorBtn:hover{background:rgba(26,38,58,.88) !important;border-color:rgba(83,184,255,.36) !important;}
.viewer-material-panel.is-open,.viewer-sticky-panel.is-open,.viewer-time-panel.is-open{display:flex !important;}
.viewer-material-panel{align-items:stretch !important;flex-direction:column !important;gap:12px !important;}
.viewer-select,.viewer-color-input,.viewer-file-input{width:100% !important;}
@media(max-width:768px){
  #linkTagOverlay .video-tag-panel{width:92vw !important;max-width:92vw !important;height:78vh !important;}
}

/* Test branch quick fix: keep help/question icon white on all editor/upload pages */
.support-widget,
.support-widget:visited,
.support-widget:hover,
.support-widget:focus {
  color: #fff !important;
}
.support-widget img {
  filter: brightness(0) invert(1) !important;
}
.support-widget svg,
.support-widget svg * {
  fill: #fff !important;
  stroke: #fff !important;
}


/* Test branch Stage 7: day/night + material panel fixes */
.viewer-time-panel[hidden],
.viewer-material-panel[hidden],
.viewer-sticky-panel[hidden]{display:none !important;}
.viewer-time-panel,
.viewer-material-panel,
.viewer-sticky-panel{
  align-items:stretch !important;
  flex-direction:column !important;
  gap:12px !important;
  padding:22px 16px 16px !important;
  min-width:300px;
}
.viewer-time-panel.is-open,
.viewer-time-panel.open,
.viewer-material-panel.is-open,
.viewer-material-panel.open,
.viewer-sticky-panel.is-open,
.viewer-sticky-panel.open{display:flex !important;}
.viewer-panel-close{
  position:absolute !important;
  top:8px !important;
  right:10px !important;
  z-index:3 !important;
}
.viewer-panel-label-row{margin-top:4px !important;}
.viewer-time-panel .viewer-panel-label-row,
.viewer-material-panel .viewer-panel-label-row,
.viewer-sticky-panel .viewer-panel-label-row{padding-right:34px !important;}
.sun-time-track-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  align-items:center !important;
  justify-items:center !important;
  gap:12px !important;
  margin:8px 0 2px !important;
}
.sun-time-icon{
  width:34px !important;
  height:34px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  font-size:17px !important;
}
.sun-time-controls{width:100% !important;margin-top:6px !important;}
.sun-time-range{width:100% !important;writing-mode:horizontal-tb !important;appearance:auto !important;}
.sun-time-note{text-align:center !important;margin:6px 0 0 !important;}
.sun-time-reset{margin:8px auto 0 !important;}
.viewer-material-panel .viewer-field-label{gap:7px !important;}
.viewer-material-tiling-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;}
.viewer-material-tiling-row .viewer-inline-input{width:100% !important;min-width:0 !important;text-align:center;}
#materialOpacityInput,
#materialTileXInput,
#materialTileYInput{margin-top:4px;}
.viewer-tool-btn.icon-btn#addStickyNoteBtn,
.viewer-tool-btn.icon-btn#toggleMaterialEditorBtn{
  background:rgba(12,20,32,.74) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#fff !important;
}
.viewer-tool-btn.icon-btn#addStickyNoteBtn:hover,
.viewer-tool-btn.icon-btn#toggleMaterialEditorBtn:hover{
  background:rgba(26,38,58,.88) !important;
  border-color:rgba(83,184,255,.36) !important;
}
@media (max-width:900px), (pointer:coarse){
  .viewer-time-panel,
  .viewer-material-panel,
  .viewer-sticky-panel{left:14px !important;right:14px !important;top:auto !important;bottom:92px !important;width:auto !important;min-width:0 !important;}
}

/* Stage 8: clearer transform header spacing and add-3D-model panel */
.viewer-transform-panel{
  padding-top:42px !important;
}
.viewer-transform-panel .viewer-panel-close{
  top:12px !important;
  right:12px !important;
}
.viewer-transform-panel .viewer-move-target-row{
  margin-top:4px !important;
}
.viewer-add-model-panel{
  width:min(390px, calc(100vw - 28px));
  align-items:stretch !important;
  flex-direction:column !important;
  gap:14px !important;
  padding-top:42px !important;
}
.viewer-add-model-panel[hidden]{display:none !important;}
.viewer-add-model-panel.is-open,
.viewer-add-model-panel.open{display:flex !important;}
.scene-model-drop-card{
  appearance:none;
  width:100%;
  min-height:260px;
  border:1px dashed rgba(127,226,255,.36);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(15,32,52,.78),rgba(7,13,25,.84));
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:24px 20px;
  text-align:center;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 54px rgba(0,0,0,.28);
}
.scene-model-drop-card:hover{
  border-color:rgba(127,226,255,.72);
  background:linear-gradient(180deg,rgba(18,42,68,.9),rgba(8,18,34,.88));
}
.scene-model-cube{
  width:118px;
  height:118px;
  display:grid;
  place-items:center;
  color:#7fe2ff;
  filter:drop-shadow(0 18px 34px rgba(72,196,255,.24));
}
.scene-model-cube svg{width:100%;height:100%;}
.scene-model-drop-card strong{
  font-size:18px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.scene-model-drop-card small{
  max-width:270px;
  color:rgba(226,244,255,.72);
  line-height:1.45;
}
@media(max-width:780px){
  .viewer-add-model-panel{bottom:92px !important;left:14px !important;right:14px !important;width:auto !important;}
  .scene-model-drop-card{min-height:220px;}
  .scene-model-cube{width:96px;height:96px;}
}

/* Stage 9: material reset, media close X, help icon colour */
#resetMaterialBtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:center !important;
  min-width:190px !important;
  height:46px !important;
  padding:0 24px !important;
  border-radius:999px !important;
  border:1px solid rgba(94,190,255,.45) !important;
  background:rgba(255,255,255,.04) !important;
  color:#fff !important;
  font-size:12px !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  box-shadow:none !important;
}
#resetMaterialBtn:hover{
  border-color:rgba(255,255,255,.28) !important;
  background:rgba(255,255,255,.08) !important;
}
#mediaOverlay .media-panel{
  position:relative !important;
  padding-top:42px !important;
}
#mediaOverlay #closeMediaBtn{
  position:absolute !important;
  top:8px !important;
  right:10px !important;
  z-index:4 !important;
  width:34px !important;
  height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  background:transparent !important;
  color:#fff !important;
  font-size:24px !important;
  line-height:1 !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
#mediaOverlay #closeMediaBtn:hover{color:#9ee0ff !important;}
.support-widget img,
.help-btn img,
.help-toggle img,
#helpToggle img{
  filter:brightness(0) invert(1) !important;
}
.support-widget svg,
.support-widget svg *,
.help-btn svg,
.help-btn svg *,
.help-toggle svg,
.help-toggle svg *,
#helpToggle svg,
#helpToggle svg *{
  fill:#fff !important;
  stroke:#fff !important;
}


/* Stage 10: do not revert help/question icon - force white on all pages */
.support-widget,
.support-widget:visited,
.support-widget:hover,
.support-widget:focus,
.help-btn,
.help-toggle,
#helpToggle {
  color: #fff !important;
}
.support-widget img,
.help-btn img,
.help-toggle img,
#helpToggle img {
  filter: brightness(0) invert(1) !important;
}
.support-widget svg,
.support-widget svg *,
.help-btn svg,
.help-btn svg *,
.help-toggle svg,
.help-toggle svg *,
#helpToggle svg,
#helpToggle svg * {
  fill: #fff !important;
  stroke: #fff !important;
}

/* Stage 11: sticky notes as media-style placement icons */
.viewer-tool-btn.icon-btn#addStickyNoteBtn .sticky-note-tool-svg{
  color:#fff !important;
  filter:drop-shadow(0 0 8px rgba(86,205,255,.35));
}
.viewer-tool-btn.icon-btn#addStickyNoteBtn svg *{
  stroke:currentColor !important;
}
.viewer-sticky-panel{
  padding-top:48px !important;
}
.viewer-sticky-panel .viewer-panel-label-row{
  margin-top:0 !important;
}
.viewer-sticky-panel .viewer-textarea{
  min-height:136px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
  font:500 .95rem/1.45 Inter, system-ui, sans-serif !important;
  padding:14px !important;
}
.viewer-sticky-panel .viewer-textarea::placeholder{color:rgba(255,255,255,.5) !important;}
.sticky-note-actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  margin-top:12px !important;
}
.sticky-note-actions .retry-btn,
.sticky-note-actions .ghost-btn{
  width:100% !important;
  justify-content:center !important;
  text-align:center !important;
}
.sticky-note-view-overlay{
  display:none;
  z-index:1200;
}
.sticky-note-view-panel{
  position:relative !important;
  width:min(430px, calc(100vw - 34px)) !important;
  padding:54px 28px 30px !important;
  border:1px solid rgba(100,218,255,.26) !important;
  background:linear-gradient(145deg, rgba(5,16,28,.96), rgba(8,40,63,.92)) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.46), 0 0 48px rgba(65,198,255,.12) !important;
  overflow:hidden !important;
}
.sticky-note-view-panel::before{
  content:"";
  position:absolute;
  inset:-34% -20% auto auto;
  width:230px;
  height:230px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(79,210,255,.22), transparent 64%);
  pointer-events:none;
}
.sticky-note-view-panel .modal-x-plain{
  top:12px !important;
  right:14px !important;
  color:#fff !important;
}
.sticky-note-complete-btn{
  position:absolute !important;
  top:12px !important;
  left:14px !important;
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  display:inline-grid !important;
  place-items:center !important;
  border:1px solid rgba(150,235,255,.38) !important;
  background:rgba(255,255,255,.07) !important;
  color:#fff !important;
  font-size:18px !important;
  line-height:1 !important;
  cursor:pointer !important;
}
.sticky-note-complete-btn:hover{
  background:rgba(80,205,255,.18) !important;
  border-color:rgba(150,235,255,.62) !important;
}
.sticky-note-view-panel .modal-pen-plain{
  top:12px !important;
  right:54px !important;
  color:#fff !important;
}
.sticky-note-view-icon{
  width:64px;
  height:64px;
  margin:0 auto 14px;
  border-radius:50%;
  border:2px solid rgba(95,211,255,.86);
  box-shadow:0 0 24px rgba(80,205,255,.32), inset 0 0 18px rgba(80,205,255,.08);
  position:relative;
}
.sticky-note-view-icon::before{
  content:"";
  position:absolute;
  width:27px;
  height:34px;
  left:18px;
  top:14px;
  border-radius:6px;
  border:2px solid rgba(233,250,255,.95);
  background:rgba(238,252,255,.16);
}
.sticky-note-view-icon::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  right:17px;
  bottom:14px;
  border-left:2px solid rgba(233,250,255,.95);
  border-top:2px solid rgba(233,250,255,.95);
  transform:rotate(180deg);
}
.sticky-note-view-text{
  margin:16px auto 0 !important;
  max-width:330px !important;
  color:rgba(238,250,255,.94) !important;
  text-align:center !important;
  font:500 1rem/1.55 Inter, system-ui, sans-serif !important;
  white-space:pre-wrap !important;
}
@media (max-width:700px){
  .sticky-note-view-panel{padding:52px 20px 26px !important;}
}


/* Stage 12: media popups match sticky-note UI and sticky-note action layout */
#infoTagOverlay .info-tag-panel,
#videoTagOverlay .video-tag-panel,
#linkTagOverlay .video-tag-panel{
  position:relative !important;
  border:1px solid rgba(100,218,255,.26) !important;
  background:linear-gradient(145deg, rgba(5,16,28,.96), rgba(8,40,63,.92)) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.46), 0 0 48px rgba(65,198,255,.12) !important;
  overflow:hidden !important;
}
#infoTagOverlay .info-tag-panel::before,
#videoTagOverlay .video-tag-panel::before,
#linkTagOverlay .video-tag-panel::before{
  content:"";
  position:absolute;
  inset:-34% -20% auto auto;
  width:230px;
  height:230px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(79,210,255,.22), transparent 64%);
  pointer-events:none;
  z-index:0;
}
#infoTagOverlay .info-tag-panel > *,
#videoTagOverlay .video-tag-panel > *,
#linkTagOverlay .video-tag-panel > *{
  position:relative;
  z-index:1;
}
#infoTagOverlay .overlay-title,
#videoTagOverlay .overlay-title,
#linkTagOverlay .overlay-title{
  color:rgba(238,250,255,.96) !important;
  text-align:center !important;
  letter-spacing:.02em !important;
}
#infoTagOverlay .info-tag-copy,
#linkTagOverlay .link-embed-note{
  color:rgba(238,250,255,.86) !important;
  text-align:center !important;
}
#infoTagOverlay .modal-x-plain,
#videoTagOverlay .modal-x-plain,
#linkTagOverlay .modal-x-plain{
  top:12px !important;
  right:14px !important;
  color:#fff !important;
}
#infoTagOverlay .modal-pen-plain,
#videoTagOverlay .modal-pen-plain,
#linkTagOverlay .modal-pen-plain{
  top:12px !important;
  left:14px !important;
  right:auto !important;
  color:#fff !important;
}
#infoTagOverlay .retry-btn,
#linkTagOverlay .retry-btn{
  border:1px solid rgba(150,235,255,.38) !important;
  background:rgba(255,255,255,.07) !important;
  color:#fff !important;
}
#videoTagOverlay .video-embed-wrap,
#linkTagOverlay .video-embed-wrap{
  border:1px solid rgba(100,218,255,.18) !important;
  border-radius:20px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.06) !important;
  box-shadow:inset 0 0 22px rgba(80,205,255,.07) !important;
}
.sticky-note-view-panel .modal-pen-plain{
  top:12px !important;
  left:14px !important;
  right:auto !important;
  color:#fff !important;
}
.sticky-note-resolution-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  margin:18px auto 0 !important;
}
.sticky-note-resolve-btn{
  position:static !important;
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  display:inline-grid !important;
  place-items:center !important;
  border:1px solid rgba(150,235,255,.38) !important;
  background:rgba(255,255,255,.07) !important;
  color:#fff !important;
  font-size:20px !important;
  line-height:1 !important;
  cursor:pointer !important;
}
.sticky-note-resolve-btn:hover{
  background:rgba(80,205,255,.18) !important;
  border-color:rgba(150,235,255,.62) !important;
}
.sticky-note-not-doable-btn{
  border-color:rgba(255,130,130,.38) !important;
}
.sticky-note-not-doable-btn:hover{
  background:rgba(255,80,80,.14) !important;
  border-color:rgba(255,150,150,.62) !important;
}

/* Stage 13: media editor right-side tab and 16:9 media-tag viewer panels */
#mediaOverlay{
  align-items:flex-start !important;
  justify-content:flex-end !important;
  padding:92px 24px 24px !important;
  background:transparent !important;
  pointer-events:none !important;
}
#mediaOverlay .media-panel{
  pointer-events:auto !important;
  width:min(390px, calc(100vw - 32px)) !important;
  max-width:min(390px, calc(100vw - 32px)) !important;
  max-height:calc(100dvh - 116px) !important;
  min-height:0 !important;
  overflow:auto !important;
  align-self:flex-start !important;
  padding:52px 18px 18px !important;
  border-radius:24px !important;
  text-align:left !important;
}
#mediaOverlay .media-panel .modal-x-plain{
  top:8px !important;
  right:10px !important;
  left:auto !important;
  width:30px !important;
  height:30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  font-size:22px !important;
  line-height:1 !important;
  padding:0 !important;
}
#mediaOverlay .media-panel .modal-x-plain:hover{
  background:rgba(83,184,255,.16) !important;
  border-color:rgba(83,184,255,.42) !important;
}
#mediaOverlay .overlay-title{
  text-align:left !important;
  padding-right:38px !important;
  margin-bottom:12px !important;
}
#mediaOverlay .media-icon-picker{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:8px !important;
}
#mediaOverlay .media-icon-choice{
  min-height:48px !important;
  padding:8px !important;
  border-radius:14px !important;
}
#mediaOverlay .media-icon-choice img{
  width:30px !important;
  height:30px !important;
  max-height:30px !important;
  object-fit:contain !important;
}
#mediaOverlay .media-icon-choice-wide{
  min-height:46px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
}
#mediaOverlay .media-icon-choice-wide span{
  font-size:10px !important;
  letter-spacing:.1em !important;
}
#mediaOverlay .media-form-grid,
#mediaOverlay .media-form-grid-compact{
  grid-template-columns:1fr !important;
  gap:10px !important;
}
#mediaOverlay .media-form-grid input,
#mediaOverlay .media-form-grid select{
  height:42px !important;
  border-radius:14px !important;
}
#mediaOverlay .media-editor-actions{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:10px !important;
  margin-top:14px !important;
}
#mediaOverlay .media-editor-actions .retry-btn,
#mediaOverlay .media-editor-actions .ghost-btn{
  min-height:40px !important;
  width:100% !important;
  justify-content:center !important;
  font-size:11px !important;
  letter-spacing:.12em !important;
}

@media (min-width:781px){
  #infoTagOverlay,
  #videoTagOverlay,
  #linkTagOverlay{
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
  }
  #infoTagOverlay .info-tag-panel,
  #videoTagOverlay .video-tag-panel,
  #linkTagOverlay .video-tag-panel{
    width:80vw !important;
    max-width:80vw !important;
    height:auto !important;
    max-height:80vh !important;
    aspect-ratio:16 / 9 !important;
    padding:54px 34px 28px !important;
    display:flex !important;
    flex-direction:column !important;
  }
  #videoTagOverlay .video-embed-wrap,
  #linkTagOverlay .video-embed-wrap{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:auto !important;
  }
  #videoTagOverlay iframe,
  #linkTagOverlay iframe{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
  }
  #infoTagOverlay .info-tag-copy{
    flex:1 1 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    max-width:min(900px, 84%) !important;
    margin:0 auto !important;
    font-size:clamp(16px, 1.6vw, 24px) !important;
    line-height:1.55 !important;
  }
}

@media (max-width:780px){
  #mediaOverlay{
    justify-content:center !important;
    padding:86px 14px 20px !important;
    background:rgba(0,0,0,.34) !important;
    pointer-events:auto !important;
  }
  #mediaOverlay .media-panel{
    width:min(420px, calc(100vw - 28px)) !important;
    max-width:min(420px, calc(100vw - 28px)) !important;
    max-height:calc(100dvh - 110px) !important;
  }
}

/* Stage 14: match media tag editor tab to sticky-note tab alignment/style */
#mediaOverlay{
  position:fixed !important;
  inset:0 !important;
  display:none;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  padding:96px 92px 24px 24px !important;
  background:transparent !important;
  pointer-events:none !important;
  z-index:72 !important;
}
#mediaOverlay.open,
#mediaOverlay.is-open,
#mediaOverlay[style*="display: flex"],
#mediaOverlay[style*="display:flex"],
#mediaOverlay[style*="display: block"],
#mediaOverlay[style*="display:block"]{
  display:flex !important;
}
#mediaOverlay .media-panel{
  pointer-events:auto !important;
  position:relative !important;
  width:min(360px, calc(100vw - 28px)) !important;
  max-width:min(360px, calc(100vw - 28px)) !important;
  min-width:300px !important;
  max-height:calc(100dvh - 120px) !important;
  overflow:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:12px !important;
  padding:48px 16px 16px !important;
  border-radius:18px !important;
  background:rgba(8,14,22,.92) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  box-shadow:0 18px 34px rgba(0,0,0,.28) !important;
  backdrop-filter:blur(16px) !important;
  color:#fff !important;
  text-align:left !important;
}
#mediaOverlay .media-panel .modal-x-plain,
#mediaOverlay #closeMediaBtn{
  position:absolute !important;
  top:8px !important;
  right:10px !important;
  left:auto !important;
  z-index:3 !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  display:inline-grid !important;
  place-items:center !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#fff !important;
  font-size:26px !important;
  line-height:1 !important;
  padding:0 !important;
  cursor:pointer !important;
}
#mediaOverlay .media-panel .modal-x-plain:hover,
#mediaOverlay #closeMediaBtn:hover{
  color:#9ee0ff !important;
  background:transparent !important;
  border:0 !important;
}
#mediaOverlay .overlay-title{
  text-align:left !important;
  padding-right:38px !important;
  margin:0 0 4px !important;
  color:rgba(255,255,255,.94) !important;
}
#mediaOverlay .media-icon-picker{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:8px !important;
}
#mediaOverlay .media-icon-choice{
  min-height:46px !important;
  padding:7px !important;
  border-radius:14px !important;
}
#mediaOverlay .media-icon-choice img{
  width:28px !important;
  height:28px !important;
  max-height:28px !important;
  object-fit:contain !important;
}
#mediaOverlay .media-icon-choice-wide{
  min-height:44px !important;
  padding:9px 11px !important;
  border-radius:14px !important;
}
#mediaOverlay .media-icon-choice-wide span{
  font-size:10px !important;
  letter-spacing:.1em !important;
}
#mediaOverlay .media-form-grid,
#mediaOverlay .media-form-grid-compact{
  grid-template-columns:1fr !important;
  gap:10px !important;
}
#mediaOverlay .media-form-grid label,
#mediaOverlay .media-form-grid-compact label{
  margin:0 !important;
}
#mediaOverlay .media-form-grid input,
#mediaOverlay .media-form-grid select,
#mediaOverlay .media-form-grid textarea{
  width:100% !important;
  border-radius:14px !important;
}
#mediaOverlay .media-form-grid input,
#mediaOverlay .media-form-grid select{
  height:42px !important;
}
#mediaOverlay .media-editor-actions{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:center !important;
  gap:10px !important;
  margin-top:8px !important;
}
#mediaOverlay .media-editor-actions .retry-btn,
#mediaOverlay .media-editor-actions .ghost-btn,
#mediaOverlay .media-editor-actions #saveMediaBtn{
  min-height:40px !important;
  width:100% !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:11px !important;
  letter-spacing:.12em !important;
}
#mediaOverlay .media-editor-actions .media-delete-btn{
  color:#fff !important;
  text-align:center !important;
  justify-content:center !important;
}
@media (max-width:900px), (pointer:coarse){
  #mediaOverlay{
    justify-content:center !important;
    padding:86px 14px 20px !important;
    background:rgba(0,0,0,.34) !important;
    pointer-events:auto !important;
    z-index:72 !important;
  }
  #mediaOverlay .media-panel{
    width:min(420px, calc(100vw - 28px)) !important;
    max-width:min(420px, calc(100vw - 28px)) !important;
    min-width:0 !important;
    max-height:calc(100dvh - 110px) !important;
  }
}


/* Stage 15: media icon picker centring + keep help icon white */
#mediaOverlay .media-icon-picker{
  align-items:stretch !important;
}
#mediaOverlay .media-icon-choice{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
#mediaOverlay .media-icon-choice img,
#mediaOverlay .media-icon-choice svg{
  display:block !important;
  margin:auto !important;
  object-fit:contain !important;
}
#mediaOverlay .media-icon-choice-wide{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
#mediaOverlay .media-icon-choice-wide span{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}
.support-widget,
.support-widget:visited,
.support-widget:hover,
.support-widget:focus,
.help-btn,
.help-toggle,
#helpToggle{
  color:#fff !important;
}
.support-widget svg,
.support-widget svg *,
.help-btn svg,
.help-btn svg *,
.help-toggle svg,
.help-toggle svg *,
#helpToggle svg,
#helpToggle svg *{
  fill:#fff !important;
  stroke:#fff !important;
}
.support-widget img,
.help-btn img,
.help-toggle img,
#helpToggle img{
  filter:brightness(0) invert(1) !important;
}

/* Stage 16: media tag opened popup spacing and desktop 16:9 embedded website */
@media (min-width: 781px){
  #linkTagOverlay,
  #videoTagOverlay,
  #infoTagOverlay{
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
  }

  #linkTagOverlay .video-tag-panel,
  #videoTagOverlay .video-tag-panel,
  #infoTagOverlay .info-tag-panel{
    position:relative !important;
    width:80vw !important;
    max-width:80vw !important;
    max-height:88vh !important;
    height:auto !important;
    padding:44px 30px 24px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    overflow:hidden !important;
  }

  #linkTagOverlay .modal-x-plain,
  #videoTagOverlay .modal-x-plain,
  #infoTagOverlay .modal-x-plain{
    position:absolute !important;
    top:12px !important;
    right:14px !important;
    left:auto !important;
    width:34px !important;
    height:34px !important;
    display:inline-grid !important;
    place-items:center !important;
    color:#fff !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    z-index:5 !important;
  }

  #linkTagOverlay .modal-pen-plain,
  #videoTagOverlay .modal-pen-plain,
  #infoTagOverlay .modal-pen-plain{
    position:absolute !important;
    top:12px !important;
    left:14px !important;
    right:auto !important;
    width:34px !important;
    height:34px !important;
    display:inline-grid !important;
    place-items:center !important;
    color:#fff !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    z-index:5 !important;
  }

  #linkTagOverlay .overlay-title,
  #videoTagOverlay .overlay-title,
  #infoTagOverlay .overlay-title{
    margin:0 46px 4px !important;
    padding:0 !important;
    line-height:1.12 !important;
    min-height:0 !important;
    text-align:center !important;
  }

  #linkTagOverlay .link-embed-note{
    margin:0 0 12px !important;
    padding:0 !important;
    line-height:1.25 !important;
    min-height:0 !important;
  }

  #linkTagOverlay .video-embed-wrap{
    width:100% !important;
    aspect-ratio:16 / 9 !important;
    height:auto !important;
    min-height:0 !important;
    flex:0 0 auto !important;
    margin:0 !important;
  }

  #linkTagOverlay iframe{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    display:block !important;
  }

  #linkTagOverlay .overlay-actions,
  #linkTagOverlay .overlay-actions-centered{
    margin:18px auto 0 !important;
    padding:0 !important;
    display:flex !important;
    justify-content:center !important;
    width:100% !important;
  }

  #linkTagOverlay #openLinkTagBtn{
    margin:0 auto !important;
  }
}

/* Stage 17: restore help button, media popup, material save and media editor polish */
.support-widget,
.help-btn,
.help-toggle,
#helpToggle{
  background:#000 !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.18) !important;
}
.support-widget *,
.help-btn *,
.help-toggle *,
#helpToggle *{
  color:#fff !important;
}
.support-widget svg,
.support-widget svg *,
.help-btn svg,
.help-btn svg *,
.help-toggle svg,
.help-toggle svg *,
#helpToggle svg,
#helpToggle svg *{
  fill:#fff !important;
  stroke:#fff !important;
}
.support-widget img,
.help-btn img,
.help-toggle img,
#helpToggle img{
  filter:brightness(0) invert(1) !important;
}

.viewer-transform-title{
  margin:0 44px 12px 0 !important;
  padding:0 !important;
  color:#fff !important;
  font-size:14px !important;
  line-height:1.1 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
}
.viewer-transform-panel{
  padding-top:58px !important;
}
.viewer-transform-panel .viewer-panel-close{
  top:12px !important;
  right:14px !important;
}

#mediaOverlay .media-panel .modal-x-plain,
#mediaOverlay #closeMediaBtn{
  top:12px !important;
  right:14px !important;
  left:auto !important;
  width:34px !important;
  height:34px !important;
  display:inline-grid !important;
  place-items:center !important;
  background:transparent !important;
  border:0 !important;
  color:#fff !important;
  box-shadow:none !important;
}
#mediaOverlay .media-icon-choice{
  box-shadow:none !important;
}
#mediaOverlay .media-icon-choice::before,
#mediaOverlay .media-icon-choice::after,
#mediaOverlay .media-icon-choice.is-active::before,
#mediaOverlay .media-icon-choice.is-active::after{
  display:none !important;
  content:none !important;
}
#mediaOverlay .media-icon-choice.is-active{
  background:rgba(127,226,255,.08) !important;
  border-color:rgba(127,226,255,.55) !important;
  outline:none !important;
}
#mediaOverlay .custom-icon-upload{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:10px !important;
}
#mediaOverlay .custom-icon-upload[style*="display:none"],
#mediaOverlay .custom-icon-upload[style*="display: none"]{
  display:none !important;
}
#mediaOverlay .media-choose-file-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto !important;
  width:auto !important;
  min-width:150px !important;
  cursor:pointer !important;
}
#mediaOverlay .media-upload-btn:not(.media-choose-file-label){
  display:none !important;
}

@media (min-width:781px){
  #linkTagOverlay .video-tag-panel,
  #videoTagOverlay .video-tag-panel,
  #infoTagOverlay .info-tag-panel{
    width:80vw !important;
    max-width:80vw !important;
    min-height:auto !important;
    max-height:90vh !important;
    overflow:visible !important;
    padding:46px 30px 26px !important;
  }
  #linkTagOverlay .overlay-title,
  #videoTagOverlay .overlay-title,
  #infoTagOverlay .overlay-title,
  #linkTagTitle,
  #videoTagTitle,
  #infoTagTitle{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    margin:0 48px 6px !important;
    padding:0 !important;
    min-height:0 !important;
    max-height:none !important;
    color:#fff !important;
    text-align:center !important;
    line-height:1.12 !important;
    font-size:clamp(18px, 2vw, 26px) !important;
    position:relative !important;
    z-index:3 !important;
  }
  #linkTagOverlay .link-embed-note{
    display:block !important;
    visibility:visible !important;
    margin:0 0 12px !important;
    text-align:center !important;
  }
  #linkTagOverlay .video-embed-wrap,
  #videoTagOverlay .video-embed-wrap{
    width:100% !important;
    aspect-ratio:16 / 9 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    flex:0 0 auto !important;
  }
  #linkTagOverlay iframe,
  #videoTagOverlay iframe{
    width:100% !important;
    height:100% !important;
    display:block !important;
  }
  #linkTagOverlay .overlay-actions,
  #linkTagOverlay .overlay-actions-centered{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    margin:18px auto 0 !important;
    padding:0 !important;
    position:relative !important;
    z-index:4 !important;
  }
  #linkTagOverlay #openLinkTagBtn{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    margin:0 auto !important;
  }
}


/* Stage 18: media custom upload cleanup, consistent tab typography, material action buttons */
#mediaOverlay .media-panel .viewer-panel-close,
#mediaOverlay #closeMediaBtn.viewer-panel-close{
  position:absolute !important;
  top:12px !important;
  right:14px !important;
  left:auto !important;
  width:34px !important;
  height:34px !important;
  display:inline-grid !important;
  place-items:center !important;
  border:0 !important;
  background:transparent !important;
  color:#fff !important;
  font-size:28px !important;
  line-height:1 !important;
  padding:0 !important;
  box-shadow:none !important;
  cursor:pointer !important;
}
#mediaOverlay .custom-icon-upload{
  min-height:92px !important;
  padding:14px !important;
  border:1px dashed rgba(127,226,255,.34) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.035) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
#mediaOverlay .custom-icon-upload span,
#mediaOverlay .custom-icon-upload > span{
  display:none !important;
}
#mediaOverlay .custom-icon-upload input[type="file"],
#mediaOverlay #mediaCustomIconInput{
  display:none !important;
}
#mediaOverlay .media-choose-file-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto !important;
  min-width:156px !important;
  width:auto !important;
  height:40px !important;
  font-size:11px !important;
  line-height:1 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
.viewer-mini-panel,
.viewer-mini-panel label,
.viewer-mini-panel input,
.viewer-mini-panel select,
.viewer-mini-panel button,
#mediaOverlay .media-panel,
#mediaOverlay .media-panel label,
#mediaOverlay .media-panel input,
#mediaOverlay .media-panel select,
#mediaOverlay .media-panel button{
  font-family:inherit !important;
}
.viewer-mini-panel .viewer-field-label,
#mediaOverlay .media-form-grid label span,
#mediaOverlay .media-form-grid-compact label span{
  font-size:11px !important;
  line-height:1.2 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
.viewer-mini-panel input,
.viewer-mini-panel select,
#mediaOverlay .media-form-grid input,
#mediaOverlay .media-form-grid select{
  font-size:13px !important;
}
.material-action-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-top:2px !important;
}
.material-action-btn{
  min-height:42px !important;
  width:100% !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  border-radius:999px !important;
  font-size:11px !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  padding:0 12px !important;
}
.material-action-icon{
  width:16px !important;
  height:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.material-action-icon svg{
  width:16px !important;
  height:16px !important;
  display:block !important;
}
@media (max-width:780px){
  .material-action-row{grid-template-columns:1fr !important;}
}


/* Stage 19: align media tab with transform tab, upload button polish, final close X override */
.viewer-transform-panel,
.viewer-transform-panel label,
.viewer-transform-panel input,
.viewer-transform-panel select,
.viewer-transform-panel button,
#mediaOverlay .media-panel,
#mediaOverlay .media-panel label,
#mediaOverlay .media-panel input,
#mediaOverlay .media-panel select,
#mediaOverlay .media-panel button{
  font-size:13px !important;
  font-family:inherit !important;
}
.viewer-transform-panel .viewer-tab-title,
#mediaOverlay .media-panel .overlay-title{
  font-size:14px !important;
  line-height:1.15 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}
.viewer-transform-panel .viewer-field-label,
.viewer-transform-panel label span,
#mediaOverlay .media-form-grid label span,
#mediaOverlay .media-form-grid-compact label span{
  font-size:11px !important;
  line-height:1.2 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
.viewer-transform-panel .viewer-inline-input,
.viewer-transform-panel .viewer-transform-search-input,
#mediaOverlay .media-form-grid input,
#mediaOverlay .media-form-grid-compact input,
#mediaOverlay .media-form-grid select,
#mediaOverlay .media-form-grid-compact select{
  font-size:13px !important;
}

/* This is deliberately placed last because earlier media X rules were conflicting. */
#mediaOverlay .media-panel > #closeMediaBtn.viewer-panel-close,
#mediaOverlay .media-panel > #closeMediaBtn{
  position:absolute !important;
  top:12px !important;
  right:14px !important;
  left:auto !important;
  z-index:30 !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  font-size:22px !important;
  font-weight:500 !important;
  line-height:1 !important;
  box-shadow:none !important;
  cursor:pointer !important;
  opacity:1 !important;
  visibility:visible !important;
}
#mediaOverlay .media-panel > #closeMediaBtn.viewer-panel-close:hover,
#mediaOverlay .media-panel > #closeMediaBtn:hover{
  background:rgba(127,226,255,.14) !important;
  border-color:rgba(127,226,255,.35) !important;
  color:#fff !important;
}
#mediaOverlay .media-panel{
  padding-top:58px !important;
}
#mediaOverlay .media-panel .overlay-title{
  margin-top:0 !important;
  padding-right:40px !important;
}

.material-texture-upload-field{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}
.material-texture-upload-holder{
  min-height:84px !important;
  padding:14px !important;
  border:1px dashed rgba(127,226,255,.34) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.035) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.material-texture-choose-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto !important;
  min-width:156px !important;
  height:40px !important;
  font-size:11px !important;
  line-height:1 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
}

/* Stage 20: align editor tabs with top publish button */
@media (min-width:901px){
  body.viewer-page .viewer-toolbar{
    top:28px !important;
    right:28px !important;
  }
  body.viewer-page .viewer-mini-panel,
  body.viewer-page .viewer-slider-panel,
  body.viewer-page #sunTimePanel,
  body.viewer-page #stickyNotePanel,
  body.viewer-page #materialEditorPanel,
  body.viewer-page #addSceneModelPanel,
  body.viewer-page #scalePanel,
  body.viewer-page #rotatePanel,
  body.viewer-page #movePanel{
    top:28px !important;
    right:92px !important;
    bottom:auto !important;
    max-height:calc(100dvh - 56px) !important;
    overflow:auto !important;
  }
  body.viewer-page #mediaOverlay{
    align-items:flex-start !important;
    justify-content:flex-end !important;
    padding:28px 92px 24px 24px !important;
  }
  body.viewer-page #mediaOverlay .media-panel{
    max-height:calc(100dvh - 56px) !important;
  }
}

/* Stage 22: make Transform model selector match the editor UI and stay readable */
body.viewer-page #transformTargetSelect,
body.viewer-page .viewer-transform-select,
body.viewer-page select.viewer-transform-search-input{
  width:100% !important;
  min-height:42px !important;
  border:1px solid rgba(127,226,255,.32) !important;
  border-radius:14px !important;
  background:linear-gradient(135deg, rgba(8,18,33,.96), rgba(11,30,52,.92)) !important;
  color:#ffffff !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:none !important;
  padding:0 40px 0 14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.24) !important;
  outline:none !important;
  cursor:pointer !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  background-image:
    linear-gradient(135deg, rgba(8,18,33,.96), rgba(11,30,52,.92)),
    url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat, no-repeat !important;
  background-position:center, right 14px center !important;
  background-size:100% 100%, 12px 8px !important;
}
body.viewer-page #transformTargetSelect:hover,
body.viewer-page .viewer-transform-select:hover,
body.viewer-page select.viewer-transform-search-input:hover{
  border-color:rgba(127,226,255,.58) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 12px 34px rgba(30,144,255,.16) !important;
}
body.viewer-page #transformTargetSelect:focus,
body.viewer-page .viewer-transform-select:focus,
body.viewer-page select.viewer-transform-search-input:focus{
  border-color:rgba(127,226,255,.78) !important;
  box-shadow:0 0 0 3px rgba(127,226,255,.16), 0 12px 34px rgba(30,144,255,.18) !important;
}
body.viewer-page #transformTargetSelect option,
body.viewer-page .viewer-transform-select option,
body.viewer-page select.viewer-transform-search-input option{
  background:#071525 !important;
  color:#ffffff !important;
  font-size:13px !important;
}


/* Stage 33: publish settings spacing + hide material tools on published viewer */
.publish-settings-save-btn{
  display:block;
  margin:24px auto 0 !important;
}
.publish-password-row + .publish-settings-save-btn{
  margin-top:22px !important;
}
.publish-switch-row + .publish-switch-row{
  margin-top:14px !important;
}
body.published-view .viewer-material-panel,
body.published-view #toggleMaterialEditorBtn,
#toggleMaterialEditorBtn.viewer-only-hidden{
  display:none !important;
}

/* 2026-05-24 mobile published-viewer polish: no burger menu, compact buttons, centred instructions. */
body.viewer-view-only .viewer-mobile-menu-btn,
body.viewer-view-only #viewerMobileMenuBtn{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body.viewer-view-only #toggleMaterialEditorBtn,
body.viewer-view-only #materialEditorPanel,
body.viewer-view-only .viewer-material-panel{
  display:none !important;
  visibility:hidden !important;
}

body.viewer-view-only #viewerToolbar.published-viewer-toolbar,
body.viewer-view-only .viewer-toolbar.published-viewer-toolbar{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  width:auto !important;
  max-width:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:visible !important;
}

@media (max-width:900px), (pointer:coarse){
  body.viewer-view-only #viewerToolbar.published-viewer-toolbar,
  body.viewer-view-only .viewer-toolbar.published-viewer-toolbar{
    top:calc(env(safe-area-inset-top, 0px) + 12px) !important;
    right:12px !important;
    left:auto !important;
    z-index:95 !important;
  }

  body.viewer-view-only #toggleDayNightBtn,
  body.viewer-view-only #toggleFlyModeBtn,
  body.viewer-view-only #addStickyNoteBtn,
  body.viewer-view-only .published-viewer-toolbar .viewer-tool-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border-radius:11px !important;
    padding:0 !important;
  }

  body.viewer-view-only #toggleDayNightBtn svg,
  body.viewer-view-only #toggleFlyModeBtn svg,
  body.viewer-view-only #addStickyNoteBtn svg,
  body.viewer-view-only .published-viewer-toolbar .viewer-tool-svg svg{
    width:15px !important;
    height:15px !important;
  }

  body.viewer-page .instructions-overlay,
  .instructions-overlay{
    align-items:center !important;
    justify-content:center !important;
    padding:12px !important;
    overflow:hidden !important;
  }

  body.viewer-page .instructions-wrap.instructions-card-wrap,
  body.viewer-page .instructions-card-wrap,
  .instructions-wrap.instructions-card-wrap,
  .instructions-card-wrap{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:min(430px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100dvh - 24px) !important;
    transform:none !important;
    transform-origin:center center !important;
    margin:auto !important;
  }

  body.viewer-page .instructions-card,
  .instructions-card{
    max-height:calc(100dvh - 24px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

@media (orientation:landscape) and (max-width:900px){
  body.viewer-view-only #viewerToolbar.published-viewer-toolbar,
  body.viewer-view-only .viewer-toolbar.published-viewer-toolbar{
    top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right:10px !important;
    gap:5px !important;
  }

  body.viewer-view-only #toggleDayNightBtn,
  body.viewer-view-only #toggleFlyModeBtn,
  body.viewer-view-only #addStickyNoteBtn,
  body.viewer-view-only .published-viewer-toolbar .viewer-tool-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    border-radius:10px !important;
  }

  body.viewer-page .instructions-wrap.instructions-card-wrap,
  body.viewer-page .instructions-card-wrap,
  .instructions-wrap.instructions-card-wrap,
  .instructions-card-wrap{
    width:min(520px, calc(100vw - 24px)) !important;
    max-height:calc(100dvh - 20px) !important;
  }

  body.viewer-page .instructions-card,
  .instructions-card{
    padding:12px 14px !important;
    gap:8px !important;
    max-height:calc(100dvh - 20px) !important;
  }

  body.viewer-page .instructions-title,
  .instructions-title{
    font-size:clamp(22px, 5vh, 30px) !important;
  }

  body.viewer-page .instructions-body,
  body.viewer-page .instructions-list,
  body.viewer-page .instructions-visual-item small,
  .instructions-body,
  .instructions-list,
  .instructions-visual-item small{
    font-size:11px !important;
    line-height:1.35 !important;
  }

  body.viewer-page .instructions-visual-grid,
  .instructions-visual-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  body.viewer-page .instructions-visual-item,
  .instructions-visual-item{
    padding:9px 8px !important;
    gap:5px !important;
  }

  body.viewer-page .instructions-visual-icon,
  .instructions-visual-icon{
    width:28px !important;
    height:28px !important;
    border-radius:9px !important;
  }
}

/* 2026-05-24 mobile editor/viewer compact tabs + orientation resize guard. */
@media (max-width:900px), (pointer:coarse){
  body.viewer-page .viewer-mobile-menu-btn{
    width:40px !important;
    height:40px !important;
    border-radius:12px !important;
    top:calc(env(safe-area-inset-top, 0px) + 14px) !important;
    right:12px !important;
  }
  body.viewer-page .viewer-mobile-menu-btn span{
    width:16px !important;
  }

  body.viewer-page .viewer-toolbar:not(.published-viewer-toolbar){
    top:calc(env(safe-area-inset-top, 0px) + 62px) !important;
    right:10px !important;
    gap:6px !important;
    padding:8px !important;
    border-radius:18px !important;
    max-height:calc(100dvh - 76px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body.viewer-page #publishProjectBtn,
  body.viewer-page #resetTransformBtn,
  body.viewer-page #viewerProjectsBtn,
  body.viewer-page #toggleMovePanelBtn,
  body.viewer-page #toggleScalePanelBtn,
  body.viewer-page #toggleRotatePanelBtn,
  body.viewer-page #addMediaBtn,
  body.viewer-page #toggleDayNightBtn,
  body.viewer-page #toggleFlyModeBtn,
  body.viewer-page #addSceneModelBtn,
  body.viewer-page #addStickyNoteBtn,
  body.viewer-page .viewer-toolbar .viewer-tool-btn,
  body.viewer-page .viewer-toolbar .publish-tool-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border-radius:11px !important;
    padding:0 !important;
  }

  body.viewer-page .viewer-toolbar .viewer-tool-svg svg{
    width:15px !important;
    height:15px !important;
  }

  body.viewer-page .viewer-mini-panel,
  body.viewer-page .viewer-slider-panel,
  body.viewer-page #sunTimePanel,
  body.viewer-page #stickyNotePanel,
  body.viewer-page #materialEditorPanel,
  body.viewer-page #addSceneModelPanel,
  body.viewer-page #scalePanel,
  body.viewer-page #rotatePanel,
  body.viewer-page #movePanel{
    top:calc(env(safe-area-inset-top, 0px) + 62px) !important;
    left:10px !important;
    right:58px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - 76px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:12px !important;
    border-radius:18px !important;
  }

  body.viewer-page .viewer-transform-panel .viewer-tab-title,
  body.viewer-page #mediaOverlay .media-panel .overlay-title{
    font-size:12px !important;
    line-height:1.1 !important;
    letter-spacing:.12em !important;
    margin-bottom:8px !important;
    padding-right:32px !important;
  }

  body.viewer-page .viewer-transform-panel,
  body.viewer-page .viewer-transform-panel label,
  body.viewer-page .viewer-transform-panel input,
  body.viewer-page .viewer-transform-panel select,
  body.viewer-page .viewer-transform-panel button,
  body.viewer-page #mediaOverlay .media-panel,
  body.viewer-page #mediaOverlay .media-panel label,
  body.viewer-page #mediaOverlay .media-panel input,
  body.viewer-page #mediaOverlay .media-panel select,
  body.viewer-page #mediaOverlay .media-panel button{
    font-size:12px !important;
  }

  body.viewer-page .viewer-transform-panel .viewer-inline-input,
  body.viewer-page .viewer-transform-panel .viewer-transform-search-input,
  body.viewer-page #mediaOverlay .media-form-grid input,
  body.viewer-page #mediaOverlay .media-form-grid-compact input,
  body.viewer-page #mediaOverlay .media-form-grid select,
  body.viewer-page #mediaOverlay .media-form-grid-compact select{
    height:38px !important;
    min-height:38px !important;
    border-radius:12px !important;
    font-size:12px !important;
  }

  body.viewer-page .viewer-panel-close,
  body.viewer-page #mediaOverlay .media-panel > #closeMediaBtn.viewer-panel-close,
  body.viewer-page #mediaOverlay .media-panel > #closeMediaBtn{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    top:8px !important;
    right:10px !important;
    font-size:20px !important;
  }

  body.viewer-page #mediaOverlay{
    padding:calc(env(safe-area-inset-top, 0px) + 62px) 58px 10px 10px !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
  }
  body.viewer-page #mediaOverlay .media-panel{
    width:min(340px, calc(100vw - 68px)) !important;
    min-width:0 !important;
    max-width:calc(100vw - 68px) !important;
    max-height:calc(100dvh - 76px) !important;
    padding:42px 12px 12px !important;
  }

  body.viewer-page .instructions-overlay,
  .instructions-overlay{
    align-items:center !important;
    justify-content:center !important;
    padding:10px !important;
    overflow:hidden !important;
  }
  body.viewer-page .instructions-wrap.instructions-card-wrap,
  body.viewer-page .instructions-card-wrap,
  .instructions-wrap.instructions-card-wrap,
  .instructions-card-wrap{
    width:min(390px, calc(100vw - 20px)) !important;
    max-width:calc(100vw - 20px) !important;
    max-height:calc(100dvh - 20px) !important;
    margin:auto !important;
  }
  body.viewer-page .instructions-card,
  .instructions-card{
    padding:18px 14px 14px !important;
    border-radius:20px !important;
    gap:10px !important;
    max-height:calc(100dvh - 20px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body.viewer-page .instructions-close,
  .instructions-close{
    width:30px !important;
    height:30px !important;
    top:8px !important;
    right:8px !important;
  }
  body.viewer-page .instructions-title,
  .instructions-title{
    font-size:clamp(24px, 7vw, 30px) !important;
    line-height:1.02 !important;
    padding-right:28px !important;
  }
  body.viewer-page .instructions-kicker,
  .instructions-kicker{
    font-size:10px !important;
    letter-spacing:.18em !important;
  }
  body.viewer-page .instructions-body,
  body.viewer-page .instructions-list,
  body.viewer-page .instructions-visual-item small,
  .instructions-body,
  .instructions-list,
  .instructions-visual-item small{
    font-size:12px !important;
    line-height:1.35 !important;
  }
  body.viewer-page .instructions-visual-grid,
  .instructions-visual-grid{
    grid-template-columns:1fr !important;
    gap:7px !important;
    margin:8px 0 !important;
  }
  body.viewer-page .instructions-visual-item,
  .instructions-visual-item{
    grid-template-columns:30px 1fr !important;
    align-items:center !important;
    text-align:left !important;
    gap:8px !important;
    padding:8px !important;
    border-radius:14px !important;
  }
  body.viewer-page .instructions-visual-icon,
  .instructions-visual-icon{
    width:28px !important;
    height:28px !important;
    border-radius:9px !important;
    margin:0 !important;
  }
  body.viewer-page .instructions-visual-icon svg,
  .instructions-visual-icon svg{
    width:15px !important;
    height:15px !important;
  }
}

@media (orientation:landscape) and (max-width:900px){
  body.viewer-page .viewer-mobile-menu-btn{
    top:calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right:8px !important;
    width:36px !important;
    height:36px !important;
  }
  body.viewer-page .viewer-toolbar:not(.published-viewer-toolbar){
    top:calc(env(safe-area-inset-top, 0px) + 48px) !important;
    right:8px !important;
    gap:5px !important;
    padding:6px !important;
    max-height:calc(100dvh - 56px) !important;
  }
  body.viewer-page #publishProjectBtn,
  body.viewer-page #resetTransformBtn,
  body.viewer-page #viewerProjectsBtn,
  body.viewer-page #toggleMovePanelBtn,
  body.viewer-page #toggleScalePanelBtn,
  body.viewer-page #toggleRotatePanelBtn,
  body.viewer-page #addMediaBtn,
  body.viewer-page #toggleDayNightBtn,
  body.viewer-page #toggleFlyModeBtn,
  body.viewer-page #addSceneModelBtn,
  body.viewer-page #addStickyNoteBtn,
  body.viewer-page .viewer-toolbar .viewer-tool-btn,
  body.viewer-page .viewer-toolbar .publish-tool-btn{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    border-radius:9px !important;
  }
  body.viewer-page .viewer-toolbar .viewer-tool-svg svg{
    width:13px !important;
    height:13px !important;
  }
  body.viewer-page .viewer-mini-panel,
  body.viewer-page .viewer-slider-panel,
  body.viewer-page #sunTimePanel,
  body.viewer-page #stickyNotePanel,
  body.viewer-page #materialEditorPanel,
  body.viewer-page #addSceneModelPanel,
  body.viewer-page #scalePanel,
  body.viewer-page #rotatePanel,
  body.viewer-page #movePanel{
    top:calc(env(safe-area-inset-top, 0px) + 8px) !important;
    left:8px !important;
    right:50px !important;
    max-height:calc(100dvh - 16px) !important;
    padding:10px !important;
  }
  body.viewer-page #mediaOverlay{
    padding:calc(env(safe-area-inset-top, 0px) + 8px) 50px 8px 8px !important;
  }
  body.viewer-page #mediaOverlay .media-panel{
    width:min(360px, calc(100vw - 58px)) !important;
    max-width:calc(100vw - 58px) !important;
    max-height:calc(100dvh - 16px) !important;
    padding:38px 10px 10px !important;
  }
  body.viewer-page .instructions-wrap.instructions-card-wrap,
  body.viewer-page .instructions-card-wrap,
  .instructions-wrap.instructions-card-wrap,
  .instructions-card-wrap{
    width:min(560px, calc(100vw - 18px)) !important;
    max-height:calc(100dvh - 18px) !important;
  }
  body.viewer-page .instructions-card,
  .instructions-card{
    padding:10px 12px !important;
    gap:7px !important;
    max-height:calc(100dvh - 18px) !important;
  }
  body.viewer-page .instructions-title,
  .instructions-title{
    font-size:clamp(18px, 5.5vh, 24px) !important;
  }
  body.viewer-page .instructions-body,
  body.viewer-page .instructions-list,
  body.viewer-page .instructions-visual-item small,
  .instructions-body,
  .instructions-list,
  .instructions-visual-item small{
    font-size:10px !important;
    line-height:1.25 !important;
  }
  body.viewer-page .instructions-visual-grid,
  .instructions-visual-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:6px !important;
  }
  body.viewer-page .instructions-visual-item,
  .instructions-visual-item{
    display:grid !important;
    grid-template-columns:24px 1fr !important;
    padding:6px !important;
    gap:6px !important;
  }
  body.viewer-page .instructions-visual-icon,
  .instructions-visual-icon{
    width:24px !important;
    height:24px !important;
  }
}

/* 2026-05-24 mobile palette + sticky note button parity only */
@media (max-width:900px), (pointer:coarse){
  body.viewer-page .viewer-tool-btn.icon-btn#toggleMaterialEditorBtn,
  body.viewer-page .viewer-tool-btn.icon-btn#addStickyNoteBtn,
  body.viewer-page #toggleMaterialEditorBtn,
  body.viewer-page #addStickyNoteBtn,
  body.viewer-view-only .viewer-tool-btn.icon-btn#addStickyNoteBtn,
  body.viewer-view-only #addStickyNoteBtn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border-radius:11px !important;
    padding:0 !important;
  }

  body.viewer-page .viewer-tool-btn.icon-btn#toggleMaterialEditorBtn .viewer-tool-svg,
  body.viewer-page .viewer-tool-btn.icon-btn#addStickyNoteBtn .viewer-tool-svg,
  body.viewer-page #toggleMaterialEditorBtn .viewer-tool-svg,
  body.viewer-page #addStickyNoteBtn .viewer-tool-svg,
  body.viewer-view-only .viewer-tool-btn.icon-btn#addStickyNoteBtn .viewer-tool-svg,
  body.viewer-view-only #addStickyNoteBtn .viewer-tool-svg{
    width:15px !important;
    height:15px !important;
  }

  body.viewer-page .viewer-tool-btn.icon-btn#toggleMaterialEditorBtn svg,
  body.viewer-page .viewer-tool-btn.icon-btn#addStickyNoteBtn svg,
  body.viewer-page #toggleMaterialEditorBtn svg,
  body.viewer-page #addStickyNoteBtn svg,
  body.viewer-view-only .viewer-tool-btn.icon-btn#addStickyNoteBtn svg,
  body.viewer-view-only #addStickyNoteBtn svg{
    width:15px !important;
    height:15px !important;
  }
}

@media (orientation:landscape) and (max-width:900px){
  body.viewer-page .viewer-tool-btn.icon-btn#toggleMaterialEditorBtn,
  body.viewer-page .viewer-tool-btn.icon-btn#addStickyNoteBtn,
  body.viewer-page #toggleMaterialEditorBtn,
  body.viewer-page #addStickyNoteBtn,
  body.viewer-view-only .viewer-tool-btn.icon-btn#addStickyNoteBtn,
  body.viewer-view-only #addStickyNoteBtn{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    border-radius:9px !important;
    padding:0 !important;
  }

  body.viewer-page .viewer-tool-btn.icon-btn#toggleMaterialEditorBtn .viewer-tool-svg,
  body.viewer-page .viewer-tool-btn.icon-btn#addStickyNoteBtn .viewer-tool-svg,
  body.viewer-page #toggleMaterialEditorBtn .viewer-tool-svg,
  body.viewer-page #addStickyNoteBtn .viewer-tool-svg,
  body.viewer-view-only .viewer-tool-btn.icon-btn#addStickyNoteBtn .viewer-tool-svg,
  body.viewer-view-only #addStickyNoteBtn .viewer-tool-svg{
    width:13px !important;
    height:13px !important;
  }

  body.viewer-page .viewer-tool-btn.icon-btn#toggleMaterialEditorBtn svg,
  body.viewer-page .viewer-tool-btn.icon-btn#addStickyNoteBtn svg,
  body.viewer-page #toggleMaterialEditorBtn svg,
  body.viewer-page #addStickyNoteBtn svg,
  body.viewer-view-only .viewer-tool-btn.icon-btn#addStickyNoteBtn svg,
  body.viewer-view-only #addStickyNoteBtn svg{
    width:13px !important;
    height:13px !important;
  }
}

/* 2026-05-24 targeted mobile viewer/editor panel and intro refinements */
@media (max-width:900px), (pointer:coarse){
  body.viewer-page #sunTimePanel.viewer-time-panel,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel{
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translate(-50%, -50%) !important;
    width:min(300px, calc(100vw - 28px)) !important;
    max-width:calc(100vw - 28px) !important;
    min-width:0 !important;
    max-height:calc(100dvh - 28px) !important;
    overflow:auto !important;
    padding:18px 14px 14px !important;
  }

  body.viewer-page #stickyNotePanel.viewer-sticky-panel textarea,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel .viewer-textarea{
    min-height:84px !important;
  }

  body.viewer-page #sunTimePanel.viewer-time-panel{
    width:min(280px, calc(100vw - 28px)) !important;
  }

  body.viewer-page #toggleFlyModeBtn .viewer-tool-svg,
  body.viewer-page #toggleFlyModeBtn #flyModeIcon{
    width:13px !important;
    height:13px !important;
  }

  body.viewer-page #toggleFlyModeBtn .viewer-tool-svg svg,
  body.viewer-page #toggleFlyModeBtn #flyModeIcon svg,
  body.viewer-page #toggleFlyModeBtn svg{
    width:13px !important;
    height:13px !important;
  }

  body.viewer-page .instructions-overlay,
  .instructions-overlay{
    align-items:center !important;
    justify-content:center !important;
    padding:calc(42px + env(safe-area-inset-top)) 8px calc(72px + env(safe-area-inset-bottom)) !important;
    overflow:hidden !important;
  }

  body.viewer-page .instructions-wrap.instructions-card-wrap,
  body.viewer-page .instructions-card-wrap,
  .instructions-wrap.instructions-card-wrap,
  .instructions-card-wrap{
    transform:scale(.56) !important;
    transform-origin:center center !important;
    width:min(470px, calc((100vw - 16px) / .56)) !important;
    max-width:calc((100vw - 16px) / .56) !important;
    max-height:calc((100dvh - 92px) / .56) !important;
  }

  body.viewer-page .instructions-card,
  .instructions-card{
    padding:14px 14px !important;
    gap:9px !important;
    max-height:calc((100dvh - 96px) / .56) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body.viewer-page .instructions-close,
  .instructions-close{
    top:8px !important;
    right:8px !important;
    width:30px !important;
    height:30px !important;
    font-size:18px !important;
    z-index:5 !important;
  }
}

@media (orientation:landscape) and (max-width:900px){
  body.viewer-page #sunTimePanel.viewer-time-panel,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel{
    width:min(280px, calc(100vw - 28px)) !important;
    max-height:calc(100dvh - 20px) !important;
  }

  body.viewer-page #stickyNotePanel.viewer-sticky-panel textarea,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel .viewer-textarea{
    min-height:64px !important;
  }

  body.viewer-page #toggleFlyModeBtn .viewer-tool-svg,
  body.viewer-page #toggleFlyModeBtn #flyModeIcon,
  body.viewer-page #toggleFlyModeBtn .viewer-tool-svg svg,
  body.viewer-page #toggleFlyModeBtn #flyModeIcon svg,
  body.viewer-page #toggleFlyModeBtn svg{
    width:11px !important;
    height:11px !important;
  }

  body.viewer-page .instructions-overlay,
  .instructions-overlay{
    padding:8px 8px !important;
  }

  body.viewer-page .instructions-wrap.instructions-card-wrap,
  body.viewer-page .instructions-card-wrap,
  .instructions-wrap.instructions-card-wrap,
  .instructions-card-wrap{
    transform:scale(.50) !important;
    width:min(560px, calc((100vw - 16px) / .50)) !important;
    max-width:calc((100vw - 16px) / .50) !important;
    max-height:calc((100dvh - 16px) / .50) !important;
  }

  body.viewer-page .instructions-card,
  .instructions-card{
    max-height:calc((100dvh - 16px) / .50) !important;
  }
}

/* 2026-05-24 narrow mobile tab centring and compact panel refinement */
@media (max-width:900px), (pointer:coarse){
  body.viewer-page #sunTimePanel.viewer-time-panel.is-open,
  body.viewer-page #sunTimePanel.viewer-time-panel.open,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel.is-open,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel.open,
  body.viewer-page #materialEditorPanel.is-open,
  body.viewer-page #materialEditorPanel.open{
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translate(-50%, -50%) !important;
    max-width:calc(100vw - 28px) !important;
    max-height:calc(100dvh - 28px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:12px !important;
    border-radius:16px !important;
  }

  body.viewer-page #sunTimePanel.viewer-time-panel.is-open,
  body.viewer-page #sunTimePanel.viewer-time-panel.open{
    width:min(238px, calc(100vw - 28px)) !important;
  }

  body.viewer-page #stickyNotePanel.viewer-sticky-panel.is-open,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel.open{
    width:min(268px, calc(100vw - 28px)) !important;
  }

  body.viewer-page #materialEditorPanel.is-open,
  body.viewer-page #materialEditorPanel.open{
    width:min(320px, calc(100vw - 28px)) !important;
  }

  body.viewer-page #sunTimePanel.viewer-time-panel .viewer-panel-title,
  body.viewer-page #sunTimePanel.viewer-time-panel .viewer-tab-title,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel .viewer-panel-title,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel .viewer-tab-title{
    margin-bottom:6px !important;
  }

  body.viewer-page #sunTimePanel.viewer-time-panel .viewer-panel-actions,
  body.viewer-page #sunTimePanel.viewer-time-panel .viewer-form-row,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel .viewer-panel-actions,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel .viewer-form-row{
    gap:8px !important;
    margin-top:8px !important;
  }

  body.viewer-page #stickyNotePanel.viewer-sticky-panel textarea,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel .viewer-textarea{
    min-height:72px !important;
  }
}

@media (orientation:landscape) and (max-width:900px){
  body.viewer-page #sunTimePanel.viewer-time-panel.is-open,
  body.viewer-page #sunTimePanel.viewer-time-panel.open{
    width:min(230px, calc(100vw - 28px)) !important;
  }

  body.viewer-page #stickyNotePanel.viewer-sticky-panel.is-open,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel.open{
    width:min(252px, calc(100vw - 28px)) !important;
  }

  body.viewer-page #stickyNotePanel.viewer-sticky-panel textarea,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel .viewer-textarea{
    min-height:54px !important;
  }
}

/* 2026-05-24 targeted mobile editor panel refinement: centred compact tabs and consistent close buttons. */
@media (max-width:900px), (pointer:coarse){
  body.viewer-page .viewer-mini-panel.is-open,
  body.viewer-page .viewer-mini-panel.open,
  body.viewer-page #movePanel.open,
  body.viewer-page #addSceneModelPanel.is-open,
  body.viewer-page #addSceneModelPanel.open,
  body.viewer-page #sunTimePanel.viewer-time-panel.is-open,
  body.viewer-page #sunTimePanel.viewer-time-panel.open,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel.is-open,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel.open{
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translate(-50%, -50%) !important;
    width:min(320px, calc(100vw - 28px)) !important;
    min-width:0 !important;
    max-width:calc(100vw - 28px) !important;
    max-height:calc(100dvh - 28px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    border-radius:16px !important;
  }

  body.viewer-page .viewer-panel-close,
  body.viewer-page #closeSunTimePanelBtn.viewer-panel-close,
  body.viewer-page #closeStickyNotePanelBtn.viewer-panel-close,
  body.viewer-page #closeMaterialEditorBtn.viewer-panel-close,
  body.viewer-page #closeAddSceneModelPanelBtn.viewer-panel-close,
  body.viewer-page #closeMovePanelBtn.viewer-panel-close,
  body.viewer-page #mediaOverlay .media-panel > #closeMediaBtn.viewer-panel-close,
  body.viewer-page #mediaOverlay .media-panel > #closeMediaBtn{
    position:absolute !important;
    top:10px !important;
    right:10px !important;
    left:auto !important;
    z-index:40 !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
    font-size:20px !important;
    font-weight:500 !important;
    line-height:1 !important;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  body.viewer-page .viewer-panel-label-row,
  body.viewer-page #sunTimePanel .viewer-panel-label-row,
  body.viewer-page #stickyNotePanel .viewer-panel-label-row,
  body.viewer-page #materialEditorPanel .viewer-panel-label-row,
  body.viewer-page #addSceneModelPanel .viewer-panel-label-row{
    padding-right:0 !important;
    margin-top:0 !important;
    gap:8px !important;
  }

  body.viewer-page #addSceneModelPanel.viewer-add-model-panel.is-open,
  body.viewer-page #addSceneModelPanel.viewer-add-model-panel.open{
    width:min(292px, calc(100vw - 28px)) !important;
    padding:46px 12px 12px !important;
    gap:10px !important;
  }

  body.viewer-page #addSceneModelPanel .viewer-panel-label-row{
    align-items:flex-start !important;
  }

  body.viewer-page #addSceneModelPanel .viewer-panel-label-row span,
  body.viewer-page #addSceneModelPanel .viewer-panel-label-row strong{
    font-size:11px !important;
    line-height:1.15 !important;
    letter-spacing:.08em !important;
  }

  body.viewer-page #addSceneModelPanel .scene-model-drop-card{
    min-height:138px !important;
    border-radius:16px !important;
    gap:7px !important;
    padding:12px !important;
  }

  body.viewer-page #addSceneModelPanel .scene-model-cube{
    width:52px !important;
    height:52px !important;
  }

  body.viewer-page #addSceneModelPanel .scene-model-drop-card strong{
    font-size:13px !important;
  }

  body.viewer-page #addSceneModelPanel .scene-model-drop-card small,
  body.viewer-page #addSceneModelPanel .scale-reference-note{
    font-size:10.5px !important;
    line-height:1.35 !important;
  }

  body.viewer-page #movePanel.viewer-transform-panel.open{
    width:min(336px, calc(100vw - 28px)) !important;
    padding:46px 12px 12px !important;
    gap:10px !important;
  }

  body.viewer-page #movePanel .viewer-tab-title{
    margin:0 34px 8px 0 !important;
    padding-right:0 !important;
  }

  body.viewer-page #movePanel .viewer-move-target-row,
  body.viewer-page #movePanel .viewer-transform-search{
    margin-top:0 !important;
    margin-bottom:8px !important;
  }

  body.viewer-page #movePanel .viewer-transform-grid{
    gap:8px !important;
  }

  body.viewer-page #movePanel .viewer-axis-field{
    gap:6px !important;
  }

  body.viewer-page #movePanel .viewer-inline-input,
  body.viewer-page #movePanel .viewer-transform-search-input{
    height:34px !important;
    min-height:34px !important;
  }

  body.viewer-page #mediaOverlay{
    padding:14px !important;
    align-items:center !important;
    justify-content:center !important;
  }

  body.viewer-page #mediaOverlay .media-panel{
    width:min(330px, calc(100vw - 28px)) !important;
    max-width:calc(100vw - 28px) !important;
    max-height:calc(100dvh - 28px) !important;
    padding:46px 12px 12px !important;
    border-radius:16px !important;
    overflow:auto !important;
  }

  body.viewer-page #mediaOverlay .media-panel .overlay-title{
    margin:0 34px 10px 0 !important;
    padding-right:0 !important;
  }

  body.viewer-page #sunTimePanel.viewer-time-panel.is-open,
  body.viewer-page #sunTimePanel.viewer-time-panel.open{
    width:min(238px, calc(100vw - 28px)) !important;
    padding:46px 12px 12px !important;
    gap:8px !important;
  }

  body.viewer-page #stickyNotePanel.viewer-sticky-panel.is-open,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel.open{
    width:min(268px, calc(100vw - 28px)) !important;
    padding:46px 12px 12px !important;
    gap:8px !important;
  }

  body.viewer-page #stickyNotePanel.viewer-sticky-panel textarea,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel .viewer-textarea{
    min-height:68px !important;
  }
}

@media (orientation:landscape) and (max-width:900px){
  body.viewer-page .viewer-mini-panel.is-open,
  body.viewer-page .viewer-mini-panel.open,
  body.viewer-page #movePanel.open,
  body.viewer-page #addSceneModelPanel.is-open,
  body.viewer-page #addSceneModelPanel.open,
  body.viewer-page #sunTimePanel.viewer-time-panel.is-open,
  body.viewer-page #sunTimePanel.viewer-time-panel.open,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel.is-open,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel.open{
    max-height:calc(100dvh - 18px) !important;
  }

  body.viewer-page #addSceneModelPanel.viewer-add-model-panel.is-open,
  body.viewer-page #addSceneModelPanel.viewer-add-model-panel.open{
    width:min(300px, calc(100vw - 28px)) !important;
    padding:40px 12px 10px !important;
    gap:8px !important;
  }

  body.viewer-page #addSceneModelPanel .scene-model-drop-card{
    min-height:92px !important;
    padding:9px 12px !important;
    gap:5px !important;
  }

  body.viewer-page #addSceneModelPanel .scene-model-cube{
    width:38px !important;
    height:38px !important;
  }

  body.viewer-page #addSceneModelPanel .scene-model-drop-card small,
  body.viewer-page #addSceneModelPanel .scale-reference-note{
    font-size:9.5px !important;
    line-height:1.25 !important;
  }

  body.viewer-page #movePanel.viewer-transform-panel.open{
    width:min(390px, calc(100vw - 28px)) !important;
    padding:40px 12px 10px !important;
  }

  body.viewer-page #movePanel .viewer-transform-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }

  body.viewer-page #mediaOverlay .media-panel{
    width:min(390px, calc(100vw - 28px)) !important;
    max-height:calc(100dvh - 18px) !important;
    padding:40px 12px 10px !important;
  }

  body.viewer-page #sunTimePanel.viewer-time-panel.is-open,
  body.viewer-page #sunTimePanel.viewer-time-panel.open{
    width:min(230px, calc(100vw - 28px)) !important;
    padding:40px 12px 10px !important;
  }

  body.viewer-page #stickyNotePanel.viewer-sticky-panel.is-open,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel.open{
    width:min(252px, calc(100vw - 28px)) !important;
    padding:40px 12px 10px !important;
  }

  body.viewer-page #stickyNotePanel.viewer-sticky-panel textarea,
  body.viewer-page #stickyNotePanel.viewer-sticky-panel .viewer-textarea{
    min-height:48px !important;
  }
}