/*
 * QYapi host-level theme lock.
 * Served by Nginx from /opt/sub2api-branding/qyapi-theme.css and injected into
 * Sub2API HTML so Docker image updates keep the QY visual system.
 */

:root {
  --qy-ink: #071557;
  --qy-muted: #5f6794;
  --qy-blue: #3d7cff;
  --qy-royal: #2150ef;
  --qy-violet: #7758ff;
  --qy-magenta: #d84de8;
  --qy-cyan: #4fdcff;
  --qy-gold: #d8b76a;
  --qy-line: rgba(143, 154, 220, 0.24);
  --qy-panel: rgba(255, 255, 255, 0.68);
  --qy-panel-strong: rgba(255, 255, 255, 0.82);
  --qy-shadow: 0 30px 90px rgba(81, 91, 178, 0.22);
}

html {
  background: #edf4ff;
}

body {
  background:
    radial-gradient(circle at 10% 16%, rgba(125, 174, 255, 0.28), transparent 30rem),
    radial-gradient(circle at 84% 2%, rgba(255, 226, 185, 0.52), transparent 27rem),
    radial-gradient(circle at 78% 86%, rgba(213, 186, 255, 0.38), transparent 31rem),
    linear-gradient(118deg, #eaf2ff 0%, #f4f0ff 47%, #fff4e7 100%) !important;
  color: var(--qy-ink);
}

::selection {
  background: rgba(114, 102, 255, 0.22) !important;
  color: var(--qy-ink) !important;
}

#app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4 {
  min-height: 100vh;
  justify-content: flex-end !important;
  padding: clamp(2rem, 5.4vw, 6rem) clamp(4rem, 8vw, 9rem) !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.72), transparent 15rem),
    radial-gradient(circle at 62% 16%, rgba(255, 231, 195, 0.52), transparent 22rem),
    radial-gradient(circle at 87% 80%, rgba(186, 204, 255, 0.45), transparent 24rem),
    linear-gradient(116deg, #e9f2ff 0%, #f9f2ff 52%, #fff0df 100%) !important;
  isolation: isolate;
}

#app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::before {
  content: "";
  position: absolute;
  left: clamp(1rem, 5vw, 5rem);
  top: 50%;
  z-index: 1;
  width: min(56vw, 58rem);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.34), transparent 58%),
    url("/qy-logo-source.png?v=20260519") center / contain no-repeat;
  opacity: 0.86;
  mix-blend-mode: multiply;
  filter: saturate(1.12) drop-shadow(0 34px 70px rgba(79, 117, 255, 0.18));
}

#app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::after {
  content: "安全可靠      高效稳定      开放连接";
  position: absolute;
  left: clamp(3rem, 7vw, 7rem);
  bottom: clamp(2.3rem, 6vw, 5rem);
  z-index: 2;
  width: min(43vw, 48rem);
  padding: 1.1rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 1.05rem;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 18px 45px rgba(111, 126, 199, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  color: rgba(7, 21, 87, 0.78);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: 0 !important;
  text-align: center;
  white-space: pre;
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

#app [data-v-84331c12].absolute.inset-0.bg-gradient-to-br {
  background:
    linear-gradient(rgba(70, 102, 206, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 102, 206, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.88), transparent 10rem),
    radial-gradient(circle at 88% 9%, rgba(255, 231, 190, 0.66), transparent 16rem),
    linear-gradient(116deg, #eaf2ff 0%, #f7f1ff 54%, #fff1df 100%) !important;
  background-size: 84px 84px, 84px 84px, auto, auto, auto !important;
}

#app [data-v-84331c12].pointer-events-none {
  opacity: 1 !important;
}

#app [data-v-84331c12].pointer-events-none .rounded-full {
  display: none !important;
}

#app [data-v-84331c12].pointer-events-none::before,
#app [data-v-84331c12].pointer-events-none::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

#app [data-v-84331c12].pointer-events-none::before {
  left: 8%;
  top: 7%;
  width: 36rem;
  height: 36rem;
  border: 1px solid rgba(202, 178, 255, 0.35);
  box-shadow: 0 0 70px rgba(255, 255, 255, 0.36);
}

#app [data-v-84331c12].pointer-events-none::after {
  right: -8rem;
  top: -7rem;
  width: 25rem;
  height: 25rem;
  background: radial-gradient(circle, rgba(255, 222, 178, 0.72), transparent 68%);
}

#app [data-v-84331c12].relative.z-10.w-full.max-w-md {
  z-index: 5;
  width: min(34rem, 100%) !important;
  max-width: 34rem !important;
  margin-right: clamp(0rem, 1.3vw, 2rem);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 2rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 250, 255, 0.58)) !important;
  box-shadow: var(--qy-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(28px) saturate(142%);
  -webkit-backdrop-filter: blur(28px) saturate(142%);
}

#app [data-v-84331c12].mb-8.text-center {
  margin-bottom: 1.45rem !important;
}

#app [data-v-84331c12].mb-4.inline-flex.h-16.w-16 {
  height: 5.5rem !important;
  width: 5.5rem !important;
  margin-bottom: 1.05rem !important;
  border-radius: 50% !important;
  border: 1px solid rgba(108, 124, 209, 0.22);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.9), rgba(240, 248, 255, 0.72)) !important;
  box-shadow:
    0 16px 42px rgba(79, 117, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

#app [data-v-84331c12].mb-4.inline-flex.h-16.w-16 img {
  border-radius: 50%;
  padding: 0.18rem;
}

#app .text-gradient {
  background-image: linear-gradient(106deg, #071557 0%, #1d52df 35%, #7958ff 68%, #42c9f5 100%) !important;
  font-size: clamp(2.65rem, 4.2vw, 3.35rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 10px 30px rgba(92, 112, 226, 0.16);
}

#app [data-v-84331c12].text-sm.text-gray-500 {
  margin-top: 0.72rem;
  color: rgba(7, 21, 87, 0.72) !important;
  font-size: 1rem !important;
}

#app .card,
#app .card-glass {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#app .card-glass.rounded-2xl {
  padding: 0 !important;
  border-radius: 0 !important;
}

#app [data-v-2e6040b4].text-center {
  position: relative;
  margin-bottom: 1.35rem;
  padding-top: 1.1rem;
}

#app [data-v-2e6040b4].text-center::before,
#app [data-v-2e6040b4].text-center::after {
  content: "";
  position: absolute;
  top: 0;
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 183, 106, 0.54), transparent);
}

#app [data-v-2e6040b4].text-center::before {
  left: 0;
}

#app [data-v-2e6040b4].text-center::after {
  right: 0;
}

#app [data-v-2e6040b4].text-2xl.font-bold {
  color: transparent !important;
  background: linear-gradient(105deg, #1c55df, #7858ff 55%, #b345e6) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-size: 2.05rem !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

#app [data-v-2e6040b4].mt-2.text-sm.text-gray-500 {
  color: rgba(7, 21, 87, 0.66) !important;
  font-size: 1rem !important;
}

#app .input-label {
  margin-bottom: 0.48rem !important;
  color: rgba(7, 21, 87, 0.82) !important;
  font-weight: 650 !important;
}

#app .input {
  min-height: 3.25rem;
  border: 1px solid rgba(129, 139, 194, 0.3) !important;
  border-radius: 0.68rem !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--qy-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 22px rgba(77, 91, 164, 0.08) !important;
}

#app .input::placeholder {
  color: rgba(93, 101, 145, 0.5) !important;
}

#app .input:focus {
  border-color: rgba(111, 125, 255, 0.68) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow:
    0 0 0 4px rgba(124, 88, 255, 0.13),
    0 12px 30px rgba(71, 92, 190, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

#app .input-error {
  border-color: rgba(225, 84, 149, 0.72) !important;
  box-shadow: 0 0 0 4px rgba(225, 84, 149, 0.14) !important;
}

#app .btn {
  min-height: 3.35rem;
  border-radius: 0.62rem !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

#app .btn-primary,
#app .el-button--primary {
  border: 0 !important;
  background-image: linear-gradient(98deg, #5da9ff 0%, #666dff 35%, #9060ff 66%, #dd4be7 100%) !important;
  color: #fff !important;
  box-shadow:
    0 14px 30px rgba(111, 106, 255, 0.24),
    0 5px 18px rgba(216, 77, 232, 0.18) !important;
}

#app .btn-primary:hover,
#app .el-button--primary:hover {
  transform: translateY(-1px);
  background-image: linear-gradient(98deg, #68b7ff 0%, #5d6bff 34%, #9b63ff 65%, #ec53ee 100%) !important;
  box-shadow:
    0 18px 38px rgba(111, 106, 255, 0.29),
    0 7px 22px rgba(216, 77, 232, 0.22) !important;
}

#app .btn-primary:active,
#app .el-button--primary:active {
  transform: translateY(0) scale(0.99);
}

#app .btn-secondary {
  border-color: rgba(129, 139, 194, 0.26) !important;
  background: rgba(255, 255, 255, 0.64) !important;
  color: var(--qy-ink) !important;
}

#app .btn-secondary:hover {
  border-color: rgba(124, 88, 255, 0.38) !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

#app .text-primary-300,
#app .text-primary-400,
#app .text-primary-500,
#app .text-primary-600,
#app .text-primary-700,
#app .hover\:text-primary-500:hover,
#app .hover\:text-primary-600:hover {
  color: #2f58dd !important;
}

#app .bg-primary-50,
#app .bg-primary-100 {
  background-color: rgba(232, 239, 255, 0.92) !important;
}

#app .bg-primary-400,
#app .bg-primary-500,
#app .bg-primary-600,
#app .hover\:bg-primary-500:hover,
#app .hover\:bg-primary-600:hover {
  background: linear-gradient(98deg, #5da9ff, #8060ff, #dd4be7) !important;
}

#app .border-primary-400,
#app .border-primary-500,
#app .focus\:border-primary-500:focus,
#app .focus\:border-primary-600:focus {
  border-color: rgba(124, 88, 255, 0.58) !important;
}

#app .focus\:ring-primary-500:focus,
#app .focus\:ring-primary-600:focus {
  --tw-ring-color: rgba(124, 88, 255, 0.24) !important;
}

#app .navigation-progress-bar {
  background: linear-gradient(90deg, transparent 0%, #5da9ff 18%, #8060ff 50%, #dd4be7 78%, transparent 100%) !important;
}

#app [data-v-84331c12].mt-6.text-center.text-sm {
  margin-top: 1.15rem !important;
  color: rgba(7, 21, 87, 0.62) !important;
}

#app [data-v-84331c12].mt-8.text-center.text-xs {
  margin-top: 1.65rem !important;
  color: rgba(7, 21, 87, 0.45) !important;
}

@media (max-width: 1024px) {
  #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4 {
    justify-content: center !important;
    padding: 2rem !important;
  }

  #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::before {
    left: 50%;
    top: 42%;
    width: 88vw;
    transform: translate(-50%, -50%);
    opacity: 0.16;
  }

  #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::after {
    display: none;
  }

  #app [data-v-84331c12].relative.z-10.w-full.max-w-md {
    margin-right: 0;
  }
}

@media (max-height: 800px) and (min-width: 1025px) {
  #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4 {
    padding: 1.6rem clamp(3rem, 7vw, 7rem) !important;
  }

  #app [data-v-84331c12].relative.z-10.w-full.max-w-md {
    width: min(31rem, 100%) !important;
    max-width: 31rem !important;
    padding: 1.55rem 2rem;
    border-radius: 1.55rem;
  }

  #app [data-v-84331c12].mb-8.text-center {
    margin-bottom: 0.85rem !important;
  }

  #app [data-v-84331c12].mb-4.inline-flex.h-16.w-16 {
    height: 4rem !important;
    width: 4rem !important;
    margin-bottom: 0.6rem !important;
  }

  #app .text-gradient {
    font-size: 2.45rem !important;
  }

  #app [data-v-84331c12].text-sm.text-gray-500 {
    margin-top: 0.35rem;
    font-size: 0.92rem !important;
  }

  #app [data-v-2e6040b4].text-center {
    margin-bottom: 0.8rem;
    padding-top: 0.65rem;
  }

  #app [data-v-2e6040b4].text-2xl.font-bold {
    font-size: 1.65rem !important;
  }

  #app [data-v-2e6040b4].mt-2.text-sm.text-gray-500 {
    font-size: 0.9rem !important;
  }

  #app .input {
    min-height: 2.8rem;
  }

  #app .btn {
    min-height: 2.95rem;
  }

  #app form.space-y-5 {
    gap: 0 !important;
  }

  #app [data-v-84331c12].mt-6.text-center.text-sm {
    margin-top: 0.8rem !important;
  }

  #app [data-v-84331c12].mt-8.text-center.text-xs {
    margin-top: 1rem !important;
  }
}

@media (max-width: 640px) {
  #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4 {
    padding: 1rem !important;
  }

  #app [data-v-84331c12].relative.z-10.w-full.max-w-md {
    padding: 1.4rem;
    border-radius: 1.45rem;
  }

  #app .text-gradient {
    font-size: 2.35rem !important;
  }

  #app [data-v-2e6040b4].text-2xl.font-bold {
    font-size: 1.75rem !important;
  }
}

/*
 * QYapi main-site visual pass 20260519.
 * Keep this host layer self-contained so upstream Sub2API updates do not
 * overwrite the QY light/dark identity.
 */

:root {
  --qy-main-navy: #071557;
  --qy-main-blue: #3478ff;
  --qy-main-sky: #62cfff;
  --qy-main-violet: #735dff;
  --qy-main-pink: #d957f0;
  --qy-main-gold: #d8ad61;
  --qy-main-cream: #fff7ea;
  --qy-main-line: rgba(126, 145, 221, 0.24);
  --qy-main-soft: rgba(247, 250, 255, 0.78);
  --qy-main-card: rgba(255, 255, 255, 0.76);
  --qy-main-card-solid: #ffffff;
  --qy-main-shadow: 0 30px 90px rgba(85, 105, 190, 0.22);
  --qy-main-dark: #060a1c;
  --qy-main-dark-2: #0d1530;
  --qy-main-dark-3: #151f3a;
  --qy-main-dark-line: rgba(179, 190, 255, 0.14);
  --qy-main-dark-text: #f4f7ff;
  --qy-main-dark-muted: #c5cdeb;
}

body {
  min-height: 100vh;
  letter-spacing: 0 !important;
}

#app {
  color: var(--qy-main-navy);
}

/* Login: bright QY encounter scene */
#app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4 {
  justify-content: flex-end !important;
  padding: clamp(2rem, 5.2vw, 5.4rem) clamp(4rem, 7.8vw, 8.4rem) !important;
  background:
    linear-gradient(rgba(116, 139, 222, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 139, 222, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 8% 20%, rgba(255, 255, 255, 0.94), transparent 12rem),
    radial-gradient(circle at 72% 12%, rgba(255, 237, 206, 0.76), transparent 25rem),
    radial-gradient(circle at 20% 86%, rgba(124, 201, 255, 0.26), transparent 25rem),
    linear-gradient(116deg, #e7f1ff 0%, #f7f1ff 50%, #fff1df 100%) !important;
  background-size: 82px 82px, 82px 82px, auto, auto, auto, auto !important;
}

#app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::before {
  left: clamp(1rem, 5vw, 5rem);
  top: 51%;
  width: min(58vw, 62rem);
  opacity: 0.9;
  mix-blend-mode: multiply;
  filter:
    saturate(1.15)
    contrast(1.02)
    drop-shadow(0 42px 80px rgba(66, 105, 220, 0.22));
}

#app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::after {
  content: "\5B89\5168\53EF\9760        \9AD8\6548\7A33\5B9A        \5F00\653E\8FDE\63A5";
  left: clamp(3rem, 7vw, 7rem);
  bottom: clamp(2.2rem, 5.4vw, 4.8rem);
  width: min(46vw, 52rem);
  padding: 1.15rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 1rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(252, 247, 255, 0.58)) !important;
  color: rgba(7, 21, 87, 0.84);
  box-shadow:
    0 20px 52px rgba(95, 114, 190, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

#app [data-v-84331c12].absolute.inset-0.bg-gradient-to-br {
  opacity: 0.96;
}

#app [data-v-84331c12].relative.z-10.w-full.max-w-md {
  width: min(35.5rem, 100%) !important;
  max-width: 35.5rem !important;
  padding: clamp(2rem, 3vw, 2.9rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 2.05rem !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 250, 255, 0.6)) !important;
  box-shadow:
    0 34px 94px rgba(87, 104, 189, 0.24),
    0 0 0 1px rgba(216, 173, 97, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

#app [data-v-84331c12].mb-4.inline-flex.h-16.w-16 {
  height: 5.7rem !important;
  width: 5.7rem !important;
  border: 1px solid rgba(118, 142, 255, 0.28) !important;
  box-shadow:
    0 18px 46px rgba(70, 123, 255, 0.2),
    0 0 0 8px rgba(255, 255, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

#app .text-gradient {
  background-image: linear-gradient(108deg, #071557 0%, #1f58df 38%, #725dff 70%, #55c9ff 100%) !important;
  font-size: clamp(2.9rem, 4.6vw, 3.65rem) !important;
  font-weight: 850 !important;
}

#app [data-v-84331c12].text-sm.text-gray-500::before,
#app [data-v-84331c12].text-sm.text-gray-500::after {
  content: "\2726";
  margin: 0 0.95rem;
  color: var(--qy-main-gold);
}

#app [data-v-84331c12].text-sm.text-gray-500 {
  font-size: 0 !important;
}

#app [data-v-84331c12].text-sm.text-gray-500::before,
#app [data-v-84331c12].text-sm.text-gray-500::after,
#app [data-v-84331c12].text-sm.text-gray-500 > * {
  font-size: 1rem !important;
}

#app [data-v-84331c12].text-sm.text-gray-500::after {
  content: "\5F00\542F\4F60\7684 API \5947\9047\4E4B\65C5 \2726";
}

#app [data-v-84331c12].text-sm.text-gray-500::before {
  content: "\2726";
}

#app [data-v-2e6040b4].text-center {
  padding-top: 1.35rem !important;
}

#app [data-v-2e6040b4].text-center::before,
#app [data-v-2e6040b4].text-center::after {
  top: 0.2rem;
  background: linear-gradient(90deg, transparent, rgba(216, 173, 97, 0.72), transparent);
}

#app [data-v-2e6040b4].text-2xl.font-bold {
  background: linear-gradient(105deg, #2c68f0, #7160ff 58%, #c653ef) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

#app .input {
  border-color: rgba(118, 132, 197, 0.34) !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

#app .input:focus {
  border-color: rgba(91, 124, 255, 0.76) !important;
  box-shadow:
    0 0 0 4px rgba(96, 120, 255, 0.15),
    0 16px 32px rgba(77, 92, 175, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

#app .btn-primary,
#app .el-button--primary,
#app button.bg-primary-600,
#app button.bg-primary-500 {
  background-image: linear-gradient(96deg, #5ba8ff 0%, #6971ff 38%, #965dff 67%, #db56ee 100%) !important;
  color: #fff !important;
  box-shadow:
    0 16px 34px rgba(99, 106, 255, 0.25),
    0 7px 22px rgba(213, 86, 238, 0.2) !important;
}

/* App shell: light mode palette */
#app .min-h-screen.bg-gray-50,
#app .bg-gray-50 {
  background:
    radial-gradient(circle at 30% 12%, rgba(104, 216, 255, 0.14), transparent 32rem),
    radial-gradient(circle at 88% 8%, rgba(255, 227, 186, 0.42), transparent 25rem),
    linear-gradient(120deg, #f7fbff 0%, #f6f3ff 52%, #fff8ef 100%) !important;
}

#app aside,
#app .sidebar {
  border-color: rgba(118, 132, 197, 0.18) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 16px 0 54px rgba(79, 98, 169, 0.08);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

#app header,
#app .app-header,
#app .sticky.top-0 {
  border-color: rgba(118, 132, 197, 0.16) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

#app .sidebar-link {
  border-radius: 0.78rem !important;
  color: #1c2757 !important;
}

#app .sidebar-link:hover {
  background: rgba(234, 240, 255, 0.9) !important;
  color: #244fe8 !important;
}

#app .sidebar-link.router-link-active,
#app .sidebar-link.router-link-exact-active,
#app .sidebar-link.active,
#app a.router-link-active,
#app a.router-link-exact-active {
  background:
    linear-gradient(98deg, rgba(83, 153, 255, 0.18), rgba(126, 94, 255, 0.17), rgba(216, 173, 97, 0.13)) !important;
  color: #224ce7 !important;
  box-shadow: inset 3px 0 0 rgba(216, 173, 97, 0.86);
}

#app .card,
#app .rounded-xl.bg-white,
#app .rounded-2xl.bg-white,
#app .bg-white {
  border-color: rgba(127, 143, 210, 0.18) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 20px 58px rgba(82, 101, 178, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

#app .btn-secondary,
#app .select-trigger,
#app .date-picker-trigger {
  border-color: rgba(121, 137, 205, 0.26) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #17234f !important;
  box-shadow: 0 10px 26px rgba(78, 95, 170, 0.09) !important;
}

#app .btn-secondary:hover,
#app .select-trigger:hover,
#app .date-picker-trigger:hover {
  border-color: rgba(106, 112, 255, 0.42) !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

#app .text-green-400,
#app .text-green-500,
#app .text-green-600,
#app .text-green-700,
#app .text-emerald-400,
#app .text-emerald-500,
#app .text-emerald-600,
#app .text-emerald-700,
#app .text-teal-400,
#app .text-teal-500,
#app .text-teal-600,
#app .text-teal-700,
#app .hover\:text-green-600:hover,
#app .hover\:text-emerald-600:hover,
#app .hover\:text-teal-600:hover {
  color: #285ff0 !important;
}

#app .bg-green-50,
#app .bg-green-100,
#app .bg-emerald-50,
#app .bg-emerald-100,
#app .bg-teal-50,
#app .bg-teal-100 {
  background-color: rgba(229, 237, 255, 0.94) !important;
}

#app .hover\:bg-green-50:hover,
#app .hover\:bg-emerald-50:hover,
#app .hover\:bg-teal-50:hover {
  background-color: rgba(229, 237, 255, 0.94) !important;
}

#app .bg-green-500,
#app .bg-green-600,
#app .bg-emerald-500,
#app .bg-emerald-600,
#app .bg-teal-500,
#app .bg-teal-600 {
  background: linear-gradient(98deg, #4f95ff, #7860ff) !important;
}

#app .border-green-300,
#app .border-green-400,
#app .border-green-500,
#app .border-emerald-300,
#app .border-emerald-400,
#app .border-emerald-500,
#app .border-teal-300,
#app .border-teal-400,
#app .border-teal-500 {
  border-color: rgba(105, 112, 255, 0.48) !important;
}

#app .toast,
#app [role="alert"] {
  border-color: rgba(116, 132, 255, 0.22) !important;
  box-shadow: 0 18px 48px rgba(73, 88, 168, 0.18) !important;
}

/* Driver/onboarding modal follows QY colors. */
.driver-popover {
  border: 1px solid rgba(126, 145, 221, 0.22) !important;
  border-radius: 1.2rem !important;
  box-shadow: 0 28px 80px rgba(48, 61, 133, 0.26) !important;
}

.driver-popover-title {
  color: #071557 !important;
}

.driver-popover-next-btn {
  border: 0 !important;
  background: linear-gradient(96deg, #5ba8ff, #7661ff, #d957f0) !important;
  color: #fff !important;
}

.driver-popover-prev-btn {
  border-color: rgba(126, 145, 221, 0.28) !important;
  color: #34406e !important;
}

/* Dark mode: clearer text and QY midnight palette. */
html.dark,
html.dark body {
  background: var(--qy-main-dark) !important;
  color: var(--qy-main-dark-text) !important;
}

html.dark #app {
  color: var(--qy-main-dark-text) !important;
}

html.dark #app .min-h-screen,
html.dark #app .min-h-screen.bg-gray-50,
html.dark #app .bg-gray-50 {
  background:
    radial-gradient(circle at 28% 10%, rgba(76, 134, 255, 0.17), transparent 32rem),
    radial-gradient(circle at 84% 20%, rgba(216, 173, 97, 0.12), transparent 28rem),
    linear-gradient(120deg, #060a1c 0%, #09142b 55%, #0a0f24 100%) !important;
}

html.dark #app aside,
html.dark #app .sidebar {
  border-color: rgba(179, 190, 255, 0.12) !important;
  background: rgba(12, 18, 38, 0.94) !important;
  box-shadow: 16px 0 52px rgba(0, 0, 0, 0.24);
}

html.dark #app header,
html.dark #app .app-header,
html.dark #app .sticky.top-0 {
  border-color: rgba(179, 190, 255, 0.12) !important;
  background: rgba(14, 22, 43, 0.88) !important;
}

html.dark #app .bg-dark-950,
html.dark #app .bg-dark-900,
html.dark #app .bg-dark-800,
html.dark #app .dark\:bg-dark-950,
html.dark #app .dark\:bg-dark-900,
html.dark #app .dark\:bg-dark-800,
html.dark #app .dark\:bg-dark-800\/50,
html.dark #app .card,
html.dark #app .rounded-xl,
html.dark #app .rounded-2xl {
  border-color: rgba(179, 190, 255, 0.12) !important;
  background-color: rgba(17, 26, 52, 0.9) !important;
  color: var(--qy-main-dark-text) !important;
}

html.dark #app .sidebar-link {
  color: #e8edff !important;
}

html.dark #app .sidebar-link:hover {
  background: rgba(118, 96, 255, 0.16) !important;
  color: #ffffff !important;
}

html.dark #app .sidebar-link.router-link-active,
html.dark #app .sidebar-link.router-link-exact-active,
html.dark #app .sidebar-link.active,
html.dark #app a.router-link-active,
html.dark #app a.router-link-exact-active {
  background:
    linear-gradient(98deg, rgba(87, 150, 255, 0.22), rgba(129, 96, 255, 0.23), rgba(216, 173, 97, 0.16)) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 rgba(216, 173, 97, 0.9);
}

html.dark #app .text-gray-900,
html.dark #app .text-gray-800,
html.dark #app .dark\:text-white,
html.dark #app .dark\:text-gray-100 {
  color: #f7f9ff !important;
}

html.dark #app .text-gray-700,
html.dark #app .text-gray-600,
html.dark #app .text-gray-500,
html.dark #app .text-gray-400,
html.dark #app .dark\:text-gray-300,
html.dark #app .dark\:text-gray-400,
html.dark #app .dark\:text-dark-300,
html.dark #app .dark\:text-dark-400 {
  color: var(--qy-main-dark-muted) !important;
}

html.dark #app .text-green-400,
html.dark #app .text-green-500,
html.dark #app .text-green-600,
html.dark #app .text-green-700,
html.dark #app .dark\:text-green-400,
html.dark #app .dark\:hover\:text-green-400:hover,
html.dark #app .text-emerald-400,
html.dark #app .text-emerald-500,
html.dark #app .text-emerald-600,
html.dark #app .text-emerald-700,
html.dark #app .dark\:text-emerald-400,
html.dark #app .dark\:hover\:text-emerald-400:hover,
html.dark #app .text-teal-400,
html.dark #app .text-teal-500,
html.dark #app .text-teal-600,
html.dark #app .text-teal-700,
html.dark #app .dark\:text-teal-400,
html.dark #app .dark\:hover\:text-teal-400:hover {
  color: #8da3ff !important;
}

html.dark #app .bg-green-50,
html.dark #app .bg-green-100,
html.dark #app .bg-emerald-50,
html.dark #app .bg-emerald-100,
html.dark #app .bg-teal-50,
html.dark #app .bg-teal-100,
html.dark #app .dark\:bg-green-900\/30,
html.dark #app .dark\:bg-emerald-900\/30,
html.dark #app .dark\:bg-teal-900\/30,
html.dark #app .dark\:bg-green-900\/20,
html.dark #app .dark\:bg-emerald-900\/20,
html.dark #app .dark\:bg-teal-900\/20,
html.dark #app .dark\:hover\:bg-green-900\/20:hover,
html.dark #app .dark\:hover\:bg-emerald-900\/20:hover,
html.dark #app .dark\:hover\:bg-teal-900\/20:hover {
  background-color: rgba(44, 60, 112, 0.72) !important;
}

html.dark #app .input,
html.dark #app input,
html.dark #app textarea,
html.dark #app select,
html.dark #app .select-trigger,
html.dark #app .date-picker-trigger {
  border-color: rgba(179, 190, 255, 0.2) !important;
  background: rgba(18, 28, 55, 0.94) !important;
  color: #f5f7ff !important;
}

html.dark #app .input::placeholder,
html.dark #app input::placeholder,
html.dark #app textarea::placeholder {
  color: rgba(197, 205, 235, 0.62) !important;
}

html.dark #app .btn-secondary,
html.dark #app .select-trigger,
html.dark #app .date-picker-trigger {
  color: #edf2ff !important;
  background: rgba(22, 32, 61, 0.96) !important;
  border-color: rgba(179, 190, 255, 0.18) !important;
}

html.dark #app table,
html.dark #app thead,
html.dark #app tbody,
html.dark #app tr {
  color: #edf2ff !important;
}

html.dark #app th,
html.dark #app td {
  border-color: rgba(179, 190, 255, 0.12) !important;
}

html.dark #app .driver-popover,
html.dark .driver-popover {
  background: rgba(17, 26, 52, 0.98) !important;
  border-color: rgba(216, 173, 97, 0.22) !important;
  color: var(--qy-main-dark-text) !important;
}

html.dark .driver-popover-title,
html.dark .driver-popover-description {
  color: var(--qy-main-dark-text) !important;
}

@media (max-width: 1024px) {
  #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4 {
    padding: 1.4rem !important;
  }

  #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::before {
    width: 94vw;
    opacity: 0.18;
  }
}

/*
 * QYapi main-site polish lock 20260519.
 * Final pass for theme remnants, dark readability, and form controls.
 */

#app [data-v-84331c12].text-sm.text-gray-500::after {
  content: "\5F00\542F\4F60\7684\00a0 API\00a0 \5947\9047\4E4B\65C5 \2726";
}

#app input[type="checkbox"],
#app input[type="radio"],
#app input[type="range"] {
  accent-color: #7860ff !important;
}

#app .text-primary-400,
#app .text-primary-500,
#app .text-primary-600,
#app .text-primary-700,
#app .hover\:text-primary-600:hover,
#app .hover\:text-primary-700:hover {
  color: #285ff0 !important;
}

#app .bg-primary-50,
#app .bg-primary-100,
#app .hover\:bg-primary-50:hover,
#app .hover\:bg-primary-100:hover {
  background-color: rgba(229, 237, 255, 0.94) !important;
}

#app .bg-primary-500,
#app .bg-primary-600,
#app .hover\:bg-primary-600:hover,
#app .hover\:bg-primary-700:hover {
  background: linear-gradient(98deg, #4f95ff, #7860ff, #d957f0) !important;
}

#app .border-primary-300,
#app .border-primary-400,
#app .border-primary-500,
#app .focus\:border-primary-500:focus {
  border-color: rgba(105, 112, 255, 0.52) !important;
}

#app .ring-primary-500,
#app .focus\:ring-primary-500:focus {
  --tw-ring-color: rgba(120, 96, 255, 0.34) !important;
}

#app .el-checkbox__input.is-checked .el-checkbox__inner,
#app .el-radio__input.is-checked .el-radio__inner,
#app .el-switch.is-checked .el-switch__core {
  border-color: #7860ff !important;
  background-color: #7860ff !important;
}

#app .el-checkbox__input.is-checked + .el-checkbox__label,
#app .el-radio__input.is-checked + .el-radio__label {
  color: #285ff0 !important;
}

html.dark #app .text-primary-400,
html.dark #app .text-primary-500,
html.dark #app .text-primary-600,
html.dark #app .text-primary-700,
html.dark #app .dark\:text-primary-400,
html.dark #app .dark\:hover\:text-primary-400:hover {
  color: #aebcff !important;
}

html.dark #app .bg-primary-50,
html.dark #app .bg-primary-100,
html.dark #app .dark\:bg-primary-900\/20,
html.dark #app .dark\:bg-primary-900\/30,
html.dark #app .dark\:hover\:bg-primary-900\/20:hover {
  background-color: rgba(45, 58, 112, 0.74) !important;
}

html.dark #app .border-primary-300,
html.dark #app .border-primary-400,
html.dark #app .border-primary-500,
html.dark #app .dark\:border-primary-700,
html.dark #app .dark\:border-primary-800 {
  border-color: rgba(192, 174, 255, 0.3) !important;
}

html.dark #app .bg-white,
html.dark #app .bg-gray-50,
html.dark #app .bg-gray-100,
html.dark #app .dark\:bg-gray-800,
html.dark #app .dark\:bg-gray-900,
html.dark #app [role="dialog"],
html.dark #app .modal,
html.dark #app .drawer,
html.dark #app .popover,
html.dark #app .dropdown-menu {
  background-color: rgba(17, 26, 52, 0.94) !important;
  color: #f4f7ff !important;
}

html.dark #app .bg-white\/50,
html.dark #app .bg-white\/60,
html.dark #app .bg-white\/70,
html.dark #app .bg-white\/80,
html.dark #app .dark\:bg-dark-800\/50,
html.dark #app .dark\:bg-dark-900\/50 {
  background-color: rgba(20, 31, 61, 0.86) !important;
  color: #f4f7ff !important;
}

html.dark #app label,
html.dark #app .form-label,
html.dark #app .el-form-item__label,
html.dark #app .el-input__inner,
html.dark #app .el-textarea__inner,
html.dark #app .el-select__placeholder,
html.dark #app .el-table,
html.dark #app .el-table th,
html.dark #app .el-table td {
  color: #edf2ff !important;
}

html.dark #app .el-input__wrapper,
html.dark #app .el-textarea__inner,
html.dark #app .el-select__wrapper,
html.dark #app .el-table,
html.dark #app .el-table tr,
html.dark #app .el-table th.el-table__cell {
  background-color: rgba(18, 28, 55, 0.96) !important;
  border-color: rgba(179, 190, 255, 0.14) !important;
}

html.dark #app .el-table td.el-table__cell,
html.dark #app .el-table__body tr:hover > td.el-table__cell {
  background-color: rgba(21, 33, 65, 0.96) !important;
  border-color: rgba(179, 190, 255, 0.12) !important;
}

html.dark .driver-popover {
  background: rgba(17, 26, 52, 0.98) !important;
  color: #f4f7ff !important;
}

html.dark .driver-popover .driver-popover-title,
html.dark .driver-popover .driver-popover-description,
html.dark .driver-popover .driver-popover-footer,
html.dark .driver-popover .driver-popover-progress-text {
  color: #f4f7ff !important;
}

html.dark .driver-popover .driver-popover-close-btn {
  color: #c5cdeb !important;
}

/*
 * QYapi main-site dark login polish 20260606.
 * Keep this scoped to the auth landing shell so the admin dashboard dark mode
 * continues to use the broader app rules above.
 */

html.dark #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4 {
  justify-content: flex-end !important;
  background:
    linear-gradient(rgba(114, 142, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 142, 255, 0.055) 1px, transparent 1px),
    linear-gradient(118deg, #050816 0%, #0b1230 47%, #111024 100%) !important;
  background-size: 84px 84px, 84px 84px, auto !important;
  color: #f7f9ff !important;
}

html.dark #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::before {
  opacity: 0.54 !important;
  mix-blend-mode: screen !important;
  filter:
    saturate(1.12)
    contrast(1.08)
    brightness(0.72)
    drop-shadow(0 40px 90px rgba(76, 130, 255, 0.28)) !important;
}

html.dark #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::after {
  border-color: rgba(172, 190, 255, 0.2) !important;
  background:
    linear-gradient(135deg, rgba(12, 19, 43, 0.76), rgba(18, 17, 45, 0.58)) !important;
  color: rgba(232, 238, 255, 0.88) !important;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html.dark #app [data-v-84331c12].absolute.inset-0.bg-gradient-to-br {
  background:
    linear-gradient(rgba(118, 150, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 150, 255, 0.045) 1px, transparent 1px),
    linear-gradient(118deg, #050816 0%, #0a102b 48%, #101025 100%) !important;
  background-size: 84px 84px, 84px 84px, auto !important;
  opacity: 1 !important;
}

html.dark #app [data-v-84331c12].pointer-events-none::before {
  border-color: rgba(135, 160, 255, 0.16) !important;
  box-shadow: 0 0 70px rgba(84, 119, 255, 0.12) !important;
}

html.dark #app [data-v-84331c12].pointer-events-none::after {
  background: linear-gradient(135deg, rgba(92, 132, 255, 0.16), rgba(217, 87, 240, 0.08)) !important;
  opacity: 0.72 !important;
}

html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md {
  overflow: hidden;
  border-color: rgba(194, 205, 255, 0.18) !important;
  background:
    linear-gradient(150deg, rgba(16, 23, 51, 0.84), rgba(9, 13, 31, 0.72)) !important;
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(216, 173, 97, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  color: #f7f9ff !important;
}

html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(120, 157, 255, 0.16), transparent 32%),
    linear-gradient(315deg, rgba(216, 87, 240, 0.12), transparent 30%);
}

html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md > * {
  position: relative;
  z-index: 1;
}

html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md .card,
html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md .card-glass,
html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md .card-glass.rounded-2xl {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark #app [data-v-84331c12].mb-4.inline-flex.h-16.w-16 {
  border-color: rgba(176, 193, 255, 0.3) !important;
  background:
    radial-gradient(circle at 46% 28%, rgba(255, 255, 255, 0.92), rgba(210, 224, 255, 0.76) 54%, rgba(96, 120, 255, 0.26) 100%) !important;
  box-shadow:
    0 18px 48px rgba(78, 121, 255, 0.3),
    0 0 0 8px rgba(113, 135, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

html.dark #app .text-gradient {
  background-image: linear-gradient(108deg, #eaf1ff 0%, #8fb8ff 36%, #9b80ff 68%, #f3b9ff 100%) !important;
  text-shadow: 0 18px 42px rgba(111, 145, 255, 0.22) !important;
}

html.dark #app [data-v-84331c12].text-sm.text-gray-500::before,
html.dark #app [data-v-84331c12].text-sm.text-gray-500::after {
  color: rgba(231, 190, 110, 0.95) !important;
}

html.dark #app [data-v-2e6040b4].text-center::before,
html.dark #app [data-v-2e6040b4].text-center::after {
  background: linear-gradient(90deg, transparent, rgba(231, 190, 110, 0.42), transparent) !important;
}

html.dark #app [data-v-2e6040b4].text-2xl.font-bold {
  background: linear-gradient(105deg, #ffffff, #b8c8ff 54%, #f0b8ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

html.dark #app [data-v-2e6040b4].mt-2.text-sm.text-gray-500,
html.dark #app [data-v-84331c12].mt-6.text-center.text-sm,
html.dark #app [data-v-84331c12].mt-8.text-center.text-xs {
  color: rgba(212, 221, 255, 0.74) !important;
}

html.dark #app [data-v-84331c12].mt-6.text-center.text-sm a,
html.dark #app [data-v-84331c12].mt-6.text-center.text-sm .text-primary-600,
html.dark #app [data-v-84331c12].mt-6.text-center.text-sm .text-primary-500 {
  color: #9ab4ff !important;
}

html.dark #app .input-label {
  color: rgba(237, 242, 255, 0.92) !important;
}

html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md .input,
html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md input {
  border-color: rgba(186, 201, 255, 0.3) !important;
  background: rgba(5, 10, 28, 0.62) !important;
  color: #f8fbff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md .input::placeholder,
html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md input::placeholder {
  color: rgba(207, 216, 246, 0.58) !important;
}

html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md .input:focus,
html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md input:focus {
  border-color: rgba(138, 169, 255, 0.78) !important;
  background: rgba(7, 13, 33, 0.78) !important;
  box-shadow:
    0 0 0 4px rgba(94, 122, 255, 0.22),
    0 16px 36px rgba(77, 106, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md svg {
  color: rgba(218, 226, 255, 0.76) !important;
}

html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md .btn-primary,
html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md button.bg-primary-600,
html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md button.bg-primary-500 {
  background-image: linear-gradient(96deg, #54a4ff 0%, #6f78ff 42%, #a45fff 72%, #d650eb 100%) !important;
  box-shadow:
    0 18px 40px rgba(90, 115, 255, 0.32),
    0 8px 28px rgba(210, 80, 235, 0.2) !important;
}

@media (max-width: 1024px) {
  html.dark #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4 {
    justify-content: center !important;
    padding: 1.5rem !important;
  }

  html.dark #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::before {
    width: 104vw;
    opacity: 0.18 !important;
  }

  html.dark #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::after {
    display: none !important;
  }
}

@media (max-width: 640px) {
  html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md {
    padding: 1.45rem !important;
    border-radius: 1.45rem !important;
  }
}

/*
 * QYapi dark login refinement 20260606.
 * The original large QY art has a pale rectangular canvas. In dark mode use a
 * native dark brand mark instead so no light slab appears behind the form.
 */

html.dark #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::before {
  content: "QY" !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(96, 132, 255, 0.18), rgba(128, 92, 255, 0.08) 46%, transparent 70%) !important;
  border: 1px solid rgba(150, 170, 255, 0.13);
  border-radius: 999px;
  color: rgba(188, 202, 255, 0.1);
  font-size: clamp(12rem, 26vw, 25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 38px 90px rgba(66, 105, 255, 0.16))
    drop-shadow(0 14px 48px rgba(216, 87, 240, 0.08)) !important;
}

html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md button:disabled,
html.dark #app [data-v-84331c12].relative.z-10.w-full.max-w-md .btn-primary:disabled {
  opacity: 0.86 !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

@media (max-width: 1024px) {
  html.dark #app .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4::before {
    content: "" !important;
    background:
      radial-gradient(circle at 50% 48%, rgba(96, 132, 255, 0.14), rgba(128, 92, 255, 0.06) 46%, transparent 72%) !important;
    opacity: 0.72 !important;
  }
}