:root {
  --yx-ink: #171821;
  --yx-soft: rgba(23, 24, 33, .67);
  --yx-paper: #eeeae2;
  --yx-ice: #12151d;
  --yx-ice-2: #25293a;
  --yx-wine: #a52f3c;
  --yx-wine-dark: #721f2a;
  --yx-lilac: #6c6387;
  --yx-green: #78ced0;
  --yx-line: rgba(23, 24, 33, .28);
  --sp-night: #11131d;
  --sp-ink: #181923;
  --sp-paper: #eeeae2;
  --sp-mist: #cfd3d2;
  --sp-violet: #4d4668;
  --sp-cyan: #78ced0;
  --sp-red: #a52f3c;
  --sp-amber: #c79d4a;
}

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

body {
  color: var(--sp-paper) !important;
  font-family: "Hiragino Kaku Gothic ProN", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

#yxMvBg,
#yxMvBgBuffer {
  inset: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(.98) contrast(1.02) brightness(.82);
  transform: scale(1.01);
}

#yxCurtain {
  background:
    linear-gradient(90deg, rgba(14, 16, 25, .56), rgba(14, 16, 25, .24) 47%, rgba(14, 16, 25, .08) 72%, rgba(14, 16, 25, .3)),
    linear-gradient(180deg, rgba(14, 16, 25, .18), transparent 38%, rgba(14, 16, 25, .44)) !important;
}

#yxCurtain::before,
#yxCurtain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#yxCurtain::before {
  opacity: .08;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(120, 206, 208, .25) 80px 81px),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(238, 234, 226, .14) 80px 81px);
  mix-blend-mode: screen;
}

#yxCurtain::after {
  opacity: .12;
  background:
    radial-gradient(circle at 82% 18%, rgba(165, 47, 60, .7), transparent 2.5%),
    radial-gradient(circle at 88% 25%, rgba(165, 47, 60, .5), transparent 2%),
    linear-gradient(112deg, transparent 67%, rgba(120, 206, 208, .18) 67.2%, transparent 67.7%);
}

#ztmyCreamCharacter,
.yx-character {
  display: none !important;
}

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

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

/* Compact four-MV selector and sound controller */
#yxMvSoundCtrl {
  height: 36px;
  gap: 6px;
  padding: 3px 7px 3px 4px;
  border: 1px solid rgba(238, 234, 226, .42);
  border-radius: 2px;
  background: rgba(17, 19, 29, .9);
  color: var(--sp-paper);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .48), 6px 6px 0 rgba(120, 206, 208, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

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

.yx-mv-pick {
  min-width: 38px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid rgba(238, 234, 226, .3);
  border-radius: 1px;
  background: transparent;
  color: rgba(238, 234, 226, .68);
  cursor: pointer;
  font-family: Georgia, "Times New Roman", "Songti SC", serif !important;
  font-size: .58rem;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: .06em;
}

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

.yx-mv-pick.is-active {
  border-color: var(--sp-paper);
  background: var(--sp-red);
  color: #fff;
  box-shadow: 2px 2px 0 var(--sp-cyan);
}

#yxMvSoundBtn {
  border-color: rgba(238, 234, 226, .34);
  background: rgba(77, 70, 104, .56);
  color: var(--sp-paper);
}

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

#yxMvVolume { accent-color: var(--sp-red); }
#yxMvVolumeText { color: rgba(238, 234, 226, .62); }

/* Duplicate routes remain hidden in the top bar. */
.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(238, 234, 226, .34) !important;
  border-radius: 2px !important;
  background:
    linear-gradient(90deg, rgba(17, 19, 29, .93), rgba(35, 37, 50, .82)) !important;
  color: var(--sp-paper) !important;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .42), 9px 9px 0 rgba(165, 47, 60, .26) !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(--sp-paper) !important;
  font-family: Georgia, "Times New Roman", "Songti SC", serif !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-shadow: 2px 2px 0 rgba(165, 47, 60, .6) !important;
}

.yx-home-brand small { color: var(--sp-cyan); opacity: .72; }
.yx-home-actions,
#app .topbar .right,
#app .topbar .right span { color: rgba(238, 234, 226, .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(238, 234, 226, .36) !important;
  background: rgba(17, 19, 29, .76) !important;
  color: var(--sp-paper) !important;
  box-shadow: 2px 2px 0 rgba(120, 206, 208, .25) !important;
}

#app .topbar .yx-app-user #who { color: var(--sp-paper) !important; }
#app .topbar .yx-app-user .badge { background: var(--sp-red) !important; color: #fff !important; }

/* Login and registration */
.lg-card,
.login-card {
  border: 1px solid var(--sp-ink) !important;
  border-radius: 3px !important;
  background-color: rgba(238, 234, 226, .93) !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(24, 25, 35, .035) 0 1px, transparent 1px 5px) !important;
  color: var(--sp-ink) !important;
  box-shadow: 11px 11px 0 rgba(17, 19, 29, .74), 13px 13px 0 rgba(120, 206, 208, .34) !important;
}

.lg-name,
.form-title,
#regCard h1 {
  color: var(--sp-ink) !important;
  font-family: Georgia, "Times New Roman", "Songti SC", serif !important;
}

.lg-desc,
.form-sub,
.remember-row { color: rgba(24, 25, 35, .68) !important; }

#loginCard .field label,
#regCard .field label { color: rgba(24, 25, 35, .76) !important; }

#loginCard .field input,
#regCard .field input {
  border: 1px solid var(--sp-ink) !important;
  border-radius: 2px !important;
  background: rgba(255, 253, 247, .94) !important;
  color: var(--sp-ink) !important;
  box-shadow: none !important;
}

#loginCard .field input:focus,
#regCard .field input:focus {
  border-color: var(--sp-red) !important;
  box-shadow: 4px 4px 0 rgba(120, 206, 208, .48) !important;
}

#loginCard .btn,
#regCard .btn,
.btn-primary {
  border: 1px solid var(--sp-ink) !important;
  border-radius: 2px !important;
  background: var(--sp-red) !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: 4px 4px 0 var(--sp-ink) !important;
}

#loginCard .btn.secondary,
#regCard .btn.secondary {
  background: var(--sp-cyan) !important;
  color: var(--sp-ink) !important;
}

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

.home-block,
.home-player {
  border: 1px solid var(--sp-ink) !important;
  border-radius: 3px !important;
  background-color: rgba(238, 234, 226, .9) !important;
  background-image: repeating-linear-gradient(0deg, rgba(24, 25, 35, .035) 0 1px, transparent 1px 6px) !important;
  color: var(--sp-ink) !important;
  box-shadow: 9px 9px 0 rgba(17, 19, 29, .72), 11px 11px 0 rgba(165, 47, 60, .38) !important;
}

.home-block-welcome {
  background:
    linear-gradient(115deg, rgba(238, 234, 226, .95), rgba(207, 211, 210, .84)),
    repeating-linear-gradient(90deg, transparent 0 68px, rgba(77, 70, 104, .09) 69px 70px) !important;
}

.home-logo {
  border: 1px solid var(--sp-ink) !important;
  border-radius: 50% !important;
  background: var(--sp-paper) !important;
  box-shadow: 4px 4px 0 var(--sp-cyan) !important;
  filter: grayscale(.3);
}

.home-title {
  color: var(--sp-ink) !important;
  font-family: Georgia, "Times New Roman", "Songti SC", serif !important;
  font-size: clamp(2.2rem, 3.6vw, 3.9rem) !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  line-height: 1.12 !important;
  text-shadow: 3px 3px 0 rgba(120, 206, 208, .46) !important;
  text-wrap: balance;
}

.home-cta { display: none !important; }
.home-block-quick .home-block-title,
.hp-title { color: var(--sp-ink) !important; font-family: Georgia, "Times New Roman", "Songti SC", serif !important; font-weight: 900 !important; }
.home-mod-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

.home-mod {
  min-height: 74px !important;
  border: 1px solid var(--sp-ink) !important;
  border-radius: 2px !important;
  color: var(--sp-ink) !important;
  box-shadow: 4px 4px 0 rgba(17, 19, 29, .7) !important;
}

.home-mod:nth-child(1) { background: var(--sp-violet) !important; color: #fff !important; }
.home-mod:nth-child(2) { background: var(--sp-mist) !important; }
.home-mod:nth-child(3) { background: var(--sp-cyan) !important; }
.home-mod:nth-child(4) { background: #c76b70 !important; }
.home-mod:hover { transform: translate(-2px, -2px) !important; box-shadow: 7px 7px 0 rgba(17, 19, 29, .76) !important; }

.home-player { background-color: rgba(238, 234, 226, .78) !important; }
.hp-stage { border: 1px solid var(--sp-ink) !important; background: rgba(77, 70, 104, .2) !important; }

/* Parse, upload and collection panels */
.card,
#pageParse,
#pageUpload,
.left-col .card {
  border: 1px solid var(--sp-ink) !important;
  border-radius: 3px !important;
  background-color: rgba(238, 234, 226, .91) !important;
  background-image: repeating-linear-gradient(0deg, rgba(24, 25, 35, .03) 0 1px, transparent 1px 6px) !important;
  color: var(--sp-ink) !important;
  box-shadow: 8px 8px 0 rgba(17, 19, 29, .68), 10px 10px 0 rgba(120, 206, 208, .22) !important;
}

.card h2,
#pageParse h2,
#pageUpload h2 {
  color: var(--sp-ink) !important;
  font-family: Georgia, "Times New Roman", "Songti SC", serif !important;
  font-weight: 900 !important;
}

.tabs {
  border: 1px solid var(--sp-ink) !important;
  border-radius: 2px !important;
  background: var(--sp-paper) !important;
  box-shadow: 5px 5px 0 rgba(77, 70, 104, .54) !important;
}

.tab { color: var(--sp-ink) !important; font-weight: 800 !important; }
.tab.active { background: var(--sp-red) !important; color: #fff !important; }

#url,
#pageUpload input,
#app input,
#app select,
#app textarea {
  border: 1px solid var(--sp-ink) !important;
  border-radius: 2px !important;
  background: rgba(255, 253, 247, .94) !important;
  color: var(--sp-ink) !important;
}

#url:focus,
#app input:focus,
#app select:focus,
#app textarea:focus { box-shadow: 4px 4px 0 rgba(120, 206, 208, .58) !important; }

.yx-direct-toggle {
  border: 1px solid var(--sp-ink) !important;
  background: var(--sp-paper) !important;
  color: var(--sp-ink) !important;
}

.yx-direct-toggle:hover { background: var(--sp-cyan) !important; color: var(--sp-ink) !important; }
.yx-direct-toggle #directParseToggle { accent-color: var(--sp-red) !important; }

#oauthPanel {
  border: 1px solid var(--sp-ink) !important;
  border-radius: 3px !important;
  background-color: var(--sp-paper) !important;
  background-image: repeating-linear-gradient(0deg, rgba(24, 25, 35, .035) 0 1px, transparent 1px 6px) !important;
  box-shadow: 10px 10px 0 var(--sp-violet) !important;
}

#oauthLeft,
#oauthRight {
  border: 1px solid var(--sp-ink) !important;
  background: rgba(120, 206, 208, .2) !important;
}

@media (max-width: 760px) {
  .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: 31px; padding: 0 4px; }
  #yxMvBg,
  #yxMvBgBuffer { object-position: 54% center !important; }
}

@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: 28px; padding: 0 3px; font-size: .49rem; }
  .home-title { font-size: 2.25rem !important; line-height: 1.16 !important; }
}