/* Shared light navigation shell; standalone Image Agent pages stay unchanged. */
.site-shell { --sidebar-width: 264px; padding-left: var(--sidebar-width); padding-top: 64px; }
.site-shell.sidebar-collapsed { --sidebar-width: 80px; }
/* Short utility and studio pages fill the viewport; the footer stays in normal flow. */
.site-shell:has(> main #fav-grid, > main > .tool-hero), .site-shell:has(> main:is(.search-page, .studio-page)) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.site-shell:has(> main #fav-grid, > main > .tool-hero) > main, .site-shell:has(> main:is(.search-page, .studio-page)) > main {
  flex: 1 0 auto;
  width: 100%;
}
.site-shell:has(> main #fav-grid, > main > .tool-hero) > .footer, .site-shell:has(> main:is(.search-page, .studio-page)) > .footer {
  flex: 0 0 auto;
}
.site-sidebar.nav { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); height: 100dvh; z-index: 1200; border: 0; border-right: 1px solid var(--border); background: #fff; backdrop-filter: none; }
.site-sidebar .nav-inner { width: 100%; max-width: none; height: 100%; padding: 0 14px; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.sidebar-brand { display: flex; align-items: center; gap: 5px; min-height: 64px; flex-shrink: 0; }
.site-sidebar .logo { margin: 0; gap: 7px; font-size: 18px; letter-spacing: -.7px; min-width: 0; flex: 1; }
.site-sidebar .logo-icon { width: 27px; height: 27px; }
.sidebar-collapse, .sidebar-mobile-close, .sidebar-mobile-toggle { display: grid; place-items: center; width: 30px; height: 34px; flex-shrink: 0; border-radius: 9px; color: var(--ink-3); }
.sidebar-collapse:hover, .sidebar-mobile-close:hover, .sidebar-mobile-toggle:hover { color: var(--purple); background: var(--purple-50); }
.site-sidebar .nav-links { position: static; display: flex; flex-direction: column; align-items: stretch; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; gap: 5px; padding: 10px 0 24px; border: 0; box-shadow: none; background: transparent; scrollbar-width: thin; scrollbar-color: var(--purple-200) transparent; }
.site-sidebar .sidebar-link, .site-sidebar .nav-drop-btn { display: flex; align-items: center; width: 100%; gap: 13px; min-height: 47px; padding: 11px 14px; border-radius: 12px; color: var(--ink-2); line-height: 1.45; font-family: inherit; font-size: 14px; font-weight: 500; text-align: left; white-space: normal; }
.sidebar-icon { flex: 0 0 21px; }
.site-sidebar .sidebar-label { flex: 1; min-width: 0; }
.site-sidebar .sidebar-link:hover, .site-sidebar .nav-drop-btn:hover { background: var(--purple-50); color: var(--purple); }
.site-sidebar .sidebar-link.active { background: var(--purple-100); color: var(--purple-dark); font-weight: 700; }
.sidebar-chevron { color: var(--ink-3); transition: transform .15s; }
.site-sidebar .is-open .sidebar-chevron { transform: rotate(180deg); }
.sidebar-separator { height: 1px; flex-shrink: 0; margin: 17px 14px; background: var(--border); }
.site-sidebar .nav-drop-menu { position: static; min-width: 0; padding: 4px 0 8px 18px; margin: 3px 0 0 23px; border: 0; border-left: 1px solid var(--purple-200); border-radius: 0; box-shadow: none; background: transparent; opacity: 1; visibility: visible; transform: none; transition: none; }
.site-sidebar .nav-drop-menu[hidden] { display: none; }
.site-sidebar .nav-drop-menu a { padding: 9px 10px; font-size: 12px; line-height: 1.5; white-space: normal; }
.site-sidebar .nav-drop-menu .dot { display: none; }
.site-sidebar .nav-drop-menu a.active { background: var(--purple-50); color: var(--purple-dark); }
.site-shell .filter-bar { top: 64px; }
.site-shell .image-agent-dock, .site-shell .quick-gen { left: var(--sidebar-width); }
@media (min-width: 901px) {
  .sidebar-collapsed .sidebar-brand { flex-direction: column; justify-content: center; gap: 10px; min-height: 108px; }
  .sidebar-collapsed .site-sidebar .logo { flex: none; }
  .sidebar-collapsed .site-sidebar .logo-name, .sidebar-collapsed .sidebar-label, .sidebar-collapsed .sidebar-chevron { display: none; }
  .sidebar-collapsed .site-sidebar .sidebar-link, .sidebar-collapsed .site-sidebar .nav-drop-btn { justify-content: center; padding: 12px; }
  .sidebar-collapsed .site-sidebar .nav-drop-menu { display: none; }
  .sidebar-collapsed .sidebar-separator { margin: 15px 9px; }
}
@media (max-width: 900px) {
  .site-shell, .site-shell.sidebar-collapsed { --sidebar-width: 0px; padding-left: 0; padding-top: 64px; }
  .sidebar-mobile-toggle { width: 38px; height: 38px; }
  .site-sidebar.nav { width: min(292px, calc(100vw - 40px)); transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility .2s; }
  .sidebar-mobile-open .site-sidebar.nav { transform: translateX(0); visibility: visible; }
  .sidebar-mobile-open { overflow: hidden; }
  .sidebar-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(30,27,46,.3); backdrop-filter: blur(3px); z-index: 1150; }
  .sidebar-mobile-close { display: grid; }
  .sidebar-collapse { display: none; }
  .site-sidebar .sidebar-brand { min-height: 76px; }
  .site-sidebar .nav-inner { padding: 0 16px; }
  .site-shell .filter-bar { top: 64px; }
}
@media (prefers-reduced-motion: reduce) { .site-sidebar.nav, .sidebar-chevron { transition: none; } }

/* Utility actions stay at the top right, separate from the primary sidebar. */
.site-toolbar { position: fixed; top: 0; right: 0; left: var(--sidebar-width); height: 64px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 24px; z-index: 1100; background: rgba(251,250,255,.96); }
.site-toolbar .nav-right { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
.site-toolbar .sidebar-link { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; color: var(--ink-2); }
.site-toolbar .sidebar-link:hover, .site-toolbar .sidebar-link.active { background: var(--purple-100); color: var(--purple); }
.site-toolbar .sidebar-label { display: none; }
.site-toolbar .lang-switch-menu { top: calc(100% + 8px); bottom: auto; right: 0; left: auto; }
.site-toolbar .account-menu { top: calc(100% + 10px); bottom: auto; right: 0; left: auto; }
.site-toolbar .account-signin-btn { background: var(--purple); border-color: var(--purple); color: #fff; border-radius: 11px; }
.site-toolbar .account-signin-btn:hover { background: var(--purple-dark); }
.site-toolbar :focus-visible, .site-sidebar :focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.sidebar-mobile-close, .sidebar-backdrop, .toolbar-mobile-brand { display: none; }
@media (max-width: 900px) {
  .site-toolbar { padding: 0 14px; gap: 8px; justify-content: space-between; }
  .toolbar-mobile-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .toolbar-mobile-brand .logo { margin: 0; font-size: 18px; }
  .sidebar-mobile-close { display: grid; }
}
@media (max-width: 600px) {
  .site-toolbar { padding: 0 10px; }
  .toolbar-mobile-brand { gap: 4px; }
  .toolbar-mobile-brand .logo-name { display: none; }
  .toolbar-mobile-brand .logo-icon { width: 26px; height: 26px; }
  .site-toolbar .nav-right { gap: 4px; }
  .site-toolbar .sidebar-link { width: 32px; height: 36px; }
  .site-toolbar .account-nav-slot { margin-left: 0; }
  .site-toolbar .account-buy-credits-btn { display: none !important; }
  .site-toolbar .account-balance-pill { display: none; }
  .site-toolbar .lang-switch { min-width: 62px; }
  .site-toolbar .lang-switch-button { padding: 7px; font-size: 11px; }
  .site-toolbar .account-signin-btn { max-width: 100px; padding: 0 9px; font-size: 11px; }
}