* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  color: white;
  background: #01061c;
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #01061c;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.42s ease;
}
.page-curtain.ready {
  opacity: 0;
  pointer-events: none;
}
.page-curtain.leaving {
  opacity: 1;
  pointer-events: auto;
  transition-duration: 0.18s;
}

#threeCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.ui-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.75s ease, transform 0.9s cubic-bezier(.19,1,.22,1), filter 0.75s ease;
}

.layout-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 120px;
  transform: translateY(-40px);
}

.block-canvas-spacer {
  width: 340px;
  height: 340px;
  flex-shrink: 0;
}

.login-fields {
  pointer-events: auto;
  text-shadow: 0 4px 12px rgba(0,0,0,0.9);
  user-select: none;
  transition: opacity 0.55s ease, transform 0.75s cubic-bezier(.19,1,.22,1), filter 0.55s ease;
}

.name { font-size: 38px; font-weight: normal; letter-spacing: -0.5px; }
.email { margin-top: 2px; font-size: 13px; opacity: 0.7; font-family: Arial, sans-serif; }
.email-reveal {
  display:block;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  cursor:pointer;
  text-shadow:inherit;
}
.email-reveal:not(:disabled):hover,
.email-reveal:not(:disabled):focus-visible {
  color:#dff7ff;
  text-decoration:underline;
  text-underline-offset:3px;
}
.email-reveal:focus-visible {
  outline:1px solid rgba(127,220,255,.8);
  outline-offset:4px;
  border-radius:3px;
}
.email-reveal:disabled {
  cursor:default;
}
.label { margin-top: 26px; margin-bottom: 10px; font-size: 12px; opacity: 0.8; }

.password-row { display: flex; align-items: center; gap: 14px; }

input {
  width: 255px; height: 32px; border: 1px solid #456b94; outline: none;
  border-radius: 999px; padding: 0 16px; font-size: 24px; letter-spacing: 5px;
  color: #126ecf; font-weight: bold; text-shadow: 0 1px 2px rgba(255,255,255,0.9);
  background: linear-gradient(to bottom, #ffffff 0%, #edf5ff 45%, #cbe1fd 100%);
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.4), 0 1px 1px rgba(255,255,255,0.4);
}

.go-btn {
  width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.7);
  border-radius: 50%; color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #5cc7ff 25%, #0f5eb8 65%, #03143b 100%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.8);
  padding: 0;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease, box-shadow 0.2s ease;
}

.go-btn svg { width: 18px; height: 18px; stroke-width: 3.5; transition: transform 0.2s ease; }

.go-btn:hover {
  transform: scale(1.15);
  filter: brightness(1.1);
  box-shadow: 0 0 14px rgba(92, 199, 255, 0.8), inset 0 1px 2px rgba(255,255,255,1);
}

.go-btn:hover svg { transform: translateX(2px); }
.go-btn:active { transform: scale(0.9); filter: brightness(0.9); }

.shelf {
  position: absolute; left: 0; right: 0; bottom: 0; height: 155px; z-index: 10;
  background: linear-gradient(to bottom, rgba(255,255,255,0.03) 0%, rgba(3,15,48,0.2) 20%, rgba(1,5,18,0.85) 100%);
  border-top: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px);
  transition: opacity 0.75s ease, transform 1s cubic-bezier(.19,1,.22,1), filter 0.75s ease;
}

.users-tray {
  position: absolute; z-index: 20; left: 50%; bottom: 25px;
  transform: translateX(-50%); display: flex; gap: 36px;
  transition: opacity 0.65s ease, transform 0.85s cubic-bezier(.19,1,.22,1), filter 0.65s ease;
}

.user {
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}

.user:hover { transform: translateY(-3px); }

.avatar {
  position: relative; width: 76px; height: 76px; padding: 2px; border-radius: 15px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.user.active .avatar {
  border: 2px solid #ffffff;
  box-shadow: 0 0 22px rgba(90, 185, 255, 0.8);
}

.avatar-inner { width: 100%; height: 100%; border-radius: 11px; overflow: hidden; }

.avatar img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) sepia(1) hue-rotate(190deg) saturate(4) brightness(0.5) contrast(1.3);
  transition: filter 0.25s ease;
}

.user:hover .avatar img,
.user.active .avatar img { filter: none; }

.user-label {
  margin-top: 8px;
  font-size: 13px;
  opacity: 0.8;
  transition: opacity 0.2s ease, font-weight 0.2s ease;
}

.user.active .user-label {
  font-weight: bold;
  opacity: 1;
}

.power-btn {
  position: absolute; left: 65px; bottom: 35px; z-index: 20;
  text-align: center; font-size: 12px; text-shadow: 0 2px 5px rgba(0,0,0,0.9);
  cursor: pointer; opacity: 0.85;
  transition: opacity 0.65s ease, transform 0.85s cubic-bezier(.19,1,.22,1), filter 0.65s ease;
}

.power-icon {
  width: 44px; height: 44px; margin: 0 auto 6px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #7cd8ff 25%, #1d6ed0 65%, #071f54 100%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
}

.power-icon svg { width: 20px; height: 20px; stroke-width: 2.8; }

.power-btn:hover { opacity: 1; }

.power-btn:hover .power-icon {
  transform: scale(1.12);
  box-shadow: 0 0 18px rgba(46, 157, 255, 0.9), 0 5px 12px rgba(0,0,0,0.4);
}

.power-btn:active .power-icon { transform: scale(0.92); }

.clock {
  position: absolute; right: 65px; bottom: 48px; z-index: 20;
  font-size: 16px; opacity: 0.85; text-shadow: 0 2px 5px rgba(0,0,0,0.8);
  transition: opacity 0.65s ease, transform 0.85s cubic-bezier(.19,1,.22,1), filter 0.65s ease;
}

.loading-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at center, rgba(120,210,255,0.28) 0%, rgba(50,120,255,0.1) 24%, rgba(1,6,28,0) 58%);
  transition: opacity 0.8s ease;
}

.welcome-text {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  font-size: 46px;
  letter-spacing: -1px;
  text-align: center;
  padding: 24px;
  text-shadow: 0 8px 24px rgba(0,0,0,0.9);
  transition: opacity 1.15s ease, transform 1.15s ease, filter 1.15s ease;
  transform: scale(0.96);
  filter: blur(8px);
  cursor: pointer;
}

body.show-welcome .welcome-text {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  pointer-events: auto;
}

body.hide-welcome .welcome-text {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(10px);
  pointer-events: none;
}

body.logging-in {
  cursor: wait;
}

body.logging-in .login-fields {
  opacity: 0;
  transform: translateX(95px) scale(0.94);
  filter: blur(8px);
  pointer-events: none;
}

body.logging-in .users-tray {
  opacity: 0;
  transform: translateX(-50%) translateY(85px) scale(0.92);
  filter: blur(10px);
  pointer-events: none;
}

body.logging-in .shelf {
  opacity: 0;
  transform: translateY(120px);
  filter: blur(14px);
}

body.logging-in .power-btn {
  opacity: 0;
  transform: translateY(70px) scale(0.9);
  filter: blur(8px);
  pointer-events: none;
}

body.logging-in .clock {
  opacity: 0;
  transform: translateY(70px) scale(0.9);
  filter: blur(8px);
}

body.logging-in .ui-layer {
  pointer-events: none;
}

body.logging-in .loading-glow {
  opacity: 1;
}


/* Empty state + profile creator */
.login-fields.is-hidden { opacity: 0; pointer-events: none; transform: translateX(20px); }

.empty-state {
  pointer-events: none;
  text-align: left;
  width: 330px;
  text-shadow: 0 4px 12px rgba(0,0,0,0.9);
  transition: opacity .45s ease, transform .55s cubic-bezier(.19,1,.22,1);
}
.empty-state h1 { margin: 0 0 8px; font-size: 34px; font-weight: 400; letter-spacing: -.5px; }
.empty-state p { margin: 0; font-size: 14px; line-height: 1.5; opacity: .72; }
.empty-state.is-hidden { opacity: 0; transform: translateX(20px); }

.add-user {
  text-align: center;
  cursor: pointer;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.9);
  transition: transform .2s ease;
}
.add-user:hover { transform: translateY(-3px); }
.add-avatar {
  width: 76px; height: 76px; border-radius: 15px;
  display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.5);
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(8,36,94,.62));
  box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter: blur(14px);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.add-user:hover .add-avatar {
  border-color: #fff;
  box-shadow: 0 0 22px rgba(90,185,255,.8), 0 6px 14px rgba(0,0,0,.5);
}
.add-avatar svg { width: 34px; height: 34px; stroke-width: 2.2; }

.profile-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  background: rgba(0,5,24,.5);
  backdrop-filter: blur(22px) saturate(1.2);
  transition: opacity .35s ease, visibility .35s ease;
}
.profile-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.profile-panel {
  width: min(560px, 100%);
  padding: 28px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(9,30,79,.68)),
    radial-gradient(circle at top left, rgba(113,213,255,.28), transparent 42%);
  box-shadow: 0 28px 80px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.45);
  transform: translateY(22px) scale(.96);
  transition: transform .45s cubic-bezier(.19,1,.22,1);
}
.profile-overlay.open .profile-panel { transform: translateY(0) scale(1); }
.profile-panel h2 { margin: 0; font-size: 30px; font-weight: 400; letter-spacing: -.5px; }
.profile-panel .sub { margin: 7px 0 24px; font-size: 13px; opacity: .7; }
.profile-mode-switch {
  width: max-content;
  display: flex;
  gap: 3px;
  margin: -10px 0 20px;
  padding: 3px;
  border: 1px solid rgba(191,229,255,.2);
  border-radius: 999px;
  background: rgba(0,12,43,.34);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.25);
}
.profile-mode-switch button {
  height: 29px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(221,239,253,.62);
  background: transparent;
  cursor: pointer;
  font-size: 10.5px;
}
.profile-mode-switch button.active {
  border-color: rgba(224,246,255,.38);
  color: #fff;
  background: linear-gradient(to bottom,rgba(105,207,255,.45),rgba(25,83,157,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px rgba(0,8,34,.28);
}
.profile-panel.existing-account-mode .create-account-only { display: none; }
.profile-panel.existing-account-mode .creator-grid { grid-template-columns: 1fr; }
.creator-grid { display: grid; grid-template-columns: 132px 1fr; gap: 24px; align-items: start; }
.icon-picker {
  position: relative; width: 132px; height: 132px; border-radius: 24px; overflow: hidden;
  border: 2px solid rgba(255,255,255,.55);
  background: linear-gradient(145deg,#bcecff,#225eae 65%,#071b4a);
  box-shadow: 0 14px 30px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.55);
  cursor: pointer;
}
.icon-picker img { width: 100%; height: 100%; object-fit: cover; display: none; }
.icon-picker.has-image img { display: block; }
.icon-picker .upload-placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 14px; font-size: 12px; line-height: 1.35; }
.icon-picker.has-image .upload-placeholder { display: none; }
.icon-picker input { display: none; }
.creator-fields { display: grid; gap: 14px; }
.creator-field label { display: block; margin: 0 0 7px 4px; font-size: 12px; opacity: .8; }
.creator-field input {
  width: 100%; height: 42px; padding: 0 15px; border-radius: 14px;
  font-size: 15px; letter-spacing: 0; color: #083a78; text-shadow: none;
}
.creator-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.overlay-btn {
  height: 38px; border-radius: 999px; padding: 0 18px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.42); color: white;
  background: linear-gradient(to bottom, rgba(255,255,255,.2), rgba(3,25,72,.7));
  box-shadow: 0 5px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.overlay-btn.primary { background: linear-gradient(to bottom,#63ceff,#176dc8 60%,#08347e); }
.form-error { min-height: 18px; margin-top: 10px; font-size: 12px; color: #ffd8df; text-align: right; }


.delete-user-button .delete-avatar {
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(74,12,34,.68));
}
.delete-user-button:hover .delete-avatar {
  box-shadow: 0 0 22px rgba(255,95,125,.65), 0 6px 14px rgba(0,0,0,.5);
}
.delete-panel { width: min(640px, 100%); }
.delete-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 16px;
  max-height: 330px;
  overflow-y: auto;
  padding: 4px;
}
.delete-choice {
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  padding: 12px;
  color: white;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(7,27,72,.62));
  box-shadow: 0 8px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.delete-choice:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 0 20px rgba(90,185,255,.45), 0 8px 20px rgba(0,0,0,.28);
}
.delete-choice.selected {
  transform: translateY(-3px);
  border-color: #fff;
  box-shadow: 0 0 22px rgba(90,185,255,.7), 0 8px 20px rgba(0,0,0,.3);
}
.delete-choice img {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
  margin: 0 auto 9px;
  border: 2px solid rgba(255,255,255,.42);
  transition: filter .22s ease, opacity .22s ease;
}
.delete-choice.selected img {
  filter: grayscale(1) brightness(.62) contrast(1.15);
  opacity: .82;
}
.delete-choice-name { font-size: 13px; overflow-wrap: anywhere; }
.delete-password-step {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  animation: deletePasswordIn .32s cubic-bezier(.19,1,.22,1);
}
@keyframes deletePasswordIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
#deletePasswordInput {
  transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
#deletePasswordInput.wrong-password {
  border-color: #ff5f78;
  color: #c91438;
  background: linear-gradient(to bottom, #fff1f3 0%, #ffd9df 48%, #f3aeba 100%);
  box-shadow: inset 0 3px 6px rgba(104,0,20,.3), 0 0 0 2px rgba(255,62,96,.18), 0 0 18px rgba(255,62,96,.34);
  font-size: 15px;
  letter-spacing: 0;
  text-shadow: none;
}
.overlay-btn.danger {
  background: linear-gradient(to bottom, #ff7891, #c52e50 60%, #72142e);
}
.delete-permanent-step {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  animation: deletePasswordIn .32s cubic-bezier(.19,1,.22,1);
}
.delete-warning-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid rgba(255,126,150,.42);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,105,133,.17), rgba(73,8,35,.42)),
    rgba(4,18,55,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 9px 24px rgba(35,0,13,.22);
}
.delete-warning-symbol {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,211,220,.5);
  border-radius: 50%;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  background: linear-gradient(to bottom, #ff7891, #a91e45);
  box-shadow: 0 0 18px rgba(255,66,105,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.delete-warning-card strong,
.delete-warning-card span { display: block; }
.delete-warning-card strong { margin-bottom: 4px; font-size: 13px; }
.delete-warning-card span { color: rgba(235,242,255,.68); font-size: 11px; line-height: 1.45; }
.delete-local-notice {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid rgba(177,220,255,.18);
  border-radius: 14px;
  background: rgba(2,17,53,.34);
}
.delete-local-notice strong,
.delete-local-notice small { display: block; }
.delete-local-notice strong { font-size: 12px; }
.delete-local-notice small { color: rgba(224,238,255,.58); font-size: 10px; line-height: 1.4; }

/* Smooth return from the desktop after signing out */
body.returning-from-desktop .layout-container,
body.returning-from-desktop .users-tray,
body.returning-from-desktop .clock {
  opacity: 0;
  filter: blur(12px);
}
body.returning-from-desktop .layout-container { transform: translateY(-52px) scale(1.025); }
body.returning-from-desktop .users-tray { transform: translateX(-50%) translateY(38px) scale(.96); }
body.returning-from-desktop.return-ready .layout-container,
body.returning-from-desktop.return-ready .users-tray,
body.returning-from-desktop.return-ready .clock {
  opacity: 1;
  filter: blur(0);
}
body.returning-from-desktop.return-ready .layout-container { transform: translateY(-35px) scale(1); }
body.returning-from-desktop.return-ready .users-tray { transform: translateX(-50%) translateY(0) scale(1); }

@media (max-width: 760px) {
  .layout-container { gap: 24px; transform: translateY(-55px); }
  .block-canvas-spacer { width: 220px; height: 220px; }
  .users-tray { gap: 18px; max-width: calc(100vw - 40px); overflow-x: auto; padding: 8px 4px; }
  .creator-grid { grid-template-columns: 1fr; }
  .icon-picker { width: 112px; height: 112px; margin: 0 auto; }
}