/* Visual layer only: existing project buttons and handlers remain in control. */
.app-shell {
  --sidebar-width: 240px;
  --shell-gap: 16px;
  padding: 0 16px 0 0;
}
.dm-sidebar {
  --dm-text: #d6e3f7;
  --dm-muted: #91a9cc;
  --dm-line: #26384e;
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  position: sticky;
  top: 0;
  padding: 12px;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #294466 transparent;
  color: var(--dm-text);
  background: radial-gradient(circle at 55% 0%, #2d5ca033, transparent 30%), linear-gradient(180deg, #09182b, #071426);
  border: 1px solid #263b55;
  border-left: 0;
  border-radius: 0 26px 26px 0;
  box-shadow: 10px 0 35px #020a231a, inset -1px 0 #ffffff05;
  font-family: "Segoe UI", sans-serif;
}
.dm-sidebar > * { flex-shrink: 0; }
.dm-brand { height: 44px; display: flex; align-items: center; padding: 0 44px 0 8px; position: sticky; top: -12px; z-index: 2; background: #0b1b30; }
.dm-logo { width: 135px; max-width: 100%; max-height: 36px; object-fit: contain; object-position: left; }
.app-shell .sidebar-rail-toggle {
  position: fixed;
  top: 16px;
  left: calc(var(--sidebar-width) - 50px);
  transform: none;
  width: 34px;
  height: 34px;
  border: 1px solid #29415f;
  border-radius: 12px;
  background: #09182bf2;
  color: #a9c4ed;
  font-size: 20px;
  box-shadow: none;
}
.app-shell.sidebar-collapsed .sidebar-rail-toggle { left: 10px; width: 42px; height: 48px; top: 14px; }
.app-shell .sidebar-rail-toggle:hover { background: #102643; border-color: #3c5d86; }
.app-shell .sidebar-rail-toggle:focus-visible, .dm-sidebar button:focus-visible { outline: 2px solid #6ca5ff; outline-offset: 3px; }
.dm-portal-card {
  box-sizing: border-box;
  min-height: 66px;
  margin-top: 8px;
  padding: 12px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  border: 1px solid #377ff2a6;
  background: radial-gradient(circle at 20% 20%, #277cff59, transparent 42%), linear-gradient(120deg, #123d7b, #173667 45%, #102746);
  box-shadow: inset 0 1px 0 #ffffff14, 0 12px 30px #001e5033;
}
.dm-portal-icon {
  flex: 0 0 42px;
  height: 42px;
  display: grid;
  grid-template-columns: repeat(2, 9px);
  grid-template-rows: repeat(2, 9px);
  place-content: center;
  gap: 5px;
  border-radius: 11px;
  background: linear-gradient(145deg, #2b86ff, #1747a1);
  box-shadow: 0 0 28px #3584ff59, inset 0 1px 0 #ffffff33;
}
.dm-portal-icon span { border: 2px solid #d8e9ff; border-radius: 2px; }
.dm-portal-title { font-size: 15px; font-weight: 700; line-height: 1.2; color: #fff; }
.dm-portal-subtitle { margin-top: 4px; font-size: 10px; line-height: 1.3; color: #a9bddc; }
.dm-sidebar .nav:empty { display: none; }
.dm-sidebar .nav-group { margin-top: 18px; padding-top: 16px; border-color: var(--dm-line); gap: 6px; }
.dm-sidebar .nav-group-hd { min-height: 30px; padding: 0 10px; font-size: 11px; color: #b8cbea; letter-spacing: .05em; }
.dm-sidebar #projectsCount { min-width: 32px; height: 26px; display: grid; place-content: center; border: 0; border-radius: 99px; background: #173c76; color: #8db8ff; font-size: 12px; }
.dm-sidebar .project-nav { gap: 3px; }
.dm-sidebar .nav-btn, .dm-sidebar .proj-group-hd, .dm-sidebar .sidebar-bottom .btn {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 36px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #c7d8f1;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.dm-sidebar .proj-group-hd { grid-template-columns: 26px minmax(0, 1fr) 16px; }
.dm-nav-label { min-width: 0; overflow-wrap: anywhere; }
.dm-icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; color: #a8c2ed; justify-self: center; pointer-events: none; }
.dm-sidebar .proj-group-arrow { font-size: 21px; color: #a6c2e8; opacity: 1; justify-self: end; }
.dm-sidebar .nav-btn:hover, .dm-sidebar .proj-group-hd:hover, .dm-sidebar .sidebar-bottom .btn:hover { color: #fff; background: #4a7fcc1a; border-color: transparent; }
.dm-sidebar .proj-group-items { margin-left: 13px; padding-left: 18px; border-left: 2px solid #213c62; gap: 5px; }
.dm-sidebar .proj-group-items .nav-btn { min-height: 32px; padding: 7px 10px; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 12px; position: relative; }
.dm-sidebar .sidebar-bottom .btn { font-size: 12px; }
.dm-sidebar .nav-btn.active, .dm-sidebar .sidebar-bottom .btn.active {
  color: #fff;
  border-color: #347cf0;
  background: radial-gradient(circle at 10% 50%, #2b7cff4d, transparent 45%), linear-gradient(90deg, #12346a, #153a74);
  box-shadow: inset 0 1px 0 #ffffff0f, 0 5px 18px #003a912e;
  font-weight: 700;
}
.dm-sidebar .proj-group-items .nav-btn.active::before { content: ""; position: absolute; left: -21px; top: 0; bottom: 0; width: 4px; border-radius: 99px; background: #62a1ff; box-shadow: 0 0 12px #62a1ffa6; }
.dm-sidebar .sidebar-bottom { margin-top: 18px; padding-top: 16px; border-color: var(--dm-line); gap: 3px; }
.dm-sidebar .hidden { display: none !important; }
.dm-profile-wrap { margin-top: auto; padding-top: 18px; }
.dm-profile { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; border-top: 1px solid var(--dm-line); padding: 18px 10px 0; }
.dm-avatar { position: relative; width: 48px; height: 48px; display: grid; place-content: center; border: 1px solid #3d8aff; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #255c9d, #173968); font-size: 18px; }
.dm-online { position: absolute; right: -1px; bottom: 2px; width: 13px; height: 13px; border: 3px solid #071426; border-radius: 50%; background: #00d486; }
.dm-profile-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dm-profile-info strong { font-size: 14px; color: #fff; overflow-wrap: anywhere; }
.dm-profile-info > span { font-size: 12px; color: #91a9cc; }
@media (max-width: 900px) {
  .app-shell { --sidebar-width: 240px; }
  .dm-sidebar { padding: 12px; }
  .dm-brand { top: -12px; }
}
@media (max-width: 600px) {
  .app-shell { --sidebar-width: min(240px, calc(100vw - 36px)); padding: 0; gap: 0; grid-template-columns: minmax(0, 1fr); }
  .dm-sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar-width); z-index: 55; }
  .app-shell.sidebar-collapsed .dm-sidebar { visibility: hidden; }
  .app-shell .workspace-card { min-height: 100dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell, .app-shell .sidebar-rail-toggle, .dm-sidebar, .dm-sidebar button { transition: none !important; }
}

/* Neon Pricing MA / CT icons: glow on the active item only. */
.dm-sidebar .nav-btn.active .dm-icon-neon { filter: drop-shadow(0 0 3px #00f0ff) drop-shadow(0 0 6px #ff2bd6); }