* { 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; }
}


/* =========================================================
   Aqua OS cold-boot sequence
   Replace images/aqua-logo.png with your own logo file.
   This sequence runs only on a fresh opening of index.html.
   It is skipped when returning from desktop logout.
   ========================================================= */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(35,124,235,.16), transparent 34%),
    linear-gradient(180deg, #01061c 0%, #020a29 54%, #010417 100%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .9s ease, visibility .9s ease, filter .9s ease;
}
.boot-screen::before {
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 25% 25%, rgba(90,204,255,.12), transparent 24%),
    radial-gradient(circle at 78% 68%, rgba(35,89,255,.12), transparent 28%);
  filter:blur(45px);
  animation:bootAtmosphere 5.2s ease-in-out infinite alternate;
}
.boot-screen.boot-leaving {
  opacity:0;
  visibility:hidden;
  filter:blur(12px);
  pointer-events:none;
}
.boot-content {
  position:relative;
  z-index:2;
  width:min(500px, calc(100vw - 48px));
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transform:translateY(7px);
}
.boot-logo-shell {
  position:relative;
  width:132px;
  height:132px;
  display:grid;
  place-items:center;
  margin-bottom:28px;
  opacity:0;
  transform:scale(.78) translateY(10px);
  filter:blur(10px);
  animation:bootLogoIn 1.15s .25s cubic-bezier(.16,1,.3,1) forwards;
}
.boot-logo-shell::before {
  content:"";
  position:absolute;
  inset:-26px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(102,209,255,.25), rgba(42,103,255,.08) 42%, transparent 70%);
  filter:blur(8px);
  animation:bootLogoPulse 2.7s 1.15s ease-in-out infinite;
}
.boot-logo {
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.52));
}

.boot-logo-fallback {
  display:grid;
  place-items:center;
  width:86px;
  height:86px;
  border:1px solid rgba(164,238,255,.72);
  border-radius:52% 48% 58% 42% / 62% 46% 54% 38%;
  color:#f2fdff;
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.88) 0 3%,transparent 4%),linear-gradient(145deg,#71e6ff,#167fcb 58%,#073877);
  box-shadow:0 0 30px rgba(81,209,255,.58),inset 0 1px 1px rgba(255,255,255,.72);
  font:700 40px/1 "Segoe UI",sans-serif;
  text-shadow:0 2px 8px rgba(0,34,91,.72);
  transform:rotate(-5deg);
}
.boot-title {
  margin:0;
  font-size:34px;
  font-weight:400;
  letter-spacing:-.65px;
  text-shadow:0 6px 24px rgba(0,0,0,.86);
  opacity:0;
  transform:translateY(12px);
  animation:bootTextIn .9s .8s cubic-bezier(.16,1,.3,1) forwards;
}
.boot-status {
  min-height:20px;
  margin-top:10px;
  font-size:12px;
  letter-spacing:.25px;
  color:rgba(219,239,255,.62);
  opacity:0;
  animation:bootTextIn .8s 1.1s ease forwards;
}
.boot-loader {
  position:relative;
  width:236px;
  height:5px;
  margin-top:28px;
  overflow:hidden;
  border-radius:999px;
  border:1px solid rgba(178,224,255,.16);
  background:rgba(0,8,35,.58);
  box-shadow:
    inset 0 1px 4px rgba(0,0,0,.7),
    0 1px 0 rgba(255,255,255,.05);
  opacity:0;
  animation:bootTextIn .8s 1.25s ease forwards;
}
.boot-loader-fill {
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#1a65c8,#64d8ff 50%,#d6f7ff);
  box-shadow:0 0 14px rgba(92,210,255,.82);
  transition:width .6s cubic-bezier(.2,.8,.2,1);
}
.boot-orbit {
  position:absolute;
  inset:50%;
  width:194px;
  height:194px;
  margin:-97px;
  border-radius:50%;
  border:1px solid rgba(170,224,255,.09);
  opacity:.7;
  animation:bootOrbit 7s linear infinite;
}
.boot-orbit::after {
  content:"";
  position:absolute;
  top:14px;
  left:50%;
  width:5px;
  height:5px;
  margin-left:-2.5px;
  border-radius:50%;
  background:#bfefff;
  box-shadow:0 0 13px rgba(100,215,255,1);
}
body.booting {
  cursor:wait;
}
body.booting #stage,
body.booting .profile-overlay {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
body.boot-complete #stage {
  animation:loginStageIn 1s cubic-bezier(.16,1,.3,1) both;
}
body.boot-complete .ui-layer,
body.boot-complete .shelf,
body.boot-complete .users-tray,
body.boot-complete .power-btn,
body.boot-complete .clock {
  animation:loginElementsIn 1.05s .1s cubic-bezier(.16,1,.3,1) both;
}

@keyframes bootAtmosphere {
  from { transform:translate3d(-1.5%,-1%,0) scale(1); }
  to { transform:translate3d(1.5%,1%,0) scale(1.06); }
}
@keyframes bootLogoIn {
  to { opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
}
@keyframes bootTextIn {
  to { opacity:1; transform:translateY(0); }
}
@keyframes bootLogoPulse {
  0%,100% { opacity:.55; transform:scale(.94); }
  50% { opacity:1; transform:scale(1.08); }
}
@keyframes bootOrbit {
  to { transform:rotate(360deg); }
}
@keyframes loginStageIn {
  from { opacity:0; filter:blur(14px); transform:scale(1.025); }
  to { opacity:1; filter:blur(0); transform:scale(1); }
}
@keyframes loginElementsIn {
  from { opacity:0; filter:blur(10px); }
  to { opacity:1; filter:blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .boot-screen::before,
  .boot-logo-shell,
  .boot-logo-shell::before,
  .boot-title,
  .boot-status,
  .boot-loader,
  .boot-orbit,
  body.boot-complete #stage,
  body.boot-complete .ui-layer,
  body.boot-complete .shelf,
  body.boot-complete .users-tray,
  body.boot-complete .power-btn,
  body.boot-complete .clock {
    animation:none !important;
  }
  .boot-logo-shell,
  .boot-title,
  .boot-status,
  .boot-loader {
    opacity:1;
    transform:none;
    filter:none;
  }
}


/* =========================================================
   Aqua OS extended kernel boot
   ========================================================= */
.boot-screen {
  background:#00040d !important;
  transition:opacity 1.15s ease, visibility 1.15s ease, filter 1.15s ease !important;
}
.boot-screen::before {
  opacity:.32;
  background:
    radial-gradient(circle at 50% 45%, rgba(17,67,150,.18), transparent 34%),
    linear-gradient(rgba(45,117,190,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,117,190,.02) 1px, transparent 1px);
  background-size:auto, 4px 4px, 4px 4px;
  filter:none;
  animation:none;
}
.boot-screen::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent 0%, rgba(120,190,255,.025) 49%, rgba(120,190,255,.06) 50%, transparent 52%);
  background-size:100% 5px;
  opacity:.18;
}

.boot-terminal {
  position:absolute;
  inset:0;
  z-index:3;
  padding:34px 42px;
  font-family:"Courier New", Consolas, monospace;
  font-size:14px;
  line-height:1.52;
  color:#a9d7ff;
  text-shadow:0 0 8px rgba(68,166,255,.28);
  opacity:1;
  transition:opacity .85s ease, filter .85s ease, transform .85s ease;
}
.boot-terminal.hidden {
  opacity:0;
  filter:blur(8px);
  transform:scale(1.015);
}
.boot-terminal-head {
  margin-bottom:14px;
  color:#e2f3ff;
}
.boot-terminal-line {
  white-space:pre-wrap;
  min-height:1.52em;
}
.boot-terminal-line.ok::before {
  content:"[  OK  ] ";
  color:#7fffb9;
}
.boot-terminal-line.warn::before {
  content:"[ WARN ] ";
  color:#ffe795;
}
.boot-terminal-line.info::before {
  content:"[ INFO ] ";
  color:#77bfff;
}
.boot-cursor {
  display:inline-block;
  width:8px;
  height:1em;
  margin-left:4px;
  vertical-align:-2px;
  background:#bfe7ff;
  animation:bootCursorBlink .72s steps(1) infinite;
}

.boot-content {
  opacity:0;
  transform:translateY(18px) scale(.97);
  filter:blur(12px);
  transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1), filter 1.1s ease;
}
.boot-content.brand-visible {
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
.boot-logo-shell,
.boot-title,
.boot-status,
.boot-loader {
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  animation:none !important;
}
.boot-logo-shell {
  width:144px;
  height:144px;
  margin-bottom:32px;
}
.boot-title {
  font-size:38px;
}
.boot-status {
  margin-top:12px;
  font-size:13px;
  min-height:22px;
}
.boot-loader {
  width:270px;
  height:6px;
  margin-top:30px;
}
.boot-loader-fill {
  transition:width .9s cubic-bezier(.18,.8,.2,1);
}
.boot-orbit {
  width:218px;
  height:218px;
  margin:-109px;
  opacity:.9;
}
.boot-brand-subtitle {
  margin-top:7px;
  font-size:11px;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:rgba(198,229,255,.42);
}
.boot-skip {
  position:absolute;
  right:26px;
  bottom:22px;
  z-index:4;
  border:0;
  background:transparent;
  color:rgba(206,232,250,.38);
  font:11px Tahoma, Arial, sans-serif;
  cursor:pointer;
}
.boot-skip:hover { color:rgba(235,248,255,.78); }

@keyframes bootCursorBlink {
  0%,48% { opacity:1; }
  49%,100% { opacity:0; }
}


/* =========================================================
   Aqua OS revised boot sequence
   - monochrome kernel
   - hard cut into branded wave screen
   - full-background visualizer waves
   - dotted progress rail
   ========================================================= */
.boot-screen {
  background:#000 !important;
}
.boot-screen::before,
.boot-screen::after {
  display:none !important;
}

.boot-terminal {
  color:#f2f2f2 !important;
  background:#000;
  text-shadow:none !important;
  font-family:Consolas, "Courier New", monospace;
  font-size:13px;
  line-height:1.48;
  transition:none !important;
}
.boot-terminal.hidden {
  display:none !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
}
.boot-terminal-head {
  color:#fff !important;
}
.boot-terminal-line.ok::before,
.boot-terminal-line.warn::before,
.boot-terminal-line.info::before {
  color:#fff !important;
}
.boot-cursor {
  background:#fff !important;
  box-shadow:none !important;
}

.boot-content {
  position:absolute;
  inset:0;
  width:100%;
  max-width:none;
  display:block;
  opacity:0;
  transform:none;
  filter:none;
  transition:opacity .35s ease;
  overflow:hidden;
}
.boot-content.brand-visible {
  opacity:1;
  transform:none;
  filter:none;
}

.boot-wave-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.boot-wave-shade {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 72% 40%, rgba(115,219,255,.14), transparent 29%),
    radial-gradient(circle at 28% 63%, rgba(35,104,255,.13), transparent 34%),
    linear-gradient(180deg, rgba(0,5,28,.14), rgba(0,3,18,.5));
  pointer-events:none;
}

.boot-brand-layout {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:minmax(260px, .82fr) minmax(320px, 1.18fr);
  align-items:center;
  gap:5vw;
  padding:8vh 8vw 13vh;
}
.boot-brand-copy {
  justify-self:end;
  width:min(480px, 100%);
  text-align:left;
  text-shadow:0 12px 36px rgba(0,0,0,.68);
}
.boot-logo-shell {
  width:112px !important;
  height:112px !important;
  margin:0 0 28px !important;
}
.boot-logo-shell::before,
.boot-orbit {
  display:none !important;
}
.boot-logo {
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.5));
}
.boot-title {
  margin:0;
  font-size:clamp(38px, 5vw, 74px) !important;
  line-height:.98;
  letter-spacing:-2.6px;
  max-width:580px;
}
.boot-brand-subtitle {
  margin-top:17px;
  max-width:430px;
  font-size:12px;
  line-height:1.7;
  letter-spacing:2.4px;
  color:rgba(222,241,255,.58);
}
.boot-status {
  position:absolute;
  left:8vw;
  bottom:54px;
  margin:0 !important;
  font-size:12px !important;
  letter-spacing:.35px;
  color:rgba(225,243,255,.68);
}

.boot-dot-loader {
  position:absolute;
  left:8vw;
  right:8vw;
  bottom:27px;
  height:10px;
  display:grid;
  grid-template-columns:repeat(30, 1fr);
  gap:8px;
}
.boot-dot {
  height:4px;
  border-radius:999px;
  background:rgba(218,240,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:background .32s ease, box-shadow .32s ease, transform .32s ease;
}
.boot-dot.active {
  background:rgba(213,245,255,.92);
  box-shadow:0 0 10px rgba(110,215,255,.65);
  transform:translateY(-1px);
}
.boot-loader {
  display:none !important;
}
.boot-skip {
  right:8vw !important;
  bottom:49px !important;
  color:rgba(225,242,255,.42) !important;
}
.boot-skip:hover {
  color:#fff !important;
}

@media (max-width: 760px) {
  .boot-terminal {
    padding:22px 20px;
    font-size:11px;
  }
  .boot-brand-layout {
    grid-template-columns:1fr;
    align-content:center;
    padding:8vh 8vw 17vh;
  }
  .boot-brand-copy {
    justify-self:start;
  }
  .boot-logo-shell {
    width:86px !important;
    height:86px !important;
    margin-bottom:22px !important;
  }
  .boot-title {
    font-size:clamp(40px, 13vw, 64px) !important;
  }
  .boot-status {
    bottom:58px;
  }
  .boot-dot-loader {
    bottom:30px;
    grid-template-columns:repeat(20,1fr);
    gap:5px;
  }
}


/* =========================================================
   Aqua OS bright crystal boot refinements
   ========================================================= */
.boot-content {
  background:
    radial-gradient(circle at 68% 42%, rgba(164,236,255,.34), transparent 24%),
    radial-gradient(circle at 22% 70%, rgba(70,174,255,.24), transparent 32%),
    linear-gradient(180deg, #0a2c78 0%, #0d55ae 44%, #0b367f 100%);
}
.boot-wave-shade {
  background:
    radial-gradient(circle at 70% 38%, rgba(220,250,255,.24), transparent 24%),
    radial-gradient(circle at 35% 62%, rgba(83,190,255,.22), transparent 33%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,19,74,.18)) !important;
}
.boot-brand-layout {
  grid-template-columns: minmax(260px, .72fr) minmax(360px, 1.28fr);
  padding: 9vh 8vw 14vh;
}
.boot-brand-copy {
  justify-self:start;
  width:min(560px,100%);
  margin-left:2vw;
}
.boot-logo-shell {
  width:78px !important;
  height:78px !important;
  margin:0 0 22px !important;
}
.boot-title {
  font-size:clamp(44px,5.8vw,86px) !important;
  line-height:.92;
  letter-spacing:-3.5px;
  max-width:640px;
}
.boot-brand-subtitle {
  margin-top:18px;
  font-size:12px;
  letter-spacing:2.8px;
  color:rgba(235,248,255,.72);
}
.boot-status {
  color:rgba(241,250,255,.82);
  text-shadow:0 2px 12px rgba(0,45,120,.5);
}
.boot-dot {
  height:5px;
  background:rgba(235,249,255,.2);
}
.boot-dot.active {
  background:#e8fbff;
  box-shadow:0 0 12px rgba(130,226,255,.95), 0 0 22px rgba(71,165,255,.55);
}
.boot-gpu-flash {
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0%, rgba(195,240,255,.88) 18%, rgba(87,181,255,.42) 42%, rgba(20,86,200,0) 72%);
}
.boot-gpu-flash.fire {
  animation:gpuDriverFlash .58s cubic-bezier(.2,.7,.2,1) both;
}
.boot-particles {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.boot-particle {
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:rgba(235,253,255,.85);
  box-shadow:0 0 8px rgba(168,232,255,.85);
  animation:bootParticleFloat var(--dur) ease-in-out var(--delay) infinite alternate;
  opacity:var(--opacity);
}
@keyframes gpuDriverFlash {
  0% { opacity:0; }
  18% { opacity:1; }
  42% { opacity:.72; }
  100% { opacity:0; }
}
@keyframes bootParticleFloat {
  from { transform:translate3d(0,0,0) scale(.8); }
  to { transform:translate3d(var(--drift-x),var(--drift-y),0) scale(1.3); }
}


/* Character-by-character kernel typing polish */
.boot-terminal-line {
  position:relative;
}
.boot-terminal-line.typing::after {
  content:"";
  display:inline-block;
  width:7px;
  height:1em;
  margin-left:4px;
  vertical-align:-2px;
  background:#fff;
  animation:bootCursorBlink .72s steps(1) infinite;
}
.boot-terminal-line.complete::after {
  display:none;
}


/* =========================================================
   Correct staged login entrance
   Loading finishes -> login background fades in ->
   3D canvas icon drops -> credentials fade in ->
   bottom shelf and controls rise in
   ========================================================= */

/* Disable the older all-at-once boot-complete reveal. */
body.boot-complete #stage,
body.boot-complete .ui-layer,
body.boot-complete .shelf,
body.boot-complete .users-tray,
body.boot-complete .power-btn,
body.boot-complete .clock {
  animation:none !important;
}

/* Prepare the real login elements before the boot overlay is removed. */
body.login-reveal-ready #stage {
  opacity:0 !important;
  visibility:visible !important;
  pointer-events:none;
  filter:blur(12px);
  transform:scale(1.025);
}

body.login-reveal-ready #threeCanvas {
  opacity:0 !important;
  transform:translate3d(0,-145px,0) scale(.82) !important;
  filter:blur(9px);
  transform-origin:50% 32%;
}

body.login-reveal-ready .login-fields {
  opacity:0 !important;
  transform:translate3d(0,22px,0) !important;
  filter:blur(7px);
  pointer-events:none !important;
}

body.login-reveal-ready .shelf,
body.login-reveal-ready .users-tray,
body.login-reveal-ready .power-btn,
body.login-reveal-ready .clock {
  opacity:0 !important;
  filter:blur(7px);
}

body.login-reveal-ready .shelf {
  transform:translate3d(0,100%,0) !important;
}

body.login-reveal-ready .users-tray {
  transform:translate3d(-50%,85px,0) scale(.96) !important;
}

body.login-reveal-ready .power-btn {
  transform:translate3d(0,70px,0) !important;
}

body.login-reveal-ready .clock {
  transform:translate3d(0,70px,0) !important;
}

/* Stage 1 — only the login environment fades in. */
body.login-stage-visible #stage {
  opacity:1 !important;
  filter:blur(0);
  transform:scale(1);
  transition:
    opacity 1.2s cubic-bezier(.22,.75,.18,1),
    filter 1.2s ease,
    transform 1.2s cubic-bezier(.16,1,.3,1);
}

/* Stage 2 — the actual 3D canvas drops into place after the fade. */
body.login-icon-visible #threeCanvas {
  opacity:1 !important;
  transform:translate3d(0,0,0) scale(1) !important;
  filter:blur(0);
  transition:
    transform 1.08s cubic-bezier(.16,1.22,.28,1),
    opacity .5s ease,
    filter .78s ease;
}

/* Stage 3 — name, password, and login button reveal after the icon lands. */
body.login-details-visible .login-fields:not(.is-hidden) {
  opacity:1 !important;
  transform:translate3d(0,0,0) !important;
  filter:blur(0);
  pointer-events:auto !important;
  transition:
    opacity .72s ease,
    transform .82s cubic-bezier(.16,1,.3,1),
    filter .62s ease;
}

/* Stage 4 — lower tab and controls rise together with the credentials. */
body.login-bottom-visible .shelf,
body.login-bottom-visible .users-tray,
body.login-bottom-visible .power-btn,
body.login-bottom-visible .clock {
  opacity:1 !important;
  filter:blur(0);
  transition:
    transform .95s cubic-bezier(.16,1,.3,1),
    opacity .62s ease,
    filter .62s ease;
}

body.login-bottom-visible .shelf {
  transform:translate3d(0,0,0) !important;
}

body.login-bottom-visible .users-tray {
  transform:translate3d(-50%,0,0) scale(1) !important;
}

body.login-bottom-visible .power-btn,
body.login-bottom-visible .clock {
  transform:translate3d(0,0,0) !important;
}

body.login-sequence-complete #stage,
body.login-sequence-complete #threeCanvas,
body.login-sequence-complete .login-fields,
body.login-sequence-complete .shelf,
body.login-sequence-complete .users-tray,
body.login-sequence-complete .power-btn,
body.login-sequence-complete .clock {
  pointer-events:auto;
}

@media (prefers-reduced-motion: reduce) {
  body.login-reveal-ready #stage,
  body.login-reveal-ready #threeCanvas,
  body.login-reveal-ready .login-fields,
  body.login-reveal-ready .shelf,
  body.login-reveal-ready .users-tray,
  body.login-reveal-ready .power-btn,
  body.login-reveal-ready .clock {
    transition:none !important;
    filter:none !important;
  }
}


/* =========================================================
   Aqua OS final boot-to-login polish
   ========================================================= */

/* Subtitle and startup bypass are permanently removed. */
.boot-brand-subtitle,
.boot-skip {
  display:none !important;
}

/* Subtle cinematic drift for the branded loading environment. */
.boot-content.brand-visible .boot-wave-canvas,
.boot-content.brand-visible .boot-wave-shade,
.boot-content.brand-visible .boot-particles {
  animation:bootCameraDrift 8s ease-in-out infinite alternate;
  transform-origin:center;
  will-change:transform;
}

@keyframes bootCameraDrift {
  0%   { transform:translate3d(-2px, 1px, 0) scale(1.006); }
  50%  { transform:translate3d(2px, -2px, 0) scale(1.011); }
  100% { transform:translate3d(4px, 1px, 0) scale(1.007); }
}

/* One restrained bloom pulse immediately before login handoff. */
.boot-logo-shell.final-bloom {
  animation:aquaFinalLogoBloom 1.15s cubic-bezier(.16,1,.3,1) both !important;
}

@keyframes aquaFinalLogoBloom {
  0% {
    transform:scale(1);
    filter:drop-shadow(0 18px 36px rgba(0,0,0,.5));
  }
  42% {
    transform:scale(1.045);
    filter:
      drop-shadow(0 18px 36px rgba(0,0,0,.46))
      drop-shadow(0 0 22px rgba(181,242,255,.92))
      drop-shadow(0 0 55px rgba(72,178,255,.62));
  }
  100% {
    transform:scale(1);
    filter:drop-shadow(0 18px 36px rgba(0,0,0,.5));
  }
}

/* Final travelling shimmer through the completed loading rail. */
.boot-dot-loader.final-shimmer .boot-dot {
  animation:bootDotFinalShimmer .92s ease both;
  animation-delay:calc(var(--dot-index, 0) * 22ms);
}

@keyframes bootDotFinalShimmer {
  0%, 100% {
    transform:translateY(-1px) scaleX(1);
    background:rgba(213,245,255,.92);
    box-shadow:0 0 10px rgba(110,215,255,.65);
  }
  48% {
    transform:translateY(-2px) scaleX(1.16);
    background:#fff;
    box-shadow:
      0 0 11px rgba(255,255,255,.95),
      0 0 24px rgba(112,221,255,.92);
  }
}

/* The login lives underneath the loading screen during the handoff. */
body.login-reveal-ready #stage {
  visibility:visible !important;
}

/* Weighted 3D icon landing with a tiny overshoot and settle. */
body.login-icon-visible #threeCanvas {
  animation:aquaIconWeightedDrop 1.12s cubic-bezier(.18,.88,.22,1) both !important;
  transition:opacity .45s ease, filter .68s ease !important;
}

@keyframes aquaIconWeightedDrop {
  0% {
    opacity:0;
    transform:translate3d(0,-145px,0) scale(.82);
    filter:blur(9px);
  }
  72% {
    opacity:1;
    transform:translate3d(0,5px,0) scale(1.012);
    filter:blur(0);
  }
  86% {
    transform:translate3d(0,-4px,0) scale(.998);
  }
  100% {
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
  }
}

/* Glass glint that crosses the profile icon after it settles. */
.login-icon-glint {
  position:absolute;
  z-index:3;
  top:14%;
  left:50%;
  width:min(380px, 42vw);
  height:min(380px, 42vw);
  transform:translateX(-50%);
  border-radius:50%;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

.login-icon-glint::before {
  content:"";
  position:absolute;
  top:-18%;
  bottom:-18%;
  left:-48%;
  width:24%;
  transform:skewX(-18deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.08),
    rgba(220,249,255,.72),
    rgba(255,255,255,.12),
    transparent
  );
  filter:blur(3px);
}

body.login-icon-glint-visible .login-icon-glint {
  opacity:1;
}

body.login-icon-glint-visible .login-icon-glint::before {
  animation:aquaProfileGlint .72s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes aquaProfileGlint {
  from { left:-48%; opacity:0; }
  18%  { opacity:1; }
  to   { left:128%; opacity:0; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-content.brand-visible .boot-wave-canvas,
  .boot-content.brand-visible .boot-wave-shade,
  .boot-content.brand-visible .boot-particles,
  body.login-icon-visible #threeCanvas,
  body.login-icon-glint-visible .login-icon-glint::before {
    animation:none !important;
  }
}


/* =========================================================
   Centered Aqua OS branded loading composition
   ========================================================= */

.boot-brand {
  left:50% !important;
  right:auto !important;
  top:50% !important;
  bottom:auto !important;
  width:min(760px, 88vw) !important;
  transform:translate(-50%, -50%) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.boot-brand-inner,
.boot-brand-copy {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  width:100% !important;
}

.boot-logo-shell {
  margin:0 auto 30px !important;
  transform-origin:center !important;
}

.boot-logo-shell,
.boot-logo,
.boot-logo-mark {
  align-self:center !important;
}

.boot-title,
.boot-brand-title,
.boot-brand h1 {
  width:100% !important;
  margin:0 !important;
  text-align:center !important;
  font-size:clamp(42px, 5.4vw, 78px) !important;
  line-height:.98 !important;
  letter-spacing:-.045em !important;
}

.boot-status-wrap,
.boot-progress-wrap,
.boot-dot-loader {
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  justify-content:center !important;
}

.boot-status {
  text-align:center !important;
}

.boot-dot-loader {
  margin-top:30px !important;
}

/* Slightly enlarge the logo for the centered hero layout. */
.boot-logo-shell {
  scale:1.12;
}

/* Refined staged exit: title leaves first, logo follows. */
.boot-brand-title.title-exit,
.boot-title.title-exit,
.boot-brand h1.title-exit {
  animation:aquaTitleExit .28s ease both !important;
}

.boot-logo-shell.logo-exit {
  animation:aquaLogoExit .42s ease both !important;
}

@keyframes aquaTitleExit {
  from {
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
  to {
    opacity:0;
    transform:translateY(-8px);
    filter:blur(5px);
  }
}

@keyframes aquaLogoExit {
  0% {
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }
  100% {
    opacity:0;
    transform:scale(.97);
    filter:blur(7px);
  }
}

@media (max-width:700px) {
  .boot-brand {
    width:min(92vw, 620px) !important;
  }

  .boot-logo-shell {
    margin-bottom:24px !important;
    scale:1.04;
  }

  .boot-title,
  .boot-brand-title,
  .boot-brand h1 {
    font-size:clamp(36px, 10vw, 58px) !important;
  }
}


/* =========================================================
   FINAL CORRECTION
   - Actually center the boot composition
   - Remove all logo shimmer/glint
   - Make the real Three.js login canvas visibly drop
   ========================================================= */

/* The actual boot container is .boot-brand-layout, not .boot-brand. */
.boot-brand-layout {
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  padding:0 7vw 92px !important;
  text-align:center !important;
}

.boot-brand-copy {
  justify-self:auto !important;
  align-self:center !important;
  width:min(760px, 88vw) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  text-shadow:0 12px 36px rgba(0,0,0,.68);
}

.boot-logo-shell {
  width:126px !important;
  height:126px !important;
  margin:0 auto 30px !important;
  scale:1 !important;
  transform:none !important;
  animation:none !important;
  filter:none !important;
}

.boot-logo {
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  margin:0 auto !important;
  animation:none !important;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.5)) !important;
}

.boot-title {
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  text-align:center !important;
  font-size:clamp(42px, 5.2vw, 76px) !important;
  line-height:1 !important;
  letter-spacing:-.045em !important;
}

/* Center status and progress rail beneath the hero stack. */
.boot-status {
  left:50% !important;
  right:auto !important;
  bottom:63px !important;
  width:min(760px, 84vw) !important;
  transform:translateX(-50%) !important;
  text-align:center !important;
}

.boot-dot-loader {
  left:50% !important;
  right:auto !important;
  bottom:33px !important;
  width:min(760px, 84vw) !important;
  transform:translateX(-50%) !important;
}

/* Kill every boot-logo shimmer/bloom treatment. */
.boot-logo-shell.final-bloom,
.boot-logo-shell.logo-exit {
  animation:none !important;
  filter:none !important;
}

.boot-logo-shell::after,
.boot-logo::after,
.login-icon-glint,
.login-icon-glint::before {
  display:none !important;
  animation:none !important;
  opacity:0 !important;
}

/* Keep the title fade, but let the logo simply fade with the screen. */
.boot-logo-shell.logo-exit {
  opacity:1 !important;
  transform:none !important;
}

@media (max-width:700px) {
  .boot-brand-layout {
    padding:0 5vw 100px !important;
  }

  .boot-logo-shell {
    width:104px !important;
    height:104px !important;
    margin-bottom:24px !important;
  }

  .boot-title {
    font-size:clamp(36px, 10vw, 56px) !important;
  }

  .boot-status,
  .boot-dot-loader {
    width:86vw !important;
  }
}

/* =========================================================
   REAL 3D PROFILE ICON DROP
   Keep the canvas stationary and animate masterPivot in Three.js.
   ========================================================= */
body.login-reveal-ready #threeCanvas,
body.login-icon-visible #threeCanvas,
body.login-icon-settled #threeCanvas,
body.login-icon-final #threeCanvas {
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  animation:none !important;
  transition:none !important;
}


/* =========================================================
   FIRST-BOOT LOGIN TRANSITION FIX
   The staged boot reveal classes remain on <body> after startup.
   Their !important visibility rules previously overrode logging-in,
   leaving the login UI visible during the Welcome back animation.
   These final rules intentionally take priority.
   ========================================================= */

body.logging-in.login-details-visible .login-fields,
body.logging-in .login-fields {
  opacity:0 !important;
  transform:translate3d(95px,0,0) scale(.94) !important;
  filter:blur(8px) !important;
  pointer-events:none !important;
  transition:
    opacity .55s ease,
    transform .75s cubic-bezier(.19,1,.22,1),
    filter .55s ease !important;
}

body.logging-in.login-bottom-visible .users-tray,
body.logging-in .users-tray {
  opacity:0 !important;
  transform:translate3d(-50%,85px,0) scale(.92) !important;
  filter:blur(10px) !important;
  pointer-events:none !important;
}

body.logging-in.login-bottom-visible .shelf,
body.logging-in .shelf {
  opacity:0 !important;
  transform:translate3d(0,120px,0) !important;
  filter:blur(14px) !important;
  pointer-events:none !important;
}

body.logging-in.login-bottom-visible .power-btn,
body.logging-in .power-btn {
  opacity:0 !important;
  transform:translate3d(0,70px,0) scale(.9) !important;
  filter:blur(8px) !important;
  pointer-events:none !important;
}

body.logging-in.login-bottom-visible .clock,
body.logging-in .clock {
  opacity:0 !important;
  transform:translate3d(0,70px,0) scale(.9) !important;
  filter:blur(8px) !important;
  pointer-events:none !important;
}

/* Keep the wallpaper and Three.js scene visible during the login animation. */
body.logging-in #stage {
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  transform:none !important;
}

/* Ensure only the 3D profile icon is visually dominant. */
body.logging-in .ui-layer {
  opacity:0 !important;
  pointer-events:none !important;
}

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

/* Welcome text must always sit cleanly above the cleared login interface. */
body.logging-in.show-welcome .welcome-text {
  opacity:1 !important;
  transform:scale(1) !important;
  filter:blur(0) !important;
  pointer-events:auto !important;
}

/* Keep the desktop login composition clear on smaller and shorter laptops. */
@media (max-width:1100px) {
  .layout-container {
    gap:clamp(42px,7vw,76px);
  }

  .block-canvas-spacer {
    width:300px;
    height:300px;
  }

  .login-fields {
    max-width:calc(100vw - 410px);
  }
}

@media (max-height:700px) {
  .layout-container {
    transform:translateY(-68px);
  }

  .block-canvas-spacer {
    width:280px;
    height:280px;
  }

  .shelf {
    height:132px;
  }

  .users-tray {
    bottom:14px;
  }

  .user .avatar {
    width:66px;
    height:66px;
  }

  .clock {
    bottom:16px;
  }
}

@media (max-width:900px) {
  .login-fields {
    max-width:330px;
  }

  .name {
    font-size:32px;
  }

}

/* Login alignment and control refinement */
.login-fields {
  width:322px;
  padding-left:17px;
  border-left:1px solid rgba(184,225,251,.18);
}
.login-fields .name,
.login-fields .email,
.login-fields .label {
  width:100%;
  text-align:left;
}
.login-fields .name {
  font-size:36px;
  line-height:1.05;
  letter-spacing:-.8px;
}
.login-fields .email {
  margin-top:6px;
  color:rgba(220,238,251,.67);
  line-height:1.35;
  opacity:1;
}
.login-fields .label {
  margin-top:24px;
  margin-bottom:9px;
  padding-left:1px;
  color:rgba(239,247,255,.82);
}
.password-row {
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 36px;
  gap:13px;
}
#passwordInput {
  width:100%;
}
#passwordInput.login-password-error {
  border-color:#ff7185;
  background:linear-gradient(to bottom,#fff6f7,#ffdce2 52%,#f4b6c1);
  box-shadow:inset 0 3px 6px rgba(104,0,20,.25),0 0 0 2px rgba(255,75,105,.16),0 0 18px rgba(255,62,96,.24);
}
.login-error {
  min-height:18px;
  margin-top:8px;
  padding-left:2px;
  color:#ffd3dc;
  font-size:11px;
  line-height:1.35;
  text-shadow:0 2px 8px rgba(45,0,15,.8);
}

.login-system-actions {
  position:absolute;
  z-index:20;
  left:54px;
  bottom:25px;
  display:flex;
  align-items:flex-start;
  gap:18px;
  transition:opacity .65s ease,transform .85s cubic-bezier(.19,1,.22,1),filter .65s ease;
}
.login-system-action,
.power-btn.login-system-action {
  position:relative;
  left:auto;
  bottom:auto;
  width:76px;
  display:grid;
  justify-items:center;
  text-align:center;
  color:#fff;
  font-size:13px;
  text-shadow:0 2px 5px rgba(0,0,0,.9);
  cursor:pointer;
  opacity:.86;
}
.login-system-action .user-label {
  width:100%;
  min-height:16px;
  margin-top:8px;
  line-height:1.2;
}
.info-icon {
  color:#fff;
  font:700 25px/1 Georgia,serif;
  background:radial-gradient(circle at 35% 35%,#fff 0%,#82e2ff 22%,#1e77d0 63%,#071f54 100%);
}
.login-system-action:hover {opacity:1}
.login-system-action:hover .power-icon {
  transform:scale(1.12);
  box-shadow:0 0 18px rgba(46,157,255,.9),0 5px 12px rgba(0,0,0,.4);
}
body.logging-in .login-system-actions {
  opacity:0 !important;
  transform:translate3d(0,70px,0) scale(.92) !important;
  filter:blur(8px) !important;
  pointer-events:none !important;
}
.users-tray {
  align-items:flex-start;
}
.users-tray > .user,
.users-tray > .add-user {
  width:104px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.users-tray .user-label {
  width:100%;
  min-height:32px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  line-height:1.2;
  text-align:center;
}
.add-user {display:flex;flex-direction:column;align-items:center}

/* Account panels use one consistent Aqua card and footer rhythm. */
.profile-panel {
  max-height:calc(100vh - 48px);
  overflow:auto;
  padding:26px;
  border-radius:22px;
  background:
    radial-gradient(circle at 12% 0%,rgba(117,220,255,.19),transparent 35%),
    linear-gradient(150deg,rgba(28,79,139,.94),rgba(3,17,52,.98));
}
.profile-panel h2 {
  font-size:25px;
  font-weight:600;
  letter-spacing:-.35px;
}
.profile-panel .sub {
  max-width:500px;
  margin:7px 0 20px;
  color:rgba(220,239,252,.67);
  line-height:1.5;
  opacity:1;
}
.profile-mode-switch {
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:0 0 21px;
  border-radius:12px;
}
.profile-mode-switch button {
  width:100%;
  border-radius:9px;
}
.creator-grid {
  padding:17px;
  border:1px solid rgba(181,225,251,.14);
  border-radius:17px;
  background:rgba(0,9,37,.2);
}
.creator-fields {gap:12px}
.creator-field label {
  margin-left:1px;
  color:rgba(226,241,252,.76);
}
.creator-field input {
  border-radius:11px;
}
.creator-actions {
  margin-top:18px;
  padding-top:17px;
  border-top:1px solid rgba(180,220,248,.14);
}
.overlay-btn {
  min-width:108px;
  border-radius:10px;
}
.form-error {
  text-align:left;
}
.delete-panel {width:min(660px,100%)}
.delete-profile-grid {
  grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
  gap:12px;
  padding:12px;
  border:1px solid rgba(181,225,251,.14);
  border-radius:17px;
  background:rgba(0,9,37,.2);
}
.delete-choice {
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-items:center;
  gap:11px;
  min-height:82px;
  padding:11px;
  border-radius:14px;
  text-align:left;
}
.delete-choice img {
  width:56px;
  height:56px;
  margin:0;
  border-radius:12px;
}
.delete-choice.selected img {
  filter:none;
  opacity:1;
}
.delete-password-step,
.delete-permanent-step {
  padding:15px;
  border:1px solid rgba(181,225,251,.14);
  border-radius:16px;
  background:rgba(0,9,37,.2);
}
.info-panel {width:min(540px,100%)}
.info-panel-brand {
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  align-items:center;
  gap:17px;
}
.info-panel-logo {
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  border:1px solid rgba(205,241,255,.38);
  border-radius:22px;
  background:rgba(78,190,225,.1);
}
.info-panel-logo img {width:68px;height:68px}
.info-panel-brand span {
  color:rgba(156,225,249,.65);
  font-size:9px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
}
.info-panel-brand h2 {margin-top:5px}
.info-panel > p {
  margin:20px 0 14px;
  color:rgba(222,240,252,.74);
  font-size:12px;
  line-height:1.65;
}
.info-panel-note {
  padding:12px 14px;
  border:1px solid rgba(155,216,246,.16);
  border-radius:12px;
  color:rgba(196,226,245,.66);
  background:rgba(2,17,53,.34);
  font-size:10.5px;
}

/* Keep the brand centered while the loading rail owns the lower edge. */
.boot-brand-layout {
  padding:0 7vw !important;
}
.boot-status {
  top:auto !important;
  bottom:60px !important;
}
.boot-dot-loader {
  top:auto !important;
  bottom:25px !important;
  width:min(980px,88vw) !important;
  height:14px !important;
  grid-template-columns:repeat(30,1fr) !important;
  gap:10px !important;
}
.boot-dot {
  height:6px;
}

@media(max-height:700px) {
  .login-system-actions {left:34px;bottom:14px}
  .boot-status {bottom:50px !important}
  .boot-dot-loader {bottom:18px !important}
}

/* About enters and leaves with the rest of the lower login shelf. */
body.login-reveal-ready .login-system-actions,
body.returning-from-desktop .login-system-actions {
  opacity:0 !important;
  filter:blur(7px);
  transform:translate3d(0,70px,0) scale(.95);
}
body.login-bottom-visible .login-system-actions,
body.returning-from-desktop.return-ready .login-system-actions {
  opacity:1 !important;
  filter:blur(0);
  transform:translate3d(0,0,0) scale(1);
  transition:transform .95s cubic-bezier(.16,1,.3,1),opacity .62s ease,filter .62s ease;
}
body.login-sequence-complete .login-system-actions {pointer-events:auto}
body.logging-in.login-bottom-visible .login-system-actions,
body.logging-in .login-system-actions {
  opacity:0 !important;
  transform:translate3d(0,70px,0) scale(.92) !important;
  filter:blur(8px) !important;
  pointer-events:none !important;
}
html.aqua-graphics-fallback #threeCanvas{
  background:
    radial-gradient(circle at 31% 38%,rgba(91,190,242,.48),transparent 28%),
    radial-gradient(circle at 70% 28%,rgba(29,105,199,.38),transparent 34%),
    linear-gradient(145deg,#061a43 0%,#0d4b89 48%,#031333 100%);
}

html.aqua-graphics-fallback .loading-glow{
  opacity:.35;
}