@charset "UTF-8";

html,
body {
  min-width: 0 !important;
  letter-spacing: 0;
}

button,
select {
  font-family: inherit;
}

.header button,
.zuopin_menu button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.header_search button {
  float: right;
  height: 34px;
  border: 0;
  background: transparent;
}

.header_right form {
  display: inline;
}

.header_right form button,
.theme-switch {
  padding: 0;
  line-height: 60px;
  color: rgba(255,255,255,.6);
}

.header_right form button:hover,
.theme-switch:hover {
  color: #31c27c;
}

.column_menu ul.column_submenu span {
  display: block;
  padding: 8px 10px;
  color: #777;
}

.home-banner-grid > a,
.home-banner-grid > div {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #1d1d1d;
}

.home-banner-grid > * img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-notice {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 3.6%;
  padding: 14px 18px;
  border-left: 3px solid #31c27c;
  background: #1c1c1c;
  color: #999;
}

.template-notice > i {
  color: #31c27c;
  font-size: 22px;
}

.template-notice strong {
  color: #ddd;
  font-weight: 700;
}

.template-notice p {
  margin-top: 4px;
  line-height: 24px;
}

.template-notice > a {
  margin-left: auto;
  color: #31c27c;
  white-space: nowrap;
}

.template-section-subtitle,
.template-list-head p {
  margin: -10px 0 20px 17px;
  color: #777;
  line-height: 24px;
}

.resource-kind {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 7px;
  border-radius: 2px;
  background: rgba(49,194,124,.92);
  color: #07110b;
  font-size: 12px;
}

.template-empty {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  margin: 20px 3.6%;
  border: 1px dashed #303030;
  color: #777;
}

.template-empty i {
  color: #3f3f3f;
  font-size: 38px;
}

.tagmore {
  clear: both;
  margin: 70px auto;
  text-align: center;
}

.tagmore a {
  display: inline-flex;
  width: 260px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: #31c27c;
  color: #07110b;
  font-weight: 700;
}

.template-link-tabs {
  margin-top: 30px;
}

.template-list-page {
  min-height: calc(100vh - 180px);
  padding-top: 34px;
}

.template-list-page #page {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.template-list-head {
  margin-bottom: 10px;
}

.latest-flow-head {
  margin: 8px 3.6% 32px;
  padding: 26px 28px;
  border-left: 3px solid #31c27c;
  background: #1b1b1b;
}

.latest-flow-head > span {
  display: inline-flex;
  height: 22px;
  align-items: center;
  padding: 0 8px;
  border-radius: 12px;
  background: rgba(49,194,124,.12);
  color: #31c27c;
  font-size: 12px;
  font-weight: 700;
}

.latest-flow-head h1 {
  margin-top: 10px;
  color: #eee;
  font-size: 32px;
  line-height: 42px;
  font-weight: 700;
}

.latest-flow-head > p {
  margin-top: 6px;
  color: #777;
}

.latest-flow-stats {
  display: flex;
  gap: 46px;
  margin-top: 22px;
}

.latest-flow-stats div {
  display: grid;
  gap: 4px;
}

.latest-flow-stats strong {
  color: #31c27c;
  font-size: 22px;
}

.latest-flow-stats small {
  color: #777;
}

.download-collection-head {
  display: grid;
  gap: 24px;
  margin: 8px 3.6% 34px;
  padding: 24px 0 26px;
  border-bottom: 1px solid #2c2c2c;
}

.download-collection-kicker {
  color: #31c27c;
  font-size: 12px;
  font-weight: 700;
}

.download-collection-head h1 {
  margin-top: 8px;
  color: #eee;
  font-size: 30px;
  line-height: 42px;
  font-weight: 700;
}

.download-collection-head p {
  margin-top: 5px;
  color: #777;
  line-height: 24px;
}

.download-collection-head p strong {
  color: #aaa;
  font-weight: 700;
}

.download-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.download-category-filter a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  color: #8a8a8a;
  font-size: 14px;
}

.download-category-filter a:hover,
.download-category-filter a.is-active {
  border-color: #31c27c;
  color: #31c27c;
}

.download-category-filter strong {
  color: #5f6763;
  font-size: 12px;
  font-weight: 600;
}

.template-search-box {
  display: flex;
  max-width: 720px;
  margin: 10px 3.6% 34px;
}

.template-search-box input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  background: #242424;
  color: #ddd;
}

.template-search-box button {
  width: 112px;
  border: 0;
  background: #31c27c;
  color: #07110b;
  cursor: pointer;
}

.template-static {
  width: calc(100% - 64px);
  max-width: 1500px;
  margin: 0 auto;
  text-align: left;
}

.template-static h1 {
  margin-bottom: 24px;
  text-align: left;
  font-size: 30px;
}

.template-static-body {
  color: #aaa;
  font-size: 16px;
  line-height: 2;
}

.template-static-body img {
  max-width: 100%;
  height: auto;
}

.template-status-page {
  display: flex;
  min-height: 62vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 60px 24px;
  text-align: center;
}

.template-status-page > strong {
  color: #31c27c;
  font-size: 84px;
  line-height: 1;
}

.template-status-page h1 {
  margin: 24px 0 10px;
  color: #eee;
  font-size: 28px;
}

.template-status-page p {
  color: #777;
}

.template-status-page div {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.template-status-page a,
.detail-lock-notice a,
.detail-download-list a,
.detail-download-anchor {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid #333;
  color: #aaa;
}

.template-status-page a:first-child,
.detail-lock-notice a.primary,
.detail-download-list a:hover,
.detail-download-anchor {
  border-color: #31c27c;
  background: #31c27c;
  color: #07110b;
}

.gallerypic .cms-article-gallery video {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  background: #000;
}

.remote-article-gallery {
  color: #aaa;
  line-height: 1.9;
}

.remote-article-gallery > :not(img):not(a):not(video) {
  max-width: 1100px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 28px;
  padding-left: 28px;
}

.detail-description {
  color: #888;
}

.detail-side-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0;
}

.detail-side-tags a {
  padding: 4px 9px;
  border: 1px solid #2d2d2d;
  border-radius: 14px;
  color: #888;
  font-size: 12px;
}

.detail-viewer-tip {
  color: #666;
  font-size: 13px !important;
}

.detail-lock-notice {
  padding: 46px 24px;
  text-align: center;
  background: #181818;
}

.detail-lock-notice h2 {
  color: #ddd;
  font-size: 22px;
  font-weight: 700;
}

.detail-lock-notice p {
  margin: 10px 0 22px;
  color: #888;
}

.detail-lock-notice div {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.detail-downloads {
  scroll-margin-top: 70px;
  margin: 34px clamp(20px,1.7vw,32px) 0;
  padding: 38px clamp(22px,2.4vw,44px);
  border-radius: 6px;
  background: #181818;
}

.detail-downloads .autowidth {
  padding: 0;
}

.detail-downloads p {
  color: #777;
}

.detail-download-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.is-download-gallery {
  background: #111;
}

.gallerypic.xiaotu .download-article-gallery,
.download-article-gallery {
  display: block;
  position: relative;
}

.download-article-frame {
  position: relative;
}

.download-article-content {
  max-height: none;
  overflow: visible;
}

.download-article-gallery.is-collapsible:not(.is-expanded) .download-article-content {
  max-height: var(--download-collapse-height,480px);
  overflow: hidden;
}

.download-article-fade {
  display: none;
}

.download-article-gallery.is-collapsible:not(.is-expanded) .download-article-fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(to bottom,rgba(17,17,17,0),#111 88%);
}

.download-copy {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 26px clamp(20px,3.2vw,54px) 40px;
  color: #a2a2a2;
  font-size: 15px;
  line-height: 1.9;
}

.download-copy h1,
.download-copy h2,
.download-copy h3,
.download-copy h4 {
  margin: 24px 0 12px;
  color: #e5e5e5;
  font-weight: 700;
  line-height: 1.5;
}

.download-copy h1 { font-size: 24px; }
.download-copy h2 { font-size: 21px; }
.download-copy h3,
.download-copy h4 { font-size: 18px; }
.download-copy p,
.download-copy ul,
.download-copy ol,
.download-copy blockquote,
.download-copy table { margin: 10px 0; }
.download-copy ul { list-style: disc; padding-left: 22px; }
.download-copy ol { list-style: decimal; padding-left: 22px; }
.download-copy a { display: inline; color: #31c27c; }

.download-article-toggle {
  display: flex;
  min-width: 176px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px auto 32px;
  border: 1px solid #323b36;
  border-radius: 3px;
  background: #1a1e1c;
  color: #31c27c;
  cursor: pointer;
}

.download-article-toggle[hidden] { display: none; }
.download-article-toggle i { transition: transform .2s ease; }
.download-article-toggle.is-open i { transform: rotate(180deg); }

.download-preview-groups {
  display: grid;
  gap: 24px;
  padding: 18px clamp(10px,1.4vw,22px) 38px;
}

.download-preview-group h2 {
  margin: 0 0 14px;
  color: #cfcfcf;
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
}

.gallerypic.xiaotu .download-preview-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  align-items: start;
  gap: 8px;
}

.download-preview-item {
  position: relative;
  min-width: 0;
  margin: 0 0 20px;
  overflow: hidden;
  background: transparent;
}

.gallerypic.xiaotu .download-preview-item {
  margin: 0;
}

.gallerypic.xiaotu .download-preview-item a {
  width: 100%;
  height: auto;
}

.gallerypic.xiaotu .download-preview-item img {
  width: 100%;
  height: auto;
  margin: 0;
  object-fit: initial;
}

.download-preview-item figcaption {
  padding: 12px 14px;
  color: #aaa;
  font-size: 14px;
  line-height: 22px;
}

.gallerypic.xiaotu .download-preview-item figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  max-height: 58px;
  overflow: hidden;
  padding: 24px 10px 7px;
  background: linear-gradient(to bottom,rgba(5,5,5,0),rgba(5,5,5,.58));
  color: rgba(255,255,255,.86);
  font-size: 13px;
  line-height: 18px;
  text-shadow: 0 1px 2px rgba(0,0,0,.42);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.zuopin p a.detail-download-anchor {
  display: inline-flex;
  min-height: 34px;
  height: 34px;
  padding: 0 13px;
  margin: 6px 0 0;
  border-radius: 3px;
  color: #fff;
  line-height: 32px;
  font-size: 13px;
}

.zuopin p a.detail-download-anchor:hover {
  border-color: #25a967;
  background: #25a967;
  color: #fff;
}

.detail-related .databox {
  display: grid !important;
  height: auto !important;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 34px 26px;
  column-count: initial;
}

.detail-related .databox .img-item {
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
}

.gallerypic:not(.xiaotu) .download-preview-grid {
  display: block;
}

.gallerypic:not(.xiaotu) .download-preview-item img {
  width: 100%;
  height: auto;
  margin: 0;
}

.zuopin_menu form {
  margin: 0;
}

.zuopin_menu button,
.zuopin_menu a {
  display: block;
  padding: 0;
  color: inherit;
}

.zuopin_menu button span,
.zuopin_menu a span {
  font-size: 12px;
}

.template-alert,
.yt-alert {
  margin: 14px 0;
  padding: 12px 15px;
  border-left: 3px solid #31c27c;
  background: #1e2421;
  color: #aaa;
}

.template-alert.is-error,
.yt-alert.error {
  border-left-color: #e85d5d;
  background: #261b1b;
  color: #e9a0a0;
}

.auth-secondary-links {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  color: #888;
  font-size: 14px;
}

.auth-secondary-links a,
.recovery-tabs button.active {
  color: #31c27c;
}

.auth-submit.secondary {
  background: #262626;
  color: #31c27c;
}

.recovery-send-button.is-sent,
.recovery-send-button.is-sent:hover {
  background: #303230;
  color: #929892;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.recovery-send-button:disabled:not(.is-sent) {
  opacity: .72;
  cursor: wait;
}

.recovery-tabs {
  display: flex;
  margin-bottom: 18px;
  border-bottom: 1px solid #2b2b2b;
}

.recovery-tabs button {
  flex: 1;
  height: 42px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #888;
  cursor: pointer;
}

.recovery-tabs button.active {
  border-bottom-color: #31c27c;
}

.recovery-send {
  margin-bottom: 18px;
  padding-bottom: 0;
  border-bottom: 0;
}

.auth-field-hint {
  display: block;
  margin: -2px 0 8px;
  color: #707070;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.recovery-account {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.recovery-account input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  background: #242424;
  color: #eee;
}

.recovery-account .auth-field {
  flex: 1;
  min-width: 0;
}

.recovery-account .auth-field input {
  padding-left: 46px;
}

.recovery-account button {
  width: 100px;
  border: 0;
  border-radius: 4px;
  background: #31c27c;
  color: #07110b;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.recovery-account button:hover {
  background: #46d891;
}

.recovery-account button:active {
  transform: translateY(1px);
}

.recovery-account button:disabled {
  opacity: .68;
  cursor: wait;
}

.recovery-captcha-row .auth-captcha-refresh,
.recovery-captcha-row .auth-captcha-render,
.recovery-captcha-row .auth-captcha-render img {
  height: 48px !important;
}

.recovery-send-feedback {
  min-height: 0;
  margin: -4px 0 0;
}

.recovery-send-feedback[hidden] {
  display: none;
}

.auth-shell-forgot .auth-panel {
  overflow-y: auto;
}

.membership-current {
  display: flex;
  min-height: 260px;
  justify-content: center;
  flex-direction: column;
  padding: 32px;
  border: 1px solid rgba(49,194,124,.2);
  background: #1b1b1b;
}

.membership-current span,
.membership-current p {
  color: #777;
}

.membership-current strong {
  margin: 10px 0;
  color: #31c27c;
  font-size: 26px;
}

.membership-package-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  align-items: start;
}

.membership-package{min-height:0;}
.membership-package-desc{min-height:0;}

.membership-buy {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 0;
  border-radius: 3px;
  background: #31c27c;
  color: #07110b;
  font-weight: 700;
  cursor: pointer;
}

.membership-benefits .is-yes:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #31c27c;
}

.membership-benefits .is-no:before {
  content: "×";
  position: absolute;
  left: 0;
  color: #777;
}

.table-scroll {
  overflow-x: auto;
}

.profile-shell .yt-profile {
  display: block;
}

.profile-shell .yt-profile-nav {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid #292929;
}

.profile-shell .yt-profile-nav button {
  flex: 0 0 auto;
  min-width: 108px;
  height: 46px;
  border: 0;
  border-top: 2px solid transparent;
  background: transparent;
  color: #888;
  cursor: pointer;
}

.profile-shell .yt-profile-nav button.active {
  border-top-color: #31c27c;
  background: #1d1d1d;
  color: #31c27c;
}

.profile-shell .yt-profile-pane {
  padding: 24px 0 0;
}

.profile-shell .yt-panel,
.profile-shell .yt-info-box {
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 5px;
  background: #1b1b1b;
}

.profile-shell .yt-field span {
  color: #888;
}

.profile-shell .yt-input,
.profile-shell .yt-select {
  background: #242424;
}

.profile-shell .yt-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
}

.commerce-btn.is-disabled {
  cursor: not-allowed;
  opacity: .55;
}

.commerce-accent {
  color: #31c27c !important;
}

.commerce-alert {
  margin-top: 18px;
  padding: 12px 14px;
  border-left: 3px solid #31c27c;
  background: #18211d;
}

.commerce-alert-danger {
  border-left-color: #e85d5d;
  background: #271a1a;
  color: #e6a3a3;
}

.commerce-payment-form label {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}

.commerce-payment-form select {
  height: 44px;
  padding: 0 12px;
  border: 1px solid #303330;
  background: #222422;
  color: #ddd;
}

.commerce-result {
  max-width: 780px;
  margin: 8vh auto 0;
  padding: 48px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  background: #171817;
}

.commerce-result-icon i {
  color: #31c27c;
  font-size: 58px;
}

.commerce-result-failed .commerce-result-icon i {
  color: #e85d5d;
}

.commerce-result h1 {
  margin: 14px 0 10px;
  color: #fff;
  font-size: 38px;
  font-weight: 700;
}

.commerce-result > p {
  color: #888;
  line-height: 28px;
}

.commerce-result .commerce-summary {
  margin-top: 26px;
}

.commerce-secret {
  display: grid;
  grid-template-columns: 100px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.commerce-secret span {
  color: #777;
}

.commerce-secret strong {
  color: #eee;
  word-break: break-all;
}

.commerce-secret button {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #31c27c;
  background: transparent;
  color: #31c27c;
  cursor: pointer;
}

.commerce-secret-block {
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.commerce-secret-block .commerce-secret {
  padding-bottom: 7px;
  border-bottom: 0;
}

.commerce-secret-note {
  margin: 0 0 14px 112px;
  color: #737a76;
  font-size: 12px;
  line-height: 1.7;
}

html[data-theme="light"] .download-commerce-page {
  background: #f2f5f3;
  color: #56605b;
}

html[data-theme="light"] .download-commerce-page .commerce-shell {
  background: #f2f5f3;
}

html[data-theme="light"] .download-commerce-page .commerce-copy h1,
html[data-theme="light"] .download-commerce-page .commerce-card h2,
html[data-theme="light"] .download-commerce-page .commerce-card h3,
html[data-theme="light"] .download-commerce-page .commerce-result h1 {
  color: #171c19;
}

html[data-theme="light"] .download-commerce-page .commerce-copy p,
html[data-theme="light"] .download-commerce-page .commerce-result > p,
html[data-theme="light"] .download-commerce-page .commerce-summary-row,
html[data-theme="light"] .download-commerce-page .commerce-secret span {
  color: #68736d;
}

html[data-theme="light"] .download-commerce-page .commerce-card,
html[data-theme="light"] .download-commerce-page .commerce-result {
  border-color: #dce4df;
  background: #fff;
  box-shadow: 0 12px 32px rgba(37,55,46,.07);
}

html[data-theme="light"] .download-commerce-page .commerce-summary-row strong,
html[data-theme="light"] .download-commerce-page .commerce-secret strong {
  color: #202722;
}

html[data-theme="light"] .download-commerce-page .commerce-secret-block {
  border-color: #e4e9e6;
}

html[data-theme="light"] .download-commerce-page .commerce-secret-note {
  color: #7a847f;
}

html[data-theme="light"] .download-commerce-page .commerce-btn:not(.commerce-btn-primary) {
  border-color: #ccd6d0;
  background: #fff;
  color: #4f5a54;
}

html[data-theme="light"] .download-commerce-page .commerce-btn-primary {
  border-color: #29b873;
  background: #31c27c;
  color: #07100b;
}

html[data-theme="light"] .download-commerce-page .commerce-secret button {
  border-color: #28a969;
  background: #f5fbf8;
  color: #168c57;
}

html[data-theme="light"] .download-commerce-page .commerce-visual {
  background: #e5ebe7;
}

html[data-theme="light"] body:not(.commerce-page):not(.auth-page) {
  background: #f5f7f6;
  color: #555f59;
}

html[data-theme="light"] .header,
html[data-theme="light"] .column_menu ul,
html[data-theme="light"] .column_menu,
html[data-theme="light"] .footer {
  background: #fff;
}

html[data-theme="light"] .header,
html[data-theme="light"] .column_menu,
html[data-theme="light"] .footer {
  border-color: #dfe5e1;
}

html[data-theme="light"] a,
html[data-theme="light"] .header_right form button,
html[data-theme="light"] .theme-switch {
  color: #66716b;
}

html[data-theme="light"] .xiaotitle,
html[data-theme="light"] .latest-flow-head h1,
html[data-theme="light"] .download-collection-head h1,
html[data-theme="light"] .template-static h1,
html[data-theme="light"] .template-status-page h1,
html[data-theme="light"] .zuopin h1 {
  color: #202622;
}

html[data-theme="light"] .template-static-body {
  color: #59635d;
}

html[data-theme="light"] .header .header_search,
html[data-theme="light"] .header .header_search input,
html[data-theme="light"] .template-notice,
html[data-theme="light"] .latest-flow-head,
html[data-theme="light"] .template-empty,
html[data-theme="light"] .home-quick-links,
html[data-theme="light"] .detail-lock-notice,
html[data-theme="light"] .detail-downloads,
html[data-theme="light"] .download-copy,
html[data-theme="light"] .profile-shell .yt-panel,
html[data-theme="light"] .profile-shell .yt-info-box {
  background: #fff;
  color: #68716c;
}

html[data-theme="light"] .download-collection-head {
  border-color: #dfe5e1;
}

html[data-theme="light"] .download-copy h1,
html[data-theme="light"] .download-copy h2,
html[data-theme="light"] .download-copy h3,
html[data-theme="light"] .download-copy h4 {
  color: #202622;
}

html[data-theme="light"] .is-download-gallery,
html[data-theme="light"] .download-preview-item {
  background: #edf1ee;
}

html[data-theme="light"] .download-copy {
  background: transparent;
}

html[data-theme="light"] .download-article-gallery.is-collapsible:not(.is-expanded) .download-article-fade {
  background: linear-gradient(to bottom,rgba(237,241,238,0),#edf1ee 88%);
}

html[data-theme="light"] .download-article-toggle {
  border-color: #cbd6d0;
  background: #fff;
  color: #168f5a;
}

html[data-theme="light"] .download-article-toggle:hover {
  border-color: #31c27c;
  background: #f3fbf7;
}

html[data-theme="light"] .column_menu ul.column_submenu {
  border-color: #dce6e0;
  border-left-color: rgba(49,194,124,.58);
  background: #fff;
  box-shadow: 18px 18px 48px rgba(35,48,41,.18);
}

html[data-theme="light"] .column_menu ul.column_submenu li a {
  color: #59665f;
}

html[data-theme="light"] .column_menu ul.column_submenu li a:hover {
  color: #168f5a;
}

html[data-theme="light"] .column_menu ul.column_submenu span {
  color: #7d8882;
}

html[data-theme="light"] .zuopin_menu ul li,
html[data-theme="light"] .zuopin_menu button,
html[data-theme="light"] .zuopin_menu a {
  color: #f5f7f6;
}

html[data-theme="light"] .gallery_xihuan.active i {
  color: #ef3f45;
}

html[data-theme="light"] .gallery_shoucang.active i {
  color: #ffb020;
}

html[data-theme="light"] .column_right,
html[data-theme="light"] .zuopin {
  background: #eef2ef;
}

html[data-theme="light"] .galleryList .img-box.cover-loading {
  background: #e8eeea;
}

html[data-theme="light"] .layui-laypage a,
html[data-theme="light"] .layui-laypage > span {
  border-color: #d9e1dc;
  background: #fff;
  color: #66716b;
}

html[data-theme="light"] .layui-laypage .layui-laypage-curr {
  border-color: #31c27c;
  background: #31c27c;
  color: #fff;
}

html[data-theme="light"] .layui-laypage .layui-disabled {
  background: #eef2ef;
  color: #a3aca7;
}

html[data-theme="light"] .pagination-tools {
  color: #6f7a74;
}

html[data-theme="light"] .pagination-jump input {
  border-color: #cfd9d3;
  background: #fff;
  color: #39433e;
}

html[data-theme="light"] .pagination-jump button {
  border-color: #bdd8ca;
  background: #fff;
  color: #4f8068;
}

html[data-theme="light"] .pagination-jump button:hover {
  background: #31c27c;
  color: #fff;
}

/* Keep light surfaces coherent instead of inheriting fixed dark component colors. */
html[data-theme="light"] .home-quick-link {
  color: #46554d;
}

html[data-theme="light"] .home-quick-link:hover {
  color: #168f5a;
}

html[data-theme="light"] .home-quick-icon {
  border: 1px solid #d7e6de;
  background: #edf7f1;
  color: #168f5a;
  box-shadow: 0 8px 18px rgba(47,78,62,.1);
}

html[data-theme="light"] .home-quick-link.is-pending:hover {
  color: #46554d;
}

html[data-theme="light"] .home-quick-icon.is-tone-crimson{border-color:#f1d4d4;background:#fff1f1;color:#c8464b;}
html[data-theme="light"] .home-quick-icon.is-tone-cyan{border-color:#cfe9e8;background:#eefafa;color:#318e95;}
html[data-theme="light"] .home-quick-icon.is-tone-violet{border-color:#e1d5ee;background:#f8f2fd;color:#8559b0;}
html[data-theme="light"] .home-quick-icon.is-tone-rose{border-color:#f0d4df;background:#fff2f7;color:#c64b7c;}
html[data-theme="light"] .home-quick-icon.is-tone-purple{border-color:#ddd5ed;background:#f6f2fc;color:#7353aa;}
html[data-theme="light"] .home-quick-icon.is-tone-orange{border-color:#f0ddcd;background:#fff6ee;color:#c66d2a;}
html[data-theme="light"] .home-quick-icon.is-tone-coral{border-color:#f0d7d1;background:#fff3f0;color:#c6513f;}
html[data-theme="light"] .home-quick-icon.is-tone-gold{border-color:#eddfbd;background:#fff8e8;color:#a97b18;}
html[data-theme="light"] .home-quick-icon.is-tone-red{border-color:#efd6d3;background:#fff3f2;color:#bd4b45;}
html[data-theme="light"] .home-quick-icon.is-tone-blue{border-color:#d4e1ed;background:#f1f7fc;color:#3e7daf;}
html[data-theme="light"] .home-quick-icon.is-image{border:0;background:transparent;box-shadow:none;}
html[data-theme="light"] .home-quick-icon.is-image img{filter:drop-shadow(0 5px 8px rgba(52,64,57,.14));}

html[data-theme="light"] .tagmore a {
  color: #0b3522;
}

html[data-theme="light"] .header {
  box-shadow: 0 1px 0 rgba(50,72,60,.05);
}

html[data-theme="light"] .header .header_search {
  border: 1px solid #d9e3dd;
  background: #f1f5f2;
}

html[data-theme="light"] .header .header_search input {
  background: transparent;
  color: #2f3c35;
}

html[data-theme="light"] .header .header_search input::placeholder {
  color: #7b8881;
  opacity: 1;
}

html[data-theme="light"] .header .header_search i,
html[data-theme="light"] .header_right a,
html[data-theme="light"] .header_right form button,
html[data-theme="light"] .theme-switch {
  color: #435149;
}

html[data-theme="light"] .header_right a:hover,
html[data-theme="light"] .header_right form button:hover,
html[data-theme="light"] .theme-switch:hover,
html[data-theme="light"] .header_right .header-auth-register {
  color: #168f5a;
}

html[data-theme="light"] .header_right .header-auth-register {
  font-weight: 600;
}

html[data-theme="dark"] .header_right .header-auth-link {
  color: #c5cec9;
}

html[data-theme="dark"] .header_right .header-auth-link:hover,
html[data-theme="dark"] .header_right .header-auth-register {
  color: #31c27c;
}

html[data-theme="dark"] .header_right .header-auth-register {
  font-weight: 600;
}

html[data-theme="light"] .zuopin_site_profile .zuopin_renwu_title a,
html[data-theme="light"] .zuopin h1 {
  color: #243029;
}

html[data-theme="light"] .zuopin p,
html[data-theme="light"] .detail-description {
  color: #536159;
}

html[data-theme="light"] .zuopin p i {
  color: #77847d;
}

html[data-theme="light"] .zuopin p i.layui-icon-fire {
  color: #168f5a;
}

html[data-theme="light"] .zuopin p a:not(.detail-download-anchor),
html[data-theme="light"] .detail-side-tags a {
  border-color: #cbd8d1;
  background: rgba(255,255,255,.72);
  color: #48574f;
}

html[data-theme="light"] .zuopin p a:not(.detail-download-anchor):hover,
html[data-theme="light"] .detail-side-tags a:hover {
  border-color: #31c27c;
  color: #168f5a;
}

html[data-theme="light"] .detail-viewer-tip {
  color: #66736c;
}

html[data-theme="light"] .detail-lock-notice h2 {
  color: #243029;
}

html[data-theme="light"] .detail-lock-notice p {
  color: #65726b;
}

html[data-theme="light"] .detail-lock-notice a {
  border-color: #c7d2cc;
  background: #fff;
  color: #3e4d45;
}

html[data-theme="light"] .detail-lock-notice a.primary {
  border-color: #31c27c;
  background: #31c27c;
  color: #0b3522;
}

@media (min-width: 821px) {
  .profile-shell .yt-profile-nav {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .profile-shell .yt-profile-nav button {
    display: inline-flex;
    width: auto;
    align-items: center;
    justify-content: center;
  }
}

html[data-theme="light"] .profile-center-page {
  background: #f4f7f5;
  color: #5b6861;
}

html[data-theme="light"] .profile-hero {
  border-color: #dbe4df;
}

html[data-theme="light"] .profile-hero h1,
html[data-theme="light"] .profile-shell .yt-section-head h1,
html[data-theme="light"] .profile-shell .yt-section-head h2,
html[data-theme="light"] .profile-shell .yt-info-box strong {
  color: #243029;
}

html[data-theme="light"] .profile-hero p,
html[data-theme="light"] .profile-shell .yt-section-head p,
html[data-theme="light"] .profile-shell .yt-field span {
  color: #65726b;
}

html[data-theme="light"] .profile-hero-meta > span {
  color: #46534c;
}

html[data-theme="light"] .profile-hero-meta a,
html[data-theme="light"] .profile-empty a,
html[data-theme="light"] .profile-section-head a {
  background: #31c27c;
  color: #0b3522;
}

html[data-theme="light"] .profile-shell .yt-profile-nav {
  border-color: #d9e2dd;
  background: #fff;
}

html[data-theme="light"] .profile-shell .yt-profile-nav button {
  background: transparent;
  color: #65726b;
}

html[data-theme="light"] .profile-shell .yt-profile-nav button.active {
  border-top-color: #31c27c;
  background: #edf7f1;
  color: #168f5a;
}

html[data-theme="light"] .profile-shell .yt-section-head a {
  color: #168f5a;
}

html[data-theme="light"] .profile-shell .yt-info-box {
  border-color: #dce4df;
}

html[data-theme="light"] .profile-shell .yt-input,
html[data-theme="light"] .profile-shell .yt-select {
  border-color: #d4dfd9;
  background: #fff;
  color: #28352e;
}

html[data-theme="light"] .profile-shell .yt-alert {
  border-left-color: #31c27c;
  background: #edf7f1;
  color: #46554d;
}

html[data-theme="light"] .profile-shell .yt-alert.error {
  border-left-color: #d85c5c;
  background: #fff1f1;
  color: #9d3f3f;
}

html[data-theme="light"] .membership-center-page {
  background: #f4f7f5;
  color: #5b6861;
}

html[data-theme="light"] .membership-hero-copy {
  border-color: #d9e4de;
  background: #fff;
  box-shadow: 0 12px 30px rgba(39,68,52,.06);
}

html[data-theme="light"] .membership-hero-copy:after {
  border-color: rgba(49,194,124,.24);
}

html[data-theme="light"] .membership-hero h1,
html[data-theme="light"] .membership-current strong,
html[data-theme="light"] .membership-benefit-strip strong,
html[data-theme="light"] .membership-section-head h2,
html[data-theme="light"] .membership-notes h2,
html[data-theme="light"] .membership-package h2,
html[data-theme="light"] .membership-empty h2 {
  color: #243029;
}

html[data-theme="light"] .membership-hero p,
html[data-theme="light"] .membership-current span,
html[data-theme="light"] .membership-current p,
html[data-theme="light"] .membership-benefit-strip span,
html[data-theme="light"] .membership-section-head span,
html[data-theme="light"] .membership-package-desc,
html[data-theme="light"] .membership-notes p,
html[data-theme="light"] .membership-empty {
  color: #65726b;
}

html[data-theme="light"] .membership-hero-actions a {
  background: #edf2ef;
  color: #37463e;
}

html[data-theme="light"] .membership-hero-actions a:first-child,
html[data-theme="light"] .membership-buy,
html[data-theme="light"] .membership-action-primary {
  background: #31c27c;
  color: #0b3522;
}

html[data-theme="light"] .membership-current {
  border-color: #b8ddc9;
  background: #edf7f1;
}

html[data-theme="light"] .membership-benefit-strip {
  border-color: #dbe4df;
  background: #dbe4df;
}

html[data-theme="light"] .membership-benefit-strip div,
html[data-theme="light"] .membership-package,
html[data-theme="light"] .membership-notes div,
html[data-theme="light"] .membership-empty {
  border-color: #dbe4df;
  background: #fff;
}

html[data-theme="light"] .membership-package {
  box-shadow: 0 10px 28px rgba(39,68,52,.055);
}

html[data-theme="light"] .membership-package:hover {
  border-color: #9bcfb3;
  background: #fbfdfc;
}

html[data-theme="light"] .membership-package.is-featured {
  border-color: #83caa4;
  background: #eff9f3;
}

html[data-theme="light"] .membership-benefits li {
  color: #3f4d45;
}

html[data-theme="light"] .membership-benefits .is-no:before {
  color: #87938d;
}

html[data-theme="light"] .membership-action-secondary {
  background: #edf2ef;
  color: #46554d;
}

@media (max-width: 1241px) {
  .template-list-page {
    padding-top: 76px;
  }

  .membership-package-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .profile-shell .yt-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .detail-page .footer {
    padding-bottom: 76px;
  }

  .gallerypic.xiaotu .download-preview-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .detail-related .databox {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .detail-related .databox .img-item:nth-child(n+7) {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .header_right ul li:first-child {
    display: none;
  }

  .commerce-copy h1 {
    font-size: 38px;
    line-height: 50px;
  }

  .profile-shell .yt-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .template-notice {
    align-items: flex-start;
    margin: 14px;
    padding: 12px 14px;
  }

  .template-notice > a {
    display: none;
  }

  .home-banner-grid > a,
  .home-banner-grid > div {
    height: 132px;
  }

  .home-banner-grid .home-banner-center {
    height: 190px;
  }

  .latest-flow-head {
    margin: 8px 14px 24px;
    padding: 20px;
  }

  .download-collection-head {
    margin: 8px 14px 24px;
  }

  .download-category-filter {
    gap: 6px 18px;
  }

  .download-copy {
    padding: 30px 14px 20px;
  }

  .download-preview-groups {
    padding: 12px 8px 30px;
  }

  .gallerypic.xiaotu .download-preview-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
  }

  .detail-related .databox {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 22px 12px;
  }

  .detail-related .databox .img-item:nth-child(n+5) {
    display: none !important;
  }

  .latest-flow-stats {
    gap: 24px;
  }

  .template-list-head {
    padding-right: 14px;
    padding-left: 14px;
  }

  .template-search-box {
    margin: 8px 14px 24px;
  }

  .template-static {
    width: 100%;
    padding: 30px 18px;
  }

  .remote-article-gallery > :not(img):not(a):not(video) {
    padding-right: 14px;
    padding-left: 14px;
  }

  .detail-lock-notice {
    padding: 34px 16px;
  }

  .detail-downloads {
    margin: 24px 12px 0;
    padding: 30px 18px;
  }

  .detail-side-tags {
    margin-bottom: 18px;
  }

  .auth-shell {
    min-height: 100vh;
  }

  .auth-panel {
    padding-bottom: 38px;
  }

  .auth-secondary-links {
    align-items: flex-start;
    flex-direction: column;
  }

  .membership-package-grid,
  .profile-shell .yt-grid {
    grid-template-columns: 1fr;
  }

  .membership-current {
    min-height: 170px;
  }

  .profile-shell {
    padding: 26px 14px;
  }

  .profile-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-shell .yt-profile-nav button {
    min-width: 96px;
  }

  .profile-shell .yt-table {
    min-width: 720px;
  }

  .profile-shell .yt-profile-pane {
    overflow-x: auto;
  }

  .yt-security-row {
    grid-template-columns: 1fr;
  }

  .commerce-nav {
    max-width: 62vw;
    overflow-x: auto;
  }

  .commerce-result {
    margin-top: 24px;
    padding: 30px 22px;
  }

  .commerce-result h1 {
    font-size: 30px;
  }

  .commerce-secret {
    grid-template-columns: 1fr auto;
  }

  .commerce-secret span {
    grid-column: 1 / -1;
  }

  .commerce-secret-note {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .gallerypic.xiaotu .download-preview-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

/* 2026-07-15 collection directory, membership flow and title consistency */
.logo a{display:flex;align-items:center;max-width:360px;min-width:0;}
.logo .site-brand-subtitle{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.zuopin_site_profile .zuopin_renwu_title a{display:-webkit-box;max-height:48px;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;}
.galleryList .ztitle{margin-top:8px;line-height:26px;white-space:normal;}
.galleryList .ztitle a{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;}

.download-directory{padding-bottom:64px;scroll-behavior:smooth;}
.download-directory-hero{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(440px,1.22fr) minmax(300px,.78fr);align-items:center;gap:42px;margin:0 0 14px;padding:38px 42px;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:#171918;}
.download-directory-hero h1{margin:7px 0 10px;color:#f1f1f1;font-size:34px;line-height:44px;}
.download-directory-hero p{margin:0;color:#989c99;line-height:26px;}
.download-directory-total{margin-top:8px!important;}
.download-directory-total strong{color:#31c27c;}
.download-directory-guide{min-width:0;padding-left:26px;border-left:2px solid rgba(49,194,124,.48);}
.download-directory-guide>span{display:block;margin-bottom:8px;color:#31c27c;font-size:12px;font-weight:700;}
.download-directory-guide>strong{display:block;margin-bottom:12px;color:#e6e8e7;font-size:17px;font-weight:600;line-height:27px;text-wrap:pretty;}
.download-directory-guide p{font-size:13px;line-height:23px;}
.download-directory-guide p+p{margin-top:3px;}
.download-directory-search{display:flex;width:100%;height:44px;align-items:center;gap:12px;padding:0 16px;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:#101211;color:#777;}
.download-directory-search:focus-within{border-color:#31c27c;}
.download-directory-search input{width:100%;border:0;outline:0;background:transparent;color:#e4e4e4;font-size:14px;}
.download-directory-nav-shell{position:sticky;top:66px;z-index:9;margin:0 0 24px;padding:10px 2px;border-bottom:1px solid rgba(255,255,255,.07);background:#101211;}
.download-directory-nav{display:flex;flex-wrap:nowrap;gap:8px;margin:0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#343936 transparent;}
.download-directory-nav a{display:inline-flex;height:36px;align-items:center;gap:9px;padding:0 13px;border:1px solid rgba(255,255,255,.09);border-radius:4px;background:#191b1a;color:#b9bdbb;}
.download-directory-nav a:hover{border-color:rgba(49,194,124,.6);color:#31c27c;}
.download-directory-nav strong{font-size:12px;color:#6f7471;}
.download-directory-groups{display:grid;gap:20px;}
.download-directory-group{scroll-margin-top:126px;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:#171918;overflow:hidden;}
.download-directory-group>header{display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:18px;padding:0 24px;border-bottom:1px solid rgba(255,255,255,.07);}
.download-directory-group>header a{display:inline-flex;align-items:center;gap:10px;color:#eee;}
.download-directory-group>header h2{margin:0;color:inherit;font-size:20px;line-height:28px;}
.download-directory-group>header i{color:#31c27c;font-size:12px;}
.download-directory-group>header>span{color:#777;font-size:13px;}
.download-directory-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 18px;margin:0;padding:12px 16px 18px;list-style:none;}
.download-directory-list li{min-width:0;border-bottom:1px solid rgba(255,255,255,.055);}
.download-directory-list a{display:flex;min-height:74px;align-items:center;padding:12px 14px;color:#bfc3c1;}
.download-directory-list a:hover span{color:#31c27c;}
.download-directory-list a span{display:-webkit-box;min-width:0;max-height:42px;overflow:hidden;line-height:21px;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;}
.download-directory-empty{padding:44px;text-align:center;color:#888;}
.download-directory-top{position:fixed;right:24px;bottom:24px;z-index:40;width:44px;height:44px;border:1px solid rgba(49,194,124,.32);border-radius:5px;background:#1b1e1c;color:#31c27c;box-shadow:0 12px 34px rgba(0,0,0,.26);cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease;}
.download-directory-top:hover{transform:translateY(-2px);border-color:#31c27c;background:#222724;}
.download-directory-top:active{transform:translateY(0);}
.download-directory-top:focus-visible{outline:2px solid #31c27c;outline-offset:3px;}

.membership-benefit-strip{grid-template-columns:repeat(3,minmax(0,1fr));}
.membership-benefit-strip>div{display:flex;align-items:center;gap:14px;}
.membership-benefit-strip>div>i{display:grid;width:38px;height:38px;flex:none;place-items:center;border:1px solid rgba(49,194,124,.35);border-radius:4px;color:#31c27c;}
.membership-benefit-strip>div>span{display:block;min-width:0;}
.membership-benefit-strip strong{margin:0;}
.membership-benefit-strip small{display:block;margin-top:3px;color:#777;line-height:21px;}
.membership-benefits{gap:0;border-top:1px solid rgba(255,255,255,.07);}
.membership-benefits li{display:flex;min-height:45px;align-items:center;justify-content:space-between;gap:16px;padding:8px 2px;border-bottom:1px solid rgba(255,255,255,.07);color:#bbb;}
.membership-benefits li:before,.membership-benefits .is-yes:before,.membership-benefits .is-no:before{display:none!important;content:none!important;}
.membership-benefits li i{flex:none;color:#31c27c;}
.membership-benefits li.is-no{color:#777;}
.membership-benefits li.is-no i{color:#666;}
.benefit-cell{display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.benefit-cell.is-yes i{color:#31c27c;}
.benefit-cell.is-no i{color:#666;}

.membership-payment-modal{position:fixed;z-index:10080;inset:0;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.72);}
.membership-payment-modal[hidden]{display:none;}
.membership-payment-panel{position:relative;width:min(440px,calc(100vw - 32px));padding:30px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#191b1a;box-shadow:0 24px 70px rgba(0,0,0,.42);}
.membership-payment-close{position:absolute;top:14px;right:14px;display:grid;width:34px;height:34px;place-items:center;border:0;border-radius:4px;background:#252826;color:#aaa;cursor:pointer;}
.membership-payment-kicker{color:#31c27c;font-size:12px;font-weight:700;letter-spacing:0;}
.membership-payment-panel h2{margin:8px 42px 24px 0;color:#eee;font-size:24px;line-height:34px;}
.membership-payment-amount{display:flex;align-items:flex-end;justify-content:space-between;padding:20px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);color:#888;}
.membership-payment-amount strong{color:#31c27c;font-variant-numeric:tabular-nums;}
.membership-payment-amount small{font-size:18px;}
.membership-payment-amount b{font-size:38px;line-height:42px;}
.membership-payment-channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0;}
.membership-payment-channels button{display:flex;height:48px;align-items:center;justify-content:center;gap:9px;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:#222523;color:#aaa;cursor:pointer;}
.membership-payment-channels button.is-active{border-color:#31c27c;background:rgba(49,194,124,.08);color:#31c27c;}
.payment-brand-icon{display:block;width:22px;height:22px;flex:0 0 22px;background:currentColor;mask-position:center;mask-repeat:no-repeat;mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;}
.payment-brand-icon.is-alipay{mask-image:url('../icons/alipay.svg');-webkit-mask-image:url('../icons/alipay.svg');}
.payment-brand-icon.is-wechat{mask-image:url('../icons/weixin.svg');-webkit-mask-image:url('../icons/weixin.svg');}
.membership-payment-channels button[data-payment-type="alipay"].is-active{border-color:#1677ff;background:rgba(22,119,255,.08);color:#3f91ff;}
.membership-payment-channels button[data-payment-type="wxpay"].is-active{border-color:#31c27c;background:rgba(49,194,124,.08);color:#31c27c;}
.membership-payment-submit{width:100%;height:46px;border:0;border-radius:4px;background:#31c27c;color:#07110b;font-weight:700;cursor:pointer;}
.membership-payment-submit.is-disabled{background:#303330;color:#777;cursor:not-allowed;}
.membership-payment-disabled{margin:10px 0 0;text-align:center;color:#888;font-size:13px;}

html[data-theme="light"] .download-directory-hero,
html[data-theme="light"] .download-directory-group{border-color:#dde4e0;background:#fff;}
html[data-theme="light"] .download-directory-hero h1,
html[data-theme="light"] .download-directory-group>header a,
html[data-theme="light"] .download-directory-group>header h2{color:#171b19;}
html[data-theme="light"] .download-directory-search{border-color:#d9e0dc;background:#f5f8f6;}
html[data-theme="light"] .download-directory-search input{color:#202522;}
html[data-theme="light"] .download-directory-guide{border-color:rgba(40,169,105,.46);}
html[data-theme="light"] .download-directory-guide>strong{color:#242a27;}
html[data-theme="light"] .download-directory-nav-shell{border-color:#dfe5e2;background:#f3f6f4;}
html[data-theme="light"] .download-directory-nav a{border-color:#dfe5e2;background:#fff;color:#505854;}
html[data-theme="light"] .download-directory-group>header,
html[data-theme="light"] .download-directory-list li{border-color:#e8ecea;}
html[data-theme="light"] .download-directory-list a{color:#505854;}
html[data-theme="light"] .download-directory-top{border-color:#b9dfca;background:#fff;color:#20935b;box-shadow:0 12px 34px rgba(39,61,50,.14);}
html[data-theme="light"] .membership-benefits{border-color:#e2e7e4;}
html[data-theme="light"] .membership-benefits li{border-color:#e2e7e4;color:#4b5350;}
html[data-theme="light"] .membership-benefits li.is-no{color:#969d99;}
html[data-theme="light"] .membership-payment-modal{background:rgba(22,28,25,.46);}
html[data-theme="light"] .membership-payment-panel{border-color:#dce3df;background:#fff;box-shadow:0 24px 70px rgba(33,48,40,.18);}
html[data-theme="light"] .membership-payment-panel h2{color:#171b19;}
html[data-theme="light"] .membership-payment-close{background:#f0f4f2;color:#626a66;}
html[data-theme="light"] .membership-payment-amount{border-color:#e1e7e4;}
html[data-theme="light"] .membership-payment-channels button{border-color:#dce3df;background:#f7f9f8;color:#5d6561;}
html[data-theme="light"] .membership-payment-channels button[data-payment-type="alipay"].is-active{border-color:#1677ff;background:#edf5ff;color:#1677ff;}
html[data-theme="light"] .membership-payment-channels button[data-payment-type="wxpay"].is-active{border-color:#28a969;background:#effaf4;color:#20935b;}

@media (max-width:1500px){.download-directory-hero{grid-template-columns:minmax(260px,.72fr) minmax(420px,1.28fr);}.download-directory-search{grid-column:1/-1;}}
@media (max-width:1241px){.download-directory-nav-shell{top:116px;}.download-directory-group{scroll-margin-top:176px;}}
@media (max-width:1100px){.download-directory-list{grid-template-columns:repeat(2,minmax(0,1fr));}.download-directory-hero{grid-template-columns:1fr;gap:26px;}.download-directory-search{grid-column:auto;}.download-directory-guide{padding-left:20px;}}
@media (max-width:640px){.download-directory-hero{padding:26px 20px;}.download-directory-list{grid-template-columns:1fr;}.download-directory-group>header{padding:0 18px;}.download-directory-top{right:14px;bottom:14px;}.membership-payment-panel{padding:24px 20px;}}

.support-ticket-shell{max-width:1500px;}
.support-ticket-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;}
.support-ticket-heading h1{margin:6px 0;color:#eee;font-size:32px;line-height:42px;}
.support-ticket-heading p{margin:0;color:#888;}
.support-ticket-heading>a{display:inline-flex;height:40px;align-items:center;padding:0 16px;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:#aaa;}
.support-ticket-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(320px,2fr);gap:20px;align-items:start;}
.support-ticket-create .yt-textarea{min-height:220px;resize:vertical;}
.support-ticket-create h2,.support-ticket-reply h2{margin:0 0 18px;color:#ddd;font-size:20px;}
.support-file-input{height:auto;padding:10px;}
.yt-field small{display:block;margin-top:7px;color:#777;line-height:20px;}
.support-ticket-list{border:1px solid rgba(255,255,255,.08);border-radius:6px;background:#191b1a;overflow:hidden;}
.support-ticket-list>header{display:flex;min-height:58px;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.08);}
.support-ticket-list>header h2{margin:0;color:#ddd;font-size:20px;}
.support-ticket-list>header span{color:#31c27c;font-size:13px;}
.support-ticket-row{display:grid;grid-template-columns:72px minmax(0,1fr) 10px 14px;align-items:center;gap:14px;min-height:72px;padding:10px 18px;border-bottom:1px solid rgba(255,255,255,.06);color:#aaa;}
.support-ticket-row:last-child{border-bottom:0;}
.support-ticket-row:hover{background:rgba(49,194,124,.045);}
.support-ticket-row-main{display:grid;min-width:0;gap:5px;}
.support-ticket-row-main strong{overflow:hidden;color:#d2d5d3;text-overflow:ellipsis;white-space:nowrap;}
.support-ticket-row-main small{color:#6f7471;}
.support-ticket-status{display:inline-flex;width:max-content;align-items:center;justify-content:center;padding:4px 8px;border-radius:3px;background:#2a2d2b;color:#999;font-size:12px;}
.support-ticket-status.is-pending{background:rgba(231,158,67,.13);color:#e7a75e;}
.support-ticket-status.is-replied{background:rgba(49,194,124,.12);color:#31c27c;}
.support-ticket-status.is-closed{color:#777;}
.support-ticket-unread{width:7px;height:7px;border-radius:50%;background:#31c27c;box-shadow:0 0 0 4px rgba(49,194,124,.12);}
.support-ticket-pagination{padding:16px;}
.support-thread{display:grid;gap:14px;margin-bottom:20px;}
.support-message{max-width:82%;padding:18px 20px;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:#1b1d1c;}
.support-message.is-admin{justify-self:start;}
.support-message.is-user{justify-self:end;border-color:rgba(49,194,124,.2);background:rgba(49,194,124,.06);}
.support-message header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:12px;color:#777;font-size:13px;}
.support-message header strong{color:#ddd;font-size:14px;}
.support-message-body{color:#bfc3c1;line-height:28px;white-space:pre-wrap;overflow-wrap:anywhere;}
.support-message-attachments{display:grid;grid-template-columns:repeat(3,minmax(0,150px));gap:10px;margin-top:14px;}
.support-message-attachments a{position:relative;display:block;border:1px solid rgba(255,255,255,.08);border-radius:4px;background:#111;overflow:hidden;}
.support-message-attachments img{display:block;width:100%;height:110px;object-fit:contain;}
.support-message-attachments span{position:absolute;right:5px;bottom:5px;padding:2px 5px;border-radius:2px;background:rgba(0,0,0,.65);color:#ccc;font-size:11px;}
.support-ticket-close-form{margin-top:10px;}

html[data-theme="light"] .support-ticket-heading h1,
html[data-theme="light"] .support-ticket-create h2,
html[data-theme="light"] .support-ticket-reply h2,
html[data-theme="light"] .support-ticket-list>header h2,
html[data-theme="light"] .support-message header strong{color:#171b19;}
html[data-theme="light"] .support-ticket-heading>a{border-color:#dce3df;color:#545d59;}
html[data-theme="light"] .support-ticket-list,
html[data-theme="light"] .support-message{border-color:#dde4e0;background:#fff;}
html[data-theme="light"] .support-ticket-list>header,
html[data-theme="light"] .support-ticket-row{border-color:#e6ebe8;}
html[data-theme="light"] .support-ticket-row-main strong{color:#353c38;}
html[data-theme="light"] .support-message.is-user{border-color:#bfe6d1;background:#f1faf5;}
html[data-theme="light"] .support-message-body{color:#4b5450;}
@media (max-width:900px){.support-ticket-layout{grid-template-columns:1fr;}.support-message{max-width:94%;}}

@media (max-width: 480px) {
  .latest-flow-stats {
    justify-content: space-between;
    gap: 10px;
  }

  .latest-flow-stats strong {
    font-size: 19px;
  }

  .template-status-page > strong {
    font-size: 66px;
  }

  .template-status-page div,
  .detail-lock-notice div {
    width: 100%;
    flex-direction: column;
  }

  .template-status-page a,
  .detail-lock-notice a {
    width: 100%;
  }

  .commerce-topbar {
    padding-right: 14px;
    padding-left: 14px;
  }

  .commerce-brand span {
    display: none;
  }

  .commerce-nav {
    max-width: calc(100vw - 78px);
    gap: 16px;
  }
}

/* User center: membership-led account experience */
.profile-membership-banner {
  position: relative;
  min-height: 116px;
  align-items: center;
  margin-bottom: 18px;
  padding: 24px 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background:
    radial-gradient(circle at 82% 18%,rgba(49,194,124,.14),transparent 34%),
    #181a19;
}

.profile-membership-banner:after {
  content: "";
  position: absolute;
  right: 24%;
  bottom: -74px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(49,194,124,.12);
  border-radius: 50%;
  pointer-events: none;
}

.profile-membership-banner.is-lifetime {
  border-color: rgba(228,168,83,.28);
  background:
    radial-gradient(circle at 82% 18%,rgba(228,168,83,.17),transparent 36%),
    linear-gradient(110deg,#191a19,#1c1b18);
}

.profile-membership-identity {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
}

.profile-membership-kicker {
  color: #7f8984;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
}

.profile-membership-identity strong {
  color: #f1f3f2;
  font-size: 27px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.02em;
}

.profile-membership-banner.is-lifetime .profile-membership-identity strong {
  color: #e5bd78;
}

.profile-membership-identity small {
  color: #7f8984;
  font-size: 13px;
}

.profile-membership-banner .profile-hero-meta {
  position: relative;
  z-index: 1;
}

.profile-membership-banner .profile-hero-meta a {
  height: 38px;
  border-radius: 6px;
  transition: transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}

.profile-membership-banner .profile-hero-meta a:active {
  transform: translateY(1px);
}

.profile-membership-banner .profile-ticket-action {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  color: #b8bfbb;
}

.profile-membership-banner .profile-ticket-action:hover {
  border-color: rgba(49,194,124,.42);
  background: rgba(49,194,124,.08);
  color: #d7e9df;
}

.profile-shell .yt-profile-nav {
  gap: 8px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 9px;
  background: #191b1a;
  scrollbar-width: thin;
}

.profile-shell .yt-profile-nav button {
  position: relative;
  display: inline-flex;
  min-width: 104px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8c9590;
  font-weight: 500;
  transition: background .2s ease,color .2s ease;
}

.profile-shell .yt-profile-nav button > i {
  display: inline-flex;
  width: 16px;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.profile-shell .yt-profile-nav button > span { line-height: 1.2; }

.profile-shell .yt-profile-nav button:hover {
  background: rgba(255,255,255,.035);
  color: #d4d9d6;
}

.profile-shell .yt-profile-nav button:focus-visible {
  outline: 2px solid rgba(49,194,124,.72);
  outline-offset: -2px;
}

.profile-shell .yt-profile-nav button.active {
  border: 0;
  background: rgba(255,255,255,.055);
  color: #dff6ea;
}

.profile-shell .yt-profile-nav button.active:after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: 4px;
  left: 26px;
  height: 2px;
  border-radius: 2px;
  background: #31c27c;
}

.profile-shell .yt-profile-pane {
  padding-top: 28px;
}

.profile-overview-grid {
  gap: 14px;
}

.profile-shell .profile-overview-card {
  position: relative;
  min-height: 158px;
  padding: 24px;
  overflow: hidden;
  border-color: rgba(255,255,255,.07);
  border-radius: 9px;
  background: linear-gradient(145deg,#1b1d1c,#181a19);
}

.profile-overview-card:after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -64px;
  width: 136px;
  height: 136px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 50%;
}

.profile-overview-card.is-membership {
  border-color: rgba(49,194,124,.22);
  background: linear-gradient(145deg,rgba(49,194,124,.095),#181a19 64%);
}

.profile-card-index {
  position: absolute;
  top: 20px;
  right: 22px;
  color: rgba(255,255,255,.16) !important;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.profile-overview-card > span:not(.profile-card-index) {
  display: block;
  margin-bottom: 18px;
  color: #7f8984;
  font-size: 13px;
}

.profile-shell .profile-overview-card strong {
  display: block;
  max-width: calc(100% - 38px);
  overflow: hidden;
  color: #eef1ef;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-overview-card small {
  display: block;
  margin-top: 8px;
  color: #737c77;
  font-size: 12px;
}

.profile-security-notice {
  margin-top: 16px;
}

.profile-favorite-list {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 9px;
  background: #181a19;
}

.profile-favorite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .2s ease;
}

.profile-favorite-row:last-child {
  border-bottom: 0;
}

.profile-favorite-row:hover {
  background: rgba(255,255,255,.025);
}

.profile-favorite-copy {
  min-width: 0;
}

.profile-favorite-copy > a {
  display: block;
  overflow: hidden;
  color: #dce1de;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-favorite-copy > a:hover,
.profile-favorite-link:hover {
  color: #31c27c;
}

.profile-favorite-copy span {
  display: block;
  margin-top: 7px;
  color: #707974;
  font-size: 12px;
}

.profile-favorite-link {
  flex: 0 0 auto;
  color: #98a19c;
  font-size: 13px;
}

.profile-referral-summary {
  display: grid;
  gap: 14px;
}

.profile-referral-link {
  display: grid;
  grid-template-columns:minmax(210px,.35fr) minmax(0,1fr);
  align-items: center;
  gap: 24px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 9px;
  background: #181a19;
}

.profile-referral-link > div:first-child span {
  display: block;
  color: #d9dedb;
  font-size: 14px;
  font-weight: 600;
}

.profile-referral-link > div:first-child small {
  display: block;
  margin-top: 5px;
  color: #717a75;
  font-size: 12px;
}

.profile-referral-link .yt-copy-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
}

.profile-referral-link .yt-input {
  display: flex;
  align-items: center;
  height: 40px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-referral-link .yt-btn {
  min-height: 40px;
  border-radius: 5px;
}

.profile-balance-cards {
  gap: 10px;
}

.profile-shell .profile-balance-cards .yt-info-box {
  min-height: 94px;
  padding: 18px 20px;
  border-radius: 8px;
}

.profile-balance-cards span {
  display: block;
  margin-bottom: 9px;
  color: #737c77;
  font-size: 12px;
}

.profile-balance-cards strong {
  color: #ecf0ed;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.profile-referral-ledger {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: 0;
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 9px;
  background: #181a19;
}

.profile-ledger-section + .profile-ledger-section {
  border-left: 1px solid rgba(255,255,255,.07);
}

.profile-ledger-section > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.profile-ledger-section header span,
.profile-form-heading span {
  color: #6f7873;
  font-size: 11px;
  letter-spacing: .12em;
}

.profile-ledger-section header h3,
.profile-form-heading h3 {
  margin: 4px 0 0;
  color: #e1e5e2;
  font-size: 17px;
}

.profile-ledger-section header em {
  color: #31c27c;
  font-size: 12px;
  font-style: normal;
}

.profile-referral-ledger .yt-table {
  min-width: 100%;
}

.profile-referral-ledger .yt-table th {
  background: rgba(255,255,255,.018);
}

.profile-shell .profile-withdraw-panel {
  margin-top: 20px;
  padding: 22px;
  border-radius: 9px;
}

.profile-form-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.profile-form-heading small {
  color: #737c77;
}

.profile-inline-feedback {
  margin-top: 14px;
  margin-bottom: 14px;
}

.profile-inline-feedback[hidden] {
  display: none;
}

.profile-settings-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  align-items: start;
}

.profile-shell .profile-setting-card {
  padding: 22px;
  border-radius: 9px;
}

.profile-setting-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-height: 68px;
  margin-bottom: 20px;
}

.profile-setting-head > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(49,194,124,.28);
  border-radius: 6px;
  color: #31c27c;
  font-size: 12px;
  font-weight: 700;
}

.profile-setting-head h3 {
  margin: 0;
  color: #e1e5e2;
  font-size: 17px;
}

.profile-setting-head p {
  margin: 6px 0 0;
  color: #737c77;
  font-size: 12px;
  line-height: 1.55;
}

.profile-code-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 8px;
}

.profile-code-row .yt-field {
  margin-bottom: 0;
}

.profile-code-row .yt-btn {
  min-height: 42px;
  border-radius: 4px;
}

.profile-form-feedback {
  min-height: 20px;
  margin: 8px 0 12px;
  color: #31c27c;
  font-size: 12px;
  line-height: 20px;
}

.profile-form-feedback.is-error {
  color: #e78383;
}

.profile-setting-card .yt-security-row {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.profile-setting-card .yt-btn.primary,
.profile-withdraw-panel .yt-btn.primary {
  border-radius: 5px;
}

html[data-theme="light"] .profile-membership-banner {
  border-color: #d8e2dc;
  background:
    radial-gradient(circle at 82% 18%,rgba(49,194,124,.12),transparent 34%),
    #fff;
}

html[data-theme="light"] .profile-membership-banner.is-lifetime {
  border-color: rgba(181,128,48,.28);
  background:
    radial-gradient(circle at 82% 18%,rgba(228,168,83,.16),transparent 36%),
    linear-gradient(110deg,#fff,#fbf8f1);
}

html[data-theme="light"] .profile-membership-identity strong,
html[data-theme="light"] .profile-shell .profile-overview-card strong,
html[data-theme="light"] .profile-favorite-copy > a,
html[data-theme="light"] .profile-referral-link > div:first-child span,
html[data-theme="light"] .profile-balance-cards strong,
html[data-theme="light"] .profile-ledger-section header h3,
html[data-theme="light"] .profile-form-heading h3,
html[data-theme="light"] .profile-setting-head h3 {
  color: #27322c;
}

html[data-theme="light"] .profile-membership-banner.is-lifetime .profile-membership-identity strong {
  color: #9b6b23;
}

html[data-theme="light"] .profile-membership-banner .profile-ticket-action {
  border-color: #d5dfd9;
  background: rgba(255,255,255,.72);
  color: #526058;
}

html[data-theme="light"] .profile-shell .yt-profile-nav {
  border-color: #d9e2dd;
  background: #fff;
}

html[data-theme="light"] .profile-shell .yt-profile-nav button:hover,
html[data-theme="light"] .profile-shell .yt-profile-nav button.active {
  border: 0;
  background: #f0f5f2;
  color: #1b6040;
}

html[data-theme="light"] .profile-shell .profile-overview-card,
html[data-theme="light"] .profile-favorite-list,
html[data-theme="light"] .profile-referral-link,
html[data-theme="light"] .profile-referral-ledger {
  border-color: #dce4df;
  background: #fff;
}

html[data-theme="light"] .profile-overview-card.is-membership {
  border-color: rgba(49,194,124,.26);
  background: linear-gradient(145deg,#eff9f3,#fff 68%);
}

html[data-theme="light"] .profile-card-index {
  color: rgba(31,82,57,.13) !important;
}

html[data-theme="light"] .profile-favorite-row,
html[data-theme="light"] .profile-ledger-section + .profile-ledger-section,
html[data-theme="light"] .profile-ledger-section > header {
  border-color: #e4eae6;
}

html[data-theme="light"] .profile-favorite-row:hover {
  background: #f7faf8;
}

html[data-theme="light"] .profile-referral-ledger .yt-table th {
  background: #f7faf8;
}

@media (max-width: 1180px) {
  .profile-settings-grid {
    grid-template-columns: 1fr;
  }

  .profile-referral-ledger {
    grid-template-columns: 1fr;
  }

  .profile-ledger-section + .profile-ledger-section {
    border-top: 1px solid rgba(255,255,255,.07);
    border-left: 0;
  }
}

@media (max-width: 820px) {
  .profile-membership-banner {
    min-height: 0;
    padding: 22px 20px;
  }

  .profile-membership-banner .profile-hero-meta {
    width: 100%;
    justify-content: flex-start;
  }

  .profile-referral-link {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .profile-favorite-row {
    align-items: flex-start;
    gap: 12px;
  }

  .profile-shell .yt-profile-pane {
    overflow-x: visible;
  }
}

@media (max-width: 560px) {
  .profile-membership-banner .profile-hero-meta a {
    flex: 1 1 auto;
  }

  .profile-shell .yt-profile-nav button {
    min-width: 92px;
  }

  .profile-shell .profile-overview-card,
  .profile-shell .profile-setting-card,
  .profile-shell .profile-withdraw-panel {
    padding: 18px;
  }

  .profile-favorite-row {
    flex-direction: column;
  }

  .profile-referral-link {
    padding: 16px;
  }

  .profile-code-row {
    grid-template-columns: 1fr;
  }

  .profile-code-row .yt-btn {
    width: 100%;
  }

  .profile-form-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Membership promotion and compact pricing cards */
.membership-promotion {
  display: grid;
  min-height: 126px;
  place-items: center;
  margin: 0 0 28px;
  padding: 24px 32px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,59,48,.07),transparent 58%),
    #191b1a;
  text-align: center;
}

.membership-promotion p {
  max-width: 920px;
  margin: 0;
  color: var(--membership-promo-color,#ff3b30);
  font-size: 21px;
  line-height: 1.65;
  font-weight: 700;
  text-wrap: balance;
}

.membership-section-head.is-count-only {
  justify-content: flex-end;
  margin-bottom: 18px;
}

.membership-package-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 26px;
}

.membership-package {
  padding-right: 22px;
  padding-left: 22px;
}

.membership-package-summary,
.membership-package-desc {
  text-align: center;
}

.membership-package-head {
  justify-items: center;
  gap: 12px;
}

.membership-package h2 {
  width: 100%;
  max-width: none;
  padding: 0 48px;
  font-size: 23px;
  text-align: center;
}

.membership-price {
  align-items: baseline;
  justify-content: center;
}

.membership-price strong {
  font-size: 40px;
}

.membership-price-period {
  margin-left: 5px;
  color: #6f7773;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.membership-package-desc {
  color: #858d89;
}

.membership-package.is-level-lifetime h2 { color: #5ca8ff; }
.membership-package.is-level-month h2 { color: #ff6b70; }
.membership-package.is-level-quarter h2 { color: #e5a64a; }
.membership-package.is-level-year h2 { color: #7bd65a; }
.membership-package.is-level-day h2,
.membership-package.is-level-week h2 { color: #31c27c; }

html[data-theme="light"] .membership-promotion {
  border-color: #dce4df;
  background:
    radial-gradient(circle at 50% 0,rgba(255,59,48,.06),transparent 58%),
    #fff;
}

html[data-theme="light"] .membership-price-period {
  color: #939c97;
}

html[data-theme="light"] .membership-benefits li.is-yes span {
  color: #373737;
}

html[data-theme="light"] .membership-package.is-level-lifetime h2 { color: #287fd4; }
html[data-theme="light"] .membership-package.is-level-month h2 { color: #dc454c; }
html[data-theme="light"] .membership-package.is-level-quarter h2 { color: #b87818; }
html[data-theme="light"] .membership-package.is-level-year h2 { color: #4a9d2b; }
html[data-theme="light"] .membership-package.is-level-day h2,
html[data-theme="light"] .membership-package.is-level-week h2 { color: #168f5a; }

@media (max-width: 1241px) {
  .membership-package-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 22px;
  }
}

@media (max-width: 760px) {
  .membership-promotion {
    min-height: 108px;
    padding: 20px 18px;
  }

  .membership-promotion p {
    font-size: 18px;
  }

  .membership-package-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* User center: editorial records, account forms and concierge tickets */
.profile-membership-banner .profile-ticket-action {
  position: relative;
  overflow: visible;
}

.profile-ticket-notification {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 9px;
  height: 9px;
  border: 2px solid #181a19;
  border-radius: 50%;
  background: #31c27c;
  box-shadow: 0 0 0 4px rgba(49,194,124,.14),0 0 18px rgba(49,194,124,.34);
}

.profile-ticket-notification:after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(49,194,124,.44);
  border-radius: inherit;
  animation: profile-ticket-pulse 2.2s ease-out infinite;
}

@keyframes profile-ticket-pulse {
  0% { opacity: .65; transform: scale(.72); }
  70%,100% { opacity: 0; transform: scale(1.45); }
}

.profile-card-watermark {
  position: absolute;
  z-index: 0;
  top: 15px;
  right: 18px;
  color: rgba(255,255,255,.055) !important;
  font-size: clamp(38px,3.1vw,58px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: .08em;
  pointer-events: none;
  user-select: none;
}

.profile-overview-card > :not(.profile-card-watermark) {
  position: relative;
  z-index: 1;
}

.profile-section-kicker {
  display: block;
  margin-bottom: 5px;
  color: #31c27c;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .17em;
}

.profile-record-list {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  background: #181a19;
}

.profile-record-row {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto 112px;
  align-items: center;
  gap: 16px;
  min-height: 88px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .2s ease,border-color .2s ease;
}

.profile-record-row:last-child { border-bottom: 0; }
.profile-record-row:hover { background: rgba(255,255,255,.027); }

.profile-record-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(49,194,124,.2);
  border-radius: 11px;
  background: rgba(49,194,124,.065);
  color: #31c27c;
  font-size: 14px;
}

.profile-record-row.is-order .profile-record-icon {
  border-color: rgba(220,173,100,.22);
  background: rgba(220,173,100,.07);
  color: #d8ad70;
}

.profile-record-copy { min-width: 0; }

.profile-record-copy > a,
.profile-record-copy > strong {
  display: block;
  overflow: hidden;
  color: #e1e5e2;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-record-copy > a:hover { color: #31c27c; }

.profile-record-copy > span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin-top: 7px;
  color: #6d7671;
  font-size: 12px;
}

.profile-record-copy > span b {
  max-width: 58%;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-record-copy > span i {
  width: 3px;
  height: 3px;
  flex: 0 0 3px;
  border-radius: 50%;
  background: #46504a;
}

.profile-record-value {
  display: grid;
  justify-items: end;
  gap: 7px;
  min-width: 90px;
}

.profile-record-value > strong {
  color: #e6c28b;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.profile-record-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(49,194,124,.09);
  color: #55ca8d;
  font-size: 11px;
}

.profile-record-metrics {
  display: flex;
  gap: 7px;
}

.profile-record-metrics > span {
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
  color: #7f8883;
  font-size: 11px;
  white-space: nowrap;
}

.profile-record-metrics strong {
  color: #cbd1cd;
  font-variant-numeric: tabular-nums;
}

.profile-record-action {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: #929b96;
  font-size: 12px;
  white-space: nowrap;
}

.profile-record-action i { font-size: 10px; transition: transform .2s ease; }
.profile-record-action:hover { color: #31c27c; }
.profile-record-action:hover i { transform: translateX(3px); }
.profile-record-action.is-disabled { color: #5b625e; }

.profile-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.profile-pagination-control,
.profile-pagination-pages a,
.profile-pagination-pages span {
  display: inline-flex;
  min-width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: #191b1a;
  color: #8c9590;
  font-size: 12px;
}

.profile-pagination-control {
  gap: 7px;
  padding: 0 12px;
}

.profile-pagination-pages { display: flex; gap: 6px; }
.profile-pagination-pages .is-current { border-color: rgba(49,194,124,.35); background: rgba(49,194,124,.1); color: #54d093; }
.profile-pagination a:hover { border-color: rgba(49,194,124,.34); color: #31c27c; }
.profile-pagination .is-disabled { opacity: .38; }
.profile-pagination-summary { display: none; color: #737c77; font-size: 12px; font-variant-numeric: tabular-nums; }

.profile-shell .profile-setting-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(255,255,255,.075);
  border-radius: 15px;
  background: linear-gradient(145deg,#1b1d1c,#181a19);
}

.profile-shell .profile-setting-card:before {
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  left: 22px;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(49,194,124,.36),transparent);
}

.profile-setting-head { align-items: center; }

.profile-setting-head > span {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-color: rgba(49,194,124,.24);
  border-radius: 12px;
  background: rgba(49,194,124,.065);
  font-size: 15px;
}

.profile-setting-card .yt-input,
.profile-setting-card .yt-select,
.profile-setting-card .yt-textarea {
  min-height: 46px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
  transition: border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.profile-setting-card .yt-select {
  color: #d9dfdb;
  color-scheme: dark;
  cursor: pointer;
}

.profile-setting-card .yt-select option {
  background-color: #202421;
  color: #e5ebe7;
}

.profile-setting-card .yt-select option[value=""],
.profile-setting-card .yt-select option:disabled {
  color: #87918b;
}

.profile-setting-card .yt-select option:checked {
  background-color: #256b4c;
  color: #fff;
}


.profile-setting-card .yt-input:focus,
.profile-setting-card .yt-select:focus,
.profile-setting-card .yt-textarea:focus {
  border-color: rgba(49,194,124,.58);
  background: rgba(49,194,124,.035);
  box-shadow: 0 0 0 3px rgba(49,194,124,.085);
  outline: none;
}

.profile-code-row .yt-btn,
.profile-setting-card .yt-btn.primary {
  min-height: 44px;
  border-radius: 9px;
}

.profile-setting-card [hidden] {
  display: none !important;
}

.profile-setting-state {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
}

.profile-empty-copy,
.profile-bound-value {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  justify-items: center;
  gap: 7px;
}

.profile-bound-value {
  padding: 17px 16px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  background: rgba(255,255,255,.028);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.profile-empty-copy strong,
.profile-bound-value strong {
  color: #e1e5e2;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.profile-empty-copy span,
.profile-bound-value small,
.profile-flow-copy {
  color: #737c77;
  font-size: 12px;
  line-height: 1.65;
}

.profile-bound-value small {
  letter-spacing: .04em;
}

.profile-bound-value.compact {
  margin-bottom: 18px;
  padding: 13px 14px;
  justify-items: start;
}

.profile-bound-value.compact strong {
  font-size: 14px;
}

.profile-flow-copy {
  margin: 0 0 16px;
}

.profile-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.profile-action-row .yt-btn {
  margin: 0;
  border-radius: 9px;
  transition: border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease;
}

.profile-action-row .yt-btn:active {
  transform: translateY(1px);
}

.profile-security-question-list {
  display: grid;
  gap: 10px;
  margin: 2px 0 22px;
  padding: 0;
  list-style: none;
}

.profile-security-question-list li {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 11px;
  background: linear-gradient(135deg,rgba(255,255,255,.038),rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.profile-security-question-list li > span {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: rgba(49,194,124,.1);
  color: #54d093;
  font-size: 12px;
  font-weight: 700;
}

.profile-security-question-list p {
  margin: 0;
  color: #d9dfdb;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.profile-security-actions {
  justify-content: center;
}

html[data-theme="light"] .profile-empty-copy strong,
html[data-theme="light"] .profile-bound-value strong,
html[data-theme="light"] .profile-security-question-list p {
  color: #27322c;
}

html[data-theme="light"] .profile-security-question-list li {
  border-color: #dce4df;
  background: #f8fbf9;
  box-shadow: inset 0 1px 0 #fff;
}

html[data-theme="light"] .profile-bound-value {
  border-color: #dce4df;
  background: #f8fbf9;
  box-shadow: inset 0 1px 0 #fff;
}

.support-ticket-shell { max-width: 1500px; }

.support-ticket-heading {
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.support-ticket-heading h1 {
  margin: 8px 0 7px;
  font-size: clamp(30px,3vw,42px);
  line-height: 1.18;
  letter-spacing: -.035em;
}

.support-ticket-heading p { max-width: 860px; line-height: 1.7; }

.support-ticket-heading > .support-ticket-back {
  gap: 9px;
  height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  transition: border-color .2s ease,background .2s ease,color .2s ease;
}

.support-ticket-heading > .support-ticket-back:hover {
  border-color: rgba(49,194,124,.34);
  background: rgba(49,194,124,.055);
  color: #d4e8dd;
}

.support-ticket-layout { gap: 24px; }

.profile-shell .support-ticket-create,
.profile-shell .support-ticket-reply {
  padding: 26px;
  border-color: rgba(255,255,255,.075);
  border-radius: 16px;
  background: linear-gradient(145deg,#1b1d1c,#181a19);
}

.support-ticket-panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.support-ticket-panel-head > span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(49,194,124,.22);
  border-radius: 12px;
  background: rgba(49,194,124,.06);
  color: #31c27c;
}

.support-ticket-panel-head small,
.support-ticket-list > header small {
  display: block;
  color: #68716c;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .17em;
}

.support-ticket-create .support-ticket-panel-head h2,
.support-ticket-reply .support-ticket-panel-head h2 {
  margin: 5px 0 0;
  font-size: 20px;
}

.support-ticket-shell .yt-field { margin-bottom: 18px; }

.support-ticket-shell .yt-field > span {
  display: block;
  margin-bottom: 8px;
  color: #8c9590;
  font-size: 13px;
  font-weight: 600;
}

.support-ticket-shell .yt-input,
.support-ticket-shell .yt-textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: #dfe4e1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  transition: border-color .2s ease,background .2s ease,box-shadow .2s ease;
}

.support-ticket-shell .yt-input { min-height: 48px; padding: 0 15px; }

.support-ticket-shell .yt-textarea {
  padding: 14px 15px;
  line-height: 1.75;
  resize: vertical;
}

.support-ticket-shell .yt-input:focus,
.support-ticket-shell .yt-textarea:focus {
  border-color: rgba(49,194,124,.58);
  background: rgba(49,194,124,.03);
  box-shadow: 0 0 0 3px rgba(49,194,124,.085);
  outline: none;
}

.support-file-field {
  padding: 14px;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}

.support-ticket-shell .support-file-input {
  min-height: 50px;
  height: auto;
  padding: 6px;
  border-style: solid;
}

.support-file-input::file-selector-button {
  height: 36px;
  margin-right: 12px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: rgba(49,194,124,.12);
  color: #56cd91;
  font: inherit;
  cursor: pointer;
}

.support-file-feedback {
  min-height: 18px;
  margin-top: 8px;
  color: #76817b;
  font-size: 12px;
  line-height: 18px;
}

.support-file-feedback.is-error { color: #e77979; }

.support-file-selection {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: rgba(0,0,0,.12);
}

.support-file-selection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.support-file-selection-head strong {
  color: #b8c1bc;
  font-size: 12px;
  font-weight: 600;
}

.support-file-selection-head button,
.support-file-selection li > button {
  border: 0;
  background: transparent;
  color: #7f8984;
  cursor: pointer;
  transition: color .2s ease,transform .2s ease;
}

.support-file-selection-head button:hover,
.support-file-selection li > button:hover { color: #e77979; }
.support-file-selection li > button:active { transform: scale(.92); }

.support-file-selection ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.support-file-selection li {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 28px;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 3px 6px 3px 3px;
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.support-file-selection li img {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  object-fit: cover;
}

.support-file-selection li > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.support-file-selection li strong {
  overflow: hidden;
  color: #cbd2ce;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-file-selection li small { color: #6f7974; font-size: 11px; }

.support-ticket-submit {
  display: inline-flex;
  min-width: 132px;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 0 16px;
  border-radius: 10px;
}

.support-ticket-submit i { font-size: 11px; transition: transform .2s ease; }
.support-ticket-submit:hover i { transform: translateX(3px); }

.support-ticket-list {
  border-color: rgba(255,255,255,.075);
  border-radius: 16px;
  background: linear-gradient(145deg,#1b1d1c,#181a19);
}

.support-ticket-list > header {
  min-height: 76px;
  padding: 0 22px;
}

.support-ticket-list > header h2 { margin-top: 6px; }

.support-ticket-list > header > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(49,194,124,.08);
}

.support-ticket-list > header > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #31c27c;
  box-shadow: 0 0 0 4px rgba(49,194,124,.11);
}

.support-ticket-row {
  min-height: 80px;
  padding: 12px 20px;
}

.support-ticket-row.is-unread {
  background: linear-gradient(90deg,rgba(49,194,124,.055),transparent 66%);
}

.support-ticket-status {
  padding: 5px 9px;
  border-radius: 999px;
  font-weight: 600;
}

.support-ticket-status.is-closed {
  background: rgba(255,255,255,.055);
  color: #7d8581;
}

.support-message {
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.support-message-attachments a { border-radius: 9px; }

.support-ticket-close-form .yt-btn {
  border-radius: 9px;
}

html[data-theme="light"] .profile-ticket-notification { border-color: #fff; }
html[data-theme="light"] .profile-card-watermark { color: rgba(31,82,57,.055) !important; }

html[data-theme="light"] .profile-record-list,
html[data-theme="light"] .profile-pagination-control,
html[data-theme="light"] .profile-pagination-pages a,
html[data-theme="light"] .profile-pagination-pages span {
  border-color: #dce4df;
  background: #fff;
}

html[data-theme="light"] .profile-record-row { border-color: #e6ebe8; }
html[data-theme="light"] .profile-record-row:hover { background: #f7faf8; }
html[data-theme="light"] .profile-record-copy > a,
html[data-theme="light"] .profile-record-copy > strong { color: #28332d; }
html[data-theme="light"] .profile-record-copy > a:hover { color: #168f5a; }
html[data-theme="light"] .profile-record-copy > span { color: #7c8881; }
html[data-theme="light"] .profile-record-copy > span i { background: #b8c1bc; }
html[data-theme="light"] .profile-record-value > strong { color: #9b6b23; }
html[data-theme="light"] .profile-record-metrics > span { border-color: #e1e7e3; background: #f7f9f8; color: #738079; }
html[data-theme="light"] .profile-record-metrics strong { color: #34413a; }
html[data-theme="light"] .profile-pagination-pages .is-current { border-color: #a8dbc0; background: #edf8f2; color: #168f5a; }

html[data-theme="light"] .profile-shell .profile-setting-card {
  border-color: #dce4df;
  background: linear-gradient(145deg,#fff,#fbfcfb);
}

html[data-theme="light"] .profile-setting-card .yt-input,
html[data-theme="light"] .profile-setting-card .yt-select,
html[data-theme="light"] .profile-setting-card .yt-textarea {
  border-color: #dbe3de;
  background: #f9fbfa;
  color: #28352e;
  box-shadow: inset 0 1px 0 #fff;
}
html[data-theme="light"] .profile-setting-card .yt-select {
  color-scheme: light;
}

html[data-theme="light"] .profile-setting-card .yt-select option {
  background-color: #fff;
  color: #28352e;
}

html[data-theme="light"] .profile-setting-card .yt-select option[value=""],
html[data-theme="light"] .profile-setting-card .yt-select option:disabled {
  color: #7a8580;
}

html[data-theme="light"] .profile-setting-card .yt-select option:checked {
  background-color: #dff3e8;
  color: #146e47;
}


html[data-theme="light"] .profile-setting-card .yt-input:focus,
html[data-theme="light"] .profile-setting-card .yt-select:focus,
html[data-theme="light"] .profile-setting-card .yt-textarea:focus {
  border-color: rgba(32,158,96,.52);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(32,158,96,.08);
}

html[data-theme="light"] .support-ticket-heading { border-color: #dfe6e2; }
html[data-theme="light"] .support-ticket-heading > .support-ticket-back { border-color: #dce3df; background: rgba(255,255,255,.72); color: #545d59; }
html[data-theme="light"] .profile-shell .support-ticket-create,
html[data-theme="light"] .profile-shell .support-ticket-reply,
html[data-theme="light"] .support-ticket-list { border-color: #dce4df; background: linear-gradient(145deg,#fff,#fbfcfb); }
html[data-theme="light"] .support-ticket-shell .yt-input,
html[data-theme="light"] .support-ticket-shell .yt-textarea { border-color: #d8e1dc; background: #f9fbfa; color: #26332c; box-shadow: inset 0 1px 0 #fff; }
html[data-theme="light"] .support-ticket-shell .yt-input:focus,
html[data-theme="light"] .support-ticket-shell .yt-textarea:focus { border-color: rgba(32,158,96,.52); background: #fff; box-shadow: 0 0 0 3px rgba(32,158,96,.08); }
html[data-theme="light"] .support-file-field { border-color: #d6e0da; background: #f8faf9; }
html[data-theme="light"] .support-file-input::file-selector-button { background: #eaf7f0; color: #168f5a; }
html[data-theme="light"] .support-file-selection { border-color: #e0e7e3; background: #fff; }
html[data-theme="light"] .support-file-selection li { background: #f6f9f7; }
html[data-theme="light"] .support-file-selection li strong { color: #38443d; }
html[data-theme="light"] .support-file-selection-head strong { color: #59675f; }
html[data-theme="light"] .support-ticket-list > header > span { background: #edf8f2; color: #168f5a; }
html[data-theme="light"] .support-ticket-row.is-unread { background: linear-gradient(90deg,#f0faf5,transparent 70%); }
html[data-theme="light"] .support-ticket-status.is-closed { background: #edf0ee; color: #6b7570; }
html[data-theme="light"] .support-message { box-shadow: 0 12px 30px rgba(36,54,44,.07); }

@media (prefers-reduced-motion: reduce) {
  .profile-ticket-notification:after { animation: none; }
}

@media (max-width: 900px) {
  .profile-record-row { grid-template-columns: 42px minmax(0,1fr) auto; }
  .profile-record-action { grid-column: 2/-1; justify-content: flex-start; }
  .profile-record-value,
  .profile-record-metrics { grid-row: 1/3; grid-column: 3; }
}

@media (max-width: 620px) {
  .profile-record-row { grid-template-columns: 36px minmax(0,1fr); gap: 12px; padding: 15px 16px; }
  .profile-record-icon { width: 36px; height: 36px; border-radius: 10px; }
  .profile-record-value,
  .profile-record-metrics,
  .profile-record-action { grid-row: auto; grid-column: 2; justify-self: start; justify-items: start; }
  .profile-record-value { display: flex; align-items: center; }
  .profile-record-copy > span { flex-wrap: wrap; }
  .profile-record-metrics { flex-wrap: wrap; }
  .profile-pagination { justify-content: space-between; }
  .profile-pagination-pages { display: none; }
  .profile-pagination-summary { display: inline; }
  .support-ticket-heading { align-items: flex-start; flex-direction: column; }
  .support-ticket-heading > .support-ticket-back { align-self: flex-start; }
  .profile-shell .support-ticket-create,
  .profile-shell .support-ticket-reply { padding: 20px; }
}

/* Home tags and friendly links: restrained classic tabs */
.home-link-directory {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  width: 92.8%;
  max-width: 2300px;
  margin: 30px auto 0;
  padding: 18px 28px 24px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 12px;
  background:
    radial-gradient(circle at 91% 10%,rgba(49,194,124,.055),transparent 29%),
    #171918;
}

.home-link-directory:after {
  position: absolute;
  z-index: -1;
  right: 48px;
  top: -110px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(49,194,124,.075);
  border-radius: 50%;
  content: "";
}

.home-link-directory .template-link-tabs { margin: 0; }

.home-link-directory .template-link-tabs > .layui-tab-title {
  display: flex;
  gap: 30px;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.11);
  background: transparent;
}

.home-link-directory .template-link-tabs > .layui-tab-title > li {
  min-width: auto;
  height: 48px;
  padding: 0 2px;
  color: #858d89;
  font-size: 14px;
  font-weight: 600;
  line-height: 48px;
  transition: color .2s ease;
}

.home-link-directory .template-link-tabs > .layui-tab-title > li:hover { color: #b5bcb8; }

.home-link-directory .template-link-tabs > .layui-tab-title > li.layui-this {
  background: transparent;
  color: #31c27c;
}

.home-link-directory .template-link-tabs > .layui-tab-title > li.layui-this:after {
  display: block;
  top: 0;
  height: 2px;
  background: #31c27c;
}

.home-link-directory .template-link-tabs > .layui-tab-content {
  min-height: 62px;
  padding: 15px 0 0;
}

.template-link-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 28px;
  row-gap: 2px;
}

.template-link-list a {
  position: relative;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  margin: 0;
  color: #929b96;
  font-size: 13px;
  line-height: 34px;
  transition: color .2s ease,transform .2s ease;
}

.template-link-list a:hover,
.template-link-list a:focus-visible {
  color: #31c27c;
  outline: none;
  transform: translateY(-1px);
}

.template-link-empty {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  color: #69726d;
  font-size: 13px;
}

html[data-theme="light"] .home-link-directory {
  border-color: #e0e6e2;
  background:
    radial-gradient(circle at 91% 10%,rgba(49,194,124,.065),transparent 30%),
    #fbfcfb;
}

html[data-theme="light"] .home-link-directory:after { border-color: rgba(31,151,92,.09); }

html[data-theme="light"] .home-link-directory .template-link-tabs > .layui-tab-title {
  border-color: #d9e0dc;
}

html[data-theme="light"] .home-link-directory .template-link-tabs > .layui-tab-title > li {
  color: #68746d;
}

html[data-theme="light"] .home-link-directory .template-link-tabs > .layui-tab-title > li:hover { color: #35443c; }

html[data-theme="light"] .home-link-directory .template-link-tabs > .layui-tab-title > li.layui-this {
  color: #168f5a;
}

html[data-theme="light"] .template-link-list a { color: #59665f; }
html[data-theme="light"] .template-link-empty { color: #89938d; }

html[data-theme="light"] .template-link-list a:hover,
html[data-theme="light"] .template-link-list a:focus-visible { color: #168f5a; }

@media (max-width: 680px) {
  .home-link-directory { width: calc(100% - 28px); margin-top: 24px; padding: 15px 18px 20px; border-radius: 10px; }
  .home-link-directory .template-link-tabs > .layui-tab-title { gap: 24px; overflow-x: auto; }
  .home-link-directory .template-link-tabs > .layui-tab-title > li { flex: none; height: 45px; line-height: 45px; }
  .template-link-list { column-gap: 20px; }
}

/* 2026-07-21 mobile navigation, search and accessibility */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 10100;
  top: 10px;
  left: 12px;
  padding: 9px 14px;
  border-radius: 6px;
  background: #31c27c;
  color: #07110b;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform .18s ease;
}

.skip-link:focus { transform: translateY(0); }

:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid #31c27c;
  outline-offset: 3px;
}

.mobile-header-actions,
.mobile-nav-all,
.mobile-nav-layer,
.mobile-search-layer { display: none; }

.mobile-nav-layer[hidden],
.mobile-search-layer[hidden] { display: none !important; }

html.mobile-overlay-open { overflow: hidden; }

@media (max-width: 760px) {
  .header { display: flex; align-items: center; justify-content: flex-end; padding-left: 118px; }
  .header > .header_search { display: none; }
  .logo { max-width: 112px; }
  .logo a { max-width: 112px; }
  .logo .site-brand-subtitle { font-size: 13px; }

  .mobile-header-actions {
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
  }

  .mobile-search-trigger,
  .mobile-user-entry,
  .mobile-auth-entry {
    display: inline-flex;
    min-width: 32px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #a8afab;
    font-size: 12px;
  }

  .mobile-search-trigger { cursor: pointer; font-size: 19px; }
  .mobile-user-entry { font-size: 18px; }
  .mobile-auth-entry { padding: 0 6px; }
  .mobile-auth-entry.is-register { color: #31c27c; }

  .column_menu { right: 64px; width: auto; }
  .column_menu ul { min-width: max-content; padding-right: 12px; }
  .column_menu ul li.column_has_children > a .column_arrow { display: none; }
  .column_menu ul li.column_has_children.is-open > ul.column_submenu { display: grid; }

  .mobile-nav-all {
    position: fixed;
    z-index: 22;
    top: 60px;
    right: 0;
    display: inline-flex;
    width: 64px;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-left: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: #141414;
    color: #9aa19d;
    font-size: 12px;
    cursor: pointer;
  }

  .mobile-nav-all i { color: #31c27c; font-size: 13px; }

  .mobile-nav-layer,
  .mobile-search-layer {
    position: fixed;
    z-index: 10020;
    inset: 0;
    display: block;
  }

  .mobile-nav-backdrop,
  .mobile-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5,8,6,.72);
    opacity: 0;
    transition: opacity .22s ease;
    backdrop-filter: blur(4px);
  }

  .mobile-nav-layer.is-open .mobile-nav-backdrop,
  .mobile-search-layer.is-open .mobile-search-backdrop { opacity: 1; }

  .mobile-nav-drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(430px,91vw);
    overflow-y: auto;
    padding: 20px 16px max(26px,env(safe-area-inset-bottom));
    border-right: 1px solid rgba(49,194,124,.16);
    background: #151716;
    box-shadow: 24px 0 70px rgba(0,0,0,.36);
    transform: translateX(-102%);
    transition: transform .24s cubic-bezier(.22,.78,.28,1);
  }

  .mobile-nav-layer.is-open .mobile-nav-drawer { transform: translateX(0); }

  .mobile-nav-head {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0 2px 14px;
    border-bottom: 1px solid rgba(255,255,255,.075);
  }

  .mobile-nav-head small { display: block; margin-bottom: 4px; color: #626b66; font-size: 10px; }
  .mobile-nav-head strong { color: #e2e5e3; font-size: 18px; }
  .mobile-nav-head button,
  .mobile-search-close {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    background: rgba(255,255,255,.035);
    color: #98a09b;
  }

  .mobile-nav-root,
  .mobile-nav-children > div {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
  }

  .mobile-nav-item,
  .mobile-nav-children a,
  .mobile-nav-children .is-group {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    padding: 8px 4px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 9px;
    background: rgba(255,255,255,.025);
    color: #9da49f;
    font-size: 11px;
    text-align: center;
  }

  button.mobile-nav-item { width: 100%; font-family: inherit; cursor: pointer; }
  .mobile-nav-item > i,
  .mobile-nav-children a > i,
  .mobile-nav-children .is-group > i { color: #31c27c; font-size: 13px; }
  .mobile-nav-item > span,
  .mobile-nav-children a > span,
  .mobile-nav-children .is-group > span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav-item > b { position: absolute; top: 5px; right: 6px; color: #68716c; font-size: 9px; transition: transform .2s ease; }
  .mobile-nav-item.is-expanded > b { color: #31c27c; transform: rotate(180deg); }
  .mobile-nav-item.is-active { border-color: rgba(49,194,124,.28); background: rgba(49,194,124,.07); color: #dbe7e0; }

  .mobile-nav-children-wrap { margin-top: 14px; }
  .mobile-nav-children { padding: 14px; border: 1px solid rgba(49,194,124,.14); border-radius: 11px; background: rgba(49,194,124,.035); }
  .mobile-nav-children > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
  .mobile-nav-children > header strong { color: #d9dedb; font-size: 13px; }
  .mobile-nav-children > header span { color: #67706b; font-size: 10px; }
  .mobile-nav-children .is-group { color: #727a76; }

  .mobile-search-layer { padding: 12vh 14px 24px; }
  .mobile-search-panel {
    position: relative;
    width: min(430px,100%);
    margin: 0 auto;
    padding: 28px 24px 24px;
    border: 1px solid rgba(49,194,124,.19);
    border-radius: 14px;
    background: #181a19;
    box-shadow: 0 28px 80px rgba(0,0,0,.42);
    opacity: 0;
    transform: translateY(-16px) scale(.985);
    transition: opacity .2s ease,transform .22s ease;
  }

  .mobile-search-layer.is-open .mobile-search-panel { opacity: 1; transform: translateY(0) scale(1); }
  .mobile-search-close { position: absolute; top: 14px; right: 14px; }
  .mobile-search-brand { display: flex; min-height: 42px; align-items: center; gap: 10px; padding-right: 44px; }
  .mobile-search-brand img { width: 38px; height: 38px; object-fit: contain; border-radius: 6px; }
  .mobile-search-brand strong { overflow: hidden; color: #dce1de; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-search-panel h2 { margin: 22px 0 6px; color: #e7eae8; font-size: 22px; line-height: 1.35; }
  .mobile-search-panel > p { margin: 0 0 18px; color: #747d78; font-size: 13px; }
  .mobile-search-panel form { display: grid; grid-template-columns:minmax(0,1fr) 76px; gap: 9px; }
  .mobile-search-panel input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; outline: 0; background: #202321; color: #eceeed; }
  .mobile-search-panel input:focus { border-color: rgba(49,194,124,.6); box-shadow: 0 0 0 3px rgba(49,194,124,.08); }
  .mobile-search-panel button[type="submit"] { border: 0; border-radius: 9px; background: #31c27c; color: #07110b; font-weight: 700; }

  .home-banner-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: repeat(2,84px);
    gap: 6px;
    width: calc(100% - 28px);
    padding-top: 14px;
  }
  .home-banner-grid > a,
  .home-banner-grid > div { height: auto !important; }
  .home-banner-left_top { grid-column: 1; grid-row: 1; }
  .home-banner-left_bottom { grid-column: 1; grid-row: 2; }
  .home-banner-center,
  .home-banner-grid .home-banner-center { grid-column: 2 / span 2; grid-row: 1 / span 2; height: auto; }
  .home-banner-right_top { grid-column: 4; grid-row: 1; }
  .home-banner-right_bottom { grid-column: 4; grid-row: 2; }

  .home-quick-links { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px 4px; padding: 14px 8px; }
  .home-quick-link { min-height: 58px; gap: 5px; }
  .home-quick-icon,
  .home-quick-icon.is-image img { width: 30px; height: 30px; }
  .home-quick-link strong { font-size: 10px; line-height: 16px; }
}

@media (max-width: 360px) {
  .mobile-nav-root,
  .mobile-nav-children > div { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .mobile-auth-entry { padding: 0 3px; }
}

html[data-theme="light"] .mobile-nav-all { border-color: #dce4df; background: #fff; color: #647169; }
html[data-theme="light"] .mobile-nav-drawer,
html[data-theme="light"] .mobile-search-panel { border-color: #d7e4dc; background: #fbfdfc; box-shadow: 24px 0 70px rgba(43,65,52,.16); }
html[data-theme="light"] .mobile-nav-head { border-color: #e0e7e3; }
html[data-theme="light"] .mobile-nav-head strong,
html[data-theme="light"] .mobile-search-brand strong,
html[data-theme="light"] .mobile-search-panel h2 { color: #26322b; }
html[data-theme="light"] .mobile-nav-item,
html[data-theme="light"] .mobile-nav-children a,
html[data-theme="light"] .mobile-nav-children .is-group { border-color: #e0e7e3; background: #fff; color: #617067; }
html[data-theme="light"] .mobile-nav-item.is-active { border-color: #a9d9bf; background: #eef8f2; color: #176d45; }
html[data-theme="light"] .mobile-nav-children { border-color: #cfe5d8; background: #f1f8f4; }
html[data-theme="light"] .mobile-search-panel input { border-color: #d8e1dc; background: #f4f7f5; color: #26332c; }

/* 2026-07-21 compact mobile content and interaction refinements */
.detail-mobile-head,
.detail-mobile-info-trigger,
.detail-mobile-sheet { display: none; }

@media (max-width: 760px) {
  .home-latest-heading { text-align: center; }
  .home-latest-heading .xiaotitle:before { display: none; }
  .home-latest-title { display: inline-block; position: relative; margin-bottom: 11px; padding: 0; }
  .home-latest-title:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: #31c27c;
    transform: translateX(-50%);
  }
  .home-latest-heading .template-section-subtitle { margin-top: 2px; text-align: center; }

  .profile-center { padding: 18px 12px 34px; }
  .profile-shell { width: 100%; }
  .profile-membership-banner { min-height: 122px; padding: 18px 18px 17px; border-radius: 12px; }
  .profile-membership-banner:after { width: 118px; height: 118px; right: 16%; }
  .profile-membership-identity { max-width: calc(100% - 94px); }
  .profile-membership-kicker { margin-bottom: 5px; font-size: 10px; }
  .profile-membership-identity strong { font-size: 23px; }
  .profile-membership-identity small { margin-top: 4px; font-size: 11px; }
  .profile-membership-banner .profile-hero-meta { position: static; width: auto; margin: 0; }
  .profile-membership-banner .profile-hero-meta a { flex: none; }
  .profile-membership-banner .profile-ticket-action {
    position: absolute;
    top: 14px;
    right: 14px;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 8px;
    font-size: 11px;
  }
  .profile-membership-action { position: absolute; right: 15px; bottom: 15px; min-height: 31px !important; padding: 0 13px !important; font-size: 11px !important; }

  .profile-shell .yt-profile-nav {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 3px;
    padding: 6px;
    overflow: visible;
    border-radius: 11px;
  }
  .profile-shell .yt-profile-nav button {
    min-width: 0;
    min-height: 39px;
    padding: 5px 2px;
    border-radius: 7px;
    font-size: 11px;
    white-space: nowrap;
  }
  .profile-shell .yt-profile-nav button.active:after { left: 30%; right: 30%; bottom: 3px; }
  .yt-profile-pane { padding-top: 22px; }
  .yt-section-head { margin-bottom: 15px; }
  .yt-section-head h2 { font-size: 22px; }
  .yt-section-head p { margin-top: 3px; font-size: 12px; }
  .profile-section-kicker { font-size: 8px; letter-spacing: .12em; }

  .profile-record-row { grid-template-columns: 34px minmax(0,1fr) !important; gap: 10px !important; padding: 14px !important; }
  .profile-record-copy > a,
  .profile-record-copy > strong { overflow: visible; font-size: 14px; line-height: 1.5; text-overflow: clip; white-space: normal; }
  .profile-record-copy > span { margin-top: 5px; gap: 6px; font-size: 10px; line-height: 1.45; }
  .profile-record-metrics,
  .profile-record-value { grid-column: 2 !important; grid-row: auto !important; justify-self: start !important; margin-top: 2px; }
  .profile-record-action { grid-column: 2 !important; grid-row: auto !important; }
  .profile-record-row.is-download .profile-record-action { display: none; }
  .profile-record-metrics { gap: 6px; }
  .profile-record-metrics > span { padding: 4px 7px; font-size: 9px; }
  .profile-record-value { gap: 8px; }

  .profile-favorite-row { padding: 14px 15px; }
  .profile-favorite-copy > a { overflow: visible; display: block; font-size: 14px; line-height: 1.55; text-overflow: clip; white-space: normal; }
  .profile-favorite-link { display: none; }

  .profile-referral-link { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
  .profile-referral-link .yt-copy-row { width: 100%; }
  .profile-referral-link .yt-input { min-width: 0; font-size: 11px; }
  .profile-balance-cards { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .profile-balance-cards .yt-info-box { min-height: 78px; padding: 12px 10px; }
  .profile-balance-cards .yt-info-box span { font-size: 10px; }
  .profile-balance-cards .yt-info-box strong { font-size: 15px; }
  .profile-referral-ledger { grid-template-columns: 1fr; gap: 10px; }
  .profile-ledger-section { min-width: 0; }
  .profile-ledger-section header { padding: 14px; }
  .profile-referral-ledger .table-scroll { overflow: visible; }
  .profile-referral-ledger .yt-table,
  .profile-referral-ledger .yt-table tbody,
  .profile-referral-ledger .yt-table tr,
  .profile-referral-ledger .yt-table td { display: block; width: 100%; }
  .profile-referral-ledger .yt-table thead { display: none; }
  .profile-referral-ledger .yt-table tr { padding: 9px 14px; border-top: 1px solid rgba(255,255,255,.06); }
  .profile-referral-ledger .yt-table td { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 5px 0; border: 0; text-align: right; overflow-wrap: anywhere; }
  .profile-referral-ledger .yt-table td:before { content: attr(data-label); flex: 0 0 auto; color: #68716c; font-size: 10px; }
  .profile-referral-ledger .yt-table tr.is-empty td { display: block; text-align: center; }
  .profile-referral-ledger .yt-table tr.is-empty td:before { display: none; }
  .profile-withdraw-panel { padding: 17px 15px; }

  .profile-settings-grid { grid-template-columns: 1fr; gap: 12px; }
  .profile-setting-card { padding: 18px 15px; border-radius: 12px; }
  .profile-setting-head { margin-bottom: 18px; }
  .profile-setting-head > span { width: 36px; height: 36px; border-radius: 10px; }
  .profile-setting-state { min-height: 190px; }
  .profile-action-row { align-items: stretch; flex-direction: column; }
  .profile-action-row .yt-btn { width: 100%; justify-content: center; }
  .yt-input,
  .yt-select { border-radius: 9px; }

  .detail-column > .column_right { display: none !important; }
  .detail-column > .column_left { width: 100%; }
  .detail-mobile-head { display: block; padding: 18px 14px 15px; }
  .detail-mobile-title { margin: 0; color: #e7e9e8; font-size: 20px; line-height: 1.45; font-weight: 700; }
  .detail-mobile-head p { margin: 7px 0 0; color: #737b77; font-size: 11px; }
  .detail-mobile-head > a { display: inline-flex; min-height: 34px; align-items: center; gap: 5px; margin-top: 12px; padding: 0 12px; border: 1px solid rgba(49,194,124,.22); border-radius: 8px; color: #31c27c; font-size: 11px; }
  .detail-mobile-info-trigger { display: block; }
  .zuopin_menu ul li.detail-mobile-info-trigger { display: block; }
  .detail-mobile-sheet { position: fixed; z-index: 10030; inset: 0; display: block; }
  .detail-mobile-sheet[hidden] { display: none; }
  .detail-mobile-sheet-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(3,5,4,.68); backdrop-filter: blur(3px); }
  .detail-mobile-sheet-panel { position: absolute; right: 0; bottom: 0; left: 0; max-height: min(76vh,620px); overflow-y: auto; padding: 18px 18px max(30px,env(safe-area-inset-bottom)); border: 1px solid rgba(255,255,255,.08); border-bottom: 0; border-radius: 18px 18px 0 0; background: #181a19; box-shadow: 0 -24px 70px rgba(0,0,0,.42); }
  .detail-mobile-sheet-handle { width: 36px; height: 3px; margin: -5px auto 15px; border-radius: 3px; background: #4b524e; }
  .detail-mobile-sheet-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(255,255,255,.035); color: #9da59f; }
  .detail-mobile-sheet h2 { margin: 0; padding-right: 42px; color: #e7e9e8; font-size: 19px; line-height: 1.5; }
  .detail-mobile-sheet-meta { margin: 8px 0 15px; color: #737c77; font-size: 11px; }
  .detail-mobile-sheet-description { margin: 0 0 14px; color: #a5aba7; font-size: 13px; line-height: 1.75; }
  .detail-mobile-sheet .detail-category { display: inline-flex; margin-bottom: 12px; }
  .detail-mobile-sheet .detail-side-tags { margin-top: 2px; }

  .native-image-viewer .viewer-stage { touch-action: none; }
  .native-image-viewer .viewer-toolbar { right: 8px; bottom: max(8px,env(safe-area-inset-bottom)); left: 8px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 4px; padding: 6px; }
  .native-image-viewer .viewer-toolbar button { min-width: 0; padding: 7px 3px; font-size: 10px; }
  .native-image-viewer .viewer-toolbar button[data-action="rotate-left"],
  .native-image-viewer .viewer-toolbar button[data-action="rotate-right"],
  .native-image-viewer .viewer-toolbar button[data-action="flip-x"],
  .native-image-viewer .viewer-toolbar button[data-action="flip-y"],
  .native-image-viewer .viewer-toolbar button[data-action="exif"] { display: none; }

  .membership-shell { padding: 18px 12px 24px; }
  .membership-hero { grid-template-columns: minmax(0,1.55fr) minmax(112px,.75fr); }
  .membership-hero-copy { min-height: 0; padding: 18px 16px; }
  .membership-eyebrow { font-size: 8px; letter-spacing: .13em; }
  .membership-hero h1 { margin: 9px 0 6px; font-size: 21px; line-height: 1.35; }
  .membership-hero p { margin: 0; font-size: 11px; line-height: 1.6; }
  .membership-hero-actions { margin-top: 13px; gap: 6px; }
  .membership-hero-actions a { min-height: 31px; padding: 0 10px; font-size: 10px; }
  .membership-current { min-height: 0; padding: 16px 12px; }
  .membership-current span { font-size: 9px; }
  .membership-current strong { margin: 7px 0 4px; font-size: 16px; }
  .membership-current p { font-size: 9px; line-height: 1.5; }
  .membership-promotion { margin: 12px 0; padding: 14px 16px; border-radius: 10px; }
  .membership-promotion p { font-size: 13px; line-height: 1.65; }
  .membership-package-grid { gap: 12px; }
}

@media (max-width: 390px) {
  .membership-hero { grid-template-columns: minmax(0,1.42fr) minmax(104px,.72fr); }
  .membership-hero-copy { padding: 15px 13px; }
  .membership-hero h1 { font-size: 18px; }
  .membership-hero-copy > p { display: none; }
  .membership-current { padding: 14px 10px; }
  .membership-current p { display: none; }
}

html[data-theme="light"] .detail-mobile-title,
html[data-theme="light"] .detail-mobile-sheet h2 { color: #27322c; }
html[data-theme="light"] .detail-mobile-sheet-panel { border-color: #dce4df; background: #fbfdfc; box-shadow: 0 -24px 70px rgba(43,65,52,.17); }
html[data-theme="light"] .detail-mobile-sheet-close { border-color: #dce4df; background: #f4f7f5; color: #647169; }
html[data-theme="light"] .profile-referral-ledger .yt-table tr { border-color: #e4eae6; }

/* 2026-07-21 mobile polish: navigation, directory, auth and continuous reading */
.mobile-app-nav { display: none; }

:where(input,select,textarea):focus-visible {
  outline: 0;
  outline-offset: 0;
}

.auth-modal-form input:focus {
  border-color: rgba(49,194,124,.78);
  box-shadow: none;
}

.gallerypic:not(.xiaotu) .cms-article-gallery > a {
  margin: 0;
  line-height: 0;
}

.gallerypic:not(.xiaotu) .cms-article-gallery > a > img,
.gallerypic:not(.xiaotu) .cms-article-gallery > video {
  margin-bottom: 0;
}

.gallerypic:not(.xiaotu) .download-preview-groups { gap: 0; padding: 0; }
.gallerypic:not(.xiaotu) .download-preview-group h2 { margin: 18px 20px 12px; }
.gallerypic:not(.xiaotu) .download-preview-item { margin: 0; }

.home-latest-spacer { height: 24px; }

.download-directory-list a > i {
  flex: 0 0 auto;
  margin-right: 10px;
  color: #31c27c;
  font-size: 12px;
  opacity: .85;
}

.profile-record-inline-metrics {
  margin-left: 7px;
  color: #69716d;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

html[data-theme="light"] .auth-modal-panel {
  border-color: #cfe4d8;
  background: #fbfdfc;
  color: #26312b;
  box-shadow: 0 24px 70px rgba(41,63,51,.2);
}

html[data-theme="light"] .auth-modal-close { color: #6f7973; }
html[data-theme="light"] .auth-modal-close:hover,
html[data-theme="light"] .auth-modal-close:focus-visible {
  background: #eef3f0;
  color: #168f5a;
}
html[data-theme="light"] .auth-modal-title { color: #168f5a; }
html[data-theme="light"] .auth-modal-message { color: #168f5a; }
html[data-theme="light"] .auth-modal-message.is-error { color: #c64e4e; }
html[data-theme="light"] .auth-modal-form label { color: #59655e; }
html[data-theme="light"] .auth-modal-form input {
  border-color: #d7e1db;
  background: #f4f7f5;
  color: #26312b;
}
html[data-theme="light"] .auth-modal-form input:focus { border-color: #31a96d; box-shadow: none; }
html[data-theme="light"] .auth-modal-switch { color: #7a847e; }

@media (max-width: 760px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  html.viewer-lock body,
  html.mobile-overlay-open body { padding-bottom: 0; }

  .mobile-theme-switch {
    display: inline-grid;
    width: 32px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #a8afab;
    cursor: pointer;
    font-size: 16px;
  }
  .mobile-theme-switch:hover { color: #31c27c; }

  .column_menu {
    position: fixed;
    right: 64px;
    height: 64px;
    border-top: 0;
    direction: ltr;
  }
  html[data-theme="light"] .header { box-shadow: none; }
  .column_menu ul { gap: 3px; height: 64px; padding: 0 6px; }
  .column_menu ul li { min-width: 62px; }
  .column_menu ul li a,
  .column_menu ul li.column_has_children > a {
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 7px 5px 6px;
    line-height: 1.15;
    text-align: center;
  }
  .column_menu ul li .nav-solid-icon,
  .column_menu ul li i {
    width: auto;
    margin: 0;
    font-size: 15px;
  }
  .column_menu ul li a:before {
    top: auto;
    right: 16%;
    bottom: 0;
    left: 16%;
    width: auto;
    height: 2px;
  }
  .column_menu ul li.column_has_children { position: static; }
  .column_menu ul li.column_has_children > a { position: relative; }
  .column_menu ul li.column_has_children > a .column_arrow {
    position: absolute;
    top: 7px;
    right: 7px;
    display: block;
    margin: 0;
    color: #69716d;
    font-size: 8px;
    transform: rotate(90deg);
    transition: color .18s ease,transform .18s ease;
  }
  .column_menu ul li.column_has_children.is-open > a .column_arrow {
    color: #31c27c;
    transform: rotate(270deg);
  }
  .column_menu ul li.column_has_children.is-open > ul.column_submenu {
    position: fixed;
    z-index: 31;
    top: 124px;
    right: 8px;
    left: 8px;
    display: grid;
    width: auto;
    height: auto;
    max-height: min(42vh,260px);
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 4px 8px;
    padding: 10px;
    overflow-y: auto;
    border: 1px solid rgba(49,194,124,.22);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: rgba(20,22,21,.98);
    box-shadow: 0 18px 34px rgba(0,0,0,.3);
  }
  .column_menu ul.column_submenu li { display: block; min-width: 0; margin: 0; }
  .column_menu ul.column_submenu li a,
  .column_menu ul.column_submenu li span {
    display: flex;
    width: 100%;
    min-height: 38px;
    height: auto;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: 6px;
    padding: 6px 8px;
    overflow: hidden;
    border-radius: 6px;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .column_menu ul.column_submenu li a:hover { background: rgba(49,194,124,.07); }
  .column_menu ul.column_submenu li a:before { display: none; }
  .column_menu ul.column_submenu li .nav-solid-icon { flex: 0 0 auto; font-size: 12px; }
  html[data-theme="light"] .column_menu ul li.column_has_children.is-open > ul.column_submenu {
    border-color: #dce6e0;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 34px rgba(35,48,41,.16);
  }
  html[data-theme="light"] .column_menu ul.column_submenu li a:hover { background: #f0f8f4; }

  .mobile-nav-all {
    position: fixed;
    height: 64px;
    flex-direction: column;
    gap: 5px;
    padding-top: 2px;
  }
  .mobile-nav-all i { font-size: 15px; }

  .home-banner-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: minmax(164px,43vw) 76px;
    gap: 6px;
    margin-top: 10px;
  }
  .home-banner-center,
  .home-banner-grid .home-banner-center { grid-column: 1 / -1; grid-row: 1; }
  .home-banner-left_top { grid-column: 1; grid-row: 2; }
  .home-banner-left_bottom { grid-column: 2; grid-row: 2; }
  .home-banner-right_top { grid-column: 3; grid-row: 2; }
  .home-banner-right_bottom { grid-column: 4; grid-row: 2; }

  .latest-flow-head {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    column-gap: 10px;
    margin: 8px 14px 18px;
    padding: 14px 16px 13px;
  }
  .latest-flow-head > span {
    height: 20px;
    padding: 0 7px;
    font-size: 10px;
  }
  .latest-flow-head h1 {
    margin: 0;
    font-size: 25px;
    line-height: 32px;
  }
  .latest-flow-head > p {
    grid-column: 1 / -1;
    margin-top: 4px;
    font-size: 13px;
    line-height: 20px;
  }
  .latest-flow-stats {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin-top: 11px;
  }
  .latest-flow-stats div { gap: 0; }
  .latest-flow-stats strong { font-size: 18px; line-height: 24px; }
  .latest-flow-stats small { font-size: 11px; line-height: 16px; }

  .home-quick-links { margin-bottom: 10px; }
  .home-latest-spacer { height: 0; }
  .home-latest-heading { padding-top: 0; }
  .home-latest-title { margin-bottom: 4px; line-height: 42px; }
  .home-latest-title:after { bottom: 4px; width: 28px; }
  .home-latest-heading .template-section-subtitle { margin-top: 0; }

  .mobile-app-nav {
    position: fixed;
    z-index: 90;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    min-height: calc(58px + env(safe-area-inset-bottom));
    padding: 4px 8px env(safe-area-inset-bottom);
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(20,22,21,.96);
    box-shadow: 0 -10px 28px rgba(0,0,0,.22);
    backdrop-filter: blur(14px);
  }
  .mobile-app-nav > a,
  .mobile-app-nav > button {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 5px 2px 4px;
    border: 0;
    background: transparent;
    color: #89918c;
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
  }
  .mobile-app-nav i { font-size: 17px; }
  .mobile-app-nav .is-active,
  .mobile-app-nav > a:hover,
  .mobile-app-nav > button:hover { color: #31c27c; }
  .mobile-app-nav .is-active:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #31c27c;
    transform: translateX(-50%);
  }
  html.viewer-lock .mobile-app-nav,
  html.mobile-overlay-open .mobile-app-nav { display: none; }

  .profile-shell .yt-profile-nav button {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 6px 2px 7px;
  }
  .profile-shell .yt-profile-nav button > i { color: #7c8781; font-size: 14px; }
  .profile-shell .yt-profile-nav button.active > i { color: #31c27c; }
  .profile-shell .yt-profile-nav button > span { line-height: 1.15; }
  .profile-shell .yt-profile-nav button.active:after { bottom: 2px; }
  .profile-record-inline-metrics { display: inline; margin-left: 5px; font-size: 9px; }

  .download-directory-nav-shell {
    position: static;
    top: auto;
    z-index: auto;
    margin-bottom: 14px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 0 0 10px 10px;
  }
  .download-directory-nav {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
    overflow: visible;
  }
  .download-directory-nav a {
    min-width: 0;
    height: auto;
    min-height: 38px;
    justify-content: center;
    gap: 5px;
    padding: 6px 5px;
    text-align: center;
  }
  .download-directory-nav a span { overflow: hidden; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .download-directory-nav strong { font-size: 9px; }
  .download-directory-group { scroll-margin-top: 204px; }
  .download-directory-group > header { min-height: 48px; padding: 0 14px; }
  .download-directory-group > header h2 { font-size: 17px; }
  .download-directory-list { gap: 0; padding: 4px 12px 8px; }
  .download-directory-list a { min-height: 50px; padding: 8px 5px; }
  .download-directory-list a > i { margin-right: 10px; font-size: 11px; }
  .download-directory-list a span { max-height: none; font-size: 14px; line-height: 1.45; -webkit-line-clamp: 2; line-clamp: 2; }
  .download-directory-top { bottom: calc(72px + env(safe-area-inset-bottom)); }

  .detail-mobile-head {
    padding: 17px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    text-align: center;
  }
  .detail-mobile-title {
    max-width: 31rem;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.42;
    text-wrap: balance;
  }
  .detail-mobile-head p { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
  .detail-mobile-category { color: #31c27c; }
  .detail-mobile-category:hover { text-decoration: underline; text-underline-offset: 3px; }
  .detail-mobile-head > a { margin-top: 10px; }

  .footer { padding-bottom: 76px; }
}

@media (max-width: 390px) {
  .home-banner-grid { grid-template-rows: 158px 70px; }
  .column_menu ul li { min-width: 58px; }
  .download-directory-nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

html[data-theme="light"] .mobile-theme-switch { color: #65716a; }
html[data-theme="light"] .mobile-app-nav {
  border-color: #dce4df;
  background: rgba(255,255,255,.97);
  box-shadow: 0 -9px 26px rgba(43,65,52,.12);
}
html[data-theme="light"] .mobile-app-nav > a,
html[data-theme="light"] .mobile-app-nav > button { color: #6c7771; }
html[data-theme="light"] .mobile-app-nav .is-active,
html[data-theme="light"] .mobile-app-nav > a:hover,
html[data-theme="light"] .mobile-app-nav > button:hover { color: #168f5a; }
html[data-theme="light"] .profile-shell .yt-profile-nav button > i { color: #78847d; }
html[data-theme="light"] .profile-shell .yt-profile-nav button.active > i { color: #168f5a; }
html[data-theme="light"] .download-directory-nav-shell { border-color: #dfe5e2; background: #f8faf9; }
html[data-theme="light"] .detail-mobile-head { border-color: #e1e7e3; }

/* 2026-07-21 final mobile density and commerce refinements */
.home-banner-grid > * picture {
  display: block;
  width: 100%;
  height: 100%;
}

.membership-package.is-mobile-repeat,
.profile-membership-emblem { display: none; }

/* Static sales/guide pages inherit the template while keeping their own identity. */
body .template-static-body .gonggao-sales {
  --gs-red: #b44b42;
  --gs-red-dark: #8f3933;
  --gs-red-soft: rgba(180,75,66,.11);
}

body .template-static-body .gonggao-sales :is(.gs-hero,.gs-flash,.gs-scale,.gs-content,.gs-cta,.gs-membership,.gs-price,.gs-proof,.gs-final) {
  border-radius: 12px;
}

body .template-static-body .gonggao-sales .gs-scale { overflow: hidden; }

@media (max-width: 680px) {
  .mobile-app-nav .is-active:after { display: none; }

  .home-link-directory {
    padding-bottom: 15px;
  }
  .home-link-directory .template-link-tabs > .layui-tab-content {
    min-height: 0;
    padding: 12px 0 1px;
  }
  .home-link-directory .template-link-list { min-height: 0; }
  .footer { display: none; }

  .download-directory { padding-bottom: 32px; }
  .download-directory-hero {
    display: block;
    margin-bottom: 10px;
    padding: 16px;
    border-radius: 10px;
  }
  .download-collection-kicker { display: none; }
  .download-directory-hero h1 {
    margin: 0 0 5px;
    font-size: 26px;
    line-height: 1.25;
  }
  .download-directory-heading > p { font-size: 12px; line-height: 1.55; }
  .download-directory-total { margin-top: 4px !important; }
  .download-directory-guide {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(49,194,124,.2);
    border-left-width: 1px;
    border-radius: 8px;
    background: rgba(49,194,124,.045);
  }
  .download-directory-guide > span { margin-bottom: 4px; font-size: 10px; }
  .download-directory-guide > strong { margin-bottom: 5px; font-size: 13px; line-height: 1.5; }
  .download-directory-guide p { font-size: 11px; line-height: 1.55; }
  .download-directory-search { height: 40px; margin-top: 12px; border-radius: 8px; }

  .detail-mobile-head p { column-gap: 5px; row-gap: 5px; }
  .detail-mobile-download-anchor {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    gap: 3px;
    margin-left: 3px;
    padding: 0 7px;
    border: 1px solid rgba(49,194,124,.24);
    border-radius: 6px;
    color: #31c27c;
    font-size: 9px;
    white-space: nowrap;
  }

  .profile-membership-banner {
    display: grid;
    grid-template-columns: 36px minmax(0,1fr) auto;
    min-height: 78px;
    gap: 11px;
    margin-bottom: 12px;
    padding: 12px 13px;
  }
  .profile-membership-banner:after { width: 92px; height: 92px; right: 15%; bottom: -62px; }
  .profile-membership-emblem {
    position: relative;
    z-index: 1;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(229,189,120,.3);
    border-radius: 50%;
    background: rgba(229,189,120,.09);
    color: #e5bd78;
    font-size: 15px;
  }
  .profile-membership-identity { max-width: none; gap: 2px; }
  .profile-membership-kicker { display: none; }
  .profile-membership-identity strong { font-size: 18px; }
  .profile-membership-identity small { margin-top: 0; font-size: 9px; line-height: 1.35; }
  .profile-membership-banner .profile-hero-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
  }
  .profile-membership-banner .profile-hero-meta a {
    flex: none;
    height: 32px;
    padding: 0 8px;
    font-size: 10px;
    white-space: nowrap;
  }
  .profile-membership-banner .profile-membership-action,
  .profile-membership-banner .profile-ticket-action {
    position: relative;
    inset: auto;
  }
  .profile-section-kicker { display: none; }

  .support-ticket-shell { padding-top: 16px; }
  .support-ticket-heading {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 5px 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
  }
  .support-ticket-heading > div { display: contents; }
  .support-ticket-heading .profile-eyebrow { display: none; }
  .support-ticket-heading h1 {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -.025em;
  }
  .support-ticket-heading p {
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
  }
  .support-ticket-heading > .support-ticket-back {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 10px;
  }
  .support-ticket-layout { gap: 12px; }
  .profile-shell .support-ticket-create,
  .profile-shell .support-ticket-reply {
    padding: 16px;
    border-radius: 12px;
  }
  .support-ticket-panel-head {
    gap: 10px;
    margin-bottom: 16px;
  }
  .support-ticket-panel-head > span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 13px;
  }
  .support-ticket-panel-head small,
  .support-ticket-list > header small { display: none; }
  .support-ticket-create .support-ticket-panel-head h2,
  .support-ticket-reply .support-ticket-panel-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 25px;
  }
  .support-ticket-shell .yt-field { margin-bottom: 14px; }
  .support-ticket-shell .yt-field > span { margin-bottom: 6px; font-size: 12px; }
  .support-ticket-shell .yt-input { min-height: 44px; padding: 0 13px; }
  .support-ticket-shell .yt-textarea { min-height: 150px; padding: 12px 13px; line-height: 1.65; }
  .support-file-field { padding: 11px; border-radius: 10px; }
  .support-ticket-submit { min-height: 40px; border-radius: 8px; }
  .support-ticket-list { border-radius: 12px; }
  .support-ticket-list > header { min-height: 58px; padding: 0 16px; }
  .support-ticket-list > header h2 { margin: 0; font-size: 18px; }
  .support-ticket-row { min-height: 68px; padding: 10px 14px; }

  .membership-hero {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 12px;
  }
  .membership-hero-copy { display: none; }
  .membership-current {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    min-height: 0;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
  }
  .membership-current span { font-size: 9px; white-space: nowrap; }
  .membership-current strong {
    margin: 0;
    font-size: 17px;
    line-height: 24px;
    white-space: nowrap;
  }
  .membership-current p {
    display: block;
    margin: 0;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.35;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .membership-package.is-mobile-repeat { display: flex; }

  body .template-static-body .gonggao-sales .gs-scale {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
  body .template-static-body .gonggao-sales .gs-scale > * {
    min-width: 0;
    padding: 13px 7px !important;
    border-top: 0 !important;
    border-left: 1px solid rgba(180,75,66,.2) !important;
  }
  body .template-static-body .gonggao-sales .gs-scale > :first-child { border-left: 0 !important; }
  body .template-static-body .gonggao-sales .gs-scale b { font-size: 26px !important; line-height: 1.1 !important; }
  body .template-static-body .gonggao-sales .gs-scale span { font-size: 10px !important; }
  body .template-static-body .gonggao-sales :is(.gs-hero,.gs-flash,.gs-content,.gs-cta,.gs-membership,.gs-price,.gs-proof,.gs-final) { border-radius: 9px; }

  body .template-static-body .unzip-guide .ug-kicker,
  body .template-static-body .unzip-guide .ug-index { display: none !important; }
  body .template-static-body .unzip-guide .ug-key {
    display: block !important;
    padding: 14px 15px !important;
    line-height: 1.75 !important;
  }
  body .template-static-body .unzip-guide .ug-key span { display: inline !important; }

  .download-commerce-page .commerce-main {
    width: calc(100% - 24px);
    padding-top: 14px;
  }
  .download-commerce-page .commerce-download-hero {
    position: relative;
    display: block;
    min-height: 300px;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: #111512;
  }
  .download-commerce-page .commerce-download-hero .commerce-visual {
    position: absolute;
    inset: 0;
    min-height: 0;
    border-radius: 0;
  }
  .download-commerce-page .commerce-download-hero .commerce-visual:after {
    background: linear-gradient(180deg,rgba(5,8,6,.18) 0%,rgba(7,10,8,.68) 42%,rgba(7,10,8,.96) 100%);
  }
  .download-commerce-page .commerce-download-hero .commerce-copy {
    position: relative;
    z-index: 2;
    min-height: 300px;
    justify-content: flex-end;
    padding: 86px 18px 18px;
  }
  .download-commerce-page .commerce-download-hero .commerce-kicker { display: none; }
  .download-commerce-page .commerce-download-hero .commerce-copy h1 { margin-bottom: 7px; font-size: 25px; line-height: 1.35; }
  .download-commerce-page .commerce-download-hero .commerce-copy p { color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.5; }
  .download-commerce-page .commerce-download-hero .commerce-actions { margin-top: 14px; }
  .download-commerce-page .commerce-download-hero .commerce-btn { height: 38px; padding: 0 14px; font-size: 12px; }
  .download-commerce-page .commerce-grid-2 { gap: 10px; }
  .download-commerce-page .commerce-card { padding: 16px; border-radius: 10px; }
  .download-commerce-page .commerce-resource-card { order: 2; }
  .download-commerce-page .commerce-extraction-card { order: 1; }
}

html[data-theme="light"] body .template-static-body .gonggao-sales {
  --gs-red: #ae4a42;
  --gs-red-dark: #8b3933;
  --gs-red-soft: rgba(174,74,66,.09);
}

html[data-theme="light"] .download-directory-guide { border-color: rgba(31,151,92,.18); background: rgba(31,151,92,.035); }
html[data-theme="light"] .profile-membership-emblem { border-color: rgba(155,107,35,.25); background: rgba(181,128,48,.08); color: #9b6b23; }

/* Site announcement popup: complete media, responsive layout and matched themes. */
.site-popup {
  padding: 24px;
  z-index: 10010;
}

html.site-popup-open,
html.site-popup-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

html.site-popup-open body {
  position: fixed;
  right: 0;
  left: 0;
  width: 100%;
}

.site-popup-mask {
  background: rgba(5,7,6,.72);
  backdrop-filter: blur(7px);
}

.site-popup-panel {
  display: flex;
  width: min(465px,calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: #171918;
  box-shadow: 0 30px 90px rgba(0,0,0,.48);
  transform: translateY(-4vh);
}

.site-popup-head {
  display: flex;
  min-height: 60px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: #1c1f1d;
}

.site-popup-head h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #edf1ef;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-popup-close {
  position: static;
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8f9893;
  font-size: 17px;
  line-height: 1;
  transition: background .18s ease,color .18s ease;
}

.site-popup-close:hover {
  background: rgba(255,255,255,.06);
  color: #e2e7e4;
}

.site-popup-media {
  display: flex;
  min-height: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #101210;
}

.site-popup-media:hover { color: inherit; }

.site-popup .site-popup-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  background: transparent;
}

.site-popup-copy {
  flex: 0 0 auto;
  padding: 18px 24px;
  color: #aeb5b1;
  font-size: 15px;
  line-height: 1.75;
  text-align: center;
}

.site-popup-copy p { margin: 0; }

.site-popup-actions {
  display: flex;
  min-height: 66px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  padding: 11px 16px;
  border-top: 1px solid rgba(255,255,255,.075);
  background: #1c1f1d;
}

.site-popup-action {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border-radius: 8px;
  background: #31c27c;
  color: #07120c;
  font-size: 14px;
  font-weight: 700;
  transition: background .18s ease,transform .18s ease;
}

.site-popup-action:hover { background: #42ce8b; color: #07120c; }
.site-popup-action:active { transform: translateY(1px); }

html[data-theme="light"] .site-popup-mask { background: rgba(32,39,35,.52); }
html[data-theme="light"] .site-popup-panel {
  border-color: #dce4df;
  background: #fff;
  box-shadow: 0 28px 80px rgba(39,57,47,.24);
}
html[data-theme="light"] .site-popup-head,
html[data-theme="light"] .site-popup-actions {
  border-color: #e3e9e5;
  background: #fafcfb;
}
html[data-theme="light"] .site-popup-head h2 { color: #1c2922; }
html[data-theme="light"] .site-popup-close { color: #7b8680; }
html[data-theme="light"] .site-popup-close:hover { background: #eef3f0; color: #27342d; }
html[data-theme="light"] .site-popup-media { background: #f3f5f4; }
html[data-theme="light"] .site-popup-copy { color: #59655e; }
html[data-theme="light"] .site-popup-action { background: #168f5a; color: #fff; }
html[data-theme="light"] .site-popup-action:hover,
html[data-theme="light"] .site-popup-action:focus-visible { background: #137a4c; color: #fff; }

@media (max-width: 680px) {
  .site-popup { padding: 14px; }
  .site-popup-panel {
    width: calc(100vw - 28px);
    max-height: calc(100dvh - 28px);
    border-radius: 12px;
    transform: none;
  }
  .site-popup-head { min-height: 52px; padding: 10px 10px 10px 15px; }
  .site-popup-head h2 { font-size: 15px; }
  .site-popup-close { width: 32px; height: 32px; flex-basis: 32px; }
  .site-popup .site-popup-media img { max-height: min(var(--popup-image-max-height,320px),44dvh); }
  .site-popup-copy { padding: 14px 17px; font-size: 13px; line-height: 1.7; }
  .site-popup-actions { min-height: 56px; padding: 8px 10px; }
  .site-popup-action { min-height: 38px; padding: 0 14px; font-size: 13px; }
}

/* 2026-07-24 mobile readability and detail action-bar separation */
@media (max-width: 760px) {
  .mobile-nav-item > b,
  .profile-section-kicker,
  .profile-record-metrics > span,
  .membership-eyebrow,
  .membership-current span,
  .membership-current p,
  .profile-record-inline-metrics,
  .download-directory-nav strong,
  .detail-mobile-download-anchor,
  .support-ticket-panel-head small,
  .support-ticket-list > header small {
    font-size: 11px;
  }

  .mobile-nav-head small,
  .mobile-nav-children > header span,
  .home-quick-link strong,
  .profile-membership-kicker,
  .profile-record-copy > span,
  .profile-balance-cards .yt-info-box span,
  .profile-referral-ledger .yt-table td:before,
  .native-image-viewer .viewer-toolbar button,
  .membership-hero-actions a,
  .latest-flow-head > span,
  .download-directory-guide > span,
  .mobile-app-nav > a,
  .mobile-app-nav > button {
    font-size: 12px;
  }

  .mobile-auth-entry,
  .mobile-nav-all,
  .mobile-nav-item,
  .mobile-nav-children a,
  .mobile-nav-children .is-group,
  .profile-membership-identity small,
  .profile-membership-banner .profile-ticket-action,
  .profile-membership-action,
  .profile-shell .yt-profile-nav button,
  .yt-section-head p,
  .profile-referral-link .yt-input,
  .detail-mobile-head p,
  .detail-mobile-head > a,
  .detail-mobile-sheet-meta,
  .membership-hero p,
  .latest-flow-stats small,
  .download-directory-nav a span,
  .download-directory-heading > p,
  .download-directory-guide p,
  .support-ticket-heading p,
  .support-ticket-shell .yt-field > span,
  .download-commerce-page .commerce-download-hero .commerce-copy p,
  .download-commerce-page .commerce-download-hero .commerce-btn,
  .resource-kind,
  .download-category-filter strong,
  .detail-side-tags a,
  .auth-field-hint,
  .commerce-secret-note,
  .membership-payment-kicker,
  .support-ticket-status,
  .support-message-attachments span,
  .profile-overview-card small,
  .profile-favorite-copy span,
  .profile-referral-link > div:first-child small,
  .profile-balance-cards span,
  .profile-ledger-section header span,
  .profile-form-heading span,
  .profile-ledger-section header em,
  .profile-setting-head > span,
  .profile-setting-head p,
  .profile-form-feedback,
  .profile-record-status,
  .profile-record-action,
  .profile-pagination-pages span,
  .profile-pagination-summary,
  .profile-empty-copy span,
  .profile-bound-value small,
  .profile-flow-copy,
  .profile-security-question-list li > span,
  .support-file-feedback,
  .support-file-selection-head strong,
  .support-file-selection li strong,
  .support-file-selection li small,
  .yt-card-count,
  .yt-card-kind,
  .yt-card-meta,
  .yt-stats span,
  .yt-package-badge,
  .rtitle,
  .zuopin_menu button span,
  .zuopin_menu a span {
    font-size: 13px;
  }

  body .template-static-body .gonggao-sales .gs-scale span {
    font-size: 12px !important;
  }

  .profile-membership-action {
    font-size: 13px !important;
  }

  body.detail-page .mobile-app-nav {
    display: none;
  }

  body.detail-page .zuopin_menu {
    padding-bottom: env(safe-area-inset-bottom);
  }

  body.detail-page .fanding {
    bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 680px) {
  .profile-membership-identity small {
    font-size: 11px;
  }

  .profile-membership-banner .profile-hero-meta a,
  .support-ticket-heading > .support-ticket-back {
    font-size: 12px;
  }
}