.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;border-radius:4px;cursor:pointer;opacity:.7}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #20b2aa;opacity:1}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:1em;top:0}.splide__pagination--ttb .splide__pagination__page{height:20px;width:5px}.splide__arrow{-ms-flex-align:center;align-items:center;background:transparent;border:0;border-radius:0;cursor:pointer;display:-ms-flexbox;display:flex;height:2.5em;-ms-flex-pack:center;justify-content:center;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2.5em;z-index:1}.splide__arrow svg{fill:black;height:2.5em;transition:fill .2s linear;width:2.5em}.splide__arrow:hover:not(:disabled) svg{fill:black}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #20b2aa;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #20b2aa;outline-offset:3px}.splide__pagination{bottom:1em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:black;border:0;border-radius: 50%;display:inline-block;height:8px; width:8px;margin:5px;padding:0;position:relative;transition:background-color .2s linear;}.splide__pagination__page.is-active{background:#bc0000;z-index:1}.splide__pagination__page:hover{background:#bc0000 ;cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #20b2aa;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #20b2aa;outline-offset:3px}.splide__slide{-webkit-tap-highlight-color:transparent;border-radius:4px}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #20b2aa;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #20b2aa}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #20b2aa;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #20b2aa}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#20b2aa}}.splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #20b2aa;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list{display:block}.splide__track--fade>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__progress__bar{background:#ccc;height:3px}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #20b2aa;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid black;outline-offset:3px}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__slider>.splide__arrows .splide__arrow--prev{left:-2.5em}.splide__slider>.splide__arrows .splide__arrow--next{right:-2.5em}.splide{padding:3em}

:root {
  --color-primary:       #bc0000;
  --color-accent:        #FDB929;
  --color-dark:          #3E3A39;
  --color-nav-highlight: #ffc107;
  --radius-lg:           25px;
  --letter-spacing-title: 7px;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  font-family: "Noto Sans TC", sans-serif;
}

.splide__slide {
  position: relative;
}

.splide__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: none;
}

.elementor-toggle-icon{
	display: inline-block !important;
}

.subtitle .pre{
	background-color: transparent;
 	border: none;
}

.splide__slide iframe {
  width: 100%;
  height: 100%;
  display: none;
}

.splide__slide img.show {
  display: block;
}

.splide__slide iframe.show {
  display: block;
}

#play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

#top-navbar {
  width: 100%;
  height: 60px;
  padding-right: 10px;
  padding-left: 10px;
  background-color: black;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  left: 0px;
  z-index: 10;
  display: flex;
}
#top-navbar .content-container-nav {
  width: 100%;
  max-width: 1290px;
  margin: auto auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#top-navbar .content-container-nav .logo {
  flex: 0 0;
  align-items: center;
  width: 40%;
}
#top-navbar .content-container-nav .logo a {
  display: flex;
  align-items: center;
}
#top-navbar .content-container-nav .logo a .logo-img {
  max-height: 45px;
}
#top-navbar .content-container-nav .nav-list {
  flex: 1 1;
  display: flex;
  justify-content: end;
  align-items: center;
  height: 100%;
}
#top-navbar .content-container-nav .nav-list .nav-item-link {
  padding-left: 15px;
  padding-right: 15px;
  cursor: pointer;
  height: 100%;
}
#top-navbar .content-container-nav .nav-list .nav-item-link a {
  letter-spacing: 1px;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
  font-size: 15px;
}
#top-navbar .content-container-nav .nav-list .nav-item-link a .text {
  padding-left: 7px;
}
#top-navbar .content-container-nav .nav-list .nav-item-link:hover {
  background-color: var(--color-nav-highlight);
}
#top-navbar .content-container-nav .nav-list .nav-item-link.active {
  background-color: var(--color-nav-highlight);
}

#sidebar-btn {
  display: none;
}

#sidebar {
  display: none;
}

.rwd-hide {
  display: block;
}

.content-container {
  width: 85%;
  max-width: 1290px;
  min-height: 100vh;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 60px;
}

.content-container-sm {
  width: 85%;
  max-width: 1290px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.border-black-block {
  border: 5px solid black;
  border-radius: 25px;
  padding: 60px;
  background-color: rgba(255, 255, 255, 0.8745098039);
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
}

#login-form-content {
  margin-top: -10px;
  position: relative;
  background-image: url("https://storage.perfectcdn.com/0c8d3a/5ux4yy1p08jqd8ub.webp ");
  background-position: center;
  background-size: cover;
}
#login-form-content .elementor-background-overlay {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: 1;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 100%);
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  z-index: 0;
}
#login-form-content .content-body {
  display: flex;
}
#login-form-content .content-body .text-block {
  width: 100%;
  flex: 1 1 auto;
}
#login-form-content .content-body .text-block .content-header-title {
  font-size: 78px;
  font-weight: 900;
  color: var(--color-primary);
  font-family: "Noto Sans TC", sans-serif;
  line-height: 1;
  letter-spacing: 0.1em;
}
#login-form-content .content-body .text-block .content-header-subtitle {
  padding-top: 10px;
  padding-bottom: 50px;
  font-size: 48px;
  font-weight: 700;
  color: var(--color-accent);
  font-family: "Noto Sans TC", Sans-serif !important;
  line-height: 1;
  letter-spacing: 0.1em;
}
#login-form-content .content-body .text-block .content-header-content {
  font-family: "Noto Sans TC", Sans-serif;
  font-size: 18px;
  letter-spacing: 2.8px;
  color: var(--color-dark);
  line-height: 30px;
}
#login-form-content .content-body .text-block .feature {
  display: flex;
  flex-wrap: wrap;
  padding-top: 30px;
  padding-bottom: 20px;
}
#login-form-content .content-body .text-block .feature .feature-item {
  display: flex;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
#login-form-content .content-body .text-block .feature .feature-item .star {
  display: flex;
  align-items: center;
  color: var(--color-accent);
  font-size: 28px;
  padding-right: 8px;
}
#login-form-content .content-body .text-block .feature .feature-item .feature-content {
  padding: 10px;
}
#login-form-content .content-body .text-block .feature .feature-item .feature-content .title {
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
  padding-bottom: 5px;
}
#login-form-content .content-body .text-block .feature .feature-item .feature-content .subtitle {
  font-size: 16px;
  letter-spacing: 1.5px;
}
#login-form-content .content-body .text-block .ligin-form {
  max-width: 450px;
  width: 100%;
}
#login-form-content .content-body .text-block .ligin-form .input-div {
  padding-bottom: 10px;
}
#login-form-content .content-body .text-block .ligin-form input {
  width: -webkit-fill-available;
  border: 1px solid rgb(133, 133, 133);
  background-color: #fff;
  border-radius: 15px;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 15px;
  height: 40px;
}
#login-form-content .content-body .text-block .ligin-form input:focus {
  outline: 1px solid var(--color-primary);
}
#login-form-content .content-body .text-block .ligin-form #login-btn {
  width: 100%;
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 15px;
  height: 40px;
  font-size: 15px;
  cursor: pointer;
}
#login-form-content .content-body .text-block .ligin-form #login-btn:hover {
  background-color: var(--color-nav-highlight);
}
#login-form-content .content-body .text-block .ligin-form .sign-up-div {
  letter-spacing: 1px;
  font-size: 15px;
}
#login-form-content .content-body .img-block {
  position: relative;
  width: 35%;
  flex: 0 0 35%;
}
#login-form-content .content-body .img-block .bear-img {
  position: absolute;
  width: 120%;
  top: -60px;
  left: -10px;
}

#feature-slide {
  position: relative;
  background-image: url("https://storage.perfectcdn.com/0c8d3a/582sikclqato1n1t.webp");
  background-position: center;
  background-size: cover;
}
#feature-slide .elementor-background-overlay {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: 1;
  background-image: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0) 100%);
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  z-index: 0;
}
#feature-slide .content-body .link-icon {
  margin-bottom: 50px;
}
#feature-slide .content-body .link-icon .link-icon-img {
  width: 100%;
}
#feature-slide .content-body .title {
  text-align: center;
  color: var(--color-dark);
  font-family: "Noto Sans TC", Sans-serif;
  font-size: 60px;
  font-weight: 900;
  letter-spacing: 7px;
  line-height: 1;
}

/* === 共用 service-block 規則 === */
:is(#service-block, #service-block-2, #service-block-3) {
  position: relative;
}
:is(#service-block, #service-block-2, #service-block-3) .title {
  text-align: center;
  color: #fff;
  font-family: "Noto Sans TC", Sans-serif;
  font-size: 60px;
  font-weight: 900;
  letter-spacing: 7px;
  line-height: 1;
}
:is(#service-block, #service-block-2, #service-block-3) .service-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
:is(#service-block, #service-block-2, #service-block-3) .service-list .service-item {
  width: 300px;
  padding: 0px;
}
:is(#service-block, #service-block-2, #service-block-3) .service-list .service-item .service-item-container {
  background-color: #fff;
  border-radius: 25px;
}
:is(#service-block, #service-block-2, #service-block-3) .service-list .service-item .service-item-container .item-subtitle {
  letter-spacing: 2px;
}
:is(#service-block, #service-block-2, #service-block-3) .elementor-background-overlay {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-image: url("https://storage.perfectcdn.com/0c8d3a/zb8iewunjjenufwd.png");
  background-position: 0 0;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
:is(#service-block, #service-block-2, #service-block-3) .elementor-shape svg {
  width: 100%;
  height: 80px;
}
:is(#service-block, #service-block-2, #service-block-3) .elementor-shape .elementor-shape-fill {
  fill: white;
}

/* Blocks 1 & 2 共用規則 */
:is(#service-block, #service-block-2) .service-list .service-item .service-item-container .item-icon {
  text-align: right;
}
:is(#service-block, #service-block-2) .service-list .service-item .service-item-container .item-icon i {
  font-size: 35px;
  color: rgba(253, 185, 41, 0.3882352941);
  position: relative;
}
:is(#service-block, #service-block-2) .service-list .service-item .service-item-container .item-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: 20px;
}

/* === 個別 service-block 規則 === */
#service-block {
  padding: 60px 0px 150px 0px;
  background-color: var(--color-primary);
}
#service-block .service-list {
  padding-top: 50px;
  padding-bottom: 30px;
}
#service-block .service-list .service-item .service-item-container {
  padding: 25px;
  margin: 15px;
  min-height: 130px;
}
#service-block .elementor-background-overlay {
  opacity: 1;
}
#service-block .elementor-shape {
  position: absolute;
  bottom: 0px;
  width: 100%;
}

#service-block-2 {
  padding: 150px 0px 60px 0px;
  background-color: var(--color-accent);
}
#service-block-2 .service-list {
  position: relative;
  padding-top: 50px;
  padding-bottom: 30px;
}
#service-block-2 .service-list .service-item .service-item-container {
  padding: 25px;
  margin: 15px;
  min-height: 130px;
  z-index: 1;
}
#service-block-2 .elementor-background-overlay {
  left: 0px;
  opacity: 0.3;
  z-index: 0;
}
#service-block-2 .elementor-shape {
  position: absolute;
  top: -5px;
  width: 100%;
}
#service-block-2 .elementor-shape svg {
  transform: scaleX(-1);
}

#service-block-3 {
  padding: 50px 0px 30px 0px;
  background-color: var(--color-dark);
}
#service-block-3 .service-list {
  position: relative;
  padding-top: 50px;
  padding-bottom: 10px;
}
#service-block-3 .service-list .service-item .service-item-container {
  padding: 20px;
  margin: 10px;
  height: 230px;
  z-index: 1;
}
#service-block-3 .service-list .service-item .service-item-container .item-icon {
  padding: 10px;
  text-align: center;
}
#service-block-3 .service-list .service-item .service-item-container .item-icon img {
  width: 100px;
  height: 100px;
}
#service-block-3 .service-list .service-item .service-item-container .item-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: 20px;
}
#service-block-3 .service-list .service-item .service-item-container .item-subtitle {
  text-align: center;
}
#service-block-3 .elementor-background-overlay {
  left: 0px;
  opacity: 1;
  z-index: 0;
}

#feedback-block {
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: var(--color-accent);
}
#feedback-block .border-black-block {
  border: none;
  background-color: #fff;
  padding: 50px 20px 50px 20px;
}
#feedback-block .border-black-block .title {
  text-align: center;
  color: var(--color-accent);
  font-family: "Noto Sans TC", Sans-serif;
  font-size: 60px;
  font-weight: 900;
  letter-spacing: 7px;
  line-height: 1;
}
#feedback-block .border-black-block .slide {
  padding-top: 50px;
  padding-bottom: 0px;
  font-family: "Noto Sans TC", Sans-serif;
  font-weight: 300;
}
#feedback-block .border-black-block .slide img {
  -o-object-fit: contain;
     object-fit: contain;
}
#feedback-block .border-black-block .slide .splide__slide {
  padding-left: 20px;
  padding-right: 20px;
  min-height: 80px;
}
#feedback-block .border-black-block .slide .splide {
  padding-top: 40px !important;
  padding-bottom: 70px !important;
}
#feedback-block .border-black-block .slide .description {
  padding: 15px;
  margin-bottom: 20px;
  background-color: #FBFBFC;
  letter-spacing: 2px;
  font-size: 15px;
  font-weight: 400;
}
#feedback-block .border-black-block .slide .content {
  display: flex;
  letter-spacing: 2px;
  font-size: 15px;
}
#feedback-block .border-black-block .slide .content .content-title {
  font-weight: bold;
}

#qa-block {
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: white;
}
#qa-block .border-black-block {
  position: relative;
  background-color: transparent;
}
#qa-block .border-black-block .title {
  text-align: center;
  color: var(--color-primary);
  font-family: "Noto Sans TC", Sans-serif;
  font-size: 60px;
  font-weight: 900;
  letter-spacing: 7px;
  line-height: 1;
  margin-bottom: 50px;
}
#qa-block .border-black-block .accordion-block {
  padding: 25px;
  background-color: #fff;
}
#qa-block .border-black-block .accordion-block .accordion-item .accordion-header-div {
  z-index: 5;
  border-bottom: 1px solid #e7e7e7;
}
#qa-block .border-black-block .accordion-block .accordion-item .accordion-header-div .accordion-toggle-btn {
  background-color: var(--color-primary);
  width: 100%;
  border-radius: 0px;
  border: none;
  text-align: left;
  padding: 15px;
  line-height: 1;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  color: white;
}
#qa-block .border-black-block .accordion-block .accordion-item .accordion-header-div .accordion-toggle-btn .elementor-toggle-icon {
  width: 8px;
}
#qa-block .border-black-block .accordion-block .accordion-item .accordion-header-div .accordion-toggle-btn .toggle-icon {
  display: none;
}
#qa-block .border-black-block .accordion-block .accordion-item .accordion-header-div .accordion-toggle-btn .toggle-icon.show {
  display: inline;
}
#qa-block .border-black-block .accordion-block .accordion-item .accordion-header-div .accordion-toggle-btn .title-text {
  padding-left: 5px;
}
#qa-block .border-black-block .accordion-block .accordion-item .accordion-body-div {
  transition-duration: 0.3s;
  overflow: hidden;
  height: 0px;
  max-height: 0px;
  font-size: 15px;
  padding-right: 15px;
  padding-left: 15px;
  letter-spacing: 1px;
  line-height: 2;
  z-index: -1;
  font-family: "Noto Sans TC", Sans-serif;
  font-weight: 300;
}
#qa-block .border-black-block .accordion-block .accordion-item .accordion-body-div.show {
  height: auto;
  padding: 15px;
  max-height: 500px;
}
#qa-block .elementor-background-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: url("https://storage.perfectcdn.com/0c8d3a/wlj40a5n1ksz99d5.png");
  background-position: 0 0;
  opacity: 1;
  z-index: 0;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

.bg-banner {
  position: relative;
  background-image: url("");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  z-index: -1;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.bg-banner img {
  transform: translateX(45px) translateY(30px) scale(0.95);
}

.footer-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: transparent;
  background-image: linear-gradient(135deg, #000000 0%, var(--color-dark) 100%);
  color: white;
  padding-top: 45px;
  padding-bottom: 45px;
  padding-right: 10px;
  padding-left: 10px;
}
.footer-area .footer-logo {
  margin-bottom: 10px;
}
.footer-area .footer-logo img {
  width: 250px;
}
.footer-area .footer-info {
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px;
  letter-spacing: 2px;
  font-family: "Noto Sans TC", Sans-serif;
  font-weight: 300;
}
.footer-area .icon-div {
  width: 100%;
  padding: 40px;
  display: flex;
  justify-content: center;
}
.footer-area .icon-div .pay-icon {
  max-width: 75%;
  width: 700px;
}
.footer-area .social-icon-div {
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: center;
}
.footer-area .social-icon-div .social-icon {
    width: 996px;
    max-width: 75%;
}
.footer-area .footer-notice {
  display: flex;
  color: white;
  justify-content: center;
  list-style-type: none;
  padding: 0px;
  margin-bottom: 0px;
  font-size: 16px;
  letter-spacing: 2px;
  font-family: "Noto Sans TC", Sans-serif;
}
.footer-area .footer-notice li a {
  color: white;
  text-decoration: none;
}
.footer-area .footer-notice li a p {
  padding-right: 10px;
  padding-left: 10px;
  font-weight: 400;
  text-align: center;
}
.footer-area .footer-copyright {
  font-family: "Noto Sans TC", Sans-serif;
  letter-spacing: 2px;
  font-weight: 300;
  text-align: center;
}

@media only screen and (max-width: 996px) {
  .rwd-hide {
    display: none !important;
  }
  .border-black-block {
    border: 5px solid black;
    border-radius: 25px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8784313725);
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1180px;
  }
  #top-navbar {
    width: 100%;
    height: 60px;
    background-color: black;
  }
  #top-navbar .content-container-nav {
    width: 100%;
    max-width: 1290px;
    padding-right: 20px;
    padding-left: 20px;
    margin: auto auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #top-navbar .content-container-nav .logo {
    display: flex;
    align-items: center;
    width: 40%;
  }
  #top-navbar .content-container-nav .logo a {
    display: flex;
    align-items: center;
  }
  #top-navbar .content-container-nav .logo a .logo-img {
    max-height: 45px;
  }
  #top-navbar .content-container-nav .nav-list .nav-item-link {
    display: none;
  }
  #sidebar-btn {
    height: 100%;
    background-color: black;
    border: 0px;
    color: gray;
    width: 40px;
    font-size: 25px;
    display: inline-block;
  }
  #sidebar {
    display: block;
    flex-direction: column;
    position: fixed;
    right: -100%;
    top: 0px;
    background-color: rgba(18, 21, 25, 0.98);
    max-width: 500px;
    width: 100%;
    height: 100%;
    transition-duration: 0.5s;
    opacity: 0;
    z-index: 11;
  }
  #sidebar .header {
    height: 60px;
    display: flex;
    flex: 0 0;
    align-items: center;
    justify-content: right;
  }
  #sidebar .header #close-sidebar-btn {
    display: inline-block;
    width: 60px;
    height: 60px;
    background-color: transparent;
    border: 0px;
    color: gray;
    font-size: 25px;
    cursor: pointer;
  }
  #sidebar .content {
    flex: 1 1;
  }
  #sidebar .content .nav-item-link {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
  }
  #sidebar .content .nav-item-link a {
    font-weight: bold;
    letter-spacing: 3px;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
  }
  #sidebar .content .nav-item-link a .text {
    padding-left: 7px;
  }
  #sidebar .content .nav-item-link:hover {
    background-color: var(--color-nav-highlight);
  }
  #sidebar .content .nav-item-link.active a {
    color: var(--color-nav-highlight);
  }
  #sidebar.show {
    display: flex;
    opacity: 1;
    right: 0px;
  }
  #login-form-content {
    position: relative;
    /* background-image: url("https://storage.perfectcdn.com/if1ji0/is35sxrey3be2jkp.png"); */
    background-position: bottom;
    background-size: cover;
  }
  #login-form-content .elementor-background-overlay {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-color: transparent;
    opacity: 1;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 100%);
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    z-index: 0;
  }
  #login-form-content .content-body {
    display: flex;
  }
  #login-form-content .content-body .text-block {
    width: 100%;
    flex: 1 1 auto;
  }
  #login-form-content .content-body .text-block .content-header-title {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: var(--color-primary);
    font-family: "Noto Sans TC", sans-serif;
    line-height: 1;
    letter-spacing: 0.1em;
  }
  #login-form-content .content-body .text-block .content-header-subtitle {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 20px;
    font-size: 25px;
    font-weight: 700;
    color: var(--color-accent);
    font-family: "Noto Sans TC", Sans-serif !important;
    line-height: 1;
    letter-spacing: 0.1em;
  }
  #login-form-content .content-body .text-block .content-header-content {
    text-align: center;
    font-family: "Noto Sans TC", Sans-serif;
    font-size: 15px;
    letter-spacing: 2.8px;
    color: var(--color-dark);
    line-height: 30px;
  }
  #login-form-content .content-body .text-block .feature {
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
    padding-top: 30px;
    padding-bottom: 20px;
  }
  #login-form-content .content-body .text-block .feature .feature-item {
    display: flex;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #login-form-content .content-body .text-block .feature .feature-item .star {
    display: flex;
    align-items: center;
    color: var(--color-accent);
    font-size: 28px;
    padding-right: 8px;
  }
  #login-form-content .content-body .text-block .feature .feature-item .feature-content {
    padding: 10px;
  }
  #login-form-content .content-body .text-block .feature .feature-item .feature-content .title {
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
    padding-bottom: 5px;
  }
  #login-form-content .content-body .text-block .feature .feature-item .feature-content .subtitle {
    font-size: 16px;
    letter-spacing: 1.5px;
  }
  #login-form-content .content-body .text-block .ligin-form {
    max-width: 450px;
    width: 100%;
  }
  #login-form-content .content-body .text-block .ligin-form .input-div {
    padding-bottom: 10px;
  }
  #login-form-content .content-body .text-block .ligin-form input {
    width: -webkit-fill-available;
    border: 1px solid rgb(133, 133, 133);
    background-color: #fff;
    border-radius: 15px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 15px;
    height: 40px;
  }
  #login-form-content .content-body .text-block .ligin-form input:focus {
    outline: 1px solid var(--color-primary);
  }
  #login-form-content .content-body .text-block .ligin-form #login-btn {
    width: 100%;
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 15px;
    height: 40px;
    font-size: 15px;
    cursor: pointer;
  }
  #login-form-content .content-body .text-block .ligin-form #login-btn:hover {
    background-color: var(--color-nav-highlight);
  }
  #login-form-content .content-body .text-block .ligin-form .sign-up-div {
    letter-spacing: 1px;
    font-size: 15px;
  }
  #login-form-content .content-body .img-block {
    display: none;
    position: relative;
    width: 35%;
    flex: 0 0 35%;
  }
  #login-form-content .content-body .img-block .bear-img {
    position: absolute;
    width: 100%;
    top: -50px;
    left: 50px;
  }
  #feature-slide {
    position: relative;
    /* background-image: url("https://storage.perfectcdn.com/if1ji0/90lm9tb7rqx23h1u.png"); */
    background-position: bottom;
    background-size: cover;
  }
  #feature-slide .elementor-background-overlay {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-color: transparent;
    opacity: 1;
    background-image: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0) 100%);
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    z-index: 0;
  }
  #feature-slide .content-body .link-icon {
    margin-bottom: 10px;
  }
  #feature-slide .content-body .link-icon .link-icon-img {
    width: 100%;
  }
  #feature-slide .content-body .title {
    text-align: center;
    color: var(--color-dark);
    font-family: "Noto Sans TC", Sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 3px;
    line-height: 1;
  }
  #service-block {
    padding: 60px 0px 60px 0px;
    background-color: var(--color-primary);
    position: relative;
  }
  #service-block .title {
    text-align: center;
    color: #fff;
    font-family: "Noto Sans TC", Sans-serif;
    font-size: 35px;
    font-weight: 900;
    letter-spacing: 7px;
    line-height: 1;
  }
  #service-block .service-list {
    padding-top: 50px;
    padding-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  #service-block .service-list .service-item {
    width: 300px;
    padding: 0px;
  }
  #service-block .service-list .service-item .service-item-container {
    background-color: #fff;
    border-radius: 25px;
    padding: 25px;
    margin: 15px;
    min-height: 100px;
  }
  #service-block .service-list .service-item .service-item-container .item-icon {
    text-align: right;
  }
  #service-block .service-list .service-item .service-item-container .item-icon i {
    font-size: 35px;
    color: rgba(253, 185, 41, 0.3882352941);
    position: relative;
  }
  #service-block .service-list .service-item .service-item-container .item-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1;
    margin-bottom: 20px;
  }
  #service-block .service-list .service-item .service-item-container .item-subtitle {
    letter-spacing: 2px;
  }
  #service-block .elementor-background-overlay {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    /* background-image: url("https://storage.perfectcdn.com/if1ji0/cxqd4s72qp8zuq5k.png"); */
    background-position: 0 0;
    opacity: 1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  }
  #service-block .elementor-shape {
    position: absolute;
    bottom: 0px;
    width: 100%;
  }
  #service-block .elementor-shape svg {
    width: 100%;
    height: 80px;
  }
  #service-block .elementor-shape .elementor-shape-fill {
    fill: white;
  }
  #service-block-2 {
    padding: 80px 0px 30px 0px;
    background-color: var(--color-accent);
    position: relative;
  }
  #service-block-2 .title {
    text-align: center;
    color: #fff;
    font-family: "Noto Sans TC", Sans-serif;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 7px;
    line-height: 2;
  }
  #service-block-2 .service-list {
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  #service-block-2 .service-list .service-item {
    width: 300px;
    padding: 0px;
  }
  #service-block-2 .service-list .service-item .service-item-container {
    background-color: #fff;
    border-radius: 25px;
    padding: 25px;
    margin: 15px;
    min-height: 130px;
    z-index: 1;
  }
  #service-block-2 .service-list .service-item .service-item-container .item-icon {
    text-align: right;
  }
  #service-block-2 .service-list .service-item .service-item-container .item-icon i {
    font-size: 35px;
    color: rgba(253, 185, 41, 0.3882352941);
    position: relative;
  }
  #service-block-2 .service-list .service-item .service-item-container .item-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1;
    margin-bottom: 20px;
  }
  #service-block-2 .service-list .service-item .service-item-container .item-subtitle {
    letter-spacing: 2px;
  }
  #service-block-2 .elementor-background-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /* background-image: url("https://storage.perfectcdn.com/if1ji0/w4xeyxzbxjd8s275.png"); */
    background-position: 0 0;
    opacity: 0.3;
    z-index: 0;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  }
  #service-block-2 .elementor-shape {
    position: absolute;
    top: -5px;
    width: 100%;
  }
  #service-block-2 .elementor-shape svg {
    width: 100%;
    height: 80px;
    transform: scaleX(-1);
  }
  #service-block-2 .elementor-shape .elementor-shape-fill {
    fill: white;
  }
  #service-block-3 {
    padding: 50px 0px 30px 0px;
    background-color: var(--color-dark);
    position: relative;
  }
  #service-block-3 .title {
    text-align: center;
    color: #fff;
    font-family: "Noto Sans TC", Sans-serif;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 7px;
    line-height: 1;
  }
  #service-block-3 .service-list {
    position: relative;
    padding-top: 50px;
    padding-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  #service-block-3 .service-list .service-item {
    width: 50%;
    padding: 0px;
  }
  #service-block-3 .service-list .service-item .service-item-container {
    background-color: #fff;
    border-radius: 25px;
    padding: 10px;
    margin: 10px;
    height: 230px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #service-block-3 .service-list .service-item .service-item-container .item-icon {
    padding: 5px;
    text-align: center;
  }
  #service-block-3 .service-list .service-item .service-item-container .item-icon img {
    width: 80px;
    height: 80px;
  }
  #service-block-3 .service-list .service-item .service-item-container .item-title {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1;
    margin-bottom: 20px;
  }
  #service-block-3 .service-list .service-item .service-item-container .item-subtitle {
    font-size: 10px;
    text-align: center;
    letter-spacing: 2px;
  }
  #service-block-3 .elementor-background-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /* background-image: url("https://storage.perfectcdn.com/if1ji0/cxqd4s72qp8zuq5k.png"); */
    background-position: 0 0;
    opacity: 1;
    z-index: 0;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  }
  #feedback-block {
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: var(--color-accent);
  }
  #feedback-block .border-black-block {
    border: none;
    background-color: #fff;
    padding: 30px 10px 30px 10px;
  }
  #feedback-block .border-black-block .title {
    text-align: center;
    color: var(--color-accent);
    font-family: "Noto Sans TC", Sans-serif;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 7px;
    line-height: 1;
  }
  #feedback-block .border-black-block .slide {
    padding-top: 20px;
    padding-bottom: 0px;
  }
  #feedback-block .border-black-block .slide img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  #feedback-block .border-black-block .slide .splide__slide {
    padding-left: 20px;
    padding-right: 20px;
    min-height: 80px;
  }
  #feedback-block .border-black-block .slide .splide {
    padding-top: 40px !important;
    padding-bottom: 70px !important;
  }
  #feedback-block .border-black-block .slide .description {
    padding: 15px;
    margin-bottom: 20px;
    background-color: #FBFBFC;
    letter-spacing: 2px;
    font-size: 15px;
    font-weight: 400;
  }
  #feedback-block .border-black-block .slide .content {
    display: flex;
    letter-spacing: 2px;
    font-size: 15px;
  }
  #feedback-block .border-black-block .slide .content .content-title {
    font-weight: bold;
  }
  #qa-block {
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: white;
  }
  #qa-block .border-black-block {
    position: relative;
    background-color: transparent;
  }
  #qa-block .border-black-block .title {
    text-align: center;
    color: var(--color-primary);
    font-family: "Noto Sans TC", Sans-serif;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 7px;
    line-height: 1;
    margin-bottom: 20px;
  }
  #qa-block .border-black-block .accordion-block {
    padding: 20px;
    background-color: #fff;
  }
  #qa-block .border-black-block .accordion-block .accordion-item .accordion-header-div {
    z-index: 5;
    border-bottom: 1px solid #e7e7e7;
  }
  #qa-block .border-black-block .accordion-block .accordion-item .accordion-header-div .accordion-toggle-btn {
    background-color: var(--color-primary);
    width: 100%;
    border-radius: 0px;
    border: none;
    text-align: left;
    padding: 15px;
    line-height: 1;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    color: white;
  }
  #qa-block .border-black-block .accordion-block .accordion-item .accordion-header-div .accordion-toggle-btn .elementor-toggle-icon {
    width: 8px;
  }
  #qa-block .border-black-block .accordion-block .accordion-item .accordion-header-div .accordion-toggle-btn .toggle-icon {
    display: none;
  }
  #qa-block .border-black-block .accordion-block .accordion-item .accordion-header-div .accordion-toggle-btn .toggle-icon.show {
    display: inline;
  }
  #qa-block .border-black-block .accordion-block .accordion-item .accordion-header-div .accordion-toggle-btn .title-text {
    padding-left: 5px;
  }
  #qa-block .border-black-block .accordion-block .accordion-item .accordion-body-div {
    transition-duration: 0.3s;
    overflow: hidden;
    height: 0px;
    max-height: 0px;
    font-size: 15px;
    padding-right: 15px;
    padding-left: 15px;
    letter-spacing: 1px;
    line-height: 2;
    z-index: -1;
    font-family: "Noto Sans TC", Sans-serif;
    font-weight: 300;
  }
  #qa-block .border-black-block .accordion-block .accordion-item .accordion-body-div.show {
    height: auto;
    padding: 15px;
    max-height: 500px;
  }
  #qa-block .elementor-background-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /* background-image: url("https://storage.perfectcdn.com/if1ji0/w4xeyxzbxjd8s275.png"); */
    background-position: 0 0;
    opacity: 1;
    z-index: 0;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  }
  .bg-banner {
    position: relative;
    /* background-image: url("https://storage.perfectcdn.com/if1ji0/wwwbdt53e4olzlr0.png"); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;
    z-index: -1;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  .bg-banner img {
    transform: translateX(10px) translateY(30px) scale(0.9);
  }
  .footer-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    background-image: linear-gradient(135deg, #000000 0%, var(--color-dark) 100%);
    color: white;
    padding-top: 45px;
    padding-bottom: 45px;
    padding-right: 10px;
    padding-left: 10px;
  }
  .footer-area .footer-logo {
    margin-bottom: 10px;
  }
  .footer-area .footer-logo img {
    width: 250px;
  }
  .footer-area .footer-info {
    text-align: center;
    margin-bottom: 10px;
    font-size: 16px;
    letter-spacing: 2px;
    font-family: "Noto Sans TC", Sans-serif;
    font-weight: 300;
  }
  .footer-area .icon-div {
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: center;
  }
  .footer-area .icon-div .pay-icon {
    max-width: 80%;
    width: 750px;
  }
  .footer-area .social-icon-div {
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: center;
  }
  .footer-area .social-icon-div .social-icon {
    width: 85%;
  }
  .footer-area .footer-notice {
    display: flex;
    color: white;
    justify-content: center;
    list-style-type: none;
    padding: 0px;
    margin-bottom: 0px;
    font-size: 16px;
    letter-spacing: 2px;
    font-family: "Noto Sans TC", Sans-serif;
  }
  .footer-area .footer-notice li a {
    color: white;
    text-decoration: none;
  }
  .footer-area .footer-notice li a p {
    padding-right: 10px;
    padding-left: 10px;
    font-weight: 400;
    text-align: center;
  }
  .footer-area .footer-copyright {
    font-family: "Noto Sans TC", Sans-serif;
    letter-spacing: 2px;
    font-weight: 300;
  }

}/*# sourceMappingURL=style.css.map */


#login-form-content,#feature-slide,#service-block,#service-block-2,#service-block-3,#feedback-block,#qa-block{
    font-size:initial;
    line-height: normal;
    color: #000;
}

#login-form-content .border-black-block,#feature-slide .border-black-block{
    -webkit-box-sizing: unset;
    -moz-box-sizing: unset;
    box-sizing: unset;
}
#login-form-content .content-container .border-black-block .content-body .text-block .ligin-form .form-group{
margin-bottom:0;
}
#login-form-content .content-body .text-block .ligin-form .checkbox{
margin:0;
}
#login-form-content .content-body .text-block .ligin-form input{
  position: unset;
}

#login-form-content a,#qa-block a{
   color: -webkit-link;
}

/* === Utility classes === */
.u-text-center-no-margin {
  margin: 0px;
  text-align: center;
}
.u-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* === Account / Notifications 共用 tab 切換（與 .styled-btn 同風格：白底黑邊紅 active 黃 hover） ===
   只套用 .account-tabs，避免影響 orders/subscriptions/drip_feed 等列表頁狀態 tab 的 .nav-pills */
.nav-pills.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.nav-pills.account-tabs > li {
  margin: 0;
  float: none; /* 覆蓋 BS3 預設 float */
}
.nav-pills.account-tabs > li > a {
  display: block;
  padding: 10px 24px;
  border: 2px solid var(--color-dark);
  border-radius: 8px;
  background: #ffffff;
  color: var(--color-dark);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-decoration: none;
  text-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  box-shadow: 2px 2px 0 var(--color-dark);
}
.nav-pills.account-tabs > li > a:hover,
.nav-pills.account-tabs > li > a:focus {
  background: var(--color-nav-highlight);
  color: var(--color-dark);
  outline: none;
  box-shadow: none;
  transform: translate(2px, 2px);
}
.nav-pills.account-tabs > li.active > a,
.nav-pills.account-tabs > li.active > a:focus,
.nav-pills.account-tabs > li.active > a:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-dark);
  box-shadow: 2px 2px 0 var(--color-dark);
  transform: none;
}
.nav-pills.account-tabs > li.active > a:hover {
  /* active 的 hover：保持紅底但給予按下感 */
  box-shadow: none;
  transform: translate(2px, 2px);
}
@media (max-width: 480px) {
  .nav-pills.account-tabs > li > a {
    padding: 9px 18px;
    font-size: 14px;
    letter-spacing: 1px;
  }
}

/* === KSDShop 表格主題化 ===
   bootstrap.css 是 Bootswatch dark theme 變體（table { background-color: #2e3338 }），
   全站所有 .bg-white-contianer 內的 .table 統一改為白底 + 主題化邊框，
   與卡片白底保持視覺一致。涵蓋：
   notifications, account, affiliates, addfunds, child_panel, orders, subscriptions,
   drip_feed, refill, refunds, tickets, updates, viewticket。 */
.bg-white-contianer .table {
  background-color: #ffffff !important;
  color: var(--color-dark);
  margin-bottom: 0;
}
.bg-white-contianer .table > thead > tr > th {
  background-color: #ffffff;
  color: var(--color-dark);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--color-dark);
  border-top: 0;
  padding: 12px 8px;
  text-shadow: none;
  vertical-align: bottom;
}
.bg-white-contianer .table > tbody > tr > td,
.bg-white-contianer .table > tbody > tr > th,
.bg-white-contianer .table > tfoot > tr > td,
.bg-white-contianer .table > tfoot > tr > th {
  background-color: #ffffff;
  color: var(--color-dark);
  border-top: 1px solid #e8e8e8;
  padding: 10px 8px;
  vertical-align: middle;
}
/* striped 條紋：原 bootstrap.css 用 #353a41（深灰），改為極淺灰與白底協調 */
.bg-white-contianer .table-striped > tbody > tr:nth-of-type(odd) > td,
.bg-white-contianer .table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: #fafafa;
}
/* hover：原 bootstrap.css 用 #49515a（深灰），改為主題輔助色（黃）的 alpha */
.bg-white-contianer .table-hover > tbody > tr:hover > td,
.bg-white-contianer .table-hover > tbody > tr:hover > th {
  background-color: rgba(253, 185, 41, 0.14);
}
/* tbody 與 tbody 之間分隔（原 #1c1e22 也是深色） */
.bg-white-contianer .table > tbody + tbody {
  border-top: 2px solid var(--color-dark);
}
/* table-bordered 邊框色（原 #1c1e22） */
.bg-white-contianer .table-bordered,
.bg-white-contianer .table-bordered > thead > tr > th,
.bg-white-contianer .table-bordered > tbody > tr > th,
.bg-white-contianer .table-bordered > tbody > tr > td,
.bg-white-contianer .table-bordered > tfoot > tr > th,
.bg-white-contianer .table-bordered > tfoot > tr > td {
  border-color: #e8e8e8;
}
/* table-responsive wrapper：去掉 BS3 預設的下邊框與 margin（在卡片內不需要） */
.bg-white-contianer .table-responsive {
  border: 0;
  margin-bottom: 0;
}

/* ============================================================
   Account / Notifications 兩頁的 component class
   - .account-page-header / .account-section / .notif-list / .toggle-switch
   - 不影響其他頁面（命名空間隔離）
   ============================================================ */

/* === 頁面標頭卡 === */
.account-page-header {
  background: linear-gradient(135deg, #fffaf1 0%, #fff5e0 100%);
  border: 2px solid var(--color-dark);
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--color-dark);
  padding: 22px 28px;
  margin-bottom: 18px;
}
.account-page-header h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--color-dark);
  text-shadow: none;
}
.account-page-header h2 i {
  color: var(--color-primary);
  margin-right: 10px;
}
.account-page-header p {
  margin: 0;
  font-size: 13px;
  color: #6b6664;
  letter-spacing: 0.5px;
  line-height: 1.6;
}

/* === 分區卡（每個 form 一個） === */
.account-section {
  background: #ffffff;
  border: 2px solid var(--color-dark);
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--color-dark);
  margin-bottom: 18px;
  overflow: hidden;
}
.account-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}
.account-section-icon {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  background: rgba(253, 185, 41, 0.18);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.account-section-titles {
  flex: 1 1 auto;
  min-width: 0;
}
.account-section-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--color-dark);
}
.account-section-desc {
  margin: 2px 0 0;
  font-size: 12px;
  color: #888;
  letter-spacing: 0.3px;
  line-height: 1.4;
}
.account-section-body {
  padding: 20px 24px 8px;
}
.account-section-footer {
  padding: 0 24px 18px;
  text-align: center;
}
.account-section-footer .styled-btn {
  margin: 0;
}

/* === 基本資料 readonly grid（2 欄響應式） === */
.account-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
  margin-bottom: 18px;
}
.account-info-grid .info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.account-info-grid .info-item.full-width {
  grid-column: 1 / -1;
}
.account-info-grid .info-label {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.5px;
}
.account-info-grid .info-value {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-dark);
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  word-break: break-all;
  min-height: 36px;
  display: flex;
  align-items: center;
}
@media (max-width: 640px) {
  .account-info-grid {
    grid-template-columns: 1fr;
  }
}

/* === Notifications 頁專用 === */
/* Action row（Email 確認 / Telegram 連結） */
.notif-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-bottom: 1px dashed #e8e8e8;
}
.notif-action-row:last-child { border-bottom: 0; }
.notif-action-icon {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  background: var(--color-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.notif-action-icon--telegram { background: #0088cc; }
.notif-action-text { flex: 1 1 auto; min-width: 0; }
.notif-action-text h4 {
  margin: 0 0 3px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-dark);
  text-shadow: none;
}
.notif-action-text p {
  margin: 0;
  font-size: 12.5px;
  color: #888;
  line-height: 1.45;
}
.notif-action-btn {
  flex: 0 0 auto;
  padding: 8px 18px;
  border-radius: 25px;
  background: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-dark);
  box-shadow: 2px 2px 0 var(--color-dark);
  cursor: pointer;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 1px;
  text-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.notif-action-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: none;
  color: #fff;
}

/* 通知列表（toggle list） */
.notif-list { padding: 6px 24px; }
.notif-row {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 14px;
}
.notif-row:last-child { border-bottom: 0; }
.notif-row-icon {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  background: rgba(253, 185, 41, 0.15);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.notif-row-name {
  flex: 1 1 auto;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: 0.3px;
  word-break: break-word;
}
.notif-row-senders {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* === Toggle Switch（共用元件） === */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
  user-select: none;
  margin: 0;
  font-weight: normal;
}
.toggle-switch input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.toggle-track {
  position: relative;
  width: 42px; height: 22px;
  background: #d1d5db;
  border-radius: 999px;
  transition: background 0.2s ease;
  flex: 0 0 42px;
  display: inline-block;
}
.toggle-track::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-track {
  background: var(--color-primary);
}
.toggle-switch input:checked + .toggle-track::before {
  transform: translateX(20px);
}
.toggle-switch input:disabled + .toggle-track {
  opacity: 0.5;
  cursor: not-allowed;
}
.toggle-switch input:focus-visible + .toggle-track {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.toggle-switch .toggle-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #6b6664;
  letter-spacing: 0.3px;
}

/* RWD 收斂 */
@media (max-width: 640px) {
  .account-page-header { padding: 18px 20px; }
  .account-page-header h2 { font-size: 19px; letter-spacing: 1.5px; }
  .account-section-header { padding: 14px 18px; }
  .account-section-body { padding: 16px 18px 6px; }
  .account-section-footer { padding: 0 18px 16px; }
  .notif-action-row { padding: 14px 18px; flex-wrap: wrap; }
  .notif-action-text { flex-basis: calc(100% - 60px); }
  .notif-action-btn { width: 100%; margin-top: 8px; }
  .notif-list { padding: 4px 18px; }
  .notif-row { flex-wrap: wrap; }
  .notif-row-senders { width: 100%; padding-left: 52px; justify-content: flex-start; }
}

/* ============================================================
   KSDShop 現代化 Modal（搭配 .info-modal class 加上 .ksd-modal 一起套用）
   - 不動 layout.twig 內舊的 .info-modal 規則（其他頁面繼續沿用）
   - 用 .info-modal.ksd-modal 雙 class 提高 specificity 蓋過舊樣式
   - 用於 changeEmailModal（account.twig）等需要現代設計的彈窗
   ============================================================ */
.info-modal.ksd-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0 !important;
  background: #ffffff;
  border: 2.5px solid var(--color-dark);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--color-dark), 0 18px 44px rgba(62, 58, 57, 0.28);
  overflow: hidden;
  cursor: auto;
}
.info-modal.ksd-modal .ksd-modal-header {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary) 0%, #d62828 100%);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.info-modal.ksd-modal .ksd-modal-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent) 0%, #f59c00 60%, var(--color-accent) 100%);
}
.info-modal.ksd-modal .ksd-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffffff;
  text-shadow: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.info-modal.ksd-modal .ksd-modal-title i {
  color: var(--color-accent);
  font-size: 14px;
  flex: 0 0 auto;
}
.info-modal.ksd-modal .ksd-modal-close {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
  position: relative;
  top: auto; right: auto;
  box-shadow: none;
  text-shadow: none;
  margin: 0;
  min-width: 0;
}
.info-modal.ksd-modal .ksd-modal-close:hover,
.info-modal.ksd-modal .ksd-modal-close:focus {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
  outline: none;
  color: #ffffff;
}
.info-modal.ksd-modal .ksd-modal-body {
  padding: 22px 24px 14px;
  background: #ffffff;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
}
.info-modal.ksd-modal .ksd-modal-body .form-group {
  margin-bottom: 14px;
}
.info-modal.ksd-modal .ksd-modal-body .form-group:last-child {
  margin-bottom: 0;
}
.info-modal.ksd-modal .ksd-modal-body label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.info-modal.ksd-modal .ksd-modal-body .form-control {
  border: 1.5px solid #d0d0d0 !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
  height: auto !important;
  background: #ffffff !important;
  color: var(--color-dark) !important;
  box-shadow: none !important;
  width: 100%;
  display: block;
}
.info-modal.ksd-modal .ksd-modal-body .form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(188, 0, 0, 0.12) !important;
  outline: none;
}
/* readonly span 偽裝成 input：灰底但仍清楚可讀 */
.info-modal.ksd-modal .ksd-modal-body span.form-control {
  background: #f5f5f5 !important;
  color: #6b6664 !important;
  word-break: break-all;
  cursor: default;
}
/* autofill 移除瀏覽器預設黃/紫 */
.info-modal.ksd-modal .ksd-modal-body input:-webkit-autofill,
.info-modal.ksd-modal .ksd-modal-body input:-webkit-autofill:hover,
.info-modal.ksd-modal .ksd-modal-body input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: var(--color-dark) !important;
  caret-color: var(--color-dark);
}
.info-modal.ksd-modal .ksd-modal-body .alert {
  margin-bottom: 16px;
  padding: 10px 14px;
  font-size: 13.5px;
}
.info-modal.ksd-modal .ksd-modal-footer {
  padding: 16px 22px;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.info-modal.ksd-modal .ksd-modal-footer .styled-btn {
  margin: 0;
  min-width: 130px;
  font-size: 15px;
  padding: 9px 22px;
  letter-spacing: 1.5px;
}
.info-modal.ksd-modal .ksd-modal-footer .ksd-modal-cancel {
  background: #ffffff !important;
  color: var(--color-dark) !important;
  border-color: var(--color-dark) !important;
}
.info-modal.ksd-modal .ksd-modal-footer .ksd-modal-cancel:hover {
  background: var(--color-nav-highlight) !important;
}

@media (max-width: 480px) {
  .info-modal.ksd-modal {
    width: calc(100vw - 24px);
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--color-dark);
  }
  .info-modal.ksd-modal .ksd-modal-header {
    padding: 14px 18px;
  }
  .info-modal.ksd-modal .ksd-modal-title {
    font-size: 15px;
    letter-spacing: 1.5px;
  }
  .info-modal.ksd-modal .ksd-modal-body {
    padding: 18px 18px 10px;
  }
  .info-modal.ksd-modal .ksd-modal-footer {
    padding: 12px 16px;
    flex-direction: column-reverse;
  }
  .info-modal.ksd-modal .ksd-modal-footer .styled-btn {
    width: 100%;
  }
}

/* ============================================================
   PerfectPanel 系統 toast 通知（themesNotify / toastr 變體）

   套件原始碼（pp-js-4.js）關鍵邏輯：
     // wrapper 模式下不加 type class
     n.optionsOverride.wrapper ? clone(wrapper) : addClass(typeClass)

   PerfectPanel 強制傳 wrapper: '#notify-wrapper'，
   而 layout.twig 的 #notify-wrapper 永遠帶 class="alert alert-success"。
   結果：不論呼叫 .success() / .error() / .warning() / .info()，
        DOM class 永遠是 .alert.alert-success（已用 themesNotify.error/.warning
        實測確認）。所以 alert-danger / alert-warning / alert-info 規則
        在此場景永不生效，故僅保留 alert-success 設計。

   真實 DOM（已用 Playwright 連 ksdshop.com 實測抓取）：
     <div id="themes-notify-container" class="themes-notify-top-right"
          aria-live="polite" role="alert">
       <div class="alert alert-success" style="display: block;">
         <div class="themes-notify-message">
           <p><b>標題</b></p>
           <div>副標</div>
         </div>
       </div>
     </div>
   ============================================================ */

/* ===== 容器位置（desktop 左下角） ===== */
body #themes-notify-container {
  position: fixed !important;
  top: auto !important;
  bottom: 24px !important;
  left: 24px !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 340px !important;
  max-width: calc(100vw - 48px) !important;
  z-index: 1100 !important;
  pointer-events: none;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
}
body #themes-notify-container > * {
  pointer-events: auto;
}

/* ===== Toast 卡片（.alert 內容） =====
   注意：display 用 !important 強制 block 是必要的（避免某些 prod 規則殘留），
   但下方另以 attribute selector 處理 inline display:none 場景，
   確保 jQuery fadeOut 完成設 inline display:none 時，視覺也消失。 */
body #themes-notify-container .alert {
  position: relative !important;
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background-color: #ffffff !important;
  background-image:
    linear-gradient(90deg, var(--color-accent) 0%, #f59c00 60%, var(--color-accent) 100%),
    linear-gradient(135deg, var(--color-dark), #555) !important;
  background-position: left 44px, top !important;
  background-size: 100% 3px, 100% 44px !important;
  background-repeat: no-repeat, no-repeat !important;
  border: 2px solid var(--color-dark) !important;
  border-left-width: 2px !important;
  border-radius: 16px !important;
  box-shadow:
    5px 5px 0 0 var(--color-dark),
    0 12px 36px rgba(0, 0, 0, 0.28) !important;
  color: var(--color-dark) !important;
  font-family: inherit !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  overflow: visible !important;
  /* 注意：不可用 fill-mode: both，否則 keyframe 100% 會鎖住 opacity，
     jQuery .fadeOut() 設 inline opacity:0 會無效，toast 不會消失。
     keyframes 用 v2 後綴避免跟舊版 prod CSS 同名衝突。 */
  animation: ksdToastInLeftV2 0.45s cubic-bezier(.34, 1.56, .64, 1) !important;
  /* 必須顯式設 transition:none，否則舊版 prod CSS 的 transition: opacity 0.4s
     會跟 jQuery .animate() 逐步改 opacity 衝突，toast 不會消失。 */
  transition: none !important;
}

/* 偵測 jQuery fadeOut 完成後設的 inline display:none，視覺強制隱藏。
   specificity (0,1,3,1) 勝過上方 (0,1,2,1)，attribute selector 確保只在 inline
   display:none 時才隱藏。 */
body #themes-notify-container .alert[style*="display: none"],
body #themes-notify-container .alert[style*="display:none"] {
  display: none !important;
}

/* alert-success 顏色強化（套件唯一會出現的 class，見上方註解） */
body #themes-notify-container .alert.alert-success {
  background-image:
    linear-gradient(90deg, var(--color-accent) 0%, #f59c00 60%, var(--color-accent) 100%),
    linear-gradient(135deg, #06C755 0%, #04a546 100%) !important;
  border-color: var(--color-dark) !important;
  color: var(--color-dark) !important;
}

/* ===== 大圓 icon 徽章（用 .alert::before 取代 layout.twig 預設小圓 icon） ===== */
body #themes-notify-container .alert::before {
  position: absolute !important;
  top: 22px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  background: #ffffff !important;
  border: 3px solid var(--color-dark) !important;
  border-radius: 50% !important;
  box-shadow: 2px 2px 0 0 var(--color-dark), 0 4px 12px rgba(0, 0, 0, 0.16) !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-shadow: none !important;
  animation: ksdToastIconV2 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.15s both !important;
}
body #themes-notify-container .alert.alert-success::before {
  content: "\f00c" !important; /* fa-check */
  color: #06C755 !important;
  background: #ffffff !important;
}

/* ===== 倒數 progress bar（用 .alert::after） ===== */
body #themes-notify-container .alert::after {
  content: '' !important;
  position: absolute !important;
  top: 41px !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 3px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  transform-origin: left center !important;
  z-index: 2 !important;
  font: inherit !important;
  color: transparent !important;
  display: block !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  animation: ksdToastProgressV2 10s linear forwards !important;
}
body #themes-notify-container .alert:hover::after {
  animation-play-state: paused !important;
}

/* ===== 訊息主體區 ===== */
body #themes-notify-container .alert .themes-notify-message {
  display: block !important;
  padding: 72px 18px 18px !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--color-dark) !important;
  word-break: break-word !important;
  white-space: normal !important;
}
/* 標題 <p> */
body #themes-notify-container .alert .themes-notify-message p {
  margin: 0 0 10px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: var(--color-dark) !important;
  line-height: 1.4 !important;
}
body #themes-notify-container .alert .themes-notify-message p b,
body #themes-notify-container .alert .themes-notify-message p strong {
  font-weight: 800 !important;
  color: var(--color-dark) !important;
}
/* 副標 chip <div> */
body #themes-notify-container .alert .themes-notify-message > div {
  font-size: 12px !important;
  color: #5a5654 !important;
  letter-spacing: 0.2px !important;
  padding: 10px 14px !important;
  background: #f3f3f3 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  margin-top: 10px !important;
  word-break: break-word !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  text-align: center !important;
}

/* ===== close 按鈕（如果系統有插入） ===== */
body #themes-notify-container .alert .close,
body #themes-notify-container .alert button.close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 24px !important;
  height: 24px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  z-index: 4 !important;
  cursor: pointer !important;
  transform: none !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
body #themes-notify-container .alert .close:hover,
body #themes-notify-container .alert button.close:hover {
  background: rgba(255, 255, 255, 0.45) !important;
  transform: rotate(90deg) !important;
  opacity: 1 !important;
}

/* ===== 動畫定義 =====
   重要原則：100% 不可寫 opacity，否則動畫結束後 opacity 會留在 keyframe 值，
   jQuery .fadeOut() 設 inline opacity:0 會被覆蓋，toast 不會消失。
   未寫 opacity 時，瀏覽器會 interpolate 到 base value (1)，動畫結束後 opacity 完全
   不受 keyframe 影響，jQuery 才能順利 fadeOut。
   keyframes 用 V2 後綴避免跟可能殘留的舊版 prod CSS 同名衝突。 */
@keyframes ksdToastInLeftV2 {
  0% { opacity: 0; transform: translateX(-30px) translateY(20px) scale(0.9); }
  100% { transform: translateX(0) translateY(0) scale(1); }
}
@keyframes ksdToastInTopV2 {
  0% { opacity: 0; transform: translateY(-20px) scale(0.92); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes ksdToastIconV2 {
  0% { transform: translateX(-50%) scale(0); }
  55% { transform: translateX(-50%) scale(1.2); }
  100% { transform: translateX(-50%) scale(1); }
}
@keyframes ksdToastProgressV2 {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* ===== RWD（mobile：上方置中，距 navbar 下方 130px） ===== */
@media (max-width: 640px) {
  body #themes-notify-container {
    top: 130px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 24px) !important;
    max-width: 360px !important;
  }
  body #themes-notify-container .alert {
    animation: ksdToastInTopV2 0.45s cubic-bezier(.34, 1.56, .64, 1) !important;
  }
  body #themes-notify-container .alert .themes-notify-message {
    font-size: 13.5px !important;
  }
  body #themes-notify-container .alert .themes-notify-message p {
    font-size: 15px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body #themes-notify-container .alert,
  body #themes-notify-container .alert::before,
  body #themes-notify-container .alert::after {
    animation: none !important;
  }
}