:root {
  --yili-shell-width: 236px;
  --yili-shell-bg: #080808;
  --yili-shell-line: #242428;
  --yili-shell-text: #f7f7f8;
  --yili-shell-muted: #828288;
  --yili-shell-dim: #68686f;
  --yili-shell-purple: #8b3dff;
  --yili-shell-purple-2: #a855f7;
  --sidebar: var(--yili-shell-width);
}

/* Shared desktop shell */
.app-shell { min-height: 100vh; }
.sidebar,
.side-rail {
  width: var(--yili-shell-width) !important;
  background: var(--yili-shell-bg) !important;
  border-right: 1px solid var(--yili-shell-line) !important;
  backdrop-filter: blur(18px);
}
.sidebar { z-index: 20; }
.main-shell { grid-column: 2; min-width: 0; }

/* Shared brand header */
.sidebar > .brand,
.side-rail > .brand-mark {
  min-height: 72px !important;
  height: 72px !important;
  padding: 0 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--yili-shell-line) !important;
}
.sidebar > .brand .brand-mark,
.side-rail > .brand-mark > span:first-child {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #0b0b11 url('/workspace-assets/yili-mark.svg') center / cover no-repeat !important;
  box-shadow: 0 0 22px rgba(139, 92, 246, .22) !important;
  color: transparent !important;
  font-size: 0 !important;
}
.side-rail > .brand-mark > span:first-child svg { display: none !important; }
.sidebar .brand-copy,
.side-rail .brand-mark > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sidebar .brand-name,
.side-rail .brand-mark strong {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
}
.sidebar .brand-sub,
.side-rail .brand-mark small {
  margin: 0 !important;
  color: #77747f !important;
  font: 600 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .17em !important;
}

/* Shared navigation rhythm */
.sidebar-scroll { padding: 0 !important; }
.sidebar-scroll > nav,
.side-rail > nav {
  padding: 22px 12px !important;
}
.side-rail > nav { flex: 1; overflow-y: auto; }
.sidebar .nav-group + .nav-group { margin-top: 15px !important; }
.sidebar .nav-label,
.side-rail nav > small {
  display: block;
  margin: 15px 10px 8px !important;
  padding: 0 !important;
  color: var(--yili-shell-dim) !important;
  font: 600 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}
.sidebar .nav-group:first-child .nav-label,
.side-rail nav > small:first-child { margin-top: 0 !important; }

.sidebar .nav-link,
.side-rail nav > button,
.side-rail .yili-workspace-link {
  width: 100%;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  color: var(--yili-shell-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-align: left;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.sidebar .nav-link:hover,
.side-rail nav > button:hover,
.side-rail .yili-workspace-link:hover {
  color: #ddd !important;
  background: #111 !important;
  border-color: transparent !important;
}
.sidebar .nav-link.active,
.side-rail nav > button.active,
.side-rail .yili-workspace-link.active {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(139, 61, 255, .19), rgba(139, 61, 255, .03)) !important;
  border-color: #352256 !important;
  box-shadow: inset 3px 0 0 var(--yili-shell-purple) !important;
}
.sidebar .nav-link > span:last-child,
.side-rail nav > button > span:last-of-type,
.side-rail .yili-workspace-link > span:last-child {
  flex: 1;
  min-width: 0;
}
.sidebar .nav-link > svg,
.side-rail nav > button > svg,
.side-rail .yili-workspace-link > svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
  color: #85858c;
  stroke-width: 1.8;
}
.sidebar .nav-link.active > svg,
.side-rail nav > button.active > svg,
.side-rail .yili-workspace-link.active > svg { color: var(--yili-shell-purple-2); }

/* Module-specific navigation may keep compact step labels, but not boxed app icons. */
.sidebar .nav-group + .nav-group .nav-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #85858c !important;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
.sidebar .nav-group + .nav-group .nav-link.active .nav-icon { color: var(--yili-shell-purple-2) !important; }

/* Shared service status */
.sidebar-status,
.side-rail .engine-card {
  min-height: 62px;
  margin: 0 !important;
  padding: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid #28282c !important;
  border-radius: 0 !important;
  background: #0e0e10 !important;
  box-shadow: none !important;
}
.sidebar-status { margin: 0 12px 18px !important; }
.side-rail .rail-bottom { padding: 14px 12px 18px !important; border-top: 1px solid var(--yili-shell-line) !important; }
.sidebar-status > svg,
.side-rail .engine-card > svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  color: var(--yili-shell-purple-2) !important;
  stroke-width: 2;
}
.sidebar-status > div,
.side-rail .engine-card > div {
  min-width: 0;
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.sidebar-status b,
.side-rail .engine-card b {
  color: #d8d6de !important;
  font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .08em !important;
}
.sidebar-status small,
.side-rail .engine-card small {
  margin: 0 !important;
  color: #74747b !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}
.sidebar .status-dot,
.side-rail .engine-card > i {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px;
  border-radius: 50% !important;
}
.side-rail .rail-bottom > button {
  min-height: 38px !important;
  margin-top: 8px !important;
  padding: 0 12px !important;
  color: #888 !important;
  font-size: 12px !important;
}

/* Shared top bar */
.topbar,
.top-bar {
  min-height: 72px !important;
  height: 72px !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: rgba(8, 8, 8, .91) !important;
  border-bottom: 1px solid var(--yili-shell-line) !important;
  backdrop-filter: blur(18px);
}
.breadcrumb,
.breadcrumbs {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0;
  color: #7e7e85 !important;
  font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .13em !important;
}
.breadcrumb strong,
.breadcrumbs b { color: #ddd9e8 !important; font-size: 13px !important; letter-spacing: 0 !important; }
  .top-actions { display: flex !important; align-items: center !important; gap: 9px !important; }
.top-actions > button {
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
}
.top-actions > .avatar {
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
}
#yili-theme-toggle {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 11px !important;
  border: 1px solid #35353b !important;
  border-radius: 8px !important;
  background: #101012 !important;
  color: #dedbe5 !important;
  font-size: 12px !important;
}
#yili-theme-toggle:hover { border-color: #6f4b9e !important; background: #17151b !important; }
#yili-theme-toggle.yili-theme-floating { visibility: hidden !important; pointer-events: none !important; }

/* Asset-library hero keeps its dark surface in every theme. */
html[data-theme] .library-hero .section-kicker { color: #b78aff !important; }
html[data-theme] .library-hero h1 { color: #ffffff !important; }
html[data-theme] .library-hero p { color: #aaa6b3 !important; }

/* Light theme keeps the same geometry. */
:root[data-theme="light"] {
  --yili-shell-bg: #fff;
  --yili-shell-line: #dddbe6;
  --yili-shell-text: #1c1924;
  --yili-shell-muted: #5f5968;
  --yili-shell-dim: #7b7685;
}
[data-theme="light"] .sidebar,
[data-theme="light"] .side-rail,
[data-theme="light"] .topbar,
[data-theme="light"] .top-bar { background: rgba(255, 255, 255, .96) !important; }
[data-theme="light"] .sidebar .brand-name,
[data-theme="light"] .side-rail .brand-mark strong { color: #17131d !important; }
[data-theme="light"] .sidebar .brand-sub,
[data-theme="light"] .side-rail .brand-mark small,
[data-theme="light"] .sidebar .nav-label,
[data-theme="light"] .side-rail nav > small { color: #77717f !important; }
[data-theme="light"] .sidebar .nav-link,
[data-theme="light"] .side-rail nav > button,
[data-theme="light"] .side-rail .yili-workspace-link { color: #625c69 !important; }
[data-theme="light"] .sidebar-status b,
[data-theme="light"] .side-rail .engine-card b { color: #423b49 !important; }
[data-theme="light"] .sidebar-status small,
[data-theme="light"] .side-rail .engine-card small,
[data-theme="light"] .side-rail .rail-bottom > button { color: #746d7b !important; }
[data-theme="light"] .sidebar .nav-link:hover,
[data-theme="light"] .side-rail nav > button:hover,
[data-theme="light"] .side-rail .yili-workspace-link:hover { color: #35214f !important; background: #f6f2fb !important; }
[data-theme="light"] .sidebar .nav-link.active,
[data-theme="light"] .side-rail nav > button.active,
[data-theme="light"] .side-rail .yili-workspace-link.active { color: #4c1d83 !important; background: #eee7fa !important; border-color: #d7c3f3 !important; }
[data-theme="light"] .sidebar-status,
[data-theme="light"] .side-rail .engine-card { background: #faf9fc !important; border-color: #d7d3de !important; }
[data-theme="light"] #yili-theme-toggle { color: #393344 !important; background: #fff !important; border-color: #d2ceda !important; }

@media (max-width: 960px) {
  .app-shell { display: block !important; }
  .sidebar,
  .side-rail {
    width: var(--yili-shell-width) !important;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  body.menu-open .sidebar,
  .side-rail.open { transform: translateX(0); }
  .main-shell { grid-column: 1; }
  .app-body { width: 100% !important; margin-left: 0 !important; }
  .topbar,
  .top-bar {
    min-height: 62px !important;
    height: 62px !important;
    padding: 0 14px !important;
    justify-content: flex-start !important;
    overflow: hidden;
  }
  .mobile-nav-button,
  .mobile-menu { flex: 0 0 34px !important; margin-right: 10px !important; }
  .breadcrumb,
  .breadcrumbs { flex: 1; min-width: 0; overflow: hidden; }
  .breadcrumb > span,
  .breadcrumbs > span,
  .breadcrumb > i,
  .breadcrumbs > i { display: none !important; }
  .breadcrumb > strong,
  .breadcrumbs > b {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .top-actions { flex: 0 0 auto; margin-left: auto; gap: 6px !important; }
  .top-actions .save-state,
  .top-actions .saved-dot { display: none !important; }
  .top-actions .avatar { display: none !important; }
  .top-actions .ghost-action {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
    overflow: hidden;
    font-size: 0 !important;
  }
  .top-actions .ghost-action svg { width: 17px !important; height: 17px !important; margin: 0 !important; }
}

@media (max-width: 640px) {
  .breadcrumb > strong,
  .breadcrumbs > b { font-size: 12px !important; }
  .top-actions .btn.small { max-width: 82px; min-height: 38px; padding: 0 10px !important; white-space: nowrap; }
  #yili-theme-toggle { width: 38px !important; min-width: 38px !important; padding: 0 !important; }
  #yili-theme-toggle > span:last-child { display: none !important; }
}