:root {
  --navy-950: #071426;
  --navy-900: #0b1f38;
  --cyan: #3dd6d0;
  --ink: #15263c;
  --muted: #738195;
  --line: #e4e9f0;
  --canvas: #f4f7fb;
  --surface: #ffffff;
  --shadow: 0 20px 55px rgba(20, 37, 63, .11);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.workspace-body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; }
button { cursor: pointer; }
.workspace-app { min-height: 100dvh; display: flex; overflow: hidden; }

.workspace-sidebar {
  position: relative;
  z-index: 12;
  width: 276px;
  min-width: 276px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: #d7e5f3;
  background:
    radial-gradient(circle at 18% 7%, rgba(57, 212, 205, .2), transparent 26%),
    radial-gradient(circle at 95% 80%, rgba(40, 120, 206, .18), transparent 30%),
    linear-gradient(165deg, var(--navy-900), var(--navy-950) 76%);
  box-shadow: 10px 0 38px rgba(8, 21, 39, .13);
  transition: width .25s ease, min-width .25s ease;
}
.workspace-sidebar::after {
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  content: "";
  background: linear-gradient(transparent, rgba(148, 213, 222, .42), transparent);
}
.brand-lockup { position: relative; display: flex; align-items: center; justify-content: center; min-height: 118px; padding: 28px 28px 22px; }
.brand-logo-only { justify-content: center; }
.sidebar-brand-admin { display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; line-height: 0; }
.sidebar-brand-admin:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; }
.brand-logo-image { display: block; width: min(100%, 166px); max-height: 60px; padding: 0; border: 0; border-radius: 0; background: transparent; object-fit: contain; object-position: center; filter: brightness(0) invert(1) drop-shadow(0 8px 18px rgba(4, 12, 25, .25)); transition: width .25s ease, opacity .18s ease; }
.sidebar-collapse { position: absolute; top: 24px; right: 18px; width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; color: #b9d2e2; border: 1px solid rgba(202,234,244,.18); border-radius: 9px; background: rgba(199,230,243,.08); transition: .2s ease; }
.sidebar-collapse:hover { color: #fff; border-color: rgba(103,232,222,.6); background: rgba(60,203,196,.18); }
.sidebar-collapse svg { width: 17px; height: 17px; transition: transform .25s ease; }
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 13px;
  color: var(--navy-900);
  background: linear-gradient(135deg, #85f2e8, #c5faf6);
  box-shadow: 0 9px 22px rgba(11, 222, 209, .18);
}
.brand-mark svg { width: 23px; height: 23px; }
.brand-name { display: block; font-size: 16px; font-weight: 780; letter-spacing: .02em; }
.brand-subtitle { display: block; margin-top: 3px; color: #87a0b9; font-size: 10px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 18px 22px 38px; scrollbar-width: thin; }
.workspace-nav.workspace-nav-simple { gap: 12px; }
.workspace-nav.workspace-nav-simple button { min-height: 58px; padding: 14px 15px; }
.workspace-nav.workspace-nav-simple .nav-title { font-size: 14px; letter-spacing: .01em; }
.nav-section { padding-top: 10px; }
.nav-section + .nav-section { margin-top: 19px; padding-top: 20px; border-top: 1px solid rgba(190, 217, 238, .12); }
.nav-section-label { display: block; padding: 0 10px 9px; color: #7994af; font-size: 10px; font-weight: 720; letter-spacing: .14em; text-transform: uppercase; }
.workspace-nav { display: grid; gap: 5px; }
.workspace-nav button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: #b7c9da;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  transition: .22s ease;
}
.workspace-nav button:hover { color: #efffff; background: rgba(178, 228, 235, .08); }
.workspace-nav button.is-active {
  color: #fff;
  border-color: rgba(117, 237, 226, .22);
  background: linear-gradient(100deg, rgba(59, 201, 196, .27), rgba(77, 143, 201, .17));
  box-shadow: inset 2px 0 0 var(--cyan), 0 8px 18px rgba(0, 0, 0, .12);
}
.nav-icon { width: 20px; height: 20px; flex: 0 0 20px; opacity: .92; }
.nav-copy { min-width: 0; display: grid; gap: 2px; overflow: hidden; transition: width .2s ease, opacity .16s ease; }
.nav-title { font-size: 13px; font-weight: 650; white-space: nowrap; }
.nav-note { color: #8099b0; font-size: 10px; white-space: nowrap; }
.workspace-nav button.is-active .nav-note { color: #b9f9f3; }
.workspace-app.is-sidebar-collapsed .workspace-sidebar { width: 76px; min-width: 76px; }
.workspace-app.is-sidebar-collapsed .brand-lockup { justify-content: center; min-height: 92px; padding: 20px 10px; }
.workspace-app.is-sidebar-collapsed .brand-logo-image { width: 34px; }
.workspace-app.is-sidebar-collapsed .sidebar-collapse { position: absolute; right: -10px; top: 48px; z-index: 2; background: #123452; }
.workspace-app.is-sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }
.workspace-app.is-sidebar-collapsed .sidebar-scroll { padding-inline: 12px; }
.workspace-app.is-sidebar-collapsed .nav-section-label, .workspace-app.is-sidebar-collapsed .nav-copy { width: 0; opacity: 0; pointer-events: none; }
.workspace-app.is-sidebar-collapsed .workspace-nav button { justify-content: center; padding-inline: 8px; }
.workspace-app.is-sidebar-collapsed .nav-section + .nav-section { margin-top: 15px; }
.sidebar-foot { margin: 0 16px 22px; padding: 13px 14px; border: 1px solid rgba(178, 226, 239, .12); border-radius: 14px; background: rgba(194, 228, 243, .06); }
.system-health { display: flex; align-items: center; gap: 8px; color: #b9cedf; font-size: 11px; }
.health-dot { width: 7px; height: 7px; border-radius: 99px; background: #52e0ba; box-shadow: 0 0 0 4px rgba(82, 224, 186, .13); }
.health-text { margin: 8px 0 0; color: #708ba5; font-size: 10px; line-height: 1.5; }

.workspace-main { min-width: 0; flex: 1; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(145deg, #f7fafc, #eef3f9); }
.workspace-header {
  position: sticky;
  top: 0;
  z-index: 8;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 34px;
  border-bottom: 1px solid rgba(220, 227, 237, .9);
  background: rgba(248, 251, 253, .88);
  backdrop-filter: blur(18px);
  flex: 0 0 76px;
}
.header-crumb { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.header-crumb strong { color: var(--ink); font-size: 13px; }
.crumb-slash { color: #b9c4d0; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.date-pulse { display: flex; align-items: center; gap: 8px; padding: 8px 11px; color: #64758a; border-radius: 10px; background: #eef3f7; font-size: 11px; }
.date-pulse svg { width: 14px; height: 14px; color: #2c7590; }
.header-button { height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; color: #476174; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 12px; font-weight: 650; transition: .2s ease; }
.header-button:hover { color: #144b63; border-color: #a8d8dd; background: #f8ffff; box-shadow: 0 7px 15px rgba(33, 126, 139, .1); }
.header-button svg { width: 15px; height: 15px; }
.mobile-menu { display: none; }

.workspace-content { width: 100%; min-height: 0; flex: 1; display: flex; margin: 0; padding: 0; }
.module-overview {
  position: relative;
  overflow: hidden;
  display: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  min-height: 128px;
  padding: 27px 30px;
  border: 1px solid #e7edf2;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(45, 62, 83, .04);
}
.module-overview::before { position: absolute; top: -92px; right: -64px; width: 260px; height: 260px; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(89, 215, 207, .18), transparent 67%); pointer-events: none; }
.module-kicker { display: flex; align-items: center; gap: 8px; color: #5d7387; font-size: 11px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.kicker-dot { width: 7px; height: 7px; border-radius: 99px; background: #30b7b0; }
.module-overview h1 { max-width: 620px; margin: 8px 0 8px; color: #162b43; font-size: clamp(22px, 2.2vw, 31px); line-height: 1.2; letter-spacing: -.035em; }
.module-overview p { max-width: 600px; margin: 0; color: #77889b; font-size: 13px; line-height: 1.65; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.admin-tabs[hidden] { display: none; }
.admin-tab { padding: 7px 12px; color: #60758a; border: 1px solid #dbe5ed; border-radius: 9px; background: #f8fafc; font-size: 11px; font-weight: 700; transition: .18s ease; }
.admin-tab:hover { color: #177c78; border-color: #9fdcd6; background: #f2fffd; }
.admin-tab.is-active { color: #fff; border-color: #1c9c96; background: linear-gradient(120deg, #1aa9a1, #287eb0); box-shadow: 0 7px 14px rgba(28, 148, 150, .18); }
.module-meta { position: relative; display: flex; align-items: center; gap: 12px; padding-bottom: 4px; }
.module-tag { padding: 8px 10px; color: #16736e; border: 1px solid #cceeea; border-radius: 999px; background: #effcf9; font-size: 11px; font-weight: 720; white-space: nowrap; }
.workspace-stage { position: relative; min-height: 0; flex: 1; width: 100%; height: 100%; margin: 0; overflow: hidden; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.workspace-stage::before { position: absolute; z-index: 3; top: 0; right: 0; left: 0; height: 3px; content: ""; background: linear-gradient(90deg, #3ed3ca, #318dc3, #91dede); opacity: .85; }
.iframe-loader { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: #6d8194; background: rgba(251,253,254,.94); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.workspace-stage.is-loading .iframe-loader { opacity: 1; pointer-events: auto; }
.loader-card { display: grid; justify-items: center; gap: 12px; }
.loader-ring { width: 27px; height: 27px; border: 3px solid #d8edef; border-top-color: #19aaa3; border-radius: 50%; animation: spin .8s linear infinite; }
.loader-card span { font-size: 12px; }
@keyframes spin { to { transform: rotate(1turn); } }
.module-frame { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 0; display: block; border: 0; background: #fff; }
.sidebar-overlay { display: none; }

@media (max-width: 1024px) {
  .workspace-sidebar { width: 240px; min-width: 240px; }
  .workspace-header { padding: 0 23px; }
  .workspace-app.is-sidebar-collapsed .workspace-sidebar { width: 70px; min-width: 70px; }
}
@media (max-width: 760px) {
  .workspace-app { display: block; overflow: visible; }
  .workspace-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); min-width: 0; transform: translateX(-104%); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
  .workspace-sidebar.is-open { transform: translateX(0); }
  .sidebar-overlay { position: fixed; z-index: 11; inset: 0; display: block; background: rgba(5, 17, 31, .42); opacity: 0; visibility: hidden; transition: .2s ease; }
  .sidebar-overlay.is-open { opacity: 1; visibility: visible; }
  .workspace-main { height: 100dvh; min-height: 100dvh; overflow: hidden; }
  .workspace-header { min-height: 66px; flex-basis: 66px; padding: 0 16px; }
  .sidebar-collapse { display: none; }
  .mobile-menu { width: 36px; height: 36px; display: grid; place-items: center; color: #24415a; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
  .mobile-menu svg { width: 18px; height: 18px; }
  .date-pulse { display: none; }
  .header-button span { display: none; }
  .header-button { width: 36px; justify-content: center; padding: 0; }
  .header-crumb { gap: 6px; }
  .workspace-content { width: 100%; min-height: 0; flex: 1; padding: 0; }
  .module-overview { display: none; }
  .module-overview h1 { margin-top: 7px; font-size: 23px; }
  .module-overview p { font-size: 12px; }
  .admin-tabs { margin-top: 13px; }
  .admin-tab { padding: 7px 10px; }
  .module-meta { margin-top: 15px; }
  .workspace-stage { min-height: 0; margin: 0; border-radius: 0; }
  .module-frame { min-height: 0; }
}

/* Light-blue neumorphic glass workspace redesign */
:root {
  --ice-0: #f7fcff;
  --ice-1: #eef8fd;
  --ice-2: #dceff9;
  --ice-3: #c8e5f4;
  --sky: #2d9fda;
  --sky-deep: #1979b7;
  --text-strong: #1d4660;
  --text-soft: #6f91a5;
  --glass-border: rgba(255, 255, 255, .88);
  --glass-shadow: 13px 13px 28px rgba(110, 166, 195, .19), -9px -9px 20px rgba(255, 255, 255, .92), inset 0 1px 0 rgba(255, 255, 255, .96);
}

body.workspace-body {
  color: var(--text-strong);
  background:
    radial-gradient(circle at 3% 0%, rgba(255,255,255,.98) 0, transparent 31%),
    radial-gradient(circle at 96% 100%, rgba(139,211,245,.35) 0, transparent 32%),
    linear-gradient(145deg, #e8f6fc 0%, #ddecf7 48%, #eaf7fc 100%);
}

.workspace-app {
  gap: 14px;
  min-height: 100dvh;
  padding: 12px;
  background: transparent;
}

.workspace-sidebar {
  width: 258px;
  min-width: 258px;
  min-height: calc(100dvh - 24px);
  color: var(--text-strong);
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(249,254,255,.96), rgba(218,241,251,.91));
  box-shadow: var(--glass-shadow);
}

.workspace-sidebar::after { display: none; }

.brand-lockup {
  min-height: 126px;
  padding: 34px 32px 24px;
  border-bottom: 1px solid rgba(129, 188, 216, .2);
}

.brand-logo-image {
  width: min(100%, 152px);
  max-height: 52px;
  filter: drop-shadow(0 6px 10px rgba(52, 118, 148, .14));
}

.sidebar-collapse {
  top: 22px;
  right: 18px;
  width: 34px;
  height: 34px;
  color: var(--sky-deep);
  border: 1px solid rgba(148, 205, 231, .48);
  border-radius: 12px;
  background: rgba(255, 255, 255, .67);
  box-shadow: 4px 4px 10px rgba(96, 154, 183, .13), inset 1px 1px 0 rgba(255,255,255,.9);
}

.sidebar-collapse:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #53b7e9, #218eca);
  box-shadow: 0 10px 18px rgba(35, 145, 205, .24);
}

.sidebar-scroll { padding: 28px 18px 34px; }
.workspace-nav.workspace-nav-simple { gap: 12px; }
.workspace-nav.workspace-nav-simple button { min-height: 62px; padding: 14px 16px; }
.workspace-nav.workspace-nav-simple .nav-title { font-size: 14px; font-weight: 760; }
.workspace-nav button {
  color: #5c8096;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
}
.workspace-nav button:hover {
  color: var(--sky-deep);
  border-color: rgba(179, 223, 242, .72);
  background: rgba(255,255,255,.54);
  box-shadow: 5px 5px 13px rgba(116, 174, 200, .12), -4px -4px 10px rgba(255,255,255,.65);
}
.workspace-nav button.is-active {
  color: var(--sky-deep);
  border-color: rgba(171, 223, 244, .76);
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(220,243,253,.87));
  box-shadow: 7px 7px 16px rgba(89, 159, 193, .16), -5px -5px 12px rgba(255,255,255,.88), inset 0 1px 0 rgba(255,255,255,.95);
}
.workspace-nav button.is-active::before {
  width: 5px;
  height: 28px;
  margin-left: -8px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(180deg, #7bd5f7, #299bd6);
  box-shadow: 0 3px 9px rgba(33, 151, 214, .3);
}
.workspace-nav button.is-active .nav-icon { color: #1689c8; }
.nav-icon { width: 21px; height: 21px; }

.workspace-main {
  height: calc(100dvh - 24px);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 30px;
  background: rgba(241, 249, 253, .72);
  box-shadow: var(--glass-shadow);
}
.workspace-content { padding: 0; }
.workspace-stage {
  margin: 0;
  border: 0;
  border-radius: 29px;
  background: rgba(248, 253, 255, .74);
  box-shadow: none;
}
.workspace-stage::before {
  top: 0;
  right: 10%;
  left: 10%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(93, 190, 232, .72), transparent);
}
.module-frame { border-radius: 28px; background: #edf8fd; }
.iframe-loader { color: var(--text-soft); background: rgba(239,248,253,.95); }
.loader-card { padding: 22px 26px; border: 1px solid rgba(255,255,255,.95); border-radius: 20px; background: rgba(255,255,255,.72); box-shadow: var(--glass-shadow); }
.loader-ring { border-color: #d7edf8; border-top-color: var(--sky); }

.workspace-app.is-sidebar-collapsed .workspace-sidebar { width: 84px; min-width: 84px; }
.workspace-app.is-sidebar-collapsed .brand-lockup { min-height: 104px; padding: 24px 12px; }
.workspace-app.is-sidebar-collapsed .brand-logo-image { width: 38px; }
.workspace-app.is-sidebar-collapsed .sidebar-collapse { top: 44px; right: -14px; background: #f7fcff; box-shadow: 4px 4px 10px rgba(84, 151, 182, .18); }
.workspace-app.is-sidebar-collapsed .sidebar-scroll { padding-inline: 12px; }
.workspace-app.is-sidebar-collapsed .workspace-nav button { border-radius: 16px; }
.workspace-app.is-sidebar-collapsed .workspace-nav button.is-active::before { display: none; }

@media (max-width: 760px) {
  .workspace-app { display: block; padding: 0; }
  .workspace-sidebar { min-height: 100dvh; border-radius: 0 28px 28px 0; }
  .workspace-main { height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .workspace-stage, .module-frame { border-radius: 0; }
}

/* Full-bleed workspace: the business page starts immediately beside the sidebar and reaches the viewport edge. */
.workspace-app { gap: 0; padding: 0; }
.workspace-sidebar { min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
.workspace-main { height: 100dvh; border: 0; border-radius: 0; box-shadow: none; background: #edf8fd; }
.workspace-content, .workspace-stage, .module-frame { margin: 0; border-radius: 0; }
.workspace-stage::before { display: none; }

/* Desktop hover navigation: default compact, reveal labels only while hovering the system sidebar. */
@media (min-width: 761px) {
  .workspace-app.is-sidebar-collapsed .workspace-sidebar {
    width: 72px;
    min-width: 72px;
    transition: width 360ms cubic-bezier(.22, 1, .36, 1), min-width 360ms cubic-bezier(.22, 1, .36, 1), box-shadow 240ms ease;
  }

  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover {
    width: 168px;
    min-width: 168px;
    z-index: 20;
    box-shadow: 16px 0 34px rgba(63, 128, 161, .16);
  }

  /* The old click button is intentionally removed; the sidebar itself is the hover target. */
  .workspace-app.is-sidebar-collapsed .sidebar-collapse {
    display: none;
  }

  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .brand-lockup {
    min-height: 108px;
    padding: 26px 20px 20px;
    justify-content: center;
  }

  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .brand-logo-image {
    width: min(100%, 104px);
  }

  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .sidebar-scroll {
    padding: 24px 12px 34px;
  }

  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .nav-copy {
    width: auto;
    opacity: 1;
    pointer-events: auto;
  }

  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .workspace-nav button {
    justify-content: flex-start;
    gap: 10px;
    padding-inline: 13px;
  }

  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .workspace-nav button.is-active::before {
    display: block;
  }

  .workspace-app.is-sidebar-collapsed .brand-lockup {
    width: 72px;
    min-height: 96px;
    padding: 22px 0;
  }

  .workspace-app.is-sidebar-collapsed .brand-logo-image {
    width: 36px;
    margin-inline: auto;
  }

  .workspace-app.is-sidebar-collapsed .sidebar-scroll {
    width: 72px;
    padding: 24px 8px 34px;
  }

  .workspace-app.is-sidebar-collapsed .workspace-nav button {
    width: 56px;
    min-height: 56px;
    justify-content: center;
    gap: 0;
    margin-inline: auto;
    padding: 0;
  }

  .workspace-app.is-sidebar-collapsed .workspace-nav button .nav-icon {
    margin: 0;
  }

  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .brand-lockup,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .sidebar-scroll {
    width: 168px;
  }

  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .workspace-nav button {
    width: 144px;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-sidebar,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar {
    transition: none;
  }
}

/* Capsule navigation: a compact floating rail on desktop, a full-width pill list on mobile. */
@media (min-width: 761px) {
  .workspace-app {
    position: relative;
    gap: 16px;
    height: 100dvh;
    min-height: 100dvh;
    padding: 16px;
    overflow: hidden;
  }

  .workspace-sidebar,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar {
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 16px;
    width: 88px;
    min-width: 88px;
    height: calc(100dvh - 32px);
    min-height: 0;
    max-height: calc(100dvh - 32px);
    align-self: stretch;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .84);
    border-radius: 40px;
    background: linear-gradient(160deg, rgba(250, 254, 255, .93), rgba(214, 240, 251, .86));
    box-shadow: 10px 16px 28px rgba(82, 149, 184, .16), -8px -8px 18px rgba(255, 255, 255, .82), inset 0 1px 0 rgba(255,255,255,.92);
    transition: width 320ms cubic-bezier(.22, 1, .36, 1), min-width 320ms cubic-bezier(.22, 1, .36, 1), box-shadow 220ms ease;
  }

  .workspace-main {
    width: calc(100% - 104px);
    height: calc(100dvh - 32px);
    min-height: 0;
    flex: 0 0 auto;
    margin-left: 104px;
    border-radius: 28px;
  }

  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:focus-within {
    width: 224px;
    min-width: 224px;
    z-index: 20;
    box-shadow: 18px 18px 36px rgba(72, 139, 176, .22), -8px -8px 20px rgba(255, 255, 255, .9), inset 0 1px 0 rgba(255,255,255,.95);
  }

  .workspace-app.is-sidebar-collapsed .brand-lockup,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .brand-lockup,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:focus-within .brand-lockup {
    width: 100%;
    min-height: 108px;
    padding: 24px 16px 18px;
    border-bottom: 1px solid rgba(126, 188, 217, .18);
  }

  .workspace-app.is-sidebar-collapsed .brand-logo-image {
    width: 42px;
    max-height: 48px;
    margin-inline: auto;
    object-fit: contain;
  }

  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .brand-logo-image,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:focus-within .brand-logo-image {
    width: min(100%, 132px);
  }

  .workspace-app.is-sidebar-collapsed .sidebar-scroll,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .sidebar-scroll,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:focus-within .sidebar-scroll {
    width: 100%;
    padding: 24px 14px 30px;
    overflow-x: hidden;
  }

  .workspace-app.is-sidebar-collapsed .workspace-nav.workspace-nav-simple {
    gap: 12px;
  }

  .workspace-app.is-sidebar-collapsed .workspace-nav button,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .workspace-nav button,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:focus-within .workspace-nav button {
    width: 58px;
    min-height: 58px;
    justify-content: center;
    gap: 10px;
    margin-inline: auto;
    padding: 0;
    color: #5b849c;
    border: 1px solid rgba(173, 221, 240, .56);
    border-radius: 999px;
    background: rgba(255, 255, 255, .42);
    box-shadow: 4px 5px 12px rgba(112, 171, 198, .1), -4px -4px 10px rgba(255,255,255,.58);
    transition: width 260ms cubic-bezier(.22, 1, .36, 1), color .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .workspace-nav button,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:focus-within .workspace-nav button {
    width: 194px;
    justify-content: flex-start;
    padding-inline: 16px;
  }

  .workspace-app.is-sidebar-collapsed .workspace-nav button:hover,
  .workspace-app.is-sidebar-collapsed .workspace-nav button:focus-visible {
    color: var(--sky-deep);
    border-color: rgba(115, 194, 228, .7);
    background: rgba(255, 255, 255, .74);
    box-shadow: 6px 7px 15px rgba(90, 160, 193, .16), -4px -4px 10px rgba(255,255,255,.76);
  }

  .workspace-app.is-sidebar-collapsed .workspace-nav button.is-active {
    color: #087bbd;
    border-color: rgba(111, 198, 235, .74);
    background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(201,236,251,.92));
    box-shadow: 7px 8px 16px rgba(69, 149, 190, .18), -5px -5px 12px rgba(255,255,255,.9), inset 0 1px 0 rgba(255,255,255,.96);
  }

  .workspace-app.is-sidebar-collapsed .workspace-nav button.is-active::before {
    display: block;
    width: 4px;
    height: 24px;
    flex: 0 0 4px;
    margin-left: -7px;
    content: "";
    border-radius: 999px;
    background: linear-gradient(180deg, #72d6f8, #218fca);
    box-shadow: 0 3px 8px rgba(33, 143, 202, .28);
  }

  .workspace-app.is-sidebar-collapsed .workspace-nav button.is-active::before,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:not(:hover) .workspace-nav button.is-active::before {
    display: none;
  }

  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .workspace-nav button.is-active::before,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:focus-within .workspace-nav button.is-active::before {
    display: block;
  }

  .workspace-app.is-sidebar-collapsed .nav-copy {
    width: 0;
    opacity: 0;
    pointer-events: none;
    transition: width 220ms ease, opacity 160ms ease;
  }

  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .nav-copy,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:focus-within .nav-copy {
    width: auto;
    opacity: 1;
    pointer-events: auto;
  }

  .workspace-app.is-sidebar-collapsed .nav-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
  }

  .workspace-app.is-sidebar-collapsed .sidebar-collapse {
    display: none;
  }

  .workspace-app.is-sidebar-collapsed .workspace-nav button:focus-visible,
  .sidebar-brand-admin:focus-visible {
    outline: 2px solid rgba(35, 147, 207, .72);
    outline-offset: 3px;
  }
}

@media (max-width: 760px) {
  .workspace-app {
    gap: 0;
    padding: 0;
  }

  .workspace-sidebar,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar {
    width: min(304px, 88vw);
    min-height: 100dvh;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.82);
    border-radius: 0 34px 34px 0;
    background: linear-gradient(160deg, rgba(250,254,255,.97), rgba(214,240,251,.94));
    box-shadow: 16px 0 30px rgba(63, 132, 169, .2), inset -1px 0 0 rgba(255,255,255,.78);
  }

  .workspace-mobile-menu {
    position: fixed;
    z-index: 10;
    top: max(14px, env(safe-area-inset-top));
    left: 14px;
    width: auto;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    color: #246c95;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 999px;
    background: rgba(239, 250, 255, .88);
    box-shadow: 0 7px 16px rgba(67, 137, 174, .18), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(16px) saturate(135%);
  }

  .workspace-mobile-menu svg {
    width: 18px;
    height: 18px;
  }

  .workspace-mobile-menu span {
    font-size: 13px;
    font-weight: 700;
  }

  .workspace-mobile-menu:focus-visible {
    outline: 2px solid rgba(35, 147, 207, .72);
    outline-offset: 3px;
  }

  .workspace-app.is-sidebar-collapsed .brand-lockup,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .brand-lockup {
    width: auto;
    min-height: 112px;
    padding: 30px 28px 22px;
  }

  .workspace-app.is-sidebar-collapsed .brand-logo-image,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .brand-logo-image {
    width: min(100%, 152px);
    max-height: 52px;
  }

  .workspace-app.is-sidebar-collapsed .sidebar-scroll,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .sidebar-scroll {
    width: auto;
    padding: 26px 20px 34px;
  }

  .workspace-app.is-sidebar-collapsed .workspace-nav button,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .workspace-nav button,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:focus-within .workspace-nav button {
    width: 100%;
    min-height: 58px;
    justify-content: flex-start;
    gap: 12px;
    margin-inline: 0;
    padding: 14px 18px;
    border-radius: 999px;
  }

  .workspace-app.is-sidebar-collapsed .workspace-nav button.is-active::before,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .workspace-nav button.is-active::before,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:focus-within .workspace-nav button.is-active::before {
    display: block;
    width: 4px;
    height: 24px;
    flex: 0 0 4px;
    margin-left: -7px;
  }

  .workspace-app.is-sidebar-collapsed .nav-copy,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:hover .nav-copy,
  .workspace-app.is-sidebar-collapsed .workspace-sidebar:focus-within .nav-copy {
    width: auto;
    opacity: 1;
    pointer-events: auto;
  }
}