/* Soft admin surface (all densities) */
:root {
  --studio-topbar-h: 2.25rem;
  --studio-toolbar-h: 2rem;
  --studio-chrome-h: calc(var(--studio-topbar-h) + var(--studio-toolbar-h));
}

:not(.dark) .fi-body {
  position: relative;
  background-color: #e8e9eb;
  z-index: 1;
}

:not(.dark) .fi-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: linear-gradient(
    99.6deg,
    rgba(232, 233, 235, 1) 10.6%,
    rgba(240, 241, 243, 1) 32.9%,
    rgba(248, 249, 251, 0.7) 50%,
    rgba(240, 241, 243, 1) 67.1%,
    rgba(232, 233, 235, 1) 83.4%
  );
}

/* Density switch stays the same size in every mode */
.studio-density-switch {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  margin-inline-end: 0.25rem;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  background: #fff;
}

.studio-density-switch button {
  appearance: none;
  margin: 0;
  border: 0;
  background: transparent;
  color: #334155;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.3rem 0.45rem;
  cursor: pointer;
}

.studio-density-switch button + button {
  border-left: 1px solid #e2e8f0;
}

.studio-density-switch button[aria-pressed="true"] {
  background: #0d9488;
  color: #fff;
}

.studio-density-switch button:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: -2px;
}

/* 大 — stock Filament chrome, original sidebar width */
html.studio-density-lg {
  --sidebar-width: 20rem;
  --collapsed-sidebar-width: 4.5rem;
  --studio-topbar-h: 4rem;
  --studio-toolbar-h: 4.5rem;
  --studio-chrome-h: 10rem;
}

/* 中 — current compact chrome */
html.studio-density-md:not(:has(.fi-simple-layout)) {
  --sidebar-width: 13rem;
  --collapsed-sidebar-width: 3.5rem;
  --studio-topbar-h: 2.25rem;
  --studio-toolbar-h: 2rem;
  font-size: 0.8125rem;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-topbar > nav,
html.studio-density-md:not(:has(.fi-simple-layout)) .fi-topbar nav {
  min-height: var(--studio-topbar-h) !important;
  height: var(--studio-topbar-h);
  padding-inline: 0.375rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-topbar .fi-icon-btn,
html.studio-density-md:not(:has(.fi-simple-layout)) .fi-topbar .fi-dropdown-trigger {
  --c-padding: 0.2rem;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-sidebar-header {
  height: var(--studio-topbar-h) !important;
  min-height: var(--studio-topbar-h) !important;
  padding-inline: 0.5rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-sidebar-header .fi-logo {
  font-size: 0.8125rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-sidebar-nav {
  scrollbar-width: thin;
  padding: 0.375rem 0.375rem 0.75rem !important;
  gap: 0.5rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-sidebar-nav-groups {
  gap: 0.5rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-sidebar-group {
  gap: 0.125rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-sidebar-group-button {
  padding: 0.2rem 0.375rem !important;
  gap: 0.375rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-sidebar-group-label {
  font-size: 0.625rem !important;
  line-height: 1.1rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-sidebar-group-icon,
html.studio-density-md:not(:has(.fi-simple-layout)) .fi-sidebar-item-icon {
  height: 1rem !important;
  width: 1rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-sidebar-item-button {
  padding: 0.2rem 0.375rem !important;
  gap: 0.375rem !important;
  border-radius: 0.375rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-sidebar-item-label {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-sidebar-group-items {
  gap: 0.125rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) main.fi-main,
html.studio-density-md:not(:has(.fi-simple-layout)) .fi-main {
  padding-inline: 0.5rem !important;
  padding-block: 0.5rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-main-ctn {
  padding: 0 !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-page > section.flex,
html.studio-density-md:not(:has(.fi-simple-layout)) .fi-page > section.flex.flex-col {
  padding-block: 0.5rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  gap: 0.5rem !important;
  row-gap: 0.5rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-page > section,
html.studio-density-md:not(:has(.fi-simple-layout)) .fi-page > .fi-page-content {
  gap: 0.5rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-header {
  gap: 0.375rem !important;
  margin-bottom: 0 !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-header-heading {
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

@media (min-width: 640px) {
  html.studio-density-md:not(:has(.fi-simple-layout)) .fi-header-heading {
    font-size: 1rem !important;
  }
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-header-subheading {
  margin-top: 0.125rem !important;
  font-size: 0.6875rem !important;
  line-height: 1.2 !important;
  max-width: none !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-btn {
  font-size: 0.6875rem !important;
  line-height: 1.1 !important;
  padding: 0.25rem 0.5rem !important;
  gap: 0.25rem !important;
  border-radius: 0.375rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-btn.fi-size-sm,
html.studio-density-md:not(:has(.fi-simple-layout)) .fi-btn-size-sm {
  padding: 0.1875rem 0.375rem !important;
  font-size: 0.6875rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-btn.fi-size-xs,
html.studio-density-md:not(:has(.fi-simple-layout)) .fi-btn-size-xs {
  padding: 0.125rem 0.3125rem !important;
  font-size: 0.625rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-btn-icon,
html.studio-density-md:not(:has(.fi-simple-layout)) .fi-btn svg {
  height: 0.8125rem !important;
  width: 0.8125rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-icon-btn {
  padding: 0.1875rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-icon-btn svg {
  height: 0.9375rem !important;
  width: 0.9375rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-ac-btn-action,
html.studio-density-md:not(:has(.fi-simple-layout)) .fi-ac-icon-btn-action {
  font-size: 0.6875rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-ta-header-cell {
  padding: 0.25rem 0.375rem !important;
  font-size: 0.625rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-ta-cell {
  padding: 0.25rem 0.375rem !important;
  font-size: 0.75rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-ta-text {
  font-size: 0.75rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-ta-actions {
  gap: 0.125rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-ta-header-toolbar {
  padding: 0.25rem 0.375rem !important;
  gap: 0.375rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-ta-search-field input,
html.studio-density-md:not(:has(.fi-simple-layout)) .fi-input {
  font-size: 0.75rem !important;
  min-height: 1.75rem !important;
  padding-top: 0.1875rem !important;
  padding-bottom: 0.1875rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-fo-field-wrp-label label,
html.studio-density-md:not(:has(.fi-simple-layout)) .fi-fo-field-wrp-label span {
  font-size: 0.6875rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-section-header {
  padding: 0.375rem 0.5rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-section-content,
html.studio-density-md:not(:has(.fi-simple-layout)) .fi-section-content-ctn {
  padding: 0.5rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-section-header-heading {
  font-size: 0.75rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-badge {
  font-size: 0.625rem !important;
  padding: 0.0625rem 0.3125rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) .fi-tabs-item {
  font-size: 0.6875rem !important;
  padding: 0.25rem 0.5rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-header {
  min-height: var(--studio-toolbar-h);
  padding: 0.125rem 0.5rem !important;
  gap: 0.375rem !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-header-heading {
  font-size: 0.75rem !important;
}

/* 小 — tighter than 中 */
html.studio-density-sm:not(:has(.fi-simple-layout)) {
  --sidebar-width: 11rem;
  --collapsed-sidebar-width: 2.75rem;
  --studio-topbar-h: 1.75rem;
  --studio-toolbar-h: 1.5rem;
  font-size: 0.6875rem;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-topbar > nav,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-topbar nav {
  min-height: var(--studio-topbar-h) !important;
  height: var(--studio-topbar-h);
  padding-inline: 16px !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-topbar .fi-icon-btn {
  margin: 0 !important;
  height: calc(var(--studio-topbar-h) - 4px) !important;
  width: calc(var(--studio-topbar-h) - 4px) !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-header {
  height: var(--studio-topbar-h) !important;
  min-height: var(--studio-topbar-h) !important;
  padding-inline: 0.375rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-header .fi-logo {
  font-size: 0.6875rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-nav {
  scrollbar-width: thin;
  padding: 0.25rem 0.25rem 0.5rem !important;
  gap: 0.25rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-nav-groups,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-group,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-group-items {
  gap: 0.125rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-nav-groups {
  margin-inline: 0 !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-group-button,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-item-button {
  padding: 0.1rem 0.25rem !important;
  gap: 0.25rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-group-label,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-item-label {
  font-size: 0.625rem !important;
  line-height: 1 !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-group-label {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-group-icon,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-item-icon {
  height: 0.875rem !important;
  width: 0.875rem !important;
}

/* Small mode: persistent canvas, fixed icon rail, floating pages */
html.studio-density-sm:not(:has(.fi-simple-layout)) .studio-canvas-layer {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
}

.studio-canvas-layer {
  display: none;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .studio-canvas-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #111;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-layout,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-main-ctn,
html.studio-density-sm:not(:has(.fi-simple-layout)) body.fi-studio-viewer main.fi-main {
  background: transparent !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-main-ctn {
  pointer-events: none;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-topbar,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-header,
html.studio-density-sm:not(:has(.fi-simple-layout)) body:not(.fi-studio-viewer) main.fi-main {
  pointer-events: auto;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar {
  position: fixed !important;
  top: var(--studio-topbar-h) !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: var(--studio-topbar-h) auto 0 0 !important;
  height: auto !important;
  max-height: none !important;
  width: var(--collapsed-sidebar-width) !important;
  z-index: 30;
  overflow: hidden;
  background: #fff !important;
  box-shadow: none;
  transform: none !important;
  transition: width 120ms ease;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar:hover,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar.fi-sidebar-open {
  width: var(--sidebar-width) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar:hover .fi-sidebar-header,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar.fi-sidebar-open .fi-sidebar-header,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar:hover .fi-sidebar-nav,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar.fi-sidebar-open .fi-sidebar-nav {
  padding-inline: 16px !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-main-ctn-sidebar-open {
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-sidebar-nav {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - var(--studio-topbar-h) - var(--studio-topbar-h));
}

html.studio-density-sm:not(:has(.fi-simple-layout)) body:not(.fi-studio-viewer) main.fi-main {
  position: fixed !important;
  top: calc(var(--studio-topbar-h) + 0.5rem) !important;
  left: calc(var(--collapsed-sidebar-width) + 0.5rem) !important;
  width: 50vw !important;
  max-width: 50vw !important;
  height: auto !important;
  max-height: 50vh !important;
  margin: 0 !important;
  overflow: auto !important;
  align-self: auto !important;
  background: #fff !important;
  border-radius: 0.375rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 20;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) main.fi-main,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-main {
  padding: 0.25rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-main-ctn {
  padding: 0 !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-page > section.flex,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-page > section.flex.flex-col,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-page > section {
  padding-block: 0.25rem !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  gap: 0.25rem !important;
  row-gap: 0.25rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-header {
  gap: 0.25rem !important;
  margin-bottom: 0 !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-header-heading {
  font-size: 0.75rem !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-header-subheading {
  margin-top: 0 !important;
  font-size: 0.625rem !important;
  line-height: 1.1 !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-btn {
  font-size: 0.625rem !important;
  line-height: 1 !important;
  padding: 0.15rem 0.35rem !important;
  gap: 0.15rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-btn svg,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-icon-btn svg {
  height: 0.75rem !important;
  width: 0.75rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-icon-btn {
  padding: 0.1rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-ta-header-cell,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-ta-cell {
  padding: 0.125rem 0.25rem !important;
  font-size: 0.625rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-ta-text,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-ta-header-toolbar,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-input,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-ta-search-field input {
  font-size: 0.625rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-ta-header-toolbar {
  padding: 0.125rem 0.25rem !important;
  gap: 0.25rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-input,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-ta-search-field input {
  min-height: 1.4rem !important;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-section-header,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-section-content,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-section-content-ctn {
  padding: 0.25rem 0.375rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-section-header-heading,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-badge,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-tabs-item,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-fo-field-wrp-label label,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-fo-field-wrp-label span {
  font-size: 0.625rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-tabs-item,
html.studio-density-sm:not(:has(.fi-simple-layout)) .fi-badge {
  padding: 0.1rem 0.3rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-header {
  min-height: var(--studio-toolbar-h);
  padding: 0.05rem 0.35rem !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-header-heading {
  font-size: 0.6875rem !important;
}

/* Viewer canvas stays primary in every density */
html.studio-density-md:not(:has(.fi-simple-layout)) body.fi-studio-viewer main.fi-main,
html.studio-density-md:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-main,
html.studio-density-md:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-main-ctn,
html.studio-density-md:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-page > section,
html.studio-density-md:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-page > section.flex,
html.studio-density-sm:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-main-ctn,
html.studio-density-sm:not(:has(.fi-simple-layout)) body.fi-studio-viewer main.fi-main {
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
}

html.studio-density-sm:not(:has(.fi-simple-layout)) body.fi-studio-viewer main.fi-main,
html.studio-density-sm:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-main,
html.studio-density-sm:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-main-ctn,
html.studio-density-sm:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-page > section,
html.studio-density-sm:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-page > section.flex,
html.studio-density-lg body.fi-studio-viewer main.fi-main,
html.studio-density-lg body.fi-studio-viewer .fi-main,
html.studio-density-lg body.fi-studio-viewer .fi-page > section {
  padding: 0 !important;
  gap: 0 !important;
  row-gap: 0 !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-header,
html.studio-density-sm:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-header {
  align-items: center;
  margin: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.85);
}

html.studio-density-md:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-header-heading,
html.studio-density-sm:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-header-heading {
  font-weight: 600 !important;
}

html.studio-density-md:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-header-subheading,
html.studio-density-sm:not(:has(.fi-simple-layout)) body.fi-studio-viewer .fi-header-subheading {
  display: none !important;
}

.object-viewer-frame {
  display: block;
  width: 100%;
  min-height: calc(100dvh - var(--studio-chrome-h));
  height: calc(100dvh - var(--studio-chrome-h));
  background: #111;
  border: 0;
}

body.fi-studio-viewer .object-viewer-wrap {
  margin: 0;
}

.fi-sidebar-nav {
  scrollbar-width: thin;
}