:root{
  --ui-bg: rgba(20,20,20,0.8);
  --accent: #ff8a50;
  --panel-radius: 10px;
}
html,body{height:100%;margin:0;background:#111;touch-action:none; -webkit-user-select:none;}
#bg{position:fixed;inset:0;width:100%;height:100%;display:block}

#ui{position:fixed;inset:12px;pointer-events:none}
#ui > *{pointer-events:auto}

/* top-left edit */
#editBtn{
  width:48px;height:48px;border-radius:10px;border:0;background:var(--ui-bg);color:white;font-size:18px;
  display:flex;align-items:center;justify-content:center;backdrop-filter: blur(6px);
}
#editPanel{position:absolute;left:0;top:60px;background:var(--ui-bg);padding:8px;border-radius:var(--panel-radius);display:flex;flex-direction:column;gap:6px}
.panel{box-shadow:0 6px 18px rgba(0,0,0,0.6);color:#fff}

/* right column for parts */
#partsPanel{position:absolute;right:0;top:0;background:var(--ui-bg);padding:8px;border-radius:var(--panel-radius);max-width:34vw;min-width:140px}
#partsList{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:6px}
.partItem{background:rgba(255,255,255,0.04);padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;font-size:13px}
.partItem.selected{outline:2px solid var(--accent)}

.row{display:flex;gap:6px}
.row.small{margin-top:6px;align-items:center}
button.tool, .row button{
  background:#222;border:0;color:#fff;padding:8px;border-radius:8px;font-size:13px
}
button.tool.active{outline:2px solid var(--accent)}
.hidden{display:none}

/* touch targets */
button, input[type=checkbox]{min-width:44px;min-height:44px}

/* export dropdown */
.exportDropdown{
  position:absolute;
  right:0;
  top:52px;
  background:var(--ui-bg);
  padding:6px;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.6);
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:120px;
  z-index:40;
  transition:transform 220ms ease, opacity 160ms ease;
}

/* hide export options until the dropdown is revealed */
.exportDropdown .exportOption{
  display:none;
}

/* when dropdown is visible, show options */
.exportDropdown:not(.hidden) .exportOption{
  display:block;
}

/* device-style bottom sheet variant */
.exportDropdown.device{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  right:auto;
  top:auto;
  bottom:12px;
  min-width:60vw;
  max-width:420px;
  padding:12px;
  border-radius:14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* ensure options look good in both layouts */
.exportDropdown .exportOption{
  background:#222;border:0;color:#fff;padding:10px;border-radius:10px;font-size:14px;text-align:left;
}
.exportDropdown .exportOption:hover{outline:2px solid var(--accent)}