/* SmileSmart 3D viewer — shares the site's tokens (mint #1D9E75, near-black, the two faces) */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --black:#0b0b0c; --ink:#0e0e0e; --mint:#1D9E75; --mint-dark:#0F6E56;
  --gray-600:#5a5a5a; --gray-500:#7a7a7a; --gray-300:#c8c8c8; --border:rgba(255,255,255,0.12);
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--black);
  font-family:'DM Sans',sans-serif}

#viewer{position:fixed;inset:0}
#viewer canvas{display:block;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#viewer canvas:active{cursor:grabbing}

/* top bar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;padding:16px 22px;pointer-events:none}
.logo{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;color:#fff;
  pointer-events:auto;text-decoration:none}
.logo span{color:var(--mint)}
.bar-right{display:flex;gap:8px;pointer-events:auto}
.pill{font-size:12px;font-weight:500;color:#cfcfcf;background:rgba(255,255,255,0.06);
  border:1px solid var(--border);padding:8px 14px;border-radius:30px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.pill:hover{background:rgba(29,158,117,0.18);border-color:var(--mint);color:#fff}
.pill.active{background:var(--mint);border-color:var(--mint);color:#fff}

/* detail-model nav row (the four always-visible buttons) */
.model-nav{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:30;
  display:flex;gap:8px;padding:6px;background:rgba(18,18,18,0.7);backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:40px;flex-wrap:wrap;justify-content:center;max-width:94vw}

/* page title chip */
.page-title{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:25;
  font-family:'Cormorant Garamond',serif;font-size:17px;color:#fff;letter-spacing:.3px;pointer-events:none}

/* loading */
#loading{position:fixed;inset:0;z-index:50;background:var(--black);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .5s}
#loading.hide{opacity:0;pointer-events:none}
.load-ring{width:46px;height:46px;border-radius:50%;border:2px solid rgba(29,158,117,0.18);
  border-top-color:var(--mint);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.load-text{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#666}
.load-pct{font-size:11px;color:#444}
.load-error{color:#e0a0a0;font-size:14px;text-align:center;line-height:1.6;max-width:340px}
.load-error span{color:#888;font-size:12px}
.load-error code{color:var(--mint);background:rgba(255,255,255,0.05);padding:1px 5px;border-radius:3px}

/* hover tooltip (arch map identify) */
#tooltip{position:fixed;z-index:35;pointer-events:none;background:rgba(18,18,18,0.94);
  border:1px solid rgba(29,158,117,0.4);backdrop-filter:blur(10px);border-radius:8px;
  padding:9px 14px;font-size:13px;color:#fff;white-space:nowrap;opacity:0;
  transition:opacity .12s;transform:translate(-50%,-140%)}
#tooltip .tt-num{color:var(--mint);font-weight:600;margin-right:7px}
#tooltip.show{opacity:1}

/* annotation pins */
#pin-layer{position:fixed;inset:0;z-index:20;pointer-events:none}
.pin{position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  display:flex;align-items:center;gap:0}
.pin-dot{width:11px;height:11px;border-radius:50%;background:transparent;
  border:2px solid transparent;box-shadow:none;flex-shrink:0;
  pointer-events:auto;cursor:help;transition:transform .15s}
.pin-label{margin-left:8px;font-size:12.5px;font-weight:500;color:#fff;white-space:nowrap;
  background:rgba(18,18,18,0.82);backdrop-filter:blur(6px);padding:4px 10px;border-radius:20px;
  border:1px solid var(--border);pointer-events:auto;cursor:help;transition:all .15s}
.pin-def{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
  width:max-content;max-width:230px;font-size:12px;font-weight:300;line-height:1.5;color:#dcdcdc;
  background:rgba(12,12,13,0.96);border:1px solid rgba(29,158,117,0.35);border-radius:8px;
  padding:9px 12px;opacity:0;pointer-events:none;transition:opacity .15s;white-space:normal;z-index:5}
.pin:hover{z-index:10}
.pin:hover .pin-label{background:var(--mint);border-color:var(--mint)}
.pin:hover .pin-def{opacity:1}

/* calibration mode */
#calib-readout{position:fixed;bottom:64px;left:50%;transform:translateX(-50%);z-index:40;
  font-family:ui-monospace,monospace;font-size:13px;color:var(--mint);
  background:rgba(12,12,13,0.95);border:1px solid var(--border);border-radius:6px;
  padding:8px 16px;opacity:0;transition:opacity .12s;white-space:pre}
#calib-readout.show{opacity:1}
.calib-flag{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:40;
  font-size:11px;color:#c98;background:rgba(40,30,20,0.8);border:1px solid #6a4;
  padding:6px 14px;border-radius:20px}

.hint{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:15;
  font-size:11px;color:#555;letter-spacing:.3px;transition:opacity .6s}

@media(max-width:768px){
  .model-nav{top:auto;bottom:16px;transform:translateX(-50%)}
  .pin-label{font-size:11px;padding:3px 8px}
  .page-title{font-size:15px}
}