:root {
  --yx-ink: #10182f;
  --yx-soft: rgba(16, 24, 47, .68);
  --yx-paper: #f4eddd;
  --yx-ice: #091022;
  --yx-ice-2: #15213a;
  --yx-wine: #ef70b8;
  --yx-wine-dark: #a23e78;
  --yx-lilac: #b992b6;
  --yx-green: #58bdb5;
  --yx-line: rgba(244, 237, 221, .28);
  --zt-acid: #d4f060;
  --zt-cyan: #64e4df;
  --zt-pink: #ef70b8;
  --zt-night: #091022;
  --zt-cream: #f4eddd;
}

html,
body {
  background: var(--zt-night) !important;
}

body {
  color: var(--zt-cream) !important;
  font-family: Menlo, Monaco, "PingFang SC", "Microsoft YaHei", monospace !important;
}

#yxMvBg,
#yxMvBgBuffer {
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(.92) contrast(1.05) brightness(.62);
  transform: scale(1.015);
}

body[data-yx-mv="suki"] #yxMvBg,
body[data-yx-mv="suki"] #yxMvBgBuffer {
  top: -11.6vh !important;
  height: 125vh !important;
  transform: none;
}

#yxCurtain {
  background:
    linear-gradient(90deg, rgba(5, 8, 22, .84), rgba(5, 8, 22, .38) 48%, rgba(5, 8, 22, .18) 72%, rgba(5, 8, 22, .55)),
    linear-gradient(180deg, rgba(5, 8, 22, .3), transparent 34%, rgba(5, 8, 22, .72)) !important;
}

#yxCurtain::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .17;
  background-image:
    repeating-conic-gradient(rgba(239, 112, 184, .18) 0 25%, transparent 0 50%),
    repeating-conic-gradient(rgba(100, 228, 223, .12) 0 25%, transparent 0 50%);
  background-position: 0 0, 3px 3px;
  background-size: 6px 6px;
  mix-blend-mode: color-dodge;
}

#ztmyCreamCharacter {
  display: block !important;
  position: fixed;
  z-index: 2;
  right: clamp(-80px, -2vw, -16px);
  bottom: -5vh;
  width: auto;
  height: min(82vh, 900px);
  max-width: 48vw;
  object-fit: contain;
  object-position: right bottom;
  image-rendering: pixelated;
  filter:
    drop-shadow(10px 0 0 rgba(239, 112, 184, .2))
    drop-shadow(-8px 0 0 rgba(100, 228, 223, .16))
    drop-shadow(18px 22px 0 rgba(5, 8, 19, .48));
  pointer-events: none;
  user-select: none;
}

.login-wrap,
#homePage,
#app {
  z-index: 3 !important;
}

.login-shell,
.home-wrap,
#app > * {
  z-index: 4;
}

/* Compact MV selector + sound controller */
#yxMvSoundCtrl {
  height: 36px;
  gap: 6px;
  padding: 3px 7px 3px 4px;
  border: 1px solid rgba(244, 237, 221, .38);
  background: rgba(9, 16, 34, .86);
  color: var(--zt-cream);
  box-shadow: 5px 5px 0 rgba(5, 8, 19, .45);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.yx-mv-picks {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-right: 6px;
  border-right: 1px solid rgba(244, 237, 221, .24);
}

.yx-mv-pick {
  min-width: 38px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid rgba(244, 237, 221, .32);
  border-radius: 0;
  background: transparent;
  color: rgba(244, 237, 221, .72);
  cursor: pointer;
  font-size: .62rem;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: .04em;
}

.yx-mv-pick:hover {
  border-color: var(--zt-cyan);
  color: var(--zt-cyan);
}

.yx-mv-pick.is-active {
  border-color: var(--zt-acid);
  background: var(--zt-acid);
  color: var(--zt-night);
  box-shadow: 2px 2px 0 var(--zt-pink);
}

#yxMvSoundBtn {
  border-color: rgba(244, 237, 221, .32);
  background: rgba(100, 228, 223, .14);
  color: var(--zt-cream);
}

#yxMvSoundCtrl.is-on #yxMvSoundBtn {
  border-color: var(--zt-pink);
  background: var(--zt-pink);
  color: var(--zt-night);
}

#yxMvVolume { accent-color: var(--zt-pink); }
#yxMvVolumeText { color: rgba(244, 237, 221, .62); }

/* Remove duplicate top navigation; the same routes remain on the home cards and app tabs. */
.yx-home-topbar,
#app .topbar {
  grid-template-columns: minmax(190px, 1fr) auto !important;
  min-height: 68px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(244, 237, 221, .28) !important;
  background: rgba(9, 16, 34, .78) !important;
  color: var(--zt-cream) !important;
  box-shadow: 7px 7px 0 rgba(5, 8, 19, .38) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.yx-home-topbar .yx-nav,
#app .topbar .yx-nav {
  display: none !important;
}

.yx-home-brand,
#app .topbar .brand {
  color: var(--zt-cream) !important;
  font-family: Menlo, Monaco, "PingFang SC", monospace !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}

.yx-home-brand small { color: var(--zt-cyan); opacity: .74; }
.yx-home-actions,
#app .topbar .right,
#app .topbar .right span { color: rgba(244, 237, 221, .78) !important; }

.yx-lang-btn,
.yx-home-actions .btn-sm,
#app .topbar .yx-app-actions > .btn-sm,
#app .topbar .yx-app-user {
  border-color: rgba(244, 237, 221, .3) !important;
  background: rgba(9, 16, 34, .72) !important;
  color: var(--zt-cream) !important;
}

#app .topbar .yx-app-user #who { color: var(--zt-cream) !important; }
#app .topbar .yx-app-user .badge { background: var(--zt-pink) !important; color: var(--zt-night) !important; }

/* Login and registration */
.lg-card,
.login-card {
  border: 2px solid var(--zt-night) !important;
  background-color: rgba(244, 237, 221, .94) !important;
  background-image:
    linear-gradient(90deg, rgba(16, 24, 47, .045) 50%, transparent 50%),
    linear-gradient(rgba(16, 24, 47, .045) 50%, transparent 50%) !important;
  background-size: 4px 4px !important;
  color: var(--zt-night) !important;
  box-shadow: 10px 10px 0 rgba(5, 8, 19, .72) !important;
}

.lg-logo { filter: none !important; image-rendering: pixelated; }
.lg-name,
.form-title,
#regCard h1 { color: var(--zt-night) !important; }
.lg-desc,
.form-sub,
.remember-row { color: rgba(16, 24, 47, .68) !important; }

#loginCard .field label,
#regCard .field label { color: rgba(16, 24, 47, .72) !important; }

#loginCard .field input,
#regCard .field input {
  border: 2px solid var(--zt-night) !important;
  background: rgba(255, 253, 246, .9) !important;
  color: var(--zt-night) !important;
  box-shadow: none !important;
}

#loginCard .field input:focus,
#regCard .field input:focus {
  border-color: var(--zt-night) !important;
  background: #fffdf6 !important;
  box-shadow: 5px 5px 0 var(--zt-cyan) !important;
}

#loginCard .btn,
#regCard .btn,
.btn-primary {
  border: 2px solid var(--zt-night) !important;
  background: var(--zt-acid) !important;
  color: var(--zt-night) !important;
  text-shadow: none !important;
  box-shadow: 4px 4px 0 var(--zt-night) !important;
}

#loginCard .btn.secondary,
#regCard .btn.secondary {
  border: 2px solid var(--zt-night) !important;
  background: var(--zt-cyan) !important;
  color: var(--zt-night) !important;
}

/* Home */
.home-wrap { margin-top: 16px !important; }

.home-block,
.home-player {
  border: 2px solid var(--zt-night) !important;
  background-color: rgba(244, 237, 221, .9) !important;
  background-image: radial-gradient(rgba(16, 24, 47, .11) .8px, transparent .8px) !important;
  background-size: 4px 4px !important;
  color: var(--zt-night) !important;
  box-shadow: 8px 8px 0 rgba(5, 8, 19, .68) !important;
}

.home-block-welcome {
  background-color: rgba(100, 228, 223, .88) !important;
}

.home-logo {
  border: 2px solid var(--zt-night) !important;
  background: var(--zt-acid) !important;
  box-shadow: 4px 4px 0 var(--zt-pink) !important;
}

.home-title {
  color: var(--zt-night) !important;
  font-family: Menlo, Monaco, "PingFang SC", monospace !important;
  font-size: clamp(2.25rem, 3.6vw, 4rem) !important;
  font-weight: 950 !important;
  letter-spacing: -.045em !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

.home-cta { display: none !important; }

.home-block-quick .home-block-title,
.hp-title {
  color: var(--zt-night) !important;
  font-family: Menlo, Monaco, "PingFang SC", monospace !important;
  font-weight: 900 !important;
}

.home-mod-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

.home-mod {
  min-height: 74px !important;
  border: 2px solid var(--zt-night) !important;
  background: var(--zt-cream) !important;
  color: var(--zt-night) !important;
  box-shadow: 4px 4px 0 rgba(5, 8, 19, .7) !important;
}

.home-mod:nth-child(1) { background: var(--zt-acid) !important; }
.home-mod:nth-child(2) { background: var(--zt-cream) !important; }
.home-mod:nth-child(3) { background: var(--zt-cyan) !important; }
.home-mod:nth-child(4) { background: var(--zt-pink) !important; }
.home-mod:hover { transform: translate(-2px, -2px) !important; box-shadow: 7px 7px 0 rgba(5, 8, 19, .72) !important; }

.home-player { background-color: rgba(244, 237, 221, .78) !important; }
.hp-stage { border: 2px solid var(--zt-night) !important; background: rgba(100, 228, 223, .36) !important; }

/* Parse, upload and collection panels */
.card,
#pageParse,
#pageUpload,
.left-col .card {
  border: 2px solid var(--zt-night) !important;
  background-color: rgba(244, 237, 221, .9) !important;
  background-image: radial-gradient(rgba(16, 24, 47, .09) .7px, transparent .7px) !important;
  background-size: 4px 4px !important;
  color: var(--zt-night) !important;
  box-shadow: 7px 7px 0 rgba(5, 8, 19, .62) !important;
}

.card h2,
#pageParse h2,
#pageUpload h2 {
  color: var(--zt-night) !important;
  font-family: Menlo, Monaco, "PingFang SC", monospace !important;
  font-weight: 900 !important;
}

.tabs {
  border: 2px solid var(--zt-night) !important;
  background: var(--zt-cream) !important;
  box-shadow: 5px 5px 0 rgba(5, 8, 19, .62) !important;
}

.tab { color: var(--zt-night) !important; font-weight: 800 !important; }
.tab.active { background: var(--zt-pink) !important; color: var(--zt-night) !important; }

#url,
#pageUpload input,
#app input,
#app select,
#app textarea {
  border: 2px solid var(--zt-night) !important;
  background: rgba(255, 253, 246, .92) !important;
  color: var(--zt-night) !important;
}

#url:focus,
#app input:focus,
#app select:focus,
#app textarea:focus { box-shadow: 4px 4px 0 var(--zt-cyan) !important; }

.yx-direct-toggle {
  border: 2px solid var(--zt-night) !important;
  background: var(--zt-cream) !important;
  color: var(--zt-night) !important;
}

.yx-direct-toggle:hover { background: var(--zt-pink) !important; color: var(--zt-night) !important; }
.yx-direct-toggle #directParseToggle { accent-color: var(--zt-pink) !important; }

#oauthPanel {
  border: 2px solid var(--zt-night) !important;
  background-color: var(--zt-cream) !important;
  background-image: radial-gradient(rgba(16, 24, 47, .1) .8px, transparent .8px) !important;
  background-size: 4px 4px !important;
  box-shadow: 10px 10px 0 var(--zt-pink) !important;
}

#oauthLeft,
#oauthRight { border: 2px solid var(--zt-night) !important; background: rgba(100, 228, 223, .28) !important; }

@media (max-width: 980px) {
  #ztmyCreamCharacter { right: -150px; height: 72vh; opacity: .45; }
}

@media (max-width: 760px) {
  #ztmyCreamCharacter { display: none !important; }
  .yx-home-topbar,
  #app .topbar { grid-template-columns: 1fr auto !important; padding: 0 10px !important; }
  #yxMvSoundCtrl { height: 34px; left: 8px; bottom: max(8px, env(safe-area-inset-bottom)); }
  .yx-mv-pick { min-width: 34px; padding: 0 5px; }
}

@media (max-width: 480px) {
  #yxMvSoundCtrl,
  #yxMvSoundCtrl:hover,
  #yxMvSoundCtrl:focus-within {
    width: auto;
    overflow: visible;
    padding-right: 4px;
  }
  #yxMvSoundCtrl #yxMvVolume,
  #yxMvSoundCtrl #yxMvVolumeText { display: none; }
  .yx-mv-picks { padding-right: 4px; }
  .yx-mv-pick { min-width: 32px; font-size: .58rem; }
  .home-title { font-size: 2.35rem !important; line-height: 1.16 !important; }
}