/* Critical shared shell styles: loaded before the full design system. */
:root {
  --ds-radius: 8px;
  --loading-base: #f6f8f9;
  --loading-bar: #e3e9ec;
}
html[data-resolved-theme='dark'],
html[data-theme='dark'],
.design-system[data-ds-theme='dark'] {
  --loading-base: #1a2124;
  --loading-bar: #2d3a40;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']):not([data-resolved-theme='light']) {
    --loading-base: #1a2124;
    --loading-bar: #2d3a40;
  }
}
.design-system[data-ds-theme='light'] {
  --loading-base: #f6f8f9;
  --loading-bar: #e3e9ec;
}
html[data-page-state='loading'] {
  background: var(--loading-base);
}
html[data-page-state='loading'] [data-page-loading-content],
html[data-shell-state='loading'] [data-shell-loading-nav] {
  position: relative;
  min-height: 48px;
}
html[data-page-state='loading'] [data-page-loading-content] > :not(.page-loading-skeleton):not(.page-loading-error),
html[data-shell-state='loading']
  .layout
  > .sidebar:not(.right-nav)
  > :not(.page-loading-skeleton):not(.page-loading-error),
html[data-shell-state='loading'] [data-shell-loading-nav] > :not(.page-loading-skeleton):not(.page-loading-error) {
  visibility: hidden !important;
  pointer-events: none !important;
}
.page-loading-skeleton {
  display: none;
}
html[data-page-state='loading'] [data-page-loading-content] > .page-loading-skeleton,
html[data-shell-state='loading'] .layout > .sidebar:not(.right-nav) > .page-loading-skeleton,
html[data-shell-state='loading'] [data-shell-loading-nav] > .page-loading-skeleton,
.page-loading-preview > .page-loading-skeleton {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 16px;
  gap: 24px;
  pointer-events: none;
  overflow: hidden;
  animation: page-skeleton-pulse 1.5s ease-in-out infinite;
}
.page-loading-skeleton > i {
  display: block;
  flex: none;
  height: 14px;
  width: 100%;
  border-radius: var(--ds-radius);
  background: var(--loading-bar);
}
.page-loading-skeleton--page > i:first-child {
  width: 38%;
  height: 28px;
}
.page-loading-skeleton--page > i:nth-child(2) {
  width: 72%;
  margin-bottom: 16px;
}
.page-loading-skeleton--page > i:last-child {
  width: 62%;
}
html[data-shell-state='loading'] .sidebar > .page-loading-skeleton--sidebar {
  inset: 24px 20px;
  gap: 28px;
}
.page-loading-skeleton--sidebar > i:first-child {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin-bottom: 14px;
}
.page-loading-skeleton--sidebar > i:nth-child(2) {
  position: absolute;
  top: 5px;
  left: 48px;
  width: calc(100% - 48px);
  height: 12px;
}
.page-loading-skeleton--sidebar > i:nth-child(3) {
  position: absolute;
  top: 25px;
  left: 48px;
  width: 50%;
  height: 8px;
}
.page-loading-skeleton--section > i:nth-child(even) {
  width: 80%;
}
html[data-shell-state='loading'] [data-shell-loading-nav='tabs'] > .page-loading-skeleton--tabs,
.page-loading-preview > .page-loading-skeleton--tabs {
  flex-direction: row;
  gap: 16px;
  inset: 12px 0;
}
.page-loading-skeleton--tabs > i {
  width: 96px;
  height: 24px;
}
html[data-shell-state='loading']
  :is(.pc-main-sidebar-toggle-row, .study-sidebar-toggle-row, .crm-main-sidebar-toggle-row) {
  visibility: hidden;
}
[data-loading-error='true'] > .page-loading-skeleton {
  display: none !important;
}
[data-loading-error='true'] > .page-loading-error {
  visibility: visible !important;
  pointer-events: auto !important;
  position: absolute;
  inset: 16px;
  min-height: 100px;
  color: var(--text, #1a2124);
  background: var(--bg, var(--loading-base));
}
.page-loading-error button {
  padding: 10px 14px;
  border: 0;
  border-radius: var(--ds-radius);
  background: #2cbdec;
  color: #10242c;
  cursor: pointer;
}
.page-loading-preview {
  position: relative;
  height: 180px;
  background: var(--loading-base);
  border-radius: var(--ds-radius);
}
.page-loading-preview--tabs {
  height: 48px;
}
@keyframes page-skeleton-pulse {
  50% {
    opacity: 0.55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-loading-skeleton {
    animation: none !important;
  }
}