:root {
  --motion-fast: 160ms;
  --motion-normal: 240ms;
  --motion-slow: 420ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.authenticated-app { position: relative; min-height: 100vh; overflow-x: hidden; background: var(--ln-canvas, #f6f5f1); }
.app-background { position: fixed; inset: var(--app-nav-height, 72px) 0 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 12% 8%, rgba(117, 101, 232, .055), transparent 32%), radial-gradient(circle at 88% 78%, rgba(79, 145, 164, .05), transparent 30%); }
.app-background i { position: absolute; width: 70vw; height: 24vw; border: 1px solid rgba(92, 106, 151, .06); border-radius: 50%; transform: rotate(13deg); animation: app-contour-drift 38s ease-in-out infinite alternate; }
.app-background i:first-child { top: 5vh; left: -35vw; }
.app-background i:last-child { right: -38vw; bottom: 0; border-color: rgba(117, 101, 232, .055); transform: rotate(-17deg); animation-duration: 47s; animation-delay: -12s; }
@keyframes app-contour-drift { to { transform: translate3d(2vw, 1.5vh, 0) rotate(16deg) scale(1.02); opacity: .7; } }

.app-page { animation: app-page-enter var(--motion-slow) var(--motion-ease) both; }
.reveal-card { animation: app-card-enter var(--motion-slow) var(--motion-ease) both; animation-delay: min(var(--delay, 0ms), 420ms); }
@keyframes app-page-enter { from { opacity: 0; transform: translateY(11px); } }
@keyframes app-card-enter { from { opacity: 0; transform: translateY(9px); } }

.authenticated-app :is(.dashboard-card, .project-tile, .saved-lesson, .mistake, .today-card, .section-card, .learning-section-row, .exam-review, .project-create-card) { transition: transform var(--motion-normal) var(--motion-ease), border-color var(--motion-fast), box-shadow var(--motion-normal) var(--motion-ease); }
.authenticated-app :is(.dashboard-card, .project-tile, .saved-lesson, .mistake, .today-card, .section-card, .learning-section-row, .exam-review):hover { transform: translateY(-3px); border-color: rgba(117, 101, 232, .25); box-shadow: 0 15px 38px rgba(24, 35, 63, .1); }
.authenticated-app :is(.project-tile, .saved-lesson, .learning-section-row):active { transform: scale(.99); }

.authenticated-app :is(.primary-button, .secondary-button, .continue-button, .notebook-primary, button) { transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast), filter var(--motion-fast), opacity var(--motion-fast); }
.authenticated-app :is(.primary-button, .secondary-button, .continue-button, .notebook-primary, button):hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.025); }
.authenticated-app :is(.primary-button, .secondary-button, .continue-button, .notebook-primary, button):active:not(:disabled) { transform: scale(.98); }
.authenticated-app :is(button, a):focus-visible { outline: 3px solid rgba(117, 101, 232, .24); outline-offset: 3px; }
.authenticated-app button:disabled { cursor: not-allowed; opacity: .62; }
.app-button-loading { position: relative; cursor: wait !important; }
.app-button-loading::after { content: ""; width: 14px; height: 14px; margin-left: 9px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: app-spin .7s linear infinite; }
@keyframes app-spin { to { transform: rotate(360deg); } }

.progress-animated { transform: scaleX(0); transform-origin: left; transition: transform .75s var(--motion-ease); }
.progress-animated.progress-visible { transform: scaleX(1); }
.trend-bars .progress-animated { transform: scaleY(0); transform-origin: bottom; }
.trend-bars .progress-animated.progress-visible { transform: scaleY(1); }

.global-alerts .form-alert { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid rgba(139, 50, 29, .12); box-shadow: 0 9px 28px rgba(24, 35, 63, .07); animation: alert-enter var(--motion-normal) var(--motion-ease) both; }
.global-alerts .form-alert.success { border-color: rgba(45, 155, 115, .18); background: #edf9f4; color: #176448; }
.alert-dismiss { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: currentColor; cursor: pointer; font-size: 19px; }
.alert-dismiss:hover, .alert-dismiss:focus-visible { background: rgba(24, 35, 63, .07); }
.form-alert.alert-leaving { opacity: 0; transform: translateY(-5px); }
@keyframes alert-enter { from { opacity: 0; transform: translateY(-6px); } }

.global-loading-overlay { opacity: 0; visibility: hidden; transition: opacity var(--motion-normal), visibility var(--motion-normal); }
.global-loading-overlay:not(.hidden) { opacity: 1; visibility: visible; }
.ai-loading-card { width: min(430px, calc(100vw - 32px)); padding: 30px; border: 1px solid rgba(255,255,255,.24); border-radius: 22px; background: #1d2947f2; box-shadow: 0 24px 70px rgba(11, 18, 35, .3); text-align: center; }
.ai-loading-card .spinner { margin: 0 auto 18px; }
.ai-loading-card p { margin: 0 0 7px; font: 800 18px Manrope, sans-serif; }
.ai-loading-card small { color: #d4d9e8; }
.skeleton-lines { display: grid; gap: 8px; margin-top: 23px; }
.skeleton-lines i { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #ffffff12, #ffffff38, #ffffff12); background-size: 220% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.skeleton-lines i:nth-child(2) { width: 82%; }.skeleton-lines i:nth-child(3) { width: 63%; }
@keyframes skeleton-shimmer { to { background-position: -220% 0; } }

.empty-state, .empty-project { padding: 34px; border: 1px dashed #cfd1da; border-radius: 18px; background: rgba(255,255,255,.65); text-align: center; animation: app-card-enter var(--motion-slow) var(--motion-ease) both; }
.empty-state-icon, .empty-project::before { display: grid; width: 48px; height: 48px; margin: 0 auto 13px; place-items: center; border-radius: 15px; background: #efedff; color: #5c50c7; font-size: 22px; }
.empty-project::before { content: "◇"; }
.empty-state h3, .empty-project h3 { margin: 0 0 6px; }.empty-state p, .empty-project p { margin: 0 auto 16px; color: var(--muted); }

@media (max-width: 768px) { .app-background i:last-child { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .app-background i, .app-page, .reveal-card, .global-alerts .form-alert, .skeleton-lines i, .app-button-loading::after { animation: none !important; }
  .authenticated-app *, .authenticated-app *::before, .authenticated-app *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .progress-animated, .trend-bars .progress-animated { transform: none !important; }
  .authenticated-app :is(.dashboard-card, .project-tile, .saved-lesson, .mistake, .today-card, .section-card, .learning-section-row, .exam-review):hover { transform: none; }
}