body.auth-page { background: #181818; transition: background 1.5s ease; }
body.auth-page.auth-preview, body.auth-page.auth-awake { background: #0a1836; }
body.auth-page .auth-shell { filter: grayscale(1); transition: filter 1.5s ease; }
body.auth-page:not(.auth-awake):not(.auth-preview) .loading-overlay { filter: grayscale(1); }
body.auth-page.auth-preview .auth-shell, body.auth-page.auth-awake .auth-shell { filter: grayscale(0); }
.auth-logo-image, .auth-ocean-layout .auth-logo-image { width: 65px; height: 65px; object-fit: contain; border-radius: 18px; }
.brand-logo-image { background: transparent url('onesync-mark.svg') center / contain no-repeat; }
.auth-ready-card { text-align: center; }
.auth-ready-card .auth-brand { display: flex; text-align: left; margin-bottom: 12px; }
.wake-scene { position: relative; max-width: 300px; margin: auto; }
.wake-bulb { position: absolute; left: 44%; top: -3px; color: #ffbd59; font-size: 44px; opacity: .3; transform: scale(.7); transition: opacity 1s, transform 1s, filter 1s; }
.auth-awake .wake-bulb { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 22px #ffd786); }
.cute-pair { display: block; width: 100%; max-width: 340px; margin: auto; overflow: visible; }
.cute-bounce { animation: cute-bounce 1s ease-in-out infinite; }
.cute-second { animation-delay: .2s; }
.cute-wave { transform-origin: 30px 44px; animation: cute-wave .55s ease-in-out infinite alternate; }
.cute-hearts { animation: cute-heart 1.2s ease-in-out infinite; transform-origin: 150px 60px; }
.wake-progress { height: 5px; background: #e6ebee; border-radius: 8px; overflow: hidden; margin: 22px 0; }
.wake-progress span { display: block; height: 100%; background: linear-gradient(90deg,#70cdbc,#ffca80); animation: wake-progress 2.5s ease-out both; }
.auth-continue { display: inline-block; padding: 10px 18px; font-size: .88rem; color: #314e66; }
.cute-logoff { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: #f3e9da; animation: cute-lights-out 2.4s ease both; color: #383447; padding: 24px; }
.cute-room { text-align: center; width: min(420px,100%); position: relative; }
.cute-room h2 { font-size: 1.65rem; margin: 14px 0 6px; color: inherit; }
.cute-room p { color: inherit; font-size: .92rem; min-height: 2.8em; margin: 0 0 4px; }
.cute-room small { display: block; opacity: .75; }
.cute-lamp { height: 75px; position: relative; margin-bottom: 10px; }
.cute-lamp span { display: block; width: 60px; height: 36px; border-radius: 35px 35px 10px 10px; background: #ffd279; margin: auto; box-shadow: 0 12px 60px 24px #ffdeac; animation: cute-lamp-off 2.4s ease both; }
.cute-lamp i { display: block; width: 2px; height: 35px; margin: 0 auto; background: #77694d; transform-origin: top; animation: cute-cord 1.5s ease both; }
.cute-lamp i::after { content: ''; display: block; position: relative; top: 31px; left: -3px; width: 8px; height: 8px; background: #ddaa54; border-radius: 50%; }
.cute-stars { position: absolute; top: 35px; width: 100%; font-size: 32px; letter-spacing: 12px; color: #ffdc95; opacity: 0; animation: cute-stars 2.4s ease both; }
.cute-sleep { position: absolute; right: 12%; top: 85px; color: #bac3e5; opacity: 0; animation: cute-stars 2.4s ease both; font-weight: 800; }
.cute-logoff .cute-pair { animation: cute-tuck-in 2.4s ease both; }
.cute-logoff .cute-wave, .cute-logoff .cute-bounce { animation-iteration-count: 3; }
.cute-skip { margin-top: 18px; padding: 9px 16px; color: inherit; border: 1px solid currentColor; background: transparent; border-radius: 20px; font-size: .8rem; }
@keyframes cute-bounce { 50% { transform: translateY(-7px); } }
@keyframes cute-wave { to { transform: rotate(-30deg); } }
@keyframes cute-heart { 50% { transform: translateY(-8px) scale(1.12); } }
@keyframes wake-progress { from { width: 0; } to { width: 100%; } }
@keyframes cute-lights-out { 0%,38% { background: #f3e9da; color: #383447; } 80%,100% { background: #151c32; color: #f6eddf; } }
@keyframes cute-lamp-off { 0%,40% { box-shadow: 0 12px 60px 24px #ffdeac; } 65%,100% { background: #786a51; box-shadow: 0 0 0 0 transparent; } }
@keyframes cute-cord { 40% { transform: translateY(12px); } 70% { transform: rotate(-12deg); } }
@keyframes cute-stars { 0%,50% { opacity: 0; } 85%,100% { opacity: 1; } }
@keyframes cute-tuck-in { 0%,45% { filter: brightness(1); } 100% { filter: brightness(.7); transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .cute-logoff, .cute-logoff *, .wake-scene *, .wake-progress span { animation: none !important; transition: none !important; } body.auth-page .auth-shell { transition: none; } }

.bubu-dudu-image { object-fit: contain; height: auto; border-radius: 12px; }


/* Exact user-provided artwork; movement stays in CSS so the image is unchanged. */
.eps-dance {
  display: block; width: min(220px, 65vw); margin: 18px auto;
  transform-origin: 50% 85%; animation: eps-duo-groove 1.2s ease-in-out infinite;
  will-change: transform;
}
.eps-dance[hidden] { display: none; }
.eps-dance .eps-dance-image, .cute-logoff .eps-dance .eps-dance-image {
  display: block; width: 100%; max-width: 100%; height: auto; border-radius: 20px;
  object-fit: contain; transform-origin: 50% 90%;
  animation: eps-duo-hop .6s ease-in-out infinite;
  box-shadow: 0 12px 30px #00000020;
}
.loading-overlay .eps-dance { margin-bottom: 8px; }
@keyframes eps-duo-groove {
  0%,100% { transform: translateX(-10px) rotate(-6deg); }
  25% { transform: translateX(0) rotate(2deg); }
  50% { transform: translateX(10px) rotate(6deg); }
  75% { transform: translateX(0) rotate(-2deg); }
}
@keyframes eps-duo-hop {
  0%,100% { transform: translateY(0) scale(1.02,.98); }
  35% { transform: translateY(-12px) scale(.98,1.02); }
  65% { transform: translateY(-4px) scale(1,1); }
}
@media (prefers-reduced-motion: reduce) {
  .eps-dance, .eps-dance .eps-dance-image,
  .cute-logoff .eps-dance .eps-dance-image { animation: none !important; will-change: auto; }
}