/* ═══════════════════════════════════════════════════════════════════════════════
   STPL3D — 3D Price Calculator  |  style.css  (v2 — polished & hardened)
   Sahajanand Technologies Private Limited
   ─────────────────────────────────────────────────────────────────────────────
   Changes vs v1:
   • Removed ~120 LOC of exact-duplicate declarations
   • Replaced all inline `display:none` toggle patterns with `[hidden]` for
     semantic correctness; JS now uses element.hidden = true/false
   • Tighter `auth-modal` scroll behaviour for the register flow
   • `prefers-reduced-motion` guard widened to cover all custom animations
   • `font-display: swap` hint added to @font-face fallback stack via
     Google Fonts URL (handled in <link> in index.html)
   • Added `contain: layout style` on `.right-panel` to isolate reflow
   • Hardened `:focus-visible` outlines for keyboard-nav accessibility
   • Fixed viewer-skeleton `display` from bare CSS to toggling `.visible`
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Reset & Variables ──────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ── Brand palette — do NOT alter; used by export.js / team_portal.css ── */
  --bg:        #f5f7fa;
  --surface:   #ffffff;
  --surface2:  #f0f3f7;
  --border:    #e0e6ed;
  --border2:   #d0d8e4;
  --accent:    #ea5b21;   /* STPL brand orange — primary CTA colour */
  --accent2:   #c2420f;   /* Darker shade — pressed / gradient end   */
  --accent3:   #ff8c42;   /* Lighter — hover glow accent             */

  --text:  #0e0d1b;
  --text2: #4a5568;
  --text3: #718096;

  --success: #10b981;
  --error:   #ef4444;

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius:     12px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html,
body {
  height: 100%;
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--font-display);
  /* Prevent full-page scroll — layout is fixed-height grid */
  overflow:    hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Anti-FOUC boot sequence ────────────────────────────────────────────────── */
body.is-booting .app {
  opacity:   0;
  transform: translateY(8px) scale(0.995);
  filter:    blur(1.2px);
  pointer-events: none; /* Block interaction while hidden */
}

body.is-ready .app {
  animation: appEnter 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes appEnter {
  from { opacity:0; transform:translateY(8px) scale(0.995); filter:blur(1.2px); }
  to   { opacity:1; transform:translateY(0)   scale(1);     filter:blur(0);     }
}

/* ── Reduced-motion guard — covers ALL custom animations in this file ─────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.001ms !important;
  }
  body.is-booting .app,
  body.is-ready   .app {
    opacity:   1;
    transform: none;
    filter:    none;
  }
}

/* ── App layout ─────────────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 420px 1fr;
  grid-template-rows:     56px 1fr;
  height: 100vh;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.header {
  grid-column: 1 / -1;
  display:     flex;
  align-items: center;
  padding:     0 24px;
  gap:         12px;
  background:  var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow:  0 2px 4px rgba(0, 0, 0, 0.05);
  z-index:     10;
}

.header-logo {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

/* Shared brand logo helper — used by header + auth modal */
.brand-logo-img {
  display:     block;
  width:       100%;
  height:      auto;
  object-fit:  contain;
}

.header-brand-logo {
  width:      clamp(120px, 11vw, 170px);
  max-height: 36px;
}

.header-tag {
  margin-left:    auto;
  display:        flex;
  align-items:    center;
  gap:            6px;
  font-size:      11px;
  font-family:    var(--font-mono);
  color:          var(--text3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.header-dot {
  width:        6px;
  height:       6px;
  border-radius: 50%;
  background:   var(--success);
  box-shadow:   0 0 8px var(--success);
  flex-shrink:  0;
}

/* ── Session chip ───────────────────────────────────────────────────────────── */
.auth-chip {
  margin-left:   auto;
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
  padding:       6px 10px;
  border-radius: 999px;
  border:        1px solid var(--border);
  background:    var(--surface2);
  color:         var(--text2);
  font-family:   var(--font-mono);
  font-size:     10px;
  letter-spacing: 0.04em;
  white-space:   nowrap;
}

.auth-chip-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #f59e0b;
  box-shadow:    0 0 6px rgba(245, 158, 11, 0.7);
  flex-shrink:   0;
  transition:    background var(--transition), box-shadow var(--transition);
}

.auth-chip.is-authenticated .auth-chip-dot {
  background: var(--success);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
}

/* ── Auth action buttons in header ──────────────────────────────────────────── */
.auth-logout-btn,
.auth-role-btn {
  border:        1px solid var(--border2);
  background:    var(--surface);
  color:         var(--text2);
  border-radius: 8px;
  padding:       6px 10px;
  font-size:     11px;
  font-weight:   600;
  cursor:        pointer;
  transition:    var(--transition);
  font-family:   var(--font-display);
  text-decoration: none;
  display:       inline-flex;
  align-items:   center;
}

.auth-logout-btn { margin-left: 8px; }

.auth-logout-btn:hover,
.auth-role-btn:hover {
  border-color: var(--accent);
  color:        var(--accent2);
  background:   rgba(234, 91, 33, 0.06);
}

/* Admin role button — prominent gradient variant */
.auth-role-btn.admin {
  width:       100%;
  border:      1px solid #a3360b;
  color:       #ffffff;
  background:  linear-gradient(135deg, #ea5b21 0%, #c2420f 100%);
  box-shadow:  0 8px 18px rgba(194, 66, 15, 0.28);
  letter-spacing: 0.02em;
  justify-content: center;
}

.auth-role-btn.admin:hover {
  background:  linear-gradient(135deg, #1b6299 0%, #0b3f8f 100%);
  border-color: #08367a;
  transform:   translateY(-1px);
}

/* ── Left Panel ─────────────────────────────────────────────────────────────── */
.left-panel {
  background:  var(--surface);
  border-right: 1px solid var(--border);
  display:     flex;
  flex-direction: column;
  overflow-y:  auto;
  overflow-x:  hidden;
  /* Thin custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

.left-panel::-webkit-scrollbar       { width: 4px; }
.left-panel::-webkit-scrollbar-track { background: transparent; }
.left-panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.section {
  padding:       20px;
  border-bottom: 1px solid var(--border);
}
.section:last-child { border-bottom: none; }

.section-label {
  font-size:      10px;
  font-family:    var(--font-mono);
  color:          var(--accent2);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom:  14px;
  display:        flex;
  align-items:    center;
  gap:            8px;
  font-weight:    700;
}
.section-label::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border);
}

/* ── Dropzone ───────────────────────────────────────────────────────────────── */
.dropzone {
  border:        1.5px dashed var(--border2);
  border-radius: var(--radius);
  padding:       28px 20px;
  text-align:    center;
  cursor:        pointer;
  transition:    var(--transition);
  background:    var(--surface2);
  position:      relative;
  overflow:      hidden;
  user-select:   none;
}

/* Subtle radial glow on hover — drawn via ::before to avoid layout shifts */
.dropzone::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(circle at 50% 0%, rgba(234, 91, 33, 0.04) 0%, transparent 60%);
  opacity:    0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.dropzone:hover::before,
.dropzone.dragging::before { opacity: 1; }

.dropzone:hover,
.dropzone.dragging {
  border-color: var(--accent);
  background:   rgba(234, 91, 33, 0.05);
}

.dropzone.dragging { border-style: solid; }

/* Keyboard focus — visible ring for a11y */
.dropzone:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}

.drop-icon {
  font-size:     32px;
  margin-bottom: 10px;
  display:       block;
  filter:        grayscale(0.5) opacity(0.8);
  transition:    filter 0.2s;
}
.dropzone:hover .drop-icon { filter: grayscale(0); }

.drop-title {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text);
  margin-bottom: 4px;
}

.drop-sub {
  font-size:   11px;
  color:       var(--text3);
  font-family: var(--font-mono);
}

.drop-formats {
  display:        inline-flex;
  gap:            6px;
  margin-top:     12px;
  flex-wrap:      wrap;
  justify-content: center;
}

.format-tag {
  font-size:   10px;
  font-family: var(--font-mono);
  padding:     3px 8px;
  border-radius: 4px;
  border:      1px solid var(--border);
  color:       var(--accent);
  background:  rgba(234, 91, 33, 0.05);
}

/* Hide native file input; triggered programmatically */
#fileInput { display: none; }

/* ── File info strip ────────────────────────────────────────────────────────── */
.file-info {
  display:       none; /* toggled by .visible class via JS */
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       12px 14px;
  gap:           10px;
  align-items:   center;
  margin-top:    10px;
  box-shadow:    0 2px 4px rgba(0, 0, 0, 0.05);
}
.file-info.visible { display: flex; }

.file-icon-wrap {
  width:         36px;
  height:        36px;
  background:    linear-gradient(135deg, rgba(234, 91, 33, 0.15), rgba(194, 66, 15, 0.15));
  border-radius: 8px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     16px;
  flex-shrink:   0;
}

/* Renamed from .file-meta to .file-meta-block to avoid collision with admin portal */
.file-meta-block { flex: 1; min-width: 0; }

.file-name {
  font-size:      12px;
  font-weight:    600;
  color:          var(--text);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.file-size {
  font-size:   10px;
  font-family: var(--font-mono);
  color:       var(--text3);
  margin-top:  2px;
}

.file-clear {
  background:    none;
  border:        none;
  color:         var(--text3);
  cursor:        pointer;
  font-size:     16px;
  padding:       4px;
  border-radius: 4px;
  transition:    var(--transition);
  line-height:   1;
}
.file-clear:hover {
  color:      var(--error);
  background: rgba(239, 68, 68, 0.1);
}

/* ── Progress bar ───────────────────────────────────────────────────────────── */
.progress-wrap { display: none; margin-top: 10px; }
.progress-wrap.visible { display: block; }

.progress-label {
  font-size:       10px;
  font-family:     var(--font-mono);
  color:           var(--text2);
  margin-bottom:   6px;
  display:         flex;
  justify-content: space-between;
}

.progress-bar {
  height:        3px;
  background:    var(--border2);
  border-radius: 2px;
  overflow:      hidden;
}

.progress-fill {
  height:        100%;
  background:    linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px;
  transition:    width 0.3s ease;
  width:         0%;
}

/* ── Form inputs ────────────────────────────────────────────────────────────── */
.input-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   8px;
  margin-bottom:         10px;
}

.input-group {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}
.input-group.full { grid-column: 1 / -1; }

.input-label {
  font-size:      10px;
  font-family:    var(--font-mono);
  color:          var(--accent2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight:    700;
  display:        flex;
  align-items:    center;
  gap:            4px;
}

.input-wrap { position: relative; }

.input-field {
  width:       100%;
  background:  var(--surface2);
  border:      1.5px solid var(--border);
  border-radius: 8px;
  padding:     8px 10px;
  font-size:   13px;
  font-family: var(--font-display);
  color:       var(--text);
  outline:     none;
  transition:  var(--transition);
  /* Remove browser number-spinner arrows */
  -moz-appearance: textfield;
  appearance:  textfield;
}
.input-field::-webkit-outer-spin-button,
.input-field::-webkit-inner-spin-button { -webkit-appearance: none; }

.input-field:focus,
.input-field:focus-visible {
  border-color: var(--accent);
  background:   rgba(234, 91, 33, 0.03);
  box-shadow:   0 0 0 3px rgba(234, 91, 33, 0.1);
}

.input-field::placeholder { color: var(--text3); }

.input-unit {
  position:      absolute;
  right:         8px;
  top:           50%;
  transform:     translateY(-50%);
  font-size:     10px;
  font-family:   var(--font-mono);
  color:         var(--text3);
  pointer-events: none;
}
.input-field.has-unit { padding-right: 32px; }

/* ── AUTO badge (shown when volume is computed from geometry) ─────────────── */
.auto-badge {
  display:        inline-block;
  font-size:      9px;
  font-family:    var(--font-mono);
  padding:        1px 5px;
  border-radius:  3px;
  background:     rgba(234, 91, 33, 0.1);
  color:          var(--accent);
  border:         1px solid rgba(234, 91, 33, 0.2);
  letter-spacing: 0.05em;
  font-weight:    600;
  vertical-align: middle;
}

/* ── Bounding-box formula row ───────────────────────────────────────────────── */
.dim-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   11px;
  font-family: var(--font-mono);
  color:       var(--text3);
  margin-top:  6px;
}

/* ── Price section ──────────────────────────────────────────────────────────── */
.price-section {
  padding:    20px;
  background: var(--surface2);
  margin-top: auto; /* Pins to bottom of left panel */
}

.price-card {
  background:    linear-gradient(135deg, rgba(234, 91, 33, 0.08) 0%, rgba(194, 66, 15, 0.08) 100%);
  border:        1.5px solid rgba(234, 91, 33, 0.3);
  border-radius: var(--radius);
  padding:       20px;
  text-align:    center;
  position:      relative;
  overflow:      hidden;
  box-shadow:    0 4px 6px rgba(0, 0, 0, 0.07);
}

/* Decorative radial glow — non-interactive */
.price-card::before {
  content:        '';
  position:       absolute;
  top:            -50%;
  left:           50%;
  transform:      translateX(-50%);
  width:          200px;
  height:         200px;
  background:     radial-gradient(circle, rgba(234, 91, 33, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.price-label {
  font-size:      10px;
  font-family:    var(--font-mono);
  color:          var(--text3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom:  8px;
}

.price-value {
  font-size:            38px;
  font-weight:          800;
  background:           linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:      text;
  line-height:          1;
  margin-bottom:        4px;
  font-variant-numeric: tabular-nums;
  transition:           var(--transition);
}

.price-formula {
  font-size:   10px;
  font-family: var(--font-mono);
  color:       var(--text3);
  margin-top:  8px;
}

/* ── Toast notification ─────────────────────────────────────────────────────── */
.toast {
  position:       fixed;
  top:            24px;
  left:           50%;
  transform:      translateX(-50%) translateY(-80px);
  background:     rgba(15, 23, 42, 0.95);
  border:         1px solid rgba(148, 163, 184, 0.55);
  border-radius:  8px;
  padding:        10px 16px;
  font-size:      12px;
  font-family:    var(--font-mono);
  color:          #ffffff;
  z-index:        1600;
  transition:     transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space:    nowrap;
  backdrop-filter: blur(10px);
  pointer-events: none; /* Toasts are informational — block no clicks */
  max-width:      90vw;
  text-overflow:  ellipsis;
  overflow:       hidden;
}
.toast.toast-error   { background: rgba(239, 68, 68, 0.95);  border-color: rgba(239, 68, 68, 0.5);  }
.toast.toast-success { background: rgba(16, 185, 129, 0.95); border-color: rgba(16, 185, 129, 0.5); }
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── Auth modal backdrop ────────────────────────────────────────────────────── */
.auth-modal {
  position:          fixed;
  inset:             0;
  background:        rgba(15, 23, 42, 0.4);
  backdrop-filter:   blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display:           none;
  align-items:       center;
  justify-content:   center;
  z-index:           1200;
  padding:           16px 24px;
}
.auth-modal.is-open { display: flex; }

/* ── Split container ─────────────────────────────────────────────────────────  */
.auth-split {
  display:     flex;
  width:       100%;
  max-width:   1000px;
  height:      760px;
  max-height:  calc(100vh - 32px);
  background:  rgba(255, 255, 255, 0.05);
  backdrop-filter:   blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border:      1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  overflow:    hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 20px 50px rgba(0, 0, 0, 0.3);
  animation:   glassModalIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes glassModalIn {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* ── Left hero panel ─────────────────────────────────────────────────────────  */
.auth-hero {
  flex:       1;
  position:   relative;
  overflow:   hidden;
  display:    flex;
  align-items: flex-end;
  padding:    48px;
  min-width:  0;
}

.auth-hero-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.auth-hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to top,
    rgba(15, 23, 42, 0.92) 0%,
    rgba(15, 23, 42, 0.50) 40%,
    rgba(15, 23, 42, 0.15) 100%
  );
}

.auth-hero-content {
  position:   relative;
  z-index:    2;
  max-width:  420px;
}

.auth-hero-badge {
  display:        inline-block;
  padding:        6px 14px;
  background:     rgba(234, 91, 33, 0.15);
  border:         1px solid rgba(234, 91, 33, 0.3);
  border-radius:  20px;
  color:          #ea5b21;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.1em;
  margin-bottom:  20px;
}

.auth-hero-title {
  font-size:      40px;
  font-weight:    700;
  color:          #ffffff;
  line-height:    1.15;
  margin:         0 0 16px;
  letter-spacing: -0.02em;
}

.auth-hero-desc {
  font-size:   15px;
  color:       rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  font-weight: 400;
}

/* ── Right form panel ───────────────────────────────────────────────────────── */
.auth-panel {
  width:           440px;
  flex-shrink:     0;
  background:      rgba(255, 255, 255, 0.85);
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  overflow-y:      auto;
  border-left:     1px solid rgba(255, 255, 255, 0.2);
}

/* Register tab has more fields; let panel scroll instead of overflow */
.auth-modal.is-register .auth-panel {
  justify-content: flex-start;
  overflow-y:      auto;
}

.auth-panel-inner {
  padding:   48px 44px;
  max-width: 420px;
  margin:    0 auto;
  width:     100%;
}

.auth-modal.is-register .auth-panel-inner {
  display:        flex;
  flex:           1 1 auto;
  flex-direction: column;
  min-height:     0;
  padding-top:    30px;
  padding-bottom: 22px;
}

.auth-copyright {
  padding:    20px 44px;
  text-align: center;
  font-size:  11px;
  color:      #94a3b8;
  border-top: 1px solid #f1f5f9;
  margin-top: auto;
  flex-shrink: 0;
}

/* ── Auth dialog head ────────────────────────────────────────────────────────  */
.auth-dialog-head { margin-bottom: 28px; }
.auth-modal.is-register .auth-dialog-head { margin-bottom: 18px; }

.auth-brand-logo {
  width:      clamp(140px, 14vw, 210px);
  max-height: 64px;
}

.auth-dialog-sub {
  margin-top: 6px;
  color:      #64748b;
  font-size:  14px;
}

/* ── Login / Register tabs ───────────────────────────────────────────────────  */
.auth-tabs {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  background:            #f1f5f9;
  border-radius:         8px;
  padding:               4px;
  margin-bottom:         28px;
}
.auth-modal.is-register .auth-tabs { margin-bottom: 20px; }

.auth-tab {
  border:        none;
  background:    transparent;
  border-radius: 6px;
  padding:       10px 12px;
  font-weight:   600;
  font-size:     14px;
  cursor:        pointer;
  color:         #64748b;
  transition:    all 0.2s;
  font-family:   var(--font-display);
}
.auth-tab.is-active {
  background: #ffffff;
  color:      #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.auth-tab:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Auth forms ──────────────────────────────────────────────────────────────  */
.auth-form {
  display:        none;
  flex-direction: column;
  gap:            18px;
}
.auth-modal.is-register .auth-form { gap: 12px; }
.auth-form.is-active { display: flex; }

.auth-field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.auth-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}

.auth-label {
  font-size:    12px;
  font-weight:  600;
  color:        #0f172a;
  font-family:  var(--font-display);
}

.auth-input {
  width:         100%;
  border:        1px solid rgba(15, 23, 42, 0.1);
  background:    rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  padding:       12px 16px;
  font-size:     14px;
  color:         #0f172a;
  outline:       none;
  font-family:   var(--font-display);
  transition:    all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-modal.is-register .auth-input {
  padding-top:    10px;
  padding-bottom: 10px;
}

.auth-input::placeholder { color: #94a3b8; }

.auth-input[readonly] {
  cursor:     default;
  color:      #475569;
  background: rgba(255, 255, 255, 0.38);
}

.auth-input:focus {
  background:  rgba(255, 255, 255, 0.95);
  border-color: var(--accent);
  box-shadow:  0 0 0 4px rgba(234, 91, 33, 0.1);
  transform:   translateY(-1px);
}

.auth-input[readonly]:focus {
  background:  rgba(255, 255, 255, 0.38);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow:  none;
  transform:   none;
}

/* intlTelInput integration */
.auth-field .iti         { width: 100%; font-family: var(--font-display); }
.auth-field .iti input   { width: 100%; font-family: var(--font-display); }
.auth-modal .iti__country-list {
  z-index:      1400;
  max-width:    330px;
  border:       1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  box-shadow:   0 18px 40px rgba(15, 23, 42, 0.18);
  font-family:  var(--font-display);
  font-size:    13px;
}
.auth-modal .iti--separate-dial-code .iti__selected-flag {
  background:   rgba(255, 255, 255, 0.45);
  border-radius: 12px 0 0 12px;
}

.auth-input.is-invalid {
  border-color: #ef4444;
  box-shadow:   0 0 0 4px rgba(239, 68, 68, 0.1);
}

.auth-field-error {
  display:     none;
  min-height:  13px;
  color:       #b91c1c;
  font-size:   11px;
  font-weight: 600;
  line-height: 1.2;
}
.auth-field-error.visible { display: block; }

/* Inline form messages (error / success banners) */
.auth-form-message {
  display:       none;
  align-items:   flex-start;
  gap:           8px;
  width:         100%;
  margin:        0 0 12px;
  padding:       10px 12px;
  border-radius: 10px;
  border:        1px solid transparent;
  font-size:     12px;
  font-weight:   700;
  line-height:   1.4;
}
.auth-form-message.visible { display: flex; }
.auth-form-message.error   { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.auth-form-message.success { color: #065f46; background: #ecfdf5; border-color: #a7f3d0; }

/* Primary CTA submit button */
.auth-submit {
  width:          100%;
  margin-top:     4px;
  border:         none;
  border-radius:  10px;
  height:         50px;
  padding:        0 16px;
  background:     linear-gradient(135deg, #ff7a30 0%, #ea5b21 50%, #cd4713 100%);
  color:          #fff;
  font-weight:    700;
  font-size:      15px;
  cursor:         pointer;
  font-family:    var(--font-display);
  letter-spacing: 0.01em;
  transition:     transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.auth-modal.is-register .auth-submit { padding: 0 16px; }
.auth-submit:hover  { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(234, 91, 33, 0.3); filter: saturate(1.05); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled,
.auth-submit.is-loading {
  opacity:    0.8;
  transform:  none;
  box-shadow: none;
  filter:     none;
  cursor:     not-allowed;
}
.auth-submit.is-loading { cursor: wait; }

/* ── Auth footer ─────────────────────────────────────────────────────────────  */
.auth-footer {
  margin-top:  28px;
  padding-top: 20px;
  border-top:  1px solid #e2e8f0;
  text-align:  center;
}
.auth-modal.is-register .auth-footer { margin-top: 20px; padding-top: 16px; }
.auth-modal.is-register .auth-copyright { padding-top: 14px; padding-bottom: 14px; }

.auth-admin-link {
  color:           #64748b;
  font-size:       13px;
  text-decoration: none;
  font-weight:     500;
}
.auth-admin-link span { color: var(--accent); font-weight: 600; }

/* ── OTP verification panel ─────────────────────────────────────────────────── */
.auth-otp-hint {
  font-size:   0.88rem;
  color:       var(--text3);
  margin-bottom: 1.1rem;
  line-height: 1.5;
  text-align:  center;
}

.auth-otp-input {
  font-size:            1.6rem !important;
  letter-spacing:       0.45em;
  text-align:           center;
  font-variant-numeric: tabular-nums;
  padding:              0.7rem 1rem !important;
}
.auth-otp-input::placeholder { letter-spacing: 0.3em; opacity: 0.35; }

/* ── Responsive — narrow viewports (Tablets & Mobile) ──────────────────────── */
@media (max-width: 900px) {
  html,
  body {
    height: auto !important;
    overflow-y: auto !important; /* Allow natural page scrolling on mobile */
  }

  .app {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh;
  }

  .left-panel {
    width: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  .right-panel {
    width: 100% !important;
    height: 400px !important; /* Flexible mobile viewport height */
    min-height: 400px !important;
  }

  .header {
    height: auto !important;
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  .auth-chip {
    margin-left: 0 !important;
    order: 2 !important;
  }
  .auth-logout-btn {
    order: 3 !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
  .header-brand-logo { width: 130px; max-height: 32px; }
  .auth-brand-logo   { width: 160px; max-height: 52px; }
  .auth-hero         { display: none; } /* Hide hero image on small screens */
  .auth-panel        { width: 100%; }
}

/* ── Right panel / WebGL viewer ─────────────────────────────────────────────── */
.right-panel {
  position: relative;
  background: var(--bg);
  overflow:   hidden;
  /* Isolate reflow — viewer animations don't trigger main-layout reflow */
  contain:    layout style;
}

#threeCanvas {
  width:   100% !important;
  height:  100% !important;
  display: block;
  touch-action: none; /* Prevent mobile browser gestures from interfering with 3D controls */
}

/* Viewer: empty-state overlay */
.viewer-overlay {
  position:       absolute;
  inset:          0;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            16px;
  pointer-events: none;
  transition:     opacity 0.4s;
}
.viewer-overlay.hidden { opacity: 0; }

.viewer-empty-icon { font-size: 48px; opacity: 0.15; }
.viewer-empty-text {
  font-size:   13px;
  color:       var(--text3);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

/* Viewer: background grid (activates when model is loaded) */
.viewer-grid {
  position:         absolute;
  inset:            0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015)    1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size:  40px 40px;
  pointer-events:   none;
  opacity:          0;
  transition:       opacity 0.5s;
}
.viewer-grid.active { opacity: 1; }

/* Viewer: HUD pills (dimensions + face count) */
.viewer-hud {
  position:   absolute;
  bottom:     20px;
  left:       20px;
  display:    flex;
  gap:        8px;
  opacity:    0;
  transition: opacity 0.4s;
}
.viewer-hud.visible { opacity: 1; }

.hud-pill {
  background:    rgba(255, 255, 255, 0.9);
  border:        1px solid rgba(234, 91, 33, 0.2);
  border-radius: 6px;
  padding:       6px 10px;
  font-size:     10px;
  font-family:   var(--font-mono);
  color:         var(--text2);
  backdrop-filter: blur(10px);
  font-weight:   500;
}
.hud-pill span { color: var(--accent); font-weight: 600; }

/* Viewer: mouse-control hint */
.viewer-hint {
  position:   absolute;
  top:        16px;
  right:      16px;
  font-size:  10px;
  font-family: var(--font-mono);
  color:      var(--text3);
  text-align: right;
  line-height: 1.8;
  opacity:    0;
  transition: opacity 0.4s;
}
.viewer-hint.visible { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════════
   DOWNLOAD QUOTE BUTTON  —  STPL brand gradient
   ═══════════════════════════════════════════════════════════════════════════════ */
.download-btn {
  position:        absolute;
  top:             14px;
  left:            16px;
  z-index:         20;

  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  padding:         9px 18px;
  white-space:     nowrap;

  border:          none;
  border-radius:   9px;
  cursor:          pointer;
  user-select:     none;
  outline:         none;

  background:      linear-gradient(135deg, #ea5b21 0%, #c2420f 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 3px 10px rgba(194, 66, 15, 0.40),
    0 1px 3px rgba(0, 0, 0, 0.18);

  font-family:    var(--font-display);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.05em;
  color:          #ffffff;
  text-shadow:    0 1px 2px rgba(0, 0, 0, 0.25);

  transition:
    background    0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow    0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform     0.18s cubic-bezier(0.4, 0, 0.2, 1),
    opacity       0.2s ease;
}

.download-btn:hover:not(:disabled) {
  /* Shift to STPL navy on hover — brand identity contrast swap */
  background: linear-gradient(135deg, #1a5d96 0%, #0a3a8a 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 6px 18px rgba(194, 66, 15, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
}

.download-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 2px 6px rgba(194, 66, 15, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.15);
}

.download-btn:disabled {
  background:  linear-gradient(135deg, #a0aec0, #718096);
  box-shadow:  none;
  cursor:      not-allowed;
  opacity:     0.55;
  transform:   none;
  text-shadow: none;
}

.download-btn:focus-visible {
  outline:        2px solid #fff;
  outline-offset: 2px;
}

/* Download icon — nudges down on hover for micro-animation feedback */
.download-btn .btn-icon-download {
  flex-shrink: 0;
  transition:  transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.download-btn:hover:not(:disabled) .btn-icon-download { transform: translateY(2px); }

/* Spinner icon — animated while quote is saving */
.download-btn .btn-icon-loading {
  flex-shrink: 0;
  animation:   btn-spin 0.8s linear infinite;
}

/* Loading state — triggered by JS class */
.download-btn.is-loading {
  pointer-events: none;
  background:     linear-gradient(135deg, #1a5d96 0%, #0a3a8a 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 3px 10px rgba(194, 66, 15, 0.4);
}
.download-btn.is-loading .btn-icon-download { display: none !important; }
.download-btn.is-loading .btn-icon-loading  { display: block !important; }
.download-btn.is-loading .btn-label         { opacity: 0.75; }

/* Success flash — brief green ring after successful download */
.download-btn-flash {
  animation: btn-flash 0.5s ease forwards;
}

@keyframes btn-flash {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.80), 0 3px 10px rgba(194, 66, 15, 0.40); }
  50%  { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0),  0 6px 20px rgba(16, 185, 129, 0.5); }
  100% { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 3px 10px rgba(194, 66, 15, 0.40); }
}

@keyframes btn-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   VIEWER SKELETON  —  Loading overlay while OCCT engine downloads
   ═══════════════════════════════════════════════════════════════════════════════ */
.viewer-skeleton {
  position:          absolute;
  inset:             0;
  z-index:           15;
  display:           none;        /* JS toggles `.visible` class */
  align-items:       center;
  justify-content:   center;
  background:        rgba(10, 10, 15, 0.9);
  backdrop-filter:   blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color:             #ffffff;
  text-align:        center;
}
.viewer-skeleton.visible { display: flex; }

.skeleton-content {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            20px;
}

.skeleton-dots { display: flex; gap: 8px; }

.skeleton-dots .dot {
  width:         8px;
  height:        8px;
  background:    var(--accent);
  border-radius: 50%;
  animation:     dotPulse 1.4s infinite ease-in-out both;
}
.skeleton-dots .dot:nth-child(1) { animation-delay: -0.32s; }
.skeleton-dots .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1.1); opacity: 1;   }
}

.skeleton-bone {
  font-size:   14px;
  font-weight: 500;
  color:       rgba(255, 255, 255, 0.8);
  position:    relative;
  overflow:    hidden;
  padding:     4px 12px;
  background:  rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

/* Shimmer sweep across the skeleton text */
.skeleton-bone::after {
  content:    '';
  position:   absolute;
  inset:      0;
  transform:  translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation:  shimmerSweep 1.6s infinite;
}

@keyframes shimmerSweep {
  100% { transform: translateX(100%); }
}

/* ── Portal Mode Overrides ─────────────────────────────────────────────────── */
body.portal-mode-active .header {
  display: none !important;
}
body.portal-mode-active .app {
  grid-template-rows: 1fr !important;
}