/* visualizer.css — Phase 4 */
* { box-sizing: border-box; }
body { margin:0; font-family:'Space Grotesk', system-ui, sans-serif; background:#16243F; color:#F3ECE2; }

#emv-app { display:flex; gap:16px; max-width:1320px; margin:18px auto; padding:0 14px; align-items:flex-start; }

/* Inventory panel */
#emv-panel {
  flex:0 0 260px; background:#1d3050; border-radius:14px; padding:14px;
  max-height:calc(100vh - 36px); overflow:auto; box-shadow:0 8px 30px rgba(0,0,0,0.25);
}
#emv-panel-head h2 { margin:0 0 10px; font-size:18px; }
.emv-style-row { display:flex; flex-direction:column; gap:5px; font-size:12px; opacity:.85; margin-bottom:12px; }
#emv-style-select {
  font-family:inherit; font-size:14px; padding:8px; border-radius:8px; border:none;
  background:#0f1d33; color:#F3ECE2; cursor:pointer;
}

.emv-cat { margin-bottom:6px; border-radius:10px; overflow:hidden; background:#0f1d33; }
.emv-cat-head {
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  padding:10px 12px; font-size:13px; font-weight:600; text-transform:capitalize; user-select:none;
}
.emv-cat-head .emv-chev { transition:transform .15s ease; opacity:.7; }
.emv-cat.open .emv-chev { transform:rotate(90deg); }
.emv-cat-body { display:none; padding:4px 8px 10px; }
.emv-cat.open .emv-cat-body { display:block; }

.emv-itembtn {
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  font-family:inherit; font-size:13px; color:#F3ECE2; background:#16243F;
  border:1px solid #2a3f63; border-radius:8px; padding:8px 10px; margin:4px 0; cursor:pointer;
}
.emv-itembtn:hover { border-color:#1ED2D2; background:#1a2c4a; }
.emv-itembtn .emv-dim { margin-left:auto; font-size:11px; opacity:.55; }
.emv-itembtn .emv-tierdot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.emv-tier-issued { background:#8aa0c0; }
.emv-tier-neutral { background:#c0a98a; }
.emv-tier-style { background:#1ED2D2; }

#emv-panel-foot { margin-top:12px; }
#emv-panel-foot button {
  font-family:inherit; font-size:13px; font-weight:600; color:#16243F; background:#F0785A;
  border:none; border-radius:8px; padding:9px 14px; cursor:pointer; width:100%;
}
#emv-readout { display:block; margin-top:10px; font-size:11px; opacity:.6; line-height:1.5; }

/* Stage */
#emv-stage {
  position:relative; flex:1 1 auto; min-width:0; aspect-ratio:16/9;
  border-radius:14px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.25);
}
#emv-stage .canvas-container, #emv-canvas { position:absolute !important; top:0; left:0; }

@media (max-width:760px){
  #emv-app { flex-direction:column; }
  #emv-panel { flex:1 1 auto; width:100%; max-height:none; }
}

/* ---- Phase 5: Tuning panel ---- */
#emv-tuner {
  position:fixed; right:18px; bottom:18px; width:240px; z-index:50;
  background:#1d3050; border:1px solid #2a3f63; border-radius:12px; padding:14px;
  box-shadow:0 10px 34px rgba(0,0,0,0.4); color:#F3ECE2;
}
#emv-tuner.emv-hidden { display:none; }
.emv-tuner-head { font-size:14px; font-weight:700; margin-bottom:10px; color:#1ED2D2; }
.emv-tuner-row { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; margin:6px 0; }
.emv-tuner-row span { opacity:.7; }
.emv-tuner-row strong { font-family:ui-monospace, Menlo, monospace; font-size:13px; }
.emv-tuner-btns { display:flex; align-items:center; gap:8px; margin:10px 0; }
.emv-tuner-btns button {
  width:34px; height:34px; flex:0 0 auto; font-size:20px; line-height:1; font-weight:700;
  color:#16243F; background:#1ED2D2; border:none; border-radius:8px; cursor:pointer;
}
.emv-tuner-btns button:hover { filter:brightness(1.05); }
#emv-tuner-slider { flex:1 1 auto; min-width:0; accent-color:#1ED2D2; }
#emv-tuner-copy {
  width:100%; font-family:inherit; font-size:13px; font-weight:600; color:#16243F;
  background:#00A89B; border:none; border-radius:8px; padding:9px; cursor:pointer; margin-top:4px;
}
#emv-tuner-copy.copied { background:#1ED2D2; }
#emv-tuner-hint { font-size:11px; opacity:.55; line-height:1.5; margin-top:10px; }

/* ---- Phase 7: Shopping drawer ---- */
#emv-shop-toggle {
  position:fixed; right:18px; top:18px; z-index:60; font-family:inherit; font-size:14px; font-weight:700;
  color:#16243F; background:#1ED2D2; border:none; border-radius:10px; padding:10px 14px; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
}
#emv-shop-drawer {
  position:fixed; right:0; top:0; height:100vh; width:340px; z-index:70; display:flex; flex-direction:column;
  background:#1d3050; border-left:1px solid #2a3f63; box-shadow:-8px 0 34px rgba(0,0,0,0.4); padding:16px;
  transform:translateX(0); transition:transform .2s ease;
}
#emv-shop-drawer.emv-hidden { transform:translateX(360px); }
.emv-shop-head { display:flex; justify-content:space-between; align-items:center; }
.emv-shop-head h2 { margin:0; font-size:18px; }
#emv-shop-close { background:none; border:none; color:#F3ECE2; font-size:24px; cursor:pointer; line-height:1; }
.emv-shop-note { font-size:11px; opacity:.55; margin:6px 0 12px; line-height:1.5; }
#emv-shop-list { flex:1 1 auto; overflow:auto; }
.emv-shop-empty { font-size:13px; opacity:.5; padding:20px 0; text-align:center; }

.emv-shop-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #2a3f63; }
.emv-shop-row input[type=checkbox] { width:16px; height:16px; accent-color:#1ED2D2; flex:0 0 auto; }
.emv-shop-thumb { width:42px; height:42px; flex:0 0 auto; border-radius:6px; background:#0f1d33 center/contain no-repeat; }
.emv-shop-info { flex:1 1 auto; min-width:0; }
.emv-shop-title { font-size:13px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.emv-shop-meta { font-size:11px; opacity:.6; margin-top:2px; }
.emv-badge { display:inline-block; font-weight:700; color:#1ED2D2; }
.emv-shop-actions { display:flex; flex-direction:column; gap:4px; flex:0 0 auto; }
.emv-shop-actions button { font-family:inherit; font-size:11px; border:none; border-radius:6px; padding:4px 8px; cursor:pointer; }
.emv-swap-btn { background:#00A89B; color:#16243F; }
.emv-remove-btn { background:#3a2230; color:#F0785A; }

.emv-shop-foot { padding-top:12px; }
#emv-shop-checkout {
  width:100%; font-family:inherit; font-size:14px; font-weight:700; color:#16243F; background:#F0785A;
  border:none; border-radius:10px; padding:12px; cursor:pointer;
}
#emv-shop-checkout:disabled { opacity:.4; cursor:not-allowed; }
#emv-shop-foot-note { font-size:11px; opacity:.55; margin-top:8px; line-height:1.5; }

/* Swap popover */
#emv-swap-pop {
  position:fixed; z-index:80; width:240px; background:#0f1d33; border:1px solid #2a3f63; border-radius:10px;
  padding:10px; box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
#emv-swap-pop.emv-hidden { display:none; }
.emv-swap-head { font-size:12px; font-weight:700; color:#1ED2D2; margin-bottom:8px; }
.emv-swap-opt { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; text-align:left;
  font-family:inherit; font-size:12px; color:#F3ECE2; background:#16243F; border:1px solid #2a3f63;
  border-radius:7px; padding:8px; margin:4px 0; cursor:pointer; }
.emv-swap-opt:hover { border-color:#1ED2D2; }
.emv-swap-opt.current { opacity:.5; cursor:default; }

/* ---- Phase 7b: Suite swap menu ---- */
#emv-swap-pop { max-height:80vh; overflow:auto; }
.emv-swap-tier { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:.55; margin:10px 2px 4px; }
.emv-swap-title { display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.emv-dc-badge { display:inline-block; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#16243F; background:#1ED2D2; border-radius:4px; padding:2px 5px; flex:0 0 auto; }
.emv-swap-opt.current { outline:1px solid #1ED2D2; opacity:.6; }

/* ---- Phase 8b: Essentials bundle section ---- */
.emv-ess-section { margin-top:14px; padding-top:12px; border-top:2px solid #2a3f63; }
.emv-ess-head { font-size:14px; font-weight:700; color:#1ED2D2; margin-bottom:2px; }
.emv-ess-note { font-size:11px; opacity:.55; margin-bottom:8px; line-height:1.4; }
.emv-ess-row { gap:10px; }