:root {
  --lg-ink: #17191d;
  --lg-clear: rgba(255, 255, 255, .2);
  --lg-clear-strong: rgba(255, 255, 255, .48);
  --lg-edge-light: rgba(255, 255, 255, .96);
  --lg-edge-dark: rgba(29, 36, 44, .62);
  --lg-shadow: 0 7px 16px rgba(38, 46, 57, .18), 0 22px 48px rgba(48, 59, 73, .12);
}

html,
body {
  background-color: #edf1f5 !important;
}

body {
  background-image:
    radial-gradient(ellipse at 82% 8%, rgba(255, 255, 255, .9), transparent 48%),
    radial-gradient(ellipse at 8% 92%, rgba(198, 216, 237, .42), transparent 46%),
    linear-gradient(128deg, rgba(255, 255, 255, .42), transparent 54%) !important;
  background-size: 100% 100% !important;
}

.app-shell,
.main-shell,
.page,
.page.asset-workbench-page,
.page.canvas-assets-library-page {
  background: transparent !important;
}

.app-shell > .sidebar,
.topbar {
  isolation: isolate !important;
  overflow: hidden !important;
  background: var(--lg-clear) !important;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, .98),
    inset -2px 2px 1px -1px rgba(255, 255, 255, .98),
    inset 7px -7px 1px -7px rgba(255, 255, 255, .74),
    inset -7px 7px 1px -7px rgba(255, 255, 255, .74),
    inset 0 0 3px rgba(17, 22, 28, .66),
    var(--lg-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(165%) contrast(1.12) !important;
  backdrop-filter: blur(18px) saturate(165%) contrast(1.12) !important;
}

/* Keep the fixed navigation's base tint stable as page content changes
   underneath it. Active items still provide the navigation state contrast. */
.app-shell > .sidebar {
  background-color: rgba(244, 248, 249, .94) !important;
  background-image: linear-gradient(155deg, rgba(255, 255, 255, .78), rgba(235, 243, 246, .72)) !important;
  background-attachment: fixed !important;
}

/* Inner dark caustic: separated from the outer edge to make the glass thick. */
.app-shell > .sidebar::before,
.topbar::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 8px !important;
  pointer-events: none !important;
  border: 1px solid rgba(20, 26, 33, .64) !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: 0 0 8px rgba(20, 26, 33, .23), inset 0 0 8px rgba(255, 255, 255, .32) !important;
  filter: blur(6px) contrast(1.7) !important;
  opacity: .58 !important;
}

/* The masked edge band filters only the perimeter behind the glass. */
.app-shell > .sidebar::after,
.topbar::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  padding: 4px !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .16) 26%, rgba(255, 255, 255, .08) 72%, rgba(255, 255, 255, .92) 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  -webkit-backdrop-filter: blur(2px) saturate(180%) contrast(2.35) !important;
  backdrop-filter: blur(2px) saturate(180%) contrast(2.35) !important;
  filter: url("#liquid-edge-distortion") drop-shadow(0 1px 1px rgba(255, 255, 255, .75)) !important;
  opacity: .94 !important;
}

.app-shell > .sidebar > *,
.topbar > * {
  position: relative !important;
  z-index: 2 !important;
}

.nav-item,
.sidebar-collapse,
.balance-pill,
.topbar-content-button,
.topbar-recharge,
.secondary-btn {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  background: rgba(255, 255, 255, .2) !important;
  color: var(--lg-ink) !important;
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, .98),
    inset -2px 2px 1px -1px rgba(255, 255, 255, .94),
    inset 6px -6px 1px -6px rgba(255, 255, 255, .68),
    inset -6px 6px 1px -6px rgba(255, 255, 255, .68),
    inset 0 0 2px rgba(12, 17, 22, .72),
    0 4px 9px rgba(24, 31, 39, .18) !important;
  -webkit-backdrop-filter: blur(5px) saturate(160%) contrast(1.45) !important;
  backdrop-filter: blur(5px) saturate(160%) contrast(1.45) !important;
  transition: transform .26s ease, background .26s ease, box-shadow .26s ease !important;
}

.nav-item { border-radius: 999px !important; }
.balance-pill,
.topbar-recharge { border-radius: 999px !important; }

/* Inner optical ring for compact glass controls. */
.nav-item::before,
.sidebar-collapse::before,
.balance-pill::before,
.topbar-content-button::before,
.topbar-recharge::before,
.secondary-btn::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 6px !important;
  pointer-events: none !important;
  border: 1px solid rgba(16, 21, 27, .72) !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: 0 0 7px rgba(22, 29, 37, .22) !important;
  filter: blur(5px) contrast(2.1) !important;
  opacity: .62 !important;
}

/* Four-pixel refractive perimeter. */
.nav-item::after,
.sidebar-collapse::after,
.balance-pill::after,
.topbar-content-button::after,
.topbar-recharge::after,
.secondary-btn::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  padding: 4px !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: linear-gradient(45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .13) 27%, rgba(255, 255, 255, .06) 72%, rgba(255, 255, 255, .94) 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  -webkit-backdrop-filter: blur(1.6px) saturate(190%) contrast(2.7) !important;
  backdrop-filter: blur(1.6px) saturate(190%) contrast(2.7) !important;
  filter: url("#liquid-edge-distortion") drop-shadow(0 1px 1px rgba(255, 255, 255, .72)) !important;
  opacity: .96 !important;
  transition: transform .3s ease, opacity .26s ease !important;
}

.nav-item > *,
.sidebar-collapse > *,
.balance-pill > *,
.topbar-content-button > *,
.topbar-recharge > *,
.secondary-btn > * {
  position: relative !important;
  z-index: 2 !important;
}

.nav-item:hover,
.sidebar-collapse:hover,
.balance-pill:hover,
.topbar-content-button:hover,
.topbar-recharge:hover,
.secondary-btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  background: rgba(255, 255, 255, .36) !important;
}

.nav-item:hover::after,
.sidebar-collapse:hover::after,
.balance-pill:hover::after,
.topbar-content-button:hover::after,
.topbar-recharge:hover::after,
.secondary-btn:hover::after {
  transform: translate(3px, -2px) scale(1.035) !important;
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(219, 226, 233, .58)) !important;
  border-color: rgba(27, 34, 42, .4) !important;
  color: var(--lg-ink) !important;
  outline: 1px solid rgba(255, 255, 255, .94) !important;
  outline-offset: -3px !important;
  transform: translateX(3px) !important;
  box-shadow:
    inset 2px -2px 1px -1px #fff,
    inset -2px 2px 1px -1px rgba(255, 255, 255, .98),
    inset 0 0 0 1px rgba(32, 39, 47, .17),
    inset 0 -5px 9px rgba(49, 59, 70, .18),
    0 0 0 1px rgba(42, 50, 59, .14),
    0 9px 20px rgba(36, 44, 54, .27) !important;
}

.nav-item.active::before {
  inset: 7px !important;
  border-color: rgba(15, 20, 26, .86) !important;
  opacity: .76 !important;
}
.nav-item.active::after { opacity: 1 !important; }
.nav-item.active .nav-copy { font-weight: 800 !important; }
.nav-item.active .nav-icon {
  color: var(--lg-ink) !important;
  background: rgba(0, 0, 0, .16) !important;
  border: 1px solid rgba(0, 0, 0, .25) !important;
}
.nav-item .nav-icon { color: currentColor !important; }
.nav-item.active .nav-arrow,
.nav-item:hover .nav-arrow { color: currentColor !important; }

.topbar-recharge {
  background: rgba(20, 24, 29, .9) !important;
  color: #fff !important;
}
.topbar-recharge:hover { background: rgba(255, 255, 255, .36) !important; color: rgba(28, 33, 39, .86) !important; }

/* Balance the far edge: avoid a blown-out vertical white stripe on pills. */
.nav-item::after,
.sidebar-collapse::after,
.balance-pill::after,
.topbar-content-button::after,
.topbar-recharge::after,
.secondary-btn::after {
  padding: 3px !important;
  background: linear-gradient(45deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .12) 27%, rgba(255, 255, 255, .05) 73%, rgba(255, 255, 255, .58) 100%) !important;
  -webkit-backdrop-filter: blur(1.4px) saturate(170%) contrast(1.95) !important;
  backdrop-filter: blur(1.4px) saturate(170%) contrast(1.95) !important;
  opacity: .82 !important;
}
.nav-item.active::after { opacity: .9 !important; }

.page .panel,
.page .stat-card,
.page .table-wrap,
.page .profile-card,
.page .security-panel,
.page .package-card,
.page .prompt-library-pane,
.page .prompt-list-pane,
.page .prompt-preview-pane,
.page .prompt-list-card,
.page .asset-ready,
.page .asset-module-tabs,
.page .prompt-workbench-editor,
.image-workbench-card,
.image-workbench-results,
.image-chat-composer,
.image-session-card {
  background: rgba(255, 255, 255, .31) !important;
  border-color: rgba(255, 255, 255, .86) !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .84),
    inset -1px -1px 0 rgba(37, 45, 55, .13),
    0 8px 20px rgba(43, 53, 66, .12) !important;
  -webkit-backdrop-filter: blur(15px) saturate(150%) contrast(1.1) !important;
  backdrop-filter: blur(15px) saturate(150%) contrast(1.1) !important;
}

.liquid-glass-filters {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-item,
  .sidebar-collapse,
  .balance-pill,
  .topbar-content-button,
  .topbar-recharge,
  .secondary-btn,
  .nav-item::after,
  .sidebar-collapse::after,
  .balance-pill::after,
  .topbar-content-button::after,
  .topbar-recharge::after,
  .secondary-btn::after { transition: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .app-shell > .sidebar,
  .topbar,
  .nav-item,
  .sidebar-collapse,
  .balance-pill,
  .topbar-content-button,
  .topbar-recharge,
  .secondary-btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* Refractive shadow pass: the dark material is directional, never a uniform
   charcoal outline around the entire perimeter. */
.app-shell > .sidebar,
.topbar {
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, .98),
    inset -2px 2px 1px -1px rgba(255, 255, 255, .98),
    inset 11px 0 17px -14px rgba(22, 29, 37, .5),
    inset -10px 0 16px -14px rgba(22, 29, 37, .24),
    inset 0 10px 16px -15px rgba(22, 29, 37, .18),
    0 8px 16px rgba(38, 46, 57, .14),
    0 22px 46px rgba(48, 59, 73, .1) !important;
}

.app-shell > .sidebar::before,
.topbar::before {
  inset: 8px !important;
  padding: 2px !important;
  border: 0 !important;
  background: linear-gradient(125deg, rgba(12, 18, 25, .62) 0%, rgba(12, 18, 25, .12) 23%, transparent 42%, transparent 72%, rgba(29, 36, 44, .2) 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) border-box, linear-gradient(#000 0 0) content-box !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  box-shadow: none !important;
  filter: blur(6px) contrast(1.8) !important;
  opacity: .72 !important;
}

.nav-item,
.sidebar-collapse,
.balance-pill,
.topbar-content-button,
.topbar-recharge,
.secondary-btn {
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, .98),
    inset -2px 2px 1px -1px rgba(255, 255, 255, .94),
    inset 8px 0 12px -11px rgba(12, 18, 25, .58),
    inset -7px 0 11px -11px rgba(12, 18, 25, .26),
    inset 0 7px 10px -11px rgba(12, 18, 25, .18),
    0 5px 10px rgba(24, 31, 39, .14) !important;
}

.nav-item::before,
.sidebar-collapse::before,
.balance-pill::before,
.topbar-content-button::before,
.topbar-recharge::before,
.secondary-btn::before {
  inset: 6px !important;
  padding: 2px !important;
  border: 0 !important;
  background: linear-gradient(125deg, rgba(12, 18, 25, .68) 0%, rgba(12, 18, 25, .12) 23%, transparent 43%, transparent 73%, rgba(29, 36, 44, .22) 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) border-box, linear-gradient(#000 0 0) content-box !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  box-shadow: none !important;
  filter: blur(5px) contrast(2) !important;
  opacity: .7 !important;
}

.nav-item.active {
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 1),
    inset -2px 2px 1px -1px rgba(255, 255, 255, .98),
    inset 8px 0 12px -11px rgba(10, 15, 20, .64),
    inset -7px 0 11px -11px rgba(10, 15, 20, .28),
    inset 0 7px 10px -11px rgba(10, 15, 20, .2),
    0 8px 18px rgba(36, 44, 54, .2) !important;
}

.nav-item.active::before {
  inset: 7px !important;
  opacity: .84 !important;
}

/* Match the reference source's shadow geometry: the dark blur begins below
   the top edge, so it reads as refraction rather than a closed outline. */
.app-shell > .sidebar::before,
.topbar::before,
.nav-item::before,
.sidebar-collapse::before,
.balance-pill::before,
.topbar-content-button::before,
.topbar-recharge::before,
.secondary-btn::before {
  inset: auto !important;
  top: 35% !important;
  left: 50% !important;
  width: calc(100% - 16px) !important;
  height: calc(100% - 16px) !important;
  transform: translateX(-50%) !important;
  padding: 0 !important;
  border: 1px solid rgba(0, 0, 0, .82) !important;
  border-radius: inherit !important;
  background: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
  box-shadow: none !important;
  filter: blur(8px) !important;
  opacity: .68 !important;
}

.nav-item.active::before { opacity: .78 !important; }

/* The reference sheen covers the whole object; its transparent middle keeps
   the label readable while the parent contrast layer sharpens the ends. */
.app-shell > .sidebar::after,
.topbar::after,
.nav-item::after,
.sidebar-collapse::after,
.balance-pill::after,
.topbar-content-button::after,
.topbar-recharge::after,
.secondary-btn::after {
  inset: 0 !important;
  padding: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(45deg, rgba(255, 255, 255, .8) 0%, transparent 25%, transparent 75%, rgba(255, 255, 255, .8) 100%) !important;
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: blur(3px) contrast(1.35) !important;
  opacity: .76 !important;
}
.nav-item.active::after { opacity: .86 !important; }

/* The reference has a real inner light ring and a scoped contrast layer.
   Keep both as DOM layers so they can refract independently of the label. */
.liquid-contrast-layer {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: rgba(255, 255, 255, .025) !important;
  -webkit-backdrop-filter: contrast(3) !important;
  backdrop-filter: contrast(3) !important;
  opacity: .32 !important;
}

.liquid-circle-overlay {
  position: absolute !important;
  z-index: 1 !important;
  inset: 4.5px !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  filter: blur(1px) !important;
  box-shadow: inset 0 0 3px rgba(255, 255, 255, .18) !important;
}

.nav-item > *,
.balance-pill > *,
.topbar-content-button > *,
.topbar-recharge > * {
  position: relative;
}
.nav-item > .liquid-contrast-layer,
.balance-pill > .liquid-contrast-layer,
.topbar-content-button > .liquid-contrast-layer,
.topbar-recharge > .liquid-contrast-layer { position: absolute !important; }

/* Use the reference box-shadow stack verbatim for the compact controls. */
.nav-item,
.sidebar-collapse,
.balance-pill,
.topbar-content-button,
.topbar-recharge,
.secondary-btn {
  background: rgba(255, 255, 255, .08) !important;
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, .9),
    inset -2px 2px 1px -1px rgba(255, 255, 255, .9),
    inset 6px -6px 1px -6px rgba(255, 255, 255, .55),
    inset -6px 6px 1px -6px rgba(255, 255, 255, .55),
    inset 0 0 2px rgba(0, 0, 0, .8),
    0 4px 8px rgba(0, 0, 0, .2) !important;
}

.nav-item .nav-icon,
.nav-item .nav-copy,
.balance-pill > *,
.topbar-content-button > *,
.topbar-recharge > *,
.sidebar-collapse > * {
  filter: drop-shadow(0 7px 2px rgba(102, 102, 102, .14)) !important;
}

.nav-item.active {
  background: rgba(255, 255, 255, .22) !important;
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, .96),
    inset -2px 2px 1px -1px rgba(255, 255, 255, .94),
    inset 6px -6px 1px -6px rgba(255, 255, 255, .6),
    inset -6px 6px 1px -6px rgba(255, 255, 255, .6),
    inset 0 0 2px rgba(0, 0, 0, .66),
    0 5px 11px rgba(0, 0, 0, .18) !important;
}

/* The navigation item is the glass surface. Keep the icon glyph itself
   transparent in both expanded and collapsed layouts, while the active item
   retains its outer selected surface. */
.nav-item .nav-icon,
.nav-item.active .nav-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep the expanded navigation quiet and readable instead of using the
   heavy legacy 650/800 weights and glyph shadow. */
.nav-item .nav-copy {
  color: rgba(35, 40, 46, .82) !important;
  font-weight: 520 !important;
  filter: none !important;
}

.nav-item.active .nav-copy {
  color: rgba(24, 29, 35, .9) !important;
  font-weight: 600 !important;
}

.nav-label,
.admin-nav-group-title {
  color: rgba(77, 84, 92, .66) !important;
  font-weight: 560 !important;
}

/* The recharge control now sits on a light glass surface, so its inherited
   white label needs the same dark ink treatment as the surrounding controls. */
.topbar-recharge,
.topbar-recharge > * {
  color: rgba(28, 33, 39, .86) !important;
}

.topbar-recharge > * {
  filter: none !important;
}

/* Compact desktop navigation: the old shell width left a large empty gutter
   beside each pill. Keep the mobile bottom navigation on its existing rules. */
@media (min-width: 761px) {
  .app-shell {
    grid-template-columns: 216px minmax(0, 1fr) !important;
  }

  .app-shell > .sidebar {
    width: 212px !important;
    padding-inline: 10px !important;
  }

  .app-shell > .sidebar .nav-item {
    width: calc(100% - 8px) !important;
    min-height: 43px !important;
    padding-inline: 9px !important;
    grid-template-columns: 26px minmax(0, 1fr) 14px !important;
    gap: 8px !important;
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }

  .app-shell.sidebar-collapsed > .sidebar {
    width: 32px !important;
    padding-inline: 3px !important;
  }

  /* Collapsed navigation is icon-only. Hide section controls as well as the
     labels so their chevrons cannot become stray characters in the rail. */
  .app-shell.sidebar-collapsed > .sidebar .nav-section-toggle,
  .app-shell.sidebar-collapsed > .sidebar .admin-nav-group-toggle {
    display: none !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav {
    gap: 4px !important;
    padding-inline: 0 !important;
    /* Keep wheel/touch scrolling, but do not let a scrollbar track cover the
       right edge of the circular navigation controls. */
    scrollbar-width: none !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav-section {
    gap: 3px !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav-item {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    margin-inline: auto !important;
    padding: 0 !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav-item.active {
    transform: none !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav-icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav-item.active .nav-icon {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav-copy,
  .app-shell.sidebar-collapsed > .sidebar .nav-arrow {
    display: none !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .create-entry {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    transform: none !important;
    margin-inline: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--lg-ink) !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .create-entry-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 12px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: currentColor !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .sidebar-brand {
    gap: 4px !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .brand-symbol {
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .sidebar-collapse {
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .sidebar-user {
    width: 24px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .sidebar-user .avatar,
  .app-shell.sidebar-collapsed > .sidebar .sidebar-user .user-row .avatar {
    width: 20px !important;
    height: 20px !important;
    font-size: 9px !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .sidebar-user .user-row {
    width: 24px !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    place-items: center !important;
  }

  .app-shell.sidebar-collapsed > .sidebar .nav::-webkit-scrollbar {
    display: none !important;
  }
}

/* Unified glass surfaces for the rest of the workspace. These selectors
   cover the legacy page cards and route-specific panels while leaving primary
   and danger buttons free to keep their semantic colors. */
.page :is(
  .panel,
  .stat-card,
  .table-wrap,
  .profile-card,
  .security-panel,
  .package-card,
  .llm-provider-card,
  .admin-panel,
  .admin-user-control-card,
  .redeem-list-panel,
  .prompt-library-pane,
  .prompt-list-pane,
  .prompt-preview-pane,
  .prompt-list-card,
  .prompt-workbench-editor,
  .asset-ready,
  .asset-module-tabs,
  .image-workbench-card,
  .image-workbench-results,
  .image-chat-composer,
  .image-content-card,
  .image-model-card,
  .image-output-card,
  .image-session-card,
  .image-task-card,
  .image-reference-notice,
  .canvas-preview,
  .canvas-preview-generating,
  .canvas-list-table,
  .generation-history-table,
  .admin-generation-task-table,
  .admin-user-activity-table,
  .routing-health-table,
  .platform-content-admin-preview,
  .prompt-card-list,
  .prompt-list-empty,
  .prompt-preview-empty,
  .image-results-empty
),
.platform-content-modal > section,
.delete-confirm-dialog,
.notice-dialog,
.image-mask-editor-dialog,
.image-mask-editor-surface {
  background: rgba(255, 255, 255, .3) !important;
  border: 1px solid rgba(255, 255, 255, .86) !important;
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, .9),
    inset -2px 2px 1px -1px rgba(255, 255, 255, .74),
    inset 0 0 2px rgba(20, 28, 36, .28),
    0 8px 20px rgba(38, 48, 60, .12) !important;
  border-radius: 16px !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) contrast(1.08) !important;
  backdrop-filter: blur(14px) saturate(150%) contrast(1.08) !important;
}

.page :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .compact-input,
  .image-chat-input,
  .image-prompt-field,
  .image-reference-field,
  .image-custom-size-inputs input,
  .admin-storage-limit-input,
  .admin-storage-search-input,
  .admin-user-credit-input,
  .admin-user-number-input,
  .admin-user-reason-input,
  .admin-user-storage-input
) {
  background: rgba(255, 255, 255, .22) !important;
  border: 1px solid rgba(255, 255, 255, .8) !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .8),
    inset 0 -1px 2px rgba(31, 40, 50, .12) !important;
  border-radius: 10px !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
  backdrop-filter: blur(8px) saturate(140%) !important;
  color: var(--lg-ink) !important;
}

.page :is(
  table,
  .canvas-list-table,
  .generation-history-table,
  .admin-generation-task-table,
  .admin-user-activity-table,
  .routing-health-table
) {
  background: rgba(255, 255, 255, .18) !important;
  border-color: rgba(255, 255, 255, .72) !important;
}

.page :is(th, td) {
  border-color: rgba(255, 255, 255, .58) !important;
}

.page :is(.empty, .failure-notice, .canvas-cleanup-notice, .image-reference-notice) {
  background: rgba(255, 255, 255, .2) !important;
  border-color: rgba(255, 255, 255, .76) !important;
  border-radius: 12px !important;
}

.page :is(.segmented-control, .admin-period-tabs, .asset-module-tabs) {
  background: rgba(255, 255, 255, .24) !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 12px !important;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .78), 0 5px 14px rgba(38, 48, 60, .1) !important;
}

/* Vue route surfaces use scoped attributes, so give them an id-qualified
   override to win over their component-local white backgrounds. */
#app .page :is(
  .surface,
  .account-identity,
  .account-details,
  .security-surface,
  .resource-stat,
  .model-card,
  .model-spec,
  .generation-summary,
  .generation-panel,
  .generation-row,
  .tasks-summary,
  .tasks-table-shell,
  .users-directory-table,
  .users-inspector,
  .users-metrics,
  .wallet-balance-card,
  .wallet-action-card,
  .wallet-payment-card,
  .wallet-rate,
  .wallet-recharge-panel,
  .wallet-recharge-payment,
  .wallet-record-section,
  .wallet-empty-methods,
  .prompt-workbench,
  .prompt-copy-block,
  .asset-filter-sidebar,
  .asset-search,
  .selection-panel,
  .storage-summary,
  .routing-block,
  .routing-health-block,
  .routing-overview-item,
  .routing-tabs.admin-view-choices > button
) {
  background: rgba(255, 255, 255, .3) !important;
  border: 1px solid rgba(255, 255, 255, .86) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, .9),
    inset -2px 2px 1px -1px rgba(255, 255, 255, .74),
    inset 0 0 2px rgba(20, 28, 36, .28),
    0 8px 20px rgba(38, 48, 60, .12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) contrast(1.08) !important;
  backdrop-filter: blur(14px) saturate(150%) contrast(1.08) !important;
}

#app .page :is(
  .account-identity,
  .account-details,
  .security-surface,
  .resource-stat,
  .model-card,
  .generation-summary,
  .generation-panel,
  .tasks-summary,
  .tasks-section,
  .tasks-table-shell,
  .wallet-balance-card,
  .wallet-action-card,
  .wallet-recharge-panel,
  .routing-block,
  .routing-health-block,
  .routing-overview,
  .routing-overview-item
)::before {
  border-radius: inherit !important;
}

#app .page :is(
  .account-identity input,
  .account-details input,
  .security-surface input,
  .model-card input,
  .wallet-page input,
  .wallet-page select,
  .tasks-page input,
  .tasks-page select
) {
  background: rgba(255, 255, 255, .22) !important;
  border-color: rgba(255, 255, 255, .8) !important;
  border-radius: 10px !important;
  color: var(--lg-ink) !important;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 2px rgba(31, 40, 50, .12) !important;
}

/* Keep the smaller inner surfaces translucent instead of rendering as white
   blocks against the larger glass panels. */
#app .page .model-card .model-spec {
  min-width: 0 !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .58) !important;
  border-radius: 9px !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .64),
    inset 0 -1px 2px rgba(24, 34, 46, .1) !important;
  -webkit-backdrop-filter: blur(9px) saturate(135%) !important;
  backdrop-filter: blur(9px) saturate(135%) !important;
}

#app .page .model-card .model-spec :is(span, strong, small) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Recharge packages use the same light glass language as the rest of the
   wallet while retaining teal as the action color. */
#app .page .wallet-recharge-panel .package-card,
#app .page .wallet-record-section .package-card {
  min-width: 0 !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .78),
    inset -1px -1px 0 rgba(255, 255, 255, .3),
    inset 0 0 2px rgba(21, 31, 42, .16),
    0 7px 18px rgba(38, 48, 60, .1) !important;
  -webkit-backdrop-filter: blur(12px) saturate(145%) !important;
  backdrop-filter: blur(12px) saturate(145%) !important;
}

#app .page .wallet-recharge-panel .package-card-custom,
#app .page .wallet-recharge-panel .package-card-special {
  background: rgba(255, 255, 255, .16) !important;
}

#app .page .wallet-recharge-panel .package-card .primary-btn,
#app .page .wallet-record-section .package-card .primary-btn {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  border: 1px solid rgba(92, 224, 198, .72) !important;
  background: linear-gradient(145deg, rgba(20, 184, 166, .82), rgba(15, 118, 110, .68)) !important;
  color: #f4fffc !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .34),
    inset 0 -2px 4px rgba(4, 74, 65, .2),
    0 5px 12px rgba(15, 118, 110, .16) !important;
  -webkit-backdrop-filter: blur(8px) saturate(145%) !important;
  backdrop-filter: blur(8px) saturate(145%) !important;
}

#app .page .wallet-recharge-panel .package-card-custom .field input {
  box-sizing: border-box !important;
  min-width: 0 !important;
  background: rgba(255, 255, 255, .18) !important;
  border-color: rgba(255, 255, 255, .7) !important;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .72), inset 0 -1px 2px rgba(31, 40, 50, .1) !important;
}

/* Give the lower wallet sections a consistent inset rhythm. The component
   styles leave these sections flush against their outer border, which makes
   empty states feel oversized and leaves table content without breathing room. */
#app .page .wallet-record-section {
  min-width: 0 !important;
  padding: 20px 22px 18px !important;
}

#app .page .wallet-record-section .wallet-section-head {
  min-width: 0 !important;
  margin-bottom: 14px !important;
}

#app .page .wallet-record-section .empty {
  min-height: 62px !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .62) !important;
  border-radius: 11px !important;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .58) !important;
}

#app .page .wallet-record-section .table-wrap {
  min-width: 0 !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .64) !important;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .62), 0 5px 14px rgba(38, 48, 60, .08) !important;
}

#app .page .wallet-record-section table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

#app .page .wallet-record-section th,
#app .page .wallet-record-section td {
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#app .page .wallet-record-section th:nth-child(1),
#app .page .wallet-record-section td:nth-child(1) { width: 10% !important; }
#app .page .wallet-record-section th:nth-child(2),
#app .page .wallet-record-section td:nth-child(2),
#app .page .wallet-record-section th:nth-child(3),
#app .page .wallet-record-section td:nth-child(3),
#app .page .wallet-record-section th:nth-child(4),
#app .page .wallet-record-section td:nth-child(4) { width: 13% !important; }
#app .page .wallet-record-section th:nth-child(5),
#app .page .wallet-record-section td:nth-child(5) { width: 35% !important; }
#app .page .wallet-record-section th:nth-child(6),
#app .page .wallet-record-section td:nth-child(6) { width: 16% !important; }

#app .page .wallet-record-section .wallet-pagination {
  min-width: 0 !important;
  margin-top: 14px !important;
}

@media (max-width: 800px) {
  #app .page .wallet-record-section {
    padding: 18px 16px 16px !important;
  }

  #app .page .wallet-record-section table {
    min-width: 760px !important;
    table-layout: auto !important;
  }
}

/* Separate view choices; the surrounding navigation remains unframed. */
#app .page .admin-view-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
#app .page .routing-tabs.admin-view-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#app .page .admin-view-choices > button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 80px;
  padding: 16px 20px;
  border: 1px solid #bccbc9;
  border-radius: 8px;
  background: rgba(255, 255, 255, .64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  color: #344b46;
  font: inherit;
  text-align: left;
  letter-spacing: 0;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
#app .page .admin-view-choices > button:hover { background: #f4fbf8; border-color: #538f7b; }
#app .page .admin-view-choices > button.active {
  border: 1px solid #16765d;
  background: #eaf5ef;
  box-shadow: inset 4px 0 0 #16765d;
  color: #155b47;
}
#app .page .admin-view-choices > button:focus-visible,
#app .page .tasks-window-options button:focus-visible { outline: 2px solid #16765d; outline-offset: 3px; }
#app .page .admin-view-choices span { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
#app .page .admin-view-choices small { font-size: 12px; color: #526961; }
#app .page .routing-tabs > button { flex-direction: row; align-items: center; justify-content: space-between; }
#app .page .routing-tabs strong { flex: 0 0 auto; font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* Four equal statistics, with glass on each item rather than the grid. */
#app .page .routing-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
#app .page .routing-overview-item {
  grid-column: auto;
  min-width: 0;
  min-height: 116px;
  padding: 20px;
  gap: 8px;
  justify-content: center;
  border-radius: 8px !important;
}
#app .page .routing-overview-item span,
#app .page .routing-overview-item small { font-size: 12px; line-height: 1.4; color: #526961; }
#app .page .routing-overview-item strong { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
#app .page .routing-overview-item strong em { color: #526961; }
#app .page .routing-tabs.admin-view-choices > button { border-radius: 8px !important; }
#app .page .routing-tabs.admin-view-choices > button:hover {
  background: rgba(255, 255, 255, .48) !important;
  border-color: rgba(126, 172, 154, .7) !important;
}
#app .page .routing-tabs.admin-view-choices > button.active {
  background: rgba(193, 226, 211, .32) !important;
  border-color: rgba(49, 126, 99, .6) !important;
  box-shadow: inset 4px 0 0 rgba(22, 118, 93, .85),
    inset 2px -2px 1px -1px rgba(255, 255, 255, .9),
    inset -2px 2px 1px -1px rgba(255, 255, 255, .74),
    inset 0 0 2px rgba(20, 28, 36, .28),
    0 8px 20px rgba(38, 48, 60, .12) !important;
}
@media (max-width: 760px) {
  #app .page .routing-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #app .page .routing-overview-item { min-height: 108px; padding: 16px; }
}

#app .page .tasks-section { padding: 0; border: 0; background: none; box-shadow: none; }
#app .page .tasks-filterbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 128px;
  gap: 20px 16px;
  align-items: end;
  margin: 0;
  padding: 24px 0;
  border: 0;
  border-top: 1px solid #cedbd5;
  border-bottom: 1px solid #cedbd5;
  border-radius: 0;
  background: none;
}
#app .page .tasks-filter-title { grid-column: 1 / -1; min-height: 0; }
#app .page .tasks-filter-title strong { font-size: 16px; }
#app .page .tasks-window-field { grid-column: 1 / -1; }
#app .page .tasks-filterbar .field { min-width: 0; margin: 0; }
#app .page .tasks-filterbar label { margin: 0 0 8px; font-size: 13px; color: #526961; }
#app .page .tasks-filterbar :is(select, input) { height: 44px; padding: 8px 12px; font-size: 14px; }
#app .page .tasks-window-options { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 4px; }
#app .page .tasks-window-options button { min-height: 44px; padding: 8px; font-size: 13px; }
#app .page .tasks-date-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; gap: 16px; min-width: 0; }
#app .page .tasks-apply { width: 128px; height: 44px; min-height: 44px; justify-self: end; padding: 8px 16px; }
#app .page .history-heading { margin: 28px 0 16px; }
#app .page .tasks-section-head h2 { font-size: 20px; }
#app .page .tasks-count { font-size: 13px; }
#app .page .tasks-empty { display: grid; place-items: center; min-height: 160px !important; margin: 0; padding: 24px !important; border-radius: 8px !important; }

#app .page .tasks-filterbar > *,
#app .page .tasks-section-head > *,
#app .page .tasks-view-switch > * {
  min-width: 0 !important;
}

#app .page .tasks-filter-title :is(strong, span),
#app .page .tasks-section-head :is(h2, p, .tasks-count) {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

#app .page .tasks-filterbar :is(select, input) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#app .page .tasks-window-options {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#app .page .tasks-window-options button {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  #app .page .admin-view-choices { gap: 12px; }
  #app .page .admin-view-choices > button { padding: 14px 12px; }
  #app .page .routing-tabs > button { flex-direction: column; align-items: flex-start; }
  #app .page .routing-tabs span { font-size: 14px; }
  #app .page .tasks-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #app .page .tasks-filter-title,
  #app .page .tasks-window-field,
  #app .page .tasks-apply { grid-column: 1 / -1; }
  #app .page .tasks-window-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  #app .page .tasks-filterbar, #app .page .tasks-date-range { grid-template-columns: minmax(0, 1fr); }
  #app .page .tasks-filterbar .field { grid-column: 1 / -1; }
  #app .page .tasks-apply { width: 100%; }
  #app .page .routing-tabs.admin-view-choices { gap: 8px; }
  #app .page .routing-tabs > button { padding: 12px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .page .admin-view-choices > button { transition: none; }
}


/* Final coverage for remaining route surfaces and long content. */
#app .page :is(.empty, .tasks-empty, .wallet-empty-methods, .prompt-list-empty, .prompt-preview-empty, .image-results-empty, .users-directory-table, .users-inspector, .routing-health-table, .table-wrap, .admin-generation-task-table) {
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.72), inset 0 -1px 2px rgba(31,40,50,.1), 0 7px 18px rgba(38,48,60,.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(145%) !important;
  backdrop-filter: blur(12px) saturate(145%) !important;
}
#app .page :is(.empty, .tasks-empty, .wallet-empty-methods, .prompt-list-empty, .prompt-preview-empty) {
  min-height: 84px !important; padding: 20px !important; box-sizing: border-box !important; overflow-wrap: anywhere !important;
}
#app .page :is(.users-directory-table, .users-inspector, .routing-health-table, .table-wrap, .admin-generation-task-table) { min-width:0 !important; overflow-x:auto !important; }
#app .page :is(th, td, p, span, strong, small, label, .mono, .muted) { max-width:100% !important; overflow-wrap:anywhere !important; }
#app .page :is(td, .mono) { word-break:break-word !important; }
#app .page .users-directory-table table { width:100% !important; min-width:680px !important; table-layout:fixed !important; }
#app .page .users-directory-table th, #app .page .users-directory-table td { overflow:hidden !important; text-overflow:ellipsis !important; }
#app .page .users-directory-table td:first-child { width:38% !important; }
#app .page .users-directory-table td:last-child { width:12% !important; }
@media (max-width:760px) { #app .page :is(.empty, .tasks-empty, .wallet-empty-methods, .prompt-list-empty, .prompt-preview-empty) { min-height:64px !important; padding:16px !important; } }

/* Workspace content must fill its allocated track, including empty states. */
#app .image-workbench-page .image-workbench-results-body:has(> .image-results-empty) {
  display: flex;
  flex-direction: column;
}
#app .image-workbench-page .image-results-empty {
  flex: 1 0 auto;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
}
#app .image-workbench:not(.image-workbench-inpainting) .image-content-card {
  display: flex;
  flex-direction: column;
}
#app .image-workbench:not(.image-workbench-inpainting) .image-reference-field {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#app .image-workbench:not(.image-workbench-inpainting) [data-reference-list] {
  flex: 1 0 112px;
  height: auto;
  max-height: none;
}


/* Model cards: one clear title, then a consistent metadata row. */
#app .page .model-card {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 20px !important;
}
#app .page .model-card .model-card-top {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: start !important;
  gap: 10px !important;
}
#app .page .model-card .model-card-top h3,
#app .page .model-card .model-name,
#app .page .model-card h3 {
  min-width: 0 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
  color: var(--lg-ink) !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}
#app .page .model-card .model-spec {
  margin-top: -4px !important;
  min-height: 28px !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 5px 9px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}
#app .page .model-card .model-meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 8px !important;
  margin-top: 4px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,.58) !important;
}
#app .page .model-card .model-meta > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
#app .page .model-card .model-meta > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
#app .page .model-card .model-meta > :nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
#app .page .model-card .model-status-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
  margin-top: 18px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(119, 166, 149, .45) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .28) !important;
  color: #526961 !important;
  font-size: 12px !important;
}
#app .page .model-card .model-status-row strong {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(220, 252, 231, .84);
  color: #15803d;
  font-size: 11px;
}
#app .page .model-card .model-status-row.disabled { border-color: rgba(148, 163, 184, .38) !important; }
#app .page .model-card .model-status-row.disabled strong { background: rgba(226, 232, 240, .86); color: #64748b; }
#app .page .model-card .model-meta > * {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  overflow: hidden !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}
#app .page .model-card .model-meta :is(span,small,label) {
  color: rgba(31,45,43,.62) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}
#app .page .model-card .model-meta :is(strong,b,em) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--lg-ink) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}
#app .page .model-card .model-meta .status,
#app .page .model-card .model-status {
  justify-self: start !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
}
#app .page .models-page .model-card h2 {
  margin: 14px 0 10px;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.3;
  letter-spacing: 0;
}
#app .page .models-page .model-meta > div {
  padding-top: 0;
  border-top: 0;
  overflow: visible !important;
}
#app .page .models-page .model-meta :is(span, strong) {
  white-space: normal !important;
  overflow-wrap: anywhere;
  overflow: visible !important;
  letter-spacing: 0;
}
#app .page .models-page .model-meta span { font-size: 11px !important; color: #526961 !important; }