/* =====================================================================
   Asseta — preview shell (sidebar + top bar)
   ONLY the navigation frame around the module — real icon SVGs exported
   from Figma + exact Figma measurements (sidebar 78, items 48, icon 20,
   active var(--frame-active); top bar 74). This is the preview frame; your app already
   has its own shell. The handoff lives in #dc-module.
   ===================================================================== */
.shell-side {
  width: 78px; flex: 0 0 78px; background: var(--frame);
  display: flex; flex-direction: column; padding-bottom:var(--sp-12);
}
.shell-logo { height: 74px; flex: 0 0 74px; display: grid; place-items: center; }
.shell-logo img { width: 33px; height: 33px; display: block; }
.shell-nav { display: flex; flex-direction: column; padding-top:var(--sp-24); }
.shell-nav--bottom { margin-top:auto; padding-top:0; }
.shell-item { height: 48px; display: grid; place-items: center; }
.shell-item .ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-frame); transition: background .15s; }
.shell-item:hover .ico { background: var(--on-frame-hover); }
.shell-item.is-active .ico { background: var(--frame-active); }
.shell-item img { width: 20px; height: 20px; display: block; }
.shell-item.rot img { transform: rotate(180deg); }

.shell-top {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h); background: var(--frame);
  display: flex; align-items: center; gap:var(--sp-16); padding:0 var(--sp-20);
}
.shell-top-left { display: flex; align-items: center; gap:var(--sp-8); flex: 0 0 auto; }
.shell-av { width: 28px; height: 28px; border-radius:var(--r-8); display: grid; place-items: center; font:var(--fw-medium) var(--fs-14) var(--font); color: var(--av-ink); }
.shell-more { height: 28px; padding:0 var(--sp-8); border: 0; border-radius:var(--r-8); background: var(--frame-over); color: var(--on-frame-strong); font:var(--fw-medium) var(--fs-12) var(--font); display: inline-flex; align-items: center; gap:var(--sp-4); cursor: pointer; }
.shell-search { flex: 1; max-width: 560px; margin:0 auto; display: flex; align-items: center; gap:var(--sp-8); height: 38px; padding:0 var(--sp-12); background: var(--frame-over); border-radius: var(--r-pill); color: var(--on-frame-soft); }
.shell-search input { flex: 1; border: 0; background: none; outline: 0; color: var(--white); font:var(--fw-regular) var(--fs-14) var(--font); }
.shell-search input::placeholder { color: var(--on-frame-faint); }
.shell-search .kbd { font:var(--fw-medium) var(--fs-12) var(--font); color: var(--on-frame-muted); background: var(--on-frame-fill); border-radius:var(--r-frame); padding:var(--sp-2) var(--sp-6); }
.shell-top-right { display: flex; align-items: center; gap:var(--sp-12); flex: 0 0 auto; }
.shell-icbtn { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--frame-over); color: var(--white); display: grid; place-items: center; cursor: pointer; }
/* Client / Admin view toggle (segmented control on the dark frame) */
.shell-mode { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--frame-over); border-radius: var(--r-pill); }
.shell-mode-btn { height: 28px; padding: 0 var(--sp-12); border: 0; background: none; border-radius: var(--r-pill); color: var(--on-frame-muted); font: var(--fw-medium) var(--fs-12) var(--font); cursor: pointer; transition: background .15s, color .15s; }
.shell-mode-btn:hover { color: var(--on-frame-strong); }
.shell-mode-btn.is-active { background: var(--white); color: var(--navy); }
.shell-yh { width: 34px; height: 34px; border-radius: 50%; background: var(--avatar-yh); color: var(--white); display: grid; place-items: center; font:var(--fw-medium) var(--fs-12) var(--font); box-shadow: 0 0 0 2px var(--on-frame-ring); }