/**
 * Magic-H5 dark theme overrides for WQuant static site.
 * Load after main.css.
 */
:root {
  --magic-primary: #ffc300;
  --magic-primary-rgb: 255, 195, 0;
  --magic-primary-on: #000;
  --magic-bg-page: #0d0d0f;
  --magic-bg-card: #120a1b;
  --magic-bg-muted: #1a1a1a;
  --magic-bg-elevated: #121212;
  --magic-border: #572782;
  --magic-text: #fff;
  --magic-text-muted: #909090;
  --magic-gradient-border: linear-gradient(180deg, #572782 0%, #271439 100%);
}

html {
  scrollbar-color: rgba(var(--magic-primary-rgb), 0.6) transparent;
}

body {
  color: var(--magic-text) !important;
  background: var(--magic-bg-page) !important;
  padding-top: 50px;
}

body::-webkit-scrollbar-thumb {
  background-color: rgba(var(--magic-primary-rgb), 0.6);
}

body::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--magic-primary-rgb), 0.6);
}

a {
  color: var(--magic-text);
}

a:active,
a:hover,
a:focus {
  color: var(--magic-primary);
}

.uc-blue {
  color: var(--magic-primary) !important;
}

.uc-bg {
  background-color: rgba(var(--magic-primary-rgb), 0.12);
}

.uc-input:hover,
.uc-input:focus,
.uc-select:hover,
.uc-select:focus,
.uc-button:hover,
.uc-button:focus,
.uc-textarea:hover,
.uc-textarea:focus {
  border-color: var(--magic-primary);
}

.uc-btn.blue,
.uc-btn.blue-linear {
  background-color: var(--magic-primary);
  border-color: var(--magic-primary);
  color: var(--magic-primary-on);
}

.uc-btn.blue-linear {
  background: linear-gradient(
    to right,
    rgba(var(--magic-primary-rgb), 0.75) 0%,
    var(--magic-primary) 100%
  );
}

.uc-btn.blue-plain {
  color: var(--magic-primary);
  border-color: var(--magic-primary);
}

.uc-btn.blue-plain:hover {
  background-color: var(--magic-primary);
  color: var(--magic-primary-on);
}

.uc-btn.linear {
  background: linear-gradient(to bottom, #ffd54f 0%, var(--magic-primary) 100%);
  color: var(--magic-primary-on);
}

.g-crumb a:hover,
.g-crumb a:last-child:hover {
  color: var(--magic-primary);
}

.uc-prvNxt a {
  background-color: var(--magic-bg-card);
  color: var(--magic-text);
  border-color: rgba(var(--magic-primary-rgb), 0.25);
}

.uc-prvNxt a:hover,
.uc-prvNxt a.on {
  color: var(--magic-primary);
  border-color: var(--magic-primary);
}

.uc-tag.blue {
  background-color: var(--magic-primary);
  color: var(--magic-primary-on);
}

.header-phone {
  background-color: var(--magic-bg-card);
  color: var(--magic-text);
  border-bottom: 1px solid rgba(87, 39, 130, 0.4);
}

.header-phone .logo img {
  height: 32px;
  width: auto;
  max-width: 149px;
  object-fit: contain;
}

.header-pc .box {
  background-color: var(--magic-bg-card);
  border: 1px solid var(--magic-border);
}

.header-pc .list li.on > a,
.header-pc .list li:hover > a {
  background-color: var(--magic-primary);
  color: var(--magic-primary-on);
}

.header-pc .subMenu .con {
  background-color: var(--magic-bg-muted);
  border: 1px solid var(--magic-border);
}

.header-pc .subMenu a:hover {
  color: var(--magic-primary);
}

.header-pc .select-simulate,
.header-pc .select-simulate .bd .con {
  background-color: var(--magic-bg-muted);
  color: var(--magic-text);
}

.header-pc .select-simulate .bd a:hover {
  color: var(--magic-primary);
}

.alert-menu .box {
  background-color: var(--magic-bg-card);
  color: var(--magic-text);
}

.alert-menu .list li.on,
.alert-menu .list li.on > a {
  color: var(--magic-primary);
}

.g-title:after {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--magic-primary) 50%,
    transparent 100%
  );
}

.g-title.style-start:after {
  background: linear-gradient(to right, var(--magic-primary) 0%, transparent 100%);
}

.swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.35);
}

.swiper-pagination-bullet-active {
  background-color: var(--magic-primary);
}

footer {
  background-color: var(--magic-bg-muted);
  color: var(--magic-text-muted);
}

footer:after {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--magic-primary) 50%,
    transparent 100%
  );
}

footer .cpt a:hover,
footer .menu .item:hover {
  color: var(--magic-primary);
}

footer .title {
  color: var(--magic-primary);
}

footer .logo img {
  width: auto;
  height: 44px;
  max-width: 200px;
  object-fit: contain;
}

.uc-home-2-swiper {
  background-color: rgba(18, 10, 27, 0.85);
  border-top: 1px solid rgba(87, 39, 130, 0.35);
  border-bottom: 1px solid rgba(87, 39, 130, 0.35);
}

.uc-home-2 .detail h3,
.uc-home-4 .list h3,
.uc-plan .list h3,
.uc-plan .part2 h3,
.uc-product .card2 .detail h3 {
  color: var(--magic-primary);
}

.uc-home-3 .card .title .n,
.uc-product .card1 .title .n,
.uc-product .card2 .detail .name {
  background: linear-gradient(to right, var(--magic-primary) 0%, transparent 100%);
  color: var(--magic-primary-on);
}

.uc-home-3 .card.style-left .title .n {
  background: linear-gradient(to left, var(--magic-primary) 0%, transparent 100%);
  text-align: right;
}

.uc-home-3 .card .part,
.uc-product .card1 .part {
  background-color: rgba(var(--magic-primary-rgb), 0.1);
  border: 1px solid rgba(87, 39, 130, 0.35);
}

.uc-home-3 .card .con,
.uc-home-3 .card .con2,
.uc-product .card1 .detail p {
  background: linear-gradient(
    to right,
    rgba(18, 10, 27, 0.95) 0%,
    transparent 100%
  );
  color: var(--magic-text);
}

.uc-home-3 .card.style-left .con,
.uc-home-3 .card.style-left .con2 {
  background: linear-gradient(to left, rgba(18, 10, 27, 0.95) 0%, transparent 100%);
}

.uc-home-3 .card .con2 {
  color: var(--magic-primary);
}

.uc-home-5 .card {
  background-color: var(--magic-bg-card);
  border: 1px solid var(--magic-border);
  border-radius: 1rem;
}

.uc-home-6 .card {
  background: linear-gradient(
    to bottom,
    rgba(87, 39, 130, 0.35) 0%,
    var(--magic-bg-card) 100%
  );
  border-color: rgba(var(--magic-primary-rgb), 0.45);
}

.uc-home-6 .card .cd {
  background-color: var(--magic-bg-muted);
  color: var(--magic-text);
}

.uc-home-6 .card .bd {
  color: var(--magic-text-muted);
}

.uc-plan .list .line {
  background-color: var(--magic-primary);
}

.uc-plan .part2 {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(var(--magic-primary-rgb), 0.12) 100%
  );
  border: 1px solid rgba(87, 39, 130, 0.35);
}

.uc-product .card2 {
  background: linear-gradient(
    to right,
    rgba(var(--magic-primary-rgb), 0.1) 0%,
    transparent 100%
  );
}

.uc-product .card2 .detail h3 {
  border-bottom-color: var(--magic-primary);
}

.uc-product .card2 .detail p {
  color: var(--magic-text-muted);
}

.g-bannerBox {
  background-color: var(--magic-bg-page);
}

.g-bannerBox.style-about {
  background-color: var(--magic-bg-card);
}

body {
  background: var(--magic-bg-page) !important;
}

.uc-about-4 .list li {
  background: linear-gradient(
    to right,
    rgba(var(--magic-primary-rgb), 0.08) 0%,
    transparent 100%
  );
}

.uc-about-4 .list .txt {
  color: var(--magic-text-muted);
}

.uc-about-5 .btm .uc-btn {
  background-color: var(--magic-primary);
  color: var(--magic-primary-on);
}

.uc-contact .form li {
  background-color: rgba(18, 10, 27, 0.92);
  border-color: var(--magic-border);
}

.uc-contact .form .txt {
  opacity: 1;
  color: var(--magic-text-muted);
}

.uc-news .list .item {
  background-color: var(--magic-bg-card);
  border: 1px solid rgba(87, 39, 130, 0.35);
}

.uc-news .list .btm {
  color: var(--magic-text-muted);
}

.uc-article .time,
.uc-privacy .time,
.uc-terms .time {
  color: var(--magic-text-muted);
}

.uc-privacy .box,
.uc-terms .box,
.uc-article .box {
  color: var(--magic-text);
}

.uc-home-6 .card {
  background: linear-gradient(
    to bottom,
    rgba(87, 39, 130, 0.35) 0%,
    var(--magic-bg-card) 100%
  );
}

.uc-plan .part2 {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(var(--magic-primary-rgb), 0.12) 100%
  );
}

.header-pc .logo img {
  width: auto;
  height: 36px;
  max-width: 180px;
  object-fit: contain;
}