/* XIAN appearance; the original workbench still owns layout and interaction. */
:root{
  color-scheme:dark;
  --ink:#f1f0eb;--muted:#a9a9ab;--paper:#242527;--panel:#2b2c2f;
  --control-surface:#ffffff04;--control-hover:#ffffff0a;
  --line:#ffffff29;--gold:#c8b68e;--gold-dark:#c8b68e;
  --green:#bdc7bc;--red:#c7a995;--red-soft:#ffffff04;
  --shadow:none;
}
.boss-size-controls[hidden],.boss-size-controls [hidden]{display:none!important}
.boss-size-controls{grid-column:1/-1;min-width:0;padding:16px 0 0;border-top:1px solid var(--line)}
.boss-size-heading{display:flex;align-items:center;flex-wrap:wrap;gap:7px 14px;font-size:13px;line-height:1.5}
.boss-size-heading strong{color:var(--gold);font-size:13px}
.boss-size-heading span{color:var(--ink)}
.boss-size-heading output{margin-left:auto;color:var(--gold);font-variant-numeric:tabular-nums}
.boss-size-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.boss-size-actions .btn{min-height:40px;padding:8px 14px;font-size:13px}
.boss-size-controls p{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.7}
.boss-size-controls p.is-error{color:#d9b49c}
@media(min-width:1024px){body.mode-customer .boss-size-controls{grid-column:1/-1;grid-row:4}}
@media(max-width:620px){.boss-size-actions .btn{flex:1 1 auto;padding:8px;font-size:12px}.boss-size-heading span{font-size:12px}}
*,*::before,*::after{border-radius:0!important}
body{background:var(--paper)}
h1{background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}
body.mode-customer .layout{grid-template-columns:minmax(0,1fr)}
body.mode-customer .side{display:none}

.card,.tray-panel,.ear-upload-dialog,.ear-upload-header,.ear-upload-card,
.ear-upload-guide,.ear-upload-step,.rules,.result-card,.feedback-item,.satisfaction-card{
  background:var(--panel);border-color:var(--line);box-shadow:none;
}
.jewel-card,.mode-tabs,.btn,.mini-btn,.mini-btn.undo-btn,.ear-side-upload,
.ear-focus-btn,.collapse-ear,.ear-reset-view,.ear-upload-close,.input,.select,
.saved-slot,.scheme-status,.point-empty,.feedback-empty,.mirror-badge,
.rating-star,.satisfaction-star,.satisfaction-close,.lightbox-close{
  background:var(--control-surface);color:var(--ink);border-color:var(--line);box-shadow:none;
}
.jewel-card{background:transparent;border-color:#ffffff18}
.ear-side-upload{
  position:absolute;z-index:24;top:10px;right:10px;width:auto;
  min-height:34px;padding:6px 10px;font-size:11px;background:#242527ed;
}
.ear-reset-view{top:54px;right:10px}
.ear-focus-btn,.collapse-ear,.ear-reset-view,.mirror-badge,.lightbox-close{
  background:#242527ed;
}
.ear-stage,.saved-slot.filled,.saved-slot.filled img,.result-preview-wrap,
.result-image,.lightbox-frame{background:var(--paper);border-color:var(--line);box-shadow:none}
.card.viewer,.tray-panel,.ear-stage{border:0;background:transparent;box-shadow:none}
.card.viewer,.tray-panel{padding:0}
.recommend-block[hidden]{display:none}
.tray{scrollbar-color:#73726e transparent}
.tray-scroll-shell{position:relative;min-width:0}
.tray-scroll-shell::before,.tray-scroll-shell::after{
  content:"";position:absolute;z-index:2;top:0;bottom:16px;width:24px;
  pointer-events:none;opacity:0;transition:opacity .15s;
}
.tray-scroll-shell::before{left:0;background:linear-gradient(90deg,var(--paper),#24252700)}
.tray-scroll-shell::after{right:0;background:linear-gradient(270deg,var(--paper),#24252700)}
.tray-scroll-shell[data-scroll-before]::before,.tray-scroll-shell[data-scroll-after]::after{opacity:1}
.tray-browse-heading{display:flex;align-items:center;gap:16px;min-width:0}
.tray-panel .section-title{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px}
.tray-instructions{grid-column:1/-1;margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.tray-products-link{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;
  padding:7px 12px;border:1px solid #c8b68e70;color:var(--gold);
  background:transparent;text-decoration:none;font-size:12px;line-height:1.4;white-space:nowrap;
}
.tray-products-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0}
.tray-products-link:hover{background:var(--control-hover);border-color:var(--gold)}
.tray-browse-controls{display:none;align-items:center;gap:8px;flex-shrink:0}
.tray-browse-controls[hidden]{display:none}
.tray-browse-btn{
  display:grid;place-items:center;width:38px;height:38px;padding:8px;
  border:1px solid var(--line);background:transparent;color:var(--ink);
}
.tray-browse-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.tray-browse-btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.tray-browse-btn:disabled{opacity:.3;cursor:default}
@media(max-width:1023px){
  .tray{grid-auto-columns:calc((100% - 20px)/6.35)}
  .ear-side-upload{position:static;z-index:auto;width:100%;background:transparent}
  .ear-reset-view{top:9px;right:9px}
}
@media(max-width:620px){
  .tray{grid-auto-columns:calc((100% - 16px)/4.35)}
  .tray-panel .section-title{align-items:center}
  .tray-products-link{min-height:30px;padding:5px 9px;font-size:11px}
  .tray-browse-heading{margin-left:auto}
  .tray-instructions{font-size:11px}
  .tray-scroll-shell::before,.tray-scroll-shell::after{width:16px}
  .ear-side-upload{min-height:32px;padding:5px 3px;font-size:10px}
  .collapse-ear{top:7px;left:7px;min-height:30px;padding:5px 7px;font-size:9px}
  .ear-reset-view{top:7px;right:7px}
}
.recommend-block,.saved-section,.saved-row,.saved-total,.rule{border-color:var(--line)}
.ear-upload-intro,.ear-photo-drop-copy small,.ear-photo-privacy,.ear-upload-step p,
.scheme-name-btn,.feedback-item p,.feedback-item time,.satisfaction-labels{color:var(--muted)}
.ear-upload-step strong,.satisfaction-card h2{color:var(--ink)}
.photo-direction-status,.ear-upload-scroll-hint,.rating-star.active,
.satisfaction-star.active,.nudge-center,.feedback-stars{color:var(--gold)}

.btn.primary,.mode-btn.active,.lightbox-download,.ear-photo-drop-icon,.ear-upload-step-number{
  background:var(--control-hover);color:var(--ink);border-color:#c8b68e70;box-shadow:none;
}
.ear-side-upload.has-photo,.rating-star.active,.satisfaction-star.active{
  background:var(--control-surface);color:var(--gold);border-color:#c8b68e70;box-shadow:none;
}
.ear-side-upload.has-photo{background:#242527ed}
.btn.danger,.delete-jewel-btn{background:var(--red-soft);color:var(--red);border-color:#c7a99555}
.ear-photo-upload{color:var(--ink);background:transparent;border-color:var(--line);box-shadow:none}
.ear-photo-upload:hover,.ear-photo-upload.dragging{background:var(--control-hover);border-color:var(--gold);box-shadow:none}
.ear-side-upload:hover,.jewel-card.dragging-source{border-color:var(--gold);box-shadow:none}
@media(hover:hover){
  .btn:not(:disabled):hover,.mini-btn:not(:disabled):hover,.ear-side-upload:hover,
  .ear-focus-btn:hover,.collapse-ear:hover,.ear-reset-view:hover,.jewel-card:hover{
    background:var(--control-hover);border-color:#ffffff4f;
  }
  .btn.primary:hover,.lightbox-download:hover{border-color:var(--gold)}
}
button:focus-visible,.jewel-card:focus-visible,.tray-products-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.input:focus,.select:focus{border-color:var(--gold);box-shadow:0 0 0 2px #c8b68e20}
.config-tip{color:var(--muted);background:var(--control-surface)}
.current-save-btn{background:#242527ed;box-shadow:none}
.saved-slot.filled{border-color:#ffffff40}
.saved-slot.active{border-color:var(--gold)!important;outline:2px solid var(--gold);box-shadow:none}
.saved-slot.active::after{background:var(--paper);color:var(--gold);border-color:var(--gold);box-shadow:none}
.ear-upload-step-visual{display:block;height:auto;aspect-ratio:4/3;object-fit:contain;border:0;background:#242527;filter:none}

.ear-upload-backdrop,.image-lightbox,.satisfaction-layer{background:#111214c9}
.selection-tip,.toast,.result-preview-hint{color:var(--ink);background:#17181beF;border-color:var(--line);box-shadow:none}
.selection-tip::after{border-top-color:#17181bef}
.drag-feedback{color:var(--red);background:#242527f5;box-shadow:none}
.drag-feedback.valid{color:var(--green);background:#242527f5}
.grid-candidate{box-shadow:0 0 0 5px #bdc7bc33}
.grid-candidate.invalid{box-shadow:0 0 0 5px #c7a99533}
.ear-stage::after{background-image:radial-gradient(circle,#c8b68eb8 0 .8px,#ffffff66 .9px 1.35px,transparent 1.5px)}
.tray-ghost,.placed.dragging{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #c8b68e99) drop-shadow(0 8px 7px #0005)}
@keyframes selected-jewel-pulse{
  0%,100%{filter:var(--selection-outline) drop-shadow(0 0 5px #c8b68e66)}
  50%{filter:var(--selection-outline) drop-shadow(0 0 8px #f1f0eb80)}
}
@media(prefers-reduced-motion:reduce){.placed.selected{filter:var(--selection-outline) drop-shadow(0 0 5px #c8b68e66)}}

/* Desktop proportions; ear controls stay below the shared working canvas. */
@media(min-width:1024px){
  .app{width:min(1440px,100%);padding:28px clamp(32px,4vw,64px) 64px}
  .topbar{margin-bottom:24px}
  .brand-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;max-width:none}
  h1{font-size:clamp(36px,3.1vw,46px);line-height:1.2}
  .title-tip{font-size:16px;line-height:1.6;margin:0}
  .kicker{font-size:12px;margin-bottom:8px}
  body.mode-customer .viewer{
    --desktop-ear-height:clamp(480px,66svh,720px);
    display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start;
  }
  .tray-panel,.saved-section,.result-card{grid-column:1/-1}
  .tray-panel{min-width:0;margin-bottom:0}
  .tray-panel .section-title{margin-bottom:12px}
  .section-title h2,.saved-section-head strong{font-size:18px}
  .section-title span,.saved-section-head span{font-size:13px;line-height:1.5}
  .tray-instructions{font-size:13px}
  .tray{grid-auto-columns:calc((100% - 84px)/7.35);gap:12px;padding-bottom:8px}
  .tray-browse-controls:not([hidden]){display:flex}
  .jewel-card{padding:8px}
  .jewel-card img{width:60px;height:54px}
  .jewel-card b{font-size:14px;line-height:1.5;margin:6px 0 3px}
  .jewel-price{font-size:12px;line-height:1.5}
  .drag-tip{display:none}
  .ears-grid{
    width:100%;max-width:calc(var(--desktop-ear-height)*4/3 + 24px);
    justify-self:center;gap:24px;
  }
  .ears-grid.focus-left,.ears-grid.focus-right{
    max-width:calc(var(--desktop-ear-height)*.84);grid-template-columns:minmax(0,1fr);
  }
  .ear-wrap{gap:12px}
  /* Only the default bitmap grows; stage geometry and jewelry scale stay fixed. */
  .ear-stage{--ear-model-zoom:1.25}
  .ear-image:not(.custom-photo){--ear-zoom:var(--ear-model-zoom)}
  .ear-side-upload{min-height:38px;padding:8px 12px;font-size:13px;font-weight:800}
  .ear-focus-btn,.ear-reset-view{min-height:38px;padding:8px 12px;font-size:13px}
  .collapse-ear{min-height:38px;padding:8px 12px;font-size:13px}
  .ear-reset-view{top:58px}
  .current-save-btn{min-height:40px;padding:9px 14px;font-size:13px}
  .main-controls{
    width:100%;max-width:calc(var(--desktop-ear-height)*4/3 + 24px);justify-self:center;
    grid-template-columns:minmax(0,1fr) 260px;gap:28px;margin-top:0;
  }
  .nudge-panel{gap:12px}
  .control-label{width:auto;font-size:14px;text-align:left;line-height:1.5}
  .nudge-pad{grid-template-columns:repeat(3,44px) 144px;grid-template-rows:repeat(3,44px);gap:6px}
  .mini-btn,.mini-btn.undo-btn{height:44px;font-size:20px}
  .mini-btn.command-btn{gap:8px;padding:0 10px;font-size:14px;font-weight:800}
  .command-btn .command-icon{width:22px;flex-basis:22px;font-size:23px}
  .undo-btn svg{width:20px;height:20px;flex-basis:20px}
  .action-stack{gap:10px}
  .btn{min-height:44px;padding:10px 16px;font-size:14px;font-weight:700}
  .saved-section{margin-top:4px;padding-top:24px}
  .saved-section-head{margin-bottom:14px}
  .scheme-status{font-size:13px;line-height:1.6;padding:12px 14px;margin-bottom:16px}
  .saved-slots{grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:20px 16px}
  .saved-slot-card{gap:10px}
  .saved-slot,.scheme-name-btn{font-size:14px;line-height:1.5}
  .saved-slot.active::after{font-size:12px}
  .selection-tip,.drag-feedback,.result-preview-hint{font-size:12px;line-height:1.5}
  .drag-feedback{max-width:220px}
  .ear-upload-intro,.ear-upload-guide>p,.ear-upload-step p{font-size:14px;line-height:1.7}
  .ear-photo-drop-copy strong,.ear-upload-step strong{font-size:16px}
  .ear-photo-drop-copy small,.ear-photo-privacy,.photo-direction-status,.ear-upload-scroll-hint{font-size:13px}
  .ear-upload-header h2,.ear-upload-guide h3{font-size:20px}
  .saved-row,.saved-total{font-size:14px}
  .saved-row small,.cart-state{font-size:13px}
  .toast{font-size:14px}
}
@media(min-width:1200px){.tray{grid-auto-columns:calc((100% - 108px)/9.35)}}

/* Desktop reference layout: library at left, paired canvas at right. */
@media(min-width:1024px){
  body.mode-customer .app{width:min(1500px,100%);padding:42px 40px 64px}
  body.mode-customer .topbar{position:static;width:auto;height:auto;overflow:visible;clip-path:none;margin:0 0 28px}
  body.mode-customer .topbar .kicker{display:none}
  body.mode-customer .topbar h1{font-size:clamp(42px,3.6vw,54px);line-height:1.18;margin:0;color:var(--ink)}
  body.mode-customer .viewer{position:relative;grid-template-columns:minmax(260px,.74fr) minmax(0,2fr);grid-template-rows:auto 1fr auto;column-gap:44px;row-gap:20px}
  body.mode-customer .tray-panel{grid-column:1;grid-row:1}
  body.mode-customer .tray-panel .section-title{gap:8px;margin-bottom:12px}
  body.mode-customer .tray-panel h2{font-size:16px}
  body.mode-customer .tray-products-link{font-size:11px;padding:7px 9px}
  body.mode-customer .tray-instructions{font-size:11px;line-height:1.7}
  body.mode-customer .tray-browse-controls{display:none!important}
  body.mode-customer .tray-scroll-shell::before,body.mode-customer .tray-scroll-shell::after{display:none}
  body.mode-customer #tray{display:grid;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;gap:10px;max-height:350px;overflow-x:hidden;overflow-y:auto;padding:0 4px 4px 0;scrollbar-width:thin;scrollbar-color:#767165 transparent}
  body.mode-customer .jewel-card{width:auto;min-width:0;padding:10px 4px}
  body.mode-customer .jewel-card img{width:48px;height:46px}
  body.mode-customer .jewel-card b{font-size:12px;line-height:1.4}
  body.mode-customer .jewel-price{font-size:11px}
  body.mode-customer .saved-section{grid-column:1;grid-row:2/4;min-width:0;margin:0;padding:0;border:0}
  body.mode-customer .saved-section-head{margin-bottom:10px}
  body.mode-customer .saved-section-head strong{font-size:15px}
  body.mode-customer .saved-section-head>span{display:none}
  body.mode-customer .scheme-status{padding:8px;font-size:11px;margin-bottom:12px}
  body.mode-customer .saved-slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;max-height:380px;overflow-y:auto;scrollbar-width:thin}
  body.mode-customer .scheme-name-btn{font-size:11px}
  body.mode-customer .ears-grid{grid-column:2;grid-row:1/3;max-width:none;align-self:start;gap:24px}
  body.mode-customer .ears-grid.focus-left,body.mode-customer .ears-grid.focus-right{max-width:640px;width:100%;justify-self:center}
  body.mode-customer .main-controls{position:relative;grid-column:2;grid-row:3;max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:0}
  body.mode-customer .nudge-panel,body.mode-customer .nudge-actions,body.mode-customer .nudge-pad{display:contents}
  body.mode-customer .main-controls .control-label{position:absolute;bottom:calc(100% + 172px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;text-align:center}
  body.mode-customer .nudge-pad>.command-btn{grid-column:1;position:static;width:100%;height:42px;font-size:15px;justify-content:center}
  body.mode-customer .rotate-btn{grid-row:1}
  body.mode-customer .delete-jewel-btn{grid-row:2}
  body.mode-customer .undo-btn{grid-row:3}
  body.mode-customer .nudge-pad>.nudge-up,body.mode-customer .nudge-pad>.nudge-left,body.mode-customer .nudge-pad>.nudge-right,body.mode-customer .nudge-pad>.nudge-down,body.mode-customer .nudge-pad>.nudge-center{position:absolute;width:40px;height:40px;margin:0;display:grid;place-items:center;font-size:22px;left:calc(50% - 20px);bottom:calc(100% + 20px)}
  body.mode-customer .nudge-pad>.nudge-up{bottom:calc(100% + 112px)}
  body.mode-customer .nudge-pad>.nudge-left{left:calc(50% - 66px);bottom:calc(100% + 66px)}
  body.mode-customer .nudge-pad>.nudge-right{left:calc(50% + 26px);bottom:calc(100% + 66px)}
  body.mode-customer .nudge-pad>.nudge-center{bottom:calc(100% + 66px);font-size:14px}
  body.mode-customer .action-stack{grid-column:2;grid-row:1/4;gap:14px}
  body.mode-customer .action-stack .btn{min-height:42px;padding:8px 12px;font-size:15px}
  body.mode-customer .result-card{grid-column:2;grid-row:4}
}
@media(min-width:1024px){
 body.mode-customer .main-controls{grid-template-rows:repeat(3,42px);overflow:visible}
 body.mode-customer .main-controls .control-label{width:max-content;max-width:190px;z-index:20}
 body.mode-customer .nudge-pad>.mini-btn,body.mode-customer .nudge-pad>.nudge-center{grid-area:auto;z-index:20}
 body.mode-customer .nudge-pad>.rotate-btn{grid-column:1;grid-row:1}
 body.mode-customer .nudge-pad>.delete-jewel-btn{grid-column:1;grid-row:2}
 body.mode-customer .nudge-pad>.undo-btn{grid-column:1;grid-row:3}
 body.mode-customer .action-stack{gap:8px}
 body.mode-customer .action-stack .btn{min-height:32px;height:32px;padding:4px 10px}
}
.tray-desktop-copy{display:none}
@media(min-width:1024px){
 body.mode-customer .tray-mobile-copy{display:none}
 body.mode-customer .tray-desktop-copy{display:inline;font-size:11px}
 body.mode-customer .action-stack{height:100%;grid-auto-rows:1fr}
 body.mode-customer .action-stack .btn{height:100%;min-height:0}
}

/* One neutral palette across the working canvas action buttons. */
.main-controls .btn,.main-controls .mini-btn,.current-save-btn{
 background:#2a2b2d;color:#e2e1dc;border:1px solid #ffffff29;box-shadow:none;
}
.main-controls .btn:disabled,.main-controls .mini-btn:disabled,.current-save-btn:disabled{
 background:#2a2b2d;color:#90918e;border-color:#ffffff1a;opacity:1;cursor:not-allowed;
}
@media(hover:hover){
 .main-controls .btn:not(:disabled):hover,.main-controls .mini-btn:not(:disabled):hover,.current-save-btn:not(:disabled):hover{
  background:#343537;color:#f1f0eb;border-color:#ffffff45;box-shadow:none;
 }
}

.topbar h1,.topbar .title-tip{font-family:"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
.topbar h1{font-weight:600;letter-spacing:-.025em}
.topbar .title-tip{font-weight:400;letter-spacing:.02em;color:#aaaBA7}
@media(min-width:1024px){
 body.mode-customer .topbar{margin-bottom:34px}
 body.mode-customer .topbar .brand-heading{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
 body.mode-customer .topbar h1{flex:0 0 auto}
 body.mode-customer .topbar .title-tip{display:block;margin:0;font-size:15px;line-height:1.7}
}

@media(min-width:1024px){body.mode-customer .tray-instructions{display:none}}

@media(min-width:1024px){body.mode-customer .tray-panel,body.mode-customer .saved-section{position:relative;top:8px}}

@media(min-width:1024px){body.mode-customer .saved-section{top:16px}}

/* Align phone scheme actions with the three jewelry command rows. */
@media(max-width:620px){
 .main-controls .action-stack{align-self:end;grid-template-rows:repeat(3,31px);gap:2px}
 .main-controls .action-stack .btn{height:31px;min-height:31px;padding:4px;line-height:1.3}
 .main-controls #saveBtn{grid-row:1}
 .main-controls #saveAsBtn{grid-row:2}
 .main-controls #deleteSchemeBtn{grid-row:3}
}

@media(max-width:620px){.topbar .kicker{display:none}}

/* Initial photo fitting leaves jewelry fixed; later gestures use the saved fit. */
.ear-jewel-scene{transform:translate3d(var(--ear-jewel-pan-x,0%),var(--ear-jewel-pan-y,0%),0) rotate(var(--ear-jewel-rotation,0deg)) scale(var(--ear-jewel-zoom,1))}
.ear-stage.photo-transforming .placed{visibility:visible}
.ear-stage.photo-calibrating .ear-align-reference{opacity:1}
.photo-calibration-controls{position:absolute;z-index:24;bottom:12px;left:10px;right:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;background:#242527eb;color:#c8b68e;font-family:inherit;font-size:12px;font-weight:500;line-height:1.4}
.photo-calibration-controls[hidden]{display:none}
.photo-calibration-controls button{min-height:36px;padding:6px 12px;border:1px solid #8d8169;border-radius:0;background:#303133;color:#eee8da;white-space:nowrap;font:inherit;cursor:pointer}
@media(max-width:600px){.photo-calibration-controls{left:4px;right:4px;bottom:6px;gap:4px;padding:5px;font-size:10px}.photo-calibration-controls button{padding:5px 7px;min-height:34px}}

/* Model actions share a stable top-left toolbar in both ear views. */
.ear-stage .ear-focus-btn,.ear-stage .collapse-ear{top:10px;left:10px;right:auto;bottom:auto;min-height:34px;height:34px;padding:6px 10px;font-size:11px;line-height:20px}
.ear-model-btn{position:absolute;z-index:21;top:10px;left:70px;min-height:34px;height:34px;padding:6px 10px;border:1px solid #ffffff29;border-radius:0;color:#e2e1dc;background:#2a2b2d;font-size:11px;font-weight:600;line-height:20px;touch-action:manipulation}
.model-picker{width:min(620px,calc(100% - 28px));max-height:85svh;padding:24px;overflow:auto;color:#e2e1dc;background:#242527;border:1px solid #ffffff29;border-radius:0;font-family:"Helvetica Neue",Arial,"PingFang SC",sans-serif}
.model-picker::backdrop{background:#0009}.model-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.model-picker h2{font-size:22px;margin:0}.model-picker-heading button{background:none;border:0;color:inherit;font-size:28px;padding:0 8px}.model-picker p{font-size:12px;line-height:1.8;color:#b6b5b0}.model-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.model-choice{display:grid;gap:8px;padding:10px;border:1px solid #ffffff29;background:#2a2b2d;color:#e2e1dc;border-radius:0;font:inherit;font-size:12px;cursor:pointer}.model-choice img{width:100%;height:140px;object-fit:contain}.model-choice[aria-pressed=true]{border-color:#c8b68e;color:#c8b68e}.model-upload{display:grid;gap:12px;padding-top:18px;border-top:1px solid #ffffff29}.model-upload[hidden]{display:none}.model-upload label{display:grid;gap:8px;font-size:12px}.model-upload input{width:100%;box-sizing:border-box;border:1px solid #ffffff29;border-radius:0;background:#2a2b2d;color:#e2e1dc;padding:10px;font:inherit}.model-upload .btn{background:#2a2b2d;color:#e2e1dc;border-color:#c8b68e}.model-picker button:focus-visible{outline:2px solid #c8b68e;outline-offset:3px}.model-picker-status{min-height:20px}
@media(min-width:1024px){.ear-stage .ear-focus-btn,.ear-stage .collapse-ear,.ear-model-btn{height:38px;min-height:38px;padding:8px 12px;font-size:13px}.ear-model-btn{left:78px}}
@media(max-width:620px){.ear-stage .ear-focus-btn,.ear-stage .collapse-ear,.ear-model-btn{top:7px;min-height:30px;height:30px;padding:5px 7px;font-size:9px}.ear-stage .ear-focus-btn,.ear-stage .collapse-ear{left:7px}.ear-model-btn{left:53px}.model-picker{padding:16px}.model-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Shared toolbar above each model: expand, model picker, photo upload. */
.ear-toolbar{display:flex;align-items:center;gap:0;min-width:0;width:100%}
.ear-toolbar>button{position:static;inset:auto;flex:1 1 auto;width:auto;min-width:0;min-height:36px;height:36px;margin:0;padding:7px 9px;border:1px solid #ffffff29;border-radius:0;background:#2a2b2d;color:#e2e1dc;font:600 11px/20px "Helvetica Neue",Arial,"PingFang SC",sans-serif;white-space:nowrap;box-shadow:none;backdrop-filter:none}
.ear-toolbar>.ear-side-upload{margin-left:-1px}
.ear-toolbar>.ear-focus-btn,.ear-toolbar>.collapse-ear{margin-right:-1px}
.ear-toolbar>button:hover{background:#343537;border-color:#c8b68e80}
@media(min-width:1024px){.ear-toolbar>button{height:38px;min-height:38px;padding:8px;font-size:13px}}
@media(max-width:620px){.ear-toolbar>.ear-focus-btn,.ear-toolbar>.collapse-ear{margin-right:-1px}.ear-toolbar>button{height:32px;min-height:32px;padding:5px 3px;font-size:9px}}

/* Jewelry actions, centered direction pad, and scheme actions share three rows. */
body.mode-customer .main-controls{--control-size:42px;--control-gap:8px;--control-text:14px;display:grid;grid-template-columns:minmax(0,1fr) repeat(3,var(--control-size)) minmax(0,1fr);grid-template-rows:auto repeat(3,var(--control-size));gap:var(--control-gap);align-items:stretch}
body.mode-customer .nudge-panel,body.mode-customer .nudge-actions,body.mode-customer .nudge-pad{display:contents}
body.mode-customer .main-controls .control-label{position:static;inset:auto;transform:none;grid-column:1/-1;grid-row:1;width:100%;max-width:none;margin:0;text-align:center;font-size:12px;line-height:1.6}
body.mode-customer .nudge-pad>.mini-btn,body.mode-customer .nudge-pad>.nudge-center{position:static;inset:auto;grid-area:auto;width:100%;min-width:0;height:var(--control-size);min-height:0;margin:0;padding:0;display:grid;place-items:center;font-size:20px}
body.mode-customer .nudge-pad>.command-btn{display:flex;justify-content:center;gap:6px;padding:0 6px;font-size:var(--control-text)}
body.mode-customer .nudge-pad>.rotate-btn{grid-column:1;grid-row:2}
body.mode-customer .nudge-pad>.delete-jewel-btn{grid-column:1;grid-row:3}
body.mode-customer .nudge-pad>.undo-btn{grid-column:1;grid-row:4}
body.mode-customer .nudge-pad>.nudge-up{grid-column:3;grid-row:2}
body.mode-customer .nudge-pad>.nudge-left{grid-column:2;grid-row:3}
body.mode-customer .nudge-pad>.nudge-center{grid-column:3;grid-row:3;font-size:12px}
body.mode-customer .nudge-pad>.nudge-right{grid-column:4;grid-row:3}
body.mode-customer .nudge-pad>.nudge-down{grid-column:3;grid-row:4}
body.mode-customer .main-controls .action-stack{grid-column:5;grid-row:2/5;display:grid;grid-template-rows:repeat(3,var(--control-size));gap:var(--control-gap);height:auto;min-width:0;align-self:stretch}
body.mode-customer .main-controls .action-stack .btn{height:var(--control-size);min-height:0;padding:4px 6px;font-size:var(--control-text);line-height:1.3;white-space:nowrap}
body.mode-customer .main-controls .boss-size-controls{grid-column:1/-1;grid-row:5}
@media(max-width:620px){
 body.mode-customer .main-controls{--control-size:30px;--control-gap:4px;--control-text:10px}
 body.mode-customer .nudge-pad>.command-btn{gap:3px;padding:0 3px}
 body.mode-customer .main-controls .command-icon,body.mode-customer .main-controls .undo-btn svg{width:15px;flex-basis:15px;font-size:16px}
 body.mode-customer .main-controls .control-label{font-size:10px}
}