:root {
  --bg: #d9deea;
  --card-bg: #fbf8ff;
  --accent: #7a60f6;
  --accent-dark: #4a39b6;
  --accent-soft: #ff7f9f;
  --accent-sky: #6dc4ff;
  --text-main: #22315f;
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-main);
  max-width: 100%;
  overflow-x: hidden;
  transition: background .35s ease, color .35s ease;
}



.hidden {
  display: none !important;
}

.glass-header-meta,
.glass-header-avatar {
  display: none !important;
}

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.22) 18%, rgba(255,255,255,0) 36%),
    radial-gradient(circle at 84% 14%, rgba(142, 193, 255, .30) 0%, rgba(142, 193, 255, 0) 24%),
    radial-gradient(circle at 18% 88%, rgba(255, 134, 177, .20) 0%, rgba(255, 134, 177, 0) 32%),
    radial-gradient(circle at 50% 100%, rgba(130, 120, 255, .22) 0%, rgba(130, 120, 255, 0) 34%),
    linear-gradient(180deg, rgba(241, 244, 255, .98) 0%, rgba(224, 231, 252, .92) 38%, rgba(196, 217, 247, .82) 72%, rgba(180, 202, 241, .74) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  backdrop-filter: blur(32px) saturate(1.08);
  -webkit-backdrop-filter: blur(32px) saturate(1.08);
}

.splash-card {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 32px));
  display: grid;
  justify-items: center;
  border: 1px solid rgba(196, 223, 242, .92);
  border-radius: 34px;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.56) 18%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(243,240,255,.9) 46%, rgba(226, 232, 251, .86) 100%);
  padding: 42px 28px 34px;
  text-align: center;
  box-shadow:
    0 26px 70px rgba(78, 72, 156, .18),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(196, 198, 241, .52);
}

.splash-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.18) 22%, rgba(213, 238, 252, .76) 54%, rgba(185, 223, 245, .92) 100%);
  backdrop-filter: blur(26px) saturate(1.05);
  -webkit-backdrop-filter: blur(26px) saturate(1.05);
  pointer-events: none;
}

.splash-card-glow {
  position: absolute;
  inset: auto 8% 16px;
  height: 120px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.68) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(180deg, rgba(140, 232, 255, .24) 0%, rgba(82, 193, 242, .06) 100%);
  filter: blur(10px);
  pointer-events: none;
}

.splash-logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 148px;
  margin-bottom: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.28) 24%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, rgba(214,245,255,.74) 0%, rgba(181,224,244,.34) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 18px 42px rgba(84, 152, 194, .18);
}

.splash-logo {
  position: relative;
  z-index: 1;
  width: min(128px, 30vw);
  height: auto;
  animation: splashLogoFloat 5.8s ease-in-out infinite;
}

.splash-text {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #2a356c;
}

.splash-bar {
  width: min(420px, 100%);
  max-width: 100%;
  height: 18px;
  margin: 22px auto 0;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(224, 236, 247, .98) 0%, rgba(206, 223, 239, .96) 100%);
  box-shadow:
    inset 0 2px 8px rgba(67, 103, 139, .10),
    inset 0 1px 0 rgba(255,255,255,.88);
}

@media (max-width: 575.98px) {
  .splash-card {
    padding: 38px 24px 30px;
  }

  .splash-bar {
    width: 100%;
  }
}

.splash-bar-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6d62f5 0%, #9d6bff 36%, #ff7f9f 72%, #ffc1a6 100%);
  animation: loadBar 3s linear forwards;
}

@keyframes loadBar {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes splashLogoFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -8px, 0) scale(1.03); }
}

.splash-aero-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  filter: blur(8px);
  transform: scale(1.05);
}

.splash-aero-orb,
.splash-aero-ring,
.splash-aero-wave,
.splash-aero-grid,
.splash-aero-cloud {
  position: absolute;
  pointer-events: none;
}

.splash-aero-orb {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.24) 18%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, rgba(100, 221, 255, .42) 0%, rgba(66, 165, 236, .16) 100%);
  filter: blur(1px);
  animation: splashAeroFloat 9s ease-in-out infinite;
}

.splash-aero-orb-a {
  top: 6%;
  left: -3%;
  width: 360px;
  height: 360px;
}

.splash-aero-orb-b {
  top: 14%;
  right: -3%;
  width: 280px;
  height: 280px;
  animation-duration: 11s;
  animation-delay: -3s;
}

.splash-aero-orb-c {
  left: 22%;
  bottom: -10%;
  width: 520px;
  height: 240px;
  border-radius: 45%;
  animation-duration: 12.5s;
  animation-delay: -6s;
}

.splash-aero-ring {
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.42);
  background: radial-gradient(circle at center, rgba(255,255,255,.06), rgba(255,255,255,0) 70%);
  animation: splashAeroDrift 13s linear infinite;
}

.splash-aero-ring-a {
  top: 18%;
  left: 19%;
  width: 220px;
  height: 220px;
}

.splash-aero-ring-b {
  right: 14%;
  bottom: 18%;
  width: 170px;
  height: 170px;
  animation-duration: 15s;
}

.splash-aero-wave {
  left: -12%;
  right: -12%;
  bottom: -2%;
  height: 240px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(132, 223, 255, .08) 0%, rgba(92, 186, 242, .22) 58%, rgba(59, 153, 213, .16) 100%);
  filter: blur(2px);
  animation: splashAeroWave 10s ease-in-out infinite;
}

.splash-aero-grid {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.28) 20%, rgba(0,0,0,.05) 100%);
  opacity: .28;
}

.splash-aero-cloud {
  width: 180px;
  height: 72px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,.78) 0 24px, transparent 25px),
    radial-gradient(circle at 48% 38%, rgba(255,255,255,.7) 0 28px, transparent 29px),
    radial-gradient(circle at 70% 50%, rgba(255,255,255,.76) 0 22px, transparent 23px),
    linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.12) 100%);
  filter: blur(1px);
  opacity: .42;
  animation: splashAeroCloud 16s linear infinite;
}

.splash-aero-cloud-a {
  top: 12%;
  left: 9%;
}

.splash-aero-cloud-b {
  top: 9%;
  right: 11%;
  transform: scale(.84);
  animation-duration: 19s;
  animation-delay: -7s;
}

@keyframes splashAeroFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  25% { transform: translate3d(32px, -20px, 0) scale(1.05) rotate(2deg); }
  50% { transform: translate3d(-16px, -40px, 0) scale(1.08) rotate(-3deg); }
  75% { transform: translate3d(40px, 16px, 0) scale(1.03) rotate(2deg); }
}

@keyframes splashAeroDrift {
  0% { transform: rotate(0deg) translate3d(0, 0, 0); }
  33% { transform: rotate(120deg) translate3d(14px, -16px, 0); }
  66% { transform: rotate(240deg) translate3d(-16px, 12px, 0); }
  100% { transform: rotate(360deg) translate3d(0, 0, 0); }
}

@keyframes splashAeroWave {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(1) scaleY(1); }
  50% { transform: translate3d(4%, -10px, 0) scaleX(1.08) scaleY(1.04); }
}

@keyframes splashAeroCloud {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(42px, 8px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

#login-wrap {
  position: relative;
  max-width: none;
  width: 100%;
  margin-inline: auto;
  padding-inline: 16px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: clip;
}

#login-wrap::before {
  content: "";
  position: fixed;
  inset: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.26) 18%, rgba(255,255,255,0) 36%),
    radial-gradient(circle at 86% 14%, rgba(137, 223, 255, .38) 0%, rgba(137, 223, 255, 0) 24%),
    radial-gradient(circle at 50% 100%, rgba(82, 193, 242, .28) 0%, rgba(82, 193, 242, 0) 36%),
    linear-gradient(180deg, rgba(233, 247, 255, .98) 0%, rgba(206, 235, 250, .92) 34%, rgba(155, 215, 243, .78) 72%, rgba(129, 203, 238, .7) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96);
  z-index: 0;
}

.login-card {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  max-width: 1100px;
  margin-inline: 0 !important;
  border: 1px solid rgba(201, 211, 244, .92);
  border-radius: 36px;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.54) 18%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(245,242,255,.9) 48%, rgba(227,233,251,.84) 100%);
  box-shadow:
    0 28px 80px rgba(72, 77, 154, .18),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(195, 204, 239, .52);
}

.login-banner {
  display: block;
  width: min(320px, 100%);
  height: auto;
  margin: 0 0 14px;
}

.login-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 24px;
  align-items: stretch;
  padding: 28px !important;
}

.login-hero-pane,
.login-form-panel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}

.login-hero-pane {
  padding: 34px 34px 30px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.36) 18%, rgba(255,255,255,0) 36%),
    radial-gradient(circle at 82% 18%, rgba(145, 173, 255, .26) 0%, rgba(145, 173, 255, 0) 24%),
    radial-gradient(circle at 14% 78%, rgba(255, 140, 178, .18) 0%, rgba(255, 140, 178, 0) 30%),
    linear-gradient(160deg, rgba(247,249,255,.9) 0%, rgba(233,238,255,.8) 42%, rgba(215,224,248,.72) 100%);
  border: 1px solid rgba(206, 217, 244, .92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -10px 30px rgba(115, 117, 211, .10);
}

.login-hero-pane::before,
.login-hero-pane::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.login-hero-pane::before {
  inset: auto auto 22px 24px;
  width: 72%;
  height: 120px;
  background:
    radial-gradient(circle at 24% 40%, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(180deg, rgba(145, 231, 255, .46) 0%, rgba(77, 191, 242, .14) 100%);
  filter: blur(2px);
}

.login-hero-pane::after {
  top: 28px;
  right: 36px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255,255,255,.48);
  background: radial-gradient(circle at 34% 34%, rgba(255,255,255,.56) 0%, rgba(255,255,255,.14) 28%, rgba(255,255,255,0) 70%);
  opacity: .72;
}

.login-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 500px;
}

.login-hero-kicker,
.login-form-kicker {
  color: #4f89a9;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.login-title,
.login-form-title {
  color: #194365;
  font-weight: 800;
  letter-spacing: -.02em;
}

.login-title {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.login-subtitle,
.login-form-subtitle {
  color: #4d6f8b;
  font-size: 1rem;
  line-height: 1.65;
}

.login-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.login-feature-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(189, 221, 240, .9);
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(252,254,255,.95) 0%, rgba(226,242,252,.9) 100%);
  color: #35607f;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
}

.login-form-pane {
  display: flex;
}

.login-form-panel {
  width: 100%;
  padding: 32px 28px 26px;
  border: 1px solid rgba(196, 223, 241, .94);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.94) 0%, rgba(255,255,255,.42) 22%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(234,246,253,.88) 54%, rgba(221,239,250,.86) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 18px 42px rgba(68, 129, 173, .12);
}

.login-form-head {
  margin-bottom: 22px;
}

.login-form-title {
  margin-top: 8px;
  font-size: clamp(2rem, 3vw, 2.5rem);
}

.login-form-panel .form-label {
  color: #28516f;
  font-weight: 700;
}

.login-form-panel .form-control {
  min-height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(188, 220, 239, .96);
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.68) 24%, rgba(255,255,255,.42) 58%, rgba(255,255,255,.3) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -10px 18px rgba(160, 210, 236, .12);
}

.login-form-panel .form-control:focus {
  border-color: rgba(111, 201, 239, .96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 0 0 4px rgba(111, 201, 239, .18),
    inset 0 -10px 18px rgba(160, 210, 236, .14);
}

.login-form-panel .form-check-label,
.login-form-panel .small,
.login-form-panel .text-secondary {
  color: #5b7892 !important;
}

.login-aero-scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0;
  z-index: 0;
}

.login-aero-orb,
.login-aero-ring,
.login-aero-wave,
.login-aero-grid,
.login-aero-cloud {
  position: absolute;
  pointer-events: none;
}

.login-aero-orb {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.24) 18%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, rgba(100, 221, 255, .42) 0%, rgba(66, 165, 236, .18) 100%);
  filter: blur(1px);
  animation: loginAeroFloat 8.5s ease-in-out infinite;
}

.login-aero-orb-a {
  top: 4%;
  left: -4%;
  width: 380px;
  height: 380px;
}

.login-aero-orb-b {
  right: -2%;
  top: 12%;
  width: 310px;
  height: 310px;
  animation-duration: 10.5s;
  animation-delay: -3s;
}

.login-aero-orb-c {
  left: 18%;
  bottom: -9%;
  width: 520px;
  height: 260px;
  border-radius: 45%;
  animation-duration: 11.5s;
  animation-delay: -6s;
}

.login-aero-ring {
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.42);
  background: radial-gradient(circle at center, rgba(255,255,255,.06), rgba(255,255,255,0) 70%);
  animation: loginAeroDrift 12s linear infinite;
}

.login-aero-ring-a {
  top: 16%;
  left: 18%;
  width: 220px;
  height: 220px;
}

.login-aero-ring-b {
  right: 12%;
  bottom: 14%;
  width: 160px;
  height: 160px;
  animation-duration: 14s;
}

.login-aero-wave {
  left: -12%;
  right: -12%;
  bottom: -2%;
  height: 220px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(132, 223, 255, .08) 0%, rgba(92, 186, 242, .22) 58%, rgba(59, 153, 213, .18) 100%);
  filter: blur(2px);
  animation: loginAeroWave 9.5s ease-in-out infinite;
}

.login-aero-grid {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 20%, rgba(0,0,0,.05) 100%);
  opacity: .34;
}

.login-aero-cloud {
  width: 180px;
  height: 72px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,.78) 0 24px, transparent 25px),
    radial-gradient(circle at 48% 38%, rgba(255,255,255,.7) 0 28px, transparent 29px),
    radial-gradient(circle at 70% 50%, rgba(255,255,255,.76) 0 22px, transparent 23px),
    linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.12) 100%);
  filter: blur(1px);
  opacity: .46;
  animation: loginAeroCloud 14s linear infinite;
}

.login-aero-cloud-a {
  top: 14%;
  left: 8%;
}

.login-aero-cloud-b {
  top: 10%;
  right: 10%;
  transform: scale(.84);
  animation-duration: 18s;
  animation-delay: -7s;
}

@keyframes loginAeroFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  25% { transform: translate3d(42px, -26px, 0) scale(1.06) rotate(3deg); }
  50% { transform: translate3d(-20px, -52px, 0) scale(1.1) rotate(-4deg); }
  75% { transform: translate3d(54px, 18px, 0) scale(1.04) rotate(2deg); }
}

@keyframes loginAeroDrift {
  0% { transform: rotate(0deg) translate3d(0, 0, 0); }
  33% { transform: rotate(120deg) translate3d(16px, -18px, 0); }
  66% { transform: rotate(240deg) translate3d(-18px, 14px, 0); }
  100% { transform: rotate(360deg) translate3d(0, 0, 0); }
}

@keyframes loginAeroWave {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(1) scaleY(1); }
  50% { transform: translate3d(4%, -10px, 0) scaleX(1.08) scaleY(1.04); }
}

@keyframes loginAeroCloud {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(44px, 10px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}


.app-ribbon {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% -10%, rgba(160, 138, 255, .34) 0%, rgba(160, 138, 255, 0) 24%),
    radial-gradient(circle at 82% 10%, rgba(255, 136, 174, .16) 0%, rgba(255, 136, 174, 0) 22%),
    linear-gradient(180deg, rgba(248,250,255,.94) 0%, rgba(230,236,252,.86) 100%);
  border: 1px solid rgba(206, 217, 244, .9);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(1880px, calc(100% - 20px));
  margin: 6px auto 10px;
  border-radius: 999px;
  max-height: 120px;
  transform-origin: top center;
  will-change: transform, opacity, max-height, filter;
  transition: max-height .42s cubic-bezier(.22, .61, .36, 1), opacity .34s ease, transform .42s cubic-bezier(.22, .61, .36, 1), padding .32s ease, border-color .28s ease, box-shadow .28s ease, filter .34s ease, margin .32s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 0 -1px 0 rgba(185, 191, 233, .24),
    0 12px 28px rgba(70, 77, 149, .12);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  padding: 10px 14px;
}

.app-ribbon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 100%);
  pointer-events: none;
}

.app-ribbon::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 0;
  height: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.ribbon-aero-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ribbon-aero-orb,
.ribbon-aero-glow {
  position: absolute;
  display: block;
  border-radius: 999px;
  opacity: .92;
  filter: blur(.6px);
}

.ribbon-aero-orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.68) 14%, rgba(144, 172, 255, .38) 42%, rgba(144, 172, 255, 0) 74%);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    0 0 28px rgba(143, 162, 255, .16);
  animation: ribbonAeroFloat 14s ease-in-out infinite;
}

.ribbon-aero-glow {
  background: radial-gradient(circle, rgba(179, 144, 255, .32) 0%, rgba(179, 144, 255, 0) 74%);
  animation: ribbonAeroGlow 10s ease-in-out infinite;
}

.ribbon-aero-orb-a {
  width: 176px;
  height: 176px;
  left: -30px;
  top: -52px;
  animation-duration: 16s;
}

.ribbon-aero-orb-b {
  width: 138px;
  height: 138px;
  right: 130px;
  top: -30px;
  animation-duration: 12s;
  animation-delay: -5s;
}

.ribbon-aero-orb-c {
  width: 220px;
  height: 220px;
  left: 56%;
  top: -98px;
  animation-duration: 18s;
  animation-delay: -8s;
}

.ribbon-aero-glow-a {
  width: 420px;
  height: 120px;
  left: 16%;
  top: -18px;
  animation-delay: -2s;
}

.ribbon-aero-glow-b {
  width: 320px;
  height: 110px;
  right: 2%;
  top: -2px;
  animation-duration: 12s;
  animation-delay: -7s;
}

@keyframes ribbonAeroFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(18px, 8px, 0) scale(1.04); }
  50% { transform: translate3d(-12px, 16px, 0) scale(.98); }
  75% { transform: translate3d(10px, -6px, 0) scale(1.03); }
}

@keyframes ribbonAeroGlow {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(1); opacity: .42; }
  50% { transform: translate3d(28px, 10px, 0) scaleX(1.08); opacity: .68; }
}

.ribbon-center {
  min-width: 0;
}

.ribbon-left,
.ribbon-right {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.ribbon-center {
  position: relative;
  z-index: 1;
}

.ribbon-right {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ribbon-right .btn {
  white-space: nowrap;
}

.mobile-ribbon-menu {
  display: none;
}

.mobile-ribbon-menu-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}

.mobile-ribbon-menu-bars span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 1px 0 rgba(255,255,255,.22);
}

.mobile-ribbon-sheet {
  display: none;
}

.ribbon-logo {
  position: relative;
  z-index: 1;
  width: 66px;
  height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(7, 84, 118, .28));
}

.tabs-scroll {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px;
  white-space: nowrap;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  position: relative;
  z-index: 1;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.tabs-scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.tabs-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.tab-link {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(243,245,255,.64) 42%, rgba(223,229,250,.56) 100%),
    linear-gradient(180deg, rgba(159, 185, 255, .34) 0%, rgba(137, 159, 241, .24) 52%, rgba(255, 143, 176, .18) 100%);
  color: #31436e;
  border: 1px solid rgba(198, 212, 244, .98);
  border-radius: 999px;
  min-width: 168px;
  height: 50px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -14px 22px rgba(137, 149, 223, .14),
    0 10px 22px rgba(95, 102, 172, .12);
  backdrop-filter: blur(10px) saturate(1.16);
  -webkit-backdrop-filter: blur(10px) saturate(1.16);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}

.tab-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.1rem;
  width: 1.1rem;
  min-width: 1.1rem;
  margin-right: 0;
  font-size: 1rem;
  line-height: 1;
}

.tab-link-icon::before {
  line-height: 1;
}

.tab-link span {
  position: relative;
  z-index: 1;
}

.tab-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.32) 30%, rgba(255,255,255,0) 58%);
  transform: translateX(-130%);
  transition: transform .38s ease;
  pointer-events: none;
}

.tab-link::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 24%);
  pointer-events: none;
  opacity: .9;
}

.tab-link:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,247,255,.74) 34%, rgba(232,236,252,.58) 100%),
    linear-gradient(180deg, rgba(180, 169, 255, .28) 0%, rgba(147, 166, 245, .24) 52%, rgba(255, 148, 182, .22) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -12px 20px rgba(148, 160, 229, .16),
    0 14px 28px rgba(100, 108, 177, .16);
}

.tab-link:hover::before {
  transform: translateX(130%);
}

.tab-link:hover::after {
  border-color: rgba(255,255,255,.18);
}

.tab-link.active {
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,247,255,.98) 52%, rgba(236, 229, 252, .98) 100%);
  color: #423f8d;
  border-color: rgba(215, 206, 247, .98);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -10px 18px rgba(169, 145, 236, .12),
    0 14px 28px rgba(93, 88, 174, .16);
}

.tab-link.active::after {
  inset: auto 18px 7px;
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 124, 166, .18) 0%, rgba(133, 108, 247, .98) 50%, rgba(255, 124, 166, .18) 100%);
  opacity: 1;
}

.tab-link:active {
  transform: translateY(0) scale(.988);
  box-shadow:
    inset 0 2px 8px rgba(7, 88, 121, .18),
    0 6px 12px rgba(8, 89, 125, .12);
}

.ribbon-right {
  display: flex;
  gap: 6px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.app-ribbon .ribbon-right .btn {
  border-radius: 999px !important;
  border-color: rgba(151, 135, 244, .96) !important;
  background:
    linear-gradient(135deg, rgba(106, 99, 245, .98) 0%, rgba(126, 96, 246, .96) 42%, rgba(255, 124, 166, .96) 100%) !important;
  color: #f7fdff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 10px 24px rgba(98, 90, 190, .22) !important;
  backdrop-filter: blur(10px) saturate(1.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
}

.app-ribbon .ribbon-right .btn:hover,
.app-ribbon .ribbon-right .btn:focus-visible {
  border-color: rgba(164, 226, 248, .98) !important;
  color: #ffffff !important;
}

.mobile-nav-link {
  position: relative;
}

.tab-notify-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ff6aa8 0%, #e63f87 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow:
    0 8px 16px rgba(230, 63, 135, .28),
    inset 0 1px 0 rgba(255,255,255,.32);
  z-index: 3;
  pointer-events: none;
}

.mobile-nav-link .tab-notify-badge {
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

.tab-link.has-unread,
.mobile-nav-link.has-unread {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 0 0 1px rgba(255, 106, 168, .35),
    0 7px 16px rgba(8, 89, 125, .16),
    0 0 18px rgba(255, 106, 168, .18);
}

#login-btn,
#login-2fa-verify-btn,
#app-wrap .btn:not(.tab-link),
.ambient-toggle-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(190, 236, 249, 0.9) !important;
  border-radius: 14px;
  background: linear-gradient(180deg, #39b7e1 0%, #159fce 44%, #0d89b6 100%) !important;
  color: #fdfefe !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 7px 16px rgba(8, 89, 125, .16);
  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    color .18s ease,
    filter .18s ease;
}

#login-btn::before,
#login-2fa-verify-btn::before,
#app-wrap .btn:not(.tab-link)::before,
.ambient-toggle-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.24) 32%, rgba(255,255,255,0) 58%);
  transform: translateX(-130%);
  transition: transform .38s ease;
  pointer-events: none;
  z-index: 0;
}

#login-btn > *,
#login-2fa-verify-btn > *,
#app-wrap .btn:not(.tab-link) > *,
.ambient-toggle-btn > * {
  position: relative;
  z-index: 1;
}

#login-btn:hover:not(:disabled),
#login-2fa-verify-btn:hover:not(:disabled),
#app-wrap .btn:not(.tab-link):hover:not(:disabled),
.ambient-toggle-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #4ac0e7 0%, #20abd7 46%, #0f91bf 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 10px 20px rgba(7, 94, 132, .20);
  color: #fff !important;
}

#login-btn:hover:not(:disabled)::before,
#login-2fa-verify-btn:hover:not(:disabled)::before,
#app-wrap .btn:not(.tab-link):hover:not(:disabled)::before,
.ambient-toggle-btn:hover:not(:disabled)::before {
  transform: translateX(130%);
}

#login-btn:active,
#login-2fa-verify-btn:active,
#app-wrap .btn:not(.tab-link):active,
.ambient-toggle-btn:active,
#login-btn.active,
#login-2fa-verify-btn.active,
#app-wrap .btn:not(.tab-link).active,
.ambient-toggle-btn.active {
  transform: translateY(0) scale(.988);
  background: linear-gradient(180deg, #2ca8d4 0%, #118db9 48%, #086f96 100%) !important;
  box-shadow:
    inset 0 2px 7px rgba(7, 88, 121, .18),
    0 4px 10px rgba(8, 89, 125, .12);
}

#login-btn:focus-visible,
#login-2fa-verify-btn:focus-visible,
#app-wrap .btn:not(.tab-link):focus-visible,
.ambient-toggle-btn:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 0 0 3px rgba(122, 210, 241, .28),
    0 7px 16px rgba(8, 89, 125, .16);
}

#login-btn:disabled,
#login-2fa-verify-btn:disabled,
#app-wrap .btn:not(.tab-link):disabled,
.ambient-toggle-btn:disabled {
  transform: none;
  border-color: rgba(196, 214, 228, .92) !important;
  background: linear-gradient(180deg, #dbe7f1 0%, #c7d6e4 100%) !important;
  color: #6f8397 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

#login-2fa-verify-btn {
  min-width: 150px;
}

#app-wrap .btn.btn-sm {
  min-height: 34px;
  padding-top: .3rem;
  padding-bottom: .3rem;
  font-size: .88rem;
}

#app-wrap .btn:not(.tab-link) i,
.ambient-toggle-btn i {
  position: relative;
  z-index: 1;
}

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #cfe0f1;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(38, 102, 149, .10);
}

.user-edit-link {
  font-size: .84rem;
  font-weight: 700;
  color: #0a84b3;
  text-decoration: underline;
  cursor: pointer;
}

.user-edit-link:hover {
  color: #076086;
}

.user-status-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 3px 12px;
}

.today-header-shell {
  display: block;
  padding: 18px 18px 16px;
}

.today-header-main {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr) minmax(220px, 300px);
  align-items: center;
  gap: 18px;
}

.today-header-left {
  align-items: center;
}

.today-header-center {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.today-header-eyebrow {
  color: #5f7f9d;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.today-header-metrics {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.today-header-metric {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 92px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(193, 216, 235, .92);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(250,253,255,.98) 0%, rgba(236,246,253,.96) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

.today-header-metric-label {
  color: #6a86a0;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.today-header-metric-value {
  color: #133f68;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
}

.today-header-metric-momentum .today-header-metric-value {
  color: #0b86bb;
}

.today-header-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(220,233,245,.98) 0%, rgba(208,223,237,.96) 100%);
  box-shadow:
    inset 0 1px 2px rgba(66, 104, 141, .12),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.today-header-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #34c7ff 0%, #25a9f0 32%, #56d8be 68%, #8cf08d 100%);
  box-shadow: 0 0 18px rgba(73, 201, 255, .26);
  transition: width .28s ease;
}

.today-header-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.today-header-summary {
  color: #476785;
  font-size: .96rem;
}

.today-header-next-action {
  flex: 0 0 auto;
  min-width: 180px;
  padding-inline: 18px;
  border-radius: 999px;
  box-shadow: 0 14px 26px rgba(28, 146, 196, .22);
}

.today-header-next-action.is-finished {
  background: linear-gradient(180deg, #5fc690 0%, #46b87d 100%) !important;
  border-color: #46b87d !important;
  box-shadow: 0 14px 24px rgba(52, 156, 102, .18);
}

.today-header-right {
  opacity: .86;
}

.today-header-right.task-weather-card,
.today-header-right.user-weather-card {
  flex: 0 0 auto;
  width: 100%;
  margin-left: 0;
  padding: 10px 12px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(251,253,255,.86) 0%, rgba(237,245,252,.84) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 8px 20px rgba(76, 117, 159, .06);
}

.today-header-snapshot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(201, 221, 239, .72);
}

.user-status-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 0 0 auto;
  max-width: 100%;
}

.user-status-main > * {
  min-width: 0;
}

#online-status-chip,
.online-status-chip {
  display: none !important;
}

.user-weather-card {
  flex: 0 0 360px;
  width: min(360px, 100%);
  max-width: 100%;
  margin-left: auto;
  padding: 2px 12px;
  gap: 10px;
  border-radius: 15px;
}

.task-userbar-shell {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 6px 14px;
}

.user-status-main .user-settings-btn {
  margin-left: 4px;
  flex: 0 0 auto;
}

.userbar-center {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.userbar-rotator-wrap {
  min-width: 160px;
  display: flex;
  justify-content: center;
}

.userbar-rotator {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
  white-space: nowrap;
}

.userbar-rotator.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.userbar-rotator-label {
  color: #6a86a0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.userbar-rotator-value {
  color: #14456e;
  font-size: 1.08rem;
  font-weight: 800;
}

.userbar-next {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.userbar-next-copy {
  color: #50708e;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.userbar-next-btn {
  min-width: 148px;
  border-radius: 999px !important;
}

.userbar-next-btn.is-finished {
  background: linear-gradient(180deg, #69c996 0%, #4eb980 100%) !important;
  border-color: rgba(155, 228, 184, .92) !important;
}

.userbar-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(190, 216, 237, .96);
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.74) 26%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, rgba(251,253,255,.98) 0%, rgba(231,243,251,.94) 100%);
  color: #376283;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 6px 14px rgba(60, 115, 157, .08);
}

.user-settings-btn:hover,
.user-settings-btn:focus-visible {
  border-color: rgba(154, 204, 234, .98);
  color: #0f85b9;
  outline: none;
}

.userbar-weather-card {
  flex: 0 0 300px;
  width: min(300px, 100%);
  padding: 2px 10px;
  opacity: .88;
}

#user-pill.user-pill-chip {
  min-width: 0;
  max-width: 260px;
}

#user-pill.user-pill-chip.has-name-banner {
  min-width: 180px;
  max-width: 260px;
}

.task-snapshot-shell {
  padding: 18px 18px 18px;
}

.section-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #153f67;
}

.aero-emoji {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  color: #0f77a4;
  font-size: .95rem;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.72) 26%, rgba(255,255,255,0) 54%),
    linear-gradient(180deg, rgba(247,252,255,.98) 0%, rgba(223,241,255,.96) 52%, rgba(195,226,250,.98) 100%);
  border: 1px solid rgba(181, 216, 239, .95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 7px 16px rgba(68, 145, 194, .14);
}

.aero-emoji::after {
  content: "";
  position: absolute;
  inset: 4px 7px auto 7px;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,0));
  pointer-events: none;
}

.aero-emoji i {
  position: relative;
  z-index: 1;
}

.aero-emoji-tasks { color: #16805b; }
.aero-emoji-gratefuls { color: #cf4d78; }
.aero-emoji-journal { color: #1b7fb2; }
.aero-emoji-resentments { color: #5a71c9; }
.aero-emoji-personal { color: #2f7faa; }
.aero-emoji-recovery { color: #16805b; }
.aero-emoji-milestones { color: #2b87af; }
.aero-emoji-meetings { color: #158074; }
.aero-emoji-watch { color: #4b75cf; }
.aero-emoji-shop { color: #8b63d8; }
.aero-emoji-funds { color: #16805b; }
.aero-emoji-manager { color: #7a5b16; }
.aero-emoji-requests { color: #ca5a72; }
.aero-emoji-transactions { color: #4d70c9; }
.aero-emoji-profile { color: #0c7ba6; }

.user-pill-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  min-width: 154px;
  padding-left: 12px;
  padding-right: 12px;
  font-weight: 800;
  letter-spacing: .1px;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(182, 202, 224, .85);
  border-radius: 999px;
  max-width: 100%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 6px 14px rgba(40, 108, 154, .08);
}

.recovery-card {
  padding: 22px;
}

.shop-page-shell {
  padding: 22px;
}

.shop-page-head {
  margin-bottom: 18px;
}

.shop-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .75fr);
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid #d6e7f3;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 18% 24%, rgba(181, 235, 255, .18) 0%, rgba(181, 235, 255, 0) 42%),
    linear-gradient(180deg, rgba(252,255,255,.98) 0%, rgba(237,247,255,.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 14px 28px rgba(31, 116, 154, .08);
}

.shop-hero-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 18px;
  margin-bottom: 14px;
  border-radius: 999px;
  border: 1px solid rgba(184, 214, 236, .94);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(234,244,255,.88));
  color: #5d77a0;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.shop-balance-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  color: #163f67;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1;
}

.shop-balance-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
}

.shop-shard-preview {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.shop-shard-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  mix-blend-mode: normal;
  filter: drop-shadow(0 10px 18px rgba(57, 136, 181, .14));
}

.shop-shard-lore-btn {
  margin-bottom: 14px;
}

.shop-shard-lore-card {
  width: min(760px, calc(100% - 32px));
}

.shop-shard-lore-media {
  display: grid;
  place-items: center;
  min-height: 260px;
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(210, 228, 241, .92);
  background:
    radial-gradient(circle at top, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(247, 252, 255, .98) 0%, rgba(234, 244, 252, .96) 100%);
}

.shop-shard-lore-video {
  width: min(280px, 58vw);
  max-height: 280px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 18px 32px rgba(44, 117, 161, .18));
}

.shop-shard-lore-copy {
  color: #5f7c9b;
  font-size: 1rem;
  line-height: 1.72;
}

.shop-shard-lore-copy p + p {
  margin-top: 14px;
}

.inventory-reward-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid #d3e5f2;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(250, 253, 255, .98) 0%, rgba(238, 247, 255, .96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 12px 24px rgba(25, 109, 146, .08);
}

.inventory-reward-card.is-claimed {
  border-color: #9fd6b8;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 14px 28px rgba(38, 124, 91, .10);
}

.inventory-reward-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(212, 228, 241, .92);
}

.inventory-reward-icon img {
  display: block;
  width: 28px;
  height: 40px;
  object-fit: contain;
}

.inventory-reward-label {
  color: #174168;
  font-size: .98rem;
  font-weight: 800;
}

.inventory-reward-text {
  margin-top: 4px;
  color: #6787a7;
  font-size: .94rem;
  line-height: 1.45;
}

.inventory-reward-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.inventory-reward-amount {
  color: #225f87;
  font-size: .88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.inventory-reward-progress {
  color: #5f7f9e;
  font-size: .85rem;
  font-weight: 700;
}

.inventory-page-shell > .inventory-intro-card + .inventory-reward-card,
.inventory-page-shell > .inventory-reward-card + .inventory-daily-status,
.inventory-page-shell > .inventory-daily-status + .inventory-compose-grid,
.inventory-page-shell > .inventory-reward-card + .alert,
.inventory-page-shell > .alert + .inventory-compose-grid,
.inventory-page-shell > .inventory-reward-card + .inventory-compose-grid,
.inventory-page-shell > .inventory-intro-card + .inventory-compose-grid {
  margin-top: 18px !important;
}

.shop-balance-line small {
  color: #6080a0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.shop-hero-copy p {
  color: #56799f;
  font-size: 1.02rem;
}

.shop-hero-side {
  display: grid;
  gap: 12px;
  align-content: center;
}

.shop-stat-pill {
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid #d2e4f1;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, rgba(248,253,255,.98) 0%, rgba(230,243,252,.95) 100%);
}

.shop-stat-label {
  display: block;
  color: #6784a7;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.shop-stat-value {
  display: block;
  margin-top: 4px;
  color: #173f67;
  font-size: 1.2rem;
  font-weight: 800;
}

.shop-section-card {
  padding: 20px 22px 22px;
  border: 1px solid #d6e7f3;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(251,254,255,.98) 0%, rgba(240,248,255,.95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 12px 26px rgba(31, 116, 154, .06);
}

.shop-section-card-themes {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(249,254,255,.98) 0%, rgba(235,247,255,.96) 100%);
}

.shop-section-card-banners {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(255,251,253,.98) 0%, rgba(247,239,251,.95) 100%);
}

.shop-section-head {
  margin-bottom: 18px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.shop-storage-note {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(173, 203, 226, .92);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(245, 250, 255, .96) 0%, rgba(233, 243, 252, .92) 100%);
  color: #4f6f90;
  font-size: .93rem;
  line-height: 1.55;
}

.shop-item-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #d3e4f1;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(240,248,255,.95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 12px 24px rgba(28, 113, 152, .06);
}

.shop-item-card.is-equipped {
  border-color: #80cde8;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 16px 30px rgba(39, 145, 190, .12);
}

.shop-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.shop-item-title {
  color: #153f67;
  font-size: 1.08rem;
  font-weight: 800;
}

.shop-item-sub {
  margin-top: 5px;
  color: #6787a7;
  font-size: .96rem;
  line-height: 1.5;
}

.shop-price-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(177, 214, 236, .92);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(232,243,255,.9));
  color: #4d74a0;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.shop-theme-preview {
  --theme-preview-text: #163c61;
  --theme-preview-sub: rgba(20, 57, 91, .76);
  --theme-preview-eyebrow: rgba(17, 54, 84, .88);
  --theme-preview-chip: rgba(255,255,255,.78);
  --theme-preview-chip-text: #234663;
  --theme-preview-line: rgba(255,255,255,.44);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 196px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid #d4e5f2;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(160deg, rgba(232, 244, 252, .96) 0%, rgba(250, 252, 255, .94) 100%);
  overflow: hidden;
}

.shop-theme-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 42%);
  pointer-events: none;
}

.shop-theme-scene {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(124px, .9fr);
  gap: 14px;
  min-height: 126px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 100%);
  backdrop-filter: blur(6px);
}

.shop-theme-scene-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.shop-theme-scene-eyebrow {
  color: var(--theme-preview-eyebrow);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
}

.shop-theme-scene-title {
  color: var(--theme-preview-text);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 6px;
  text-shadow: 0 1px 1px rgba(0,0,0,.08);
}

.shop-theme-scene-sub {
  color: var(--theme-preview-sub);
  font-size: .9rem;
  line-height: 1.45;
  margin-top: 8px;
  text-shadow: 0 1px 1px rgba(0,0,0,.08);
}

.shop-theme-scene-window {
  display: grid;
  grid-template-rows: auto 1fr 1fr;
  gap: 8px;
  min-height: 94px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26);
}

.shop-theme-scene-bar,
.shop-theme-scene-pane {
  display: block;
  border-radius: 999px;
  background: var(--theme-preview-line);
}

.shop-theme-scene-bar {
  height: 10px;
}

.shop-theme-scene-pane {
  border-radius: 12px;
}

.shop-theme-traits {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shop-theme-trait {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26);
  background: var(--theme-preview-chip);
  color: var(--theme-preview-chip-text);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.shop-theme-preview-classic {
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 24%),
    linear-gradient(160deg, rgba(119, 205, 239, .86) 0%, rgba(208, 242, 255, .95) 58%, rgba(250, 252, 255, .98) 100%);
}

.shop-theme-preview-cyberpunk {
  --theme-preview-text: #eefbff;
  --theme-preview-sub: rgba(242, 247, 255, .9);
  --theme-preview-eyebrow: rgba(152, 244, 255, .96);
  --theme-preview-chip: rgba(9, 20, 39, .52);
  --theme-preview-chip-text: #effcff;
  --theme-preview-line: linear-gradient(90deg, rgba(50, 245, 255, .92) 0%, rgba(255, 95, 222, .92) 100%);
  background:
    radial-gradient(circle at 18% 18%, rgba(50,245,255,.42) 0%, rgba(50,245,255,0) 24%),
    radial-gradient(circle at 82% 26%, rgba(255,92,226,.36) 0%, rgba(255,92,226,0) 22%),
    linear-gradient(145deg, rgba(11, 18, 37, .98) 0%, rgba(43, 20, 72, .96) 48%, rgba(12, 33, 73, .96) 100%);
}

.shop-theme-preview-glassmorphism {
  --theme-preview-text: #173f67;
  --theme-preview-sub: rgba(36, 80, 119, .82);
  --theme-preview-eyebrow: rgba(39, 96, 141, .88);
  --theme-preview-chip: rgba(255,255,255,.42);
  --theme-preview-chip-text: #2d5a83;
  --theme-preview-line: linear-gradient(90deg, rgba(255,255,255,.82) 0%, rgba(146, 236, 255, .94) 38%, rgba(203, 171, 255, .92) 68%, rgba(255, 181, 225, .94) 100%);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.56) 0%, rgba(255,255,255,0) 18%),
    radial-gradient(circle at 84% 16%, rgba(121, 227, 255, .30) 0%, rgba(121, 227, 255, 0) 18%),
    linear-gradient(135deg, rgba(250,252,255,.78) 0%, rgba(228, 240, 255, .48) 34%, rgba(224, 213, 255, .40) 66%, rgba(255, 221, 240, .42) 100%);
  border-color: rgba(255,255,255,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 18px 38px rgba(98, 118, 182, .16);
  backdrop-filter: blur(24px) saturate(1.22);
}

.shop-theme-preview-glassmorphism::after {
  content: "";
  position: absolute;
  inset: auto auto -28px -18px;
  width: 148px;
  height: 148px;
  border-radius: 48% 52% 50% 50% / 40% 44% 56% 60%;
  background: linear-gradient(135deg, rgba(255, 184, 109, .86) 0%, rgba(255, 92, 205, .88) 42%, rgba(127, 171, 255, .82) 100%);
  filter: blur(4px);
  opacity: .86;
}

.shop-theme-preview-glassmorphism .shop-theme-scene {
  background:
    linear-gradient(135deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 100%),
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%);
  border-color: rgba(255,255,255,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.54),
    0 12px 24px rgba(100, 119, 176, .10);
  backdrop-filter: blur(18px) saturate(1.18);
}

.shop-theme-preview-glassmorphism .shop-theme-scene-window {
  position: relative;
  overflow: hidden;
  border-color: rgba(255,255,255,.34);
  background:
    linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.10) 100%),
    linear-gradient(135deg, rgba(205, 234, 255, .42) 0%, rgba(229, 210, 255, .26) 58%, rgba(255, 216, 239, .26) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.56),
    0 16px 32px rgba(90, 113, 177, .12);
  backdrop-filter: blur(20px) saturate(1.2);
}

.shop-theme-preview-glassmorphism .shop-theme-scene-window::before,
.shop-theme-preview-glassmorphism .shop-theme-scene-window::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  opacity: .94;
}

.shop-theme-preview-glassmorphism .shop-theme-scene-window::before {
  width: 88px;
  height: 88px;
  top: -18px;
  right: -8px;
  background: linear-gradient(135deg, rgba(255,255,255,.66) 0%, rgba(126, 235, 255, .86) 48%, rgba(175, 132, 255, .82) 100%);
  filter: blur(1px);
}

.shop-theme-preview-glassmorphism .shop-theme-scene-window::after {
  width: 104px;
  height: 104px;
  left: -18px;
  bottom: -26px;
  background: linear-gradient(135deg, rgba(255, 183, 97, .84) 0%, rgba(255, 103, 205, .88) 46%, rgba(127, 182, 255, .80) 100%);
  filter: blur(2px);
}

.shop-theme-preview-glassmorphism .shop-theme-scene-pane {
  border: 1px solid rgba(255,255,255,.28);
  background:
    linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 100%),
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
  backdrop-filter: blur(18px) saturate(1.16);
}

.shop-swatch {
  display: block;
  height: 68px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.78);
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(160deg, var(--swatch) 0%, rgba(255,255,255,.7) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.shop-banner-preview {
  padding: 12px;
  border-radius: 18px;
  border: 1px solid #d7e7f4;
  background: rgba(255,255,255,.76);
}

.shop-banner-preview img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.shop-emoji-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid #d7e7f4;
  background: rgba(255,255,255,.76);
}

.shop-emoji-preview-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(208, 227, 241, .9);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.94) 0%, rgba(255,255,255,.42) 28%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(249, 252, 255, .98) 0%, rgba(235, 244, 252, .94) 100%);
  overflow: hidden;
}

.shop-emoji-preview-tile img {
  max-width: 100%;
  max-height: 58px;
  display: block;
  object-fit: contain;
}

.shop-item-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.shop-item-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shop-disabled-action {
  display: inline-flex;
  align-self: flex-start;
}

.shop-item-state {
  color: #6686a5;
  font-size: .94rem;
}

.shop-download-note {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(178, 207, 228, .86);
  background: rgba(243, 249, 255, .84);
  color: #5f7d9b;
  font-size: .82rem;
  line-height: 1.5;
}

.shop-item-actions .btn {
  align-self: flex-start;
}

.shop-theme-bonus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid #d5e7f5;
  background: rgba(248, 252, 255, .8);
}

.shop-theme-detail {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid #d5e7f5;
  background: rgba(248, 252, 255, .86);
}

.shop-theme-detail-copy {
  min-width: 0;
}

.shop-theme-detail-label {
  color: #6f8fb0;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.shop-theme-detail-title {
  color: #163f67;
  font-size: 1rem;
  font-weight: 800;
  margin-top: 4px;
}

.shop-theme-detail-sub {
  color: #6988a7;
  font-size: .92rem;
  line-height: 1.55;
  margin-top: 6px;
}

.shop-theme-detail-classic {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(240, 249, 255, .92) 0%, rgba(225, 242, 254, .92) 100%);
}

.shop-theme-bonus-copy {
  min-width: 0;
}

.shop-theme-bonus-label {
  color: #7a99b8;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.shop-theme-bonus-title {
  color: #163f67;
  font-size: 1rem;
  font-weight: 800;
}

.shop-theme-bonus-sub {
  color: #6988a7;
  font-size: .92rem;
  margin-top: 4px;
}

.shop-theme-bonus-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.theme-transition {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  opacity: 0;
  background: rgba(4, 8, 24, .84);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .45s ease;
}

.theme-transition-shell {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 0;
}

.theme-transition-loader {
  width: min(820px, 82vw);
  min-height: 220px;
  padding: 28px 34px;
  border-radius: 28px;
  border: 1px solid rgba(144, 214, 255, .18);
  background:
    radial-gradient(circle at top, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(12, 18, 38, .84) 0%, rgba(8, 12, 27, .9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 30px 70px rgba(0, 0, 0, .42);
  display: grid;
  place-items: center;
  gap: 18px;
  text-align: center;
  transition: opacity .28s ease, transform .28s ease;
}

.theme-transition-loader-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.14);
  border-top-color: rgba(111, 235, 255, .92);
  border-right-color: rgba(255, 96, 224, .82);
  animation: themeTransitionSpin 1s linear infinite;
}

.theme-transition-title {
  color: #eef8ff;
  font-size: 1.18rem;
  font-weight: 800;
}

.theme-transition-subtitle {
  margin-top: 6px;
  color: #9bb1dc;
  font-size: .94rem;
}

.theme-transition.is-active {
  opacity: 1;
}

.theme-transition.is-ready .theme-transition-loader {
  opacity: 0;
  transform: scale(.98);
}

.theme-transition-video {
  width: min(900px, 88vw);
  max-height: 82vh;
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(110, 238, 255, .18),
    0 24px 64px rgba(0, 0, 0, .5),
    0 0 40px rgba(255, 76, 223, .18);
  object-fit: contain;
  opacity: 0;
  transition: opacity .28s ease;
}

.theme-transition.is-ready .theme-transition-video {
  opacity: 1;
}

@keyframes themeTransitionSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.recovery-head {
  margin-bottom: 18px;
}

.recovery-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.recovery-tile {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 148px;
  padding: 22px 24px;
  border: 1px solid #d2e5f3;
  border-radius: 24px;
  text-align: left;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(253,255,255,.99) 0%, rgba(238,247,255,.95) 100%);
  box-shadow:
    0 16px 28px rgba(26, 111, 150, .08),
    inset 0 1px 0 rgba(255,255,255,.92);
  transition: transform .2s ease, box-shadow .22s ease, border-color .2s ease;
}

.recovery-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 34%, rgba(255,255,255,0) 62%);
  transform: translateX(-130%);
  transition: transform .5s ease;
  pointer-events: none;
}

.recovery-tile:hover {
  transform: translateY(-3px);
  box-shadow:
    0 20px 34px rgba(26, 111, 150, .12),
    inset 0 1px 0 rgba(255,255,255,.96);
}

.recovery-tile:hover::before {
  transform: translateX(130%);
}

.recovery-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 24px;
  font-size: 1.8rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 12px 24px rgba(17, 105, 141, .14);
}

.recovery-tile-milestones .recovery-tile-icon {
  color: #2a82ad;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #f4fcff 0%, #d9f1ff 100%);
}

.recovery-tile-meetings .recovery-tile-icon {
  color: #157b6f;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #f5fff9 0%, #d8f7ee 100%);
}

.personal-tile-gratefuls .recovery-tile-icon {
  color: #c64c78;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #fff6fb 0%, #ffe0ee 100%);
}

.personal-tile-journal .recovery-tile-icon {
  color: #1b7fb2;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #f5fbff 0%, #dceeff 100%);
}

.personal-tile-resentments .recovery-tile-icon {
  color: #596ed0;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #f7f6ff 0%, #e3e6ff 100%);
}

.personal-tile-achievements .recovery-tile-icon {
  color: #b77b19;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #fffdf3 0%, #ffefbd 100%);
}

.recovery-tile-title {
  display: block;
  color: #143d66;
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.2;
}

.recovery-tile-sub {
  display: block;
  margin-top: 8px;
  color: #6787a7;
  font-size: .95rem;
  line-height: 1.5;
}

.recovery-tile-arrow {
  color: #6cb9de;
  font-size: 1.45rem;
}

.user-pill-chip .user-pill-text {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-weight: 800;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-pill-chip.has-name-banner {
  min-width: 250px;
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  max-width: 100%;
  background-color: transparent !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-shadow: 0 1px 2px rgba(255,255,255,.8), 0 0 5px rgba(255,255,255,.45);
}

.user-pill-chip::before,
.user-pill-chip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -34%;
  width: 62%;
  height: 100%;
  transform: translateY(-50%);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 42%, rgba(255,255,255,0.98) 0 1.7px, transparent 2px),
    radial-gradient(circle at 44% 62%, rgba(255,255,255,0.95) 0 2px, transparent 2.3px),
    radial-gradient(circle at 70% 34%, rgba(255,255,255,0.92) 0 1.8px, transparent 2.2px),
    radial-gradient(circle at 84% 58%, rgba(255,255,255,0.90) 0 1.6px, transparent 2px);
}

.name-effect-sparkly {
  animation: nameSparklyText 1.9s ease-in-out infinite;
  text-shadow: 0 0 4px rgba(255, 255, 255, .65), 0 0 9px rgba(255, 234, 112, .6);
}

.name-effect-sparkly::before {
  animation: sparkleSweep 1.6s linear infinite;
}

.name-effect-sparkly::after {
  animation: sparkleSweepAlt 1.9s linear infinite;
  animation-delay: .52s;
}

.name-effect-twinkle {
  animation: nameTwinkle 1.15s steps(2, end) infinite;
  text-shadow: 0 0 5px rgba(255, 255, 255, .7), 0 0 10px rgba(120, 228, 255, .45);
}

.name-effect-glowing {
  animation: nameGlow 2.2s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(255, 255, 255, .75), 0 0 14px rgba(0, 197, 255, .5);
}

@keyframes nameSparklyText {
  0% { filter: brightness(1); letter-spacing: 0; }
  35% { filter: brightness(1.34); letter-spacing: .2px; }
  70% { filter: brightness(1.05); letter-spacing: .08px; }
  100% { filter: brightness(1); letter-spacing: 0; }
}

@keyframes sparkleSweep {
  0% { left: -42%; opacity: 0; transform: translateY(-50%) scale(.84); }
  18% { opacity: .95; }
  58% { opacity: .88; }
  82% { opacity: 0; }
  100% { left: 103%; opacity: 0; transform: translateY(-50%) scale(1.08); }
}

@keyframes sparkleSweepAlt {
  0% { left: -36%; opacity: 0; transform: translateY(-50%) scale(.78); }
  16% { opacity: .9; }
  52% { opacity: .82; }
  74% { opacity: 0; }
  100% { left: 103%; opacity: 0; transform: translateY(-50%) scale(1.05); }
}

@keyframes nameTwinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: .76; }
}

@keyframes nameGlow {
  0% { opacity: .92; text-shadow: 0 0 6px rgba(255, 255, 255, .72), 0 0 11px rgba(0, 197, 255, .40); }
  50% { opacity: 1; text-shadow: 0 0 8px rgba(255, 255, 255, .94), 0 0 18px rgba(0, 197, 255, .66); }
  100% { opacity: .92; text-shadow: 0 0 6px rgba(255, 255, 255, .72), 0 0 11px rgba(0, 197, 255, .40); }
}

.profile-avatar-preview {
  width: 122px;
  height: 122px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid #cfe0f1;
  background: #fff;
}

.profile-password-card {
  margin-top: .25rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid rgba(137, 193, 235, .45);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.95), rgba(255,255,255,.62) 32%, transparent 60%),
    linear-gradient(180deg, rgba(249,253,255,.98), rgba(235,245,255,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 16px 34px rgba(24,109,168,.08);
}

.discord-help-dropdown {
  border: 1px solid rgba(171, 202, 229, .6);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,249,255,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  overflow: hidden;
}

.discord-help-dropdown summary {
  list-style: none;
  cursor: pointer;
  padding: .8rem 1rem;
  font-weight: 700;
  color: #1f517c;
  user-select: none;
}

.discord-help-dropdown summary::-webkit-details-marker {
  display: none;
}

.discord-help-dropdown summary::after {
  content: '\25BE';
  float: right;
  font-size: .9rem;
  color: #3698cd;
  transition: transform .22s ease;
}

.discord-help-dropdown[open] summary::after {
  transform: rotate(180deg);
}

.discord-help-body {
  padding: 0 1rem 1rem;
  color: #466585;
}

.discord-help-body ol {
  margin: 0;
  padding-left: 1.15rem;
}

.profile-security-verify-input {
  min-width: min(100%, 320px);
  flex: 1 1 320px;
}

.trusted-browser-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.trusted-browser-list {
  display: grid;
  gap: 12px;
}

.trusted-browser-empty {
  border: 1px dashed rgba(175, 202, 226, .72);
  border-radius: 18px;
  padding: 14px 16px;
  color: #627e99;
  background: linear-gradient(180deg, rgba(252,254,255,.96), rgba(241,248,255,.92));
}

.trusted-browser-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(183, 209, 230, .68);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(251,254,255,.98), rgba(240,247,255,.93));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 10px 22px rgba(33, 102, 148, .06);
}

.trusted-browser-card-current-session {
  border-color: rgba(191, 209, 226, .76);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(250,252,255,.98), rgba(238,244,252,.94));
}

.trusted-browser-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1b8bc6;
  font-size: 1.35rem;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.97) 0%, rgba(255,255,255,.52) 34%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(248,252,255,.99), rgba(223,240,252,.95));
  border: 1px solid rgba(177, 208, 230, .76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 10px 20px rgba(31, 111, 159, .08);
}

.trusted-browser-main {
  min-width: 0;
  flex: 1 1 auto;
}

.trusted-browser-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.trusted-browser-title {
  color: #1b4c77;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.35;
}

.trusted-browser-current {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(203, 238, 250, .88);
  color: #0d6d94;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.trusted-browser-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.trusted-browser-badge-trusted {
  background: rgba(223, 244, 221, .92);
  color: #2d7f3a;
}

.trusted-browser-badge-untrusted {
  background: rgba(241, 229, 204, .95);
  color: #9d6b18;
}

.trusted-browser-meta {
  margin-top: 7px;
  color: #607d98;
  font-size: .92rem;
  line-height: 1.55;
}

.trusted-browser-revoke {
  flex: 0 0 auto;
  min-width: 92px;
}

.page-view .card {
  border: 1px solid #dcdff3;
  background: #ffffff;
}

.page-view .card .card-body {
  background: transparent;
}

.classic-home-shell .card {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(74, 77, 140, 0.08);
}

.task-hero {
  display: block;
  min-height: 0;
  padding: 20px 18px 18px;
}

.task-hero-head {
  min-width: 0;
  width: 100%;
}

.task-snapshot-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 0;
  width: 100%;
  align-items: stretch;
}

.task-snapshot-card {
  border: 1px solid #dcdff2;
  border-radius: 14px;
  padding: 16px 16px 14px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(254,253,255,.98) 0%, rgba(245,244,255,.95) 100%);
  box-shadow:
    0 14px 34px rgba(92, 101, 170, .09),
    inset 0 1px 0 rgba(255,255,255,.92);
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.task-snapshot-card.is-clickable {
  width: 100%;
  appearance: none;
  cursor: pointer;
  font: inherit;
}

.task-snapshot-card.is-clickable:hover,
.task-snapshot-card.is-clickable:focus-visible {
  transform: translateY(-2px);
  border-color: #c9c2f0;
  box-shadow:
    0 18px 38px rgba(98, 100, 176, .14),
    inset 0 1px 0 rgba(255,255,255,.94);
}

.task-snapshot-card.is-done {
  border-color: #c8ead8;
}

.task-snapshot-top,
.task-snapshot-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.task-snapshot-title-wrap {
  min-width: 0;
}

.task-snapshot-title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.task-snapshot-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1680af;
  font-size: 1rem;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.76) 30%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, rgba(244,251,255,.98) 0%, rgba(226,241,252,.95) 54%, rgba(198,227,246,.98) 100%);
  border: 1px solid rgba(190, 222, 241, .96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 8px 18px rgba(67, 138, 186, .12);
}

.task-snapshot-icon i {
  line-height: 1;
}

.task-snapshot-eta,
.task-snapshot-metric,
.task-snapshot-action {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.task-snapshot-eta {
  background: linear-gradient(180deg, rgba(234, 245, 255, .98) 0%, rgba(217, 236, 251, .94) 100%);
  border: 1px solid #c4dcf1;
  color: #476887;
}

.task-snapshot-title {
  color: #183d64;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.task-snapshot-status {
  margin-top: 2px;
  font-size: .92rem;
  font-weight: 700;
}

.task-snapshot-status.is-danger {
  color: #c33f35;
}

.task-snapshot-status.is-success {
  color: #1d7a45;
}

.task-snapshot-hint {
  margin-top: 8px;
  color: #5d7893;
  font-size: .94rem;
  min-height: 2.8em;
}

.task-snapshot-foot {
  margin-top: 12px;
  align-items: center;
}

.task-snapshot-metric {
  background: rgba(24, 82, 126, .08);
  color: #315a7a;
}

.task-snapshot-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0a83b8;
  background: rgba(12, 148, 202, .10);
}

.task-snapshot-progress {
  margin: 22px 0 0;
  padding: 18px 18px 16px;
  border: 1px solid #d5e6f4;
  border-radius: 18px;
  width: 100%;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(249,253,255,.98) 0%, rgba(236,246,253,.96) 100%);
  box-shadow:
    0 18px 42px rgba(72, 119, 161, .10),
    inset 0 1px 0 rgba(255,255,255,.94);
}

.task-snapshot-progress-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.task-snapshot-progress-title {
  color: #183d64;
  font-size: 1rem;
  font-weight: 800;
}

.task-snapshot-progress-copy {
  color: #5b7892;
  font-size: .94rem;
}

.task-snapshot-progress-percent {
  color: #0d83b4;
  font-size: 1.3rem;
  font-weight: 800;
}

.task-snapshot-progress-track {
  margin: 14px auto 0;
  width: 100%;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(224, 236, 247, .98) 0%, rgba(206, 223, 239, .96) 100%);
  box-shadow:
    inset 0 2px 6px rgba(67, 103, 139, .10),
    inset 0 1px 0 rgba(255,255,255,.88);
}

.task-snapshot-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #39c6ff 0%, #2aa9f0 28%, #62dfb0 72%, #8bef8b 100%);
  box-shadow:
    0 0 22px rgba(72, 204, 255, .34),
    inset 0 1px 0 rgba(255,255,255,.52);
  transition: width .28s ease;
}

.task-snapshot-progress.is-complete .task-snapshot-progress-bar {
  background:
    linear-gradient(90deg, #45d1ff 0%, #36b7f7 24%, #72e4a6 68%, #9af28b 100%);
}

@media (max-width: 767.98px) {
  #mobile-ribbon-menu.mobile-ribbon-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 40px !important;
    padding: 0 !important;
    margin-left: auto !important;
    border-radius: 0 !important;
    border: 1px solid rgba(188, 231, 247, .96) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(243,251,255,.72) 38%, rgba(214,240,252,.54) 100%),
      linear-gradient(180deg, rgba(170, 230, 250, .56) 0%, rgba(96, 191, 226, .38) 56%, rgba(80, 174, 211, .38) 100%) !important;
    color: #0a5d85 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 10px 18px rgba(20, 108, 149, .16) !important;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px) !important;
    -webkit-clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px) !important;
  }

  #mobile-ribbon-menu.mobile-ribbon-menu::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 34%, rgba(255,255,255,0) 62%) !important;
    transform: translateX(-130%) !important;
    transition: transform .38s ease !important;
    pointer-events: none !important;
  }

  #mobile-ribbon-menu.mobile-ribbon-menu::after {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 5px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.54) !important;
    opacity: .82 !important;
    pointer-events: none !important;
  }

  #mobile-ribbon-menu.mobile-ribbon-menu:hover::before,
  #mobile-ribbon-menu.mobile-ribbon-menu:focus-visible::before,
  .app-ribbon.mobile-menu-open #mobile-ribbon-menu.mobile-ribbon-menu::before {
    transform: translateX(130%) !important;
  }

  #mobile-ribbon-menu.mobile-ribbon-menu:hover,
  #mobile-ribbon-menu.mobile-ribbon-menu:focus-visible,
  .app-ribbon.mobile-menu-open #mobile-ribbon-menu.mobile-ribbon-menu {
    background:
      linear-gradient(180deg, #ffffff 0%, #f5fbff 56%, #e4f1fb 100%),
      linear-gradient(180deg, rgba(176, 229, 248, .66) 0%, rgba(104, 192, 224, .36) 100%) !important;
    border-color: rgba(181, 221, 238, .98) !important;
    color: #0a4e73 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.99),
      0 12px 24px rgba(21, 111, 154, .18) !important;
  }

  #mobile-ribbon-menu.mobile-ribbon-menu > *,
  #mobile-ribbon-menu.mobile-ribbon-menu i {
    position: relative !important;
    z-index: 1 !important;
    line-height: 1 !important;
  }

  #mobile-ribbon-menu.mobile-ribbon-menu .mobile-ribbon-menu-bars {
    width: 18px !important;
    gap: 4px !important;
  }

  #mobile-ribbon-menu.mobile-ribbon-menu .mobile-ribbon-menu-bars span {
    height: 2px !important;
    background: currentColor !important;
  }

  .task-snapshot-shell {
    position: relative;
    overflow: hidden;
    padding-bottom: 16px;
  }

  .task-snapshot-shell.has-swipe-cue::after {
    content: "Swipe for more  \2192";
    position: absolute;
    right: 18px;
    bottom: 28px;
    z-index: 2;
    padding: 7px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(233,245,255,.94) 100%);
    border: 1px solid rgba(188, 217, 239, .96);
    color: #2b6d97;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    box-shadow:
      0 10px 22px rgba(74, 123, 174, .14),
      inset 0 1px 0 rgba(255,255,255,.9);
    pointer-events: none;
    animation: taskSwipeCueFloat 1.6s ease-in-out infinite;
  }

  .today-header-shell {
    padding: 14px 14px 12px;
  }

  .today-header-main {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .today-header-action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .today-header-next-action {
    width: 100%;
  }

  .task-snapshot-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 320px);
    gap: 12px;
    padding: 0 8px 8px 0;
    margin-right: -8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .task-snapshot-list::-webkit-scrollbar {
    display: none;
  }

  .task-snapshot-card {
    min-height: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .task-snapshot-top,
  .task-snapshot-foot,
  .task-snapshot-progress-head {
    flex-direction: column;
    align-items: stretch;
  }

  .task-snapshot-eta,
  .task-snapshot-action,
  .task-snapshot-metric {
    width: fit-content;
  }
}

@keyframes taskSwipeCueFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: .94;
  }
  50% {
    transform: translate3d(8px, 0, 0);
    opacity: 1;
  }
}

@media (max-width: 1199.98px) {
  .today-header-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-header-right {
    max-width: 420px;
    justify-self: start;
  }
}

.task-weather-card {
  flex: 0 0 320px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #c7ddef;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, #fbfdff 0%, #f3f9ff 50%, #e4f1fd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 22px rgba(62, 121, 173, .10);
}

.weather-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #0b79a8;
  background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(236,246,255,.94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 16px rgba(43, 120, 170, .10);
}

.weather-texts {
  min-width: 0;
}

.weather-main {
  color: #143a61;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.15;
}

.weather-sub {
  margin-top: 2px;
  color: #446789;
  font-size: .73rem;
}

.task-project-card {
  padding: 18px 18px 16px;
}

.task-project-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.task-project-sub {
  color: #5a7692;
  font-size: .98rem;
}

.task-tools-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.task-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.task-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #c8ddf0;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(230,243,253,.9) 100%);
  color: #1d4d79;
  font-size: .84rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
}

.task-stat-chip strong {
  color: #0b6f97;
  font-size: .9rem;
}

.task-owner-chip {
  min-width: 170px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #c8ddf0;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(230,243,253,.9) 100%);
  color: #1d4d79;
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
}

.task-compose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 180px 150px minmax(240px, .9fr);
  gap: 12px;
  margin-bottom: 16px;
  align-items: stretch;
}

.task-compose-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.task-compose-actions .btn {
  min-height: 100%;
  white-space: normal;
  line-height: 1.15;
}

.task-compose-grid .form-control,
.task-compose-grid .form-select {
  border-color: #c7ddef;
  background-color: #fff;
}

.task-lane-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.task-collapsible-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  margin-top: 14px;
}

.task-collapsible-card {
  border: 1px solid #d2e2f1;
  border-radius: 16px;
  padding: 14px;
  align-self: start;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(253,255,255,.98) 0%, rgba(242,248,255,.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.task-collapsible-card[open] {
  border-color: #bdd7ee;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 10px 20px rgba(51, 108, 154, .08);
}

.task-collapsible-card summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  color: #183d64;
  font-size: 1rem;
  font-weight: 700;
}

.task-collapsible-card summary::after {
  content: "\25BE";
  flex: 0 0 auto;
  color: #4e769b;
  font-size: .9rem;
  transition: transform .18s ease, color .18s ease;
}

.task-collapsible-card summary::-webkit-details-marker {
  display: none;
}

.task-collapsible-card[open] summary::after {
  transform: rotate(180deg);
  color: #0d7da7;
}

.task-collapsible-card-wide {
  width: 100%;
}

.task-lane-card {
  border: 1px solid #d2e2f1;
  border-radius: 16px;
  padding: 14px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(253,255,255,.98) 0%, rgba(242,248,255,.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

.task-lane-head {
  margin-bottom: 10px;
}

.task-lane-sub {
  color: #617d97;
  font-size: .92rem;
}

.task-lane-list {
  display: grid;
  gap: 10px;
}

.task-entry-card {
  border: 1px solid #d6e4f0;
  border-radius: 12px;
  padding: 12px;
  background: #fbfdff;
  box-shadow: 0 4px 12px rgba(53, 106, 153, .06);
}

.task-entry-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.task-entry-title {
  color: #183d64;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.task-entry-meta {
  margin-top: 6px;
  color: #5d7893;
  font-size: .9rem;
}

.task-entry-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.task-detail-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(196, 215, 232, .92);
  background: rgba(239, 247, 255, .95);
  color: #4f6e8f;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.task-detail-badge.is-high {
  color: #9b5a00;
  background: rgba(255, 236, 198, .95);
  border-color: rgba(236, 195, 105, .92);
}

.task-detail-badge.is-urgent {
  color: #a43f3f;
  background: rgba(255, 226, 226, .95);
  border-color: rgba(239, 173, 173, .92);
}

.task-detail-badge.is-low {
  color: #3d6f69;
  background: rgba(225, 247, 242, .95);
  border-color: rgba(164, 224, 208, .92);
}

.task-entry-summary {
  margin-top: 8px;
  color: #40607f;
  font-size: .92rem;
  line-height: 1.45;
}

.task-entry-nudge {
  margin-top: 8px;
  color: #8a5a11;
  font-size: .82rem;
  font-weight: 700;
}

.task-entry-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.task-entry-status.is-today {
  color: #0f6a8f;
  background: rgba(193, 234, 249, .72);
}

.task-entry-status.is-overdue {
  color: #a34134;
  background: rgba(255, 224, 215, .86);
}

.task-entry-status.is-upcoming {
  color: #31567c;
  background: rgba(225, 236, 248, .88);
}

.task-entry-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  gap: 8px;
}

.task-empty {
  border: 1px dashed #caddec;
  border-radius: 12px;
  padding: 14px;
  color: #6b8298;
  background: rgba(250, 253, 255, .88);
  font-size: .95rem;
}

.task-modal {
  position: fixed;
  inset: 0;
  z-index: 1090;
}

body.modal-open {
  overflow: hidden;
}

.task-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 17, 34, .46);
  backdrop-filter: blur(6px);
}

.task-modal-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 22px;
}

.task-modal-card {
  width: min(920px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 24px;
  border: 1px solid #d6e6f2;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(252,255,255,.99) 0%, rgba(239,248,255,.97) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 24px 54px rgba(22, 60, 96, .18);
}

.task-modal-head,
.task-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.task-modal-head {
  border-bottom: 1px solid rgba(212, 228, 241, .92);
}

.task-modal-close-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(192, 210, 226, .95);
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  color: #607f9f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.task-modal-close-icon:hover,
.task-modal-close-icon:focus-visible {
  background: rgba(255, 255, 255, .96);
  color: #315a87;
  transform: translateY(-1px);
}

.task-modal-sub {
  color: #647f9e;
}

.task-modal-body {
  padding: 20px;
}

.task-advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.task-advanced-span-2 {
  grid-column: 1 / -1;
}

.task-modal-actions {
  border-top: 1px solid rgba(212, 228, 241, .92);
}

.task-confirm-card {
  width: min(540px, calc(100% - 32px));
}

.task-confirm-head,
.task-confirm-actions {
  justify-content: space-between;
}

.task-confirm-body {
  padding-top: 12px;
  padding-bottom: 28px;
}

.task-confirm-message {
  color: #395878;
  font-size: 1rem;
  line-height: 1.7;
}

.task-confirm-secondary,
.task-confirm-primary {
  min-width: 124px;
}

.task-modal-buttons {
  display: flex;
  gap: 10px;
}

.funds-groups {
  display: grid;
  gap: 12px;
}

.funds-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.funds-collapse-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  color: #5f86a6;
  cursor: pointer;
  transition: color .18s ease, transform .18s ease, opacity .18s ease;
}

.funds-collapse-icon:hover {
  color: #0b86b1;
  transform: scale(1.08);
}

.funds-collapse-icon:focus-visible {
  outline: 2px solid rgba(80, 185, 229, .32);
  outline-offset: 4px;
  border-radius: 999px;
}

.funds-collapse-icon i {
  font-size: 1rem;
  line-height: 1;
}

.funds-view-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.funds-view-btn {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 1px solid #d7e5ef;
  border-radius: 22px;
  padding: 16px 18px;
  text-align: left;
  color: #234667;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(249,252,255,.98) 0%, rgba(238,246,252,.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 12px 24px rgba(36, 97, 138, .08);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.funds-view-btn:hover,
.funds-view-btn:focus-visible {
  border-color: #b7d5e7;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 16px 30px rgba(36, 97, 138, .12);
  transform: translateY(-1px);
}

.funds-view-btn.is-active {
  border-color: rgba(26, 152, 176, .42);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.98) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg, rgba(244,252,252,.99) 0%, rgba(224,245,242,.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 18px 34px rgba(23, 126, 136, .16);
}

.funds-view-btn-budget {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.98) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at bottom right, rgba(255, 211, 140, .28) 0%, rgba(255, 211, 140, 0) 42%),
    linear-gradient(180deg, rgba(255,250,244,.99) 0%, rgba(250,241,225,.98) 100%);
}

.funds-view-btn-budget.is-active {
  border-color: rgba(222, 156, 68, .46);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.98) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at bottom right, rgba(255, 197, 112, .34) 0%, rgba(255, 197, 112, 0) 44%),
    linear-gradient(180deg, rgba(255,249,238,.99) 0%, rgba(247,232,201,.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 18px 34px rgba(193, 130, 41, .18);
}

.funds-view-btn-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  border: 1px solid rgba(173, 204, 224, .78);
  color: #228aa8;
  font-size: 1.2rem;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.48) 36%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(249,253,255,.99) 0%, rgba(216,238,247,.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 10px 20px rgba(37, 121, 160, .12);
}

.funds-view-btn-budget .funds-view-btn-icon {
  border-color: rgba(228, 188, 129, .76);
  color: #c3741c;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.48) 36%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,252,247,.99) 0%, rgba(251,228,188,.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 12px 24px rgba(198, 132, 42, .14);
}

.funds-view-btn-copy {
  min-width: 0;
}

.funds-view-btn-title,
.funds-view-btn-sub {
  display: block;
}

.funds-view-btn-title {
  font-weight: 800;
  letter-spacing: .01em;
}

.funds-view-btn-sub {
  margin-top: 4px;
  font-size: .88rem;
  color: #5c7891;
}

.funds-day-group {
  border: 1px solid #d2e2f1;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(253,255,255,.98) 0%, rgba(242,248,255,.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
  overflow: hidden;
}

.funds-day-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.funds-day-group summary::-webkit-details-marker {
  display: none;
}

.funds-day-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.funds-day-title {
  color: #183d64;
  font-size: 1rem;
  font-weight: 800;
}

.funds-day-meta {
  color: #617d97;
  font-size: .9rem;
}

.funds-day-total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(230,243,253,.9) 100%);
  border: 1px solid #c8ddf0;
  color: #1d4d79;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
}

.funds-day-total.is-spent {
  color: #a23d35;
  background: linear-gradient(180deg, rgba(255,253,252,.99) 0%, rgba(252,233,229,.94) 100%);
  border-color: #efc8c2;
}

.funds-day-total.is-positive {
  color: #157347;
}

.funds-day-list {
  display: grid;
  gap: 10px;
  padding: 0 16px 16px;
}

.funds-entry-card {
  border: 1px solid #d6e4f0;
  border-radius: 12px;
  padding: 12px;
  background: #fbfdff;
  box-shadow: 0 4px 12px rgba(53, 106, 153, .06);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.funds-entry-card.is-selectable {
  cursor: pointer;
}

.funds-entry-card.is-selectable:hover {
  transform: translateY(-1px);
  border-color: #b9d6ec;
  box-shadow: 0 8px 18px rgba(53, 106, 153, .10);
}

.funds-entry-card.is-selected {
  border-color: #7dc3e6;
  box-shadow: 0 0 0 2px rgba(85, 185, 227, .16), 0 8px 18px rgba(53, 106, 153, .10);
}

.funds-entry-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.funds-entry-main {
  min-width: 0;
}

.funds-entry-title {
  color: #183d64;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.funds-entry-meta,
.funds-entry-comment {
  margin-top: 4px;
  color: #5d7893;
  font-size: .92rem;
}

.funds-entry-comment strong {
  color: #35597c;
}

.funds-entry-amount {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  background: rgba(225, 236, 248, .88);
  color: #31567c;
}

.funds-entry-amount.is-spent {
  color: #aa4138;
  background: rgba(251, 229, 224, .94);
}

.funds-entry-amount.is-positive {
  color: #157347;
  background: rgba(213, 242, 224, .92);
}

.funds-entry-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  min-width: 86px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.funds-entry-status.is-pending {
  color: #8c5c00;
  background: rgba(255, 239, 206, .9);
}

.funds-entry-status.is-queried {
  color: #9a6610;
  background: rgba(255, 231, 197, .9);
}

.funds-entry-status.is-approved {
  color: #157347;
  background: rgba(213, 242, 224, .92);
}

.funds-entry-status.is-denied {
  color: #a34134;
  background: rgba(255, 224, 215, .86);
}

#funds-page #query-btn {
  color: #6e4a00;
  background: linear-gradient(180deg, #ffe9a4 0%, #ffd462 48%, #f1b83a 100%);
  border-color: #d8aa42;
  box-shadow: 0 8px 16px rgba(183, 133, 27, .18), inset 0 1px 0 rgba(255,255,255,.5);
}

#funds-page #query-btn:hover,
#funds-page #query-btn:focus-visible {
  color: #5d3f00;
  background: linear-gradient(180deg, #fff0bf 0%, #ffdc7a 48%, #f4c14f 100%);
  border-color: #d8ab49;
}

#funds-page #approve-btn {
  color: #fff;
  background: linear-gradient(180deg, #58cb88 0%, #27a95f 48%, #167f49 100%);
  border-color: #1a8950;
  box-shadow: 0 8px 16px rgba(26, 137, 80, .18), inset 0 1px 0 rgba(255,255,255,.28);
}

#funds-page #approve-btn:hover,
#funds-page #approve-btn:focus-visible {
  background: linear-gradient(180deg, #6ad695 0%, #31b367 48%, #1b8d51 100%);
  border-color: #1c8c52;
}

#funds-page #deny-btn {
  color: #fff;
  background: linear-gradient(180deg, #ef807b 0%, #dc4d49 50%, #b73030 100%);
  border-color: #be3b39;
  box-shadow: 0 8px 16px rgba(183, 48, 48, .18), inset 0 1px 0 rgba(255,255,255,.24);
}

#funds-page #deny-btn:hover,
#funds-page #deny-btn:focus-visible {
  background: linear-gradient(180deg, #f2948f 0%, #e35b56 50%, #c23d3d 100%);
  border-color: #c44745;
}

.home-dashboard-card {
  padding: 18px 18px 16px;
}

.home-dashboard-head-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.home-dashboard-head,
.budget-planner-head,
.budget-card-head,
.home-checklist-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.home-dashboard-sub,
.budget-planner-sub,
.budget-card-head p,
.home-checklist-head p {
  color: #5b7690;
}

.home-dashboard-status,
.budget-status {
  flex: 0 0 auto;
  border: 1px solid #d2e0ee;
  border-radius: 999px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(240,247,253,.94) 100%);
  color: #56718b;
  font-size: .88rem;
}

.home-dashboard-toggle {
  border: 1px solid #b8d3eb;
  border-radius: 999px;
  padding: 9px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(228,242,252,.96) 100%);
  color: #29506f;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.home-dashboard-toggle:hover,
.home-dashboard-toggle:focus-visible {
  border-color: #9cc4e2;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(216,237,251,.98) 100%);
}

.home-dashboard-panel {
  margin-top: 16px;
}

.home-dashboard-grid,
.budget-create-grid,
.budget-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.home-dashboard-field,
.home-checklist-card,
.budget-setup-card,
.budget-summary-card,
.budget-entry-card {
  border: 1px solid #d4e2ef;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, rgba(253,255,255,.98) 0%, rgba(241,248,255,.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
}

.home-dashboard-field {
  padding: 14px;
}

.home-dashboard-field-wide,
.budget-create-span-full {
  grid-column: 1 / -1;
}

.home-checklist-card {
  margin-top: 14px;
  padding: 14px;
}

.home-checklist-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.home-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d6e3ef;
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.8);
  font-weight: 600;
  color: #2e4c69;
}

.home-check-item input {
  margin: 0;
}

.home-dashboard-field .form-control:disabled {
  background: rgba(247, 250, 253, .96);
  color: #50687f;
  cursor: not-allowed;
}

.home-dashboard-actions,
.budget-create-actions,
.budget-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.inventory-daily-status {
  margin-top: 12px;
  font-size: .95rem;
}

.resentment-day-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid #d7e4f0;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
}

.resentment-day-actions p {
  flex: 1 1 260px;
}

.watch-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.watch-library-panel {
  border: 1px solid #d4e2ef;
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.58);
}

.watch-library-title {
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #68839d;
  margin-bottom: 10px;
}

.watch-library-list {
  display: grid;
  gap: 10px;
}

.watch-library-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #d4e3f1;
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.82);
}

.watch-library-item-title {
  font-weight: 700;
  color: #21486f;
}

.watch-library-item-meta {
  color: #63809a;
  font-size: .88rem;
  margin-top: 4px;
}

.watch-library-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.watch-library-empty,
.budget-empty-row,
.budget-empty-state {
  border: 1px dashed #c5d8ea;
  border-radius: 16px;
  padding: 14px;
  color: #65809a;
  background: rgba(248, 251, 255, .78);
}

.budget-empty-state {
  min-height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
}

.budget-empty-state i {
  font-size: 2rem;
  color: #6a89a8;
}

.budget-layout,
.budget-entry-sections,
.budget-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.budget-setup-card,
.budget-summary-card,
.budget-entry-card {
  padding: 16px;
}

.budget-create-actions {
  margin-top: 14px;
}

.budget-card-head-inline {
  margin-top: 18px;
  padding-top: 6px;
}

.budget-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.budget-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  border: 1px solid #d4e2ef;
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,.88);
  text-align: left;
  color: #264968;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.budget-list-item:hover,
.budget-list-item:focus-visible,
.budget-list-item.is-active {
  border-color: #a9cce7;
  box-shadow: 0 12px 24px rgba(74, 120, 162, .12);
  transform: translateY(-1px);
}

.budget-list-title,
.budget-line-title,
.budget-upcoming-title,
.budget-category-title {
  display: block;
  font-weight: 700;
  color: #234667;
}

.budget-list-meta,
.budget-line-meta,
.budget-upcoming-meta,
.budget-category-meta {
  display: block;
  margin-top: 4px;
  color: #67829b;
  font-size: .88rem;
}

.budget-list-total,
.budget-category-total,
.budget-metric-value,
.budget-line-actions span {
  font-weight: 800;
}

.is-positive {
  color: #17784b;
}

.is-negative {
  color: #b23838;
}

.budget-summary-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.budget-metric-card,
.budget-summary-panel {
  border: 1px solid #d5e2ef;
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.82);
}

.budget-metric-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6c869f;
  margin-bottom: 8px;
}

.budget-metric-value {
  font-size: 1.05rem;
  color: #234667;
}

.budget-category-breakdown,
.budget-upcoming-list,
.budget-entry-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.budget-category-breakdown,
.budget-upcoming-list {
  max-height: 328px;
  overflow: auto;
  padding-right: 6px;
  align-content: start;
}

.budget-category-row,
.budget-upcoming-item,
.budget-line-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #d4e2ef;
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.86);
}

.budget-line-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.budget-export-note {
  color: #68829c;
  font-size: .88rem;
}

#task-alerts .alert {
  border-radius: 10px;
  border-color: #d4e2f0 !important;
  background: linear-gradient(0deg, rgba(207, 229, 250, 0.22) 0%, rgba(251, 254, 255, 0.97) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}


.quick-note-card,
.grateful-item,
.achievement-item,
.journal-entry-card,
.resent-entry-card {
  border: 1px solid #d8e2ee;
  background: #f9fbff;
  border-radius: 8px;
  padding: 10px 12px;
}

.grateful-item,
.achievement-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.journal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.journal-editor {
  border: 1px solid #adbfd4;
  border-radius: 6px;
  min-height: 160px;
  padding: 10px;
  background: #fff;
  overflow: auto;
}

.journal-editor:focus {
  outline: 2px solid rgba(0, 150, 199, .25);
  outline-offset: 1px;
}

.journal-masked {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.resentments-page-shell {
  padding: 22px;
}

.resentment-intro-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 20px;
  align-items: center;
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 22px 24px;
  border: 1px solid #d8e7f3;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(251,254,255,.98) 0%, rgba(236,245,255,.95) 100%);
  box-shadow:
    0 16px 32px rgba(21, 102, 140, .08),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.resentment-intro-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-bottom: 12px;
  padding: 7px 14px;
  border: 1px solid rgba(175, 206, 229, .92);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #edf7ff 100%);
  color: #4f6f91;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.resentment-intro-copy h4 {
  color: #153f67;
}

.resentment-intro-copy p {
  color: #5f7d9c;
  line-height: 1.72;
}

.resentment-intro-orbit {
  position: relative;
  width: 160px;
  height: 160px;
  justify-self: end;
}

.resentment-orbit-core {
  position: absolute;
  inset: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.12) 38%, rgba(95, 155, 255, .1) 100%),
    linear-gradient(180deg, #f7fbff 0%, #d9eaff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 10px 28px rgba(83, 129, 200, .18);
}

.resentment-orbit-ring {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 2px solid rgba(149, 193, 231, .65);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.48),
    0 0 0 8px rgba(233, 244, 255, .38);
}

.resentment-orbit-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #8bd6ff 0%, #4db5ee 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 4px 10px rgba(40, 118, 170, .28);
}

.resentment-orbit-dot-a {
  top: 18px;
  right: 38px;
}

.resentment-orbit-dot-b {
  bottom: 26px;
  left: 24px;
  width: 14px;
  height: 14px;
}

.resentment-compose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.resentment-compose-card {
  padding: 18px;
  border: 1px solid #d8e7f3;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(251,254,255,.98) 0%, rgba(239,247,255,.96) 100%);
  box-shadow:
    0 12px 26px rgba(23, 105, 145, .06),
    inset 0 1px 0 rgba(255,255,255,.94);
}

.resentment-label {
  color: #264f77;
  font-weight: 800;
  margin-bottom: 10px;
}

.inventory-page-shell {
  padding: 20px 20px 12px;
}

.inventory-intro-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 18px;
  padding: 22px 24px;
  border: 1px solid #d8e7f3;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(250,253,255,.99) 0%, rgba(237,246,255,.95) 100%);
  box-shadow:
    0 16px 34px rgba(24, 109, 168, .07),
    inset 0 1px 0 rgba(255,255,255,.94);
}

.inventory-intro-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.inventory-intro-copy h4 {
  color: #1d466f;
}

.inventory-intro-copy p {
  color: #56789c;
  font-size: 1.02rem;
  line-height: 1.62;
}

.inventory-intro-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 12px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(144, 190, 230, .65);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg, rgba(252,255,255,.98) 0%, rgba(232,244,255,.94) 100%);
  color: #4b6f95;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

.inventory-intro-orbit {
  position: relative;
  flex: 0 0 150px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.inventory-orbit-core {
  position: absolute;
  inset: 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.42) 44%, rgba(255,255,255,0) 66%),
    linear-gradient(180deg, #f7fbff 0%, #dbe9fb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 10px 28px rgba(83, 129, 200, .18);
}

.inventory-orbit-ring {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 2px solid rgba(149, 193, 231, .65);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.48),
    0 0 0 8px rgba(233, 244, 255, .38);
}

.inventory-orbit-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #8bd6ff 0%, #4db5ee 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 4px 10px rgba(40, 118, 170, .28);
}

.inventory-orbit-dot-a {
  top: 18px;
  right: 38px;
}

.inventory-orbit-dot-b {
  bottom: 26px;
  left: 24px;
  width: 14px;
  height: 14px;
}

.inventory-intro-card-gratefuls {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.97) 0%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(255,252,253,.99) 0%, rgba(255,240,246,.95) 100%);
}

.inventory-intro-card-gratefuls .inventory-intro-chip {
  border-color: rgba(226, 181, 201, .68);
  color: #a15478;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg, rgba(255,251,253,.99) 0%, rgba(255,236,245,.95) 100%);
}

.inventory-intro-card-gratefuls .inventory-orbit-core {
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.42) 44%, rgba(255,255,255,0) 66%),
    linear-gradient(180deg, #fff7fb 0%, #fde3f0 100%);
}

.inventory-intro-card-gratefuls .inventory-orbit-ring {
  border-color: rgba(229, 177, 205, .7);
}

.inventory-intro-card-gratefuls .inventory-orbit-dot {
  background: linear-gradient(180deg, #ffbed9 0%, #ea7eaf 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 4px 10px rgba(177, 76, 123, .28);
}

.gratefuls-hero-mark {
  position: relative;
  flex: 0 0 184px;
  width: 184px;
  height: 158px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gratefuls-hero-glow {
  position: absolute;
  inset: 22px 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,220,234,.92) 0%, rgba(255,184,212,.42) 34%, rgba(255,184,212,0) 74%);
  filter: blur(6px);
}

.gratefuls-hero-heart {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #c95b8e;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.52) 34%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #fff8fb 0%, #ffdce9 100%);
  border: 1px solid rgba(231, 178, 201, .82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 18px 30px rgba(185, 90, 138, .16);
}

.gratefuls-hero-petal {
  position: absolute;
  z-index: 3;
  width: 18px;
  height: 28px;
  border-radius: 16px 16px 16px 4px;
  background: linear-gradient(180deg, #ffd7e9 0%, #ef90bc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    0 5px 12px rgba(185, 90, 138, .18);
}

.gratefuls-hero-petal-a {
  top: 30px;
  right: 28px;
  transform: rotate(26deg);
}

.gratefuls-hero-petal-b {
  bottom: 36px;
  left: 26px;
  transform: rotate(-28deg);
}

.gratefuls-hero-petal-c {
  top: 48px;
  left: 34px;
  transform: rotate(-6deg);
  width: 14px;
  height: 22px;
}

.inventory-intro-card-journal {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.97) 0%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(251,254,255,.99) 0%, rgba(236,245,255,.95) 100%);
}

.inventory-intro-card-journal .inventory-intro-chip {
  border-color: rgba(168, 201, 231, .72);
  color: #3c6995;
}

.inventory-intro-card-journal .inventory-orbit-core {
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.42) 44%, rgba(255,255,255,0) 66%),
    linear-gradient(180deg, #f7fbff 0%, #dcecff 100%);
}

.inventory-intro-card-journal .inventory-orbit-ring {
  border-color: rgba(163, 198, 234, .72);
}

.inventory-intro-card-journal .inventory-orbit-dot {
  background: linear-gradient(180deg, #93d6ff 0%, #50aef0 100%);
}

.journal-hero-mark {
  position: relative;
  flex: 0 0 184px;
  width: 184px;
  height: 158px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journal-hero-glow {
  position: absolute;
  inset: 20px 26px;
  border-radius: 36px;
  background:
    radial-gradient(circle, rgba(210,235,255,.9) 0%, rgba(150,200,239,.36) 38%, rgba(150,200,239,0) 76%);
  filter: blur(6px);
}

.journal-hero-book {
  position: absolute;
  z-index: 1;
  width: 112px;
  height: 96px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 32%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #fefeff 0%, #deedf9 100%);
  border: 1px solid rgba(172, 205, 232, .82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 18px 30px rgba(76, 134, 183, .14);
}

.journal-hero-book::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: rgba(143, 177, 207, .58);
  transform: translateX(-50%);
}

.journal-hero-pen {
  position: absolute;
  z-index: 3;
  right: 34px;
  bottom: 36px;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3f74a7;
  font-size: 1.2rem;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.52) 34%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f7fcff 0%, #d1e7f9 100%);
  border: 1px solid rgba(164, 197, 227, .84);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 10px 18px rgba(70, 124, 170, .16);
  transform: rotate(-12deg);
}

.journal-hero-line {
  position: absolute;
  z-index: 2;
  left: 54px;
  height: 3px;
  border-radius: 999px;
  background: rgba(126, 165, 201, .52);
}

.journal-hero-line-a {
  top: 50px;
  width: 54px;
}

.journal-hero-line-b {
  top: 68px;
  width: 44px;
}

.journal-hero-line-c {
  top: 86px;
  width: 58px;
}

.inventory-intro-card-achievements {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.97) 0%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(255,254,248,.99) 0%, rgba(255,245,214,.95) 100%);
  align-items: center;
}

.inventory-intro-card-achievements .inventory-intro-chip {
  border-color: rgba(230, 205, 126, .72);
  color: #9f6f16;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg, rgba(255,253,245,.99) 0%, rgba(255,241,199,.95) 100%);
}

.inventory-intro-card-achievements .inventory-intro-copy {
  max-width: 760px;
}

.achievement-hero-mark {
  position: relative;
  flex: 0 0 188px;
  width: 188px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.achievement-hero-glow {
  position: absolute;
  inset: 20px 26px 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,245,188,.94) 0%, rgba(255,231,132,.55) 30%, rgba(255,231,132,0) 72%);
  filter: blur(6px);
}

.achievement-hero-ribbon {
  position: absolute;
  bottom: 10px;
  width: 34px;
  height: 72px;
  border-radius: 14px 14px 24px 24px;
  background:
    linear-gradient(180deg, rgba(255,211,99,.98) 0%, rgba(234,149,38,.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,239,193,.8),
    0 10px 22px rgba(193, 126, 29, .18);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
}

.achievement-hero-ribbon-left {
  left: 52px;
  transform: rotate(-8deg);
}

.achievement-hero-ribbon-right {
  right: 52px;
  transform: rotate(8deg);
}

.achievement-hero-medal {
  position: relative;
  z-index: 2;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.62) 34%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #fffef5 0%, #ffe7a4 100%);
  border: 1px solid rgba(234, 199, 102, .72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 18px 34px rgba(189, 138, 29, .18);
}

.achievement-hero-medal-core {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ba7a0f;
  font-size: 2rem;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.28) 36%, rgba(255,255,255,0) 65%),
    linear-gradient(180deg, #fff8d6 0%, #ffd870 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -10px 18px rgba(194, 129, 22, .12);
}

.achievement-hero-star {
  position: absolute;
  z-index: 3;
  color: #ffcb58;
  text-shadow: 0 0 10px rgba(255, 208, 99, .45);
}

.achievement-hero-star-a {
  top: 22px;
  right: 20px;
  font-size: 1.12rem;
}

.achievement-hero-star-b {
  bottom: 26px;
  left: 24px;
  font-size: .95rem;
}

.achievement-hero-star-c {
  top: 42px;
  left: 18px;
  font-size: .72rem;
  opacity: .82;
}

.inventory-compose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.inventory-compose-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.inventory-compose-card {
  padding: 18px;
  border: 1px solid #d8e7f3;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(251,254,255,.98) 0%, rgba(239,247,255,.96) 100%);
  box-shadow:
    0 12px 26px rgba(23, 105, 145, .06),
    inset 0 1px 0 rgba(255,255,255,.94);
}

.inventory-compose-card-gratefuls {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(255,253,254,.98) 0%, rgba(255,241,247,.96) 100%);
}

.grateful-compose-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 14px;
  align-items: stretch;
}

.grateful-compose-row .form-control {
  min-height: 52px;
  border-radius: 16px;
  padding-inline: 16px;
}

.grateful-compose-row .btn {
  min-width: 112px;
  min-height: 52px;
  border-radius: 18px;
}

.inventory-compose-card-achievements {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(255,254,249,.98) 0%, rgba(255,246,221,.96) 100%);
}

.inventory-label {
  color: #264f77;
  font-weight: 800;
  margin-bottom: 10px;
}

.inventory-input-group .form-control {
  min-height: 52px;
}

.achievement-compose-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 14px;
  align-items: stretch;
}

.achievement-compose-row .form-control {
  min-height: 52px;
  border-radius: 16px;
  padding-inline: 16px;
}

.achievement-compose-row .btn {
  min-width: 112px;
  min-height: 52px;
  border-radius: 18px;
  box-shadow: 0 10px 20px rgba(255, 184, 70, .18);
}

.btn-destroying {
  transform: scale(.94);
  opacity: .65;
  transition: all .35s ease;
}

.chips-wrap {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

.chips-wrap::-webkit-scrollbar {
  height: 8px;
}

.chips-wrap::-webkit-scrollbar-thumb {
  background: #7ebfd7;
  border-radius: 999px;
}

.chip-card {
  flex: 0 0 240px;
  scroll-snap-align: center;
  border: 1px solid #d5e1ef;
  border-radius: 10px;
  background: #f7fbff;
  padding: 12px;
  text-align: center;
}

.chip-image {
  width: 100%;
  height: 150px;
  object-fit: contain;
}

.chip-card.locked .chip-image {
  filter: grayscale(100%) brightness(.8);
}

.chip-title {
  margin-top: 8px;
  font-weight: 700;
}

.chip-state {
  color: #5d728f;
  font-size: .9rem;
}

#meeting-results-table tbody tr {
  cursor: pointer;
}

#meeting-results-table tbody td {
  vertical-align: middle;
}

.ambient-player-shell {
  position: fixed;
  right: 22px;
  bottom: 20px;
  z-index: 1200;
  pointer-events: none;
}

.ambient-player {
  position: relative;
  width: min(320px, calc(100vw - 28px));
  padding: 16px 16px 14px;
  border-radius: 24px;
  overflow: hidden;
  pointer-events: auto;
  border: 1px solid rgba(205, 236, 248, .95);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at bottom right, rgba(148,221,245,.34) 0%, rgba(148,221,245,0) 42%),
    linear-gradient(180deg, rgba(247,253,255,.97) 0%, rgba(222,242,252,.93) 52%, rgba(190,227,244,.94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 18px 34px rgba(12, 102, 140, .20);
  backdrop-filter: blur(18px);
  transition: width .18s ease, padding .18s ease, border-radius .18s ease, transform .18s ease;
}

.ambient-player-shell.is-minimised .ambient-player {
  width: 82px;
  padding: 10px;
  border-radius: 26px;
  cursor: pointer;
}

.ambient-player::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 36%),
    linear-gradient(120deg, rgba(255,255,255,0) 12%, rgba(255,255,255,.22) 32%, rgba(255,255,255,0) 52%);
  pointer-events: none;
}

.ambient-player-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  right: -72px;
  top: -92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126,223,255,.42) 0%, rgba(126,223,255,0) 72%);
  pointer-events: none;
}

.ambient-minimise-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  color: #3d6b8d;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.ambient-player-head,
.ambient-field,
.ambient-controls {
  position: relative;
  z-index: 1;
}

.ambient-player-shell.is-minimised .ambient-player-head {
  margin-bottom: 0;
}

.ambient-player-shell.is-minimised .ambient-minimise-btn {
  display: none;
}

.ambient-player-shell.is-minimised .ambient-player-copy,
.ambient-player-shell.is-minimised .ambient-field,
.ambient-player-shell.is-minimised .ambient-controls,
.ambient-player-shell.is-minimised #ambient-audio {
  display: none;
}

.ambient-player-shell.is-minimised .ambient-player-orb {
  width: 60px;
  height: 60px;
  margin: 4px auto;
}

.ambient-player-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ambient-player-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.ambient-player-orb {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #0c7baa;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.74) 36%, rgba(222,243,252,.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 8px 20px rgba(41, 133, 173, .18);
}

.ambient-player-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #11456d;
}

.ambient-player-meta {
  margin-top: 2px;
  color: #4b7191;
  font-size: .9rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ambient-field {
  display: block;
  margin-bottom: 12px;
}

.ambient-field span {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #4c6f8f;
}

.ambient-field .form-select {
  border-radius: 14px;
  border-color: rgba(181, 217, 234, .95);
  background-color: rgba(255,255,255,.90);
  color: #163765;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.ambient-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.ambient-toggle-btn {
  min-width: 110px;
  height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
}

.ambient-toggle-btn.is-playing {
  background: linear-gradient(180deg, #1d9bce 0%, #0d86b4 52%, #056d94 100%) !important;
}

.ambient-volume-block {
  min-width: 0;
}

.ambient-volume-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  color: #41698a;
  font-size: .85rem;
  font-weight: 700;
}

#ambient-volume {
  width: 100%;
  accent-color: #149dcc;
}

@media (max-width: 1199.98px) {
  .app-status-card {
    max-height: none;
    overflow: visible;
  }

  .user-status-shell {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
    padding: 10px 12px 12px;
  }

  .user-status-main {
    width: 100%;
  }

  .user-weather-card {
    flex: 1 1 auto;
    width: 100%;
    margin-left: 0;
  }

  .task-userbar-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .userbar-center {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .userbar-tools {
    justify-content: space-between;
  }

  .app-ribbon {
    position: relative;
    overflow: visible;
    z-index: 120;
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo";
    align-items: center;
    gap: 10px 12px;
    padding: 10px 12px 14px;
  }

  .ribbon-left {
    grid-area: logo;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 10px;
  }

  .mobile-ribbon-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 58px;
    min-width: 58px;
    height: 42px;
    border-radius: 14px !important;
    padding: 0 !important;
    font-size: 1.15rem;
    margin-left: auto;
    border: 1px solid rgba(190, 236, 249, .92) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(242,251,255,.68) 34%, rgba(209,240,252,.50) 100%),
      linear-gradient(180deg, rgba(170, 231, 251, .56) 0%, rgba(105, 199, 231, .40) 52%, rgba(86, 179, 214, .42) 100%) !important;
    color: #0f7098 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      0 10px 18px rgba(21, 111, 154, .14) !important;
    clip-path: polygon(12px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 12px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  }

  .mobile-ribbon-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 32%, rgba(255,255,255,0) 60%);
    transform: translateX(-130%);
    transition: transform .38s ease;
    pointer-events: none;
  }

  .mobile-ribbon-menu::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 5px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255,255,255,.34);
    opacity: .78;
    pointer-events: none;
  }

  .mobile-ribbon-menu:hover::before,
  .mobile-ribbon-menu:focus-visible::before {
    transform: translateX(130%);
  }

  .mobile-ribbon-menu:hover,
  .mobile-ribbon-menu:focus-visible,
  .app-ribbon.mobile-menu-open .mobile-ribbon-menu {
    background:
      linear-gradient(180deg, #ffffff 0%, #f4fbff 55%, #e3f1fb 100%),
      linear-gradient(180deg, rgba(171, 228, 248, .62) 0%, rgba(94, 188, 224, .32) 100%) !important;
    border-color: rgba(180, 221, 238, .96) !important;
    color: #0a4e73 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 12px 22px rgba(21, 111, 154, .16) !important;
  }

  .mobile-ribbon-menu i {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    line-height: 1;
  }

  .ribbon-logo {
    width: 52px;
    height: 52px;
  }

  .ribbon-center {
    display: none;
  }

  .ribbon-right {
    display: none;
  }

  .ribbon-aero-layer,
  .app-ribbon::before,
  .app-ribbon::after {
    display: none !important;
  }

  .ribbon-logo {
    width: 58px;
    height: 58px;
  }

  .tabs-scroll {
    gap: 10px;
    padding: 2px 2px 8px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 14px;
    overscroll-behavior-x: contain;
    cursor: auto;
  }

  .task-weather-card {
    flex: 1 1 auto;
    width: 100%;
  }

  .task-project-head {
    flex-direction: column;
  }

  .task-owner-chip {
    min-width: 0;
    width: 100%;
  }

  .task-tools-row {
    grid-template-columns: 1fr;
  }

  .task-stats {
    justify-content: flex-start;
  }

  .task-compose-grid {
    grid-template-columns: 1fr;
  }

  .task-lane-grid {
    grid-template-columns: 1fr;
  }

  .task-collapsible-grid {
    grid-template-columns: 1fr;
  }

  .recovery-tile-grid {
    grid-template-columns: 1fr;
  }

  .inventory-intro-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 18px;
  }

  .inventory-page-shell {
    padding: 16px 16px 10px;
  }

  .inventory-intro-orbit {
    width: 128px;
    height: 128px;
  }

  .achievement-hero-mark {
    width: 150px;
    height: 138px;
    flex-basis: 150px;
    align-self: center;
  }

  .achievement-hero-ribbon {
    height: 60px;
    width: 28px;
  }

  .achievement-hero-ribbon-left {
    left: 43px;
  }

  .achievement-hero-ribbon-right {
    right: 43px;
  }

  .achievement-hero-medal {
    width: 88px;
    height: 88px;
  }

  .achievement-hero-medal-core {
    width: 60px;
    height: 60px;
    font-size: 1.55rem;
  }

  .gratefuls-hero-mark,
  .journal-hero-mark {
    width: 150px;
    height: 138px;
    flex-basis: 150px;
    align-self: center;
  }

  .gratefuls-hero-heart {
    width: 82px;
    height: 82px;
    font-size: 1.9rem;
  }

  .journal-hero-book {
    width: 94px;
    height: 82px;
  }

  .journal-hero-pen {
    width: 42px;
    height: 42px;
    right: 28px;
    bottom: 32px;
  }

  .inventory-compose-grid {
    grid-template-columns: 1fr;
  }

  .grateful-compose-row,
  .achievement-compose-row {
    grid-template-columns: 1fr;
  }

  .resentment-intro-card,
  .resentment-compose-grid {
    grid-template-columns: 1fr;
  }

  .resentment-intro-orbit {
    justify-self: start;
  }

  .tab-link {
    min-width: max-content;
    height: 46px;
    padding: 8px 16px;
    font-size: 15px;
    border-radius: 16px;
    scroll-snap-align: center;
  }

  .ambient-player-shell {
    right: 12px;
    left: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  .ambient-player {
    width: min(280px, calc(100vw - 24px));
  }

  .ambient-controls {
    grid-template-columns: 1fr;
  }

  .mobile-ribbon-sheet {
    display: block;
    position: fixed;
    inset: 0;
    padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px));
    background: rgba(6, 20, 37, .54);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
    z-index: 9998;
  }

  .app-ribbon.mobile-menu-open .mobile-ribbon-sheet {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-ribbon-sheet-card {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top, 0px)) - max(20px, env(safe-area-inset-bottom, 0px)));
    overflow: auto;
    padding: 16px;
    border: 1px solid rgba(188, 234, 248, .82);
    border-radius: 24px;
    background:
      radial-gradient(circle at top right, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 42%),
      linear-gradient(180deg, rgba(49, 181, 224, .98) 0%, rgba(11, 143, 188, .985) 100%);
    box-shadow:
      0 18px 44px rgba(8, 68, 102, .22),
      inset 0 1px 0 rgba(255,255,255,.28);
    transform: translateY(-8px) scale(.985);
    transition: transform .24s ease;
  }

  .app-ribbon.mobile-menu-open .mobile-ribbon-sheet-card {
    transform: translateY(0) scale(1);
  }

  .mobile-ribbon-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

  .mobile-ribbon-sheet-title {
    color: #f5fbff;
    font-weight: 800;
    font-size: 1rem;
    text-shadow: 0 1px 0 rgba(0,0,0,.08);
  }

  .mobile-ribbon-close {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0 !important;
    border-radius: 16px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-ribbon-nav {
    display: grid;
    gap: 12px;
  }

  .mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 1px solid rgba(198, 236, 250, .9);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(240, 249, 255, .95) 100%);
    color: #0f567b;
    font-weight: 700;
    text-align: left;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 10px 18px rgba(7, 94, 132, .12);
  }

  .mobile-nav-link span {
    min-width: 0;
    flex: 1 1 auto;
  }

  .mobile-nav-link i {
    font-size: 1rem;
    color: #1c92bf;
  }

  .mobile-nav-link.active {
    background:
      linear-gradient(180deg, #ffffff 0%, #f4fbff 55%, #e3f1fb 100%);
    color: #0a4e73;
    border-color: rgba(180, 221, 238, .96);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      0 12px 24px rgba(7, 94, 132, .14);
  }
}

@media (max-width: 575.98px) {
  .shop-section-card {
    padding: 18px 14px;
  }

  .shop-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    max-height: min(78dvh, 680px);
    padding-right: 6px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(65, 169, 217, .55) rgba(210, 229, 243, .48);
  }

  .shop-grid::-webkit-scrollbar {
    width: 8px;
  }

  .shop-grid::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(223, 238, 248, .72);
  }

  .shop-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(61, 175, 223, .82), rgba(88, 214, 182, .74));
  }

  .shop-grid-banners,
  .shop-grid-emojis {
    max-height: min(62dvh, 560px);
  }

  .shop-item-card {
    padding: 16px;
    gap: 12px;
    min-width: 0;
    min-height: min(74dvh, 640px);
    align-content: start;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .shop-item-top {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .shop-price-chip {
    align-self: flex-start;
    max-width: 100%;
  }

  .shop-item-title {
    font-size: 1rem;
    line-height: 1.24;
  }

  .shop-item-sub,
  .shop-item-state {
    font-size: .92rem;
    line-height: 1.45;
  }

  .shop-theme-preview {
    min-height: 0;
    padding: 14px;
  }

  .shop-theme-scene {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    padding: 14px;
  }

  .shop-theme-scene-copy {
    gap: 0;
  }

  .shop-theme-scene-title {
    font-size: .98rem;
  }

  .shop-theme-scene-sub {
    font-size: .88rem;
  }

  .shop-theme-scene-window {
    min-height: 84px;
    padding: 10px;
  }

  .shop-theme-traits {
    gap: 6px;
  }

  .shop-theme-trait {
    min-height: 28px;
    padding: 0 10px;
    font-size: .72rem;
  }

  .shop-theme-bonus,
  .shop-theme-detail {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
  }

  .shop-grid-banners .shop-item-card,
  .shop-grid-emojis .shop-item-card {
    min-height: min(58dvh, 520px);
  }

  .shop-item-buttons,
  .shop-theme-bonus-actions {
    width: 100%;
  }

  .shop-item-actions .btn,
  .shop-disabled-action {
    align-self: stretch;
  }

  .shop-item-actions .btn,
  .shop-disabled-action .btn {
    width: 100%;
  }

  .user-status-shell {
    gap: 12px;
    padding: 10px 12px 12px;
  }

  .user-status-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "avatar pill gear";
    align-items: center;
    gap: 8px 10px;
  }

  #user-avatar,
  .user-avatar {
    grid-area: avatar;
    width: 44px;
    height: 44px;
    align-self: start;
  }

  #user-pill {
    grid-area: pill;
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-self: stretch;
  }

  #user-pill.user-pill-chip.has-name-banner {
    min-width: 0;
    min-height: 42px;
    padding: 0 14px;
  }

  #user-settings-btn {
    grid-area: gear;
    justify-self: end;
  }

  .user-weather-card {
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    border-radius: 18px;
  }

  .task-userbar-shell {
    gap: 10px;
  }

  .userbar-center,
  .userbar-next,
  .userbar-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .userbar-rotator-wrap {
    justify-content: flex-start;
  }

  .userbar-rotator {
    white-space: normal;
  }

  .userbar-next-copy {
    white-space: normal;
  }

  .userbar-next-btn,
  .user-settings-btn {
    width: 100%;
  }

  .task-weather-card {
    align-items: flex-start;
  }

  .weather-main {
    font-size: .92rem;
  }

  .weather-sub {
    font-size: .8rem;
  }

  .container-fluid.p-3,
  .container-fluid.p-3.p-lg-4,
  .container-fluid {
    padding-bottom: 112px !important;
  }

  .ambient-player-shell.is-minimised .ambient-player {
    width: 74px;
    padding: 8px;
  }

  .task-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .task-stat-chip {
    justify-content: center;
    min-width: 0;
  }

  .task-entry-top {
    flex-direction: column;
  }

  .task-entry-status {
    align-self: flex-start;
  }

  .task-entry-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .trusted-browser-card {
    flex-direction: column;
    align-items: stretch;
  }

  .trusted-browser-revoke {
    width: 100%;
  }

  .mobile-ribbon-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .mobile-ribbon-actions .btn {
    min-height: 46px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    padding-inline: 10px;
  }

  .recovery-card {
    padding: 18px;
  }

  .recovery-tile {
    grid-template-columns: auto 1fr;
    min-height: 128px;
    padding: 18px;
  }

  #login-wrap {
    padding-inline: 0 !important;
  }

  .login-card {
    width: auto;
    max-width: none;
    margin-inline: 10px !important;
  }

  .login-card > .card-body {
    padding: 20px 16px !important;
  }

  .login-shell {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px !important;
  }

  .login-hero-pane,
  .login-form-panel {
    padding: 22px 18px;
    border-radius: 24px;
  }

  .login-feature-list {
    gap: 8px;
  }

  .login-feature-pill {
    width: 100%;
    justify-content: center;
  }

  .shop-page-shell,
  .watch-room-card,
  .profile-password-card {
    padding-inline: 16px;
  }

  .shop-balance-row,
  .watch-room-tools,
  .watch-controls,
  .messenger-presence-strip {
    width: 100%;
  }

  .shop-item-buttons,
  .task-modal-buttons {
    display: grid;
    grid-template-columns: 1fr;
  }

  .shop-item-actions .btn,
  .shop-item-buttons .btn,
  .task-modal-buttons .btn {
    width: 100%;
  }

  .inventory-reward-meta {
    padding-left: 0;
  }

  .funds-section-head {
    flex-direction: column;
  }

  .funds-day-group summary {
    flex-direction: column;
  }

  .funds-day-total {
    width: 100%;
    justify-content: flex-start;
  }

  .task-modal-dialog {
    padding: 12px;
  }

  .task-modal-card {
    width: min(calc(100% - 20px), 920px);
    max-height: calc(100vh - 24px);
  }

  .task-modal-head,
  .task-modal-body,
  .task-modal-actions {
    padding-inline: 16px;
  }

  .recovery-tile-arrow {
    display: none;
  }

  .resentments-page-shell {
    padding: 18px;
  }

  .resentment-intro-card,
  .resentment-compose-card {
    padding: 18px;
  }

  .resentment-intro-orbit {
    width: 124px;
    height: 124px;
  }
}




/* Funds button overrides */
#funds-page #query-btn,
#funds-page #query-btn.btn {
  color: #6e4a00 !important;
  background: linear-gradient(180deg, #ffe9a4 0%, #ffd462 48%, #f1b83a 100%) !important;
  border-color: #d8aa42 !important;
  box-shadow: 0 8px 16px rgba(183, 133, 27, .18), inset 0 1px 0 rgba(255,255,255,.5) !important;
}

#funds-page #query-btn:hover,
#funds-page #query-btn:focus-visible {
  color: #5d3f00 !important;
  background: linear-gradient(180deg, #fff0bf 0%, #ffdc7a 48%, #f4c14f 100%) !important;
  border-color: #d8ab49 !important;
}

#funds-page #query-btn:active,
#funds-page #query-btn.active {
  color: #5b3a00 !important;
  background: linear-gradient(180deg, #f9da83 0%, #efc14b 50%, #d79f1f 100%) !important;
  border-color: #c6952b !important;
}

#funds-page #approve-btn,
#funds-page #approve-btn.btn {
  color: #fff !important;
  background: linear-gradient(180deg, #58cb88 0%, #27a95f 48%, #167f49 100%) !important;
  border-color: #1a8950 !important;
  box-shadow: 0 8px 16px rgba(26, 137, 80, .18), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

#funds-page #approve-btn:hover,
#funds-page #approve-btn:focus-visible {
  color: #fff !important;
  background: linear-gradient(180deg, #6ad695 0%, #31b367 48%, #1b8d51 100%) !important;
  border-color: #1c8c52 !important;
}

#funds-page #approve-btn:active,
#funds-page #approve-btn.active {
  color: #fff !important;
  background: linear-gradient(180deg, #38b96d 0%, #1f924f 50%, #12663a 100%) !important;
  border-color: #166f3f !important;
}

#funds-page #deny-btn,
#funds-page #deny-btn.btn {
  color: #fff !important;
  background: linear-gradient(180deg, #ef807b 0%, #dc4d49 50%, #b73030 100%) !important;
  border-color: #be3b39 !important;
  box-shadow: 0 8px 16px rgba(183, 48, 48, .18), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

#funds-page #deny-btn:hover,
#funds-page #deny-btn:focus-visible {
  color: #fff !important;
  background: linear-gradient(180deg, #f2948f 0%, #e35b56 50%, #c23d3d 100%) !important;
  border-color: #c44745 !important;
}

#funds-page #deny-btn:active,
#funds-page #deny-btn.active {
  color: #fff !important;
  background: linear-gradient(180deg, #de6762 0%, #c63d38 50%, #982525 100%) !important;
  border-color: #a92f2e !important;
}

/* Sparkly splash bar */
.splash-bar {
  position: relative;
  overflow: hidden;
}

.splash-bar-fill {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 14px rgba(69, 195, 234, .35),
    inset 0 1px 0 rgba(255,255,255,.45);
}

.splash-bar-fill::before,
.splash-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.splash-bar-fill::before {
  background:
    radial-gradient(circle at 12% 46%, rgba(255,255,255,.98) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 32%, rgba(255,255,255,.88) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 39% 68%, rgba(255,255,255,.92) 0 2.2px, transparent 3.2px),
    radial-gradient(circle at 54% 42%, rgba(255,255,255,.85) 0 1.7px, transparent 2.7px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.92) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 38%, rgba(255,255,255,.9) 0 1.8px, transparent 2.8px);
  mix-blend-mode: screen;
  animation: splashSparkles 2.8s linear infinite;
}

.splash-bar-fill::after {
  background: linear-gradient(115deg, rgba(255,255,255,0) 22%, rgba(255,255,255,.42) 42%, rgba(255,255,255,0) 58%);
  transform: translateX(-120%);
  animation: splashShine 1.6s ease-in-out infinite;
}

@keyframes splashSparkles {
  0% { transform: translateX(-8%); opacity: .55; }
  50% { transform: translateX(6%); opacity: 1; }
  100% { transform: translateX(18%); opacity: .6; }
}

@keyframes splashShine {
  0% { transform: translateX(-125%); }
  100% { transform: translateX(125%); }
}

.watch-room-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 26px 24px 22px;
}

.watch-room-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
  padding-top: 4px;
}

.watch-room-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
  row-gap: 12px;
}

.watch-room-chip,
.watch-room-status {
  border: 1px solid #d1e3f4;
  border-radius: 999px;
  padding: 9px 14px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg, rgba(251,253,255,.98) 0%, rgba(232,245,255,.9) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

.watch-room-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.watch-room-chip-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6483a1;
}

.watch-room-chip-value {
  color: #18456f;
  font-weight: 800;
}

.watch-room-status {
  color: #305679;
  font-weight: 600;
}

.watch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, .95fr);
  gap: 18px;
  align-items: start;
}

.watch-stage-card,
.watch-panel-card {
  border: 1px solid #d4e4f3;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, rgba(253,255,255,.98) 0%, rgba(241,248,255,.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
}

.watch-stage-card {
  padding: 16px;
}

.watch-player-shell {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid #c7ddef;
  background:
    radial-gradient(circle at top, rgba(131, 202, 241, .24), transparent 55%),
    linear-gradient(180deg, #173353 0%, #0d2039 100%);
  aspect-ratio: 16 / 9;
  min-height: 260px;
}

.watch-player-frame,
.watch-player-frame iframe {
  width: 100%;
  height: 100%;
}

.watch-player-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #d9efff;
  text-align: center;
  padding: 18px;
}

.watch-player-placeholder i {
  font-size: 2.2rem;
  color: #9de1ff;
}

.watch-now-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
}

.watch-current-title {
  color: #153f67;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.25;
}

.watch-current-meta {
  margin-top: 4px;
  color: #577493;
  font-size: .96rem;
}

.watch-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.night-mode #watch-page .watch-ghost-btn.btn {
  --ghost-rgb: 53, 214, 255;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
  border: 2px solid rgba(var(--ghost-rgb), .88) !important;
  background: rgba(255,255,255,.02) !important;
  background-image: none !important;
  color: rgb(var(--ghost-rgb)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 10px 18px rgba(255,255,255,.035),
    0 0 0 1px rgba(var(--ghost-rgb), .18),
    0 0 18px rgba(var(--ghost-rgb), .18),
    0 10px 22px rgba(7, 20, 52, .06);
  text-shadow: 0 0 10px rgba(var(--ghost-rgb), .22);
  transition: transform .18s ease, box-shadow .22s ease, color .18s ease, background .22s ease, border-color .18s ease;
}

body.night-mode #watch-page .watch-ghost-btn.btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 36%, rgba(var(--ghost-rgb), .1) 100%);
  pointer-events: none;
  z-index: 0;
}

body.night-mode #watch-page .watch-ghost-btn.btn::after {
  content: "";
  position: absolute;
  top: -22%;
  bottom: -22%;
  left: -28%;
  width: 42%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.58) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-180%) rotate(12deg);
  opacity: .9;
  pointer-events: none;
  transition: transform .45s ease;
  z-index: 0;
}

body.night-mode #watch-page .watch-ghost-btn.btn > * {
  position: relative;
  z-index: 1;
}

body.night-mode #watch-page .watch-ghost-btn.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgba(255,255,255,.06) !important;
  background-image: none !important;
  color: rgb(var(--ghost-rgb)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.26),
    inset 0 0 28px rgba(var(--ghost-rgb), .14),
    0 0 0 1px rgba(var(--ghost-rgb), .3),
    0 0 24px rgba(var(--ghost-rgb), .28),
    0 12px 26px rgba(7, 20, 52, .1);
}

body.night-mode #watch-page .watch-ghost-btn.btn:hover:not(:disabled)::after {
  transform: translateX(340%) rotate(12deg);
}

body.night-mode #watch-page .watch-ghost-btn.btn:active,
body.night-mode #watch-page .watch-ghost-btn.btn:focus-visible {
  transform: translateY(0) scale(.985);
  background: rgba(var(--ghost-rgb), .12) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    inset 0 0 18px rgba(var(--ghost-rgb), .28),
    0 0 0 1px rgba(var(--ghost-rgb), .34),
    0 0 28px rgba(var(--ghost-rgb), .3),
    0 10px 22px rgba(7, 20, 52, .12);
}

body.night-mode #watch-page .watch-ghost-btn.btn:disabled {
  background: rgba(255,255,255,.05) !important;
  background-image: none !important;
  color: rgba(180, 196, 220, .7) !important;
  border-color: rgba(158, 176, 210, .36) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 1px rgba(136, 156, 192, .14);
}

.watch-ghost-cyan { --ghost-rgb: 38, 209, 255; }
.watch-ghost-blue { --ghost-rgb: 61, 156, 255; }
.watch-ghost-violet { --ghost-rgb: 179, 113, 255; }
.watch-ghost-pink { --ghost-rgb: 255, 104, 206; }
.watch-ghost-amber { --ghost-rgb: 255, 171, 84; }

.app-status-card {
  position: relative;
  max-height: none;
  border-radius: 24px;
  overflow: visible;
  border: 2px solid rgba(198, 220, 239, .92);
  background:
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,251,255,.98) 100%) padding-box,
    linear-gradient(90deg, rgba(198, 220, 239, .92), rgba(198, 220, 239, .92)) border-box;
  transform-origin: top center;
  will-change: transform, opacity, max-height, filter;
  transition: max-height .42s cubic-bezier(.22, .61, .36, 1), opacity .34s ease, transform .42s cubic-bezier(.22, .61, .36, 1), margin .32s ease, box-shadow .28s ease, filter .34s ease, background-position .18s ease;
}

.app-status-card::before {
  content: none;
}

.app-status-card::after {
  content: none;
}

.app-status-card > * {
  position: relative;
  z-index: 1;
}

.app-status-card:hover {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,251,255,.98) 100%) padding-box,
    linear-gradient(110deg, #4e8cff 0%, #5ab6ff 22%, #ffd45d 48%, #67e388 72%, #4e8cff 100%) border-box;
  background-size: 100% 100%, 220% 220%;
  animation: user-bar-gemini-border 3.4s linear infinite;
  box-shadow: 0 10px 24px rgba(71, 123, 173, .10);
}

@keyframes user-bar-gemini-border {
  0% { background-position: 0 0, 0% 50%; }
  25% { background-position: 0 0, 100% 0%; }
  50% { background-position: 0 0, 100% 100%; }
  75% { background-position: 0 0, 0% 100%; }
  100% { background-position: 0 0, 0% 50%; }
}

.watch-side-column {
  display: grid;
  gap: 18px;
}

.watch-panel-card {
  padding: 16px;
}

.watch-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.watch-panel-note {
  color: #6a89a8;
  font-size: .88rem;
}

.watch-queue-compose,
.watch-chat-compose {
  display: grid;
  gap: 10px;
}

.watch-queue-list,
.watch-chat-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.watch-queue-list {
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.watch-chat-list {
  max-height: 320px;
  overflow: auto;
  padding-right: 4px;
}

.watch-chat-compose {
  margin-top: 16px;
  gap: 14px;
}

.watch-queue-empty,
.watch-chat-empty {
  border: 1px dashed #c8dcf0;
  border-radius: 14px;
  padding: 14px;
  color: #6c88a4;
  background: rgba(245, 250, 255, .7);
}

.watch-queue-item,
.watch-chat-item {
  border: 1px solid #d4e3f1;
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

.watch-queue-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.watch-queue-title {
  color: #163f67;
  font-weight: 800;
  line-height: 1.3;
}

.watch-queue-meta,
.watch-chat-meta {
  margin-top: 4px;
  color: #6482a0;
  font-size: .9rem;
}

.watch-queue-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.watch-chat-item.is-self {
  border-color: #b9dbf0;
  background: linear-gradient(180deg, rgba(247,252,255,.98) 0%, rgba(231,245,255,.95) 100%);
}

.watch-chat-author {
  color: #13426e;
  font-weight: 800;
}

.watch-chat-text {
  margin-top: 5px;
  color: #274c71;
  white-space: pre-wrap;
  word-break: break-word;
}

.watch-chat-compose-actions,
.messenger-compose-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chat-emoji {
  width: 34px;
  height: 34px;
  margin: 0 2px;
  vertical-align: middle;
  object-fit: contain;
}

.chat-emoji,
.emoji-pack-button img,
.shop-emoji-preview img,
.shop-emoji-preview-tile img {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.emoji-picker-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  max-height: min(70vh, 420px);
  overflow-y: auto;
  border-radius: 18px;
  border: 1px solid #d7e7f4;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.95) 0%, rgba(255,255,255,.46) 28%, rgba(255,255,255,0) 64%),
    linear-gradient(180deg, rgba(251,254,255,.98) 0%, rgba(238,246,253,.95) 100%);
}

.emoji-picker-empty {
  color: #6988a7;
  font-size: .94rem;
}

.emoji-pack-group {
  display: grid;
  gap: 10px;
}

.emoji-pack-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.emoji-pack-title {
  color: #173f67;
  font-size: .95rem;
  font-weight: 800;
}

.emoji-pack-count {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #466381;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.emoji-pack-subtitle {
  color: #6d87a1;
  font-size: .82rem;
  margin-top: -4px;
}

.emoji-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 10px;
}

.emoji-pack-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 6px;
  border: 1px solid #d5e6f4;
  border-radius: 14px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.94) 0%, rgba(255,255,255,.36) 28%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(251,254,255,.98) 0%, rgba(237,245,253,.95) 100%);
  cursor: pointer;
}

.emoji-pack-button img {
  max-width: 100%;
  max-height: 42px;
  object-fit: contain;
}

.messenger-page-shell {
  display: grid;
  gap: 18px;
}

.messenger-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.messenger-presence-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.messenger-presence-card {
  display: grid;
  gap: 4px;
  min-width: 120px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid #d4e5f2;
  background: rgba(249, 252, 255, .88);
}

.messenger-presence-name {
  color: #153f67;
  font-weight: 800;
}

.messenger-presence-state {
  color: #728da8;
  font-size: .9rem;
  font-weight: 700;
}

.messenger-presence-state.is-online {
  color: #177a58;
}

.messenger-thread-shell {
  display: grid;
  gap: 14px;
}

.messenger-list {
  display: grid;
  gap: 12px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.messenger-empty {
  border: 1px dashed #c8dcf0;
  border-radius: 18px;
  padding: 18px;
  color: #6c88a4;
  background: rgba(245, 250, 255, .7);
}

.messenger-item {
  max-width: min(78%, 720px);
  padding: 14px 16px;
  border-radius: 18px 18px 18px 8px;
  border: 1px solid #d5e6f3;
  background: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

.messenger-item.is-self {
  margin-left: auto;
  border-radius: 18px 18px 8px 18px;
  border-color: #bddcf0;
  background: linear-gradient(180deg, rgba(247,252,255,.98) 0%, rgba(231,245,255,.95) 100%);
}

.messenger-item-author {
  color: #13426e;
  font-weight: 800;
}

.messenger-item-meta {
  margin-top: 4px;
  color: #6482a0;
  font-size: .88rem;
}

.messenger-item-text {
  margin-top: 6px;
  color: #274c71;
  white-space: pre-wrap;
  word-break: break-word;
}

.messenger-compose {
  display: grid;
  gap: 12px;
}

@media (max-width: 1199.98px) {
  .watch-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991.98px) {
  .funds-view-switcher {
    grid-template-columns: 1fr;
  }

  .messenger-page-head {
    flex-direction: column;
    align-items: stretch;
  }

  .messenger-item {
    max-width: 100%;
  }

  .watch-room-head,
  .watch-now-bar,
  .watch-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .watch-room-tools,
  .watch-controls {
    justify-content: flex-start;
  }

  .home-dashboard-head,
  .budget-planner-head,
  .budget-card-head,
  .home-checklist-head {
    flex-direction: column;
  }

  .home-dashboard-head-side {
    width: 100%;
    justify-content: flex-start;
  }

  .home-checklist-grid,
  .budget-layout,
  .budget-entry-sections,
  .budget-summary-grid,
  .watch-library-grid {
    grid-template-columns: 1fr;
  }

  .budget-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .funds-view-btn {
    padding: 14px 15px;
    border-radius: 18px;
  }

  .funds-view-btn-icon {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }

  .home-dashboard-grid,
  .budget-create-grid,
  .budget-entry-grid,
  .budget-summary-metrics {
    grid-template-columns: 1fr;
  }

  .home-checklist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-theme-scene {
    grid-template-columns: 1fr;
  }

  .shop-theme-scene-window {
    min-height: 84px;
  }

  .resentment-day-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .watch-library-item,
  .budget-category-row,
  .budget-upcoming-item,
  .budget-line-item,
  .budget-list-item {
    flex-direction: column;
    align-items: stretch;
  }

  .watch-library-actions,
  .budget-line-actions,
  .budget-summary-actions {
    justify-content: flex-start;
  }
}

.night-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 92px;
  justify-content: center;
}

.night-transition {
  position: fixed;
  inset: 0;
  z-index: 10050;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(95, 122, 255, .22) 0%, rgba(25, 36, 78, .18) 18%, rgba(3, 6, 18, .94) 58%, rgba(1, 2, 8, .99) 100%);
}

.night-transition.is-active {
  opacity: 1;
  visibility: visible;
}

.night-transition-stars,
.night-transition-core,
.night-transition-logo {
  position: absolute;
}

.night-transition-stars {
  inset: -6%;
  opacity: 0;
}

.night-transition-stars-a {
  background-image:
    radial-gradient(circle at 12% 24%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 22% 64%, rgba(154,225,255,.85) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 34% 38%, rgba(255,255,255,.82) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 48% 58%, rgba(187,214,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 59% 20%, rgba(255,255,255,.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 68% 74%, rgba(160,227,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 34%, rgba(255,255,255,.88) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 91% 64%, rgba(169,208,255,.8) 0 2px, transparent 3px);
  animation: nightStarsFloat 2.2s ease forwards, nightStarsTwinkle 1.4s ease-in-out infinite;
}

.night-transition-stars-b {
  background-image:
    radial-gradient(circle at 10% 76%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 18% 46%, rgba(176,225,255,.78) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 30% 14%, rgba(255,255,255,.72) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 82%, rgba(255,255,255,.86) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 55% 34%, rgba(177,216,255,.76) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 56%, rgba(255,255,255,.84) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 85% 16%, rgba(171,240,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 94% 84%, rgba(255,255,255,.92) 0 1.5px, transparent 2.5px);
  animation: nightStarsFloat 2.2s ease forwards .08s, nightStarsTwinkle 1.85s ease-in-out infinite .12s;
}

.night-transition-stars-c {
  background-image:
    radial-gradient(circle at 8% 12%, rgba(200,236,255,.78) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 86%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 41% 28%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 52% 72%, rgba(173,219,255,.72) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 63% 44%, rgba(255,255,255,.84) 0 1px, transparent 2px),
    radial-gradient(circle at 79% 84%, rgba(194,236,255,.68) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 24%, rgba(255,255,255,.76) 0 1px, transparent 2px);
  animation: nightStarsFloat 2.2s ease forwards .16s, nightStarsTwinkle 2.1s ease-in-out infinite .18s;
}

.night-transition-core {
  left: 50%;
  top: 50%;
  width: min(54vw, 520px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.65);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(123, 170, 255, .56) 0%, rgba(91, 120, 238, .34) 28%, rgba(56, 72, 155, .14) 48%, rgba(10, 14, 39, 0) 72%);
  filter: blur(16px);
  opacity: 0;
}

.night-transition-logo {
  left: 50%;
  top: 50%;
  width: min(420px, 58vw);
  max-width: 86vw;
  height: auto;
  transform: translate(-50%, -50%) scale(.72);
  opacity: 0;
  filter: drop-shadow(0 18px 44px rgba(70, 120, 255, .3)) drop-shadow(0 0 42px rgba(99, 182, 255, .22));
}

.night-transition.is-active .night-transition-core {
  animation: nightPulseCore 2.15s ease forwards;
}

.night-transition.is-active .night-transition-logo {
  animation: nightLogoReveal 2.15s cubic-bezier(.2, .8, .2, 1) forwards;
}

@keyframes nightStarsFloat {
  0% {
    opacity: 0;
    transform: scale(1.08);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: .9;
    transform: scale(1);
  }
}

@keyframes nightStarsTwinkle {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

@keyframes nightPulseCore {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.55);
  }
  35% {
    opacity: .95;
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes nightLogoReveal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.03);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.94);
  }
}

body.night-mode {
  color: #e8f1ff;
  background:
    radial-gradient(circle at 14% 12%, rgba(114, 154, 255, .16) 0%, rgba(114, 154, 255, 0) 22%),
    radial-gradient(circle at 82% 16%, rgba(110, 242, 255, .09) 0%, rgba(110, 242, 255, 0) 18%),
    radial-gradient(circle at 50% -10%, rgba(89, 110, 214, .18) 0%, rgba(89, 110, 214, 0) 30%),
    linear-gradient(180deg, #040816 0%, #091224 36%, #050914 100%);
  cursor: url("assets/night-mode/night-mode-cursor.png?v=20260320night2") 4 2, auto;
}

body.night-mode button,
body.night-mode a,
body.night-mode summary,
body.night-mode .tab-link,
body.night-mode .btn,
body.night-mode [role="button"],
body.night-mode select,
body.night-mode .form-select,
body.night-mode .form-check-label,
body.night-mode .user-edit-link {
  cursor: url("assets/night-mode/night-mode-select.png?v=20260320night2") 8 2, pointer;
}

body.night-mode .app-ribbon {
  opacity: 0;
  max-height: 0;
  transform: translateY(-26px) scale(.978);
  filter: blur(10px) saturate(.74);
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -4px;
  border-bottom-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

body.night-mode .app-status-card {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0 !important;
  transform: translateY(-28px) scale(.975);
  filter: blur(12px) saturate(.72);
  overflow: hidden;
  pointer-events: none;
}

body.night-mode .container-fluid {
  padding-top: 1rem !important;
  transition: padding-top .42s cubic-bezier(.22, .61, .36, 1);
}

body.night-mode #watch-page {
  position: relative;
}

body.night-mode .watch-room-card::before,
body.night-mode .watch-room-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: 22px;
}

body.night-mode .watch-room-card::before {
  opacity: .76;
  background-image:
    radial-gradient(circle at 8% 16%, rgba(255,255,255,.82) 0 1px, transparent 2px),
    radial-gradient(circle at 18% 58%, rgba(149, 209, 255, .72) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 27% 33%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 72%, rgba(194, 219, 255, .74) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 57% 26%, rgba(255,255,255,.78) 0 1px, transparent 2px),
    radial-gradient(circle at 69% 61%, rgba(146, 215, 255, .68) 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 82% 21%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 76%, rgba(186, 227, 255, .72) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 12% 84%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 11%, rgba(184, 220, 255, .72) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 36% 54%, rgba(255,255,255,.78) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 18%, rgba(161, 219, 255, .7) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 53% 89%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 47%, rgba(169, 227, 255, .68) 0 1.1px, transparent 2.3px),
    radial-gradient(circle at 74% 74%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 52%, rgba(184, 230, 255, .7) 0 1.3px, transparent 2.6px),
    radial-gradient(circle at 96% 28%, rgba(255,255,255,.74) 0 1px, transparent 2px);
  animation: watchNightStarsDrift 14s linear infinite;
}

body.night-mode .watch-room-card::after {
  opacity: .52;
  background-image:
    radial-gradient(circle at 14% 81%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 18%, rgba(154, 205, 255, .62) 0 1px, transparent 2px),
    radial-gradient(circle at 47% 47%, rgba(255,255,255,.58) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 84%, rgba(178, 214, 255, .62) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 79% 38%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 6% 42%, rgba(255,255,255,.66) 0 1px, transparent 2px),
    radial-gradient(circle at 19% 67%, rgba(162, 212, 255, .58) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.68) 0 1px, transparent 2px),
    radial-gradient(circle at 41% 6%, rgba(164, 222, 255, .56) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 58% 58%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 71% 14%, rgba(170, 221, 255, .58) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 86%, rgba(255,255,255,.68) 0 1px, transparent 2px),
    radial-gradient(circle at 93% 61%, rgba(182, 227, 255, .58) 0 1.1px, transparent 2.2px);
  animation: watchNightStarsDriftAlt 19s linear infinite;
}

body.night-mode .watch-room-card > * {
  position: relative;
  z-index: 1;
}

@keyframes watchNightStarsDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: .48; }
  25% { opacity: .76; }
  50% { transform: translate3d(-12px, 7px, 0) scale(1.015); opacity: .88; }
  75% { opacity: .7; }
  100% { transform: translate3d(-22px, 13px, 0) scale(1); opacity: .5; }
}

@keyframes watchNightStarsDriftAlt {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: .28; }
  35% { opacity: .52; }
  50% { transform: translate3d(10px, -7px, 0) scale(1.012); opacity: .62; }
  80% { opacity: .42; }
  100% { transform: translate3d(16px, -11px, 0) scale(1); opacity: .28; }
}

body.night-mode[data-night-stars-paused="true"] .watch-room-card::before,
body.night-mode[data-night-stars-paused="true"] .watch-room-card::after {
  animation-play-state: paused;
}

body.night-mode[data-night-stars-speed="slow"] .watch-room-card::before {
  animation-duration: 24s;
}

body.night-mode[data-night-stars-speed="slow"] .watch-room-card::after {
  animation-duration: 31s;
}

body.night-mode[data-night-stars-speed="normal"] .watch-room-card::before {
  animation-duration: 14s;
}

body.night-mode[data-night-stars-speed="normal"] .watch-room-card::after {
  animation-duration: 19s;
}

body.night-mode[data-night-stars-speed="fast"] .watch-room-card::before {
  animation-duration: 8s;
}

body.night-mode[data-night-stars-speed="fast"] .watch-room-card::after {
  animation-duration: 12s;
}

body.night-mode .splash-screen {
  background:
    radial-gradient(circle at 50% 25%, rgba(86, 115, 210, .18) 0%, rgba(86, 115, 210, 0) 28%),
    linear-gradient(180deg, #030712 0%, #081225 100%);
}

body.night-mode .splash-card,
body.night-mode .login-card,
body.night-mode .card,
body.night-mode .watch-panel-card,
body.night-mode .watch-stage-card,
body.night-mode .task-weather-card,
body.night-mode .task-snapshot-card,
body.night-mode .task-lane-card,
body.night-mode .task-collapsible-card,
body.night-mode .funds-day-group,
body.night-mode .funds-entry-card,
body.night-mode .ambient-player {
  background:
    linear-gradient(180deg, rgba(15, 24, 47, .96) 0%, rgba(8, 15, 31, .94) 100%) !important;
  border-color: rgba(117, 153, 203, .24) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.night-mode .watch-room-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(91, 134, 255, .08) 0%, rgba(91, 134, 255, 0) 34%),
    linear-gradient(180deg, rgba(8, 14, 30, .98) 0%, rgba(5, 11, 24, .985) 100%) !important;
  border-color: rgba(108, 144, 201, .24) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body.night-mode .watch-stage-card,
body.night-mode .watch-panel-card {
  background:
    linear-gradient(180deg, rgba(15, 24, 47, .76) 0%, rgba(8, 15, 31, .72) 100%) !important;
  backdrop-filter: blur(3px);
}

body.night-mode .watch-player-shell {
  background:
    radial-gradient(circle at top, rgba(111, 144, 255, .28), transparent 52%),
    linear-gradient(180deg, #0a132b 0%, #060d1d 100%);
  border-color: rgba(122, 157, 209, .26);
}

body.night-mode .app-ribbon {
  background:
    linear-gradient(180deg, rgba(16, 28, 62, .98) 0%, rgba(10, 22, 52, .98) 48%, rgba(6, 16, 41, .98) 100%);
  border-bottom-color: rgba(113, 158, 255, .26);
  box-shadow: 0 16px 36px rgba(0,0,0,.34);
}

body.night-mode .tab-link {
  background: linear-gradient(180deg, #2e4d9e 0%, #1b3573 46%, #12255a 100%);
  color: #edf5ff;
  border-color: rgba(140, 181, 255, .32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 24px rgba(0,0,0,.22);
}

body.night-mode .tab-link:hover {
  background: linear-gradient(180deg, #3c60bf 0%, #23428c 46%, #17316f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 14px 28px rgba(0,0,0,.28);
}

body.night-mode .tab-link.active {
  background: linear-gradient(180deg, #f8f9ff 0%, #e8eeff 54%, #cfdfff 100%);
  color: #17336d;
  border-color: rgba(203, 223, 255, .88);
}

body.night-mode .night-mode-toggle {
  border-color: rgba(161, 205, 255, .44);
  background: linear-gradient(180deg, rgba(52, 82, 170, .86) 0%, rgba(24, 42, 96, .92) 100%);
  color: #eef6ff;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

body.night-mode .watch-ghost-btn {
  background: rgba(8, 14, 34, .18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    inset 0 0 24px rgba(var(--ghost-rgb), .08),
    0 0 0 1px rgba(var(--ghost-rgb), .26),
    0 0 24px rgba(var(--ghost-rgb), .26),
    0 12px 28px rgba(0,0,0,.24);
}

body.night-mode .watch-ghost-btn:hover {
  background: rgba(12, 20, 46, .26) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 0 30px rgba(var(--ghost-rgb), .12),
    0 0 0 1px rgba(var(--ghost-rgb), .36),
    0 0 30px rgba(var(--ghost-rgb), .34),
    0 14px 30px rgba(0,0,0,.28);
}

body.night-mode .watch-room-chip,
body.night-mode .watch-room-status {
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(180deg, rgba(18, 33, 74, .92) 0%, rgba(11, 22, 53, .96) 100%) !important;
  border-color: rgba(116, 178, 255, .28) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 0 1px rgba(102, 166, 255, .08),
    0 12px 28px rgba(0,0,0,.16);
}

body.night-mode .watch-room-chip-label {
  color: #8ea9d8 !important;
  text-shadow: 0 0 10px rgba(142, 169, 216, .22);
}

body.night-mode .watch-room-chip-value,
body.night-mode .watch-room-status {
  color: #dff1ff !important;
  text-shadow:
    0 0 10px rgba(112, 212, 255, .16),
    0 0 18px rgba(112, 212, 255, .08);
}

body.night-mode .watch-panel-head h3,
body.night-mode .watch-room-head .section-heading span,
body.night-mode .watch-current-title,
body.night-mode .watch-player-placeholder,
body.night-mode .watch-player-placeholder i {
  text-shadow:
    0 0 12px rgba(118, 223, 255, .12),
    0 0 22px rgba(118, 223, 255, .05);
}

body.night-mode .watch-chat-list,
body.night-mode .watch-queue-list {
  position: relative;
  z-index: 1;
}

body.night-mode .resentment-intro-card,
body.night-mode .resentment-compose-card {
  background:
    linear-gradient(180deg, rgba(16, 26, 52, .94) 0%, rgba(9, 18, 37, .94) 100%) !important;
  border-color: rgba(111, 151, 209, .22) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.night-mode .resentment-intro-chip {
  background: linear-gradient(180deg, rgba(34, 53, 102, .96) 0%, rgba(18, 32, 70, .96) 100%);
  border-color: rgba(121, 165, 228, .28);
  color: #d9ebff;
}

body.night-mode .resentment-intro-copy h4,
body.night-mode .resentment-label {
  color: #eef6ff !important;
}

body.night-mode .resentment-intro-copy p {
  color: #a9c0df !important;
}

body.night-mode .resentment-orbit-core {
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.08) 38%, rgba(95, 155, 255, .12) 100%),
    linear-gradient(180deg, #eef5ff 0%, #cbdfff 100%);
}

body.night-mode .resentment-orbit-ring {
  border-color: rgba(116, 166, 226, .5);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 0 0 8px rgba(77, 120, 191, .12);
}

body.night-mode .night-mode-toggle.is-active {
  background: linear-gradient(180deg, rgba(105, 132, 255, .94) 0%, rgba(62, 88, 205, .95) 100%);
  border-color: rgba(214, 229, 255, .72);
  color: #fff;
}

body.night-mode .ribbon-right .btn-outline-light,
body.night-mode .ribbon-right .btn {
  border-color: rgba(162, 206, 255, .4);
  color: #eef6ff;
}

body.night-mode .section-heading,
body.night-mode h1,
body.night-mode h2,
body.night-mode h3,
body.night-mode h4,
body.night-mode h5,
body.night-mode h6,
body.night-mode .task-greeting,
body.night-mode .weather-main,
body.night-mode .watch-current-title,
body.night-mode .watch-queue-title,
body.night-mode .watch-chat-author {
  color: #eef6ff !important;
}

body.night-mode p,
body.night-mode label,
body.night-mode .small,
body.night-mode .text-secondary,
body.night-mode .task-hero-sub,
body.night-mode .task-project-sub,
body.night-mode .task-lane-sub,
body.night-mode .weather-sub,
body.night-mode .watch-current-meta,
body.night-mode .watch-panel-note,
body.night-mode .watch-queue-meta,
body.night-mode .watch-chat-meta,
body.night-mode .watch-chat-text {
  color: #a9c0df !important;
}

body.night-mode .badge.text-bg-success-subtle,
body.night-mode .task-owner-chip,
body.night-mode .watch-room-chip,
body.night-mode .funds-day-total,
body.night-mode .funds-entry-amount {
  background: linear-gradient(180deg, rgba(27, 47, 96, .94) 0%, rgba(14, 29, 67, .96) 100%) !important;
  border-color: rgba(120, 162, 235, .3) !important;
  color: #dceeff !important;
}

body.night-mode .form-control,
body.night-mode .form-select,
body.night-mode textarea,
body.night-mode input[type="date"],
body.night-mode input[type="search"],
body.night-mode input[type="text"],
body.night-mode input[type="password"],
body.night-mode input[type="number"],
body.night-mode input[type="time"] {
  background: rgba(9, 18, 40, .94);
  border-color: rgba(115, 150, 204, .28);
  color: #edf5ff;
}

body.night-mode .form-control::placeholder,
body.night-mode textarea::placeholder {
  color: rgba(176, 195, 222, .72);
}

body.night-mode .form-control:focus,
body.night-mode .form-select:focus,
body.night-mode textarea:focus {
  background: rgba(11, 21, 46, .98);
  border-color: rgba(118, 179, 255, .58);
  box-shadow: 0 0 0 .25rem rgba(79, 132, 255, .18);
  color: #fff;
}

body.night-mode hr,
body.night-mode .table,
body.night-mode .table > :not(caption) > * > * {
  border-color: rgba(112, 143, 188, .18) !important;
}

body.night-mode .table,
body.night-mode .table th,
body.night-mode .table td {
  color: #e3eeff;
  background: transparent !important;
}

body.night-mode .watch-chat-item.is-self,
body.night-mode .watch-queue-item,
body.night-mode .watch-chat-item,
body.night-mode .quick-note-card,
body.night-mode .achievement-item,
body.night-mode .grateful-item,
body.night-mode .journal-entry-card,
body.night-mode .resent-entry-card {
  background: linear-gradient(180deg, rgba(17, 29, 59, .96) 0%, rgba(10, 19, 39, .96) 100%) !important;
  border-color: rgba(115, 153, 210, .2) !important;
}

body.night-mode .ambient-player-shell {
  bottom: 18px;
}

body.night-mode .ambient-player-glow {
  background: radial-gradient(circle, rgba(87, 129, 255, .2) 0%, rgba(87, 129, 255, 0) 72%);
}

body.night-mode .funds-collapse-icon,
body.night-mode .user-edit-link {
  color: #9fc7ff;
}

body[data-shop-theme="cyberpunk"] {
  position: relative;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 72, 220, .16) 0%, rgba(255, 72, 220, 0) 24%),
    radial-gradient(circle at 85% 12%, rgba(74, 238, 255, .12) 0%, rgba(74, 238, 255, 0) 26%),
    linear-gradient(180deg, #081022 0%, #0a1330 34%, #09111f 100%);
  color: #dff5ff;
  overflow-x: hidden;
}

body[data-shop-theme="cyberpunk"]::before,
body[data-shop-theme="cyberpunk"]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body[data-shop-theme="cyberpunk"]::before {
  z-index: 0;
  opacity: .72;
  background:
    linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 100%),
    repeating-linear-gradient(90deg, rgba(64, 236, 255, .07) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(255, 67, 217, .06) 0 1px, transparent 1px 62px),
    radial-gradient(circle at center, rgba(114, 56, 255, .22) 0%, rgba(114, 56, 255, 0) 58%);
}

body[data-shop-theme="cyberpunk"]::after {
  z-index: 0;
  opacity: .4;
  background:
    linear-gradient(115deg, rgba(255, 68, 221, .0) 0%, rgba(255, 68, 221, .14) 46%, rgba(255, 68, 221, 0) 60%),
    linear-gradient(245deg, rgba(48, 239, 255, .0) 0%, rgba(48, 239, 255, .13) 50%, rgba(48, 239, 255, 0) 64%);
  mix-blend-mode: screen;
}

body[data-shop-theme="cyberpunk"] #app-wrap,
body[data-shop-theme="cyberpunk"] .splash-screen,
body[data-shop-theme="cyberpunk"] #login-wrap {
  position: relative;
  z-index: 1;
}

body[data-shop-theme="cyberpunk"] .app-ribbon {
  position: relative;
  background:
    linear-gradient(180deg, rgba(23, 36, 77, .95) 0%, rgba(15, 22, 54, .96) 54%, rgba(9, 14, 36, .98) 100%);
  border-bottom: 1px solid rgba(55, 229, 255, .48);
  box-shadow:
    inset 0 -1px 0 rgba(255, 75, 225, .26),
    0 0 0 1px rgba(53, 228, 255, .12),
    0 16px 34px rgba(5, 8, 24, .48);
}

body[data-shop-theme="cyberpunk"] .app-ribbon::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(61, 237, 255, .0) 0%, rgba(61, 237, 255, .12) 50%, rgba(61, 237, 255, 0) 100%),
    repeating-linear-gradient(90deg, rgba(255, 70, 228, .08) 0 1px, transparent 1px 120px);
}

body[data-shop-theme="cyberpunk"] .ribbon-logo {
  filter:
    drop-shadow(0 0 10px rgba(255, 85, 230, .35))
    drop-shadow(0 0 14px rgba(53, 232, 255, .28));
}

body[data-shop-theme="cyberpunk"] .tab-link {
  background:
    linear-gradient(180deg, rgba(18, 32, 80, .96) 0%, rgba(12, 20, 58, .98) 100%);
  color: #c8f9ff;
  border-color: rgba(62, 233, 255, .54);
  box-shadow:
    inset 0 1px 0 rgba(133, 218, 255, .18),
    0 0 0 1px rgba(71, 223, 255, .14),
    0 0 18px rgba(33, 220, 255, .15);
}

body[data-shop-theme="cyberpunk"] .tab-link::after {
  background: linear-gradient(90deg, rgba(255, 64, 217, .16) 0%, rgba(69, 237, 255, .95) 50%, rgba(255, 64, 217, .16) 100%);
  opacity: .55;
}

body[data-shop-theme="cyberpunk"] .tab-link:hover {
  background:
    linear-gradient(180deg, rgba(31, 49, 114, .98) 0%, rgba(16, 28, 73, .98) 100%);
  border-color: rgba(255, 84, 229, .72);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(166, 214, 255, .24),
    0 0 0 1px rgba(255, 84, 229, .18),
    0 0 24px rgba(255, 84, 229, .22),
    0 0 32px rgba(36, 230, 255, .14);
}

body[data-shop-theme="cyberpunk"] .tab-link.active {
  background:
    linear-gradient(180deg, rgba(255, 244, 255, .96) 0%, rgba(234, 241, 255, .95) 100%);
  color: #16245b;
  border-color: rgba(116, 245, 255, .84);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 0 0 1px rgba(79, 230, 255, .20),
    0 0 22px rgba(79, 230, 255, .24);
}

body[data-shop-theme="cyberpunk"] .page-view .card,
body[data-shop-theme="cyberpunk"] .card {
  background:
    linear-gradient(180deg, rgba(14, 20, 43, .96) 0%, rgba(10, 15, 34, .97) 100%);
  border-color: rgba(68, 232, 255, .22);
  box-shadow:
    inset 0 1px 0 rgba(142, 199, 255, .08),
    0 0 0 1px rgba(255, 78, 227, .08),
    0 20px 42px rgba(4, 8, 23, .55);
}

body[data-shop-theme="cyberpunk"] .page-view .card .card-body,
body[data-shop-theme="cyberpunk"] .user-status-shell,
body[data-shop-theme="cyberpunk"] .task-lane-card,
body[data-shop-theme="cyberpunk"] .inventory-intro-card,
body[data-shop-theme="cyberpunk"] .recovery-tile,
body[data-shop-theme="cyberpunk"] .shop-item-card,
body[data-shop-theme="cyberpunk"] .shop-section-card,
body[data-shop-theme="cyberpunk"] .shop-hero-card {
  color: #dff5ff;
}

body[data-shop-theme="cyberpunk"] .section-heading,
body[data-shop-theme="cyberpunk"] h1,
body[data-shop-theme="cyberpunk"] h2,
body[data-shop-theme="cyberpunk"] h3,
body[data-shop-theme="cyberpunk"] h4,
body[data-shop-theme="cyberpunk"] h5,
body[data-shop-theme="cyberpunk"] h6 {
  color: #ecf6ff;
  text-shadow: 0 0 14px rgba(68, 223, 255, .12);
}

body[data-shop-theme="cyberpunk"] p,
body[data-shop-theme="cyberpunk"] .small,
body[data-shop-theme="cyberpunk"] .text-secondary,
body[data-shop-theme="cyberpunk"] .task-hero-sub,
body[data-shop-theme="cyberpunk"] .task-project-sub,
body[data-shop-theme="cyberpunk"] .task-lane-sub,
body[data-shop-theme="cyberpunk"] .weather-sub,
body[data-shop-theme="cyberpunk"] .shop-item-sub,
body[data-shop-theme="cyberpunk"] .shop-item-state,
body[data-shop-theme="cyberpunk"] .shop-hero-copy p,
body[data-shop-theme="cyberpunk"] .shop-stat-label {
  color: #97abdc !important;
}

body[data-shop-theme="cyberpunk"] .aero-emoji {
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.55) 24%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, rgba(31, 47, 112, .95) 0%, rgba(17, 26, 68, .98) 100%);
  border-color: rgba(76, 235, 255, .46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 16px rgba(58, 225, 255, .18);
}

body[data-shop-theme="cyberpunk"] .user-pill-chip,
body[data-shop-theme="cyberpunk"] .task-owner-chip,
body[data-shop-theme="cyberpunk"] .watch-room-chip,
body[data-shop-theme="cyberpunk"] .shop-price-chip,
body[data-shop-theme="cyberpunk"] .shop-stat-pill {
  background:
    linear-gradient(180deg, rgba(20, 31, 74, .95) 0%, rgba(12, 20, 48, .97) 100%);
  border-color: rgba(76, 231, 255, .34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 18px rgba(44, 229, 255, .08);
}

body[data-shop-theme="cyberpunk"] .user-avatar,
body[data-shop-theme="cyberpunk"] .profile-avatar-preview {
  border-color: rgba(80, 231, 255, .52);
  box-shadow:
    0 0 0 2px rgba(255, 82, 228, .12),
    0 0 16px rgba(58, 225, 255, .18);
}

body[data-shop-theme="cyberpunk"] .user-edit-link {
  color: #49efff;
}

body[data-shop-theme="cyberpunk"] .task-weather-card,
body[data-shop-theme="cyberpunk"] .user-weather-card {
  background:
    linear-gradient(180deg, rgba(16, 29, 70, .94) 0%, rgba(10, 19, 47, .96) 100%);
  border-color: rgba(84, 235, 255, .34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 20px rgba(51, 225, 255, .10);
}

body[data-shop-theme="cyberpunk"] .weather-icon {
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(29, 47, 105, .98) 0%, rgba(19, 31, 72, .98) 100%);
  color: #4cf1ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 18px rgba(70, 232, 255, .14);
}

body[data-shop-theme="cyberpunk"] .form-control,
body[data-shop-theme="cyberpunk"] .form-select,
body[data-shop-theme="cyberpunk"] textarea,
body[data-shop-theme="cyberpunk"] input[type="date"],
body[data-shop-theme="cyberpunk"] input[type="search"],
body[data-shop-theme="cyberpunk"] input[type="text"],
body[data-shop-theme="cyberpunk"] input[type="password"],
body[data-shop-theme="cyberpunk"] input[type="number"],
body[data-shop-theme="cyberpunk"] input[type="time"] {
  background: rgba(9, 16, 38, .98);
  border-color: rgba(81, 229, 255, .30);
  color: #eef7ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(255, 76, 223, .04);
}

body[data-shop-theme="cyberpunk"] .form-control::placeholder,
body[data-shop-theme="cyberpunk"] textarea::placeholder {
  color: rgba(164, 187, 229, .74);
}

body[data-shop-theme="cyberpunk"] .form-control:focus,
body[data-shop-theme="cyberpunk"] .form-select:focus,
body[data-shop-theme="cyberpunk"] textarea:focus {
  background: rgba(11, 19, 45, 1);
  border-color: rgba(255, 82, 228, .78);
  box-shadow:
    0 0 0 .22rem rgba(255, 82, 228, .15),
    0 0 18px rgba(73, 239, 255, .12);
  color: #fff;
}

body[data-shop-theme="cyberpunk"] #login-btn,
body[data-shop-theme="cyberpunk"] #login-2fa-verify-btn,
body[data-shop-theme="cyberpunk"] #app-wrap .btn:not(.tab-link),
body[data-shop-theme="cyberpunk"] .ambient-toggle-btn {
  border-color: rgba(84, 235, 255, .56) !important;
  background:
    linear-gradient(180deg, rgba(20, 32, 82, .98) 0%, rgba(14, 23, 61, .98) 100%) !important;
  color: #e6fbff !important;
  box-shadow:
    inset 0 1px 0 rgba(157, 212, 255, .12),
    0 0 0 1px rgba(59, 227, 255, .12),
    0 0 18px rgba(59, 227, 255, .18),
    0 0 26px rgba(255, 68, 221, .12);
}

body[data-shop-theme="cyberpunk"] #login-btn:hover:not(:disabled),
body[data-shop-theme="cyberpunk"] #login-2fa-verify-btn:hover:not(:disabled),
body[data-shop-theme="cyberpunk"] #app-wrap .btn:not(.tab-link):hover:not(:disabled),
body[data-shop-theme="cyberpunk"] .ambient-toggle-btn:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(45, 62, 142, .98) 0%, rgba(18, 31, 85, .98) 100%) !important;
  border-color: rgba(255, 82, 228, .74) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(191, 231, 255, .16),
    0 0 0 1px rgba(255, 82, 228, .16),
    0 0 22px rgba(255, 82, 228, .22),
    0 0 34px rgba(59, 227, 255, .18);
}

body[data-shop-theme="cyberpunk"] #login-btn:active,
body[data-shop-theme="cyberpunk"] #login-2fa-verify-btn:active,
body[data-shop-theme="cyberpunk"] #app-wrap .btn:not(.tab-link):active,
body[data-shop-theme="cyberpunk"] .ambient-toggle-btn:active {
  background:
    linear-gradient(180deg, rgba(17, 28, 70, .98) 0%, rgba(10, 18, 47, .98) 100%) !important;
}

body[data-shop-theme="cyberpunk"] .btn-outline-secondary,
body[data-shop-theme="cyberpunk"] .btn-outline-info,
body[data-shop-theme="cyberpunk"] .btn-outline-danger {
  background:
    linear-gradient(180deg, rgba(18, 29, 70, .88) 0%, rgba(12, 18, 44, .92) 100%) !important;
}

body[data-shop-theme="cyberpunk"] .recovery-tile,
body[data-shop-theme="cyberpunk"] .task-lane-card,
body[data-shop-theme="cyberpunk"] .inventory-intro-card,
body[data-shop-theme="cyberpunk"] .shop-item-card,
body[data-shop-theme="cyberpunk"] .shop-section-card,
body[data-shop-theme="cyberpunk"] .shop-hero-card {
  border-color: rgba(65, 233, 255, .24);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(15, 23, 51, .98) 0%, rgba(10, 16, 36, .98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255, 76, 223, .06),
    0 18px 34px rgba(3, 6, 18, .42);
}

body[data-shop-theme="cyberpunk"] .shop-shard-preview {
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-shop-theme="cyberpunk"] .shop-shard-video {
  filter:
    saturate(1.15)
    drop-shadow(0 0 12px rgba(64, 240, 255, .26))
    drop-shadow(0 0 12px rgba(255, 76, 223, .16))
    drop-shadow(0 12px 20px rgba(7, 10, 28, .34));
}

body[data-shop-theme="cyberpunk"] .recovery-tile-title,
body[data-shop-theme="cyberpunk"] .shop-item-title,
body[data-shop-theme="cyberpunk"] .watch-current-title,
body[data-shop-theme="cyberpunk"] .weather-main {
  color: #f5fbff;
}

body[data-shop-theme="cyberpunk"] .recovery-tile-sub,
body[data-shop-theme="cyberpunk"] .recovery-tile-arrow {
  color: #9eb4df;
}

body[data-shop-theme="cyberpunk"] .ambient-player {
  border-color: rgba(73, 231, 255, .38);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at bottom right, rgba(255, 82, 228, .16) 0%, rgba(255, 82, 228, 0) 42%),
    linear-gradient(180deg, rgba(18, 28, 68, .98) 0%, rgba(10, 16, 38, .98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 18px 34px rgba(4, 8, 23, .48),
    0 0 22px rgba(62, 231, 255, .14);
}

body[data-shop-theme="cyberpunk"] .ambient-player-orb {
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.18) 34%, rgba(24, 37, 86, .98) 100%);
  color: #49efff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 10px 22px rgba(255, 74, 223, .12);
}

body[data-shop-theme="cyberpunk"] .shop-swatch {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 0 14px rgba(73, 239, 255, .10);
}

body[data-shop-theme="cyberpunk"] {
  font-family: "Rajdhani", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body[data-shop-theme="cyberpunk"] #app-wrap::before,
body[data-shop-theme="cyberpunk"] #app-wrap::after {
  position: fixed;
  top: 132px;
  bottom: 34px;
  width: 68px;
  pointer-events: none;
  z-index: 0;
  white-space: pre;
  font-family: "Orbitron", "Rajdhani", sans-serif;
  font-size: .86rem;
  letter-spacing: .32em;
  line-height: 1.95;
  text-transform: uppercase;
  opacity: .22;
  mix-blend-mode: screen;
  text-shadow:
    0 0 10px rgba(76, 239, 255, .24),
    0 0 18px rgba(255, 76, 223, .16);
}

body[data-shop-theme="cyberpunk"] #app-wrap::before {
  content: "???\A ??\A ??\A ???\A SKY\A GLASS";
  left: 10px;
  color: #59f4ff;
}

body[data-shop-theme="cyberpunk"] #app-wrap::after {
  content: "??\A ??\A ??\A ???\A DREAM";
  right: 10px;
  color: #ff73ef;
  text-align: right;
}

body[data-shop-theme="cyberpunk"] .section-heading,
body[data-shop-theme="cyberpunk"] .tab-link,
body[data-shop-theme="cyberpunk"] .shop-price-chip,
body[data-shop-theme="cyberpunk"] .task-owner-chip,
body[data-shop-theme="cyberpunk"] .watch-room-chip,
body[data-shop-theme="cyberpunk"] .shop-stat-label,
body[data-shop-theme="cyberpunk"] .shop-stat-value {
  font-family: "Orbitron", "Rajdhani", sans-serif;
}

body[data-shop-theme="cyberpunk"] .app-ribbon::after {
  content: "";
  position: absolute;
  left: -18%;
  right: -18%;
  top: 12px;
  height: 2px;
  pointer-events: none;
  opacity: .8;
  background: linear-gradient(90deg, rgba(255, 76, 223, 0) 0%, rgba(255, 76, 223, .9) 22%, rgba(87, 244, 255, .95) 50%, rgba(255, 76, 223, .9) 78%, rgba(255, 76, 223, 0) 100%);
  filter: blur(.35px);
  animation: cyberRibbonSweep 8s linear infinite;
}

body[data-shop-theme="cyberpunk"] .tabs-scroll {
  gap: 12px;
}

body[data-shop-theme="cyberpunk"] .tab-link {
  min-width: 182px;
  min-height: 56px;
  border-radius: 0;
  letter-spacing: .08em;
  text-transform: uppercase;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

body[data-shop-theme="cyberpunk"] .tab-link::before {
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 28%, rgba(255,255,255,0) 52%),
    linear-gradient(90deg, rgba(255, 76, 223, 0) 0%, rgba(255, 76, 223, .14) 44%, rgba(73, 239, 255, .18) 52%, rgba(255, 76, 223, 0) 100%);
}

body[data-shop-theme="cyberpunk"] .tab-link.active {
  text-shadow:
    0 0 10px rgba(73, 239, 255, .26),
    0 0 20px rgba(255, 88, 234, .12);
}

body[data-shop-theme="cyberpunk"] #login-btn,
body[data-shop-theme="cyberpunk"] #login-2fa-verify-btn,
body[data-shop-theme="cyberpunk"] #app-wrap .btn:not(.tab-link),
body[data-shop-theme="cyberpunk"] .ambient-toggle-btn {
  border-radius: 0 !important;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: "Orbitron", "Rajdhani", sans-serif;
}

body[data-shop-theme="cyberpunk"] #app-wrap .btn:not(.tab-link)::after,
body[data-shop-theme="cyberpunk"] #login-btn::after,
body[data-shop-theme="cyberpunk"] #login-2fa-verify-btn::after,
body[data-shop-theme="cyberpunk"] .ambient-toggle-btn::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  background: linear-gradient(90deg, rgba(73, 239, 255, 0) 0%, rgba(73, 239, 255, .95) 50%, rgba(73, 239, 255, 0) 100%);
  opacity: .8;
  pointer-events: none;
}

body[data-shop-theme="cyberpunk"] .page-view .card .card-body,
body[data-shop-theme="cyberpunk"] .recovery-tile,
body[data-shop-theme="cyberpunk"] .task-lane-card,
body[data-shop-theme="cyberpunk"] .inventory-intro-card,
body[data-shop-theme="cyberpunk"] .shop-item-card,
body[data-shop-theme="cyberpunk"] .shop-section-card,
body[data-shop-theme="cyberpunk"] .shop-hero-card {
  position: relative;
  overflow: hidden;
}

body[data-shop-theme="cyberpunk"] .page-view .card .card-body::before,
body[data-shop-theme="cyberpunk"] .recovery-tile::before,
body[data-shop-theme="cyberpunk"] .task-lane-card::before,
body[data-shop-theme="cyberpunk"] .inventory-intro-card::before,
body[data-shop-theme="cyberpunk"] .shop-item-card::before,
body[data-shop-theme="cyberpunk"] .shop-section-card::before,
body[data-shop-theme="cyberpunk"] .shop-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 76, 223, .0) 0%, rgba(255, 76, 223, .06) 42%, rgba(73, 239, 255, .08) 52%, rgba(255, 76, 223, 0) 100%),
    repeating-linear-gradient(90deg, rgba(73, 239, 255, .0) 0 26px, rgba(73, 239, 255, .05) 26px 27px, rgba(73, 239, 255, 0) 27px 78px);
  opacity: .85;
}

body[data-shop-theme="cyberpunk"] .section-heading .cyber-glitch,
body[data-shop-theme="cyberpunk"] #task-greeting.cyber-glitch,
body[data-shop-theme="cyberpunk"] #shop-balance.cyber-glitch {
  position: relative;
  display: inline-block;
  color: #f9fcff;
  text-shadow:
    0 0 12px rgba(73, 239, 255, .18),
    2px 0 rgba(73, 239, 255, .32),
    -2px 0 rgba(255, 76, 223, .28);
  animation: cyberGlitchBase 3.8s infinite steps(2, end);
}

body[data-shop-theme="cyberpunk"] .section-heading .cyber-glitch::before,
body[data-shop-theme="cyberpunk"] .section-heading .cyber-glitch::after,
body[data-shop-theme="cyberpunk"] #task-greeting.cyber-glitch::before,
body[data-shop-theme="cyberpunk"] #task-greeting.cyber-glitch::after,
body[data-shop-theme="cyberpunk"] #shop-balance.cyber-glitch::before,
body[data-shop-theme="cyberpunk"] #shop-balance.cyber-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body[data-shop-theme="cyberpunk"] .section-heading .cyber-glitch::before,
body[data-shop-theme="cyberpunk"] #task-greeting.cyber-glitch::before,
body[data-shop-theme="cyberpunk"] #shop-balance.cyber-glitch::before {
  color: rgba(73, 239, 255, .85);
  transform: translate(2px, -1px);
  clip-path: polygon(0 0, 100% 0, 100% 42%, 0 48%);
  animation: cyberGlitchShiftA 2.7s infinite steps(2, end);
}

body[data-shop-theme="cyberpunk"] .section-heading .cyber-glitch::after,
body[data-shop-theme="cyberpunk"] #task-greeting.cyber-glitch::after,
body[data-shop-theme="cyberpunk"] #shop-balance.cyber-glitch::after {
  color: rgba(255, 76, 223, .82);
  transform: translate(-2px, 1px);
  clip-path: polygon(0 58%, 100% 52%, 100% 100%, 0 100%);
  animation: cyberGlitchShiftB 3.2s infinite steps(2, end);
}

body[data-shop-theme="cyberpunk"] .shop-page-shell,
body[data-shop-theme="cyberpunk"] .shop-section-card,
body[data-shop-theme="cyberpunk"] .shop-item-card,
body[data-shop-theme="cyberpunk"] .shop-hero-card {
  backdrop-filter: blur(6px);
}

body[data-shop-theme="cyberpunk"] .shop-banner-preview,
body[data-shop-theme="cyberpunk"] .shop-theme-preview {
  background: rgba(9, 15, 35, .72);
  border-color: rgba(67, 233, 255, .22);
}

@keyframes cyberRibbonSweep {
  0% { transform: translateX(-8%); opacity: .2; }
  12% { opacity: .9; }
  50% { transform: translateX(8%); opacity: .62; }
  100% { transform: translateX(18%); opacity: .1; }
}

@keyframes cyberGlitchBase {
  0%, 92%, 100% { transform: translate3d(0, 0, 0); }
  93% { transform: translate3d(1px, 0, 0); }
  95% { transform: translate3d(-1px, 0, 0); }
  97% { transform: translate3d(0, 1px, 0); }
}

@keyframes cyberGlitchShiftA {
  0%, 88%, 100% { transform: translate(2px, -1px); opacity: .85; }
  89% { transform: translate(5px, -2px); opacity: .6; }
  91% { transform: translate(-1px, 1px); opacity: .9; }
}

@keyframes cyberGlitchShiftB {
  0%, 90%, 100% { transform: translate(-2px, 1px); opacity: .82; }
  91% { transform: translate(-5px, 2px); opacity: .55; }
  94% { transform: translate(2px, -1px); opacity: .88; }
}

body[data-shop-theme="cyberpunk"] {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 72, 222, .34) 0%, rgba(255, 72, 222, 0) 23%),
    radial-gradient(circle at 82% 10%, rgba(45, 238, 255, .28) 0%, rgba(45, 238, 255, 0) 25%),
    radial-gradient(circle at 50% 100%, rgba(103, 41, 255, .24) 0%, rgba(103, 41, 255, 0) 34%),
    linear-gradient(180deg, #190229 0%, #110420 30%, #0a1127 66%, #060b16 100%);
}

body[data-shop-theme="cyberpunk"]::before {
  opacity: .96;
  background:
    linear-gradient(rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,.02) 100%),
    repeating-linear-gradient(90deg, rgba(64, 236, 255, .08) 0 1px, transparent 1px 82px),
    repeating-linear-gradient(0deg, rgba(255, 67, 217, .06) 0 1px, transparent 1px 58px),
    linear-gradient(180deg, rgba(15, 24, 58, .05) 0%, rgba(15, 24, 58, .22) 100%);
  animation: cyberGridFloat 16s linear infinite;
}

body[data-shop-theme="cyberpunk"]::after {
  opacity: .58;
  background:
    linear-gradient(120deg, rgba(255, 64, 219, 0) 0%, rgba(255, 64, 219, .22) 36%, rgba(255, 64, 219, 0) 58%),
    linear-gradient(245deg, rgba(48, 239, 255, 0) 0%, rgba(48, 239, 255, .18) 42%, rgba(48, 239, 255, 0) 66%),
    radial-gradient(circle at center, rgba(115, 57, 255, .18) 0%, rgba(115, 57, 255, 0) 48%);
  animation: cyberGlowPulse 5.8s ease-in-out infinite;
}

body[data-shop-theme="cyberpunk"] #app-wrap::before,
body[data-shop-theme="cyberpunk"] #app-wrap::after {
  opacity: .3;
  font-size: .94rem;
  line-height: 2.12;
  animation: cyberKanjiFloat 12s ease-in-out infinite;
}

body[data-shop-theme="cyberpunk"] #app-wrap::before {
  content: "???\A ??\A ??\A ????\A ??\A SKY";
}

body[data-shop-theme="cyberpunk"] #app-wrap::after {
  content: "??\A ??\A ????\A ???\A GLASS";
  animation-delay: -6s;
}

body[data-shop-theme="cyberpunk"] .app-ribbon {
  background:
    linear-gradient(180deg, rgba(34, 16, 72, .98) 0%, rgba(12, 19, 59, .98) 48%, rgba(8, 14, 37, .99) 100%);
  border-bottom-color: rgba(71, 238, 255, .62);
  box-shadow:
    inset 0 -1px 0 rgba(255, 69, 220, .34),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(45, 238, 255, .18),
    0 18px 40px rgba(4, 7, 22, .64);
}

body[data-shop-theme="cyberpunk"] .app-ribbon::before {
  background:
    linear-gradient(90deg, rgba(61, 237, 255, .0) 0%, rgba(61, 237, 255, .14) 50%, rgba(61, 237, 255, 0) 100%),
    repeating-linear-gradient(90deg, rgba(255, 70, 228, .1) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 8px);
}

body[data-shop-theme="cyberpunk"] .ribbon-logo {
  filter:
    saturate(1.18)
    drop-shadow(0 0 12px rgba(255, 85, 230, .42))
    drop-shadow(0 0 18px rgba(53, 232, 255, .34));
}

body[data-shop-theme="cyberpunk"] .tab-link,
body[data-shop-theme="cyberpunk"] .cyber-type {
  font-family: "Orbitron", "Rajdhani", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-shop-theme="cyberpunk"] .tab-link {
  min-width: 188px;
  min-height: 58px;
  background:
    linear-gradient(180deg, rgba(28, 20, 82, .98) 0%, rgba(12, 19, 57, .98) 100%);
  border-color: rgba(71, 238, 255, .64);
  color: #d6fbff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(45, 238, 255, .18),
    0 0 22px rgba(45, 238, 255, .14),
    0 14px 28px rgba(4, 7, 22, .28);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

body[data-shop-theme="cyberpunk"] .tab-link:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(53, 29, 126, .99) 0%, rgba(16, 29, 79, .98) 100%);
  border-color: rgba(255, 82, 228, .84);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(255, 82, 228, .18),
    0 0 26px rgba(255, 82, 228, .24),
    0 0 34px rgba(59, 227, 255, .16);
}

body[data-shop-theme="cyberpunk"] .tab-link.active {
  background:
    linear-gradient(180deg, rgba(249, 241, 255, .98) 0%, rgba(234, 240, 255, .96) 100%);
  color: #190a4b;
  border-color: rgba(99, 245, 255, .92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 0 0 1px rgba(45, 238, 255, .2),
    0 0 28px rgba(45, 238, 255, .24);
}

body[data-shop-theme="cyberpunk"] .page-view > .card,
body[data-shop-theme="cyberpunk"] .page-view .card,
body[data-shop-theme="cyberpunk"] .user-status-shell {
  background:
    linear-gradient(180deg, rgba(15, 23, 51, .96) 0%, rgba(9, 14, 34, .98) 100%);
  border-color: rgba(71, 238, 255, .22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(255, 78, 227, .08),
    0 26px 48px rgba(3, 6, 18, .58);
}

body[data-shop-theme="cyberpunk"] .page-view .card .card-body,
body[data-shop-theme="cyberpunk"] .inventory-intro-card,
body[data-shop-theme="cyberpunk"] .recovery-tile,
body[data-shop-theme="cyberpunk"] .task-lane-card,
body[data-shop-theme="cyberpunk"] .shop-section-card,
body[data-shop-theme="cyberpunk"] .shop-item-card,
body[data-shop-theme="cyberpunk"] .shop-hero-card,
body[data-shop-theme="cyberpunk"] .user-weather-card,
body[data-shop-theme="cyberpunk"] .task-weather-card {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(180deg, rgba(19, 28, 68, .96) 0%, rgba(8, 14, 34, .98) 100%);
  border-color: rgba(71, 238, 255, .26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255, 75, 225, .05),
    0 18px 34px rgba(4, 7, 22, .38),
    0 0 22px rgba(42, 236, 255, .08);
  backdrop-filter: blur(9px) saturate(1.15);
}

body[data-shop-theme="cyberpunk"] .page-view .card .card-body::after,
body[data-shop-theme="cyberpunk"] .inventory-intro-card::after,
body[data-shop-theme="cyberpunk"] .recovery-tile::after,
body[data-shop-theme="cyberpunk"] .task-lane-card::after,
body[data-shop-theme="cyberpunk"] .shop-section-card::after,
body[data-shop-theme="cyberpunk"] .shop-item-card::after,
body[data-shop-theme="cyberpunk"] .shop-hero-card::after {
  content: "???? // SKYGLASS // NEON GRID";
  position: absolute;
  right: 18px;
  top: 16px;
  font-family: "Orbitron", "Rajdhani", sans-serif;
  font-size: .64rem;
  letter-spacing: .22em;
  color: rgba(86, 242, 255, .28);
  pointer-events: none;
}

body[data-shop-theme="cyberpunk"] .section-heading,
body[data-shop-theme="cyberpunk"] h1,
body[data-shop-theme="cyberpunk"] h2,
body[data-shop-theme="cyberpunk"] h3,
body[data-shop-theme="cyberpunk"] h4,
body[data-shop-theme="cyberpunk"] h5,
body[data-shop-theme="cyberpunk"] h6 {
  font-family: "Orbitron", "Rajdhani", sans-serif;
  letter-spacing: .04em;
  color: #f7fbff;
  text-shadow:
    0 0 18px rgba(78, 241, 255, .12),
    0 0 24px rgba(255, 79, 228, .10);
}

body[data-shop-theme="cyberpunk"] .section-heading span:last-child,
body[data-shop-theme="cyberpunk"] #task-greeting,
body[data-shop-theme="cyberpunk"] #shop-balance {
  color: #ffffff !important;
  animation: cyberTitleShutter 5.8s steps(2, end) infinite;
  text-shadow:
    0 0 2px rgba(255,255,255,.98),
    2.5px 0 0 rgba(78, 240, 255, .66),
    -2.5px 0 0 rgba(255, 90, 224, .64),
    0 0 14px rgba(255,255,255,.14) !important;
}

@keyframes cyberTitleShutter {
  0%, 86%, 100% {
    transform: translate3d(0, 0, 0);
    text-shadow:
      0 0 2px rgba(255,255,255,.98),
      2.5px 0 0 rgba(78, 240, 255, .66),
      -2.5px 0 0 rgba(255, 90, 224, .64),
      0 0 14px rgba(255,255,255,.14);
  }
  87% {
    transform: translate3d(-1px, 0, 0);
    text-shadow:
      0 0 2px rgba(255,255,255,.98),
      3.5px 0 0 rgba(78, 240, 255, .76),
      -3.5px 0 0 rgba(255, 90, 224, .74),
      0 0 16px rgba(255,255,255,.16);
  }
  89% {
    transform: translate3d(1px, 0, 0);
    text-shadow:
      0 0 2px rgba(255,255,255,.98),
      1px 0 0 rgba(78, 240, 255, .56),
      -4px 0 0 rgba(255, 90, 224, .76),
      0 0 18px rgba(255,255,255,.18);
  }
  91% {
    transform: translate3d(0, -1px, 0);
    text-shadow:
      0 0 2px rgba(255,255,255,.98),
      4px 0 0 rgba(78, 240, 255, .78),
      -1px 0 0 rgba(255, 90, 224, .54),
      0 0 18px rgba(255,255,255,.18);
  }
  93% {
    transform: translate3d(0, 0, 0);
    text-shadow:
      0 0 2px rgba(255,255,255,.98),
      2.5px 0 0 rgba(78, 240, 255, .66),
      -2.5px 0 0 rgba(255, 90, 224, .64),
      0 0 14px rgba(255,255,255,.14);
  }
}

body[data-shop-theme="cyberpunk"] .section-heading .cyber-glitch,
body[data-shop-theme="cyberpunk"] #task-greeting.cyber-glitch,
body[data-shop-theme="cyberpunk"] #shop-balance.cyber-glitch {
  position: relative;
  display: inline-block;
  isolation: isolate;
  overflow: visible;
  animation: cyberGlitchBase 3.2s infinite steps(2, end);
  letter-spacing: .05em;
  color: #ffffff !important;
  text-shadow:
    0 0 2px rgba(255,255,255,.95),
    4px 0 0 rgba(73, 239, 255, .65),
    -4px 0 0 rgba(255, 76, 223, .62),
    0 0 16px rgba(255,255,255,.16);
}

body[data-shop-theme="cyberpunk"] .section-heading .cyber-glitch::before,
body[data-shop-theme="cyberpunk"] .section-heading .cyber-glitch::after,
body[data-shop-theme="cyberpunk"] #task-greeting.cyber-glitch::before,
body[data-shop-theme="cyberpunk"] #task-greeting.cyber-glitch::after,
body[data-shop-theme="cyberpunk"] #shop-balance.cyber-glitch::before,
body[data-shop-theme="cyberpunk"] #shop-balance.cyber-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  z-index: 2;
  font: inherit;
  letter-spacing: inherit;
}

body[data-shop-theme="cyberpunk"] .section-heading .cyber-glitch::before,
body[data-shop-theme="cyberpunk"] #task-greeting.cyber-glitch::before,
body[data-shop-theme="cyberpunk"] #shop-balance.cyber-glitch::before {
  color: #4ef0ff;
  transform: translate(5px, -1px);
  clip-path: polygon(0 0, 100% 0, 100% 42%, 0 48%);
  animation: cyberGlitchShiftA 2.1s infinite steps(2, end);
  text-shadow: 0 0 6px rgba(78, 240, 255, .45);
}

body[data-shop-theme="cyberpunk"] .section-heading .cyber-glitch::after,
body[data-shop-theme="cyberpunk"] #task-greeting.cyber-glitch::after,
body[data-shop-theme="cyberpunk"] #shop-balance.cyber-glitch::after {
  color: #ff5ae0;
  transform: translate(-5px, 1px);
  clip-path: polygon(0 58%, 100% 52%, 100% 100%, 0 100%);
  animation: cyberGlitchShiftB 2.5s infinite steps(2, end);
  text-shadow: 0 0 6px rgba(255, 90, 224, .42);
}

body[data-shop-theme="cyberpunk"] .task-modal-card {
  background:
    radial-gradient(circle at top right, rgba(255, 86, 231, .10) 0%, rgba(255, 86, 231, 0) 34%),
    radial-gradient(circle at top left, rgba(79, 235, 255, .12) 0%, rgba(79, 235, 255, 0) 34%),
    linear-gradient(180deg, rgba(11, 17, 42, .99) 0%, rgba(7, 12, 31, .99) 100%);
  border-color: rgba(76, 231, 255, .26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 24px 54px rgba(2, 6, 18, .55);
}

body[data-shop-theme="cyberpunk"] .task-modal-head,
body[data-shop-theme="cyberpunk"] .task-modal-actions {
  border-color: rgba(74, 236, 255, .18);
}

body[data-shop-theme="cyberpunk"] .task-modal-sub,
body[data-shop-theme="cyberpunk"] .task-entry-summary,
body[data-shop-theme="cyberpunk"] .task-entry-meta,
body[data-shop-theme="cyberpunk"] .task-entry-nudge,
body[data-shop-theme="cyberpunk"] #task-advanced-status {
  color: #91a7d8 !important;
}

body[data-shop-theme="cyberpunk"] .task-detail-badge {
  background: rgba(20, 31, 74, .95);
  border-color: rgba(76, 231, 255, .28);
  color: #eaf8ff;
}

body[data-shop-theme="cyberpunk"] .task-detail-badge.is-high {
  border-color: rgba(255, 195, 92, .42);
  color: #ffd88a;
}

body[data-shop-theme="cyberpunk"] .task-detail-badge.is-urgent {
  border-color: rgba(255, 98, 170, .42);
  color: #ff9ccd;
}

body[data-shop-theme="cyberpunk"] .task-detail-badge.is-low {
  border-color: rgba(109, 247, 210, .34);
  color: #adffe8;
}

body[data-shop-theme="cyberpunk"] .form-control,
body[data-shop-theme="cyberpunk"] .form-select,
body[data-shop-theme="cyberpunk"] textarea,
body[data-shop-theme="cyberpunk"] input[type="date"],
body[data-shop-theme="cyberpunk"] input[type="search"],
body[data-shop-theme="cyberpunk"] input[type="text"],
body[data-shop-theme="cyberpunk"] input[type="password"],
body[data-shop-theme="cyberpunk"] input[type="number"],
body[data-shop-theme="cyberpunk"] input[type="time"] {
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(10, 15, 37, .98) 0%, rgba(9, 13, 30, .99) 100%);
  border-color: rgba(74, 236, 255, .34);
  color: #eff8ff;
}

body[data-shop-theme="cyberpunk"] .form-control:focus,
body[data-shop-theme="cyberpunk"] .form-select:focus,
body[data-shop-theme="cyberpunk"] textarea:focus {
  border-color: rgba(255, 82, 228, .84);
  box-shadow:
    0 0 0 .24rem rgba(255, 82, 228, .14),
    0 0 24px rgba(73, 239, 255, .10);
}

body[data-shop-theme="cyberpunk"] #login-btn,
body[data-shop-theme="cyberpunk"] #login-2fa-verify-btn,
body[data-shop-theme="cyberpunk"] #app-wrap .btn:not(.tab-link),
body[data-shop-theme="cyberpunk"] .ambient-toggle-btn {
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  border-color: rgba(74, 236, 255, .7) !important;
  background:
    linear-gradient(180deg, rgba(24, 33, 84, .98) 0%, rgba(11, 17, 47, .99) 100%) !important;
  color: #ebfbff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(74, 236, 255, .14),
    0 0 18px rgba(74, 236, 255, .16),
    0 0 26px rgba(255, 74, 223, .12);
}

body[data-shop-theme="cyberpunk"] #login-btn::before,
body[data-shop-theme="cyberpunk"] #login-2fa-verify-btn::before,
body[data-shop-theme="cyberpunk"] #app-wrap .btn:not(.tab-link)::before,
body[data-shop-theme="cyberpunk"] .ambient-toggle-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 26%, rgba(255,255,255,0) 44%),
    linear-gradient(90deg, rgba(255, 76, 223, 0) 0%, rgba(255, 76, 223, .10) 46%, rgba(73, 239, 255, .16) 56%, rgba(255, 76, 223, 0) 100%);
  pointer-events: none;
}

body[data-shop-theme="cyberpunk"] #login-btn:hover:not(:disabled),
body[data-shop-theme="cyberpunk"] #login-2fa-verify-btn:hover:not(:disabled),
body[data-shop-theme="cyberpunk"] #app-wrap .btn:not(.tab-link):hover:not(:disabled),
body[data-shop-theme="cyberpunk"] .ambient-toggle-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(55, 35, 144, .99) 0%, rgba(18, 30, 86, .99) 100%) !important;
  border-color: rgba(255, 82, 228, .86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(255, 82, 228, .2),
    0 0 26px rgba(255, 82, 228, .24),
    0 0 34px rgba(74, 236, 255, .18);
}

body[data-shop-theme="cyberpunk"] .user-pill-chip,
body[data-shop-theme="cyberpunk"] .task-owner-chip,
body[data-shop-theme="cyberpunk"] .watch-room-chip,
body[data-shop-theme="cyberpunk"] .shop-price-chip,
body[data-shop-theme="cyberpunk"] .shop-stat-pill {
  font-family: "Orbitron", "Rajdhani", sans-serif;
  color: #ecfbff;
  background:
    linear-gradient(180deg, rgba(27, 33, 86, .98) 0%, rgba(10, 18, 49, .99) 100%);
  border-color: rgba(73, 239, 255, .46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 18px rgba(73, 239, 255, .1);
}

body[data-shop-theme="cyberpunk"] .user-pill-chip.has-name-banner,
body[data-shop-theme="cyberpunk"] #user-pill.user-pill-chip.has-name-banner {
  border: 0 !important;
  background-color: transparent !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: none !important;
}

body[data-shop-theme="cyberpunk"] .user-pill-chip.has-name-banner .user-pill-text,
body[data-shop-theme="cyberpunk"] #user-pill.user-pill-chip.has-name-banner .user-pill-text {
  color: #eff8ff !important;
  text-shadow:
    0 1px 2px rgba(8, 15, 44, .82),
    0 0 10px rgba(84, 235, 255, .24),
    0 0 18px rgba(255, 82, 228, .16);
}

body[data-shop-theme="cyberpunk"] .shop-theme-preview,
body[data-shop-theme="cyberpunk"] .shop-banner-preview {
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 75, 225, .16) 0%, rgba(255, 75, 225, 0) 34%),
    linear-gradient(180deg, rgba(15, 23, 52, .94) 0%, rgba(9, 15, 33, .98) 100%);
  border-color: rgba(72, 238, 255, .28);
}

body[data-shop-theme="cyberpunk"] .watch-room-card,
body[data-shop-theme="cyberpunk"] .watch-stage-card,
body[data-shop-theme="cyberpunk"] .watch-panel-card {
  background:
    radial-gradient(circle at top right, rgba(255, 86, 231, .08) 0%, rgba(255, 86, 231, 0) 36%),
    radial-gradient(circle at top left, rgba(79, 235, 255, .10) 0%, rgba(79, 235, 255, 0) 34%),
    linear-gradient(180deg, rgba(12, 18, 43, .98) 0%, rgba(8, 13, 33, .99) 100%) !important;
  border-color: rgba(72, 238, 255, .26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255, 80, 226, .06),
    0 18px 34px rgba(2, 6, 18, .48) !important;
}

body[data-shop-theme="cyberpunk"] .watch-player-shell {
  background:
    radial-gradient(circle at top, rgba(88, 243, 255, .14) 0%, rgba(88, 243, 255, 0) 52%),
    linear-gradient(180deg, rgba(14, 28, 64, .98) 0%, rgba(7, 15, 38, 1) 100%) !important;
  border-color: rgba(72, 238, 255, .28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 24px rgba(73, 239, 255, .08) !important;
}

body[data-shop-theme="cyberpunk"] .watch-panel-note,
body[data-shop-theme="cyberpunk"] .watch-room-status,
body[data-shop-theme="cyberpunk"] .watch-queue-meta,
body[data-shop-theme="cyberpunk"] .watch-chat-meta,
body[data-shop-theme="cyberpunk"] .watch-chat-text {
  color: #8ea6d8 !important;
}

body[data-shop-theme="cyberpunk"] .watch-queue-empty,
body[data-shop-theme="cyberpunk"] .watch-chat-empty {
  background: rgba(11, 20, 47, .9) !important;
  border-color: rgba(78, 231, 255, .22) !important;
  color: #87a1d4 !important;
}

body[data-shop-theme="cyberpunk"] .watch-queue-item,
body[data-shop-theme="cyberpunk"] .watch-chat-item {
  background:
    linear-gradient(180deg, rgba(14, 24, 55, .95) 0%, rgba(9, 16, 39, .98) 100%) !important;
  border-color: rgba(72, 238, 255, .18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(255, 84, 229, .04) !important;
}

body[data-shop-theme="cyberpunk"] .watch-chat-item.is-self {
  background:
    linear-gradient(180deg, rgba(23, 29, 76, .98) 0%, rgba(12, 19, 49, .99) 100%) !important;
  border-color: rgba(255, 84, 229, .24) !important;
}

body[data-shop-theme="cyberpunk"] .watch-queue-title,
body[data-shop-theme="cyberpunk"] .watch-chat-author,
body[data-shop-theme="cyberpunk"] #watch-page .watch-panel-head h3 {
  color: #eff8ff !important;
}

body[data-shop-theme="cyberpunk"] .shop-theme-preview::before {
  content: "?? // ??? // MODE";
  position: absolute;
  left: 16px;
  top: 14px;
  font-family: "Orbitron", "Rajdhani", sans-serif;
  font-size: .62rem;
  letter-spacing: .2em;
  color: rgba(255, 86, 231, .58);
}

body[data-shop-theme="cyberpunk"] .shop-item-card.is-equipped {
  border-color: rgba(255, 82, 228, .56);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(255, 82, 228, .12),
    0 0 28px rgba(255, 82, 228, .14),
    0 22px 34px rgba(4, 7, 22, .42);
}

body[data-shop-theme="cyberpunk"] .shop-balance-line {
  font-family: "Orbitron", "Rajdhani", sans-serif;
  letter-spacing: .04em;
}

body[data-shop-theme="cyberpunk"] .weather-main,
body[data-shop-theme="cyberpunk"] .shop-item-title,
body[data-shop-theme="cyberpunk"] .recovery-tile-title {
  font-family: "Orbitron", "Rajdhani", sans-serif;
}

body[data-shop-theme="cyberpunk"] .ambient-player {
  backdrop-filter: blur(12px) saturate(1.18);
}

@keyframes cyberGridFloat {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 24px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes cyberGlowPulse {
  0%, 100% { opacity: .46; transform: scale(1); }
  50% { opacity: .72; transform: scale(1.04); }
}

@keyframes cyberKanjiFloat {
  0%, 100% { transform: translateY(0); opacity: .22; }
  50% { transform: translateY(20px); opacity: .36; }
}

body[data-shop-theme="cyberpunk"] .shop-shard-video {
  mix-blend-mode: multiply;
  background: transparent !important;
  filter:
    saturate(1.18)
    contrast(1.08)
    drop-shadow(0 0 14px rgba(64, 240, 255, .24))
    drop-shadow(0 0 14px rgba(255, 76, 223, .16));
}

body[data-shop-theme="cyberpunk"] .shop-shard-preview {
  width: 96px;
  height: 96px;
  flex-basis: 96px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-shop-theme="cyberpunk"] .tabs-scroll {
  gap: 10px;
}

body[data-shop-theme="cyberpunk"] .tab-link {
  min-width: 152px;
  min-height: 52px;
  padding-inline: 20px;
}

body[data-shop-theme="cyberpunk"] .ribbon-right .btn,
body[data-shop-theme="cyberpunk"] #app-refresh-btn,
body[data-shop-theme="cyberpunk"] #logout-btn {
  min-height: 44px;
  padding-inline: 16px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

body[data-shop-theme="cyberpunk"] .aero-emoji {
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.34) 22%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, rgba(36, 18, 98, .98) 0%, rgba(13, 18, 54, .98) 100%);
  border-color: rgba(100, 244, 255, .78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(255, 78, 227, .12),
    0 0 20px rgba(58, 225, 255, .24),
    0 0 28px rgba(255, 78, 227, .14);
}

body[data-shop-theme="cyberpunk"] .aero-emoji i {
  font-size: 1.18rem;
  text-shadow:
    0 0 10px currentColor,
    0 0 16px rgba(255,255,255,.16);
}

body[data-shop-theme="cyberpunk"] .shop-hero-chip,
body[data-shop-theme="cyberpunk"] .inventory-intro-pill,
body[data-shop-theme="cyberpunk"] .shop-price-chip,
body[data-shop-theme="cyberpunk"] .funds-day-total {
  background:
    linear-gradient(180deg, rgba(29, 33, 86, .98) 0%, rgba(12, 17, 47, .99) 100%) !important;
  border-color: rgba(92, 244, 255, .44) !important;
  color: #eefcff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(255, 77, 228, .08),
    0 0 18px rgba(92, 244, 255, .08);
}

body[data-shop-theme="cyberpunk"] .shop-theme-bonus {
  border-color: rgba(82, 238, 255, .24);
  background:
    linear-gradient(180deg, rgba(11, 17, 41, .96) 0%, rgba(8, 13, 31, .98) 100%);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255, 76, 223, .05),
    0 12px 22px rgba(4, 7, 22, .24);
}

body[data-shop-theme="cyberpunk"] .shop-theme-bonus-label,
body[data-shop-theme="cyberpunk"] .shop-theme-bonus-title {
  font-family: "Orbitron", "Rajdhani", sans-serif;
  text-transform: uppercase;
}

body[data-shop-theme="cyberpunk"] .shop-theme-bonus-label {
  color: #72f0ff;
}

body[data-shop-theme="cyberpunk"] .shop-theme-bonus-title {
  color: #f3fcff;
  letter-spacing: .05em;
}

body[data-shop-theme="cyberpunk"] .shop-theme-bonus-sub {
  color: #9bb3dc;
}

body[data-shop-theme="cyberpunk"] .theme-transition {
  background:
    radial-gradient(circle at center, rgba(41, 12, 78, .58) 0%, rgba(9, 14, 33, .92) 68%),
    rgba(2, 6, 18, .92);
  backdrop-filter: blur(8px);
}

body[data-shop-theme="cyberpunk"] .theme-transition-video {
  box-shadow:
    0 0 0 1px rgba(110, 238, 255, .22),
    0 24px 64px rgba(0, 0, 0, .58),
    0 0 46px rgba(255, 76, 223, .24),
    0 0 34px rgba(95, 244, 255, .14);
}

body[data-shop-theme="cyberpunk"] .shop-section-card,
body[data-shop-theme="cyberpunk"] .shop-item-card,
body[data-shop-theme="cyberpunk"] .shop-hero-card,
body[data-shop-theme="cyberpunk"] .funds-day-group,
body[data-shop-theme="cyberpunk"] .funds-entry-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(13, 20, 48, .98) 0%, rgba(8, 13, 31, .98) 100%) !important;
  border-color: rgba(82, 238, 255, .26) !important;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255, 76, 223, .05),
    0 16px 26px rgba(4, 7, 22, .34) !important;
}

body[data-shop-theme="cyberpunk"] .shop-section-card::after,
body[data-shop-theme="cyberpunk"] .shop-item-card::after,
body[data-shop-theme="cyberpunk"] .shop-hero-card::after,
body[data-shop-theme="cyberpunk"] .funds-day-group::after,
body[data-shop-theme="cyberpunk"] .funds-entry-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 76, 223, 0) 0%, rgba(255, 76, 223, .05) 44%, rgba(73, 239, 255, .07) 56%, rgba(255, 76, 223, 0) 100%),
    repeating-linear-gradient(90deg, rgba(73, 239, 255, 0) 0 30px, rgba(73, 239, 255, .04) 30px 31px, rgba(73, 239, 255, 0) 31px 92px);
}

body[data-shop-theme="cyberpunk"] .shop-theme-preview,
body[data-shop-theme="cyberpunk"] .shop-banner-preview {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7, 12, 29, .96) 0%, rgba(7, 11, 24, .99) 100%) !important;
  border-color: rgba(67, 233, 255, .30) !important;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

body[data-shop-theme="cyberpunk"] .shop-theme-preview::before,
body[data-shop-theme="cyberpunk"] .shop-banner-preview::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(95, 244, 255, .14);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  pointer-events: none;
}

body[data-shop-theme="cyberpunk"] .funds-day-title,
body[data-shop-theme="cyberpunk"] .funds-entry-title {
  font-family: "Orbitron", "Rajdhani", sans-serif;
  color: #eefcff;
  letter-spacing: .04em;
}

body[data-shop-theme="cyberpunk"] .funds-day-meta,
body[data-shop-theme="cyberpunk"] .funds-entry-meta,
body[data-shop-theme="cyberpunk"] .funds-entry-comment {
  color: #9bb3dc;
}

body[data-shop-theme="cyberpunk"] .funds-day-total.is-spent,
body[data-shop-theme="cyberpunk"] .funds-entry-amount.is-spent {
  color: #ff8b86 !important;
}

body[data-shop-theme="cyberpunk"] .funds-collapse-icon {
  color: #6cefff;
  text-shadow: 0 0 12px rgba(108, 239, 255, .22);
}

body[data-shop-theme="cyberpunk"] .ambient-player {
  border-color: rgba(78, 241, 255, .46);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(145deg, rgba(29, 18, 82, .98) 0%, rgba(12, 18, 48, .98) 56%, rgba(7, 11, 28, .99) 100%) !important;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255, 76, 223, .08),
    0 22px 42px rgba(4, 7, 22, .52),
    0 0 28px rgba(78, 241, 255, .14) !important;
}

body[data-shop-theme="cyberpunk"] .ambient-player::before {
  background:
    linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 18%, rgba(255,255,255,0) 38%),
    linear-gradient(90deg, rgba(255, 76, 223, 0) 0%, rgba(255, 76, 223, .10) 46%, rgba(73, 239, 255, .16) 58%, rgba(255, 76, 223, 0) 100%);
}

body[data-shop-theme="cyberpunk"] .ambient-player-title,
body[data-shop-theme="cyberpunk"] .ambient-field label,
body[data-shop-theme="cyberpunk"] .ambient-volume-copy {
  font-family: "Orbitron", "Rajdhani", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #eefcff;
}

body[data-shop-theme="cyberpunk"] .ambient-player-meta {
  color: #9cb3dd;
}

body[data-shop-theme="cyberpunk"] .ambient-player-orb {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 0 0 1px rgba(95, 244, 255, .12),
    0 12px 22px rgba(255, 74, 223, .16);
}

body[data-shop-theme="cyberpunk"] #ambient-track,
body[data-shop-theme="cyberpunk"] #ambient-volume {
  accent-color: #35e6ff;
}

body[data-shop-theme="cyberpunk"] .app-ribbon {
  grid-template-columns: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

body[data-shop-theme="cyberpunk"] .ribbon-center {
  min-width: 0;
  overflow: hidden;
}

body[data-shop-theme="cyberpunk"] .tabs-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 10px;
}

body[data-shop-theme="cyberpunk"] .tab-link {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  padding-inline: 18px;
  font-size: 1rem;
}

body[data-shop-theme="cyberpunk"] .ribbon-right {
  position: relative;
  z-index: 3;
  margin-left: 4px;
  padding-left: 6px;
  background: linear-gradient(90deg, rgba(8, 13, 34, 0) 0%, rgba(8, 13, 34, .72) 24%, rgba(8, 13, 34, .96) 100%);
}

@media (max-width: 991.98px) {
  body[data-shop-theme="cyberpunk"] .app-ribbon {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "logo";
    max-height: none;
    overflow: visible;
    padding: 10px 12px 14px;
  }

  body[data-shop-theme="cyberpunk"] .ribbon-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
  }

  body[data-shop-theme="cyberpunk"] .ribbon-center,
  body[data-shop-theme="cyberpunk"] .ribbon-right {
    display: none !important;
  }

  body[data-shop-theme="cyberpunk"] .mobile-ribbon-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }

  body[data-shop-theme="cyberpunk"] .ribbon-logo {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 991.98px) {
  .night-mode-toggle span {
    display: none;
  }

  .night-mode-toggle {
    min-width: 44px;
    padding-inline: 10px;
  }

  .night-transition-logo {
    width: min(320px, 74vw);
  }

  .shop-hero-card {
    grid-template-columns: 1fr;
  }

  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-balance-row {
    align-items: flex-start;
  }

  .shop-shard-preview {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
  }

  .inventory-reward-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
  }

  .inventory-reward-meta {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
    padding-left: 64px;
  }

  .watch-queue-item {
    flex-direction: column;
  }

  .watch-queue-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .task-modal-dialog {
    padding: 16px;
  }

  .task-modal-head,
  .task-modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .task-modal-buttons {
    width: 100%;
    justify-content: stretch;
  }

  .task-modal-buttons .btn {
    flex: 1 1 0;
  }

  .funds-section-head,
  .funds-day-group summary {
    align-items: flex-start;
  }

  .funds-day-total {
    min-width: 0;
  }

  .watch-room-chip,
  .watch-room-status {
    width: 100%;
    justify-content: space-between;
  }
}

body:not([data-shop-theme="glassmorphism"]) .theme-workspace-shell {
  width: min(1880px, calc(100% - 28px));
  margin: 0 auto 24px;
}

body:not([data-shop-theme="glassmorphism"]) .glass-main-shell.content-wrapper {
  min-width: 0;
  padding: 16px 16px 24px;
}

body:not([data-shop-theme="glassmorphism"]) .glass-main-shell.content-wrapper > .card,
body:not([data-shop-theme="glassmorphism"]) .glass-main-shell.content-wrapper > .page-view > .card,
body:not([data-shop-theme="glassmorphism"]) .glass-main-shell.content-wrapper > .page-view > .classic-home-shell > .card {
  margin-left: 0;
  margin-right: 0;
}

/* Final glassmorphism shell override */
body[data-shop-theme="glassmorphism"] {
  --glass-text: #f6f8ff !important;
  --glass-sub: rgba(220, 228, 255, .72) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(66, 146, 255, .92) 0%, rgba(66, 146, 255, 0) 24%),
    radial-gradient(circle at 86% 84%, rgba(202, 94, 255, .78) 0%, rgba(202, 94, 255, 0) 18%),
    linear-gradient(135deg, #438cf6 0%, #2b2671 32%, #251e59 58%, #7b234d 82%, #cc3144 100%) !important;
  color: #f6f8ff !important;
}

body[data-shop-theme="glassmorphism"] .app-ribbon {
  width: min(1248px, calc(100% - 44px)) !important;
  margin: 26px auto 0 !important;
  padding: 0 22px !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(240px, .52fr) auto !important;
  min-height: 72px !important;
  border-radius: 26px 26px 0 0 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  background: rgba(22, 24, 48, .72) !important;
  box-shadow:
    0 24px 56px rgba(4, 8, 24, .28),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
}

body[data-shop-theme="glassmorphism"] .app-ribbon::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,.05) 52%, transparent 64%) !important;
  transform: translateX(-120%);
  transition: transform .78s ease;
}

body[data-shop-theme="glassmorphism"] .app-ribbon:hover::before {
  transform: translateX(120%);
}

body[data-shop-theme="glassmorphism"] .app-ribbon::after,
body[data-shop-theme="glassmorphism"] .ribbon-aero-layer,
body[data-shop-theme="glassmorphism"] .page-view::before,
body[data-shop-theme="glassmorphism"] .page-view::after {
  content: none !important;
  display: none !important;
}

body[data-shop-theme="glassmorphism"] .glass-window-dots {
  display: inline-flex !important;
}

body[data-shop-theme="glassmorphism"] .ribbon-logo {
  display: none !important;
}

body[data-shop-theme="glassmorphism"] .tabs-scroll {
  justify-content: center !important;
  gap: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-shop-theme="glassmorphism"] .tab-link {
  min-width: 0 !important;
  height: 72px !important;
  padding: 0 26px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(228, 231, 255, .58) !important;
  box-shadow: none !important;
}

body[data-shop-theme="glassmorphism"] .tab-link::before,
body[data-shop-theme="glassmorphism"] .tab-link::after,
body[data-shop-theme="glassmorphism"] .tab-link-icon {
  display: none !important;
}

body[data-shop-theme="glassmorphism"] .tab-link:hover,
body[data-shop-theme="glassmorphism"] .tab-link:focus-visible,
body[data-shop-theme="glassmorphism"] .tab-link.active {
  color: #ffffff !important;
}

body[data-shop-theme="glassmorphism"] .tab-link.active {
  border-bottom-color: rgba(255,255,255,.92) !important;
}

body[data-shop-theme="glassmorphism"] .ribbon-search-shell {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(8, 10, 24, .58) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
}

body[data-shop-theme="glassmorphism"] #ribbon-search-input {
  background: transparent !important;
  border: 0 !important;
  color: #f7f8ff !important;
}

body[data-shop-theme="glassmorphism"] .theme-workspace-shell {
  width: min(1248px, calc(100% - 44px)) !important;
  margin: 0 auto 26px !important;
  padding: 0 !important;
}

body[data-shop-theme="glassmorphism"] .glass-workspace-shell {
  display: grid !important;
  grid-template-columns: 238px minmax(0, 1fr) !important;
  min-height: min(840px, calc(100vh - 140px));
  background: rgba(16, 18, 32, .58) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-top: 0 !important;
  border-radius: 0 0 26px 26px !important;
  overflow: hidden !important;
  box-shadow:
    0 30px 70px rgba(4, 8, 24, .34),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

body[data-shop-theme="glassmorphism"] .glass-side-panel {
  display: block !important;
  padding: 28px 18px 28px 24px !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  background: linear-gradient(180deg, rgba(35, 77, 130, .42) 0%, rgba(30, 21, 55, .34) 48%, rgba(66, 18, 32, .32) 100%) !important;
}

body[data-shop-theme="glassmorphism"] .glass-side-link {
  background: transparent !important;
  color: #eff3ff !important;
  border-radius: 12px !important;
}

body[data-shop-theme="glassmorphism"] .glass-side-link:hover,
body[data-shop-theme="glassmorphism"] .glass-side-link:focus-visible {
  background: rgba(255,255,255,.08) !important;
}

body[data-shop-theme="glassmorphism"] .glass-side-link.active {
  background: rgba(78, 154, 255, .16) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

body[data-shop-theme="glassmorphism"] .glass-main-shell {
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(180deg, rgba(50, 64, 115, .20) 0%, rgba(23, 18, 38, .06) 100%) !important;
}

body[data-shop-theme="glassmorphism"] .app-status-card {
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-shop-theme="glassmorphism"] .task-userbar-shell {
  padding: 18px 26px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.03) !important;
}

body[data-shop-theme="glassmorphism"] .page-view {
  overflow: auto !important;
  padding: 22px 24px 30px !important;
}

body[data-shop-theme="glassmorphism"] .card,
body[data-shop-theme="glassmorphism"] .card > .card-body,
body[data-shop-theme="glassmorphism"] .user-status-shell,
body[data-shop-theme="glassmorphism"] .task-weather-card,
body[data-shop-theme="glassmorphism"] .task-snapshot-card,
body[data-shop-theme="glassmorphism"] .task-snapshot-progress,
body[data-shop-theme="glassmorphism"] .home-dashboard-card,
body[data-shop-theme="glassmorphism"] .task-lane-card,
body[data-shop-theme="glassmorphism"] .task-entry-card,
body[data-shop-theme="glassmorphism"] .task-collapsible-card,
body[data-shop-theme="glassmorphism"] .task-project-card,
body[data-shop-theme="glassmorphism"] .task-empty,
body[data-shop-theme="glassmorphism"] #task-alerts .alert,
body[data-shop-theme="glassmorphism"] .quick-note-card,
body[data-shop-theme="glassmorphism"] .inventory-intro-card,
body[data-shop-theme="glassmorphism"] .inventory-reward-card,
body[data-shop-theme="glassmorphism"] .journal-entry-card,
body[data-shop-theme="glassmorphism"] .grateful-item,
body[data-shop-theme="glassmorphism"] .achievement-item,
body[data-shop-theme="glassmorphism"] .resent-entry-card,
body[data-shop-theme="glassmorphism"] .resentment-intro-card,
body[data-shop-theme="glassmorphism"] .resentment-compose-card,
body[data-shop-theme="glassmorphism"] .recovery-tile,
body[data-shop-theme="glassmorphism"] .shop-hero-card,
body[data-shop-theme="glassmorphism"] .shop-section-card,
body[data-shop-theme="glassmorphism"] .shop-item-card,
body[data-shop-theme="glassmorphism"] .shop-banner-preview,
body[data-shop-theme="glassmorphism"] .shop-emoji-preview,
body[data-shop-theme="glassmorphism"] .shop-theme-bonus,
body[data-shop-theme="glassmorphism"] .shop-theme-detail,
body[data-shop-theme="glassmorphism"] .messenger-page-shell,
body[data-shop-theme="glassmorphism"] .messenger-item,
body[data-shop-theme="glassmorphism"] .watch-stage-card,
body[data-shop-theme="glassmorphism"] .watch-panel-card,
body[data-shop-theme="glassmorphism"] .watch-player-shell,
body[data-shop-theme="glassmorphism"] .watch-video-shell,
body[data-shop-theme="glassmorphism"] .watch-queue-item,
body[data-shop-theme="glassmorphism"] .watch-chat-item,
body[data-shop-theme="glassmorphism"] .watch-queue-empty,
body[data-shop-theme="glassmorphism"] .watch-chat-empty,
body[data-shop-theme="glassmorphism"] .funds-day-card,
body[data-shop-theme="glassmorphism"] .funds-entry-card,
body[data-shop-theme="glassmorphism"] .budget-summary-panel,
body[data-shop-theme="glassmorphism"] .budget-category-row,
body[data-shop-theme="glassmorphism"] .budget-upcoming-item,
body[data-shop-theme="glassmorphism"] .budget-line-item,
body[data-shop-theme="glassmorphism"] .task-modal-card,
body[data-shop-theme="glassmorphism"] .profile-security-card,
body[data-shop-theme="glassmorphism"] .profile-password-card,
body[data-shop-theme="glassmorphism"] .trusted-browser-card,
body[data-shop-theme="glassmorphism"] .security-device-card {
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 24px 56px rgba(4, 8, 24, .22),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  color: #f6f8ff !important;
}

/* Noctra classic override */
body:not([data-shop-theme]),
body[data-shop-theme="classic"] {
  --noctra-bg-top: #eef1ff;
  --noctra-bg-mid: #dde5fb;
  --noctra-bg-bot: #ced8f6;
  --noctra-panel: rgba(255, 255, 255, .72);
  --noctra-panel-strong: rgba(255, 255, 255, .84);
  --noctra-border: rgba(165, 179, 230, .34);
  --noctra-shadow: 0 18px 42px rgba(79, 87, 151, .12);
  --noctra-text: #24325f;
  --noctra-sub: #60739a;
  --noctra-accent: #7465f6;
  --noctra-accent-2: #ff7f9f;
  --noctra-accent-3: #7bc8ff;
  background:
    radial-gradient(circle at 12% 18%, rgba(121, 196, 255, .28) 0%, rgba(121, 196, 255, 0) 24%),
    radial-gradient(circle at 84% 14%, rgba(161, 131, 255, .24) 0%, rgba(161, 131, 255, 0) 22%),
    radial-gradient(circle at 78% 78%, rgba(255, 136, 170, .20) 0%, rgba(255, 136, 170, 0) 20%),
    linear-gradient(180deg, var(--noctra-bg-top) 0%, var(--noctra-bg-mid) 48%, var(--noctra-bg-bot) 100%) !important;
  color: var(--noctra-text) !important;
}

body:not([data-shop-theme]) #app-wrap,
body[data-shop-theme="classic"] #app-wrap {
  position: relative;
  min-height: 100vh;
}

body:not([data-shop-theme]) #app-wrap::before,
body:not([data-shop-theme]) #app-wrap::after,
body[data-shop-theme="classic"] #app-wrap::before,
body[data-shop-theme="classic"] #app-wrap::after {
  content: "";
  position: fixed;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(30px);
  opacity: .68;
  z-index: 0;
}

body:not([data-shop-theme]) #app-wrap::before,
body[data-shop-theme="classic"] #app-wrap::before {
  width: 380px;
  height: 380px;
  left: -120px;
  top: 90px;
  background: linear-gradient(135deg, rgba(121, 196, 255, .64) 0%, rgba(122, 101, 246, .42) 100%);
}

body:not([data-shop-theme]) #app-wrap::after,
body[data-shop-theme="classic"] #app-wrap::after {
  width: 420px;
  height: 420px;
  right: -140px;
  bottom: 40px;
  background: linear-gradient(135deg, rgba(255, 133, 168, .54) 0%, rgba(126, 121, 255, .34) 100%);
}

body:not([data-shop-theme]) .app-ribbon,
body[data-shop-theme="classic"] .app-ribbon {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 24%),
    radial-gradient(circle at 84% 18%, rgba(255, 140, 176, .12) 0%, rgba(255, 140, 176, 0) 24%),
    linear-gradient(135deg, rgba(255,255,255,.68) 0%, rgba(242, 237, 255, .62) 38%, rgba(228, 235, 255, .58) 100%) !important;
  border: 1px solid rgba(182, 193, 236, .58) !important;
  border-bottom-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 18px 42px rgba(84, 90, 151, .12) !important;
  backdrop-filter: blur(26px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.08) !important;
}

body:not([data-shop-theme]) .app-ribbon::before,
body[data-shop-theme="classic"] .app-ribbon::before {
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.26) 40%, rgba(255,255,255,.06) 58%, rgba(255,255,255,0) 72%) !important;
}

body:not([data-shop-theme]) .ribbon-logo,
body[data-shop-theme="classic"] .ribbon-logo {
  filter: drop-shadow(0 14px 24px rgba(111, 94, 225, .24)) !important;
}

body:not([data-shop-theme]) .tab-link,
body[data-shop-theme="classic"] .tab-link {
  background:
    linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(245,243,255,.44) 42%, rgba(232, 236, 252, .38) 100%) !important;
  border: 1px solid rgba(192, 201, 239, .78) !important;
  color: #3f4f7d !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 22px rgba(106, 111, 170, .10) !important;
}

body:not([data-shop-theme]) .tab-link:hover,
body:not([data-shop-theme]) .tab-link:focus-visible,
body[data-shop-theme="classic"] .tab-link:hover,
body[data-shop-theme="classic"] .tab-link:focus-visible {
  transform: translateY(-2px);
  color: #2f2f77 !important;
  border-color: rgba(174, 166, 244, .86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 14px 28px rgba(101, 104, 175, .14) !important;
}

body:not([data-shop-theme]) .tab-link.active,
body[data-shop-theme="classic"] .tab-link.active {
  background:
    linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(245, 240, 255, .9) 52%, rgba(234, 228, 252, .84) 100%) !important;
  color: #4b42a1 !important;
  border-color: rgba(179, 167, 247, .92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 16px 30px rgba(108, 100, 188, .14) !important;
}

body:not([data-shop-theme]) .tab-link.active::after,
body[data-shop-theme="classic"] .tab-link.active::after {
  background: linear-gradient(90deg, rgba(255, 129, 161, .18) 0%, rgba(118, 101, 246, .96) 50%, rgba(123, 200, 255, .18) 100%) !important;
}

body:not([data-shop-theme]) .app-ribbon .ribbon-right .btn,
body:not([data-shop-theme]) .btn-info,
body[data-shop-theme="classic"] .app-ribbon .ribbon-right .btn,
body[data-shop-theme="classic"] .btn-info {
  border-color: rgba(132, 120, 241, .86) !important;
  background: linear-gradient(135deg, #6d61f5 0%, #8864f5 38%, #ff7f9f 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 12px 26px rgba(109, 97, 188, .26) !important;
}

body:not([data-shop-theme]) .app-ribbon .ribbon-right .btn:hover,
body:not([data-shop-theme]) .app-ribbon .ribbon-right .btn:focus-visible,
body:not([data-shop-theme]) .btn-info:hover,
body:not([data-shop-theme]) .btn-info:focus-visible,
body[data-shop-theme="classic"] .app-ribbon .ribbon-right .btn:hover,
body[data-shop-theme="classic"] .app-ribbon .ribbon-right .btn:focus-visible,
body[data-shop-theme="classic"] .btn-info:hover,
body[data-shop-theme="classic"] .btn-info:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 14px 28px rgba(109, 97, 188, .30) !important;
}

body:not([data-shop-theme]) .page-view,
body[data-shop-theme="classic"] .page-view {
  position: relative;
  z-index: 1;
}

body:not([data-shop-theme]) .card,
body[data-shop-theme="classic"] .card {
  border: 1px solid var(--noctra-border) !important;
  background: transparent !important;
  border-radius: 26px !important;
  box-shadow: var(--noctra-shadow) !important;
}

body:not([data-shop-theme]) .card > .card-body,
body:not([data-shop-theme]) .user-status-shell,
body:not([data-shop-theme]) .task-weather-card,
body:not([data-shop-theme]) .task-snapshot-card,
body:not([data-shop-theme]) .task-snapshot-progress,
body:not([data-shop-theme]) .home-dashboard-card,
body:not([data-shop-theme]) .task-lane-card,
body:not([data-shop-theme]) .task-entry-card,
body:not([data-shop-theme]) .task-collapsible-card,
body:not([data-shop-theme]) .task-project-card,
body:not([data-shop-theme]) .task-empty,
body:not([data-shop-theme]) #task-alerts .alert,
body:not([data-shop-theme]) .quick-note-card,
body:not([data-shop-theme]) .inventory-intro-card,
body:not([data-shop-theme]) .inventory-reward-card,
body:not([data-shop-theme]) .journal-entry-card,
body:not([data-shop-theme]) .grateful-item,
body:not([data-shop-theme]) .achievement-item,
body:not([data-shop-theme]) .resent-entry-card,
body:not([data-shop-theme]) .resentment-intro-card,
body:not([data-shop-theme]) .resentment-compose-card,
body:not([data-shop-theme]) .recovery-tile,
body:not([data-shop-theme]) .shop-hero-card,
body:not([data-shop-theme]) .shop-section-card,
body:not([data-shop-theme]) .shop-item-card,
body:not([data-shop-theme]) .shop-banner-preview,
body:not([data-shop-theme]) .shop-emoji-preview,
body:not([data-shop-theme]) .shop-emoji-preview-tile,
body:not([data-shop-theme]) .shop-theme-bonus,
body:not([data-shop-theme]) .shop-theme-detail,
body:not([data-shop-theme]) .messenger-page-shell,
body:not([data-shop-theme]) .messenger-item,
body:not([data-shop-theme]) .watch-stage-card,
body:not([data-shop-theme]) .watch-panel-card,
body:not([data-shop-theme]) .watch-player-shell,
body:not([data-shop-theme]) .watch-video-shell,
body:not([data-shop-theme]) .watch-queue-item,
body:not([data-shop-theme]) .watch-chat-item,
body:not([data-shop-theme]) .watch-queue-empty,
body:not([data-shop-theme]) .watch-chat-empty,
body:not([data-shop-theme]) .funds-day-card,
body:not([data-shop-theme]) .funds-entry-card,
body:not([data-shop-theme]) .budget-summary-panel,
body:not([data-shop-theme]) .budget-category-row,
body:not([data-shop-theme]) .budget-upcoming-item,
body:not([data-shop-theme]) .budget-line-item,
body:not([data-shop-theme]) .task-modal-card,
body:not([data-shop-theme]) .profile-security-card,
body:not([data-shop-theme]) .profile-password-card,
body:not([data-shop-theme]) .trusted-browser-card,
body:not([data-shop-theme]) .security-device-card,
body[data-shop-theme="classic"] .card > .card-body,
body[data-shop-theme="classic"] .user-status-shell,
body[data-shop-theme="classic"] .task-weather-card,
body[data-shop-theme="classic"] .task-snapshot-card,
body[data-shop-theme="classic"] .task-snapshot-progress,
body[data-shop-theme="classic"] .home-dashboard-card,
body[data-shop-theme="classic"] .task-lane-card,
body[data-shop-theme="classic"] .task-entry-card,
body[data-shop-theme="classic"] .task-collapsible-card,
body[data-shop-theme="classic"] .task-project-card,
body[data-shop-theme="classic"] .task-empty,
body[data-shop-theme="classic"] #task-alerts .alert,
body[data-shop-theme="classic"] .quick-note-card,
body[data-shop-theme="classic"] .inventory-intro-card,
body[data-shop-theme="classic"] .inventory-reward-card,
body[data-shop-theme="classic"] .journal-entry-card,
body[data-shop-theme="classic"] .grateful-item,
body[data-shop-theme="classic"] .achievement-item,
body[data-shop-theme="classic"] .resent-entry-card,
body[data-shop-theme="classic"] .resentment-intro-card,
body[data-shop-theme="classic"] .resentment-compose-card,
body[data-shop-theme="classic"] .recovery-tile,
body[data-shop-theme="classic"] .shop-hero-card,
body[data-shop-theme="classic"] .shop-section-card,
body[data-shop-theme="classic"] .shop-item-card,
body[data-shop-theme="classic"] .shop-banner-preview,
body[data-shop-theme="classic"] .shop-emoji-preview,
body[data-shop-theme="classic"] .shop-emoji-preview-tile,
body[data-shop-theme="classic"] .shop-theme-bonus,
body[data-shop-theme="classic"] .shop-theme-detail,
body[data-shop-theme="classic"] .messenger-page-shell,
body[data-shop-theme="classic"] .messenger-item,
body[data-shop-theme="classic"] .watch-stage-card,
body[data-shop-theme="classic"] .watch-panel-card,
body[data-shop-theme="classic"] .watch-player-shell,
body[data-shop-theme="classic"] .watch-video-shell,
body[data-shop-theme="classic"] .watch-queue-item,
body[data-shop-theme="classic"] .watch-chat-item,
body[data-shop-theme="classic"] .watch-queue-empty,
body[data-shop-theme="classic"] .watch-chat-empty,
body[data-shop-theme="classic"] .funds-day-card,
body[data-shop-theme="classic"] .funds-entry-card,
body[data-shop-theme="classic"] .budget-summary-panel,
body[data-shop-theme="classic"] .budget-category-row,
body[data-shop-theme="classic"] .budget-upcoming-item,
body[data-shop-theme="classic"] .budget-line-item,
body[data-shop-theme="classic"] .task-modal-card,
body[data-shop-theme="classic"] .profile-security-card,
body[data-shop-theme="classic"] .profile-password-card,
body[data-shop-theme="classic"] .trusted-browser-card,
body[data-shop-theme="classic"] .security-device-card {
  background:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.34) 20%, rgba(255,255,255,0) 42%),
    linear-gradient(145deg, rgba(255,255,255,.78) 0%, rgba(245,243,255,.66) 48%, rgba(232,237,251,.62) 100%) !important;
  border: 1px solid var(--noctra-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 16px 36px rgba(86, 94, 159, .12) !important;
  color: var(--noctra-text) !important;
  backdrop-filter: blur(18px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.04) !important;
}

body:not([data-shop-theme]) .section-heading,
body:not([data-shop-theme]) h1,
body:not([data-shop-theme]) h2,
body:not([data-shop-theme]) h3,
body:not([data-shop-theme]) h4,
body:not([data-shop-theme]) .weather-main,
body:not([data-shop-theme]) .userbar-rotator,
body:not([data-shop-theme]) .userbar-next-copy,
body[data-shop-theme="classic"] .section-heading,
body[data-shop-theme="classic"] h1,
body[data-shop-theme="classic"] h2,
body[data-shop-theme="classic"] h3,
body[data-shop-theme="classic"] h4,
body[data-shop-theme="classic"] .weather-main,
body[data-shop-theme="classic"] .userbar-rotator,
body[data-shop-theme="classic"] .userbar-next-copy {
  color: var(--noctra-text) !important;
}

body:not([data-shop-theme]) p,
body:not([data-shop-theme]) .text-secondary,
body:not([data-shop-theme]) .task-project-sub,
body:not([data-shop-theme]) .task-lane-sub,
body:not([data-shop-theme]) .shop-item-sub,
body:not([data-shop-theme]) .shop-item-state,
body:not([data-shop-theme]) .weather-sub,
body:not([data-shop-theme]) .home-dashboard-sub,
body[data-shop-theme="classic"] p,
body[data-shop-theme="classic"] .text-secondary,
body[data-shop-theme="classic"] .task-project-sub,
body[data-shop-theme="classic"] .task-lane-sub,
body[data-shop-theme="classic"] .shop-item-sub,
body[data-shop-theme="classic"] .shop-item-state,
body[data-shop-theme="classic"] .weather-sub,
body[data-shop-theme="classic"] .home-dashboard-sub {
  color: var(--noctra-sub) !important;
}

body:not([data-shop-theme]) .task-userbar-shell,
body[data-shop-theme="classic"] .task-userbar-shell {
  padding: 20px 24px !important;
}

body:not([data-shop-theme]) #user-pill,
body[data-shop-theme="classic"] #user-pill {
  background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(241,240,255,.84) 100%) !important;
  border: 1px solid rgba(184, 191, 234, .78) !important;
  color: #244d7a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body:not([data-shop-theme]) .user-settings-btn,
body[data-shop-theme="classic"] .user-settings-btn {
  border-color: rgba(186, 194, 236, .78) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(241,244,255,.8) 100%) !important;
  color: #55639a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body:not([data-shop-theme]) .task-weather-card,
body[data-shop-theme="classic"] .task-weather-card {
  background:
    radial-gradient(circle at 16% 20%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.34) 20%, rgba(255,255,255,0) 40%),
    linear-gradient(145deg, rgba(255,255,255,.78) 0%, rgba(238,243,255,.68) 54%, rgba(225,236,252,.62) 100%) !important;
}

body:not([data-shop-theme]) .task-snapshot-card,
body:not([data-shop-theme]) .task-snapshot-progress,
body:not([data-shop-theme]) .home-dashboard-card,
body[data-shop-theme="classic"] .task-snapshot-card,
body[data-shop-theme="classic"] .task-snapshot-progress,
body[data-shop-theme="classic"] .home-dashboard-card {
  border-radius: 24px !important;
}

body:not([data-shop-theme]) .task-snapshot-eta,
body:not([data-shop-theme]) .task-snapshot-metric,
body:not([data-shop-theme]) .task-snapshot-action,
body[data-shop-theme="classic"] .task-snapshot-eta,
body[data-shop-theme="classic"] .task-snapshot-metric,
body[data-shop-theme="classic"] .task-snapshot-action {
  background: linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(240,244,255,.72) 100%) !important;
  border: 1px solid rgba(193, 201, 237, .82) !important;
  color: #47608b !important;
}

body:not([data-shop-theme]) .form-control,
body:not([data-shop-theme]) .form-select,
body:not([data-shop-theme]) textarea,
body:not([data-shop-theme]) input[type="date"],
body:not([data-shop-theme]) input[type="time"],
body:not([data-shop-theme]) input[type="number"],
body:not([data-shop-theme]) input[type="search"],
body:not([data-shop-theme]) input[type="text"],
body:not([data-shop-theme]) input[type="password"],
body[data-shop-theme="classic"] .form-control,
body[data-shop-theme="classic"] .form-select,
body[data-shop-theme="classic"] textarea,
body[data-shop-theme="classic"] input[type="date"],
body[data-shop-theme="classic"] input[type="time"],
body[data-shop-theme="classic"] input[type="number"],
body[data-shop-theme="classic"] input[type="search"],
body[data-shop-theme="classic"] input[type="text"],
body[data-shop-theme="classic"] input[type="password"] {
  border: 1px solid rgba(188, 197, 234, .88) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(245,246,255,.82) 100%) !important;
  color: var(--noctra-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 4px 12px rgba(107, 112, 178, .06) !important;
}

body:not([data-shop-theme]) .form-control:focus,
body:not([data-shop-theme]) .form-select:focus,
body:not([data-shop-theme]) textarea:focus,
body[data-shop-theme="classic"] .form-control:focus,
body[data-shop-theme="classic"] .form-select:focus,
body[data-shop-theme="classic"] textarea:focus {
  border-color: rgba(132, 120, 241, .86) !important;
  box-shadow:
    0 0 0 .2rem rgba(116, 101, 246, .14),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

body:not([data-shop-theme]) .funds-view-btn,
body[data-shop-theme="classic"] .funds-view-btn {
  border-color: rgba(191, 198, 233, .86) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.76) 0%, rgba(244,245,255,.68) 100%) !important;
  color: var(--noctra-text) !important;
}

body:not([data-shop-theme]) .funds-view-btn.is-active,
body[data-shop-theme="classic"] .funds-view-btn.is-active {
  border-color: rgba(151, 133, 245, .82) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.84) 0%, rgba(245,239,255,.8) 52%, rgba(233,236,252,.78) 100%) !important;
  box-shadow: 0 12px 24px rgba(104, 104, 182, .14) !important;
}

body:not([data-shop-theme]) .funds-view-btn-icon,
body[data-shop-theme="classic"] .funds-view-btn-icon {
  background: linear-gradient(135deg, rgba(116,101,246,.12) 0%, rgba(255,127,159,.10) 100%) !important;
  color: #6b5ef2 !important;
  border-color: rgba(169, 168, 236, .52) !important;
}

body:not([data-shop-theme]) .funds-day-group summary,
body:not([data-shop-theme]) .task-owner-chip,
body:not([data-shop-theme]) .task-stat-chip,
body:not([data-shop-theme]) .online-status-chip,
body:not([data-shop-theme]) .watch-room-chip,
body:not([data-shop-theme]) .shop-stat-pill,
body:not([data-shop-theme]) .shop-price-chip,
body:not([data-shop-theme]) .shop-hero-chip,
body[data-shop-theme="classic"] .funds-day-group summary,
body[data-shop-theme="classic"] .task-owner-chip,
body[data-shop-theme="classic"] .task-stat-chip,
body[data-shop-theme="classic"] .online-status-chip,
body[data-shop-theme="classic"] .watch-room-chip,
body[data-shop-theme="classic"] .shop-stat-pill,
body[data-shop-theme="classic"] .shop-price-chip,
body[data-shop-theme="classic"] .shop-hero-chip {
  background: linear-gradient(135deg, rgba(255,255,255,.86) 0%, rgba(243,245,255,.78) 100%) !important;
  border-color: rgba(190, 198, 233, .82) !important;
  color: #4b608e !important;
}

body:not([data-shop-theme]) .ambient-player,
body[data-shop-theme="classic"] .ambient-player {
  background:
    radial-gradient(circle at 14% 14%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.40) 22%, rgba(255,255,255,0) 42%),
    linear-gradient(145deg, rgba(255,255,255,.82) 0%, rgba(244,241,255,.74) 52%, rgba(228,235,251,.70) 100%) !important;
  border: 1px solid rgba(189, 198, 234, .72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 18px 36px rgba(92, 99, 168, .14) !important;
}

body[data-shop-theme="glassmorphism"] p,
body[data-shop-theme="glassmorphism"] .text-secondary,
body[data-shop-theme="glassmorphism"] .task-project-sub,
body[data-shop-theme="glassmorphism"] .task-lane-sub,
body[data-shop-theme="glassmorphism"] .shop-item-sub,
body[data-shop-theme="glassmorphism"] .shop-item-state,
body[data-shop-theme="glassmorphism"] .weather-sub,
body[data-shop-theme="glassmorphism"] .home-dashboard-sub {
  color: rgba(220, 228, 255, .72) !important;
}

body[data-shop-theme="glassmorphism"] .section-heading,
body[data-shop-theme="glassmorphism"] h1,
body[data-shop-theme="glassmorphism"] h2,
body[data-shop-theme="glassmorphism"] h3,
body[data-shop-theme="glassmorphism"] h4,
body[data-shop-theme="glassmorphism"] .weather-main,
body[data-shop-theme="glassmorphism"] .userbar-rotator,
body[data-shop-theme="glassmorphism"] .userbar-next-copy {
  color: #f6f8ff !important;
}

@media (max-width: 991.98px) {
  body[data-shop-theme="glassmorphism"] .app-ribbon,
  body[data-shop-theme="glassmorphism"] .theme-workspace-shell {
    width: calc(100% - 24px) !important;
  }

  body[data-shop-theme="glassmorphism"] .glass-workspace-shell {
    grid-template-columns: 1fr !important;
  }

  body[data-shop-theme="glassmorphism"] .glass-side-panel,
  body[data-shop-theme="glassmorphism"] .ribbon-search-shell {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  body[data-shop-theme="glassmorphism"] .app-ribbon {
    top: 10px !important;
    min-height: 64px !important;
    padding: 0 14px !important;
    border-radius: 18px !important;
  }

  body[data-shop-theme="glassmorphism"] .glass-window-dots {
    display: none !important;
  }
}

.glass-window-dots,
.ribbon-search-shell,
.glass-side-panel {
  display: none;
}

.glass-main-shell {
  min-width: 0;
}

body[data-shop-theme="glassmorphism"] {
  --glass-text: #f6f8ff;
  --glass-sub: rgba(220, 228, 255, .72);
  --glass-border: rgba(255, 255, 255, .12);
  --glass-panel: rgba(16, 18, 32, .52);
  --glass-panel-strong: rgba(28, 31, 53, .68);
  --glass-panel-soft: rgba(255, 255, 255, .06);
  --glass-shadow:
    0 24px 56px rgba(4, 8, 24, .34),
    inset 0 1px 0 rgba(255,255,255,.16);
  font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--glass-text);
  background:
    radial-gradient(circle at 12% 18%, rgba(66, 146, 255, .92) 0%, rgba(66, 146, 255, 0) 24%),
    radial-gradient(circle at 86% 84%, rgba(202, 94, 255, .78) 0%, rgba(202, 94, 255, 0) 18%),
    linear-gradient(135deg, #438cf6 0%, #2b2671 32%, #251e59 58%, #7b234d 82%, #cc3144 100%);
  background-attachment: fixed;
}

body[data-shop-theme="glassmorphism"] #app-wrap {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding-bottom: 28px;
}

body[data-shop-theme="glassmorphism"] #app-wrap::before,
body[data-shop-theme="glassmorphism"] #app-wrap::after {
  content: "";
  position: fixed;
  inset: auto;
  border-radius: 999px;
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
  opacity: .9;
}

body[data-shop-theme="glassmorphism"] #app-wrap::before {
  width: 360px;
  height: 360px;
  left: -110px;
  top: 92px;
  background: linear-gradient(135deg, rgba(71, 170, 255, .88) 0%, rgba(96, 103, 255, .82) 58%, rgba(255,255,255,.24) 100%);
}

body[data-shop-theme="glassmorphism"] #app-wrap::after {
  width: 420px;
  height: 420px;
  right: -150px;
  bottom: 54px;
  background: linear-gradient(135deg, rgba(255, 89, 130, .88) 0%, rgba(239, 71, 111, .68) 46%, rgba(200, 84, 255, .58) 100%);
}

body[data-shop-theme="glassmorphism"] .app-ribbon {
  position: sticky;
  top: 18px;
  z-index: 130;
  width: min(1248px, calc(100% - 44px));
  margin: 26px auto 0;
  padding: 0 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(240px, .52fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  border: 1px solid rgba(255,255,255,.12);
  border-bottom-color: rgba(255,255,255,.08);
  border-radius: 26px 26px 0 0;
  background: rgba(22, 24, 48, .72) !important;
  box-shadow:
    0 24px 56px rgba(4, 8, 24, .28),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  overflow: hidden;
}

body[data-shop-theme="glassmorphism"] .app-ribbon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,.05) 52%, transparent 64%);
  transform: translateX(-120%);
  transition: transform .78s ease;
  pointer-events: none;
}

body[data-shop-theme="glassmorphism"] .app-ribbon:hover::before {
  transform: translateX(120%);
}

body[data-shop-theme="glassmorphism"] .app-ribbon::after,
body[data-shop-theme="glassmorphism"] .ribbon-aero-layer {
  display: none !important;
}

body[data-shop-theme="glassmorphism"] .ribbon-left,
body[data-shop-theme="glassmorphism"] .ribbon-center,
body[data-shop-theme="glassmorphism"] .ribbon-right,
body[data-shop-theme="glassmorphism"] .ribbon-search-shell {
  position: relative;
  z-index: 1;
}

body[data-shop-theme="glassmorphism"] .ribbon-left {
  gap: 16px;
}

body[data-shop-theme="glassmorphism"] .glass-window-dots {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 2px;
}

body[data-shop-theme="glassmorphism"] .glass-window-dots span {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}

body[data-shop-theme="glassmorphism"] .glass-window-dots span:nth-child(1) {
  background: #ff5f57;
}

body[data-shop-theme="glassmorphism"] .glass-window-dots span:nth-child(2) {
  background: #febc2e;
}

body[data-shop-theme="glassmorphism"] .glass-window-dots span:nth-child(3) {
  background: #28c840;
}

body[data-shop-theme="glassmorphism"] .ribbon-logo {
  display: none;
}

body[data-shop-theme="glassmorphism"] .tabs-scroll {
  justify-content: center;
  gap: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

body[data-shop-theme="glassmorphism"] .tab-link {
  min-width: 0;
  height: 72px;
  padding: 0 26px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent !important;
  color: rgba(228, 231, 255, .58);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 15px;
  font-weight: 500;
}

body[data-shop-theme="glassmorphism"] .tab-link::before,
body[data-shop-theme="glassmorphism"] .tab-link::after {
  display: none;
}

body[data-shop-theme="glassmorphism"] .tab-link-icon {
  display: none;
}

body[data-shop-theme="glassmorphism"] .tab-link:hover,
body[data-shop-theme="glassmorphism"] .tab-link:focus-visible {
  transform: none;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(255,255,255,.18);
}

body[data-shop-theme="glassmorphism"] .tab-link.active {
  color: #ffffff;
  border-bottom-color: rgba(255,255,255,.92);
}

body[data-shop-theme="glassmorphism"] .ribbon-search-shell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(8, 10, 24, .58);
  border: 1px solid rgba(255,255,255,.05);
}

body[data-shop-theme="glassmorphism"] .ribbon-search-shell i {
  color: rgba(196, 202, 235, .7);
  font-size: .92rem;
}

body[data-shop-theme="glassmorphism"] #ribbon-search-input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f7f8ff;
  font-size: .95rem;
}

body[data-shop-theme="glassmorphism"] #ribbon-search-input::placeholder {
  color: rgba(196, 202, 235, .58);
}

body[data-shop-theme="glassmorphism"] .ribbon-right {
  gap: 10px;
}

body[data-shop-theme="glassmorphism"] .app-ribbon .ribbon-right .btn {
  min-height: 36px;
  padding-inline: 14px;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  color: #f4f7ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
}

body[data-shop-theme="glassmorphism"] .app-ribbon .ribbon-right .btn:hover,
body[data-shop-theme="glassmorphism"] .app-ribbon .ribbon-right .btn:focus-visible {
  transform: translateY(-1px);
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

body[data-shop-theme="glassmorphism"] .theme-workspace-shell {
  position: relative;
  z-index: 1;
  width: min(1248px, calc(100% - 44px));
  margin: 0 auto 26px;
  padding: 0 !important;
}

body[data-shop-theme="glassmorphism"] .glass-workspace-shell {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  min-height: min(840px, calc(100vh - 140px));
  background: rgba(16, 18, 32, .58);
  border: 1px solid rgba(255,255,255,.12);
  border-top: 0;
  border-radius: 0 0 26px 26px;
  overflow: hidden;
  box-shadow:
    0 30px 70px rgba(4, 8, 24, .34),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

body[data-shop-theme="glassmorphism"] .glass-side-panel {
  display: block;
  padding: 28px 18px 28px 24px;
  border-right: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(35, 77, 130, .42) 0%, rgba(30, 21, 55, .34) 48%, rgba(66, 18, 32, .32) 100%);
  overflow: auto;
}

body[data-shop-theme="glassmorphism"] .glass-side-group + .glass-side-group {
  margin-top: 26px;
}

body[data-shop-theme="glassmorphism"] .glass-side-title {
  margin-bottom: 12px;
  color: rgba(185, 193, 232, .48);
  font-size: .82rem;
  font-weight: 600;
}

body[data-shop-theme="glassmorphism"] .glass-side-menu {
  display: grid;
  gap: 8px;
}

body[data-shop-theme="glassmorphism"] .glass-side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #eff3ff;
  text-align: left;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}

body[data-shop-theme="glassmorphism"] .glass-side-link:hover,
body[data-shop-theme="glassmorphism"] .glass-side-link:focus-visible {
  background: rgba(255,255,255,.08);
  color: #ffffff;
}

body[data-shop-theme="glassmorphism"] .glass-side-link.active {
  background: rgba(78, 154, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

body[data-shop-theme="glassmorphism"] .glass-side-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  color: rgba(255,255,255,.82);
  font-size: 1rem;
}

body[data-shop-theme="glassmorphism"] .glass-side-link-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body[data-shop-theme="glassmorphism"] .glass-side-link-title {
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
}

body[data-shop-theme="glassmorphism"] .glass-side-link-sub {
  color: rgba(214, 221, 252, .46);
  font-size: .8rem;
  line-height: 1.35;
}

body[data-shop-theme="glassmorphism"] .glass-main-shell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(50, 64, 115, .20) 0%, rgba(23, 18, 38, .06) 100%);
}

body[data-shop-theme="glassmorphism"] .app-status-card {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-shop-theme="glassmorphism"] .task-userbar-shell {
  padding: 18px 26px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 0 !important;
  background: rgba(255,255,255,.03) !important;
}

body[data-shop-theme="glassmorphism"] .user-avatar {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255,255,255,.28);
}

body[data-shop-theme="glassmorphism"] #user-pill {
  background: rgba(255,255,255,.14) !important;
  color: #f5f7ff !important;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
}

body[data-shop-theme="glassmorphism"] .user-settings-btn {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.12);
  color: #f4f7ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-shop-theme="glassmorphism"] .userbar-rotator,
body[data-shop-theme="glassmorphism"] .userbar-next-copy,
body[data-shop-theme="glassmorphism"] .weather-main,
body[data-shop-theme="glassmorphism"] .section-heading,
body[data-shop-theme="glassmorphism"] h1,
body[data-shop-theme="glassmorphism"] h2,
body[data-shop-theme="glassmorphism"] h3,
body[data-shop-theme="glassmorphism"] h4 {
  color: #f6f8ff !important;
}

body[data-shop-theme="glassmorphism"] .weather-sub,
body[data-shop-theme="glassmorphism"] .task-snapshot-progress-copy,
body[data-shop-theme="glassmorphism"] p,
body[data-shop-theme="glassmorphism"] .text-secondary,
body[data-shop-theme="glassmorphism"] .task-project-sub,
body[data-shop-theme="glassmorphism"] .task-lane-sub,
body[data-shop-theme="glassmorphism"] .shop-item-sub,
body[data-shop-theme="glassmorphism"] .shop-item-state,
body[data-shop-theme="glassmorphism"] .home-dashboard-sub {
  color: rgba(220, 228, 255, .72) !important;
}

body[data-shop-theme="glassmorphism"] .page-view {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  overflow: auto;
  padding: 22px 24px 30px;
}

body[data-shop-theme="glassmorphism"] .card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-shop-theme="glassmorphism"] .card > .card-body,
body[data-shop-theme="glassmorphism"] .user-status-shell,
body[data-shop-theme="glassmorphism"] .task-weather-card,
body[data-shop-theme="glassmorphism"] .task-snapshot-card,
body[data-shop-theme="glassmorphism"] .task-snapshot-progress,
body[data-shop-theme="glassmorphism"] .home-dashboard-card,
body[data-shop-theme="glassmorphism"] .task-lane-card,
body[data-shop-theme="glassmorphism"] .task-entry-card,
body[data-shop-theme="glassmorphism"] .task-collapsible-card,
body[data-shop-theme="glassmorphism"] .task-project-card,
body[data-shop-theme="glassmorphism"] .task-empty,
body[data-shop-theme="glassmorphism"] #task-alerts .alert,
body[data-shop-theme="glassmorphism"] .quick-note-card,
body[data-shop-theme="glassmorphism"] .inventory-intro-card,
body[data-shop-theme="glassmorphism"] .inventory-reward-card,
body[data-shop-theme="glassmorphism"] .journal-entry-card,
body[data-shop-theme="glassmorphism"] .grateful-item,
body[data-shop-theme="glassmorphism"] .achievement-item,
body[data-shop-theme="glassmorphism"] .resent-entry-card,
body[data-shop-theme="glassmorphism"] .resentment-intro-card,
body[data-shop-theme="glassmorphism"] .resentment-compose-card,
body[data-shop-theme="glassmorphism"] .recovery-tile,
body[data-shop-theme="glassmorphism"] .shop-hero-card,
body[data-shop-theme="glassmorphism"] .shop-section-card,
body[data-shop-theme="glassmorphism"] .shop-item-card,
body[data-shop-theme="glassmorphism"] .shop-banner-preview,
body[data-shop-theme="glassmorphism"] .shop-emoji-preview,
body[data-shop-theme="glassmorphism"] .shop-emoji-preview-tile,
body[data-shop-theme="glassmorphism"] .shop-theme-bonus,
body[data-shop-theme="glassmorphism"] .shop-theme-detail,
body[data-shop-theme="glassmorphism"] .messenger-page-shell,
body[data-shop-theme="glassmorphism"] .messenger-item,
body[data-shop-theme="glassmorphism"] .watch-stage-card,
body[data-shop-theme="glassmorphism"] .watch-panel-card,
body[data-shop-theme="glassmorphism"] .watch-player-shell,
body[data-shop-theme="glassmorphism"] .watch-video-shell,
body[data-shop-theme="glassmorphism"] .watch-queue-item,
body[data-shop-theme="glassmorphism"] .watch-chat-item,
body[data-shop-theme="glassmorphism"] .watch-queue-empty,
body[data-shop-theme="glassmorphism"] .watch-chat-empty,
body[data-shop-theme="glassmorphism"] .funds-day-card,
body[data-shop-theme="glassmorphism"] .funds-entry-card,
body[data-shop-theme="glassmorphism"] .budget-summary-panel,
body[data-shop-theme="glassmorphism"] .budget-category-row,
body[data-shop-theme="glassmorphism"] .budget-upcoming-item,
body[data-shop-theme="glassmorphism"] .budget-line-item,
body[data-shop-theme="glassmorphism"] .task-modal-card,
body[data-shop-theme="glassmorphism"] .shop-shard-lore-card,
body[data-shop-theme="glassmorphism"] .shop-shard-lore-media,
body[data-shop-theme="glassmorphism"] .profile-security-card,
body[data-shop-theme="glassmorphism"] .profile-password-card,
body[data-shop-theme="glassmorphism"] .trusted-browser-card,
body[data-shop-theme="glassmorphism"] .security-device-card {
  border: 1px solid rgba(255,255,255,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 100%) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

body[data-shop-theme="glassmorphism"] .task-snapshot-progress-track,
body[data-shop-theme="glassmorphism"] .watch-player-shell,
body[data-shop-theme="glassmorphism"] .watch-queue-list,
body[data-shop-theme="glassmorphism"] .watch-chat-list,
body[data-shop-theme="glassmorphism"] .budget-category-breakdown,
body[data-shop-theme="glassmorphism"] .budget-upcoming-list {
  background: rgba(5, 8, 22, .22);
}

body[data-shop-theme="glassmorphism"] .task-snapshot-progress-bar,
body[data-shop-theme="glassmorphism"] .shop-shard-lore-btn,
body[data-shop-theme="glassmorphism"] .btn-info,
body[data-shop-theme="glassmorphism"] .userbar-next-btn,
body[data-shop-theme="glassmorphism"] .home-dashboard-toggle,
body[data-shop-theme="glassmorphism"] .funds-view-btn.is-active {
  background: linear-gradient(135deg, #3d7af2 0%, #5956ff 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 26px rgba(61, 122, 242, .28) !important;
}

body[data-shop-theme="glassmorphism"] .form-control,
body[data-shop-theme="glassmorphism"] .form-select,
body[data-shop-theme="glassmorphism"] textarea,
body[data-shop-theme="glassmorphism"] input[type="search"],
body[data-shop-theme="glassmorphism"] input[type="text"],
body[data-shop-theme="glassmorphism"] input[type="number"],
body[data-shop-theme="glassmorphism"] input[type="date"],
body[data-shop-theme="glassmorphism"] input[type="url"],
body[data-shop-theme="glassmorphism"] input[type="password"] {
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(8, 10, 24, .34) !important;
  color: #f6f8ff !important;
}

body[data-shop-theme="glassmorphism"] .form-control::placeholder,
body[data-shop-theme="glassmorphism"] textarea::placeholder,
body[data-shop-theme="glassmorphism"] input::placeholder {
  color: rgba(202, 210, 240, .48) !important;
}

body[data-shop-theme="glassmorphism"] .form-label,
body[data-shop-theme="glassmorphism"] .budget-card-head p,
body[data-shop-theme="glassmorphism"] .shop-stat-label,
body[data-shop-theme="glassmorphism"] .watch-panel-note,
body[data-shop-theme="glassmorphism"] .messenger-item-meta {
  color: rgba(220, 228, 255, .70) !important;
}

body[data-shop-theme="glassmorphism"] .shop-theme-preview {
  border-color: rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.06) 100%);
}

body[data-shop-theme="glassmorphism"] .shop-theme-scene {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

body[data-shop-theme="glassmorphism"] .shop-price-chip,
body[data-shop-theme="glassmorphism"] .task-owner-chip,
body[data-shop-theme="glassmorphism"] .watch-room-chip,
body[data-shop-theme="glassmorphism"] .shop-stat-pill {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.08);
  color: #f5f7ff;
}

@media (max-width: 991.98px) {
  body[data-shop-theme="glassmorphism"] .app-ribbon {
    width: calc(100% - 24px);
    margin: 14px auto 0;
    grid-template-columns: auto 1fr auto;
    border-radius: 22px 22px 0 0;
  }

  body[data-shop-theme="glassmorphism"] .ribbon-search-shell {
    display: none;
  }

  body[data-shop-theme="glassmorphism"] .glass-workspace-shell {
    grid-template-columns: 1fr;
    min-height: auto;
    border-radius: 0 0 22px 22px;
  }

  body[data-shop-theme="glassmorphism"] .glass-side-panel {
    display: none;
  }

  body[data-shop-theme="glassmorphism"] .page-view {
    padding: 18px 16px 26px;
  }
}

@media (max-width: 767.98px) {
  body[data-shop-theme="glassmorphism"] .app-ribbon {
    position: sticky;
    top: 10px;
    min-height: 64px;
    padding: 0 14px;
    border-radius: 18px;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  body[data-shop-theme="glassmorphism"] .glass-window-dots {
    display: none;
  }

  body[data-shop-theme="glassmorphism"] .mobile-ribbon-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  }

  body[data-shop-theme="glassmorphism"] .mobile-ribbon-menu::before,
  body[data-shop-theme="glassmorphism"] .mobile-ribbon-menu::after {
    display: none;
  }

  body[data-shop-theme="glassmorphism"] .mobile-ribbon-sheet {
    background: rgba(7, 11, 25, .62);
    backdrop-filter: blur(18px);
  }

  body[data-shop-theme="glassmorphism"] .mobile-ribbon-sheet-card {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(18, 20, 38, .74);
    box-shadow:
      0 24px 48px rgba(4, 8, 24, .36),
      inset 0 1px 0 rgba(255,255,255,.14);
  }

  body[data-shop-theme="glassmorphism"] .mobile-ribbon-close,
  body[data-shop-theme="glassmorphism"] .mobile-ribbon-actions .btn,
  body[data-shop-theme="glassmorphism"] .mobile-nav-link {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.08) !important;
    color: #f5f7ff !important;
  }

  body[data-shop-theme="glassmorphism"] .mobile-nav-link.active {
    background: rgba(255,255,255,.14) !important;
  }
}

body:not([data-shop-theme]) .app-ribbon,
body[data-shop-theme="glassmorphism"] .app-ribbon {
  position: sticky;
  top: 16px;
  z-index: 120;
  overflow: hidden;
  width: min(1380px, calc(100% - 32px));
  margin: 16px auto 14px;
  padding: 12px 18px;
  gap: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-bottom-color: transparent;
  background:
    linear-gradient(135deg, rgba(28, 88, 164, .34) 0%, rgba(67, 127, 204, .22) 34%, rgba(142, 98, 190, .20) 68%, rgba(70, 173, 226, .24) 100%),
    rgba(255, 255, 255, .08);
  box-shadow:
    0 20px 40px rgba(15, 40, 86, .18),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  transition: transform .35s cubic-bezier(.25, .46, .45, .94), box-shadow .35s cubic-bezier(.25, .46, .45, .94), background .35s ease, border-color .35s ease;
}

body:not([data-shop-theme]) .app-ribbon::before,
body[data-shop-theme="glassmorphism"] .app-ribbon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 48%, transparent 100%);
  transform: translateX(-135%);
  transition: transform .8s ease;
  pointer-events: none;
}

body:not([data-shop-theme]) .app-ribbon::after,
body[data-shop-theme="glassmorphism"] .app-ribbon::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.10);
  border-bottom-color: transparent;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 78% 100%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 30%);
  pointer-events: none;
}

body:not([data-shop-theme]) .app-ribbon:hover,
body[data-shop-theme="glassmorphism"] .app-ribbon:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .28);
  box-shadow:
    0 26px 52px rgba(15, 40, 86, .22),
    inset 0 1px 0 rgba(255, 255, 255, .34);
}

body:not([data-shop-theme]) .app-ribbon:hover::before,
body[data-shop-theme="glassmorphism"] .app-ribbon:hover::before {
  transform: translateX(135%);
}

body:not([data-shop-theme]) .ribbon-aero-layer,
body[data-shop-theme="glassmorphism"] .ribbon-aero-layer {
  opacity: 1;
}

body:not([data-shop-theme]) .ribbon-aero-orb,
body[data-shop-theme="glassmorphism"] .ribbon-aero-orb {
  opacity: .9;
  filter: blur(.2px);
  border-color: rgba(255,255,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 40px rgba(156, 222, 255, .16);
}

body:not([data-shop-theme]) .ribbon-aero-orb-a,
body[data-shop-theme="glassmorphism"] .ribbon-aero-orb-a {
  width: 210px;
  height: 210px;
  left: -56px;
  top: -86px;
}

body:not([data-shop-theme]) .ribbon-aero-orb-b,
body[data-shop-theme="glassmorphism"] .ribbon-aero-orb-b {
  width: 156px;
  height: 156px;
  right: 82px;
  top: -48px;
}

body:not([data-shop-theme]) .ribbon-aero-orb-c,
body[data-shop-theme="glassmorphism"] .ribbon-aero-orb-c {
  width: 260px;
  height: 260px;
  left: 58%;
  top: -126px;
}

body:not([data-shop-theme]) .ribbon-aero-glow,
body[data-shop-theme="glassmorphism"] .ribbon-aero-glow {
  opacity: .9;
}

body:not([data-shop-theme]) .ribbon-logo,
body[data-shop-theme="glassmorphism"] .ribbon-logo {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 10px 18px rgba(8, 26, 60, .18));
}

body:not([data-shop-theme]) .tabs-scroll,
body[data-shop-theme="glassmorphism"] .tabs-scroll {
  gap: 8px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body:not([data-shop-theme]) .tab-link,
body[data-shop-theme="glassmorphism"] .tab-link {
  min-width: 170px;
  height: 52px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  color: rgba(255,255,255,.92);
  box-shadow:
    0 10px 20px rgba(8, 22, 48, .08),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .3s cubic-bezier(.25, .46, .45, .94), box-shadow .3s cubic-bezier(.25, .46, .45, .94), color .3s ease, border-color .3s ease, background .3s ease;
}

body:not([data-shop-theme]) .tab-link::before,
body[data-shop-theme="glassmorphism"] .tab-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  opacity: 0;
  transform: none;
  transition: opacity .3s ease;
}

body:not([data-shop-theme]) .tab-link::after,
body[data-shop-theme="glassmorphism"] .tab-link::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(circle at 22% 16%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 24%);
  opacity: 1;
}

body:not([data-shop-theme]) .tab-link:hover,
body:not([data-shop-theme]) .tab-link:focus-visible,
body[data-shop-theme="glassmorphism"] .tab-link:hover,
body[data-shop-theme="glassmorphism"] .tab-link:focus-visible {
  color: #ffffff;
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  box-shadow:
    0 14px 26px rgba(10, 28, 60, .16),
    inset 0 1px 0 rgba(255,255,255,.22);
}

body:not([data-shop-theme]) .tab-link:hover::before,
body:not([data-shop-theme]) .tab-link:focus-visible::before,
body[data-shop-theme="glassmorphism"] .tab-link:hover::before,
body[data-shop-theme="glassmorphism"] .tab-link:focus-visible::before {
  opacity: 1;
}

body:not([data-shop-theme]) .tab-link.active,
body[data-shop-theme="glassmorphism"] .tab-link.active {
  color: #fff;
  border-color: rgba(255,255,255,.24);
  background:
    linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.10)),
    linear-gradient(135deg, rgba(114, 209, 255, .14), rgba(183, 142, 255, .10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 12px 24px rgba(9, 29, 63, .14);
}

body:not([data-shop-theme]) .tab-link.active::after,
body[data-shop-theme="glassmorphism"] .tab-link.active::after {
  inset: auto 22px 7px;
  height: 3px;
  border: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92), rgba(255,255,255,0));
}

body:not([data-shop-theme]) .tab-link-icon,
body[data-shop-theme="glassmorphism"] .tab-link-icon {
  color: inherit;
  opacity: .92;
}

body:not([data-shop-theme]) .app-ribbon .ribbon-right .btn,
body[data-shop-theme="glassmorphism"] .app-ribbon .ribbon-right .btn {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(135deg, rgba(24, 165, 223, .92), rgba(10, 133, 198, .94)) !important;
  color: #fff !important;
  box-shadow:
    0 12px 24px rgba(11, 93, 147, .20),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

body:not([data-shop-theme]) .app-ribbon .ribbon-right .btn:hover,
body:not([data-shop-theme]) .app-ribbon .ribbon-right .btn:focus-visible,
body[data-shop-theme="glassmorphism"] .app-ribbon .ribbon-right .btn:hover,
body[data-shop-theme="glassmorphism"] .app-ribbon .ribbon-right .btn:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(42, 186, 240, .96), rgba(18, 147, 212, .98)) !important;
  box-shadow:
    0 16px 28px rgba(11, 93, 147, .24),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
}

@media (max-width: 767.98px) {
  body:not([data-shop-theme]) .app-ribbon,
  body[data-shop-theme="glassmorphism"] .app-ribbon {
    top: 12px;
    width: calc(100% - 20px);
    margin: 12px auto 10px;
    padding: 10px 12px;
    border-radius: 28px;
    background:
      linear-gradient(135deg, rgba(29, 95, 170, .30) 0%, rgba(81, 138, 212, .18) 44%, rgba(100, 189, 230, .20) 100%),
      rgba(255,255,255,.08);
  }

  body:not([data-shop-theme]) .ribbon-aero-layer,
  body[data-shop-theme="glassmorphism"] .ribbon-aero-layer {
    display: block !important;
  }

  body:not([data-shop-theme]) .app-ribbon::after,
  body[data-shop-theme="glassmorphism"] .app-ribbon::after {
    display: block !important;
  }

  body:not([data-shop-theme]) .mobile-ribbon-menu,
  body[data-shop-theme="glassmorphism"] .mobile-ribbon-menu {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08)) !important;
    color: #fff !important;
    box-shadow:
      0 12px 24px rgba(8, 22, 48, .16),
      inset 0 1px 0 rgba(255,255,255,.20) !important;
    clip-path: none;
  }

  body:not([data-shop-theme]) .mobile-ribbon-menu::after,
  body[data-shop-theme="glassmorphism"] .mobile-ribbon-menu::after {
    display: none;
  }

  body:not([data-shop-theme]) .mobile-ribbon-menu:hover,
  body:not([data-shop-theme]) .mobile-ribbon-menu:focus-visible,
  body:not([data-shop-theme]) .app-ribbon.mobile-menu-open .mobile-ribbon-menu,
  body[data-shop-theme="glassmorphism"] .mobile-ribbon-menu:hover,
  body[data-shop-theme="glassmorphism"] .mobile-ribbon-menu:focus-visible,
  body[data-shop-theme="glassmorphism"] .app-ribbon.mobile-menu-open .mobile-ribbon-menu {
    background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.12)) !important;
    border-color: rgba(255,255,255,.24) !important;
    color: #fff !important;
  }

  body:not([data-shop-theme]) .mobile-ribbon-sheet,
  body[data-shop-theme="glassmorphism"] .mobile-ribbon-sheet {
    background: rgba(6, 14, 28, .56);
    backdrop-filter: blur(14px);
  }

  body:not([data-shop-theme]) .mobile-ribbon-sheet-card,
  body[data-shop-theme="glassmorphism"] .mobile-ribbon-sheet-card {
    border: 1px solid rgba(255,255,255,.18);
    background:
      linear-gradient(135deg, rgba(37, 103, 181, .78) 0%, rgba(62, 101, 173, .68) 45%, rgba(132, 86, 176, .66) 100%),
      rgba(255,255,255,.08);
    box-shadow:
      0 24px 48px rgba(7, 19, 42, .28),
      inset 0 1px 0 rgba(255,255,255,.20);
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
  }

  body:not([data-shop-theme]) .mobile-ribbon-sheet-title,
  body[data-shop-theme="glassmorphism"] .mobile-ribbon-sheet-title {
    color: #fff;
  }

  body:not([data-shop-theme]) .mobile-ribbon-close,
  body[data-shop-theme="glassmorphism"] .mobile-ribbon-close,
  body:not([data-shop-theme]) .mobile-ribbon-actions .btn,
  body[data-shop-theme="glassmorphism"] .mobile-ribbon-actions .btn {
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08)) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  }

  body:not([data-shop-theme]) .mobile-nav-link,
  body[data-shop-theme="glassmorphism"] .mobile-nav-link {
    border: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    color: rgba(255,255,255,.94);
    box-shadow:
      0 12px 22px rgba(7, 19, 42, .14),
      inset 0 1px 0 rgba(255,255,255,.18);
  }

  body:not([data-shop-theme]) .mobile-nav-link i,
  body[data-shop-theme="glassmorphism"] .mobile-nav-link i {
    color: inherit;
  }

  body:not([data-shop-theme]) .mobile-nav-link.active,
  body:not([data-shop-theme]) .mobile-nav-link:hover,
  body[data-shop-theme="glassmorphism"] .mobile-nav-link.active,
  body[data-shop-theme="glassmorphism"] .mobile-nav-link:hover {
    background: linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.12));
    color: #fff;
    transform: translateX(8px);
  }
}

body[data-shop-theme="cyberpunk"] .userbar-rotator-label,
body[data-shop-theme="cyberpunk"] .userbar-next-copy {
  color: #69efff !important;
  text-shadow:
    0 0 8px rgba(77, 241, 255, .28),
    0 0 18px rgba(77, 241, 255, .16);
}

body[data-shop-theme="cyberpunk"] .userbar-rotator-value {
  color: #ff63da !important;
  text-shadow:
    0 0 10px rgba(255, 99, 218, .34),
    0 0 22px rgba(255, 99, 218, .18);
}

body[data-shop-theme="cyberpunk"] .userbar-next-copy {
  letter-spacing: .02em;
}

body[data-shop-theme="cyberpunk"] .home-dashboard-field,
body[data-shop-theme="cyberpunk"] .home-checklist-card,
body[data-shop-theme="cyberpunk"] .watch-library-panel,
body[data-shop-theme="cyberpunk"] .watch-library-item,
body[data-shop-theme="cyberpunk"] .budget-setup-card,
body[data-shop-theme="cyberpunk"] .budget-summary-card,
body[data-shop-theme="cyberpunk"] .budget-entry-card,
body[data-shop-theme="cyberpunk"] .budget-list-item,
body[data-shop-theme="cyberpunk"] .budget-metric-card,
body[data-shop-theme="cyberpunk"] .budget-summary-panel,
body[data-shop-theme="cyberpunk"] .budget-category-row,
body[data-shop-theme="cyberpunk"] .budget-upcoming-item,
body[data-shop-theme="cyberpunk"] .budget-line-item,
body[data-shop-theme="cyberpunk"] .home-check-item,
body[data-shop-theme="cyberpunk"] .home-dashboard-status,
body[data-shop-theme="cyberpunk"] .budget-status,
body[data-shop-theme="cyberpunk"] .budget-empty-row,
body[data-shop-theme="cyberpunk"] .budget-empty-state,
body[data-shop-theme="cyberpunk"] .watch-library-empty {
  border-color: rgba(82, 238, 255, .22) !important;
  background:
    linear-gradient(180deg, rgba(12, 20, 48, .96) 0%, rgba(8, 13, 31, .98) 100%) !important;
  color: #d7ebff !important;
}

body[data-shop-theme="cyberpunk"] .funds-view-btn,
body[data-shop-theme="cyberpunk"] .funds-view-btn.is-active {
  border-color: rgba(82, 238, 255, .22) !important;
  background:
    linear-gradient(180deg, rgba(12, 20, 48, .96) 0%, rgba(8, 13, 31, .98) 100%) !important;
  color: #d7ebff !important;
}

body[data-shop-theme="cyberpunk"] .funds-view-btn-icon {
  border-color: rgba(82, 238, 255, .28) !important;
  background:
    linear-gradient(180deg, rgba(24, 39, 82, .98) 0%, rgba(10, 16, 40, .98) 100%) !important;
  color: #52eeff !important;
}

body[data-shop-theme="cyberpunk"] .funds-view-btn-sub {
  color: rgba(215, 235, 255, .72) !important;
}

body[data-shop-theme="cyberpunk"] .app-ribbon {
  width: min(1880px, calc(100% - 20px)) !important;
  margin: 6px auto 10px !important;
  border-radius: 36px !important;
  overflow: hidden !important;
  border-bottom: 0 !important;
}

body[data-shop-theme="cyberpunk"] .app-ribbon::after {
  display: none !important;
}

body[data-shop-theme="cyberpunk"] .ribbon-aero-layer {
  display: none !important;
}

body[data-shop-theme="cyberpunk"] .tabs-scroll {
  background: transparent !important;
  box-shadow: none !important;
}

body[data-shop-theme="cyberpunk"] .app-ribbon {
  border: 1px solid rgba(55, 229, 255, .48) !important;
}

@media (max-width: 767.98px) {
  .shop-section-card {
    padding: 18px 14px;
    overflow: hidden;
  }

  .shop-grid,
  .shop-grid-banners,
  .shop-grid-emojis {
    display: grid;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 320px);
    gap: 14px;
    max-height: none !important;
    padding: 0 4px 10px 0;
    margin-right: -4px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .shop-grid::-webkit-scrollbar,
  .shop-grid-banners::-webkit-scrollbar,
  .shop-grid-emojis::-webkit-scrollbar {
    display: none;
  }

  .shop-item-card {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 16px;
    gap: 12px;
    align-content: start;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .shop-item-top {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .shop-price-chip {
    align-self: flex-start;
    max-width: 100%;
  }

  .shop-item-title {
    font-size: 1rem;
    line-height: 1.24;
  }

  .shop-item-sub,
  .shop-item-state {
    font-size: .92rem;
    line-height: 1.45;
  }

  .shop-theme-preview {
    min-height: 0;
    padding: 14px;
  }

  .shop-theme-scene {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    padding: 14px;
  }

  .shop-theme-scene-copy {
    gap: 0;
  }

  .shop-theme-scene-title {
    font-size: .98rem;
  }

  .shop-theme-scene-sub {
    font-size: .88rem;
  }

  .shop-theme-scene-window {
    min-height: 84px;
    padding: 10px;
  }

  .shop-theme-traits {
    gap: 6px;
  }

  .shop-theme-trait {
    min-height: 28px;
    padding: 0 10px;
    font-size: .72rem;
  }

  .shop-theme-bonus,
  .shop-theme-detail {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
  }

  .shop-grid-banners .shop-item-card,
  .shop-grid-emojis .shop-item-card {
    min-height: 0;
  }

  .shop-item-buttons,
  .shop-theme-bonus-actions {
    width: 100%;
  }

  .shop-item-actions .btn,
  .shop-disabled-action {
    align-self: stretch;
  }

  .shop-item-actions .btn,
  .shop-disabled-action .btn {
    width: 100%;
  }
}