/* ── Main layout ─────────────────────────────── */
.layout{display:flex;height:calc(100vh - 48px);overflow:hidden}
/* ── Topbar ──────────────────────────────────── */
.topbar{
  background:var(--bg);border-bottom:none;
  padding:0 16px;height:48px;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;z-index:100;position:relative;
}
/* Left section */
.topbar-left{display:flex;align-items:center;gap:6px}
.topbar-home{
  display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);
  color:var(--primary);transition:background var(--tr);
}
.topbar-home svg{width:20px;height:20px}
.topbar-home:hover{background:var(--surface)}
.topbar-back{
  display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);
  border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all var(--tr);
}
.topbar-back svg{width:14px;height:14px}
.topbar-back:hover{background:var(--surface);color:var(--text)}
.topbar-project{display:flex;align-items:center;gap:8px;margin-left:2px}
.topbar-project-thumb{
  width:28px;height:28px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--border-light);
  display:grid;place-items:center;overflow:hidden;flex-shrink:0;
}
.topbar-project-thumb svg{width:16px;height:16px}
.topbar-project-thumb img{width:100%;height:100%;object-fit:cover}
.topbar-project-name{font-size:13px;font-weight:600;color:var(--text)}
.topbar-badge{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 7px;border-radius:10px;
  background:#e8f5e9;color:#2e7d32;line-height:1.4;
}
/* Right section */
.topbar-right{display:flex;align-items:center;gap:6px}
.topbar-save-status{
  display:flex;align-items:center;gap:4px;
  font-size:12px;color:var(--text-muted);padding:0 8px;
}
.topbar-save-status svg{width:13px;height:13px;stroke:#43a047}
.topbar-save-status.saving{color:var(--text-muted);opacity:.7}
.topbar-icon-btn{
  display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);
  border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all var(--tr);
}
.topbar-icon-btn svg{width:16px;height:16px}
.topbar-icon-btn:hover{background:var(--surface);color:var(--text)}
/* Preview (primary pill btn) */
.topbar-btn-preview{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 0;border-radius:var(--r-sm);width:100px;justify-content:center;
  font-size:13px;font-weight:600;cursor:pointer;transition:all var(--tr);
  background:var(--primary);border:1px solid var(--primary);color:#fff;
}
.topbar-btn-preview svg{width:13px;height:13px;stroke:#fff;fill:none}
.topbar-btn-preview:hover{background:#5a4bd1;border-color:#5a4bd1}
.topbar-avatar{
  width:30px;height:30px;border-radius:50%;
  background:var(--primary);color:#fff;
  display:grid;place-items:center;
  font-size:12px;font-weight:700;cursor:pointer;
  transition:opacity var(--tr);
}
.topbar-avatar:hover{opacity:.85}

/* ── Topbar center — contextual switch container ── */
.topbar-center-group{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:6px;
}
.topbar-ctx{display:none;}
.topbar-ctx.active{display:flex;}
/* ── Shared topbar switch (mode & display) ── */
.topbar-switch{
  display:flex;align-items:center;gap:1px;
  padding:4px;position:relative;
  background:var(--surface);border-radius:999px;
  border:1px solid var(--border-light);
  box-shadow:var(--sh);
}
.topbar-pill{
  position:absolute;top:4px;height:calc(100% - 8px);
  border-radius:999px;
  transition:left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
  pointer-events:none;z-index:0;
}
.topbar-sw-btn{
  position:relative;z-index:1;
  border:none;background:transparent;color:var(--text-muted);
  font-size:12px;font-weight:600;font-family:inherit;
  text-transform:uppercase;letter-spacing:.5px;
  padding:0 20px;height:30px;cursor:pointer;transition:color .2s;
  display:flex;align-items:center;justify-content:center;gap:4px;line-height:normal;border-radius:999px;
  white-space:nowrap;
}
.topbar-sw-btn svg{width:14px;height:14px;flex-shrink:0;}
.topbar-sw-btn:hover{color:var(--text);}
.topbar-sw-btn.active{color:#fff;}
/* Pill colours */
.topbar-mode-switch .topbar-pill{background:var(--primary);}
.topbar-display-switch .topbar-pill{background:var(--green);}
/* ── Topbar mode group: 3 visually distinct sub-switches with a sliding pill.
       Each sub-switch hides overflow so the pill is clipped at its rounded
       boundary; since the pill has NO box-shadow, overflow:hidden suffices. ── */
.topbar-mode-group{
  display:flex;align-items:center;gap:6px;
  position:relative;
  background:transparent;border:none;box-shadow:none;padding:0;
}
/* Sub-switch container: white rounded pill with subtle border + shadow.
   overflow:hidden clips the pill (no box-shadow on pill, so overflow is
   enough; avoids clip-path quirks). The ::after below masks the pill near
   the rounded edges so it appears to be clipped 5px INSIDE the container,
   preserving the same gap during transition that's visible at rest. */
.topbar-mode-group > .topbar-mode-switch{
  background:var(--surface);
  border:1px solid var(--border-light);
  border-radius:999px;
  padding:4px;
  position:relative;display:flex;align-items:center;gap:1px;
  overflow:hidden;
  box-shadow:var(--sh);
}
/* White inner frame (5px thick) painted ABOVE the pill — so when the pill
   slides past the container edges it gets visually masked 5px INSIDE the
   boundary, producing the same 5px gap during transition as at rest. */
.topbar-mode-group > .topbar-mode-switch::after{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 4px var(--surface);
  pointer-events:none;z-index:2;
}
/* Sliding selection pill — sits inside the 5px white frame so the gap is
   visible all around at rest; during transition the frame masks the edges
   so the gap stays consistent. JS sets left/width with INSET=1. */
.topbar-mode-group .topbar-mode-switch > .topbar-pill{
  position:absolute;top:4px;height:calc(100% - 8px);
  border-radius:999px;
  transition:left .32s cubic-bezier(.4,0,.2,1),
             width .32s cubic-bezier(.4,0,.2,1);
  pointer-events:none;z-index:1;
}
.topbar-mode-group .topbar-mode-studio > .topbar-pill{background:#b66bff;}
.topbar-mode-group .topbar-mode-main   > .topbar-pill{background:var(--primary);}
.topbar-mode-group .topbar-mode-live   > .topbar-pill{background:var(--green);}
/* Buttons at z-index:3 — above pill (1) and white frame (2). */
.topbar-mode-group .topbar-sw-btn{
  position:relative;z-index:3;
  /* Width is equalized via JS on init; padding stays for natural measure */
}
/* ── Preview / Build toggle button ── */
.topbar-btn-preview .topbar-ico-build,
.topbar-btn-preview .topbar-build-label{display:none;}
.topbar-btn-preview.is-preview .topbar-ico-preview,
.topbar-btn-preview.is-preview .topbar-preview-label{display:none;}
.topbar-btn-preview.is-preview .topbar-ico-build,
.topbar-btn-preview.is-preview .topbar-build-label{display:inline-flex;}
.topbar-btn-preview.is-preview{
  background:var(--green);border-color:var(--green);
}
.topbar-btn-preview.is-preview:hover{
  background:#00a382;border-color:#00a382;
}
/* ── Topbar separator ── */
.topbar-sep{width:1px;height:18px;background:var(--border-light);margin:0 4px;flex-shrink:0;}
/* ── Activity Bar ────────────────────────────── */
.activity-bar{
  width:var(--activity-w);flex-shrink:0;
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:0 0 12px;
  overflow-y:auto;
}
.product-info{
  display:flex;align-items:center;gap:12px;
  padding:16px 16px 12px;border-bottom:1px solid var(--border-light);
  flex-shrink:0;
}
.product-thumb{
  width:48px;height:48px;border-radius:var(--r);
  background:var(--primary-bg);border:1px solid var(--border-light);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.product-thumb svg{width:22px;height:22px;color:var(--primary);opacity:.6}
.product-details{min-width:0;display:flex;flex-direction:column;gap:4px}
.product-name{font-weight:700;font-size:14px;line-height:1.3;color:var(--text)}
.product-status-row{display:flex;align-items:center;gap:6px}
.product-status{
  display:inline-flex;align-items:center;
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--green);background:var(--green-bg);
  padding:2px 6px;border-radius:4px;line-height:1.4;
}
.product-stats{font-size:10px;color:var(--text-muted);line-height:1}
.act-section-label{
  padding:16px 16px 6px;
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-faint);
}
.act-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;margin:2px 8px;border-radius:var(--r);
  font-size:13px;font-weight:500;color:var(--text-secondary);
  cursor:pointer;transition:all var(--tr);border:none;background:none;
  text-align:left;width:calc(100% - 16px);
}
.act-item:hover{background:var(--bg);color:var(--text)}
.act-item.active{background:var(--primary-bg);color:var(--primary);font-weight:600}
.act-item svg{width:18px;height:18px;flex-shrink:0;opacity:.55}
.act-item.active svg{opacity:1}
.act-item .act-badge{
  margin-left:auto;font-size:10px;font-weight:600;
  padding:2px 8px;border-radius:8px;background:var(--bg);color:var(--text-muted);
}
.act-item.active .act-badge{background:var(--primary-bg-hover);color:var(--primary)}
.act-divider{height:1px;background:var(--border-light);margin:8px 16px}