.particle-field-runtime{position:fixed;inset:0;z-index:1;width:100vw;height:100vh;pointer-events:none;opacity:.58;mix-blend-mode:screen}.app-shell>*:not(.particle-field-runtime),.space-landing>*:not(.particle-field-runtime),.cinematic-landing>*:not(.particle-field-runtime){z-index:2}button,a,input,textarea,select,.nav-item,.icon-btn,.primary,.secondary,.magic-btn,.generate-main,.project-card,.library-card,.shot-card,.task-card,.safe-dropdown-trigger{transition:color .18s ease,background-color .22s ease,border-color .22s ease,box-shadow .26s ease,transform .26s cubic-bezier(.22,.8,.25,1),opacity .22s ease}button:active,.primary:active,.secondary:active,.safe-dropdown-trigger:active{transform:scale(.975)}.page{animation:motionPageIn .42s cubic-bezier(.22,.8,.25,1) both}.modal-backdrop,.payment-modal-backdrop,.space-auth-backdrop,.cinematic-auth-backdrop,.shot-video-modal-backdrop,.creation-history-backdrop{animation:motionBackdropIn .26s ease-out both}.modal,.payment-modal,.space-auth-dialog,.cinematic-auth-dialog,.shot-video-modal,.creation-history-modal{animation:motionSurfaceIn .42s cubic-bezier(.22,1,.36,1) both;transform-origin:center}.safe-dropdown-menu{animation:motionDropdownIn .22s cubic-bezier(.22,.8,.25,1) both;transform-origin:top center}.safe-dropdown-menu button{transition:color .16s ease,background-color .18s ease,transform .18s ease}.safe-dropdown-menu button:hover{transform:translateX(2px)}.sidebar{transition:transform .3s cubic-bezier(.22,.8,.25,1),box-shadow .3s ease}.mobile-backdrop{transition:opacity .26s ease,backdrop-filter .26s ease}.motion-closing{animation:motionBackdropOut .2s ease-in both!important;pointer-events:none}.motion-closing>.modal,.motion-closing>.payment-modal,.motion-closing>.space-auth-dialog,.motion-closing>.cinematic-auth-dialog,.motion-closing>.shot-video-modal,.motion-closing>.creation-history-modal,.modal.motion-closing,.payment-modal.motion-closing,.space-auth-dialog.motion-closing,.cinematic-auth-dialog.motion-closing,.shot-video-modal.motion-closing,.creation-history-modal.motion-closing{animation:motionSurfaceOut .2s ease-in both!important}@keyframes motionPageIn{from{opacity:0;transform:translateY(12px) scale(.992);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}@keyframes motionBackdropIn{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1}}@keyframes motionSurfaceIn{from{opacity:0;transform:translateY(16px) scale(.965);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}@keyframes motionDropdownIn{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:none}}@keyframes motionBackdropOut{to{opacity:0;backdrop-filter:blur(0)}}@keyframes motionSurfaceOut{to{opacity:0;transform:translateY(10px) scale(.975);filter:blur(3px)}}@media(prefers-reduced-motion:reduce){.particle-field-runtime{display:none}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Login surface: centered glass card matching the approved reference. */
.auth-screen {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(580px 420px at 50% 42%, rgba(23, 50, 82, .26), transparent 72%),
    #030507;
}
.auth-screen::before,
.auth-screen::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(80px);
  opacity: .38;
}
.auth-screen::before { width: 260px; height: 260px; top: -100px; left: 11%; background: rgba(39, 106, 190, .22); }
.auth-screen::after { width: 340px; height: 220px; right: 8%; bottom: 4%; background: rgba(30, 78, 139, .18); }
.auth-screen .auth-card {
  position: relative;
  z-index: 2;
  width: min(540px, calc(100vw - 32px));
  min-height: 0;
  padding: 46px 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 30px;
  background: rgba(7, 10, 16, .78);
  box-shadow: 0 42px 120px rgba(0,0,0,.62), inset 0 1px 1px rgba(255,255,255,.08);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  animation: motionSurfaceIn .42s cubic-bezier(.22,1,.36,1) both;
}
.auth-screen .auth-visual { display: none; }
.auth-screen .auth-brand { position: static; margin-bottom: 34px; }
.auth-screen .auth-copy h1 { font-size: clamp(42px, 7vw, 58px); letter-spacing: -3px; }
.auth-screen .auth-copy p { max-width: none; margin: 16px 0 26px; color: rgba(255,255,255,.58); }
.auth-screen .auth-tabs,
.auth-screen .auth-card form,
.auth-screen .auth-security { width: 100%; max-width: none; }
.auth-screen .auth-tabs { margin-bottom: 22px; background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.1); }
.auth-screen .auth-card input { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12); }
.auth-screen .auth-card input:focus { background: rgba(255,255,255,.075); }
.auth-screen .auth-submit { color: #050506; background: #d7d8dc; }
.auth-screen .auth-submit:not(:disabled):hover { color: #050506; background: #f4f4f5; box-shadow: 0 14px 28px rgba(0,0,0,.24); }
.auth-screen .auth-submit:disabled { color: rgba(0,0,0,.6); background: #777a80; opacity: 1; }
.auth-screen .admin-login-link,
.auth-screen .admin-back-link { align-self: flex-start; }
@media (max-width: 640px) {
  .auth-screen { padding: 10px; }
  .auth-screen .auth-card { width: calc(100vw - 20px); padding: 40px 22px 26px; border-radius: 24px; }
  .auth-screen .auth-brand { margin-bottom: 24px; }
  .auth-screen .auth-copy h1 { font-size: 44px; }
}
/* Approved reference-home composition. */
.space-landing {
  position: relative;
  min-height: 100svh;
  background:
    radial-gradient(620px 480px at 50% 38%, rgba(18, 58, 105, .44), transparent 72%),
    radial-gradient(420px 260px at 52% 70%, rgba(18, 41, 76, .22), transparent 72%),
    #03070d;
}
.space-landing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(1,4,9,.26), rgba(1,5,11,.54) 58%, rgba(1,3,8,.82));
}
.space-landing > .space-video,
.space-landing > .space-hero > .space-video,
.space-landing > .space-capabilities > .space-video { opacity: .28; filter: saturate(.72) brightness(.58) contrast(1.08); }
.space-hero-layer { z-index: 10; min-height: 100svh; }
.space-nav {
  top: 16px;
  width: min(1120px, calc(100vw - 32px));
  min-height: 64px;
  padding: 7px 9px 7px 14px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(3, 8, 16, .55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 52px rgba(0,0,0,.18);
}
.space-brand img { width: 42px; height: 42px; filter: drop-shadow(0 8px 22px rgba(55,143,255,.36)); }
.space-brand strong { font-size: 14px; letter-spacing: .08em; }
.space-brand small { color: rgba(255,255,255,.45); font-size: 8px; letter-spacing: .18em; }
.space-nav-center { gap: 12px; }
.space-nav-center > button { padding: 8px 10px; color: rgba(255,255,255,.78); font-size: 14px; transition: color .2s ease, transform .2s ease; }
.space-nav-center > button:hover { color: #fff; transform: translateY(-1px); }
.space-claim { min-height: 48px; padding: 0 18px; color: #05070b; background: #f7f7f8; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.space-hero-content { padding: 128px 16px 24px; }
.space-badge { border: 1px solid rgba(151,190,235,.62); background: rgba(8,21,39,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.space-badge span { padding: 4px 12px; font-size: 12px; }
.space-badge b { font-size: 13px; }
.space-blur-title { max-width: 820px; margin-top: 20px; font-size: clamp(72px, 8.5vw, 116px); line-height: .8; letter-spacing: -5px; text-shadow: 0 4px 32px rgba(0,0,0,.18); }
.space-subheading { max-width: 610px; margin-top: 23px; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.45; }
.space-actions { margin-top: 28px; gap: 24px; }
.space-primary { min-height: 52px; padding: 0 20px; border: 1px solid rgba(255,255,255,.35); background: rgba(11,25,44,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.space-secondary { color: rgba(255,255,255,.78); }
.space-secondary:hover { color: #fff; }
.space-stats { margin-top: 34px; gap: 14px; }
.space-stats article { width: 205px; min-height: 96px; padding: 17px; border: 1px solid rgba(164,191,220,.42); border-radius: 20px; background: rgba(10,25,42,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.12); }
.space-stats article svg { color: rgba(255,255,255,.92); }
.space-stats strong { font-size: 29px; }
.space-stats span { margin-top: 7px; color: rgba(255,255,255,.68); font-size: 12px; }
.space-scroll-hint { margin-bottom: 20px; color: rgba(255,255,255,.62); }
@media (max-width: 640px) {
  .space-nav { width: calc(100vw - 20px); }
  .space-hero-content { padding-top: 112px; }
  .space-blur-title { font-size: clamp(58px, 16vw, 84px); letter-spacing: -3px; }
  .space-subheading { max-width: 340px; font-size: 14px; }
  .space-stats article { width: min(100%, 340px); }
}