html,body{height:100%;margin:0;font-family:Arial,Helvetica,sans-serif;background:#edf3f8}
#container{width:100%;height:100vh;display:block;}
#ui{position:fixed;left:12px;top:12px;background:rgba(255,255,255,0.96);padding:10px;border:1px solid #dfeaf4;border-radius:12px;box-shadow:0 6px 20px rgba(16,40,64,0.12);z-index:10;max-width:min(460px,calc(100vw - 24px));backdrop-filter:blur(8px)}
#uiBody{max-height:78vh;overflow:auto;opacity:1;margin-top:8px;transition:max-height .22s ease, opacity .18s ease, margin-top .18s ease}
#ui.collapsed #uiBody{max-height:0;opacity:0;overflow:hidden;pointer-events:none;margin-top:0}
#uiHandle{appearance:none;border:1px solid #8ea4b8;background:linear-gradient(180deg,#f7fbff,#eaf2fb);color:#16324a;border-radius:10px;width:34px;height:34px;padding:0;font-size:18px;line-height:1;cursor:pointer;transition:background .12s ease, transform .12s ease, box-shadow .12s ease;box-shadow:0 2px 6px rgba(16,40,64,0.08)}
#uiHandle:hover{background:linear-gradient(180deg,#f3f9ff,#e4eef9);transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,40,64,0.12)}
#uiHandle:active{transform:translateY(0)}
#ui h1{margin:0 0 6px 0;font-size:16px}
#ui p{margin:4px 0;font-size:13px}
.profile-panel{
  position:fixed;
  top:18px;
  right:18px;
  width:min(42vw, 520px);
  height:min(56vh, 420px);
  min-width:320px;
  min-height:220px;
  z-index:20;
  background:#fff;
  border:1px solid #dfeaf4;
  border-radius:12px;
  padding:8px 10px 10px;
  box-shadow:0 12px 28px rgba(0,0,0,0.18);
  resize:both;
  overflow:hidden;
  cursor:grab;
  user-select:none;
}
.profile-panel.dragging{cursor:grabbing}
.profile-panel-header{
  height:18px;
  line-height:18px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#4a5a6a;
  padding:0 0 6px;
  cursor:grab;
}
#profilePanel::-webkit-scrollbar{display:none}
#profilePanel{scrollbar-width:none;-ms-overflow-style:none}
#profilePanel button{cursor:pointer}
#profilePanel svg{user-select:none; height:calc(100% - 24px); width:100%; display:block; background:#f8f8f8; border:1px solid #ddd; cursor:crosshair; touch-action:none;}
.console-log{margin-top:8px;max-height:160px;width:320px;overflow:auto;background:#111;color:#eee;padding:6px;font-family:Consolas,monospace;font-size:12px;border-radius:4px}
.console-log .err{color:#ff8080}
.console-log .warn{color:#ffd080}
.console-log .info{color:#c0ffc0}

/* Top-center attention banner: shown until the user drops a file, then hidden permanently. */
.drop-banner{
  position:fixed;
  top:22px;
  left:50%;
  transform:translate(-50%,0);
  z-index:15;
  text-align:center;
  background:rgba(255,255,255,0.96);
  border:1px solid #d6e5f5;
  border-radius:12px;
  padding:16px 28px;
  box-shadow:0 8px 24px rgba(16,50,80,0.12);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.drop-banner.hidden{opacity:0;transform:translate(-50%,-14px)}
.drop-banner-title{font-size:22px;font-weight:700;color:#16324a;letter-spacing:.2px}
.drop-banner-formats{margin-top:8px;display:flex;justify-content:center;gap:8px}

/* Hint shown when profile measurement mode is activated; fades out as soon as the user
   clicks in the 3D model to place the first profile point. pointer-events:none so it
   never blocks the click it is telling the user to make. */
.profile-hint{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:16;
  text-align:center;
  background:rgba(22,50,74,0.94);
  color:#fff;
  border-radius:12px;
  padding:14px 22px;
  font-size:21px;
  font-weight:700;
  line-height:1.35;
  max-width:min(860px,92vw);
  letter-spacing:.2px;
  box-shadow:0 8px 22px rgba(16,50,80,0.2);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.profile-hint.hidden{opacity:0;transform:translate(-50%,-56%)}

.profile-hint.slope-hint{
  top:auto;
  bottom:26px;
  transform:translate(-50%,0);
  font-size:18px;
  padding:12px 20px;
  max-width:min(980px,94vw);
  z-index:14;
}

.profile-hint.slope-hint.hidden{transform:translate(-50%,8px)}

/* Always-visible controls: quick actions, surface list. These stay on screen even while the
   collapsible #uiBody (help text, status, sliders) is hidden, since the user needs quick access to
   clear annotations, profile mode and the surface list at all times. */
#uiPinned{margin-top:8px;display:flex;flex-direction:column;gap:10px}

.fmt-chip{
  font-family:Consolas,monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.6px;
  color:#2b6cb0;
  background:#fff;
  border:1px solid #b9d3ec;
  border-radius:4px;
  padding:2px 6px;
}
.fmt-chip-lg{font-size:12px;padding:3px 9px}

.quick-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{
  appearance:none;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  color:#16324a;
  background:linear-gradient(180deg,#f7fbff,#edf4fb);
  border:1px solid #d3ddea;
  border-radius:8px;
  min-height:34px;
  padding:7px 12px;
  box-shadow:0 1px 2px rgba(16,40,64,0.05);
  transition:background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.btn:hover{background:linear-gradient(180deg,#f2f9ff,#e8f0f9);transform:translateY(-1px);box-shadow:0 3px 8px rgba(16,40,64,0.1)}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(16,40,64,0.06)}
.btn-accent{color:#fff;background:linear-gradient(180deg,#3a7bc0,#2b6cb0);border-color:#2b6cb0}
.btn-accent:hover{background:linear-gradient(180deg,#2e73b6,#245a92)}

.surface-panel{
  border:1px solid #e3e9f0;
  border-radius:8px;
  padding:8px;
  background:linear-gradient(180deg,#ffffff,#f9fbfe);
}
.panel-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#4a5a6a;margin-bottom:6px}
#surfaceList{display:flex;flex-direction:column;gap:6px}

.annotation-scale-row{margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.annotation-scale-row label{font-weight:600;font-size:13px}
.annotation-scale-row input[type="range"]{width:140px}
.annotation-scale-row span{min-width:42px;display:inline-block;font-size:13px}

.export-modal{position:fixed;inset:0;z-index:2000;display:block}
.export-modal.hidden{display:none}
.export-modal-backdrop{position:absolute;inset:0;background:rgba(10,20,30,0.42)}
.export-modal-card{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(96vw,var(--export-card-width,420px));
  background:#fff;
  border:1px solid #d8e3ee;
  border-radius:12px;
  box-shadow:0 14px 34px rgba(8,24,40,0.3);
  padding:14px;
}
.export-modal-card h2{margin:0 0 8px 0;font-size:18px;color:#16324a}
.export-model-name{margin:0 0 8px 0;font-size:12px;color:#4a5a6a;white-space:normal;overflow-wrap:anywhere}
.export-format-list{display:grid;gap:6px;margin:10px 0 12px}
.export-format-list label{font-size:14px;color:#1d344b;display:flex;align-items:center;gap:8px}
.export-hint{min-height:18px;margin:0 0 10px 0;font-size:12px;color:#5e7388}
.export-actions{display:flex;justify-content:flex-end;gap:8px}

body.export-open #ui,
body.export-open .profile-panel{pointer-events:none}

.footer-logo-wrap{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  z-index:25;
}

.footer-logo{
  width:96px;
  height:auto;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(2,6,23,0.12);
  background:rgba(255,255,255,0.9);
  padding:6px;
  display:block;
}

.footer-text-link{
  font-family:Arial,Helvetica,sans-serif;
  font-weight:600;
  font-size:1rem;
  color:inherit;
  text-decoration:none;
  padding:5px 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.9);
  box-shadow:0 10px 30px rgba(2,6,23,0.12);
  margin-right:10px;
  display:flex;
  align-items:center;
  height:50px;
  box-sizing:border-box;
}

@media (max-width:700px){
  .footer-logo-wrap{right:10px;bottom:10px}
  .footer-logo{width:78px}
  .footer-text-link{font-size:.9rem;height:44px;padding:4px 10px}
  .profile-hint{font-size:17px;padding:12px 16px}
  .profile-hint.slope-hint{font-size:14px;bottom:12px;padding:10px 14px}
}