@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#f5f5f7;
  --s1:#ffffff;
  --s2:#f0f0f2;
  --s3:#e8e8ec;
  --border:#d8d8de;
  --border2:#c8c8d0;
  --accent:#2563eb;
  --accent-dim:rgba(37,99,235,0.08);
  --accent-mid:rgba(37,99,235,0.15);
  --text:#1a1a2e;
  --text2:#4a4a6a;
  --muted:#8a8aa0;
  --muted2:#b0b0c0;
  --green:#16a34a;
  --red:#dc2626;
  --shadow:0 1px 3px rgba(0,0,0,0.08),0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:0 4px 16px rgba(0,0,0,0.1),0 12px 40px rgba(0,0,0,0.08);
}

body.dark{
  --bg:#0f0f13;
  --s1:#1a1a24;
  --s2:#22222e;
  --s3:#2a2a38;
  --border:#2e2e3e;
  --border2:#3a3a50;
  --text:#e8e8f0;
  --text2:#a0a0c0;
  --muted:#606080;
  --muted2:#505068;
  --accent-dim:rgba(37,99,235,0.15);
  --accent-mid:rgba(37,99,235,0.25);
  --shadow:0 1px 3px rgba(0,0,0,0.3),0 4px 12px rgba(0,0,0,0.2);
  --shadow-lg:0 4px 16px rgba(0,0,0,0.4),0 12px 40px rgba(0,0,0,0.3);
}
body.dark #viewer{background:linear-gradient(135deg,#12121a 0%,#1a1a26 100%)}
body.dark .model-select-wrap select option{background:#1a1a24;color:#e8e8f0}
body.dark #loading{background:#0f0f13}
body.dark #rec-overlay{background:rgba(0,0,0,0.7)}

html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;display:flex;flex-direction:column;transition:background 0.2s,color 0.2s}
*{transition:background-color 0.2s,border-color 0.2s,color 0.15s}

/* ===== HEADER ===== */
header{
  height:56px;flex-shrink:0;
  display:flex;align-items:center;gap:12px;
  padding:0 20px;
  background:var(--s1);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
  z-index:100;
}
.logo{
  font-family:'Inter',sans-serif;font-weight:700;font-size:16px;
  color:var(--text);letter-spacing:-0.3px;white-space:nowrap;
  text-decoration: none;
}
.logo span{color:var(--accent)}

.model-select-wrap{
  display:flex;align-items:center;gap:8px;
  background:var(--s2);border:1px solid var(--border);
  border-radius:8px;padding:6px 10px;cursor:pointer;
  transition:all 0.15s;min-width:180px;
}
.model-select-wrap:hover{border-color:var(--accent);background:var(--accent-dim)}
.model-select-wrap select{
  background:none;border:none;outline:none;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:500;
  color:var(--text);cursor:pointer;width:100%;
}
.model-select-wrap select option{background:white;color:var(--text)}

.btn-darkmode{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--border);
  background:var(--s2);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.15s;flex-shrink:0;
}
.btn-darkmode:hover{border-color:var(--accent);background:var(--accent-dim)}
/* Resize handle */
#resize-handle{
  background:var(--s2);border-left:1px solid var(--border);border-right:1px solid var(--border);
  width:6px;flex-shrink:0;cursor:col-resize;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.15s;z-index:10;
}
#resize-handle:hover,#resize-handle.dragging{background:var(--accent-dim)}
#resize-handle:hover .resize-handle-bar,#resize-handle.dragging .resize-handle-bar{background:var(--accent)}
.resize-handle-bar{
  width:2px;height:32px;border-radius:2px;
  background:var(--border2);transition:background 0.15s;
}
.header-right{display:flex;gap:8px;align-items:center;margin-left:auto}
.chip{
  font-size:11px;font-weight:500;letter-spacing:0.3px;
  color:var(--muted);background:var(--s2);
  border:1px solid var(--border);padding:4px 10px;border-radius:20px;
  white-space:nowrap;
}
.chip.live{color:var(--green);border-color:rgba(22,163,74,0.3);background:rgba(22,163,74,0.06)}

/* ===== LAYOUT ===== */
.app-body{flex:1;display:flex;min-height:0;overflow:hidden}

/* ===== 3D VIEWER ===== */
#viewer{
  flex:1;position:relative;
  background:linear-gradient(135deg,#f8f8fa 0%,#ececf0 100%);
  overflow:hidden;
}
#three-canvas{display:block;width:100%;height:100%}

.viewer-empty{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;pointer-events:none;
}
.viewer-empty-icon{font-size:48px;opacity:0.2}
.viewer-empty-text{font-size:14px;color:var(--muted);font-weight:500}
.viewer-empty-sub{font-size:12px;color:var(--muted2)}

.viewer-hint{
  position:absolute;bottom:16px;left:16px;
  font-size:11px;color:var(--muted);
  background:rgba(255,255,255,0.85);backdrop-filter:blur(8px);
  padding:6px 10px;border-radius:20px;border:1px solid var(--border);
  pointer-events:none;
}

/* Recording overlay */
#rec-overlay{
  position:absolute;inset:0;
  display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.7);backdrop-filter:blur(4px);
  flex-direction:column;gap:12px;z-index:50;
}
#rec-overlay.active{display:flex}
.rec-ring{
  width:64px;height:64px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--red);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.rec-label{font-size:13px;font-weight:600;color:var(--text)}
.rec-countdown{font-size:28px;font-weight:700;color:var(--accent);font-family:'JetBrains Mono',monospace}

/* Highlight outline */
.highlight-overlay{position:absolute;inset:0;pointer-events:none;z-index:10}

/* ===== SIDEBAR — DESKTOP ===== */
#sidebar{
  width:300px;flex-shrink:0;
  background:var(--s1);
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:-2px 0 8px rgba(0,0,0,0.04);
}

.sidebar-tabs{
  display:flex;border-bottom:1px solid var(--border);flex-shrink:0;
  background:var(--s2);
}
.tab-btn{
  flex:1;padding:12px 4px;font-family:'Inter',sans-serif;font-size:11px;
  font-weight:600;letter-spacing:0.3px;color:var(--muted);
  background:none;border:none;cursor:pointer;
  border-bottom:2px solid transparent;transition:all 0.15s;
  text-transform:uppercase;
}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--s1)}
.tab-btn:hover:not(.active){color:var(--text2)}

.tab-panel{flex:1;overflow-y:auto;padding:16px;display:none;flex-direction:column;gap:12px}
.tab-panel.active{display:flex}

/* ===== PART CARDS ===== */
.section-title{
  font-size:10px;font-weight:700;letter-spacing:1px;
  color:var(--muted);text-transform:uppercase;margin-bottom:4px;
}

.part-card{
  border:1.5px solid var(--border);border-radius:10px;
  overflow:hidden;cursor:pointer;transition:all 0.15s;
  background:var(--s1);
}
.part-card:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.part-card.selected{border-color:var(--accent);background:var(--accent-dim);box-shadow:0 0 0 3px var(--accent-dim)}
.part-card-header{
  display:flex;align-items:center;gap:10px;padding:11px 12px;
}
.part-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px rgba(0,0,0,0.08)}
.part-label{font-size:12px;font-weight:600;flex:1;color:var(--text)}
.part-tag{font-size:10px;color:var(--muted);font-weight:500}

/* ===== SURFACE TABS ===== */
.surf-tabs{display:flex;gap:4px;background:var(--s2);padding:4px;border-radius:8px}
.surf-btn{
  flex:1;padding:7px 6px;font-family:'Inter',sans-serif;font-size:11px;
  font-weight:600;color:var(--muted);background:none;border:none;
  border-radius:6px;cursor:pointer;transition:all 0.12s;text-align:center;
}
.surf-btn.active{color:var(--accent);background:var(--s1);box-shadow:var(--shadow)}

/* ===== EDITOR PANEL ===== */
.editor-card{
  background:var(--s1);border:1px solid var(--border);
  border-radius:10px;padding:14px;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--shadow);
}
.sec-label{
  font-size:10px;font-weight:700;letter-spacing:0.8px;
  color:var(--muted);text-transform:uppercase;margin-bottom:6px;
}

/* Color */
.color-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.color-input{
  width:38px;height:38px;border:2px solid var(--border);
  border-radius:8px;cursor:pointer;background:none;padding:2px;
  overflow:hidden;flex-shrink:0;
}
.color-input::-webkit-color-swatch-wrapper{padding:0}
.color-input::-webkit-color-swatch{border:none;border-radius:4px}
.hex-input{
  width:88px;height:38px;
  border:1px solid var(--border);border-radius:8px;
  background:var(--s2);color:var(--text);
  font-family:'JetBrains Mono',monospace;font-size:12px;
  padding:0 10px;outline:none;transition:border-color 0.15s;
  flex-shrink:0;
}
.hex-input:focus{border-color:var(--accent);background:var(--accent-dim)}
.eyedropper-btn{
  width:38px;height:38px;flex-shrink:0;
  border:1px solid var(--border);border-radius:8px;
  background:var(--s2);color:var(--text);
  cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.15s;
}
.eyedropper-btn:hover{border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}
.presets{display:flex;gap:4px;flex-wrap:wrap}
.preset{
  width:24px;height:24px;border-radius:6px;cursor:pointer;
  border:2px solid transparent;transition:all 0.1s;
  box-shadow:0 1px 3px rgba(0,0,0,0.15);
}
.preset:hover{transform:scale(1.15);box-shadow:0 2px 6px rgba(0,0,0,0.2)}
.preset.active{border-color:var(--accent);transform:scale(1.1)}

/* Upload */
.upload-zone{
  border:2px dashed var(--border2);border-radius:8px;padding:20px;
  text-align:center;cursor:pointer;transition:all 0.15s;position:relative;
  background:var(--s2);
}
.upload-zone:hover{border-color:var(--accent);background:var(--accent-dim)}
.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-icon{font-size:28px;margin-bottom:6px;opacity:0.4}
.upload-text{font-size:12px;color:var(--muted);font-weight:500}
.upload-sub{font-size:10px;color:var(--muted2);margin-top:2px}

.img-container{display:flex;flex-direction:column;gap:8px}
.img-wrap{
  background:var(--s2);border:1px solid var(--border);border-radius:8px;
  overflow:hidden;aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
}
.img-wrap img{max-width:100%;max-height:100%;object-fit:contain}

/* Sliders */
.slider-row{display:flex;align-items:center;gap:8px}
.slider-lbl{font-size:10px;font-weight:600;color:var(--muted);width:56px;flex-shrink:0;letter-spacing:0.3px}
.slider{
  flex:1;-webkit-appearance:none;height:4px;
  background:var(--s3);border-radius:2px;outline:none;cursor:pointer;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;
  background:var(--accent);border-radius:50%;cursor:pointer;
  border:2px solid white;box-shadow:0 1px 4px rgba(37,99,235,0.4);
}
.slider-val{font-size:10px;font-weight:600;color:var(--accent);width:36px;text-align:right;font-family:'JetBrains Mono',monospace}

/* Buttons */
.btn-row{display:flex;gap:6px}
.btn{
  flex:1;padding:8px;font-family:'Inter',sans-serif;font-size:11px;
  font-weight:600;color:var(--text2);background:var(--s2);
  border:1px solid var(--border);border-radius:8px;cursor:pointer;
  transition:all 0.15s;text-align:center;letter-spacing:0.2px;
}
.btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.btn.primary{background:var(--accent);color:white;border-color:var(--accent)}
.btn.primary:hover{background:#1d4ed8;border-color:#1d4ed8;color:white}
.btn.danger{color:var(--red)}
.btn.danger:hover{border-color:var(--red);background:rgba(220,38,38,0.06);color:var(--red)}

/* Color-only notice */
.color-only-note{
  font-size:11px;color:var(--muted);
  background:var(--s2);border:1px solid var(--border);
  border-radius:6px;padding:8px 10px;text-align:center;
}

/* Divider */
.sdiv{height:1px;background:var(--border);margin:2px 0}

/* View controls */
.ctrl-box{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:12px}
.ctrl-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--border);
}
.ctrl-row:last-child{border-bottom:none}
.ctrl-lbl{font-size:12px;font-weight:500;color:var(--text2)}
.toggle{
  width:38px;height:22px;background:var(--muted2);border:none;
  border-radius:11px;position:relative;cursor:pointer;transition:background 0.2s;flex-shrink:0;
}
.toggle.on{background:var(--accent)}
.toggle::after{
  content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;
  background:white;border-radius:50%;transition:transform 0.2s;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.toggle.on::after{transform:translateX(16px)}

/* Export button */
.export-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px;background:var(--accent);color:white;
  border:none;border-radius:8px;cursor:pointer;font-family:'Inter',sans-serif;
  font-size:12px;font-weight:600;transition:all 0.15s;width:100%;
  box-shadow:0 2px 8px rgba(37,99,235,0.3);
}
.export-btn:hover{background:#1d4ed8;box-shadow:0 4px 12px rgba(37,99,235,0.4)}
.export-btn:disabled{background:var(--muted2);cursor:not-allowed;box-shadow:none}

/* Scrollbar */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--muted2)}

/* ===== STEP BAR ===== */
.step-bar{
  display:flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;
}
.step-item{
  color:var(--muted);padding:4px 10px;border-radius:20px;
  transition:all 0.25s;white-space:nowrap;
  border:1px solid transparent;
}
.step-item.active{
  color:var(--accent);background:var(--accent-dim);
  border-color:rgba(37,99,235,0.2);
}
.step-item.done{
  color:var(--green);
}
.step-arrow{color:var(--muted2);font-size:13px}

/* ===== SELECT HINT ARROW ===== */
.select-hint-arrow{
  margin-top:16px;
  font-size:12px;font-weight:700;color:var(--accent);
  background:var(--accent-dim);border:1px solid rgba(37,99,235,0.25);
  padding:8px 20px;border-radius:20px;
  animation:pulse-hint 1.8s ease-in-out infinite;
}
@keyframes pulse-hint{
  0%,100%{transform:translateY(0);opacity:1}
  50%{transform:translateY(-5px);opacity:0.7}
}

/* ===== TAB LOCKED ===== */
.tab-btn.tab-locked{
  opacity:0.4;cursor:not-allowed;
}
.tab-btn.tab-locked:hover{
  color:var(--muted) !important;
}

/* ===== VIEWER EMPTY improved ===== */

#loading{
  position:fixed;inset:0;background:white;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
}
.load-logo{font-family:'Inter',sans-serif;font-weight:700;font-size:24px;color:var(--text);letter-spacing:-0.5px}
.load-logo span{color:var(--accent)}
.pbar{width:260px;height:3px;background:var(--s3);border-radius:2px;overflow:hidden}
.pfill{height:100%;background:var(--accent);width:0;transition:width 0.2s;border-radius:2px}
.ptext{font-size:12px;color:var(--muted);font-weight:500;font-family:'JetBrains Mono',monospace}

@media (max-width: 480px) {
  .step-bar { display: none; }
}
@media (max-width: 768px) {
  header{padding:0 10px;gap:8px}
  .logo{font-size:14px}
  .model-select-wrap{min-width:0;flex:1;padding:5px 8px}
  .model-select-wrap select{font-size:12px}
  .btn-darkmode{width:30px;height:30px;font-size:14px;border-radius:6px}
  .app-body{flex-direction:column}
  #sidebar{
    width:100%;border-left:none;border-top:none;
    height:50vh;flex-shrink:0;
    position:relative;
  }
  #sidebar.hidden{height:48px;overflow:hidden}
  #viewer{flex:1;min-height:0}
  /* horizontal handle on mobile */
  #resize-handle{
    width:100%;height:14px;border-left:none;border-right:none;
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    cursor:row-resize;flex-direction:row;touch-action:none;
  }
  .resize-handle-bar{width:36px;height:3px}

  .mobile-handle{
    display:flex;align-items:center;justify-content:space-between;
    padding:0 16px;height:48px;flex-shrink:0;cursor:pointer;
    background:var(--s1);border-bottom:1px solid var(--border);
    user-select:none;
  }
  .mobile-handle-title{font-size:12px;font-weight:700;color:var(--text);letter-spacing:0.3px}
  .mobile-handle-btn{
    font-size:11px;font-weight:600;color:var(--accent);
    background:var(--accent-dim);border:1px solid rgba(37,99,235,0.2);
    padding:4px 10px;border-radius:20px;cursor:pointer;border:none;
    font-family:'Inter',sans-serif;
  }

  .sidebar-tabs{flex-shrink:0}
  .tab-panel{padding:12px}

  .viewer-hint{display:none}
}

@media (min-width: 769px) {
  .mobile-handle{display:none}
}

/* ===== MODEL PICKER ===== */
.model-select-wrap{cursor:pointer;user-select:none}
.model-picker{
  position:absolute;top:60px;left:20px;
  background:var(--s1);border:1px solid var(--border);
  border-radius:14px;padding:16px;
  box-shadow:0 4px 16px rgba(0,0,0,0.1),0 12px 40px rgba(0,0,0,0.08);
  z-index:500;min-width:320px;
  animation:picker-in 0.18s ease;
}
@keyframes picker-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.model-picker-title{
  font-size:10px;font-weight:700;letter-spacing:1px;
  color:var(--muted);text-transform:uppercase;margin-bottom:12px;
}
.model-picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.model-picker-card{
  border:2px solid var(--border);border-radius:10px;
  overflow:hidden;cursor:pointer;transition:all 0.15s;background:var(--s2);
}
.model-picker-card:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,0.08);transform:translateY(-2px)}
.model-picker-card.selected{border-color:var(--accent);background:rgba(37,99,235,0.08)}
.model-picker-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--s3)}
.model-picker-thumb-placeholder{
  width:100%;aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--s2),var(--s3));font-size:36px;
}
.model-picker-name{font-size:11px;font-weight:600;color:var(--text);padding:8px 10px;text-align:center}

/* ===== ONBOARDING SPOTLIGHT ===== */
.ob-spotlight{
  position:fixed;inset:0;z-index:9000;pointer-events:all;
}
.ob-spotlight svg{display:block}

.ob-tooltip{
  position:fixed;z-index:9100;
  width:260px;
  opacity:0;transform:scale(0.95);
  transition:opacity 0.2s ease, transform 0.2s cubic-bezier(0.34,1.4,0.64,1);
  pointer-events:all;
}
.ob-tooltip-visible{opacity:1 !important;transform:scale(1) !important}

.ob-tooltip-inner{
  background:var(--s1);border:1px solid var(--border);
  border-radius:14px;padding:18px;
  box-shadow:0 8px 32px rgba(0,0,0,0.18),0 2px 8px rgba(0,0,0,0.1);
  position:relative;
}

/* Arrows */
.ob-tooltip-arrow{
  position:absolute;width:12px;height:12px;
  background:var(--s1);border:1px solid var(--border);
}
.ob-arrow-bottom{
  top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
  border-bottom:none;border-right:none;
}
.ob-arrow-left{
  right:-7px;top:50%;transform:translateY(-50%) rotate(45deg);
  border-left:none;border-bottom:none;
}
.ob-arrow-right{
  left:-7px;top:50%;transform:translateY(-50%) rotate(45deg);
  border-right:none;border-top:none;
}
.ob-arrow-top{
  bottom:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
  border-top:none;border-left:none;
}

.ob-tooltip-dots{display:flex;gap:5px;margin-bottom:12px}
.ob-dot{width:6px;height:6px;border-radius:50%;background:var(--border2);transition:all 0.2s;flex-shrink:0}
.ob-dot.active{background:var(--accent);width:18px;border-radius:3px}

.ob-tooltip-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.3}
.ob-tooltip-desc{font-size:12px;color:var(--text2);line-height:1.6}
.ob-tooltip-desc strong{color:var(--accent)}

.ob-tooltip-btns{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:8px}
.ob-btn-skip{font-size:11px;font-weight:600;color:var(--muted);background:none;border:none;cursor:pointer;padding:6px;font-family:'Inter',sans-serif;transition:color 0.15s}
.ob-btn-skip:hover{color:var(--text2)}
.ob-btn-next{
  flex:1;padding:8px 14px;
  background:var(--accent);color:white;
  border:none;border-radius:8px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  transition:all 0.15s;box-shadow:0 2px 6px rgba(37,99,235,0.3);
}
.ob-btn-next:hover{background:#1d4ed8}