/* ─── Variables ─── */
:root {
  --bg: #FFFFFF;
  --surface: #F2F2F0;
  --surface-2: #EAEAE7;
  --text: #0A0A0A;
  --text-2: #888888;
  --text-3: #AAAAAA;
  --accent: #D4FF00;
  --accent-dim: rgba(212,255,0,0.10);
  --accent-glow: rgba(212,255,0,0.35);
  --border: #E0E0DE;
  --border-2: #C8C8C8;
  --radius: 0px;
  --radius-sm: 0px;
  --panel: 412px;
  --header-h: 60px;
  --font: 'Inter', 'DM Sans', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --t: 0.2s var(--ease);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}

/* ─── Header ─── */
.header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);
  display:flex;align-items:center;gap:24px;padding:0 32px;
  border-bottom:0.5px solid var(--border);
  background:var(--bg);z-index:100;
}
.header-logo{font-weight:700;font-size:14px;letter-spacing:.15em;text-transform:uppercase}
.header-tagline{font-family:var(--mono);font-size:10px;color:var(--text-3);letter-spacing:.06em}
.header-step{
  margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:500;
  color:var(--accent);letter-spacing:.12em;padding:4px 12px;
  background:var(--accent-dim);border:1px solid rgba(0,255,136,.2);border-radius:40px;
  transition:var(--t);
}

/* ─── Layout ─── */
.app-layout{display:flex;height:100vh;padding-top:var(--header-h)}

/* ─── Viewport ─── */
.viewport-section{
  flex:1;position:relative;overflow:hidden;
  background:#ececee;
}
.viewport-section::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.025) 1px,transparent 1px);
  background-size:48px 48px;
}
#three-canvas{display:block;width:100%;height:100%;position:relative;z-index:2}

.viewport-overlay{
  position:absolute;bottom:20px;left:20px;right:20px;
  display:flex;align-items:center;justify-content:space-between;
  z-index:10;pointer-events:none;
}
.view-hint{font-family:var(--mono);font-size:9px;color:rgba(0,0,0,.3);letter-spacing:.08em}
.view-controls{display:flex;gap:7px;pointer-events:all}
.view-btn{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border-2);background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);cursor:pointer;
  font-family:var(--mono);font-size:11px;color:var(--text);
  display:flex;align-items:center;justify-content:center;
  transition:var(--t);
}
.view-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--text)}

/* ─── Loader ─── */
.scene-loader{
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:rgba(236,236,238,.92);backdrop-filter:blur(6px);
  transition:opacity .35s ease;
}
.scene-loader.hidden{opacity:0;pointer-events:none}
.loader-ring{
  width:38px;height:38px;border-radius:50%;
  border:2px solid var(--border-2);border-top-color:var(--accent);
  animation:spin .75s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--text-2)}

/* ─── Cart overlay ─── */
.cart-overlay{
  position:absolute;inset:0;z-index:30;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  pointer-events:none;opacity:0;
}
.cart-overlay.active{opacity:1}
#cart-canvas{width:100%;height:100%;position:absolute;inset:0}
.cart-label{
  position:relative;z-index:2;margin-bottom:14%;
  opacity:0;transform:translateY(10px);
}
.cart-brand{
  font-family:var(--font);font-weight:700;
  font-size:28px;color:rgba(255,255,255,.12);
  letter-spacing:.12em;text-shadow:0 1px 3px rgba(0,0,0,.4);
  filter:drop-shadow(0 0 8px var(--accent-glow));
}

/* ─── Config Panel ─── */
.config-panel{
  width:var(--panel);flex-shrink:0;
  height:100%;overflow-y:auto;overflow-x:hidden;
  border-left:1px solid var(--border);background:var(--bg);
  scrollbar-width:thin;scrollbar-color:var(--surface-2) transparent;
  padding-bottom:40px;
}
.config-panel::-webkit-scrollbar{width:3px}
.config-panel::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:3px}

/* ─── Sections ─── */
.config-section{
  padding:22px 22px 0;
  animation:fadeUp .4s ease both;
}
.config-section+.config-section{border-top:1px solid var(--border);margin-top:22px;padding-top:22px}
.config-section:nth-child(1){animation-delay:.04s}
.config-section:nth-child(2){animation-delay:.08s}
.config-section:nth-child(3){animation-delay:.12s}
.config-section:nth-child(4){animation-delay:.16s}
.config-section:nth-child(5){animation-delay:.20s}
.config-section:nth-child(6){animation-delay:.24s}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.section-label{
  font-family:var(--mono);font-size:9px;font-weight:500;
  letter-spacing:.16em;color:var(--text-3);text-transform:uppercase;margin-bottom:14px;
}
.section-sublabel{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  color:var(--text-3);text-transform:uppercase;margin:14px 0 10px;
}
.micro-label{font-family:var(--mono);font-size:9px;color:var(--text-3);letter-spacing:.06em;white-space:nowrap}

/* ─── Frame Cards (3D previews) ─── */
.frame-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.frame-card{
  position:relative;border-radius:var(--radius-sm);
  border:1.5px solid transparent;background:var(--surface);
  cursor:pointer;overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
  user-select:none;
}
.frame-card:hover{
  border-color:var(--border-2);
}
.frame-card.active{
  border-color:var(--text);
}
.frame-card.active::after{
  content:'';position:absolute;top:8px;right:8px;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px var(--accent-glow);
}
.frame-card-canvas{
  display:block;width:100%;height:96px;
  background:transparent;
}
.frame-card-info{padding:10px 12px 12px}
.frame-card-name{font-size:12px;font-weight:700;line-height:1.2;margin-bottom:3px}
.frame-card-sub{font-family:var(--mono);font-size:9px;color:var(--text-3)}
.frame-card-price{font-family:var(--mono);font-size:10px;color:var(--text-2);margin-top:7px}

/* ─── Material Cards ─── */
.material-row{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}

.mat-card{
  background:var(--surface);border:1.5px solid transparent;border-radius:var(--radius-sm);
  padding:10px 8px;text-align:center;cursor:pointer;
  transition:var(--t);user-select:none;
}
.mat-card:hover{border-color:var(--border-2);background:var(--surface-2)}
.mat-card.active{border-color:var(--text);background:var(--bg)}
.mat-swatch{
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid rgba(0,0,0,.1);margin:0 auto 7px;
}
.mat-name{font-size:10px;font-weight:600;line-height:1.2}
.mat-price{font-family:var(--mono);font-size:9px;color:var(--text-3);margin-top:4px}

/* ─── Color ─── */
.color-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.color-swatches{display:flex;gap:7px;flex-wrap:wrap}
.swatch{
  width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:var(--t);
}
.swatch:hover{transform:scale(1.14)}
.swatch.active{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--text)}
.custom-color-wrap{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--mono);font-size:9px;color:var(--text-3);
}
#custom-color{
  width:26px;height:26px;border:none;border-radius:50%;
  padding:0;background:none;cursor:pointer;outline:none;
}
#custom-color::-webkit-color-swatch-wrapper{padding:0}
#custom-color::-webkit-color-swatch{border-radius:50%;border:2px solid var(--border-2)}

/* ─── Lenses ─── */
.lens-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}

.lens-card{
  background:var(--surface);border:1.5px solid transparent;
  border-radius:var(--radius-sm);padding:11px 10px;
  cursor:pointer;transition:var(--t);user-select:none;text-align:center;
}
.lens-card:hover{border-color:var(--border-2);background:var(--surface-2)}
.lens-card.active{border-color:var(--text);background:var(--bg)}
.lens-name{font-size:11px;font-weight:600}
.lens-price{font-family:var(--mono);font-size:9px;color:var(--text-3);margin-top:4px}

/* Lens Options */
.lens-opts{display:flex;flex-direction:column;gap:6px}
.lens-opt{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--surface);border:1.5px solid transparent;
  border-radius:var(--radius-sm);cursor:pointer;transition:var(--t);
}
.lens-opt:hover{border-color:var(--border-2)}
.lens-opt.active{border-color:var(--accent);background:var(--accent-dim)}
.lens-opt-check{
  width:15px;height:15px;border-radius:50%;
  border:1.5px solid var(--border-2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:var(--t);
}
.lens-opt.active .lens-opt-check{background:var(--accent);border-color:var(--accent)}
.lens-opt.active .lens-opt-check::after{content:'✓';font-size:8px;font-weight:700;color:#000}
.lens-opt-body{flex:1}
.lens-opt-name{font-size:11px;font-weight:600}
.lens-opt-desc{font-family:var(--mono);font-size:9px;color:var(--text-3);margin-top:2px}
.lens-opt-price{font-family:var(--mono);font-size:10px;color:var(--text-2)}

/* ─── Accessories ─── */
.anchor-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.anchor-tabs{display:flex;gap:5px;flex-wrap:wrap}
.anchor-tab{
  padding:4px 10px;border-radius:40px;border:1px solid var(--border-2);
  background:var(--surface);font-family:var(--mono);font-size:9px;
  cursor:pointer;transition:var(--t);color:var(--text-2);
}
.anchor-tab:hover{border-color:var(--text);color:var(--text)}
.anchor-tab.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.anchor-tab.incompatible{opacity:.3;pointer-events:none}

/* Horizontal scroll */
.acc-scroll-outer{overflow-x:auto;margin:0 -22px;padding:0 22px;scrollbar-width:none}
.acc-scroll-outer::-webkit-scrollbar{display:none}
.acc-scroll-inner{
  display:flex;gap:9px;padding-bottom:8px;
  width:max-content;min-width:100%;
}

.acc-card{
  width:100px;flex-shrink:0;
  background:var(--surface);border:1.5px solid transparent;
  border-radius:var(--radius-sm);padding:12px 10px 10px;
  cursor:pointer;transition:var(--t);user-select:none;
  position:relative;overflow:hidden;
}
.acc-card:hover{
  border-color:var(--border-2);
}
.acc-card.adding{
  animation:scaleIn .25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes scaleIn{from{transform:scale(0.85)}to{transform:scale(1)}}

.acc-icon{font-size:18px;margin-bottom:8px;display:block;opacity:.75}
.acc-name{font-size:10px;font-weight:700;line-height:1.3;margin-bottom:4px}
.acc-price{font-family:var(--mono);font-size:9px;color:var(--text-3)}
.acc-add-badge{
  position:absolute;top:7px;right:7px;width:18px;height:18px;
  border-radius:50%;background:var(--accent);color:#000;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:300;
  opacity:0;transition:var(--t);
}
.acc-card:hover .acc-add-badge{opacity:1}
.acc-card.incompatible{opacity:.25;pointer-events:none}

/* Active list */
.active-list{display:flex;flex-direction:column;gap:5px;margin-top:12px}
.active-item{
  display:flex;align-items:center;gap:8px;padding:9px 11px;
  background:var(--surface);border-radius:var(--radius-sm);
  border:1px solid var(--border);
  animation:slideIn .2s ease;
}
@keyframes slideIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.active-name{flex:1;font-size:10px;font-weight:700}
.active-anchor-tag{
  font-family:var(--mono);font-size:8px;color:var(--text-3);
  padding:2px 6px;background:var(--surface-2);border-radius:4px;
}
.active-color-btn{
  width:17px;height:17px;border-radius:50%;
  border:1.5px solid var(--border-2);cursor:pointer;flex-shrink:0;
  position:relative;overflow:hidden;
}
.active-color-input{
  position:absolute;inset:-4px;opacity:0;cursor:pointer;
  width:calc(100% + 8px);height:calc(100% + 8px);
}
.active-remove{
  width:18px;height:18px;border-radius:50%;border:none;
  background:transparent;cursor:pointer;color:var(--text-3);
  font-size:13px;display:flex;align-items:center;justify-content:center;
  transition:var(--t);flex-shrink:0;
}
.active-remove:hover{background:#ffe4e4;color:#cc0000}

/* ─── Engraving ─── */
.engrave-toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.toggle-label{
  display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;cursor:pointer;
}
.toggle-label input{display:none}
.toggle-track{
  width:36px;height:20px;border-radius:40px;
  background:var(--surface-2);border:1px solid var(--border-2);
  position:relative;cursor:pointer;transition:var(--t);
}
.toggle-label input:checked ~ .toggle-track{background:var(--accent);border-color:var(--accent)}
.toggle-thumb{
  position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;background:#fff;
  transition:var(--t);
}
.toggle-label input:checked ~ .toggle-track .toggle-thumb{transform:translateX(16px)}
.engrave-price-tag{font-family:var(--mono);font-size:10px;color:var(--text-2)}

.engrave-fields{display:flex;flex-direction:column;gap:10px}
.engrave-fields.hidden{display:none}
.engrave-input{
  width:100%;padding:11px 14px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border-2);background:var(--surface);
  font-family:var(--mono);font-size:12px;color:var(--text);
  outline:none;transition:var(--t);
}
.engrave-input:focus{border-color:var(--text)}
.engrave-controls{display:flex;align-items:center;gap:10px}
.engrave-select{
  flex:1;padding:8px 10px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border-2);background:var(--surface);
  font-family:var(--mono);font-size:10px;color:var(--text);
  outline:none;cursor:pointer;
}
.engrave-colors{display:flex;gap:5px}
.engrave-preview{
  display:block;width:100%;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);
}

/* ─── Price Summary ─── */
.price-summary{
  margin:22px 22px 0;padding:18px;
  background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);
}
.price-breakdown{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.price-line{display:flex;justify-content:space-between}
.price-line-label{font-family:var(--mono);font-size:9px;color:var(--text-3)}
.price-line-val{font-family:var(--mono);font-size:10px;color:var(--text-2)}
.price-total-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:12px;border-top:1px solid var(--border-2);margin-bottom:14px;
}
.price-label{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--text-2)}
.price-value{
  font-size:28px;font-weight:700;letter-spacing:-.02em;
  transition:color .25s ease,transform .25s cubic-bezier(0.34,1.56,0.64,1);
}
.price-value.bump{color:var(--accent);transform:scale(1.05)}

.btn-cart{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:15px 20px;background:var(--text);color:var(--bg);
  border:none;border-radius:var(--radius-sm);cursor:pointer;
  font-family:var(--font);font-weight:700;font-size:13px;
  letter-spacing:.04em;position:relative;overflow:hidden;transition:var(--t);
}
.btn-cart::before{
  content:'';position:absolute;inset:0;
  background:var(--accent);transform:translateX(-101%);
  transition:transform .38s cubic-bezier(0.4,0,0.2,1);
}
.btn-cart:hover::before{transform:translateX(0)}
.btn-cart:hover{color:#000}
.btn-cart:hover .btn-cart-arrow{transform:translateX(5px)}
.btn-cart-text,.btn-cart-arrow{position:relative;z-index:1;transition:var(--t)}
.btn-cart-arrow{font-size:17px}

.btn-export{
  width:100%;margin-top:8px;padding:9px;background:transparent;
  border:1px solid var(--border-2);border-radius:var(--radius-sm);
  cursor:pointer;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;color:var(--text-2);transition:var(--t);
}
.btn-export:hover{border-color:var(--text);color:var(--text)}

.btn-tryon{
  width:100%;margin-top:8px;padding:9px;background:transparent;
  border:1px solid var(--accent);border-radius:var(--radius-sm);
  cursor:pointer;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;color:var(--accent);transition:var(--t);
}
.btn-tryon:hover{background:var(--accent);color:#000}

/* ─── Toast ─── */
.toast{
  position:fixed;bottom:22px;left:50%;
  transform:translateX(-50%) translateY(80px);
  background:var(--text);color:var(--bg);padding:10px 22px;
  border-radius:40px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;z-index:999;pointer-events:none;
  transition:transform .3s cubic-bezier(0.34,1.56,0.64,1);white-space:nowrap;
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ─── Modal ─── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.38);
  backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;
  z-index:200;opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.modal-overlay.show{opacity:1;pointer-events:all}
.modal{
  background:var(--bg);border-radius:var(--radius);width:500px;max-height:80vh;
  display:flex;flex-direction:column;border:1px solid var(--border);
  border:0.5px solid var(--border);
  transform:scale(.94) translateY(14px);
  transition:transform .3s cubic-bezier(0.34,1.56,0.64,1);
}
.modal-overlay.show .modal{transform:scale(1) translateY(0)}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--border);
}
.modal-title{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--text-2)}
.modal-close{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--border-2);
  background:var(--surface);cursor:pointer;font-size:10px;
  display:flex;align-items:center;justify-content:center;transition:var(--t);
}
.modal-close:hover{background:var(--surface-2)}
.modal-code{
  padding:18px 22px;font-family:var(--mono);font-size:10px;line-height:1.75;
  color:var(--text);overflow-y:auto;flex:1;white-space:pre-wrap;word-break:break-all;
}
.btn-copy{
  margin:12px 22px;padding:11px;background:var(--surface);
  border:1px solid var(--border-2);border-radius:var(--radius-sm);
  cursor:pointer;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;transition:var(--t);
}
.btn-copy:hover{background:var(--accent);border-color:var(--accent);color:#000}

/* ─── Responsive ─── */
@media(max-width:880px){
  .app-layout{flex-direction:column}
  .viewport-section{height:45vh}
  .config-panel{width:100%;height:55vh}
}

/* ─── Y2K Accessory Section Additions ───────────────────────────── */

.y2k-only-tag {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* Lock notice — shown when non-Wraparound frame is selected */
.acc-lock-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.02);
  border: 1px dashed rgba(0,0,0,0.10);
  border-radius: 8px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  line-height: 1.4;
}

.acc-lock-notice .lock-icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* When locked, make accessory cards non-interactive and gray */
#accessory-cards.locked,
#sec-accessories.locked .acc-scroll-outer {
  pointer-events: none;
  opacity: 0.35;
  filter: grayscale(1);
}

/* Accessory card loading state */
.acc-card.loading {
  opacity: 0.5;
  pointer-events: none;
  animation: acc-pulse 0.8s ease infinite alternate;
}

@keyframes acc-pulse {
  from { opacity: 0.5; }
  to   { opacity: 0.2; }
}

/* None card */
.acc-card.acc-none {
  border-color: rgba(0,0,0,0.04);
}
.acc-card.acc-none.active {
  border-color: var(--accent);
}

/* Y2K badge on frame cards */
.y2k-badge {
  font-family: var(--mono);
  font-size: 8px;
  background: linear-gradient(135deg, #c0c0c0, #888);
  color: #000;
  border-radius: 3px;
  padding: 1px 4px;
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* Active accessory price display */
.active-price {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  margin-left: auto;
  margin-right: 8px;
}

/* No accessory selected label */
.no-acc-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-3);
  padding: 6px 0;
}

/* ─── Unavailable (coming soon) accessory cards ─────────────────── */
.acc-card.acc-unavailable {
  opacity: 0.28;
  filter: grayscale(1);
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(0,0,0,0.03) !important;
}
.acc-card.acc-unavailable .acc-price {
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* ─── Calibration transition overlay ───────────────────────────── */
/* A scan-line pulse that appears on the viewport during the
   wireframe → solid material calibration phase.
   Driven purely by CSS animation — no JS needed.              */

.viewport-section {
  position: relative;
}

/* Injected by JS onto .viewport-section during load */
.calibrating::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(211, 211, 211, 0.03) 3px,
    rgba(211, 211, 211, 0.03) 4px
  );
  animation: scan-pass 540ms ease-out forwards;
  z-index: 2;
}

@keyframes scan-pass {
  0%   { opacity: 0.9; transform: translateY(0); }
  60%  { opacity: 0.4; }
  100% { opacity: 0;   transform: translateY(-8px); }
}

/* Calibration label — top-left micro text while wireframe is active */
.calib-label {
  position: absolute;
  top: 12px;
  left: 16px;
  font-family: var(--mono, monospace);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(160, 165, 175, 0.75);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
  animation: calib-fade 540ms ease-out forwards;
}

@keyframes calib-fade {
  0%   { opacity: 1;   transform: translateY(0); }
  70%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translateY(-4px); }
}