/* Extracted from index.html style block 1 */

  /* Shell-only layout; iframe keeps your bindings/XML/JS intact. */
  html, body { height: 100%; }
  .layout-wrapper, .layout-inner, .layout-container { height: 100%; }

  /* Make content fill the viewport under the navbar. */
  .layout-container { display: flex; flex-direction: column; }
  .layout-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .layout-content > .container-fluid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0 !important; }
  .layout-content .card { flex: 1 1 auto; min-height: 0; }
  .layout-content .card-body { flex: 1 1 auto; min-height: 0; display: flex; padding: 0; }

  /* Iframe fills the remaining space. */
  #df-app { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; }

  /* Reduce vertical padding around the host. */
  .container-p-y { padding-top: 0.75rem !important; padding-bottom: 0 !important; }

  /* Top menubar (Paint-like) */
  .df-menubar .nav-link {
    padding: .55rem .55rem;
    font-weight: 500;
    color: #4e5155;
    border-radius: .375rem;
    line-height: 1.1;
  }
  .df-menubar .nav-link:hover {
    background: rgba(113, 106, 202, 0.08);
    color: #4e5155;
  }
  .df-menubar .dropdown-menu {
    min-width: 240px;
  }
  .df-toolbar .nav-link {
    padding: .55rem .35rem;
  }
  .df-toolbar .nav-link:hover {
    background: rgba(113, 106, 202, 0.08);
    border-radius: .375rem;
  }



  /* New top pill layout (layout-only) */
  #layout-navbar{
    background: transparent !important;
    box-shadow: none !important;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Outer pill */
  #layout-navbar .df-topbar-pill{
    width: 100%;
    background: #f3f4f7;
    border: 1px solid rgba(16, 24, 40, 0.06);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: visible;
  }

  #layout-navbar .df-sidebar-toggle{
    width: 32px;
    height: 32px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
  }
  #layout-navbar .df-sidebar-toggle:hover{
    background: rgba(16, 24, 40, 0.06);
  }

  /* Left mini pill (File/Edit/View) */
  #layout-navbar .df-menu-pill{
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 8px;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(16, 24, 40, 0.06);
    background: #fff;
  }
  #layout-navbar .df-menubar .nav-item{
    display: flex;
    align-items: center;
  }
  #layout-navbar .df-menubar .nav-link{
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    color: rgba(17, 24, 39, 0.92);
  }
  #layout-navbar .df-menubar .nav-link:hover{
    background: rgba(16, 24, 40, 0.06);
  }
  #layout-navbar .df-menubar .dropdown-toggle::after{
    margin-left: 4px;
    vertical-align: middle;
  }

  /* Grey icon tray */
  #layout-navbar .df-icon-tray{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(16, 24, 40, 0.06);
    background: #fff;
  }
  #layout-navbar .df-icon-tray .df-toolbar{
    display: flex;
    align-items: center;
    gap: 2px;
  }
  #layout-navbar .df-icon-tray .nav-link{
    width: 32px;
    height: 32px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }
  #layout-navbar .df-icon-tray .nav-link:hover{
    background: rgba(16, 24, 40, 0.06);
  }

  /* Right group */

  /* Hide undo/redo in header tray (available via menus) */
  #layout-navbar [data-df-click="undoBtn"],
  #layout-navbar [data-df-click="redoBtn"]{
    display: none !important;
  }
  #layout-navbar .df-topbar-right{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 16px; /* inset from right edge */
  }
  #layout-navbar #df-toggle-props.nav-link{
    width: 32px;
    height: 32px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }
  #layout-navbar #df-toggle-props.nav-link:hover{
    background: rgba(16, 24, 40, 0.06);
  }

  /* Make icon sizing consistent */
  #layout-navbar .navbar-icon{
    font-size: 16px;
    color: rgba(17, 24, 39, 0.92);
  }

  /* Search: no inner box (Word-like inline) */
  #layout-navbar .navbar-search-box{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  #layout-navbar .navbar-search-box .navbar-search-input{
    display: inline-flex;
    align-items: center;
  }
  #layout-navbar .navbar-search-box .form-control{
    height: 34px;
    padding: 0;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
    min-width: 220px;
  }
  #layout-navbar .navbar-search-box .form-control:focus{
    outline: none;
  }


/* ===== Apple shell skin ===== */
:root{
  --df-apple-bg:#f5f5f7;
  --df-apple-card:rgba(255,255,255,.78);
  --df-apple-card-solid:#ffffff;
  --df-apple-text:#1d1d1f;
  --df-apple-muted:#6e6e73;
  --df-apple-border:rgba(60,60,67,.20);
  --df-apple-border-strong:rgba(60,60,67,.30);
  --df-apple-shadow:0 10px 30px rgba(0,0,0,.08);
  --df-apple-shadow-soft:0 6px 18px rgba(0,0,0,.06);
  --df-apple-accent:#007aff;
  --df-apple-accent-soft:rgba(0,122,255,.14);
}

html,body{
  background:var(--df-apple-bg) !important;
  color:var(--df-apple-text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Top pill: smaller + frosted */
#layout-navbar{
  padding-top:10px;
  padding-bottom:10px;
}
#layout-navbar .df-topbar-pill{
  background:var(--df-apple-card);
  border:1px solid var(--df-apple-border);
  border-radius:18px;
  box-shadow:var(--df-apple-shadow-soft);
  padding:6px 10px;
  backdrop-filter:saturate(1.8) blur(14px);
  -webkit-backdrop-filter:saturate(1.8) blur(14px);
}

#layout-navbar .df-menu-pill{
  background:var(--df-apple-card-solid);
  border:1px solid var(--df-apple-border);
  border-radius:14px;
  padding:6px 10px;
}

#layout-navbar .df-menubar .nav-link{
  color:var(--df-apple-text);
  font-weight:500;
  letter-spacing:.01em;
}
#layout-navbar .df-menubar .nav-link:hover{
  background:rgba(60,60,67,.08);
}

/* Icon tray */
#layout-navbar .df-icon-tray{
  background:var(--df-apple-card-solid);
  border:1px solid var(--df-apple-border);
  border-radius:14px;
  padding:4px;
}
#layout-navbar .df-icon-tray .nav-link{
  border-radius:10px;
}

/* Right controls */
#layout-navbar .navbar-icon{
  color:var(--df-apple-text);
  opacity:.85;
}
#layout-navbar .navbar-search-box .form-control{
  color:var(--df-apple-text);
}
#layout-navbar .navbar-search-box .form-control::placeholder{
  color:var(--df-apple-muted);
  opacity:.9;
}
/* ===== /Apple shell skin ===== */

/* macOS: hide/show full sidenav (Option A) */
:root{
  --df-sidenav-width: 15.625rem;
  --df-sidenav-motion: 280ms;
  --df-sidenav-ease: cubic-bezier(.2,.8,.2,1);
}
#layout-sidenav{
  width: var(--df-sidenav-width);
  flex: 0 0 var(--df-sidenav-width);
  transition:
    width var(--df-sidenav-motion) var(--df-sidenav-ease),
    transform var(--df-sidenav-motion) var(--df-sidenav-ease);
  will-change: width, transform;
}
html.df-sidenav-hidden #layout-sidenav{
  width: 0 !important;
  flex-basis: 0 !important;
  transform: translateX(calc(-1 * var(--df-sidenav-width)));
  overflow: hidden;
}
html.df-sidenav-hidden .layout-container{
  padding-left: 0 !important;
}
html.df-sidenav-hidden.layout-reversed .layout-container{
  padding-right: 0 !important;
  padding-left: 0 !important;
}
/* Extracted from index.html style block 2 */

/* Typeahead dropdown for binding search (shell only). */
.navbar-search-box{position:relative;}
.df-typeahead{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:420px;
  max-width:min(620px, 92vw);
  max-height:340px;
  overflow:auto;
  padding:0.35rem 0;
  border-radius:0.375rem;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  z-index:1050;
}
.df-typeahead.show{display:block;}
.df-typeahead .dropdown-item{display:flex;flex-direction:column;gap:.1rem;white-space:normal;}
.df-typeahead .df-ta-label{font-weight:600;}
.df-typeahead .df-ta-meta{font-size:.75rem;opacity:.7;}
.df-typeahead .dropdown-item.active,
.df-typeahead .dropdown-item:active{background:rgba(113,106,202,.15);color:inherit;}
/* Extracted from index.html style block 3 (id="df-shell-style") */

/* Shell fixes: ensure navbar dropdown overlays content and doesn't get clipped */
.layout-navbar, .layout-navbar .navbar-collapse { overflow: visible !important; }
.layout-navbar .dropdown-menu { z-index: 2000 !important; }
/* Extracted from index.html style block 4 (id="df-macos-full-shell") */

/* ===== macOS full skin (layout-only) ===== */
:root{
  --df-macos-bg: #f5f5f7;
  --df-macos-glass: rgba(255,255,255,.72);
  --df-macos-glass-strong: rgba(255,255,255,.86);
  --df-macos-border: rgba(60,60,67,.22);
  --df-macos-border-soft: rgba(60,60,67,.14);
  --df-macos-text: #1d1d1f;
  --df-macos-muted: #6e6e73;
  --df-macos-shadow: 0 12px 34px rgba(0,0,0,.10);
  --df-macos-shadow-soft: 0 8px 22px rgba(0,0,0,.08);
  --df-macos-radius: 18px;
  --df-macos-radius-sm: 14px;
  --df-macos-accent: #007aff;
}

html, body{
  background: var(--df-macos-bg) !important;
  color: var(--df-macos-text) !important;
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Top shell */
#layout-navbar{ padding-top: 10px; padding-bottom: 10px; }

#layout-navbar .df-topbar-pill{
  background: rgba(245,245,247,.78) !important;
  border: 1px solid var(--df-macos-border) !important;
  border-radius: var(--df-macos-radius) !important;
  box-shadow: var(--df-macos-shadow-soft) !important;
  backdrop-filter: saturate(1.8) blur(18px);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
}

#layout-navbar .df-menu-pill{
  background: var(--df-macos-glass-strong) !important;
  border: 1px solid var(--df-macos-border) !important;
  border-radius: var(--df-macos-radius-sm) !important;
}


#layout-navbar .df-sidebar-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius: var(--df-macos-radius-sm);
  border: 1px solid var(--df-macos-border);
  background: var(--df-macos-glass-strong);
  color: var(--df-macos-text);
  box-shadow: none;
  backdrop-filter: saturate(1.8) blur(18px);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
  text-decoration:none !important;
}
#layout-navbar .df-sidebar-toggle:hover{
  background: rgba(60,60,67,.06) !important;
  border-color: rgba(60,60,67,.28) !important;
}
#layout-navbar .df-sidebar-toggle:active{ transform: scale(.96); }
#layout-navbar .df-sidebar-toggle i{ font-size: 18px; }
#layout-navbar .df-menubar .nav-link{
  font-weight: 520 !important;
  letter-spacing: .01em;
  color: var(--df-macos-text) !important;
}
#layout-navbar .df-menubar .nav-link:hover{
  background: rgba(60,60,67,.08) !important;
}

/* Dropdowns */
#layout-navbar .dropdown-menu{
  background: var(--df-macos-glass) !important;
  border: 1px solid var(--df-macos-border) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: var(--df-macos-shadow) !important;
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
}
#layout-navbar .dropdown-item{
  border-radius: 10px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: var(--df-macos-text) !important;
}
#layout-navbar .dropdown-item > i{
  width: 16px !important;
  min-width: 16px !important;
  margin-right: 10px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
#layout-navbar .dropdown-item:hover,
#layout-navbar .dropdown-item:focus{
  background: rgba(60,60,67,.10) !important;
  color: var(--df-macos-text) !important;
}
#layout-navbar .dropdown-divider{
  border-top: 1px solid var(--df-macos-border-soft) !important;
  margin: 6px 8px !important;
}

#layout-navbar .navbar-search-box .form-control{
  color: var(--df-macos-text) !important;
}
#layout-navbar .navbar-search-box .form-control::placeholder{
  color: var(--df-macos-muted) !important;
  opacity: .9;
}

/* Small icon polish */
#layout-navbar .navbar-icon{
  opacity: .85;
}
#layout-navbar .navbar-icon:hover{ opacity: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* Optional macOS dark (automatic only) */
@media (prefers-color-scheme: dark){
  :root{
    --df-macos-bg: #0f1115;
    --df-macos-glass: rgba(28,28,30,.72);
    --df-macos-glass-strong: rgba(28,28,30,.86);
    --df-macos-border: rgba(235,235,245,.18);
    --df-macos-border-soft: rgba(235,235,245,.12);
    --df-macos-text: #f5f5f7;
    --df-macos-muted: rgba(235,235,245,.60);
  }
  #layout-navbar .df-topbar-pill{ background: rgba(28,28,30,.72) !important; }
  #layout-navbar .dropdown-menu{ background: rgba(28,28,30,.78) !important; }
  #layout-navbar .dropdown-item:hover{ background: rgba(235,235,245,.10) !important; }
}

/* ===== macOS sidebar (layout-only) ===== */
#layout-sidenav.layout-sidenav{
  background: var(--df-macos-glass-strong) !important;
  border-right: 1px solid var(--df-macos-border) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(1.8) blur(18px);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
}
#layout-sidenav .app-brand.demo{
  background: transparent !important;
  border-bottom: 1px solid var(--df-macos-border-soft) !important;
}
#layout-sidenav .app-brand-text.demo,
#layout-sidenav .sidenav-text{
  color: var(--df-macos-text) !important;
  font-weight: 650 !important;
  letter-spacing: .01em;
}
#layout-sidenav .layout-sidenav-toggle{
  color: var(--df-macos-muted) !important;
  opacity: .9;
}
#layout-sidenav .sidenav-divider{
  background: var(--df-macos-border-soft) !important;
  height: 1px !important;
  margin: 10px 16px !important;
}
#layout-sidenav .sidenav-header{
  color: var(--df-macos-muted) !important;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 11px !important;
  padding: 14px 16px 6px !important;
}
#layout-sidenav .sidenav-inner{
  padding-top: 8px !important;
}

/* Left bindings list: keep PerfectScrollbar, but make its rail/thumb always visible. */
#layout-sidenav .sidenav-inner{
  max-height: calc(100vh - 112px);
  overflow-x: hidden;
}
#layout-sidenav .sidenav-inner.ps{
  overflow: hidden !important;
}
#layout-sidenav .sidenav-inner > .ps__rail-x{
  display: none !important;
}
#layout-sidenav .sidenav-inner > .ps__rail-y{
  display: block !important;
  opacity: 1 !important;
  right: 3px !important;
  width: 8px !important;
  background: transparent !important;
}
#layout-sidenav .sidenav-inner > .ps__rail-y > .ps__thumb-y{
  right: 1px !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: rgba(60,60,67,.28) !important;
}
#layout-sidenav .sidenav-inner:hover > .ps__rail-y > .ps__thumb-y,
#layout-sidenav .sidenav-inner > .ps__rail-y:hover > .ps__thumb-y,
#layout-sidenav .sidenav-inner > .ps__rail-y.ps--clicking > .ps__thumb-y{
  width: 4px !important;
  background: rgba(60,60,67,.42) !important;
}
#layout-sidenav .sidenav-link{
  color: var(--df-macos-text) !important;
  border-radius: 12px !important;
  margin: 2px 10px !important;
  padding: 8px 12px !important;
  transition: background .15s ease, color .15s ease;
}
#layout-sidenav .sidenav-link:hover{
  background: rgba(60,60,67,.08) !important;
}
#layout-sidenav .sidenav-item.active > .sidenav-link{
  background: rgba(60,60,67,.12) !important; /* subtle grey highlight */
  font-weight: 650 !important;
}
#layout-sidenav .sidenav-icon{
  color: rgba(60,60,67,.75) !important;
  font-size: 18px !important;
  width: 20px;
  margin-right: 10px !important;
  opacity: .95;
}
#layout-sidenav .sidenav-item.active .sidenav-icon{
  color: rgba(29,29,31,.90) !important;
}
#layout-sidenav .sidenav-menu .sidenav-link{
  padding-left: 40px !important;
  font-size: 13px !important;
  margin-left: 6px !important;
}
#layout-sidenav .sidenav-menu .sidenav-link:hover{
  background: rgba(60,60,67,.06) !important;
}



@media (prefers-color-scheme: dark){
  #layout-sidenav .sidenav-link:hover{ background: rgba(235,235,245,.08) !important; }
  #layout-sidenav .sidenav-item.active > .sidenav-link{ background: rgba(235,235,245,.12) !important; }
  #layout-sidenav .sidenav-icon{ color: rgba(235,235,245,.62) !important; }
  #layout-sidenav .sidenav-item.active .sidenav-icon{ color: rgba(235,235,245,.92) !important; }
}
/* Extracted from index.html style block 5 (id="df-work-sidebar-spacing-fix") */

#layout-sidenav .sidenav-link,
.df-mock-sidebar .sidenav-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  position:relative;
}
#layout-sidenav .sidenav-toggle,
.df-mock-sidebar .sidenav-toggle{
  padding-right:34px !important;
}
#layout-sidenav .sidenav-link > div,
.df-mock-sidebar .sidenav-link > div{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding-right:2px;
}
#layout-sidenav .sidenav-toggle::after,
.df-mock-sidebar .sidenav-toggle::after{
  right:14px !important;
  pointer-events:none;
}
#layout-sidenav .sidenav-icon,
.df-mock-sidebar .sidenav-icon{
  flex:0 0 20px;
  min-width:20px;
}
/* Extracted from index.html style block 6 (id="df-sidebar-nested-icon-removal") */

#layout-sidenav .sidenav-menu .sidenav-icon,
.df-mock-sidebar .sidenav-menu .sidenav-icon{
  display:none !important;
}
#layout-sidenav .sidenav-menu .sidenav-link,
.df-mock-sidebar .sidenav-menu .sidenav-link{
  gap:0 !important;
}
/* Extracted from index.html style block 7 (id="df-sidebar-top-header-text-column-alignment-fix") */

#layout-sidenav .sidenav-link[data-depth="0"],
.df-mock-sidebar .sidenav-link[data-depth="0"]{
  padding-left:8px !important;
}

#layout-sidenav .sidenav-link[data-depth="0"] > .sidenav-icon,
.df-mock-sidebar .sidenav-link[data-depth="0"] > .sidenav-icon{
  position:static !important;
  margin-right:10px !important;
  width:20px !important;
  min-width:20px !important;
  transform:none !important;
  left:auto !important;
  top:auto !important;
}


#layout-sidenav .sidenav-inner > .sidenav-item > .sidenav-link,
.df-mock-sidebar .sidenav-inner > .sidenav-item > .sidenav-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:36px;
  padding-left:12px !important;
}

#layout-sidenav .sidenav-inner > .sidenav-item > .sidenav-link > .sidenav-icon,
.df-mock-sidebar .sidenav-inner > .sidenav-item > .sidenav-link > .sidenav-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px !important;
  min-width:18px !important;
  margin-right:0 !important;
  font-size:15px !important;
  color: rgba(60,60,67,.72) !important;
}

#layout-sidenav .sidenav-inner > .sidenav-item > .sidenav-link > div,
.df-mock-sidebar .sidenav-inner > .sidenav-item > .sidenav-link > div{
  flex:1 1 auto;
}
/* Extracted from index.html style block 8 (id="df-mock-style") */

.layout-content .card-body{ position:relative; }

.df-mock-overlay{
  position:absolute;
  inset:0;
  z-index:1400;
  display:none;
}
.df-mock-overlay.open{ display:block; }
.df-mock-backdrop{
  position:absolute;
  inset:0;
  background:rgba(245,246,248,.58);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.df-mock-modal{
  position:absolute;
  left:50%;
  top:50%;
  width:min(1180px, calc(100% - 96px));
  height:min(744px, calc(100% - 84px));
  transform:translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(16,24,40,.08);
  border-radius:20px;
  box-shadow:0 18px 40px rgba(16,24,40,.16);
  overflow:hidden;
  color:var(--df-macos-text);
  font-family:inherit;
  font-size:13px;
  line-height:1.4;
}
.df-mock-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 20px 10px;
  border-bottom:1px solid rgba(16,24,40,.08);
  background:rgba(255,255,255,.94);
}
.df-mock-title{
  margin:0;
  font-size:14px;
  line-height:1.25;
  font-weight:650;
  color:#111827;
  letter-spacing:-.01em;
}
.df-mock-subtitle{
  margin-top:3px;
  color:#6b7280;
  font-size:11px;
  line-height:1.4;
  font-weight:400;
}
.df-mock-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.df-mock-actions .ghost-btn{
  border-radius:13px;
  min-height:34px;
  padding:0 15px;
  font-weight:600;
  font-size:12px;
  line-height:1;
  box-shadow:none;
}
.df-mock-actions .ghost-btn.primary{
  background:#0f172a;
  color:#fff;
  border-color:#0f172a;
}
.df-mock-searchbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 20px;
  border-bottom:1px solid rgba(16,24,40,.08);
  background:#fff;
}
.df-mock-search{
  max-width:420px;
  width:100%;
  height:38px;
  border-radius:13px;
  border:1px solid rgba(16,24,40,.10);
  background:#fff;
  padding:0 14px;
  font-size:12.5px;
  outline:none;
}
.df-mock-search:focus{
  border-color:rgba(113,106,202,.55);
  box-shadow:0 0 0 4px rgba(113,106,202,.12);
}
.df-mock-status{
  color:#6b7280;
  font-size:12px;
  font-weight:600;
}
.df-mock-body{
  min-height:0;
  flex:1 1 auto;
  display:grid;
  grid-template-columns:clamp(240px, 21vw, 270px) minmax(0,1fr);
  gap:0;
  padding:0;
  align-items:stretch;
  background:#f3f4f6;
}
.df-mock-sidebar{
  min-width:0;
  min-height:0;
  height:100%;
  border:0;
  border-right:1px solid rgba(60,60,67,.14);
  border-radius:0;
  background:rgba(255,255,255,.76);
  overflow:auto;
  padding:10px 0 18px;
  box-shadow:none;
  backdrop-filter:saturate(1.8) blur(14px);
  -webkit-backdrop-filter:saturate(1.8) blur(14px);
}
.df-mock-sidebar .sidenav,
.df-mock-sidebar .sidenav-inner{
  background:transparent !important;
}
.df-mock-sidebar .sidenav-inner{
  padding:0 !important;
  margin:0 !important;
}
.df-mock-sidebar .sidenav-header{
  display:none !important;
}
.df-mock-sidebar .sidenav-item{
  list-style:none;
}
.df-mock-sidebar .sidenav-item[hidden]{
  display:none !important;
}
.df-mock-sidebar .sidenav-link{
  color:var(--df-macos-text) !important;
  border-radius:12px !important;
  margin:2px 10px !important;
  padding:10px 12px !important;
  min-height:0;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none !important;
  transition:background .15s ease, color .15s ease;
  position:relative;
}
.df-mock-sidebar .sidenav-toggle{
  display:flex !important;
  align-items:center;
  position:relative;
  padding-right:28px !important;
}
.df-mock-sidebar .sidenav-toggle > div{
  min-width:0;
  flex:1 1 auto;
}
.df-mock-sidebar .sidenav-toggle::after{
  content:"<" !important;
  position:absolute;
  right:12px;
  top:50%;
  width:auto;
  min-width:auto;
  height:auto;
  margin:0;
  display:block;
  text-align:center;
  font-size:12px;
  font-weight:600;
  font-family:inherit;
  line-height:1;
  border:0 !important;
  transform:translateY(-50%) rotate(0deg) !important;
  transform-origin:center center;
  transition:transform .16s ease, opacity .16s ease;
  opacity:.72;
}
.df-mock-sidebar .sidenav-item.open:not(.sidenav-item-closing) > .sidenav-toggle::after{
  content:"<" !important;
  border:0 !important;
  transform:translateY(-50%) rotate(-90deg) !important;
}
.df-mock-sidebar .sidenav-link:hover{
  background:rgba(60,60,67,.08) !important;
}
.df-mock-sidebar .sidenav-link > div{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1 1 auto;
}
.df-mock-sidebar .sidenav-link[data-depth="0"]{
  font-weight:650 !important;
  font-size:13px !important;
}
.df-mock-sidebar .sidenav-icon{
  color:rgba(60,60,67,.75) !important;
  font-size:18px !important;
  width:20px;
  min-width:20px;
  margin-right:10px !important;
  opacity:.95;
}
.df-mock-sidebar .sidenav-item.active > .sidenav-link,
.df-mock-sidebar .sidenav-link.df-mock-active{
  background:rgba(60,60,67,.12) !important;
  box-shadow:none;
  color:#111827 !important;
  font-weight:650 !important;
}
.df-mock-sidebar .sidenav-link.df-mock-active::before{
  content:none;
}
.df-mock-sidebar .sidenav-item.active > .sidenav-link .sidenav-icon{
  color:rgba(29,29,31,.90) !important;
}
.df-mock-sidebar .sidenav-item:not(.open) > .sidenav-menu{
  display:none;
}
.df-mock-sidebar .sidenav-menu{
  margin:0 !important;
  padding:0 !important;
}
.df-mock-sidebar .sidenav-menu .sidenav-link{
  padding-left:40px !important;
  font-size:13px !important;
  margin-left:6px !important;
}
.df-mock-sidebar .sidenav-menu .sidenav-link:hover{
  background:rgba(60,60,67,.06) !important;
}
.df-mock-sidebar .sidenav-link[data-depth="2"]{
  padding-left:58px !important;
}
.df-mock-sidebar .sidenav-link[data-depth="3"]{
  padding-left:76px !important;
}
.df-mock-sidebar .sidenav-link[data-depth="4"]{
  padding-left:94px !important;
}
.df-mock-editor-wrap{
  min-width:0;
  min-height:0;
  overflow:auto;
  background:transparent;
  padding:16px 18px 18px;
}
.df-mock-editor{
  background:#fff;
  border:1px solid rgba(16,24,40,.08);
  border-radius:16px;
  box-shadow:0 8px 20px rgba(16,24,40,.05);
  overflow:hidden;
  min-height:100%;
}
.df-mock-editor-head{
  padding:15px 18px 11px;
  border-bottom:1px solid rgba(16,24,40,.08);
}
.df-mock-editor-title{
  margin:0;
  font-size:14px;
  line-height:1.25;
  font-weight:650;
  color:#111827;
  letter-spacing:-.01em;
}
.df-mock-editor-path{
  margin-top:4px;
  color:#6b7280;
  font-size:11px;
  line-height:1.35;
}
.df-mock-editor-body{
  padding:15px 18px 18px;
}
.df-mock-callout{
  padding:10px 12px;
  border:1px solid rgba(59,130,246,.18);
  background:#eff6ff;
  color:#264680;
  border-radius:12px;
  margin-bottom:14px;
  font-size:12px;
}
.df-mock-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(220px,.9fr);
  gap:16px;
}
.df-mock-label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:#4b5563;
  margin-bottom:5px;
}
.df-mock-field,
.df-mock-textarea,
.df-mock-select{
  width:100%;
  border:1px solid rgba(16,24,40,.12);
  border-radius:13px;
  background:#fff;
  color:#111827;
  font-size:13px;
  box-shadow:none;
  outline:none;
}
.df-mock-field,
.df-mock-select{
  min-height:38px;
  padding:0 12px;
}
.df-mock-textarea{
  min-height:168px;
  resize:vertical;
  padding:10px 12px;
  line-height:1.4;
}
.df-mock-field:focus,
.df-mock-textarea:focus,
.df-mock-select:focus{
  border-color:rgba(113,106,202,.55);
  box-shadow:0 0 0 4px rgba(113,106,202,.12);
}
.df-mock-help{
  margin-top:5px;
  color:#6b7280;
  font-size:11px;
  line-height:1.4;
}
.df-mock-meta{
  display:grid;
  gap:8px;
  align-content:start;
}
.df-mock-meta-row{
  color:#4b5563;
  font-size:12px;
  line-height:1.4;
}
.df-mock-meta-row strong{
  color:#374151;
  font-weight:700;
}
.df-mock-empty{
  padding:24px 20px;
  color:#6b7280;
  font-size:12.5px;
}
.df-mock-sidebar::-webkit-scrollbar,
.df-mock-editor-wrap::-webkit-scrollbar{
  width:8px;
  height:8px;
}
.df-mock-sidebar::-webkit-scrollbar-thumb,
.df-mock-editor-wrap::-webkit-scrollbar-thumb{
  background:rgba(107,114,128,.35);
  border-radius:999px;
}
.df-mock-sidebar::-webkit-scrollbar-track,
.df-mock-editor-wrap::-webkit-scrollbar-track{
  background:transparent;
}
.df-mock-editor--minimal{
  max-width:760px;
  font-size:13px;
}
.df-mock-editor--minimal .df-mock-editor-head{
  padding:14px 16px 10px;
}
.df-mock-editor--minimal .df-mock-editor-body{
  padding:14px 16px 16px;
}
.df-mock-min-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.df-mock-min-actions .ghost-btn{
  min-height:32px;
  padding:0 13px;
  border-radius:11px;
  font-size:12px;
  box-shadow:none;
}
.df-mock-option-list{
  display:grid;
  gap:7px;
}
.df-mock-option-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.df-mock-option-input{
  width:100%;
  min-height:36px;
  border:1px solid rgba(16,24,40,.12);
  border-radius:11px;
  background:#fff;
  color:#111827;
  font-size:13px;
  padding:0 12px;
  outline:none;
}
.df-mock-option-input:focus{
  border-color:rgba(113,106,202,.55);
  box-shadow:0 0 0 4px rgba(113,106,202,.12);
}
.df-mock-remove-btn{
  width:32px;
  min-width:32px;
  height:32px;
  border:1px solid rgba(16,24,40,.12);
  border-radius:10px;
  background:#fff;
  color:#6b7280;
  font-size:16px;
  line-height:1;
}
.df-mock-remove-btn:hover{
  color:#111827;
  background:#f8fafc;
}
.df-mock-check-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#111827;
  font-weight:600;
}
.df-mock-check-row input{
  width:16px;
  height:16px;
}

@media (max-width: 1200px){
  .df-mock-modal{
    width:calc(100% - 48px);
    height:calc(100% - 40px);
  }
  .df-mock-body{
    grid-template-columns:236px minmax(0,1fr);
  }
}
@media (max-width: 960px){
  .df-mock-modal{
    width:calc(100% - 20px);
    height:calc(100% - 20px);
    border-radius:18px;
  }
  .df-mock-header{
    padding:13px 14px 10px;
  }
  .df-mock-searchbar{
    padding:10px 14px;
  }
  .df-mock-body{
    grid-template-columns:1fr;
  }
  .df-mock-sidebar{
    height:auto;
    max-height:34vh;
    border-right:none;
    border-bottom:1px solid rgba(16,24,40,.08);
  }
  .df-mock-editor-wrap{
    padding:13px 14px 14px;
  }
  .df-mock-grid{
    grid-template-columns:1fr;
  }
}
/* Extracted from index.html style block 9 (id="df-shell-size-only-10pct-pass") */

  /* Size-only pass for shell chrome. */
  html{ font-size:90%; }

  #layout-navbar{
    padding-top:6px !important;
    padding-bottom:6px !important;
  }
  #layout-navbar .df-topbar-pill{
    border-radius:14px !important;
    padding:5px 9px !important;
    gap:9px !important;
  }
  #layout-navbar .df-menu-pill{
    padding:5px 9px !important;
    border-radius:12px !important;
    gap:3px !important;
  }
  #layout-navbar .df-menubar .nav-link{
    padding:.3rem .4rem !important;
    font-size:12px !important;
  }
  #layout-navbar .navbar-icon{
    font-size:15px !important;
  }
  #layout-navbar .navbar-search-box{
    gap:7px !important;
  }
  #layout-navbar .navbar-search-box .form-control{
    height:30px !important;
    min-width:200px !important;
    font-size:12px !important;
  }

  #layout-sidenav .app-brand.demo{
    min-height:54px !important;
  }
  #layout-sidenav .app-brand-text.demo{
    font-size:1.35rem !important;
  }
  .sidenav-inner{
    padding-top:6px !important;
  }
  #layout-sidenav .sidenav-link,
  .df-mock-sidebar .sidenav-link{
    gap:9px !important;
    margin:2px 9px !important;
    padding:8px 10px !important;
    border-radius:10px !important;
    font-size:12px !important;
  }
  #layout-sidenav .sidenav-toggle,
  .df-mock-sidebar .sidenav-toggle{
    padding-right:30px !important;
  }
  #layout-sidenav .sidenav-icon,
  .df-mock-sidebar .sidenav-icon{
    font-size:14px !important;
  }
  #layout-sidenav .sidenav-text,
  .df-mock-sidebar .sidenav-text{
    font-size:12px !important;
  }
  #layout-sidenav .sidenav-divider{
    margin:6px 12px !important;
  }
  #layout-sidenav > .sidenav-inner > .sidenav-item > .sidenav-link,
  .df-mock-sidebar > .sidenav-inner > .sidenav-item > .sidenav-link{
    font-size:13px !important;
    font-weight:700 !important;
  }
  #layout-sidenav .sidenav-menu > .sidenav-item > .sidenav-link.sidenav-toggle,
  .df-mock-sidebar .sidenav-menu > .sidenav-item > .sidenav-link.sidenav-toggle{
    font-size:12px !important;
    font-weight:600 !important;
  }
  #layout-sidenav .sidenav-menu > .sidenav-item > .sidenav-link:not(.sidenav-toggle),
  .df-mock-sidebar .sidenav-menu > .sidenav-item > .sidenav-link:not(.sidenav-toggle){
    font-size:12px !important;
    font-weight:400 !important;
  }
/* Extracted from index.html style block 10 (id="df-sidebar-toggle-left-layout") */

#layout-sidenav .sidenav-link,
.df-mock-sidebar .sidenav-link{
  padding-left: 30px !important;
  padding-right: 10px !important;
}

#layout-sidenav .sidenav-toggle::after,
.df-mock-sidebar .sidenav-toggle::after{
  left: 12px !important;
  right: auto !important;
  width: 0.42em !important;
  min-width: 0 !important;
  text-align: initial !important;
  border: 1px solid currentColor !important;
  border-top: 0 !important;
  border-left: 0 !important;
  transform: translateY(-50%) rotate(-45deg) !important;
  pointer-events: none;
}

#layout-sidenav .sidenav-item.open:not(.sidenav-item-closing) > .sidenav-toggle::after,
.df-mock-sidebar .sidenav-item.open:not(.sidenav-item-closing) > .sidenav-toggle::after{
  transform: translateY(-50%) rotate(45deg) !important;
}

#layout-sidenav .sidenav-link > div,
.df-mock-sidebar .sidenav-link > div{
  padding-right: 0 !important;
}
/* Extracted from index.html style block 11 (id="df-sidebar-muted-hierarchy-tone") */

#layout-sidenav .sidenav-link,
.df-mock-sidebar .sidenav-link{
  color: var(--df-macos-muted) !important;
}

#layout-sidenav .sidenav-link > div,
.df-mock-sidebar .sidenav-link > div{
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  line-height: 1.22 !important;
  letter-spacing: .01em !important;
  text-rendering: optimizeLegibility;
}

#layout-sidenav .sidenav-inner > .sidenav-item > .sidenav-link > div,
.df-mock-sidebar > .sidenav-item > .sidenav-link > div,
.df-mock-sidebar .sidenav-root > .sidenav-item > .sidenav-link > div{
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(60,60,67,.88) !important;
}

#layout-sidenav .sidenav-inner > .sidenav-item > .sidenav-menu > .sidenav-item > .sidenav-link > div,
.df-mock-sidebar > .sidenav-item > .sidenav-menu > .sidenav-item > .sidenav-link > div,
.df-mock-sidebar .sidenav-root > .sidenav-item > .sidenav-menu > .sidenav-item > .sidenav-link > div{
  font-size: 11.6px !important;
  font-weight: 480 !important;
  color: rgba(60,60,67,.80) !important;
}

#layout-sidenav .sidenav-menu .sidenav-menu .sidenav-link > div,
.df-mock-sidebar .sidenav-menu .sidenav-menu .sidenav-link > div{
  font-size: 11.2px !important;
  font-weight: 400 !important;
  color: rgba(60,60,67,.74) !important;
}

#layout-sidenav .sidenav-icon,
.df-mock-sidebar .sidenav-icon,
#layout-sidenav .sidenav-toggle::after,
.df-mock-sidebar .sidenav-toggle::after{
  color: rgba(60,60,67,.64) !important;
}

#layout-sidenav .sidenav-link:hover,
.df-mock-sidebar .sidenav-link:hover{
  color: rgba(60,60,67,.88) !important;
}

#layout-sidenav .sidenav-link:hover > div,
.df-mock-sidebar .sidenav-link:hover > div{
  color: rgba(60,60,67,.88) !important;
}

#layout-sidenav .sidenav-item.active > .sidenav-link,
.df-mock-sidebar .sidenav-item.active > .sidenav-link,
.df-mock-sidebar .sidenav-link.df-mock-active{
  color: rgba(60,60,67,.88) !important;
}

#layout-sidenav .sidenav-item.active > .sidenav-link > div,
.df-mock-sidebar .sidenav-item.active > .sidenav-link > div,
.df-mock-sidebar .sidenav-link.df-mock-active > div{
  color: rgba(60,60,67,.88) !important;
  font-weight: 600 !important;
}

#layout-sidenav .sidenav-item.active .sidenav-icon,
.df-mock-sidebar .sidenav-item.active .sidenav-icon,
#layout-sidenav .sidenav-item.active > .sidenav-toggle::after,
.df-mock-sidebar .sidenav-item.active > .sidenav-toggle::after{
  color: rgba(60,60,67,.88) !important;
  opacity: 1 !important;
}
/* Sidebar soft-surface pass: round the exposed edge without changing behavior. */
#layout-sidenav.layout-sidenav,
#layout-sidenav{
  border-top-right-radius: 24px !important;
  border-bottom-right-radius: 24px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

#layout-sidenav .app-brand.demo{
  border-top-right-radius: 24px !important;
}

#layout-sidenav .sidenav-inner{
  padding-bottom: 12px !important;
}
/* Integrated shell pass: one parent surface, tighter hierarchy, less detached chrome. */
:root{
  --df-shell-outer-bg: #ebecef;
  --df-shell-parent-surface: rgba(255,255,255,.76);
  --df-shell-parent-border: rgba(60,60,67,.10);
  --df-shell-parent-shadow: 0 18px 54px rgba(15,23,42,.08);
}

html,
body{
  background: var(--df-shell-outer-bg) !important;
}

.layout-wrapper{
  background: transparent !important;
}

.layout-inner{
  margin: 12px !important;
  height: calc(100vh - 24px) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background: var(--df-shell-parent-surface) !important;
  border: 1px solid var(--df-shell-parent-border) !important;
  box-shadow: var(--df-shell-parent-shadow) !important;
  backdrop-filter: saturate(1.35) blur(18px);
  -webkit-backdrop-filter: saturate(1.35) blur(18px);
}

.layout-container,
.layout-content{
  background: transparent !important;
}

#layout-sidenav.layout-sidenav,
#layout-sidenav{
  background: rgba(246,247,249,.62) !important;
  border-right: 1px solid rgba(60,60,67,.08) !important;
  border-top-right-radius: 26px !important;
  border-bottom-right-radius: 26px !important;
  box-shadow: none !important;
}

#layout-sidenav .app-brand.demo{
  padding-top: 16px !important;
  padding-bottom: 14px !important;
  border-bottom-color: rgba(60,60,67,.08) !important;
  background: transparent !important;
}

#layout-sidenav .sidenav-divider{
  margin: 10px 18px 12px !important;
}

#layout-navbar{
  padding: 8px 14px 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#layout-navbar .navbar{
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#layout-navbar .df-topbar-pill{
  min-height: 44px !important;
  border-radius: 22px !important;
  padding: 5px 10px !important;
  background: rgba(255,255,255,.60) !important;
  border: 1px solid rgba(60,60,67,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 6px 18px rgba(15,23,42,.04) !important;
}

#layout-navbar .df-sidebar-toggle,
#layout-navbar .df-menu-pill,
#layout-navbar .df-icon-tray,
#layout-navbar .navbar-search-box{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(60,60,67,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
}

#layout-navbar .navbar-search-box{
  min-height: 38px !important;
}

.layout-content > .container-fluid{
  padding: 4px 12px 0 !important;
}

#df-app{
  min-height: calc(100vh - 108px) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
/* Header full-width pass: remove detached Form Studio block and let the header span the full shell width. */
@media (min-width: 992px){
  .layout-inner{
    display: grid !important;
    grid-template-columns: var(--df-sidenav-width, 15.625rem) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .layout-container{
    display: contents !important;
  }

  #layout-navbar{
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    padding: 10px 14px 8px !important;
    z-index: 3;
  }

  .layout-content{
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  #layout-sidenav{
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: auto !important;
    flex: none !important;
    min-height: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 1px solid rgba(60,60,67,.08) !important;
  }

  #layout-sidenav .app-brand.demo,
  #layout-sidenav .sidenav-divider.mt-0{
    display: none !important;
  }

  #layout-sidenav .sidenav-inner{
    padding-top: 24px !important;
  }

  #layout-navbar .df-topbar-pill{
    width: 100% !important;
    min-height: 46px !important;
  }
}

@media (min-width: 992px){
  html.df-sidenav-hidden .layout-inner{
    grid-template-columns: 0 minmax(0, 1fr) !important;
  }

  html.df-sidenav-hidden #layout-sidenav{
    display: none !important;
  }

  html.df-sidenav-hidden #layout-navbar,
  html.df-sidenav-hidden .layout-content{
    grid-column: 1 / -1 !important;
  }
}
/* Unified header surface pass: keep the full-width top band, but embed controls into that single surface. */
@media (min-width: 992px){
  #layout-navbar{
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(60,60,67,.06) !important;
  }

  #layout-navbar .navbar,
  #layout-navbar .navbar-collapse{
    background: transparent !important;
  }

  #layout-navbar .df-topbar-pill{
    min-height: 40px !important;
    padding: 0 6px !important;
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #layout-navbar .df-sidebar-toggle,
  #layout-navbar .df-menu-pill,
  #layout-navbar .df-icon-tray,
  #layout-navbar .navbar-search-box{
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  #layout-navbar .df-menu-pill,
  #layout-navbar .df-icon-tray{
    min-height: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    border-radius: 0 !important;
  }

  #layout-navbar .df-menubar{
    gap: 2px !important;
  }

  #layout-navbar .df-sidebar-toggle,
  #layout-navbar .df-menubar .nav-link,
  #layout-navbar .df-icon-tray .nav-link,
  #layout-navbar #df-toggle-props.nav-link{
    border-radius: 8px !important;
    transition: background-color .16s ease, color .16s ease, opacity .16s ease;
  }

  #layout-navbar .df-sidebar-toggle:hover,
  #layout-navbar .df-menubar .nav-link:hover,
  #layout-navbar .df-icon-tray .nav-link:hover,
  #layout-navbar #df-toggle-props.nav-link:hover{
    background: rgba(60,60,67,.08) !important;
  }

  #layout-navbar .df-topbar-right{
    gap: 8px !important;
    margin-right: 6px !important;
  }

  #layout-navbar .navbar-search-box{
    min-height: 0 !important;
    padding: 0 8px !important;
    border-width: 0 !important;
    border-radius: 10px !important;
    opacity: .92;
    transition: background-color .16s ease, opacity .16s ease;
  }

  #layout-navbar .navbar-search-box:hover,
  #layout-navbar .navbar-search-box:focus-within{
    background: rgba(255,255,255,.42) !important;
  }

  #layout-navbar .navbar-search-box .navbar-icon{
    opacity: .7 !important;
  }

  #layout-navbar .navbar-search-box .form-control{
    min-width: 180px !important;
    height: 30px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  #layout-navbar .navbar-search-box .form-control::placeholder{
    color: rgba(60,60,67,.72) !important;
  }
}
/* Lift the iframe host slightly so the right rail can visually meet the toolbar join.
   Keep canvas/body logic untouched; canvas is compensated inside app CSS. */
@media (min-width: 992px){
  .layout-content,
  .layout-content > .container-fluid,
  .layout-content .card.mb-0,
  .layout-content .card.mb-0 > .card-body{
    overflow: visible !important;
  }

  #df-app{
    margin-top: -24px !important;
    height: calc(100% + 24px) !important;
    min-height: calc(100vh - 84px) !important;
  }
}
/* --- assets/css-src/form-studio-shell-bundle/17-form-studio-shell-force-light-edge-fill.css --- */
/* Keep the host lane behind the iframe light so the right edge never falls back to a dark strip. */
:root{
  color-scheme: light !important;
}

.layout-content,
.layout-content > .container-fluid,
.layout-content > .container-fluid > .card.mb-0,
.layout-content > .container-fluid > .card.mb-0 > .card-body,
#df-app{
  background: #f2f3f8 !important;
  color-scheme: light !important;
}

@media (prefers-color-scheme: dark){
  :root{
    color-scheme: light !important;
  }

  .layout-content,
  .layout-content > .container-fluid,
  .layout-content > .container-fluid > .card.mb-0,
  .layout-content > .container-fluid > .card.mb-0 > .card-body,
  #df-app{
    background: #f2f3f8 !important;
  }
}
/* --- assets/css-src/form-studio-shell-bundle/18-form-studio-shell-left-right-seam-killer.css --- */
/* Remove the shell divider so no vertical seam shows between the left nav and the canvas host. */
#layout-sidenav.layout-sidenav,
#layout-sidenav{
  border-right: 0 !important;
  box-shadow: none !important;
}

#layout-sidenav::before,
#layout-sidenav::after,
.layout-content::before,
.layout-content::after{
  content: none !important;
  display: none !important;
}


/* Dropdown overlay hardening.
   Why: the host iframe must stay underneath the File/Edit/View menus. */
#layout-navbar{
  position: relative !important;
  z-index: 4000 !important;
  overflow: visible !important;
}

#layout-navbar .navbar-collapse,
#layout-navbar .df-topbar-pill,
#layout-navbar .df-menubar,
#layout-navbar .nav-item.dropdown{
  position: relative !important;
  overflow: visible !important;
}

#layout-navbar .dropdown-menu{
  position: absolute !important;
  z-index: 5000 !important;
}

.layout-content,
.layout-content > .container-fluid,
.layout-content > .container-fluid > .card.mb-0,
.layout-content > .container-fluid > .card.mb-0 > .card-body,
#df-app{
  position: relative !important;
  z-index: 1 !important;
}


/* Left/right host gutter removal pass.
   Why: remove the host-side strips behind the workspace so it starts flush on both sides. */
@media (min-width: 992px){
  .layout-content > .container-fluid{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* Sidebar trim pass.
   Why: visually stop the host left rail at the same horizontal line as the canvas status row. */
@media (min-width: 992px){
  :root{
    --df-shell-side-rail-align-offset: 24px;
  }

  #layout-sidenav{
    position: relative !important;
    overflow: hidden !important;
  }

  #layout-sidenav::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: var(--df-shell-side-rail-align-offset) !important;
    background: var(--df-apple-bg, #f5f5f7) !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }
}



/* Real structural left-panel-inside-frame fix.
   Why: make the left navigation live inside the same host frame/card as the canvas and the right panel. */
@media (min-width: 992px){
  .layout-content > .container-fluid > .card.mb-0 > .card-body{
    display:flex !important;
    align-items:stretch !important;
  }

  .layout-content > .container-fluid > .card.mb-0 > .card-body > #layout-sidenav{
    position: relative !important;
    flex: 0 0 var(--df-sidenav-width, 15.625rem) !important;
    width: var(--df-sidenav-width, 15.625rem) !important;
    min-width: var(--df-sidenav-width, 15.625rem) !important;
    max-width: var(--df-sidenav-width, 15.625rem) !important;
    align-self: stretch !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--df-apple-bg, #f5f5f7) !important;
    border-right: 0 !important;
    box-shadow: none !important;
    z-index: 1 !important;
  }

  .layout-content > .container-fluid > .card.mb-0 > .card-body > #df-app{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}



/* Left-panel top spacer removal pass.
   Why: after moving the left nav into the shared frame, a top white strip remained above the menu. */
@media (min-width: 992px){
  .layout-content > .container-fluid > .card.mb-0 > .card-body > #layout-sidenav{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding-top: 0 !important;
  }

  .layout-content > .container-fluid > .card.mb-0 > .card-body > #layout-sidenav .app-brand.demo,
  .layout-content > .container-fluid > .card.mb-0 > .card-body > #layout-sidenav .sidenav-divider.mt-0{
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .layout-content > .container-fluid > .card.mb-0 > .card-body > #layout-sidenav .sidenav-inner{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}


/* Legacy outer drawer-column collapse pass.
   Why: after moving the left nav into the shared inner frame, the old outer grid slot still reserved width and showed as an empty strip. */
@media (min-width: 992px){
  .layout-inner{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #layout-navbar,
  .layout-content{
    grid-column: 1 / -1 !important;
  }

  .layout-content{
    grid-row: 2 !important;
  }

  html.df-sidenav-hidden .layout-inner{
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* Drawer collapse fill fix.
   Why: after moving the left nav into the shared frame, the hidden drawer state was still reserving width via later flex/min-width rules. */
@media (min-width: 992px){
  html.df-sidenav-hidden .layout-content > .container-fluid > .card.mb-0 > .card-body > #layout-sidenav{
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html.df-sidenav-hidden .layout-content > .container-fluid > .card.mb-0 > .card-body > #df-app{
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* --- assets/css-src/form-studio-shell-bundle/20-form-studio-shell-left-panel-top-fill.css --- */
/* Extend the left panel surface upward without pulling the menu items upward.
   Why: remove the dead gap under the header while keeping the existing item spacing. */
@media (min-width: 992px){
  .layout-content > .container-fluid > .card.mb-0 > .card-body > #layout-sidenav{
    margin-top: -24px !important;
    padding-top: 24px !important;
  }
}


/* Match the right drawer toggle to the left drawer toggle shell */
#layout-navbar .df-topbar-right{
  gap: 8px !important;
  margin-right: 8px !important;
}

#layout-navbar #df-toggle-props.nav-link{
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  flex: 0 0 30px;
}

#layout-navbar #df-toggle-props.nav-link i{
  font-size: 17px !important;
  line-height: 1 !important;
}

#layout-navbar #df-toggle-props.nav-link:hover{
  background: rgba(60,60,67,.08) !important;
}

/* v29: search before right toggle */
/* Keep search to the left of the right drawer toggle and pin the toggle to the far right. */
#layout-navbar .df-topbar-right{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
  margin-right: 8px !important;
}

#layout-navbar .df-topbar-right .navbar-search-box{
  order: 1 !important;
  margin-right: 0 !important;
}

#layout-navbar .df-topbar-right #df-toggle-props.nav-link{
  order: 2 !important;
  margin-left: 2px !important;
  margin-right: 0 !important;
  flex: 0 0 30px !important;
}

#layout-navbar .df-topbar-right #df-toggle-props.nav-link i{
  transform: scaleX(-1) !important;
  display: inline-block !important;
}


/* Collapse top search to icon-only by default and expand on click. */
#layout-navbar .df-topbar-right .navbar-search-box{
  position: relative !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  transition: width .18s ease, opacity .18s ease !important;
}

#layout-navbar .df-topbar-right .navbar-search-box .icon-search{
  cursor: pointer !important;
}

#layout-navbar .df-topbar-right .navbar-search-box .navbar-search-input{
  overflow: hidden !important;
  transition: width .18s ease, opacity .18s ease, margin .18s ease, padding .18s ease !important;
}

#layout-navbar .df-topbar-right .navbar-search-box.df-search-collapsed{
  width: 18px !important;
  min-width: 18px !important;
  gap: 0 !important;
}

#layout-navbar .df-topbar-right .navbar-search-box.df-search-collapsed .navbar-search-input{
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  pointer-events: none !important;
}

#layout-navbar .df-topbar-right .navbar-search-box.df-search-collapsed .form-control{
  min-width: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
}

#layout-navbar .df-topbar-right .navbar-search-box.df-search-expanded{
  width: 254px !important;
  min-width: 254px !important;
  gap: 8px !important;
}

#layout-navbar .df-topbar-right .navbar-search-box.df-search-expanded .navbar-search-input{
  width: 226px !important;
  min-width: 226px !important;
  opacity: 1 !important;
  padding-left: 8px !important;
}

#layout-navbar .df-topbar-right .navbar-search-box.df-search-expanded .form-control{
  width: 100% !important;
  min-width: 0 !important;
  opacity: 1 !important;
}


/* 24-form-studio-shell-right-utilities-order-fix.css */
/* Put search before utility icons, keep drawer toggle at the far right. */
#layout-navbar .df-topbar-right{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
  margin-right: 8px !important;
}

#layout-navbar .df-topbar-right .navbar-search-box{
  order: 1 !important;
  margin-right: 0 !important;
}

#layout-navbar .df-topbar-right #df-open-mock-screen{
  order: 2 !important;
}

#layout-navbar .df-topbar-right #df-open-ai-assistant{
  order: 3 !important;
}

#layout-navbar .df-topbar-right #df-toggle-props.nav-link{
  order: 4 !important;
  margin-left: 2px !important;
  margin-right: 0 !important;
  flex: 0 0 30px !important;
}



/* 25-form-studio-shell-search-icon-visibility-and-right-utility-hitarea.css */
/* Keep collapsed search icon fully visible and clickable; preserve right-side utility order. */
#layout-navbar .df-topbar-right .navbar-search-box{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#layout-navbar .df-topbar-right .navbar-search-box.df-search-collapsed{
  width: 24px !important;
  min-width: 24px !important;
}

#layout-navbar .df-topbar-right #df-binding-search-toggle{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  min-width: 16px !important;
  line-height: 1 !important;
}

#layout-navbar .df-topbar-right #df-open-ai-assistant,
#layout-navbar .df-topbar-right #df-open-mock-screen,
#layout-navbar .df-topbar-right #df-toggle-props{
  position: relative !important;
  z-index: 2 !important;
}



/* v31f: search typeahead visibility + lazy binding refresh */
#layout-navbar .df-topbar-right .navbar-search-box{
  overflow: visible !important;
}
#layout-navbar .df-topbar-right .navbar-search-box .navbar-search-input{
  overflow: hidden !important;
}
#layout-navbar .df-topbar-right #df-binding-typeahead{
  left: 0 !important;
  right: auto !important;
  z-index: 3000 !important;
}
#layout-navbar .df-topbar-right .navbar-search-box.df-search-collapsed #df-binding-typeahead{
  display: none !important;
}


/* Sidebar branch highlight state (v32o) */

#layout-sidenav .sidenav-item.df-branch-active > .sidenav-link{
  background: rgba(96, 83, 68, 0.12) !important;
  color: rgba(29, 29, 31, 0.96) !important;
  font-weight: 650 !important;
}

#layout-sidenav .sidenav-item.df-branch-active > .sidenav-link .sidenav-icon{
  color: rgba(76, 64, 52, 0.92) !important;
}

@media (prefers-color-scheme: dark){
  #layout-sidenav .sidenav-item.df-branch-active > .sidenav-link{
    background: rgba(235, 229, 223, 0.12) !important;
    color: rgba(245, 245, 247, 0.96) !important;
  }

  #layout-sidenav .sidenav-item.df-branch-active > .sidenav-link .sidenav-icon{
    color: rgba(245, 239, 232, 0.92) !important;
  }
}