/* Huguang v55 — moonlight, restrained glass, spatial continuity. */
:root {
  --bg: #0d1528;
  --panel: #172238ed;
  --panel-solid: #172238;
  --line: #a9bfdf;
  --cyan: #a9c6e8;
  --cyan-soft: #d2dff2;
  --violet: #b9acd6;
  --text: #e5edf9;
  --text-dim: #bdcce1;
  --muted: #97a9c3;
  --glow: 0 0 0 1px #d0e1fa18;
  --glow-strong: 0 10px 30px #050b1e50;
  --shadow-win: 0 30px 90px #050b1e80, 0 0 0 1px #d8e5ff14;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
}
.win-panel {
  border-color: #bed2f72b;
  background: linear-gradient(145deg, #223049eb, #111d32f5);
  box-shadow: var(--shadow-win);
  border-radius: 16px;
  backdrop-filter: blur(24px);
}
.win-title {
  height: 43px;
  padding: 0 13px;
  background: linear-gradient(110deg, #283a56e8, #1b2b45ed);
  border-bottom: 1px solid #c4d5f51c;
  border-radius: 16px 16px 0 0;
  color: #e0e9f8;
  letter-spacing: 0.04em;
}
.app-window:not(.active-window) > .win-title {
  background: #1b293e;
  color: #a5b5ce;
}
.app-window.active-window {
  border-color: #c7d9f655;
  box-shadow:
    0 30px 90px #02081990,
    0 0 0 1px #c5daff12;
}
.app-window {
  animation: moon-window-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.win-title:after {
  display: none !important;
}
.title-controls {
  gap: 5px;
}
.title-controls .win-button {
  background: #ffffff05;
  border-color: #d4e2fc1a;
  box-shadow: none;
  border-radius: 7px;
  min-height: 26px;
}
.title-controls .win-button:hover {
  background: #b4c9ec20;
  box-shadow: none;
}
.title-controls [data-window-close]:hover {
  background: #a15b6970;
  border-color: #d59ba85c;
}
.win-button {
  border-color: #adc5ec2b;
  background: linear-gradient(180deg, #334864, #23354e);
  box-shadow:
    inset 0 1px 0 #e3ecff0c,
    0 3px 9px #0002;
  border-radius: 8px;
  transition:
    background 0.18s,
    border-color 0.18s,
    box-shadow 0.18s,
    scale 0.15s;
}
.win-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #3c5270, #2a405d);
  border-color: #b7cef16b;
  box-shadow: 0 4px 15px #0002;
}
.win-button:active:not(:disabled) {
  scale: 0.97;
  transform: none;
}
.win-button.primary {
  background: linear-gradient(180deg, #809ac3, #6b86af);
  border-color: #bbcceb8c;
  color: #0b1b32;
  text-shadow: none;
}
.win-button.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #a4b9d9, #859fc6);
}
.window-status {
  background: #142037;
  border-top-color: #bfd1ee12;
  color: #9bb0cf;
  font-size: 10px;
}
.window-body {
  scrollbar-width: thin;
  scrollbar-color: #b5c8e43b transparent;
}
.pixel-icon {
  box-shadow: none !important;
  filter: drop-shadow(0 4px 5px #02071940);
}
.taskbar {
  height: 53px;
  left: 14px;
  right: 14px;
  bottom: 10px;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid #c8daf529;
  border-radius: 15px;
  background: #16223bd9;
  box-shadow: 0 8px 40px #030a1b55;
  backdrop-filter: blur(28px);
}
.taskbar .win-button {
  box-shadow: none;
  background: #d3e3ff09;
  border-color: #cfddfa13;
}
.taskbar .win-button.is-active {
  background: #afc7eb23;
  border-color: #c2d7f549;
}
.taskbar-divider {
  height: 21px;
  border-color: #dce6ff14;
}
.start-button {
  border-radius: 10px;
  gap: 8px;
}
.start-button .pixel-icon {
  filter: none;
}
.tray {
  gap: 5px;
}
.clock-button {
  letter-spacing: 0.09em;
  color: #cbd8ed;
}
.tray-notice.unread:after {
  box-shadow: none;
  background: #e8c998;
}
.task-button {
  border-radius: 9px;
  font-size: 11px;
}
.start-menu {
  bottom: 72px;
  left: 15px;
  padding: 8px;
  border-radius: 16px;
  box-shadow: 0 15px 70px #02081780;
  transform-origin: bottom left;
  animation: moon-menu-in 0.2s ease-out;
}
.context-menu {
  padding: 7px;
  min-width: 205px;
  border-radius: 13px;
  box-shadow: 0 20px 60px #040b1f80;
  animation: moon-menu-in 0.16s ease-out;
}
.context-menu button {
  height: 34px;
  padding: 6px 12px;
  color: #d2def0;
  font-size: 12px;
  border-radius: 7px;
}
.context-menu button:hover,
.context-menu button:focus-visible {
  background: #bed2f01b;
  color: #f4f7ff;
}
.context-menu hr {
  border: 0;
  border-top: 1px solid #d0dffc15;
  margin: 5px;
}
.desktop-icon {
  border-radius: 12px;
  transition:
    background 0.18s,
    border-color 0.18s;
  box-shadow: none !important;
}
.desktop-icon:hover,
.desktop-icon:focus-visible,
.desktop-icon.selected {
  border-color: #d5e2fa40;
  background: #bfd3f01b;
  box-shadow: none;
}
.desktop-icon > span {
  font-size: 11px;
  text-shadow: 0 2px 5px #040b1d;
}
.desktop-icon .pixel-icon {
  transition: translate 0.2s;
}
.desktop-icon:hover .pixel-icon {
  translate: 0 -3px;
}
.toast {
  bottom: 85px !important;
  border-radius: 13px;
  border-color: #d7e6ff35;
  background: #20314bed;
  color: #dce7f8;
}
.desktop-icons {
  bottom: 76px;
}
.login-screen {
  background:
    radial-gradient(ellipse at 75% 25%, #34476365, transparent 55%),
    radial-gradient(ellipse at 25% 70%, #3a315b55, transparent 50%), #0c1425;
}
.login-panel {
  border-radius: 20px;
  box-shadow: 0 35px 110px #02071688;
}
.login-avatar {
  border: 1px solid #dbe6ff40;
  border-radius: 50%;
  background: #b6c2de;
  box-shadow: 0 8px 24px #0a132b55;
}
.login-avatar img {
  object-fit: cover;
  object-position: 50% 25%;
}
input:focus-visible,
button:focus-visible {
  outline: 2px solid #c0d3f1;
  outline-offset: 3px;
}
.wallpaper,
.wallpaper.theme-noir {
  background:
    radial-gradient(ellipse at 75% 30%, #34486375, transparent 55%),
    radial-gradient(ellipse at 20% 85%, #382d5660, transparent 55%),
    linear-gradient(145deg, #0d182d, #0b1222);
  transition: background-color 0.7s;
}
.wallpaper.theme-night {
  background:
    radial-gradient(ellipse at 75% 30%, #2a2c5565, transparent 55%),
    radial-gradient(ellipse at 15% 80%, #252d4550, transparent 50%), #080f1f;
}
.wallpaper:before,
.wallpaper:after {
  display: none;
}
.wallpaper-character {
  display: none !important;
}
.crystal-bg {
  display: none;
}
.sky-aurora {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 60% 28%, #a4bce116, transparent 35%),
    radial-gradient(ellipse at 30% 80%, #d6c0e510, transparent 30%);
  animation: moon-aurora 35s ease-in-out infinite alternate;
  will-change: transform;
}
.sky-constellation {
  position: absolute;
  inset: 0;
  opacity: 0.65;
  background-image:
    radial-gradient(circle at 12% 18%, #dce8fa88 0 1px, transparent 1.5px),
    radial-gradient(circle at 27% 42%, #dce8fa66 0 1px, transparent 1.5px),
    radial-gradient(circle at 44% 16%, #dce8fa88 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 73%, #dce8fa88 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 12%, #dce8fa77 0 1px, transparent 1.5px);
  background-size: 470px 390px;
}
.sky-orbit {
  position: absolute;
  left: 49%;
  top: 45%;
  width: min(63vw, 710px);
  aspect-ratio: 1;
  border: 1px solid #b6c7e212;
  border-radius: 50%;
  translate: -50% -50%;
  box-shadow:
    0 0 0 48px #b6c7e204,
    0 0 0 49px #b6c7e208,
    0 0 100px #6a88bb08;
}
.sky-orbit:after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid #bdcae010;
  border-radius: 50%;
  transform: rotateX(58deg) rotateZ(-30deg);
}
.wallpaper-copy {
  left: 46%;
  top: 43%;
  width: min(500px, 42vw);
  text-align: center;
  transform: translate(-50%, -50%);
  color: #d5e0f0;
  text-shadow: none;
}
.wallpaper-kicker {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #a6bad5;
}
.wallpaper-time {
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 200;
  line-height: 1.4;
  color: #dce6f5;
  letter-spacing: 0.03em;
  text-shadow: none;
  font-family: "Segoe UI", sans-serif;
}
.wallpaper-copy p {
  color: #8fa5c3;
  font-size: 12px;
  line-height: 2.1;
  letter-spacing: 0.16em;
}
.wallpaper-copy:before,
.wallpaper-copy:after {
  display: none;
}
huguang-mascot.desktop-mascot {
  right: clamp(20px, 9vw, 170px);
  top: auto;
  bottom: 90px;
  translate: none;
  filter: drop-shadow(0 18px 25px #030a1e55);
  transition: filter 0.3s;
}
huguang-mascot.desktop-mascot:focus-visible {
  outline: 1px dashed #b4c9eb66;
  outline-offset: 4px;
  border-radius: 18px;
}
huguang-mascot.desktop-mascot.is-unlocking {
  filter: drop-shadow(0 0 22px #bbd7ff50);
}
.boot-screen {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 32%, #283b5a80, transparent 57%), #0d1526;
  color: #e1e8f5;
}
.boot-sky {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  pointer-events: none;
  background-image: radial-gradient(circle, #dee8f977 0 1px, transparent 1.5px);
  background-size: 137px 113px;
  mask-image: radial-gradient(ellipse, #000, transparent 70%);
}
.boot-orbit {
  width: clamp(170px, 29vh, 280px);
  aspect-ratio: 1;
  animation: boot-orbit-appear 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.boot-orbit svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.orbit-guide {
  stroke: #c4d5f020;
  fill: none;
  stroke-width: 1;
}
.orbit-trace {
  stroke: #d5e3f3;
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 830;
  stroke-dashoffset: 830;
  transform-origin: center;
  transform: rotate(-90deg);
  animation: boot-trace 2.5s cubic-bezier(0.3, 0.1, 0.2, 1) both;
}
.orbit-ellipse {
  fill: none;
  stroke: #b5c6e244;
  stroke-width: 0.8;
}
.boot-crescent {
  filter: drop-shadow(0 0 20px #bad2ff25);
}
.boot-star {
  transform-origin: 225px 112px;
  animation: boot-star-in 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.boot-wordmark {
  margin-top: 12px;
  animation: boot-word-in 1s 0.2s both;
}
.boot-eyebrow {
  font-size: 8px;
  letter-spacing: 0.32em;
  color: #91a8c9;
}
.boot-wordmark h1 {
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 0.25em;
  margin: 14px 0 12px;
}
.boot-wordmark h1 span {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #a8bfdf;
}
.boot-screen .boot-wordmark p {
  font-size: 12px;
  letter-spacing: 0.3em;
  color: #9eafc7;
}
.boot-chapters {
  display: flex;
  gap: 30px;
  margin-top: 37px;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #627895;
}
.boot-chapters span {
  animation: boot-chapter 0.8s both;
}
.boot-chapters span:nth-child(1) {
  animation-delay: 0.25s;
}
.boot-chapters span:nth-child(2) {
  animation-delay: 1s;
}
.boot-chapters span:nth-child(3) {
  animation-delay: 1.8s;
}
.boot-skip {
  margin-top: 25px;
  background: none;
  border: 0;
  color: #a3b7d4;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 10px 16px;
  border-radius: 20px;
  animation: boot-word-in 0.6s 1.3s both;
}
.boot-skip:hover {
  color: #eef4ff;
  background: #d1e3ff09;
}
.boot-screen small {
  bottom: 30px;
  color: #637995;
  font-size: 8px;
  letter-spacing: 0.22em;
}
.boot-failure {
  z-index: 3;
  background: #1e2a40f5;
}
.boot-progress,
.boot-grain,
.boot-logo {
  display: none !important;
}
@keyframes moon-window-in {
  from {
    opacity: 0;
    scale: 0.975;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}
@keyframes moon-menu-in {
  from {
    opacity: 0;
    scale: 0.98;
    translate: 0 5px;
  }
  to {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}
@keyframes moon-aurora {
  to {
    transform: translate3d(3%, 2%, 0) rotate(5deg);
  }
}
@keyframes boot-orbit-appear {
  from {
    opacity: 0;
    scale: 0.88;
    translate: 0 15px;
  }
  to {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}
@keyframes boot-trace {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes boot-star-in {
  from {
    opacity: 0;
    scale: 0.1;
    rotate: -70deg;
  }
  to {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}
@keyframes boot-word-in {
  from {
    opacity: 0;
    translate: 0 10px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes boot-chapter {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
    color: #c9d8ef;
  }
}
/* screen-flow.js owns the entrance; a second CSS fade would multiply opacity. */
#desktop:not([hidden]) { animation: none; }
@media (max-width: 700px) {
  .taskbar {
    left: 7px;
    right: 7px;
    bottom: 7px;
    height: 48px;
    padding: 5px 7px;
    border-radius: 12px;
  }
  .start-menu {
    bottom: 65px;
    left: 8px;
  }
  .wallpaper-copy {
    left: 52%;
    top: 32%;
    width: 55vw;
  }
  .wallpaper-time {
    font-size: 60px;
  }
  .wallpaper-copy p {
    font-size: 10px;
  }
  .wallpaper-kicker {
    font-size: 8px;
  }
  huguang-mascot.desktop-mascot {
    --mascot-size: 220px !important;
    right: 15px;
    bottom: 80px;
  }
  .boot-chapters {
    gap: 16px;
  }
  .app-window .win-title {
    height: 40px;
  }
  .desktop-icons {
    bottom: 65px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-window,
  .start-menu,
  .context-menu,
  .sky-aurora,
  .boot-screen *,
  #desktop:not([hidden]) {
    animation: none !important;
    transition: none !important;
  }
  .orbit-trace {
    stroke-dashoffset: 0;
  }
  .desktop-icon .pixel-icon {
    transition: none;
  }
  .desktop-icon:hover .pixel-icon {
    translate: none;
  }
}

huguang-mascot.desktop-mascot {
  max-width: calc((100dvh - 140px) * 0.6667);
}
.context-divider {
  border-color: #d0dffc15;
  background: #d0dffc15;
}

.app-window::after,
.win-title::before {
  display: none !important;
}
.app-window.active-window > .win-title {
  background: linear-gradient(110deg, #2c3d58, #1e2e48);
}
.app-window .window-status::before {
  background: #a8bdd6;
  box-shadow: none;
}