@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Jacques+Francois&display=swap');

.jacques-francois-regular {
  font-family: "Jacques Francois", serif;
  font-weight: 400;
  font-style: normal;
}

/* ==========================================================================
   GLOBAL FONT CLASSIFICATION
   ========================================================================== */

/* 1. Branding: Jacques Francois */
.nav-logo,
.logo-name,
.sidebar-logo,
.brand-anchor-row {
  font-family: "Jacques Francois", serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
}

/* 2. Heading: Montserrat */
h1, h2, h3, h4, h5, h6,
.hero-h1,
.hero-title,
.section-h2,
.cta-h2,
.page-title,
.section-heading,
.matrix-column-title {
  font-family: 'Montserrat', sans-serif !important;
}

/* 3. Body: Open Sans */
body, p, li,
.hero-subtitle,
.bento-desc,
.step-desc,
.cta-p,
.section-p,
.brand-mission-text,
.footer-disclaimers-pane,
.tfi-desc {
  font-family: 'Open Sans', sans-serif !important;
}

/* 4. All Other: IBM Plex Sans */
input, button, select, textarea, label, table, th, td, option, a,
.stat-number, .stat-label, .badge, .hero-badge, .section-badge,
.user-tag, .navbar-drawer-item, .nav-item, .user-email, .drawer-email-oval {
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* Sync Navbar and Sidebar Items Globally (Not Bolded) */
.nav-item {
  font-weight: 400 !important;
}

/* ==========================================================================
   AMVERIC FINANCIAL - DYNAMIC RESPONSIVE STYLING
   ========================================================================== */

:root {
  --sidebar-width: 0px;
}

html {
  max-width: 100%;
  overflow-x: clip;
}
body { max-width: 100%; }

/* --- Navbar Fixed behavior on Laptop/Desktop viewports (>= 880px) --- */
@media (min-width: 880px) {
  .top-navbar {
    position: fixed !important;
    top: 0 !important;
    left: var(--sidebar-navbar-offset, var(--sidebar-width)) !important;
    width: calc(100% - var(--sidebar-navbar-offset, var(--sidebar-width))) !important;
    z-index: 1000 !important;
    background: var(--surface) !important;
    transform: none !important; /* Always stays visible and pinned */
    box-shadow: 0 1px 3px rgba(27, 43, 75, 0.05) !important;
  }
  .public-page, .main {
    padding-top: 70px !important; /* Offset content height so it doesn't hide behind fixed header */
  }
}

/* --- Center navbar elements on smaller desktop/tablet widths (880px - 1159px) --- */
@media (min-width: 880px) and (max-width: 1159px) {
  .top-navbar .nav-links,
  .top-navbar #dynamicNavLinks {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    justify-content: center !important;
  }
}

/* --- Navbar Fixed behavior on Mobile viewports (< 880px) --- */
@media (max-width: 879px) {
  .top-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: var(--surface) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease !important;
  }
  .top-navbar.nav-hidden {
    transform: translateY(-100%) !important; /* Slide out on scroll on mobile */
  }
  .public-page, .main {
    padding-top: 70px !important;
  }
}

/* --- Flexbox layout properties for top-navbar --- */
.top-navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important; /* Right-align all content by default */
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
  /* Reduce padding so elements have more room before collapsing to drawer */
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.top-navbar .nav-logo {
  flex: 0 0 auto !important;
  margin-right: auto !important; /* Pushes everything else to the right */
}

/* On signed-in pages the logo slot is empty (sidebar has it), so push nav right */
.signed-in-page .top-navbar .nav-logo {
  display: none !important;
}

/* Show and left-align navbar logo on signed-in pages when in hamburger mode (< 880px) */
@media (max-width: 879px) {
  .signed-in-page .top-navbar .nav-logo {
    position: static !important;
    transform: none !important;
    display: flex !important;
    margin-left: 10px !important;
    margin-right: auto !important;
  }
}

/* Align navbar links container to the right of the navbar globally.
   - Positioned exactly 210px from the right edge of the screen to leave room for the auth actions.
   - Since the right edge is fixed, all links (visible and hidden) maintain their coordinates across all pages. */
.top-navbar .nav-links,
.top-navbar #dynamicNavLinks {
  position: absolute !important;
  right: 210px !important;
  left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;         /* Standard gap to align with global pages */
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  transform: none !important;
}

.top-navbar .auth-actions,
.top-navbar #navbarAuthSlot {
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  align-items: center !important;
  margin-left: auto !important; /* Float auth actions to the far right edge */
  height: 100% !important;      /* Fit full height for vertical centering */
  margin-top: 0 !important;
}

/* Ensure all child items (buttons, text divs) are centered exactly */
.top-navbar .auth-actions > *,
.top-navbar #navbarAuthSlot > * {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  margin: 0 !important;
}

/* Keep the desktop sign-out control aligned with the account pill. */
.top-navbar .auth-btn {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 18px !important;
  line-height: 1 !important;
}

.top-navbar .auth-btn i {
  margin: 0 !important;
  line-height: 1 !important;
}

/* User tag: email on the LEFT, icon on the RIGHT */
.top-navbar .user-tag {
  flex-direction: row-reverse !important; /* Flips icon and email: email left, icon right */
  gap: 8px !important;
}

/* Kill the -60px negative margin baked into each template's #dynamicNavLinks. */
.top-navbar #dynamicNavLinks {
  margin-right: 0 !important;
}

/* Public desktop header: keep navigation and CTAs in one predictable flex row.
   This replaces the old fixed right offset, which changed the visual gap as
   navigation labels were added or removed. */
@media (min-width: 1060px) {
  .public-page .top-navbar .nav-links,
  .public-page .top-navbar #dynamicNavLinks {
    position: static !important;
    right: auto !important;
    left: auto !important;
    margin: 0 !important;
    gap: 22px !important;
  }

  .public-page .top-navbar .auth-actions,
  .public-page .top-navbar #navbarAuthSlot {
    margin-left: 32px !important;
    gap: 10px !important;
  }

  .public-page .top-navbar #navbarAuthSlot > .btn-login,
  .public-page .top-navbar #navbarAuthSlot > .btn-register {
    box-sizing: border-box !important;
    height: 34px !important;
    min-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    align-self: center !important;
  }
}

/* Signed-in desktop header: use the same predictable spacing model as the
   public header so navigation and demo controls never overlap. */
@media (min-width: 880px) {
  .signed-in-page .top-navbar .nav-links,
  .signed-in-page .top-navbar #dynamicNavLinks {
    position: static !important;
    right: auto !important;
    left: auto !important;
    margin: 0 !important;
    gap: 22px !important;
    transform: none !important;
  }

  .signed-in-page .top-navbar .auth-actions,
  .signed-in-page .top-navbar #navbarAuthSlot {
    margin-left: 32px !important;
    gap: 10px !important;
  }

  .signed-in-page .top-navbar .user-tag {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    box-sizing: border-box !important;
    height: 34px !important;
    min-height: 34px !important;
    padding-block: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  .signed-in-page .top-navbar .user-email,
  .signed-in-page .top-navbar .auth-btn {
    box-sizing: border-box !important;
    height: 34px !important;
    min-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
  }
}

/* The sidebar already provides full navigation at compact desktop widths, so
   keep the centered workspace label clear instead of crowding the navbar. */
@media (min-width: 880px) and (max-width: 1059px) {
  .signed-in-page .top-navbar .nav-links,
  .signed-in-page .top-navbar #dynamicNavLinks {
    display: none !important;
  }

  .signed-in-page .top-navbar .auth-actions,
  .signed-in-page .top-navbar #navbarAuthSlot {
    margin-left: auto !important;
  }
}

/* --- Hide Contact (Signed In & Auth pages) and Pricing (Signed In pages only) --- */
.signed-in-page a[href*='Contact'],
.signed-in-page a[href*='contact'],
.auth-page a[href*='Contact'],
.auth-page a[href*='contact'],
.signed-in-page a[href*='pricing'],
.signed-in-page a[href*='Pricing'] {
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

/* --- Hamburger Button --- */
.hamburger-btn {
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--navy);
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.15s ease;
  z-index: 1001;
}

.hamburger-btn:hover {
  background: var(--border);
}

.hamburger-btn:active {
  transform: scale(0.95);
}

/* --- Dimming click-away overlay --- */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(27, 43, 75, 0.3);
  backdrop-filter: blur(4px);
  z-index: 999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* ==========================================================================
   EMAIL DISPLAY OVAL STYLING (Same grey color from SignIn read-only input)
   ========================================================================== */
.user-email, .drawer-email-oval {
  background-color: #F9F9F6 !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: default !important;
  user-select: none !important;
  pointer-events: none !important;
  text-decoration: none !important;
}

/* ==========================================================================
   ALIGN PROFILE TO THE BOTTOM OF THE SIDEBAR (Reverts email at bottom)
   ========================================================================== */
.sidebar-nav {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
}

.sidebar-nav a[href*='profile'] {
  margin-top: auto !important; /* Pushes profile navigation item to the bottom of left sidebar */
}

.sidebar-foot {
  flex: 0 0 auto !important;
  padding: 14px 18px 16px !important;
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.sidebar-foot i {
  margin: 2px 0 0 !important;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.5) !important;
}
.sidebar-foot span { min-width: 0; flex: 1; }

/* Hide left hamburger button when sidebar drawer is fully loaded/open */
body:has(.sidebar.active) .left-hamburger {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   RIGHT-SIDE SIDEBAR DRAWER BASELINE
   ========================================================================== */
.right-drawer {
  position: fixed !important;
  top: 0 !important;
  right: -280px !important; /* Offscreen */
  width: 280px !important;
  max-width: calc(100vw - 60px) !important;
  height: 100vh !important;
  z-index: 1010 !important;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: -10px 0 25px rgba(27, 43, 75, 0.18) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px !important;
}

.right-drawer.active {
  right: 0 !important;
}

/* Drawer UI Elements */
.navbar-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  border-radius: 8px;
  margin-bottom: 4px;
}

.navbar-drawer-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 4px;
  transition: background 0.2s, color 0.2s;
}

.navbar-drawer-dropdown-toggle i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.navbar-drawer-dropdown-toggle.active i {
  transform: rotate(180deg);
}

.navbar-drawer-dropdown-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.navbar-drawer-dropdown-menu.open {
  max-height: 500px;
}

.navbar-drawer-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.drawer-email-container {
  margin-top: 15px;
  padding: 14px 16px;
  display: flex;
  justify-content: center;
}

/* Centered, bold button style for signout button */
.navbar-drawer-signout {
  margin: auto auto 10px auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: calc(100% - 32px) !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background: #EF4444 !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
  text-align: center !important;
  text-decoration: none !important;
}

.navbar-drawer-signout:hover {
  background: #D32F2F !important;
}

.navbar-drawer-signout:active {
  transform: scale(0.98) !important;
}

/* ==========================================================================
   STYLE A: SIGNED-IN PROFILE DRAWER (Same white/cream format as top navbar)
   ========================================================================== */
#navbar-profile-sidebar {
  background: var(--surface) !important;
  border-left: 1px solid var(--border) !important;
}

#navbar-profile-sidebar .navbar-drawer-item {
  color: var(--text) !important;
}

#navbar-profile-sidebar .navbar-drawer-item:hover {
  background: rgba(27, 43, 75, 0.05) !important;
  color: var(--navy) !important;
}

#navbar-profile-sidebar .navbar-drawer-dropdown-toggle {
  color: var(--text) !important;
}

#navbar-profile-sidebar .navbar-drawer-dropdown-toggle:hover {
  background: rgba(27, 43, 75, 0.05) !important;
  color: var(--navy) !important;
}

#navbar-profile-sidebar .navbar-drawer-subitem {
  color: var(--text-muted) !important;
}

#navbar-profile-sidebar .navbar-drawer-subitem:hover {
  background: rgba(27, 43, 75, 0.03) !important;
  color: var(--navy) !important;
}

/* ==========================================================================
   STYLE B: NON-SIGNED-IN DRAWER (Same dark navy format as page sidebar)
   ========================================================================== */
#public-navbar-sidebar {
  background: var(--navy) !important;
  right: auto !important;
  left: -280px !important; /* Start offscreen on the left */
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 10px 0 25px rgba(27, 43, 75, 0.18) !important;
}

#public-navbar-sidebar.active {
  left: 0 !important;
  right: auto !important;
}

#public-navbar-sidebar .navbar-drawer-item {
  color: rgba(255, 255, 255, 0.7) !important;
}

#public-navbar-sidebar .navbar-drawer-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: white !important;
}

#public-navbar-sidebar .navbar-drawer-dropdown-toggle {
  color: rgba(255, 255, 255, 0.7) !important;
}

#public-navbar-sidebar .navbar-drawer-dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: white !important;
}

#public-navbar-sidebar .navbar-drawer-subitem {
  color: rgba(255, 255, 255, 0.5) !important;
}

#public-navbar-sidebar .navbar-drawer-subitem:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: white !important;
}

.drawer-footer-buttons {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer-btn-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white !important;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  transition: background 0.2s;
}

.drawer-btn-signin:hover {
  background: rgba(255, 255, 255, 0.05);
}

.drawer-btn-getstarted {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--green-mid) !important;
  color: white !important;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  transition: opacity 0.2s;
}

.drawer-btn-getstarted:hover {
  opacity: 0.9;
}


/* ==========================================================================
   PUBLIC PAGES OPTIMIZATIONS (Dynamic Font Scaling & Above-The-Fold Peek)
   ========================================================================== */
.public-page h1, .public-page .hero-title {
  font-size: clamp(30px, 5.5vw, 56px) !important;
}

.public-page h2 {
  font-size: clamp(24px, 4vw, 42px) !important;
}

.public-page p, .public-page .hero-subtitle {
  font-size: clamp(14px, 2.2vw, 19px) !important;
}

/* Prevent dynamic font scaling leak into the footer context */
.amveric-footer p {
  font-size: inherit !important;
}
.amveric-footer .brand-mission-text {
  font-size: 13.5px !important;
}
.amveric-footer .footer-disclaimers-pane,
.amveric-footer .footer-disclaimers-pane p {
  font-size: 11px !important;
}

/* Ensure next card below is slightly visible (above-the-fold design rule) */
.public-page main > .framed-card-section:first-of-type {
  min-height: 520px !important;
  height: 72vh !important;
}


/* ==========================================================================
   1. HAMBURGER MODE (0px to 879px)
   - Sidebar collapses when it would be too narrow for labels to fully show
   ========================================================================== */
@media (max-width: 879px) {
  .top-navbar {
    padding: 0 16px !important; /* Position left/right items closer to mobile screen edges symmetrically */
  }

  .layout {
    display: block !important;
    min-height: 100vh;
    padding-top: 70px !important; /* Push main down under fixed header */
  }

  .main {
    margin-left: 0 !important;
    width: 100% !important;
    padding-top: 0 !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -300px !important;
    width: 280px !important;
    max-width: calc(100vw - 60px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 1010 !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
  }

  .sidebar.active {
    left: 0 !important;
  }

  .sidebar-nav .nav-item {
    padding: 16px 20px !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
    min-height: 48px;
  }

  /* Show left hamburger in hamburger mode */
  .left-hamburger {
    display: flex !important;
  }
}


/* ==========================================================================
   2. NAVBAR DYNAMIC COLLAPSE ACCORDING TO RESOLUTION BREAKPOINTS (LEFT TO RIGHT)
   ========================================================================== */

/* A. PUBLIC PAGES ONLY: Collapse all links into the hamburger drawer at 1060px */
@media (max-width: 1059px) {
  .public-page .top-navbar .nav-links,
  .public-page .top-navbar #dynamicNavLinks {
    display: none !important; /* Hide completely all at once */
  }
  .public-hamburger {
    display: flex !important; /* Show hamburger button */
  }
}

/* B. SIGNED IN PAGES ONLY: All 4 links (Home, About, Features, Community) stay visible down to 880px */
@media (max-width: 879px) {
  .signed-in-page .top-navbar .nav-links,
  .signed-in-page .top-navbar #dynamicNavLinks {
    display: none !important;
  }
}

/* C. USER ICON & SIGN OUT BUTTON VISIBILITY ENGINE (>= 880px vs < 880px) */
@media (min-width: 880px) {
  .top-navbar .auth-btn {
    display: flex !important;
  }
  .top-navbar .user-tag i {
    display: none !important;
  }
  .top-navbar .user-tag .user-email {
    display: inline-flex !important;
  }
}

@media (max-width: 879px) {
  .top-navbar .auth-btn {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 15px 0 0 !important; /* Spacing only on the right to separate from logo/links */
  }
  .hamburger-btn i {
    font-size: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .top-navbar .user-tag {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }
  .top-navbar .user-tag i {
    display: block !important;
    font-size: 24px !important;
    color: var(--navy) !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .top-navbar .user-tag .user-email {
    display: none !important;
  }
  .auth-actions {
    margin-left: auto !important;
    gap: 0 !important;
  }
}


/* ==========================================================================
   3. PERSISTENT SIDEBAR - PROGRESSIVE SHRINK (880px → 1100px)
   Sidebar stays between 220px and 240px so the longest navigation label keeps
   its icon, full name, and padding. Below 880px, hamburger mode kicks in.
   ========================================================================== */
@media (min-width: 880px) {
  .layout {
    display: grid !important;
    --sidebar-expanded-width: clamp(220px, calc(220px + 20px * ((100vw - 880px) / 220px)), 240px);
    --sidebar-width: var(--sidebar-expanded-width);
    --sidebar-navbar-offset: var(--sidebar-expanded-width);
    grid-template-columns: var(--sidebar-width) 1fr !important;
    min-height: 100vh;
    transition: grid-template-columns 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .main {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    width: auto !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--sidebar-width) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    box-shadow: none !important;
    z-index: 1010 !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Sidebar logo area clips cleanly */
  .sidebar .sidebar-logo {
    overflow: hidden !important;
    white-space: nowrap !important;
    /* Padding shrinks fluidly */
    padding: 17.5px clamp(10px, calc(10px + 10px * ((100vw - 880px) / 220px)), 20px) !important;
    gap: clamp(6px, calc(6px + 4px * ((100vw - 880px) / 220px)), 10px) !important;
  }

  .sidebar .logo-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  /* Nav item label truncation: icon stays, text gets "..." before it clips */
  .sidebar-nav .nav-item {
    overflow: hidden !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    padding: 9px clamp(6px, calc(6px + 4px * ((100vw - 880px) / 220px)), 10px) !important;
    gap: clamp(6px, calc(6px + 4px * ((100vw - 880px) / 220px)), 10px) !important;
    justify-content: flex-start !important; /* Force left-align icons and labels */
  }

  /* Text label inside nav items */
  .sidebar-nav .nav-item > .nav-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
}

/* At >= 1100px: sidebar locks to full 240px */
@media (min-width: 1100px) {
  .layout {
    --sidebar-expanded-width: 240px;
    --sidebar-width: var(--sidebar-expanded-width);
    --sidebar-navbar-offset: var(--sidebar-expanded-width);
    grid-template-columns: var(--sidebar-width) 1fr !important;
  }
  .sidebar {
    width: var(--sidebar-width) !important;
  }
}

/* Desktop sidebar resizing. Navbar contents keep their expanded coordinates while the
   account sidebar moves independently beneath them. */
.sidebar-collapse-toggle,
.sidebar-resize-handle,
.sidebar-restore-trigger { display: none; }

@media (min-width: 880px) {
  .sidebar-collapse-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 2;
    width: 30px;
    height: 30px;
    min-height: 30px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    opacity: 0.72;
    transform: translateY(-50%);
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
  }
  .sidebar-collapse-toggle:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    opacity: 1;
  }
  .sidebar-collapse-toggle:focus-visible {
    outline: 3px solid rgba(82, 183, 136, 0.48);
    outline-offset: 2px;
  }

  .sidebar .sidebar-logo {
    position: relative;
    padding-right: 52px !important;
  }

  .layout.sidebar-is-resized .top-navbar::before {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    bottom: -1px;
    width: max(0px, calc(var(--sidebar-navbar-offset) - var(--sidebar-width)));
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    pointer-events: none;
  }

  .layout.sidebar-is-resizing {
    transition: none;
  }
  .layout.sidebar-is-resizing > .sidebar {
    transition: none !important;
  }

  .layout.sidebar-is-hidden > .sidebar,
  .layout.sidebar-will-collapse > .sidebar {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    pointer-events: none;
  }

  /* Three-state sidebar: the middle snap point is a purpose-built icon rail. */
  .layout.sidebar-is-icon > .sidebar,
  .layout.sidebar-will-icon > .sidebar { width: 72px !important; }

  .layout.sidebar-is-icon .sidebar-logo.sidebar-user-header,
  .layout.sidebar-will-icon .sidebar-logo.sidebar-user-header {
    min-height: 56px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .layout.sidebar-is-icon .sidebar-brand-name,
  .layout.sidebar-will-icon .sidebar-brand-name { display: none !important; }
  .layout.sidebar-is-icon .sidebar-brand,
  .layout.sidebar-will-icon .sidebar-brand {
    position: absolute;
    left: 10px;
    width: 22px;
    justify-content: center;
  }
  .layout.sidebar-is-icon .sidebar-brand-mark,
  .layout.sidebar-will-icon .sidebar-brand-mark {
    width: 22px;
    height: 22px;
    border-radius: 6px;
  }
  .layout.sidebar-is-icon .sidebar-collapse-toggle,
  .layout.sidebar-will-icon .sidebar-collapse-toggle {
    right: 8px;
    left: auto;
    width: 24px;
    height: 24px;
    min-height: 24px;
    font-size: 13px;
  }

  .layout.sidebar-is-icon .sidebar-nav,
  .layout.sidebar-will-icon .sidebar-nav {
    padding: 10px 8px !important;
    scrollbar-width: none;
  }
  .layout.sidebar-is-icon .sidebar-nav::-webkit-scrollbar,
  .layout.sidebar-will-icon .sidebar-nav::-webkit-scrollbar { display: none; }

  .layout.sidebar-is-icon .sidebar-nav > .nav-item,
  .layout.sidebar-will-icon .sidebar-nav > .nav-item {
    width: 40px !important;
    min-height: 40px !important;
    margin: 2px auto 6px !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 8px !important;
  }
  .layout.sidebar-is-icon .sidebar-nav > .nav-item > i,
  .layout.sidebar-will-icon .sidebar-nav > .nav-item > i { font-size: 18px !important; }
  .layout.sidebar-is-icon .sidebar-nav .nav-label,
  .layout.sidebar-will-icon .sidebar-nav .nav-label,
  .layout.sidebar-is-icon .sidebar-group-chevron,
  .layout.sidebar-will-icon .sidebar-group-chevron { display: none !important; }

  .layout.sidebar-is-icon .sidebar-nav-dropdown,
  .layout.sidebar-will-icon .sidebar-nav-dropdown {
    width: 52px;
    margin: 6px auto !important;
    padding-top: 5px;
  }
  .layout.sidebar-is-icon .sidebar-group-summary,
  .layout.sidebar-will-icon .sidebar-group-summary {
    width: 40px;
    min-height: 40px;
    margin: 0 auto;
    padding: 0 !important;
    justify-content: center;
    gap: 0;
  }
  .layout.sidebar-is-icon .sidebar-group-summary > i:first-child,
  .layout.sidebar-will-icon .sidebar-group-summary > i:first-child { font-size: 18px; }
  .layout.sidebar-is-icon .sidebar-nav-dropdown[open] > .sidebar-group-summary,
  .layout.sidebar-will-icon .sidebar-nav-dropdown[open] > .sidebar-group-summary {
    background: rgba(255, 255, 255, 0.07);
    color: #74c69d;
  }

  .layout.sidebar-is-icon .sidebar-group-items,
  .layout.sidebar-will-icon .sidebar-group-items {
    position: relative;
    width: 48px;
    margin: 3px 0 0 4px;
    padding: 3px 0 3px 10px;
  }
  .layout.sidebar-is-icon .sidebar-group-items::before,
  .layout.sidebar-will-icon .sidebar-group-items::before {
    inset: 3px auto 5px 5px;
    background: rgba(255, 255, 255, 0.22);
  }
  .layout.sidebar-is-icon .sidebar-nav .sidebar-subitem,
  .layout.sidebar-will-icon .sidebar-nav .sidebar-subitem {
    position: relative;
    width: 36px !important;
    min-height: 34px !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 7px !important;
  }
  .layout.sidebar-is-icon .sidebar-nav .sidebar-subitem::before,
  .layout.sidebar-will-icon .sidebar-nav .sidebar-subitem::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 7px;
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
  }
  .layout.sidebar-is-icon .sidebar-nav .sidebar-subitem > i,
  .layout.sidebar-will-icon .sidebar-nav .sidebar-subitem > i { font-size: 15px !important; }

  .layout.sidebar-is-icon .sidebar-utility-tools,
  .layout.sidebar-will-icon .sidebar-utility-tools {
    width: 40px;
    margin: 8px auto 6px;
    flex-direction: column;
  }
  .layout.sidebar-is-icon .sidebar-visibility-trigger,
  .layout.sidebar-will-icon .sidebar-visibility-trigger,
  .layout.sidebar-is-icon .sidebar-settings-trigger,
  .layout.sidebar-will-icon .sidebar-settings-trigger {
    width: 34px;
    flex: 0 0 34px;
    margin: 0 !important;
  }
  .layout.sidebar-is-icon .sidebar-utility-label,
  .layout.sidebar-will-icon .sidebar-utility-label { display: none; }
  .layout.sidebar-is-icon .sidebar-foot,
  .layout.sidebar-will-icon .sidebar-foot {
    min-height: 54px;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    color: transparent !important;
    font-size: 0 !important;
  }
  .layout.sidebar-is-icon .sidebar-foot i,
  .layout.sidebar-will-icon .sidebar-foot i {
    color: rgba(255, 255, 255, 0.45);
    font-size: 15px;
  }

  .sidebar-resize-handle {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: max(0px, calc(var(--sidebar-width) - 5px));
    z-index: 1020;
    width: 10px;
    display: block;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    outline: 0;
  }
  .sidebar-resize-handle::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    border-radius: 1px;
    background: transparent;
    transition: background-color 160ms ease, box-shadow 160ms ease;
  }
  .sidebar-resize-handle:hover::before,
  .sidebar-resize-handle:focus-visible::before,
  .is-resizing-sidebar .sidebar-resize-handle::before {
    background: var(--green-mid);
    box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.2);
  }
  .sidebar-resize-handle[hidden] { display: none; }

  .sidebar-restore-trigger {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--sidebar-navbar-offset) + 16px);
    z-index: 1020;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--navy);
    box-shadow: 0 8px 24px rgba(27, 43, 75, 0.14);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
  }
  .sidebar-restore-trigger:not([hidden]) { display: inline-flex; }
  .sidebar-restore-trigger:hover {
    border-color: rgba(45, 106, 79, 0.34);
    background: #E9F2ED;
    color: var(--green);
  }
  .sidebar-restore-trigger:active { transform: translateY(calc(-50% + 1px)); }
  .sidebar-restore-trigger:focus-visible {
    outline: 3px solid rgba(82, 183, 136, 0.38);
    outline-offset: 2px;
  }
  .sidebar-restore-trigger i { font-size: 20px; }

  body.is-resizing-sidebar,
  body.is-resizing-sidebar * {
    cursor: col-resize !important;
    user-select: none !important;
  }
}

/* ==========================================================================
   PUBLIC USER ICON DROPDOWN FOR CONDENSED VIEWPORTS (< 880px)
   ========================================================================== */
.top-navbar #navbarAuthSlot .public-user-dropdown-container,
.top-navbar .auth-actions .public-user-dropdown-container,
.public-user-dropdown-container {
  position: relative !important;
  display: none !important; /* Hidden by default on desktop, overrides generic parent wildcard rules */
}

.public-user-icon-btn {
  background: transparent !important;
  border: none !important;
  font-size: 26px !important;
  color: var(--navy) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  transition: background 0.2s ease !important;
}

.public-user-icon-btn:hover {
  background: rgba(27, 43, 75, 0.05) !important;
}

.public-user-dropdown {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 8px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(27, 43, 75, 0.08) !important;
  display: none !important;
  flex-direction: column !important;
  min-width: 160px !important;
  z-index: 1050 !important;
  overflow: hidden !important;
}

.public-user-dropdown.show {
  display: flex !important;
}

.public-user-dropdown a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  color: var(--navy) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: background 0.2s ease !important;
}

.public-user-dropdown a:hover {
  background: #F9F9F6 !important;
}

.public-user-dropdown a i {
  font-size: 16px !important;
  color: var(--green) !important;
}

@media (max-width: 649px) {
  /* Hide all standard auth buttons and label texts on mobile viewports */
  .top-navbar .auth-actions > :not(.public-user-dropdown-container),
  .top-navbar #navbarAuthSlot > :not(.public-user-dropdown-container) {
    display: none !important;
  }
  /* Show user dropdown container */
  .top-navbar #navbarAuthSlot .public-user-dropdown-container,
  .top-navbar .auth-actions .public-user-dropdown-container,
  .public-user-dropdown-container {
    display: block !important;
  }
}

@media (max-width: 500px) {
  .top-navbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
    height: 60px !important;
  }
  .top-navbar .nav-logo {
    font-size: 18px !important;
  }
  .top-navbar .nav-logo span {
    font-size: 17px !important;
  }
  .top-navbar .nav-logo .logo-coin {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }
  .hamburger-btn {
    width: 36px !important;
    height: 36px !important;
    margin-right: 8px !important;
  }
  .hamburger-btn i {
    font-size: 20px !important;
  }
  .top-navbar .user-tag i,
  .public-user-icon-btn i {
    font-size: 22px !important;
  }
  .public-page, .main {
    padding-top: 60px !important;
  }
}

/* Signed-in chrome: a slimmer navbar and a personal identity in place of the
   product logo. */
.signed-in-page .top-navbar {
  height: 56px !important;
  min-height: 56px !important;
}
.signed-in-page .main { padding-top: 56px !important; }
.signed-in-page .top-navbar .nav-links,
.signed-in-page .top-navbar #dynamicNavLinks,
.signed-in-page .top-navbar .nav-item { height: 56px !important; }
.sidebar-logo.sidebar-user-header {
  position: relative;
  min-height: 56px !important;
  padding: 0 52px 0 20px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.sidebar-brand:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.sidebar-brand-mark {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 8px;
  object-fit: cover;
}
.sidebar-brand-name {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user-name,
.signed-in-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 600 !important;
}
.sidebar-user-name { color: #fff; font-size: 14px; }
.signed-in-user-name { color: var(--navy); font-size: 15px; }

/* Signed-in sidebar groups use native details/summary behavior for predictable
   keyboard navigation and compact feature discovery. */
.signed-in-page .sidebar-nav {
  min-height: 0;
  overflow-y: hidden;
  overscroll-behavior: contain;
}
.signed-in-page .sidebar-nav.is-overflowing { overflow-y: auto; }

/* Dashboard is the canonical desktop sidebar. Keep every signed-in surface on
   the same navigation rhythm even when a page ships older local sidebar CSS. */
@media (min-width: 880px) {
  .signed-in-page .sidebar-nav {
    padding: 14px !important;
  }
  .signed-in-page .sidebar-nav > .nav-item {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    margin: 0 0 4px !important;
    padding: 9px 10px !important;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px !important;
    border-radius: 9px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.2;
  }
  .signed-in-page .sidebar-nav > .nav-item > i,
  .signed-in-page .sidebar-group-summary > i:first-child,
  .signed-in-page .sidebar-nav .sidebar-subitem > i {
    width: 16px;
    flex: 0 0 16px;
    text-align: center;
  }
  .signed-in-page .sidebar-group-summary,
  .signed-in-page .sidebar-nav .sidebar-subitem {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  }
}
.sidebar-nav-dropdown {
  margin: 5px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 5px;
}
.sidebar-group-summary {
  min-height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.58);
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sidebar-group-summary::-webkit-details-marker { display: none; }
.sidebar-group-summary::marker { content: ''; }
.sidebar-group-summary:hover,
.sidebar-group-summary:focus-visible,
.sidebar-nav-dropdown[open] > .sidebar-group-summary { color: rgba(255, 255, 255, 0.9); }
.sidebar-group-summary:focus-visible {
  outline: 3px solid rgba(82, 183, 136, 0.48);
  outline-offset: -2px;
}
.sidebar-group-summary > i:first-child { flex: 0 0 auto; font-size: 15px; }
.sidebar-group-summary .nav-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-group-chevron {
  flex: 0 0 auto;
  font-size: 13px;
  transition: transform 160ms ease-out;
}
.sidebar-nav-dropdown[open] .sidebar-group-chevron { transform: rotate(180deg); }
.sidebar-group-items {
  position: relative;
  padding: 3px 0 2px 18px;
}
.sidebar-group-items::before {
  content: '';
  position: absolute;
  inset: 4px auto 5px 16px;
  width: 1px;
  background: rgba(255, 255, 255, 0.11);
}
.sidebar-nav .sidebar-subitem {
  position: relative;
  min-height: 34px;
  margin: 1px 0 1px 7px !important;
  padding: 6px 9px !important;
  gap: 9px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
}
.sidebar-nav .sidebar-subitem i { font-size: 14px; }
.sidebar-nav .sidebar-subitem.on {
  background: rgba(82, 183, 136, 0.16) !important;
  color: #74c69d !important;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-group-chevron { transition: none; }
}

/* User-controlled signed-in sidebar preferences. */
.sidebar-nav-user-hidden { display: none !important; }

.sidebar-utility-tools {
  width: auto;
  margin: 10px 14px 8px;
  padding-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.sidebar-visibility-trigger,
.sidebar-settings-trigger {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.sidebar-visibility-trigger:hover,
.sidebar-settings-trigger:hover,
.sidebar-settings-trigger.is-active { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.9); }
.sidebar-visibility-trigger:focus-visible,
.sidebar-settings-trigger:focus-visible { outline: 3px solid rgba(82, 183, 136, 0.48); outline-offset: 2px; }
.sidebar-visibility-trigger i,
.sidebar-settings-trigger i { flex: 0 0 auto; font-size: 16px; }
.signed-in-page .sidebar-visibility-trigger,
.signed-in-page .sidebar-settings-trigger {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.sidebar-utility-label {
  min-width: 0;
  overflow: hidden;
  font: inherit !important;
  text-overflow: ellipsis;
}

.sidebar-sort-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sidebar-customizer-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(720px, calc(100dvh - 48px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #14223a;
  box-shadow: 0 28px 80px rgba(20, 34, 58, 0.24);
}
.sidebar-customizer-dialog::backdrop { background: rgba(20, 34, 58, 0.46); backdrop-filter: blur(2px); }
.sidebar-customizer-form { display: flex; flex-direction: column; max-height: min(720px, calc(100dvh - 48px)); }
.sidebar-customizer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 26px 20px; border-bottom: 1px solid #dce3e0; }
.sidebar-customizer-header h2 { margin: 0; color: #14223a; font-size: 19px; line-height: 1.2; }
.sidebar-customizer-header p { max-width: 60ch; margin: 7px 0 0; color: #66716d; font-size: 12px; line-height: 1.55; }
.sidebar-editor-header-actions { display: flex; align-items: center; gap: 5px; }
.sidebar-editor-header-actions .sidebar-customizer-icon:last-child { margin-left: 3px; }
.sidebar-customizer-icon { width: 36px; height: 36px; flex: 0 0 auto; border: 0; border-radius: 9px; background: #f1f4f3; color: #66716d; cursor: pointer; }
.sidebar-customizer-icon:hover { background: #f1f4f3; color: #14223a; }
.sidebar-customizer-icon:disabled { opacity: .38; cursor: not-allowed; }
.sidebar-customizer-icon:disabled:hover { color: #66716d; }
.sidebar-customizer-body { overflow-y: auto; padding: 20px 26px 24px; background: #f8faf9; }
.sidebar-customizer-list { display: grid; gap: 5px; }
.sidebar-customizer-row { min-height: 48px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 7px; }
.sidebar-visibility-dialog .sidebar-customizer-row { grid-template-columns: auto minmax(0, 1fr); }
.sidebar-customizer-row:hover { background: #f1f4f3; }
.sidebar-customizer-row > input { width: 18px; height: 18px; accent-color: #2d6a4f; }
.sidebar-customizer-row > label { min-width: 0; display: flex; align-items: center; gap: 9px; color: #14223a; font-size: 13px; font-weight: 600; }
.sidebar-customizer-row > label i { color: #66716d; font-size: 16px; }
.sidebar-customizer-row-actions { display: flex; gap: 2px; }
.sidebar-customizer-row-actions button { width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: #66716d; cursor: pointer; }
.sidebar-customizer-row-actions button:hover { background: #fff; color: #14223a; }
.sidebar-customizer-row-actions button:disabled { opacity: 0.28; cursor: not-allowed; }
.sidebar-customizer-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid #dce3e0; background: #fff; }
.sidebar-customizer-button { min-height: 40px; padding: 0 15px; border-radius: 9px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.sidebar-customizer-button.secondary { border: 1px solid #cbd5d1; background: #fff; color: #14223a; }
.sidebar-customizer-button.secondary:hover { background: #f1f4f3; }
.sidebar-customizer-button.primary { border: 1px solid #2d6a4f; background: #2d6a4f; color: #fff; }
.sidebar-customizer-button.primary:hover { background: #245940; }
.sidebar-customizer-button.danger { border: 1px solid #a83731; background: #a83731; color: #fff; }
.sidebar-customizer-button.danger:hover { background: #8f2d28; }
.sidebar-customizer-button:active { transform: translateY(1px); }
.sidebar-customizer-button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.sidebar-customizer-button:disabled:hover { background: #f1f4f3; }
.sidebar-customizer-dialog button:focus-visible,
.sidebar-customizer-dialog input:focus-visible,
.sidebar-customizer-dialog select:focus-visible,
.sidebar-confirmation-dialog button:focus-visible,
.sidebar-restore-pages-dialog button:focus-visible { outline: 3px solid rgba(82, 183, 136, 0.4); outline-offset: 2px; }

.sidebar-confirmation-dialog {
  width: min(448px, calc(100vw - 32px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dce3e0;
  border-radius: 18px;
  background: #fff;
  color: #14223a;
  box-shadow: 0 28px 80px rgba(20, 34, 58, .24), 0 4px 14px rgba(20, 34, 58, .08);
}
.sidebar-confirmation-dialog::backdrop { background: rgba(20, 34, 58, .46); backdrop-filter: blur(3px); }
.sidebar-confirmation-card { display: block; }
.sidebar-confirmation-body { display: flex; align-items: flex-start; gap: 14px; padding: 24px 24px 20px; }
.sidebar-confirmation-icon { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #fbeceb; color: #a83731; font-size: 19px; }
.sidebar-confirmation-dialog[data-variant="visibility"] .sidebar-confirmation-icon { background: #eaf4ef; color: #2d6a4f; }
.sidebar-confirmation-copy { min-width: 0; }
.sidebar-confirmation-kicker { display: block; margin: 1px 0 5px; color: #7b8581; font-size: 10px; font-weight: 800; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; }
.sidebar-confirmation-card h2 { margin: 0; color: #14223a; font-size: 19px; line-height: 1.3; letter-spacing: -.015em; }
.sidebar-confirmation-card p { margin: 8px 0 0; color: #66716d; font-size: 13px; line-height: 1.55; }
.sidebar-confirmation-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid #e3e8e6; background: #f8faf9; }
.sidebar-confirmation-skip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: #66716d; font-size: 11px; font-weight: 700; cursor: pointer; }
.sidebar-confirmation-skip[hidden] { display: none; }
.sidebar-confirmation-skip input { width: 16px; height: 16px; margin: 0; accent-color: #2d6a4f; cursor: pointer; }
.sidebar-confirmation-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-left: auto; }
.sidebar-confirmation-buttons .sidebar-customizer-button { min-width: 104px; }

@media (max-width: 480px) {
  .sidebar-confirmation-actions { align-items: stretch; flex-direction: column; }
  .sidebar-confirmation-buttons { width: 100%; }
  .sidebar-confirmation-buttons .sidebar-customizer-button { flex: 1; }
}

.sidebar-restore-pages-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: min(620px, calc(100dvh - 48px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #14223a;
  box-shadow: 0 24px 70px rgba(20, 34, 58, .28);
}
.sidebar-restore-pages-dialog::backdrop { background: rgba(20, 34, 58, .42); backdrop-filter: blur(2px); }
.sidebar-restore-pages-card { display: flex; flex-direction: column; max-height: min(620px, calc(100dvh - 48px)); }
.sidebar-restore-pages-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 21px 22px 17px; border-bottom: 1px solid #dce3e0; }
.sidebar-restore-pages-card h2 { margin: 0; color: #14223a; font-size: 18px; }
.sidebar-restore-pages-card header p { margin: 6px 0 0; color: #66716d; font-size: 12px; line-height: 1.5; }
.sidebar-restore-pages-list { min-height: 110px; overflow-y: auto; display: grid; align-content: start; gap: 7px; padding: 16px 22px; background: #f8faf9; }
.sidebar-restore-page-row { min-height: 56px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 9px; border: 1px solid #dce3e0; border-radius: 10px; background: #fff; }
.sidebar-restore-page-row > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #e9f2ed; color: #2d6a4f; font-size: 16px; }
.sidebar-restore-page-row div { min-width: 0; display: grid; gap: 2px; }
.sidebar-restore-page-row strong { overflow: hidden; color: #14223a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-restore-page-row span { color: #66716d; font-size: 10px; }
.sidebar-restore-page-row .sidebar-customizer-button { min-height: 34px; }
.sidebar-restore-pages-empty { margin: auto; color: #66716d; font-size: 12px; text-align: center; }
.sidebar-restore-pages-card > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 22px; border-top: 1px solid #dce3e0; }

.sidebar-editor-section + .sidebar-editor-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid #dce3e0; }
.sidebar-editor-section-heading { margin-bottom: 12px; display: flex; justify-content: space-between; gap: 16px; }
.sidebar-editor-section-heading h3 { margin: 0; color: #14223a; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.3; }
.sidebar-editor-section-heading p { margin: 4px 0 0; color: #66716d; font-size: 11px; line-height: 1.5; }
.sidebar-editor-list { display: grid; gap: 7px; }
.sidebar-editor-entry { overflow: hidden; border: 1px solid #dce3e0; border-radius: 9px; background: #fff; }
.sidebar-editor-entry.is-dragging { opacity: .42; }
.sidebar-editor-entry.is-drop-target { border-color: #6f9b85; box-shadow: inset 0 0 0 1px #6f9b85; }
.sidebar-editor-entry-row { min-height: 48px; padding: 6px 8px; display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.sidebar-editor-drag-handle { width: 24px; height: 32px; display: grid; place-items: center; color: #82908a; cursor: grab; }
.sidebar-editor-drag-handle:active { cursor: grabbing; }
.sidebar-editor-entry-row > input[type='checkbox'],
.sidebar-editor-child-row > input[type='checkbox'] { width: 17px; height: 17px; accent-color: #2d6a4f; }
.sidebar-editor-entry-row > i { color: #66716d; font-size: 16px; }
.sidebar-editor-static-label { min-width: 0; overflow: hidden; color: #14223a; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-editor-name-input { width: 100%; min-width: 0; height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #14223a; font-size: 13px; font-weight: 650; }
.sidebar-editor-name-input:hover { border-color: #dce3e0; background: #f8faf9; }
.sidebar-editor-name-input:focus { border-color: #8db39f; background: #fff; }
.sidebar-editor-row-actions { display: flex; align-items: center; gap: 2px; }
.sidebar-editor-icon-button { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #66716d; cursor: pointer; }
.sidebar-editor-icon-button:hover { background: #f1f4f3; color: #14223a; }
.sidebar-editor-icon-button:disabled { opacity: .28; cursor: not-allowed; }
.sidebar-editor-row-actions .sidebar-editor-icon-button:last-child:hover,
.sidebar-editor-child-row .sidebar-editor-icon-button:hover { background: #fbeceb; color: #a83731; }
.sidebar-editor-children { padding: 5px 10px 9px 41px; border-top: 1px solid #edf1ef; background: #f8faf9; }
.sidebar-editor-children.is-page-drop-target { background: #edf5f1; box-shadow: inset 0 0 0 1px #6f9b85; }
.sidebar-editor-child-row { min-height: 38px; display: grid; grid-template-columns: 22px auto auto minmax(0, 1fr) minmax(110px, .55fr) auto; align-items: center; gap: 7px; color: #4f5e58; font-size: 12px; }
.sidebar-editor-child-row.is-dragging { opacity: .42; }
.sidebar-editor-page-drag-slot { width: 22px; height: 30px; display: grid; place-items: center; color: transparent; }
.sidebar-editor-page-node { cursor: grab; }
.sidebar-editor-page-node:active { cursor: grabbing; }
.sidebar-editor-page-node:focus-visible { outline: 2px solid rgba(20, 34, 58, .28); outline-offset: 1px; }
.sidebar-editor-child-row > i { color: #7d8b85; font-size: 14px; }
.sidebar-editor-child-row .sidebar-editor-name-input { height: 30px; font-size: 12px; font-weight: 600; }
.sidebar-editor-page-group-select { width: 100%; min-width: 0; height: 30px; padding: 0 25px 0 8px; border: 1px solid #dce3e0; border-radius: 6px; background: #fff; color: #52615b; font-size: 11px; }
.sidebar-editor-protected-marker { width: 30px; height: 30px; display: grid; place-items: center; color: #9aa6a1; font-size: 13px; }
.sidebar-editor-group-drop-hint { margin: 5px 0 2px 29px; color: #82908a; font-size: 10px; }
.sidebar-editor-builder { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.sidebar-editor-builder + .sidebar-editor-builder { margin-top: 10px; }
.sidebar-editor-builder.page-builder { grid-template-columns: minmax(0, 1.2fr) minmax(150px, .8fr) auto; }
.sidebar-editor-builder label { display: grid; gap: 5px; }
.sidebar-editor-builder label > span { color: #52615b; font-size: 11px; font-weight: 650; }
.sidebar-editor-builder input,
.sidebar-editor-builder select { width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid #cbd5d1; border-radius: 7px; background: #fff; color: #14223a; font-size: 12px; }
.sidebar-editor-builder .sidebar-customizer-button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sidebar-editor-error { min-height: 17px; margin: 8px 0 0; color: #a83731; font-size: 11px; }
.sidebar-editor-footer-spacer { flex: 1; }
.sidebar-customizer-button.quiet { border: 0; background: transparent; color: #66716d; }
.sidebar-customizer-button.quiet:hover { background: #f1f4f3; color: #14223a; }

@media (max-width: 520px) {
  .sidebar-customizer-footer { flex-wrap: wrap; }
  .sidebar-customizer-button.primary { flex: 1 0 100%; order: -1; }
  .sidebar-editor-builder,
  .sidebar-editor-builder.page-builder { grid-template-columns: 1fr; }
  .sidebar-editor-entry-row { grid-template-columns: auto auto auto minmax(0, 1fr); }
  .sidebar-editor-row-actions { grid-column: 2 / -1; justify-self: end; }
  .sidebar-editor-children { padding-left: 18px; }
  .sidebar-editor-child-row { grid-template-columns: 22px auto auto minmax(0, 1fr) auto; }
  .sidebar-editor-page-group-select { grid-column: 4 / -1; }
}

/* Sidebar tree editor: one-level folders and pages with visible drop intent. */
.sidebar-editor-section-heading { margin-bottom: 14px; align-items: flex-end; }
.sidebar-editor-create-actions { display: flex; gap: 7px; }
.sidebar-editor-create-actions .sidebar-customizer-button { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sidebar-editor-create-actions [data-sidebar-add-page] { border-color: #b9d4c5; background: #e9f2ed; color: #245940; }
.sidebar-editor-create-actions [data-sidebar-add-page]:hover { background: #dcebe3; }
.sidebar-editor-list { min-height: 120px; align-content: start; gap: 10px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.sidebar-editor-list.is-root-drop-target { box-shadow: inset 0 0 0 2px #6f9b85; }
.sidebar-editor-entry { position: relative; min-width: 0; overflow: visible; border: 0; background: transparent; }
.sidebar-editor-entry.is-folder { border: 0; border-radius: 0; background: transparent; }
.sidebar-editor-entry.is-dragging,
.sidebar-editor-page-node.is-dragging { opacity: .44; }
.sidebar-editor-entry-row { min-height: 38px; padding: 2px 4px; grid-template-columns: 30px minmax(0, 1fr) auto; border-radius: 8px; }
.sidebar-editor-name-input { padding: 0 8px; }
.sidebar-editor-name-input[readonly] { border-color: transparent; background: transparent; cursor: grab; pointer-events: none; }
.sidebar-editor-name-input[readonly]:hover,
.sidebar-editor-name-input[readonly]:focus { border-color: transparent; background: transparent; outline: 0; }
.sidebar-editor-name-input.is-renaming { border-color: #8db39f; background: #fff; cursor: text; }
.sidebar-editor-name-input.is-renaming:focus { border-color: #8db39f; background: #fff; outline: 3px solid rgba(82, 183, 136, .22); outline-offset: 1px; pointer-events: auto; }
.sidebar-editor-node-actions { display: flex; align-items: center; gap: 2px; opacity: .7; transition: opacity .16s ease; }
.sidebar-editor-entry-row:hover .sidebar-editor-node-actions,
.sidebar-editor-page-node:hover .sidebar-editor-node-actions,
.sidebar-editor-node-actions:focus-within { opacity: 1; }
.sidebar-editor-node-actions .sidebar-editor-icon-button:last-child:hover { background: #fbeceb; color: #a83731; }
.sidebar-editor-children { display: grid; gap: 6px; margin: 2px 0 3px 18px; padding: 4px 0 4px 18px; border: 0; border-left: 1px solid #cbd5d1; background: transparent; }
.sidebar-editor-child-row { position: relative; min-height: 40px; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 7px; padding: 3px 7px; border: 1px solid #e2e7e5; border-radius: 9px; background: #eef1f0; color: #4f5e58; font-size: 12px; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.sidebar-editor-entry.is-page .sidebar-editor-child-row { min-height: 44px; padding: 4px 8px; background: #eef1f0; }
.sidebar-editor-page-drag-slot,
.sidebar-editor-drag-handle { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: #7d8b85; cursor: grab; transition: background-color .16s ease, color .16s ease; }
.sidebar-editor-page-drag-slot:hover,
.sidebar-editor-drag-handle:hover { background: #dfe7e3; color: #2d6a4f; }
.sidebar-editor-page-drag-slot:active,
.sidebar-editor-drag-handle:active { cursor: grabbing; }
.sidebar-editor-folder-node.is-folder-target,
.sidebar-editor-children.is-folder-target { background: #e9f2ed; box-shadow: inset 0 0 0 1px #6f9b85; }
.sidebar-editor-page-node.is-group-target { border-color: #2d6a4f; background: #e9f2ed; box-shadow: inset 0 0 0 1px #2d6a4f; }
.sidebar-editor-group-drop-hint { min-height: 0; margin: 0 0 0 7px; color: #82908a; }
.sidebar-editor-group-drop-hint:empty { display: none; }
.sidebar-editor-page-node.is-drop-before { box-shadow: 0 -2px 0 #2d6a4f; }
.sidebar-editor-page-node.is-drop-after { box-shadow: 0 2px 0 #2d6a4f; }
.sidebar-editor-entry.is-drop-before { box-shadow: 0 -2px 0 #2d6a4f; }
.sidebar-editor-entry.is-drop-after { box-shadow: 0 2px 0 #2d6a4f; }
.sidebar-editor-entry.is-drop-before::before,
.sidebar-editor-entry.is-drop-after::before,
.sidebar-editor-page-node.is-drop-before::before,
.sidebar-editor-page-node.is-drop-after::before { content: ''; position: absolute; z-index: 3; left: -9px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #2d6a4f; }
.sidebar-editor-entry.is-drop-before::before,
.sidebar-editor-page-node.is-drop-before::before { top: -5px; }
.sidebar-editor-entry.is-drop-after::before,
.sidebar-editor-page-node.is-drop-after::before { bottom: -5px; }
.sidebar-editor-context-menu { position: fixed; z-index: 10; min-width: 176px; padding: 6px; border: 1px solid #dce3e0; border-radius: 11px; background: #fff; box-shadow: 0 14px 34px rgba(20, 34, 58, .18); }
.sidebar-editor-context-menu[hidden] { display: none; }
.sidebar-editor-context-menu button { width: 100%; min-height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 6px; background: transparent; color: #14223a; font-size: 12px; font-weight: 650; text-align: left; cursor: pointer; }
.sidebar-editor-context-menu button:hover { background: #f1f4f3; }
.sidebar-customizer-button.quiet { display: inline-flex; align-items: center; gap: 7px; }

@media (max-width: 520px) {
  .sidebar-editor-section-heading { align-items: stretch; flex-direction: column; }
  .sidebar-editor-create-actions { width: 100%; }
  .sidebar-editor-create-actions .sidebar-customizer-button { flex: 1; justify-content: center; }
  .sidebar-editor-entry-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .sidebar-editor-children { margin-left: 14px; padding-left: 14px; }
  .sidebar-editor-child-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
}


/* ==========================================================================
   DASHBOARD WORKSPACE CHIP
   Shared by every page that shows .user-tag, so the account block looks and
   behaves the same everywhere instead of being restyled page by page.
   Loaded after each page's inline <style>, so equal-specificity rules here win.
   ========================================================================== */

/* Nav links, dropdowns, and the auth buttons keep their original positions --
   nothing here repositions them. */

/* Spacing and a width cap only -- deliberately no border, background, or
   pill outline, so the account block does not read as another card next to
   the adjacent workspace action. */
.top-navbar .user-tag {
  position: relative; /* anchors the hover tooltip only */
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 7px 4px;
}

/* Backstop for an address whose domain alone overflows the cap. */
.top-navbar .user-tag .user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hover reveal, only for a shortened address. */
.top-navbar .user-tag.is-truncated { cursor: help; }
.top-navbar .user-tag.is-truncated::after {
  content: attr(data-full);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--navy, #1B2B4B);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(23, 40, 68, .18);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s ease;
}
.top-navbar .user-tag.is-truncated:hover::after,
.top-navbar .user-tag.is-truncated:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   PHANTOM LOADING
   The shell is already in the HTML response. These placeholders cover its
   brief client restoration and reuse each page's existing aria-busy state.
   ========================================================================== */

:root {
  --phantom-base: #f4f6f5;
  --phantom-line: #e2e7e4;
  --phantom-shine: rgba(255, 255, 255, 0.72);
}

[data-amveric-shell="server"][aria-busy="true"] {
  position: relative;
  overflow: hidden;
}

[data-amveric-shell="server"][aria-busy="true"] > * {
  visibility: hidden;
}

.sidebar-nav[data-amveric-shell="server"][aria-busy="true"]::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 5;
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.14) 0 0) 0 0 / 82% 34px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.1) 0 0) 0 46px / 68% 34px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.1) 0 0) 0 92px / 76% 34px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.08) 0 0) 0 138px / 60% 34px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.08) 0 0) 0 184px / 72% 34px no-repeat;
  pointer-events: none;
}

.sidebar-nav[data-amveric-shell="server"][aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 14px auto 14px -42%;
  z-index: 6;
  width: 32%;
  border-radius: 8px;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.13), transparent);
  transform: translateX(0);
  animation: amveric-phantom-sweep 1.25s ease-in-out infinite;
  pointer-events: none;
}

.top-navbar:has(#dynamicNavLinks[data-amveric-shell="server"][aria-busy="true"])::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1002;
  background:
    linear-gradient(90deg, transparent 26%, var(--phantom-shine) 50%, transparent 74%) -50% 0 / 38% 100% no-repeat,
    linear-gradient(var(--phantom-line) 0 0) calc(50% - 58px) 50% / 116px 13px no-repeat,
    linear-gradient(var(--phantom-line) 0 0) calc(100% - 124px) 50% / 92px 32px no-repeat,
    var(--surface, #fff);
  animation: amveric-phantom-navbar 1.25s ease-in-out infinite;
  pointer-events: none;
}

:where([aria-busy="true"]) :is(
  section,
  article,
  [class~="card"],
  [class$="-card"],
  [class*="-card "],
  [class~="panel"],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-report"],
  [class*="-report "]
) {
  position: relative;
  overflow: hidden;
  contain: paint;
}

:where([aria-busy="true"]) :is(
  section,
  article,
  [class~="card"],
  [class$="-card"],
  [class*="-card "],
  [class~="panel"],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-report"],
  [class*="-report "]
)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  background:
    linear-gradient(var(--phantom-line) 0 0) 22px 22px / min(34%, 180px) 12px no-repeat,
    linear-gradient(var(--phantom-line) 0 0) 22px 48px / min(70%, 420px) 9px no-repeat,
    linear-gradient(var(--phantom-line) 0 0) 22px 67px / min(52%, 300px) 9px no-repeat,
    var(--phantom-base);
  pointer-events: none;
}

:where([aria-busy="true"]) :is(
  section,
  article,
  [class~="card"],
  [class$="-card"],
  [class*="-card "],
  [class~="panel"],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-report"],
  [class*="-report "]
)::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -42%;
  z-index: 41;
  width: 32%;
  background: linear-gradient(100deg, transparent, var(--phantom-shine), transparent);
  transform: translateX(0);
  animation: amveric-phantom-sweep 1.25s ease-in-out infinite;
  pointer-events: none;
}

@keyframes amveric-phantom-sweep {
  to { transform: translateX(450%); }
}

@keyframes amveric-phantom-navbar {
  to { background-position: 150% 0, calc(50% - 58px) 50%, calc(100% - 124px) 50%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-nav[data-amveric-shell="server"][aria-busy="true"]::after,
  .top-navbar:has(#dynamicNavLinks[data-amveric-shell="server"][aria-busy="true"])::after,
  :where([aria-busy="true"]) :is(
    section,
    article,
    [class~="card"],
    [class$="-card"],
    [class*="-card "],
    [class~="panel"],
    [class$="-panel"],
    [class*="-panel "],
    [class$="-report"],
    [class*="-report "]
  )::after {
    animation: none;
  }
}