:root {
  --yx-ink: #3b2345;
  --yx-soft: rgba(59, 35, 69, .68);
  --yx-paper: #fff5e9;
  --yx-ice: #f5a5d5;
  --yx-ice-2: #bfe7f5;
  --yx-wine: #a747b5;
  --yx-wine-dark: #77368a;
  --yx-lilac: #f5a5d5;
  --yx-green: #59b66f;
  --yx-line: rgba(59, 35, 69, .24);
  --rr-green: #59b66f;
  --rr-pink: #f5a5d5;
  --rr-magenta: #a747b5;
  --rr-cyan: #bfe7f5;
  --rr-yellow: #efc882;
  --rr-paper: #fff5e9;
  --rr-ink: #3b2345;
}

html,
body {
  background: #cdebf4 !important;
}

body {
  color: var(--rr-ink) !important;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", "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(1.08) contrast(.98) brightness(.76);
  transform: scale(1.01);
}

#yxCurtain {
  background:
    linear-gradient(90deg, rgba(255, 245, 233, .82), rgba(255, 245, 233, .48) 43%, rgba(245, 165, 213, .18) 70%, rgba(59, 35, 69, .38)),
    linear-gradient(180deg, rgba(191, 231, 245, .22), transparent 42%, rgba(59, 35, 69, .3)) !important;
}

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

#yxCurtain::before {
  opacity: .17;
  background-image:
    radial-gradient(circle, var(--rr-magenta) 1.15px, transparent 1.3px),
    radial-gradient(circle, var(--rr-green) 1px, transparent 1.15px);
  background-position: 0 0, 7px 7px;
  background-size: 14px 14px;
  mix-blend-mode: multiply;
}

#yxCurtain::after {
  opacity: .12;
  background-image:
    linear-gradient(45deg, var(--rr-cyan) 25%, transparent 25%, transparent 75%, var(--rr-cyan) 75%),
    linear-gradient(45deg, var(--rr-cyan) 25%, transparent 25%, transparent 75%, var(--rr-cyan) 75%);
  background-position: 0 0, 9px 9px;
  background-size: 18px 18px;
}

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

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

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

/* MV selector and sound controller */
#yxMvSoundCtrl {
  height: 36px;
  gap: 6px;
  padding: 3px 7px 3px 4px;
  border: 2px solid var(--rr-ink);
  border-radius: 9px;
  background: rgba(255, 245, 233, .9);
  color: var(--rr-ink);
  box-shadow: 4px 4px 0 rgba(167, 71, 181, .72);
  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 dashed rgba(59, 35, 69, .42);
}

.yx-mv-pick {
  min-width: 38px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--rr-ink);
  border-radius: 5px;
  background: var(--rr-paper);
  color: var(--rr-ink);
  cursor: pointer;
  font-size: .6rem;
  font-weight: 900;
  line-height: 24px;
  letter-spacing: .03em;
}

.yx-mv-pick:hover {
  border-color: var(--rr-magenta);
  color: var(--rr-magenta);
}

.yx-mv-pick.is-active {
  border-color: var(--rr-ink);
  background: var(--rr-green);
  color: #fffdf5;
  box-shadow: 2px 2px 0 var(--rr-magenta);
}

#yxMvSoundBtn {
  border-color: var(--rr-ink);
  background: var(--rr-cyan);
  color: var(--rr-ink);
}

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

#yxMvVolume { accent-color: var(--rr-magenta); }
#yxMvVolumeText { color: rgba(59, 35, 69, .68); }

/* Keep duplicate route navigation hidden; home cards and app tabs retain every route. */
.yx-home-topbar,
#app .topbar {
  grid-template-columns: minmax(190px, 1fr) auto !important;
  min-height: 68px !important;
  padding: 0 16px !important;
  border: 2px solid var(--rr-ink) !important;
  border-radius: 11px !important;
  background-color: rgba(255, 245, 233, .88) !important;
  background-image: radial-gradient(rgba(167, 71, 181, .16) 1px, transparent 1.2px) !important;
  background-size: 8px 8px !important;
  color: var(--rr-ink) !important;
  box-shadow: 7px 7px 0 rgba(167, 71, 181, .55) !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(--rr-ink) !important;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", "PingFang SC", sans-serif !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-shadow: 2px 2px 0 rgba(245, 165, 213, .74) !important;
}

.yx-home-brand small { color: var(--rr-magenta); opacity: .78; }
.yx-home-actions,
#app .topbar .right,
#app .topbar .right span { color: rgba(59, 35, 69, .78) !important; }

.yx-lang-btn,
.yx-home-actions .btn-sm,
#app .topbar .yx-app-actions > .btn-sm,
#app .topbar .yx-app-user {
  border-color: var(--rr-ink) !important;
  background: rgba(255, 245, 233, .92) !important;
  color: var(--rr-ink) !important;
  box-shadow: 2px 2px 0 rgba(89, 182, 111, .52) !important;
}

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

/* Login and registration */
.lg-card,
.login-card {
  border: 2px solid var(--rr-ink) !important;
  border-radius: 12px !important;
  background-color: rgba(255, 245, 233, .94) !important;
  background-image:
    linear-gradient(90deg, rgba(191, 231, 245, .22) 50%, transparent 50%),
    linear-gradient(rgba(191, 231, 245, .22) 50%, transparent 50%) !important;
  background-size: 14px 14px !important;
  color: var(--rr-ink) !important;
  box-shadow: 10px 10px 0 rgba(167, 71, 181, .56) !important;
}

.lg-name,
.form-title,
#regCard h1 { color: var(--rr-ink) !important; }
.lg-desc,
.form-sub,
.remember-row { color: rgba(59, 35, 69, .68) !important; }

#loginCard .field label,
#regCard .field label { color: rgba(59, 35, 69, .78) !important; }

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

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

#loginCard .btn,
#regCard .btn,
.btn-primary {
  border: 2px solid var(--rr-ink) !important;
  background: var(--rr-green) !important;
  color: #fffdf5 !important;
  text-shadow: none !important;
  box-shadow: 4px 4px 0 var(--rr-magenta) !important;
}

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

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

.home-block,
.home-player {
  border: 2px solid var(--rr-ink) !important;
  border-radius: 12px !important;
  background-color: rgba(255, 245, 233, .9) !important;
  background-image: radial-gradient(rgba(167, 71, 181, .2) 1px, transparent 1.2px) !important;
  background-size: 10px 10px !important;
  color: var(--rr-ink) !important;
  box-shadow: 8px 8px 0 rgba(167, 71, 181, .56) !important;
}

.home-block-welcome {
  background-color: rgba(191, 231, 245, .88) !important;
  background-image:
    linear-gradient(45deg, rgba(255, 245, 233, .3) 25%, transparent 25%, transparent 75%, rgba(255, 245, 233, .3) 75%),
    linear-gradient(45deg, rgba(255, 245, 233, .3) 25%, transparent 25%, transparent 75%, rgba(255, 245, 233, .3) 75%) !important;
  background-position: 0 0, 8px 8px !important;
  background-size: 16px 16px !important;
}

.home-logo {
  border: 2px solid var(--rr-ink) !important;
  background: var(--rr-yellow) !important;
  box-shadow: 4px 4px 0 var(--rr-pink) !important;
}

.home-title {
  color: var(--rr-ink) !important;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", "PingFang SC", sans-serif !important;
  font-size: clamp(2.2rem, 3.6vw, 3.9rem) !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
  line-height: 1.12 !important;
  text-shadow: 3px 3px 0 var(--rr-pink) !important;
  text-wrap: balance;
}

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

.home-block-quick .home-block-title,
.hp-title {
  color: var(--rr-ink) !important;
  font-weight: 950 !important;
}

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

.home-mod {
  min-height: 74px !important;
  border: 2px solid var(--rr-ink) !important;
  border-radius: 8px !important;
  color: var(--rr-ink) !important;
  box-shadow: 4px 4px 0 rgba(59, 35, 69, .68) !important;
}

.home-mod:nth-child(1) { background: var(--rr-green) !important; color: #fffdf5 !important; }
.home-mod:nth-child(2) { background: var(--rr-yellow) !important; }
.home-mod:nth-child(3) { background: var(--rr-cyan) !important; }
.home-mod:nth-child(4) { background: var(--rr-pink) !important; }
.home-mod:hover { transform: translate(-2px, -2px) rotate(-.3deg) !important; box-shadow: 7px 7px 0 rgba(59, 35, 69, .72) !important; }

.home-player { background-color: rgba(255, 245, 233, .8) !important; }
.hp-stage { border: 2px solid var(--rr-ink) !important; background: rgba(191, 231, 245, .38) !important; }

/* Parse, upload and collection panels */
.card,
#pageParse,
#pageUpload,
.left-col .card {
  border: 2px solid var(--rr-ink) !important;
  border-radius: 12px !important;
  background-color: rgba(255, 245, 233, .91) !important;
  background-image: radial-gradient(rgba(167, 71, 181, .14) .85px, transparent 1px) !important;
  background-size: 8px 8px !important;
  color: var(--rr-ink) !important;
  box-shadow: 7px 7px 0 rgba(167, 71, 181, .5) !important;
}

.card h2,
#pageParse h2,
#pageUpload h2 { color: var(--rr-ink) !important; font-weight: 950 !important; }

.tabs {
  border: 2px solid var(--rr-ink) !important;
  background: var(--rr-paper) !important;
  box-shadow: 5px 5px 0 rgba(89, 182, 111, .58) !important;
}

.tab { color: var(--rr-ink) !important; font-weight: 900 !important; }
.tab.active { background: var(--rr-pink) !important; color: var(--rr-ink) !important; }

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

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

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

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

#oauthPanel {
  border: 2px solid var(--rr-ink) !important;
  background-color: var(--rr-paper) !important;
  background-image: radial-gradient(rgba(167, 71, 181, .16) 1px, transparent 1.2px) !important;
  background-size: 9px 9px !important;
  box-shadow: 10px 10px 0 var(--rr-pink) !important;
}

#oauthLeft,
#oauthRight {
  border: 2px solid var(--rr-ink) !important;
  background: rgba(191, 231, 245, .36) !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: 32px; padding: 0 5px; }
  #yxMvBg,
  #yxMvBgBuffer { object-position: 52% 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: 30px; padding: 0 4px; font-size: .53rem; }
  .home-title { font-size: 2.25rem !important; line-height: 1.16 !important; }
}