/* Hallmark · component: avatar · genre: modern-minimal · theme: existing industrial-blue
 * states: default · hover · focus · active · disabled · loading
 * contrast: pass (40–41) · pre-emit critique: P4 H4 E5 S5 R5 V4
 */
:root {
  --blue: #1265ff;
  --blue-dark: #0a3fbd;
  --cyan: #16c6ff;
  --ink: #0f1b3d;
  --muted: #71819f;
  --line: #edf2fa;
  --panel: #ffffff;
  --bg: #FAFBFE;
  --shadow: 0 10px 28px rgba(32, 74, 132, 0.08);
  --font-sans: "Source Han Sans SC Web", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  --avatar-ring-surface: #f7fbff;
  --avatar-ring-line: rgba(101, 158, 255, 0.76);
  --avatar-ring-halo: rgba(18, 101, 255, 0.16);
  --avatar-ring-shadow: rgba(17, 47, 123, 0.2);
  --avatar-ring-focus: #0a3fbd;
}

@media (max-width: 1180px) {
  .detail-hero,
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .purchase-panel,
  .service-panel {
    position: static;
  }

  .recommend-track {
    --recommend-visible: 2;
  }
}

@media (max-width: 720px) {
  .preview-actions {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .author-hero {
    grid-template-columns: 54px minmax(0, 1fr);
    padding: 18px;
  }

  .author-hero > img {
    width: 54px;
    height: 54px;
  }

  .author-hero > .follow-author {
    width: 100%;
    grid-column: 1 / -1;
  }

  .author-work-grid {
    grid-template-columns: 1fr;
  }

  .intro-grid {
    grid-template-columns: 1fr;
  }

  .recommend-track {
    --recommend-visible: 1;
  }

  .title-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .table-row {
    grid-template-columns: 1fr;
    padding: 10px 0;
  }

  .payment-modal {
    padding: 12px;
  }

  .payment-dialog {
    max-height: calc(100vh - 24px);
    padding: 20px 16px 16px;
  }

  .payment-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .payment-product {
    padding-right: 0;
    padding-bottom: 20px;
    border-right: 0;
    border-bottom: 1px solid #edf2f8;
  }

  .payment-product-head {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .payment-product-head img {
    width: 96px;
  }

  .payment-assurance {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .payment-assurance span {
    border-left: 0;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--ink);
  background: #FAFBFE;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.modal-open {
  overflow: hidden;
}

.login-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.login-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.login-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 18, 42, 0.42);
  backdrop-filter: blur(10px);
}

.login-dialog {
  width: min(860px, 100%);
  min-height: 520px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  overflow: hidden;
  border: 1px solid rgba(169, 204, 255, 0.38);
  border-radius: 12px;
  background: transparent;
  box-shadow: 0 28px 80px rgba(13, 34, 74, 0.26);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s ease;
}

.login-modal.is-open .login-dialog {
  transform: translateY(0) scale(1);
}

.login-close {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border: 1px solid #e6edf7;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}

.login-close::before,
.login-close::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 16px;
  width: 13px;
  height: 1.6px;
  border-radius: 2px;
  background: #516079;
}

.login-close::before {
  transform: rotate(45deg);
}

.login-close::after {
  transform: rotate(-45deg);
}

.login-visual {
  min-width: 0;
  position: relative;
  padding: 34px;
  overflow: hidden;
  color: #ffffff;
  background:
    linear-gradient(145deg, rgba(14, 93, 220, 0.95), rgba(6, 25, 67, 0.98)),
    url("assets/hero-industrial-hmi.png") center / cover;
}

.login-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.12));
}

.login-visual > * {
  position: relative;
  z-index: 1;
}

.login-visual .brand {
  margin-bottom: 54px;
}

.login-visual .brand strong,
.login-visual .brand small {
  color: #ffffff;
}

.login-scene {
  height: 156px;
  position: relative;
  margin-bottom: 28px;
}

.login-scene span {
  position: absolute;
  display: block;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
}

.login-scene span:nth-child(1) {
  left: 10px;
  top: 18px;
  width: 156px;
  height: 92px;
}

.login-scene span:nth-child(2) {
  right: 14px;
  top: 4px;
  width: 112px;
  height: 70px;
}

.login-scene span:nth-child(3) {
  right: 42px;
  bottom: 8px;
  width: 140px;
  height: 86px;
}

.login-scene span:nth-child(4) {
  left: 64px;
  bottom: 0;
  width: 86px;
  height: 50px;
  background: rgba(22, 198, 255, 0.24);
}

.login-visual h2 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.25;
}

.login-visual p {
  max-width: 330px;
  margin: 0;
  color: rgba(255,255,255,0.76);
  font-size: 13px;
  line-height: 1.8;
}

.login-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.login-benefits span {
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  color: rgba(255,255,255,0.86);
  background: rgba(255,255,255,0.1);
  font-size: 12px;
  line-height: 24px;
}

.login-panel {
  padding: 48px 46px 34px;
  background: #ffffff;
}

.login-head span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.login-head h3 {
  margin: 8px 0 8px;
  color: #12203e;
  font-size: 26px;
  line-height: 1.2;
}

.login-head p {
  margin: 0;
  color: #7b8aa4;
  font-size: 13px;
  line-height: 1.7;
}

.login-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 26px 0 20px;
  padding: 4px;
  border-radius: 8px;
  background: #f3f6fb;
}

.login-tabs button {
  height: 34px;
  border: 0;
  border-radius: 6px;
  color: #687792;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.login-tabs button.active {
  color: #1265ff;
  background: #ffffff;
  box-shadow: 0 5px 12px rgba(39, 73, 118, 0.06);
}

.login-form {
  display: grid;
  gap: 12px;
  align-content: start;
}

.auth-mode {
  display: none;
  gap: 13px;
}

.auth-mode.active {
  display: grid;
}

.login-pane {
  display: none;
  min-height: 248px;
}

.login-pane.active {
  display: grid;
}

.login-form.login-pane,
.wechat-pane.login-pane {
  height: 268px;
}

.login-form label {
  display: grid;
  gap: 7px;
}

.login-form label > span {
  color: #374765;
  font-size: 12px;
  font-weight: 700;
}

.login-input {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 44px;
  border: 1px solid #e4ecf7;
  border-radius: 8px;
  background: #fbfdff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.login-input:focus-within {
  border-color: rgba(18, 101, 255, 0.55);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(18, 101, 255, 0.08);
}

.login-input-icon {
  width: 18px;
  height: 18px;
  margin-left: 13px;
  flex: 0 0 auto;
  opacity: 0.72;
  background: center / contain no-repeat;
  filter: invert(56%) sepia(15%) saturate(567%) hue-rotate(177deg) brightness(91%) contrast(86%);
}

.login-input-icon.user {
  background-image: url("assets/icons/line-icons/person-outline.png");
}

.login-input-icon.lock {
  background-image: url("assets/icons/line-icons/lock-outline.png");
}

.login-input-icon.phone {
  background-image: url("assets/icons/line-icons/smartphone-outline.png");
}

.login-input-icon.shield {
  background-image: url("assets/icons/line-icons/shield-outline.png");
}

.login-form input,
.auth-secondary-form input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: #15223f;
  background: transparent;
  font-size: 13px;
  appearance: none;
  outline: 0;
}

.login-form input::placeholder,
.auth-secondary-form input:not([type="checkbox"])::placeholder {
  color: #a1adc1;
}

.password-field input {
  padding-right: 4px;
}

.password-toggle {
  --password-icon: url("assets/icons/line-icons/eye-outline.png");
  width: 34px;
  height: 34px;
  margin-right: 5px;
  border: 0;
  border-radius: 7px;
  background: var(--password-icon) center / 18px 18px no-repeat;
  cursor: pointer;
  opacity: 0.72;
  filter: invert(56%) sepia(15%) saturate(567%) hue-rotate(177deg) brightness(91%) contrast(86%);
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

.password-toggle.is-visible {
  --password-icon: url("assets/icons/line-icons/eye-off-outline.png");
}

.password-toggle:hover,
.password-toggle:focus,
.password-toggle:focus-visible,
.password-toggle:active,
.password-toggle.is-visible {
  opacity: 0.95;
  background-color: transparent;
  background-image: var(--password-icon);
  background-position: center;
  background-size: 18px 18px;
  background-repeat: no-repeat;
}

.code-field input {
  padding-right: 4px;
}

.code-field button {
  height: 22px;
  margin-right: 12px;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 1px solid #e1e8f2;
  border-radius: 0;
  color: #1265ff;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.16s ease, opacity 0.16s ease;
}

.code-field button:hover {
  color: #0757df;
  background: transparent;
}

.login-mode-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
  margin-top: -2px;
  color: #7b8aa4;
  font-size: 12px;
}

.login-mode-link span {
  color: #374765;
  font-weight: 650;
}

.login-mode-link button {
  border: 0;
  padding: 0;
  color: #1265ff;
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.login-error {
  min-height: 18px;
  margin: -1px 0 0;
  color: #ff5b5b;
  font-size: 12px;
  line-height: 18px;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.login-error.is-visible {
  opacity: 1;
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 2px;
  color: #72809a;
  font-size: 12px;
}

.login-options a {
  color: #1265ff;
  font-weight: 500;
}

.login-submit {
  height: 42px;
  margin-top: 0;
  border: 0;
  border-radius: 7px;
  color: #ffffff;
  background: linear-gradient(135deg, #0aa7ff 0%, #0875ee 100%);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(18, 101, 255, 0.18);
}

.login-submit:hover {
  background: linear-gradient(135deg, #0798f0 0%, #066bdd 100%);
}

.wechat-pane {
  justify-items: center;
  align-content: center;
  gap: 12px;
  padding: 0;
  text-align: center;
}

.qr-card {
  width: 154px;
  height: 154px;
  position: relative;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px solid #e4edf8;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(18, 101, 255, 0.06), rgba(22, 198, 255, 0.04)),
    #ffffff;
  box-shadow: 0 12px 28px rgba(44, 76, 124, 0.08);
}

.qr-card img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 7px;
  object-fit: contain;
  background: #ffffff;
}

.wechat-pane strong {
  color: #17233f;
  font-size: 14px;
}

.login-extra {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  color: #8a97ad;
  font-size: 12px;
}

.login-extra a,
.login-agreement a {
  color: #1265ff;
}

.login-extra a {
  font-size: 12px;
  font-weight: 700;
}

.login-agreement {
  margin: 14px 0 0;
  color: #8a97ad;
  font-size: 11px;
  line-height: 1.7;
}

/* Login dialog - light split layout */
.login-backdrop {
  background: rgba(13, 26, 50, 0.58);
  backdrop-filter: blur(3px);
}

.login-dialog {
  width: min(820px, 100%);
  height: 540px;
  min-height: 540px;
  grid-template-columns: 46% 54%;
  border: 1px solid rgba(207, 220, 239, 0.82);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(11, 28, 58, 0.25);
}

.login-close {
  right: 16px;
  top: 14px;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
}

.login-close:hover {
  background: #f2f6fc;
}

.login-close::before,
.login-close::after {
  left: 8px;
  top: 14px;
  width: 14px;
  background: #73819a;
}

.login-visual {
  min-height: 540px;
  padding: 34px 32px 28px;
  color: #172640;
  background:
    url("assets/site/login-visual.png") center calc(100% + 16px) / cover no-repeat,
    #edf5ff;
}

.login-visual::after {
  display: none;
}

.login-visual .brand {
  margin-bottom: 30px;
}

.login-visual .brand strong {
  color: #17233f;
}

.login-visual .brand small {
  color: #8190a9;
}

.login-visual h2 {
  margin: 0 0 18px;
  color: #192a48;
  font-size: 23px;
  line-height: 1.45;
}

.login-benefits {
  display: grid;
  gap: 10px;
  margin: 0;
}

.login-benefits span {
  position: relative;
  height: auto;
  padding: 0 0 0 24px;
  border: 0;
  border-radius: 0;
  color: #5f708d;
  background: transparent;
  font-size: 12px;
  line-height: 20px;
}

.login-benefits span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid #d8e8ff;
  border-radius: 50%;
  background: #edf5ff;
}

.login-benefits span::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 8px;
  height: 8px;
  background: #2878ed;
  -webkit-mask: url("assets/icons/line-icons/checkmark-outline.png") center / contain no-repeat;
  mask: url("assets/icons/line-icons/checkmark-outline.png") center / contain no-repeat;
}

.login-scene {
  display: none;
}

.login-scene span {
  display: none;
}

.login-panel {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 38px 48px 16px;
  background: #ffffff;
}

.auth-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  overflow-y: auto;
  flex-direction: column;
  padding: 38px 48px 24px;
  background: #ffffff;
}

.auth-overlay.is-active {
  display: flex;
}

.auth-secondary-form {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.auth-secondary-form > label:not(.auth-consent) > span:first-child {
  display: none;
}

.wechat-register-fields > label > span:first-child {
  display: none;
}

.auth-secondary-form .login-submit {
  width: 100%;
  margin-top: 4px;
}

.wechat-bind-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
  border-bottom: 1px solid #edf1f7;
}

.wechat-bind-tabs button {
  height: 40px;
  position: relative;
  border: 0;
  color: #66758c;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.wechat-bind-tabs button.active {
  color: #1265ff;
}

.wechat-bind-tabs button.active::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: -1px;
  left: 18%;
  height: 2px;
  border-radius: 2px;
  background: #1265ff;
}

.wechat-bind-tabs + .auth-secondary-form {
  margin-top: 12px;
}

/* Leave room for the extra WeChat tabs without shrinking form controls. */
.auth-overlay[data-auth-screen="wechat-bind"] {
  padding-top: 24px;
}

.auth-overlay[data-auth-screen="wechat-bind"] > * {
  flex-shrink: 0;
}

.wechat-register-fields {
  display: grid;
  gap: 12px;
}

.wechat-register-fields[hidden] {
  display: none;
}

.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #7b89a0;
  font-size: 11px;
  line-height: 18px;
}

.auth-consent input {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin: 2px 0 0;
  accent-color: #1265ff;
}

.auth-consent a {
  color: #1265ff;
  text-decoration: none;
}

.auth-consent a:hover {
  color: #0b55df;
  text-decoration: none;
}

.auth-return {
  margin-top: 16px;
  color: #8a97ad;
  font-size: 12px;
  text-align: center;
}

.auth-return button {
  padding: 2px 4px;
  border: 0;
  color: #1265ff;
  background: transparent;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.login-error.is-success {
  color: #20a36a;
}

@media (max-width: 720px) {
  .auth-overlay {
    padding: 30px 24px 20px;
  }
}

.login-head h3 {
  margin: 0 0 6px;
  color: #111d34;
  font-size: 23px;
  line-height: 1.35;
}

.login-head p {
  color: #8a98af;
  font-size: 12px;
  line-height: 1.6;
}

.login-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 22px 0 18px;
  padding: 0;
  border-bottom: 1px solid #edf1f7;
  border-radius: 0;
  background: transparent;
}

.login-tabs button {
  height: 38px;
  position: relative;
  border-radius: 0;
  color: #5f6d84;
  font-size: 13px;
  font-weight: 500;
}

.login-tabs button.active {
  color: #1265ff;
  background: transparent;
  box-shadow: none;
}

.login-tabs button.active::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: #1265ff;
}

.login-form {
  gap: 14px;
}

.login-form.login-pane {
  height: auto;
  min-height: 0;
}

.auth-mode {
  gap: 14px;
}

.login-form label {
  gap: 0;
}

.login-form label > span {
  display: none;
}

.login-input {
  height: 42px;
  border-color: #dce5f1;
  border-radius: 6px;
  background: #ffffff;
}

.login-input:focus-within {
  border-color: #5b9bff;
  box-shadow: 0 0 0 3px rgba(18, 101, 255, 0.08);
}

.login-input-icon {
  width: 17px;
  height: 17px;
  margin-left: 13px;
}

.login-form input,
.auth-secondary-form input:not([type="checkbox"]) {
  font-size: 12px;
}

.login-options {
  min-height: 20px;
  justify-content: flex-end;
  margin: -2px 0 0;
}

.login-options a {
  color: #4a8cff;
  font-size: 12px;
  font-weight: 500;
}

.login-error {
  min-height: 16px;
  margin: -8px 0 -6px;
  font-size: 11px;
  line-height: 16px;
}

.login-submit {
  height: 42px;
  border-radius: 6px;
  background: linear-gradient(90deg, #087df7 0%, #1265f4 100%);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(18, 101, 255, 0.18);
}

.login-social {
  margin-top: 18px;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #9aa5b7;
  font-size: 11px;
}

.login-divider::before,
.login-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #edf1f6;
}

.login-social-buttons {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.login-social-buttons button,
.login-social-buttons a {
  display: block;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.login-social-buttons .wechat {
  background: url("assets/site/wechat.png") center calc(50% - 1px) / 33px auto no-repeat;
  opacity: 0.9;
}

.login-social-buttons .wechat:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.login-social-buttons .wechat.is-static {
  cursor: default;
}

.captcha-field input {
  padding-right: 4px;
}

.captcha-field button {
  width: 112px;
  height: 40px;
  flex: 0 0 112px;
  padding: 2px 4px;
  border: 0;
  border-left: 1px solid #e1e8f2;
  background: #f7faff;
  cursor: pointer;
  overflow: hidden;
}

.captcha-field img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.login-submit:disabled,
.code-field button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.login-modal.is-code-mode .login-dialog {
  height: 540px;
  min-height: 540px;
}

.login-modal.is-code-mode .login-visual {
  min-height: 540px;
}

.login-modal.is-code-mode .login-tabs {
  margin-top: 22px;
  margin-bottom: 12px;
}

.login-modal.is-code-mode .login-form,
.login-modal.is-code-mode .auth-mode {
  gap: 10px;
}

.login-modal.is-code-mode .login-extra {
  margin-top: 10px;
}

.login-modal.is-code-mode .login-social {
  position: absolute;
  right: 48px;
  bottom: 56px;
  left: 48px;
  margin-top: 0;
}

.login-modal.is-code-mode .login-social-buttons {
  margin-top: 8px;
}

.login-modal.is-code-mode .login-agreement {
  position: absolute;
  right: 48px;
  bottom: 16px;
  left: 48px;
  margin: 0;
  padding: 0;
}

.login-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  color: #8a97ad;
  font-size: 12px;
}

.login-extra a {
  color: #1265ff;
  font-size: 12px;
  font-weight: 500;
}

.login-extra span {
  white-space: nowrap;
}

.login-extra span a {
  margin-left: 4px;
}

.login-agreement {
  margin-top: auto;
  padding-top: 10px;
  text-align: center;
}

.hero {
  min-height: clamp(250px, 21vw, 350px);
  position: relative;
  overflow: visible;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}

.hero-track {
  min-height: inherit;
  position: relative;
  height: 100%;
  overflow: visible;
  margin: 0 2px;
}

.hero-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(76%, 1060px);
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  border-radius: 16px;
  opacity: 0;
  filter: saturate(0.85) brightness(0.72);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.8);
  transition:
    transform 0.54s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.36s ease,
    filter 0.36s ease;
}

.hero-slide.active {
  z-index: 3;
  opacity: 1;
  filter: none;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 16px 38px rgba(22, 43, 84, 0.13);
}

.hero-slide.prev {
  z-index: 2;
  opacity: 0.62;
  transform: translate(calc(-50% - 23%), -50%) scale(0.84);
}

.hero-slide.next {
  z-index: 2;
  opacity: 0.62;
  transform: translate(calc(-50% + 23%), -50%) scale(0.84);
}

body[data-page="home"] .hero-slide.active {
  z-index: 3;
  opacity: 1;
  filter: none;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

body[data-page="home"] .hero-slide.prev {
  z-index: 2;
  opacity: 0.62;
  transform: translate(calc(-50% - 23%), -50%) scale(0.84);
}

body[data-page="home"] .hero-slide.next {
  z-index: 2;
  opacity: 0.62;
  transform: translate(calc(-50% + 23%), -50%) scale(0.84);
}

.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 13, 35, 0.1) 0%, rgba(7, 24, 58, 0.02) 48%, rgba(7, 24, 58, 0.08) 100%);
}

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(215, 225, 240, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(33, 55, 92, 0.12);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.hero-arrow:hover {
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(33, 55, 92, 0.16);
  transform: translateY(-50%) scale(1.04);
}

.hero-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid #2f3c55;
  border-left: 2px solid #2f3c55;
}

.hero-prev {
  left: 8px;
}

.hero-prev::before {
  transform: translate(-35%, -50%) rotate(-45deg);
}

.hero-next {
  right: 8px;
}

.hero-next::before {
  transform: translate(-65%, -50%) rotate(135deg);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: clamp(34px, 3vw, 52px) 0 0 clamp(34px, 3vw, 56px);
  color: white;
}

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 2.35vw, 44px);
  line-height: 1.08;
  font-weight: 900;
}

.hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(16px, 1.2vw, 20px);
}

.hero-badges {
  display: flex;
  gap: 24px;
  margin: 24px 0 0;
}

.hero-badges span {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 7px 9px;
  align-items: center;
  color: white;
  font-size: 12px;
  font-weight: 800;
}

.hero-badges small {
  grid-column: 2;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 500;
}

.mini-shield,
.mini-clock {
  width: 24px;
  height: 24px;
  position: relative;
  display: inline-block;
  border: 2px solid #17bfff;
  box-shadow: 0 0 18px rgba(23, 191, 255, 0.35);
}

.mini-shield {
  clip-path: polygon(50% 0, 92% 20%, 84% 78%, 50% 100%, 16% 78%, 8% 20%);
}

.mini-clock {
  border-radius: 50%;
}

.mini-clock::before,
.mini-clock::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 5px;
  width: 2px;
  height: 8px;
  background: #17bfff;
}

.mini-clock::after {
  left: 10px;
  top: 10px;
  height: 7px;
  transform: rotate(45deg);
  transform-origin: top center;
}

.dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  z-index: 6;
}

.dots button {
  width: 24px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
  cursor: pointer;
  transition: width 0.22s ease, background 0.22s ease, opacity 0.22s ease;
}

.dots button:hover {
  background: rgba(255, 255, 255, 0.78);
}

.dots button.active {
  width: 44px;
  background: linear-gradient(90deg, #1265ff, #33a5ff);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 24px;
}

.metric {
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px rgba(41, 77, 128, 0.045);
}

.metric strong {
  font-size: 22px;
  line-height: 1;
}

.metric p {
  margin: 7px 0 7px;
  color: #66758f;
  font-size: 15px;
}

.metric small {
  color: #66758f;
}

.metric b {
  color: var(--blue);
}

.quick-card {
  min-height: 82px;
  gap: 12px;
  padding: 14px 16px;
  align-items: center;
  overflow: visible;
  border-color: #f0f4fb;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(41, 77, 128, 0.032);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.quick-card:hover {
  border-color: #e3ebf7;
  background: #fbfdff;
  box-shadow: 0 7px 16px rgba(41, 77, 128, 0.048);
}

.quick-card .metric-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: none;
  transform: none !important;
  transition: filter 0.22s ease;
}

.quick-card:hover .metric-icon {
  filter: drop-shadow(0 8px 10px rgba(18, 101, 255, 0.12));
}

.quick-copy {
  min-width: 0;
}

.quick-copy strong {
  display: block;
  margin: 0 0 4px;
  overflow: hidden;
  color: #17233f;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quick-copy p {
  margin: 0;
  overflow: hidden;
  color: #7f8da6;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.42;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.metric-icon {
  width: 48px;
  height: 48px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 10px;
  filter: drop-shadow(0 12px 12px rgba(20, 82, 170, 0.14));
}

.metric-icon.cube {
  transform: rotateX(58deg) rotateZ(-35deg);
}

.metric-icon.cube::before,
.metric-icon.cube::after,
.metric-icon.cube span {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(145deg, #bce1ff, #1265ff);
}

.metric-icon.cube::before {
  left: 0;
  bottom: 3px;
}

.metric-icon.cube::after {
  right: 0;
  bottom: 3px;
}

.metric-icon.cube span {
  left: 13px;
  top: 0;
}

.metric-icon.green::before,
.metric-icon.green::after,
.metric-icon.green span {
  background: linear-gradient(145deg, #c9ffe1, #39c37d);
}

.metric-icon.badge {
  background: linear-gradient(145deg, #ffe2cc, #ff7a2d);
  clip-path: polygon(50% 0, 88% 13%, 100% 50%, 88% 87%, 50% 100%, 12% 87%, 0 50%, 12% 13%);
}

.metric-icon.badge span::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 2px solid white;
  border-radius: 50%;
}

.metric-icon.book {
  background: linear-gradient(145deg, #cfd4ff, #5c67ff);
}

.metric-icon.book::before {
  content: "";
  position: absolute;
  inset: 11px 15px 10px;
  border: 2px solid white;
  border-top: 0;
}

.metric-icon.folder {
  background: linear-gradient(145deg, #bce5ff, #1483ff);
}

.metric-icon.folder::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  width: 18px;
  height: 10px;
  border-radius: 4px 4px 0 0;
  background: rgba(255, 255, 255, 0.45);
}

.metric-icon.folder::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 8px;
  height: 27px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.28);
}

.section-block {
  margin-top: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.resource-heading {
  gap: 16px;
  margin-bottom: 14px;
}

.resource-heading h2 {
  flex: 0 0 auto;
}

.resource-heading > a {
  flex: 0 0 auto;
  color: #7b89a3;
  font-size: 12px;
  font-weight: 550;
  line-height: 1;
  transition: color 0.18s ease;
}

.resource-heading > a:hover {
  color: #1265ff;
}

.section-title h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
}

.section-title a {
  color: #6b7b96;
  font-size: 14px;
}

.title-hot {
  width: 18px;
  height: 18px;
  display: inline-block;
  border-radius: 50% 50% 50% 6px;
  background: linear-gradient(145deg, #ffce5a, #ff5a2d);
  transform: rotate(-18deg);
}

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

.resource-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: inherit;
  background: white;
  box-shadow: 0 7px 18px rgba(41, 77, 128, 0.045);
  cursor: pointer;
  transform: translateY(0);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.resource-card:hover,
.resource-card:focus-visible {
  border-color: #dce8f8;
  box-shadow: 0 14px 30px rgba(41, 77, 128, 0.1);
  transform: translateY(-4px);
}

.resource-card:focus-visible {
  outline: 2px solid rgba(18, 101, 255, 0.28);
  outline-offset: 3px;
}

.thumb {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: #edf3fb;
}

.thumb::before {
  content: "\67e5\770b\8be6\60c5";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(15, 27, 61, 0.72);
  box-shadow: 0 10px 22px rgba(8, 18, 38, 0.22);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  transform: translate(-50%, -42%);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(9, 22, 45, 0.24);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.resource-card:hover .thumb::before,
.resource-card:focus-visible .thumb::before {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.resource-card:hover .thumb::after,
.resource-card:focus-visible .thumb::after {
  opacity: 1;
}

.thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.28s ease;
}

.resource-card:hover .thumb img,
.resource-card:focus-visible .thumb img {
  transform: scale(1.045);
}

.resource-card h3 {
  margin: 11px 12px 5px;
  overflow: hidden;
  color: #17233f;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.38;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.18s ease;
}

.resource-card:hover h3,
.resource-card:focus-visible h3 {
  color: #17233f;
}

.resolution {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin: 0 12px 11px;
  padding: 0 7px;
  border-radius: 4px;
  color: #6f7f99;
  background: #f4f7fc;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
}

.resource-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 12px 12px;
  color: #75849b;
  font-size: 12px;
}

.author,
.resource-stats,
.resource-stats span {
  display: inline-flex;
  align-items: center;
}

.author {
  min-width: 0;
  gap: 7px;
  color: #65748d;
  font-weight: 550;
}

.author .avatar-dot {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.author > :last-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.resource-stats {
  flex: 0 0 auto;
  gap: 7px;
  color: #9aa7ba;
}

.resource-stats span {
  gap: 3px;
}

.avatar-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: url("assets/avatar-designer.png") center 28% / cover;
}

.resource-card i,
.resource-card em {
  width: 14px;
  height: 14px;
  position: relative;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: brightness(0) saturate(100%) invert(68%) sepia(14%) saturate(474%) hue-rotate(178deg) brightness(91%) contrast(86%);
}

.resource-card i {
  background-image: url("assets/icons/line-icons/eye-outline.png");
}

.resource-card em {
  background-image: url("assets/icons/line-icons/heart-outline.png");
}

.resource-card i::before,
.resource-card i::after,
.resource-card em::before,
.resource-card em::after {
  display: none;
}

.latest-item i,
.latest-item em {
  width: 15px;
  height: 10px;
  position: relative;
  flex: 0 0 auto;
}

.latest-item i::before {
  content: "";
  position: absolute;
  inset: 1px 0;
  border: 1px solid #9aacc5;
  border-radius: 50%;
}

.latest-item i::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #9aacc5;
}

.latest-item em::before,
.latest-item em::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 8px 8px 0 0;
  border: 1px solid #9aacc5;
  border-bottom: 0;
  transform: rotate(-45deg);
}

.latest-item em::after {
  left: 5px;
  transform: rotate(45deg);
}

.home-panels {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.6fr);
  gap: 18px;
  margin-top: 20px;
}

.latest-panel,
.industry-panel,
.spec-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(41, 77, 128, 0.04);
}

.latest-panel,
.industry-panel {
  padding: 18px;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.panel-title h2 {
  margin: 0;
  color: #111d3d;
  font-size: 18px;
}

.panel-title h2 span {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--blue);
  background: #e9f2ff;
  font-size: 11px;
}

.panel-title a {
  color: #6b7b96;
  font-size: 13px;
}

.latest-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid #eef3fb;
}

.latest-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.latest-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  background-image: var(--latest-image, url("assets/hero-industrial-hmi.png"));
  background-size: cover;
  background-position: center;
}

.lt1 {
  --latest-image: url("assets/materials/industrial-desktop-software-2.jpg");
}

.lt2 {
  --latest-image: url("assets/materials/industrial-desktop-software-3.jpg");
  background-position: 64% 48%;
}

.latest-item h3 {
  margin: 0 0 8px;
  color: #122040;
  font-size: 14px;
}

.latest-item p {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 9px;
}

.latest-item p span {
  padding: 3px 8px;
  border-radius: 999px;
  color: #60728f;
  background: #f1f6ff;
  font-size: 11px;
  font-weight: 700;
}

.latest-item small {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #6b7b96;
  font-size: 12px;
}

.latest-item small b {
  flex: 0 0 auto;
}

.latest-item time {
  margin-left: auto;
  color: #8291aa;
}

.industry-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.industry-card {
  min-height: 126px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  border-radius: 8px;
  color: white;
  background-image:
    linear-gradient(180deg, rgba(6, 21, 48, 0.05), rgba(5, 16, 38, 0.86)),
    var(--industry-image, url("assets/hero-industrial-hmi.png"));
  background-size: cover;
  background-position: center;
}

.industry-card:nth-child(1) { --industry-image: url("assets/materials/2d225db34d964eb2a096a180579d784480fda44a9a73-i3s9xg_fw1200.jpg"); }
.industry-card:nth-child(2) { --industry-image: url("assets/materials/web-scada-trend-2.webp"); background-position: 46% 42%; }
.industry-card:nth-child(3) { --industry-image: url("assets/materials/power-room-monitoring.webp"); background-position: 60% 48%; }
.industry-card:nth-child(4) { --industry-image: url("assets/materials/tomato-unloading-system.gif"); background-position: 54% 50%; }
.industry-card:nth-child(5) { --industry-image: url("assets/materials/dashboard-pc-ui-pack.webp"); background-position: 76% 54%; }

.industry-card .solution-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 10px;
}

.industry-card strong {
  font-size: 15px;
}

.industry-card p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}

.spec-section {
  margin-top: 20px;
  padding: 18px;
}

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

.spec-card {
  min-height: 76px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #f0f4fb;
  border-radius: 8px;
  background: #fbfdff;
}

.spec-card .metric-icon,
.spec-card .solution-icon {
  grid-row: span 2;
  width: 34px;
  height: 34px;
}

.spec-card strong {
  color: #111d3d;
  font-size: 14px;
}

.spec-card p {
  margin: 0;
  color: #6f7f9d;
  font-size: 12px;
}

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

.solution {
  min-height: 118px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, #f7fbff, #eef7ff);
  box-shadow: 0 7px 18px rgba(39, 78, 133, 0.04);
}

.solution:nth-child(2) { background: linear-gradient(145deg, #f4fffb, #eafaf2); }
.solution:nth-child(3) { background: linear-gradient(145deg, #f6fcff, #e9f8ff); }
.solution:nth-child(4) { background: linear-gradient(145deg, #f8f9ff, #f2f0ff); }
.solution:nth-child(5) { background: linear-gradient(145deg, #fff9f5, #fff0e8); }
.solution:nth-child(6) { background: linear-gradient(145deg, #f4ffff, #e9fbff); }

.solution h3 {
  margin: -34px 0 6px 56px;
  font-size: 14px;
}

.solution p {
  min-height: 34px;
  margin: 0 0 10px 56px;
  color: #63738f;
  font-size: 12px;
  line-height: 1.65;
}

.solution a {
  margin-left: 56px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
}

.solution-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(145deg, #cce5ff, #1265ff);
  box-shadow: 0 12px 18px rgba(18, 101, 255, 0.18);
}

.solution-icon::before,
.solution-icon::after {
  content: "";
  position: absolute;
}

.solution-icon.robot::before {
  inset: 13px 10px 10px;
  border: 3px solid white;
  border-radius: 5px;
}

.solution-icon.robot::after {
  width: 26px;
  height: 3px;
  left: 11px;
  top: 22px;
  background: white;
}

.solution-icon.wind {
  background: linear-gradient(145deg, #d9ffe6, #30c36d);
}

.solution-icon.wind::before {
  left: 21px;
  top: 7px;
  width: 5px;
  height: 36px;
  background: white;
}

.solution-icon.wind::after {
  left: 11px;
  top: 8px;
  width: 26px;
  height: 26px;
  border: 4px solid white;
  border-left-color: transparent;
  border-radius: 50%;
}

.solution-icon.drop {
  background: linear-gradient(145deg, #d8f5ff, #169dff);
  border-radius: 50% 50% 50% 12px;
  transform: rotate(-45deg);
}

.solution-icon.flask {
  background: linear-gradient(145deg, #ddd8ff, #686dff);
}

.solution-icon.flask::before {
  left: 17px;
  top: 7px;
  width: 14px;
  height: 28px;
  border: 3px solid white;
  border-top: 0;
  border-radius: 0 0 12px 12px;
}

.solution-icon.truck {
  background: linear-gradient(145deg, #ffd6b6, #ff7932);
}

.solution-icon.truck::before {
  left: 7px;
  top: 17px;
  width: 30px;
  height: 15px;
  border: 3px solid white;
  border-radius: 3px;
}

.solution-icon.truck::after {
  left: 10px;
  bottom: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: white;
  box-shadow: 21px 0 0 white;
}

.solution-icon.pill {
  background: linear-gradient(145deg, #bffbff, #2bd0d0);
}

.solution-icon.pill::before {
  left: 12px;
  top: 19px;
  width: 28px;
  height: 13px;
  border-radius: 999px;
  background: white;
  transform: rotate(35deg);
}

.trust-bar {
  min-height: 86px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 1.4fr;
  gap: 0;
  align-items: center;
  margin-top: 20px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 20px rgba(41, 77, 128, 0.04);
}

.trust-bar > div {
  min-height: 48px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 2px 12px;
  align-items: center;
  padding: 0 18px;
  border-right: 1px solid var(--line);
}

.trust-bar strong {
  font-size: 15px;
}

.trust-bar p {
  margin: 0;
  color: #6d7b94;
  font-size: 12px;
}

.line-icon {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  color: var(--blue);
}

.line-icon::before {
  inset: 2px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.line-icon.shield::before {
  border-radius: 0;
  clip-path: polygon(50% 0, 92% 18%, 84% 75%, 50% 100%, 16% 75%, 8% 18%);
}

.line-icon.copyright::after {
  left: 9px;
  top: 7px;
  width: 8px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-radius: 8px 0 0 8px;
}

.line-icon.refresh::after {
  inset: 5px;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
}

.line-icon.service::before {
  border-radius: 50% 50% 4px 4px;
}

.contribute {
  border-right: 0 !important;
  grid-template-columns: 1fr auto !important;
  background: linear-gradient(100deg, #f4f8ff, #eef6ff);
  border-radius: 8px;
}

.contribute span {
  font-weight: 800;
}

.contribute a {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border: 1px solid #8bb3ff;
  border-radius: 6px;
  color: var(--blue);
  background: white;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1180px) {
.metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-panels {
    grid-template-columns: 1fr;
  }

  .spec-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
.resource-grid,
  .solution-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
.hero-content {
    padding-left: 32px;
    padding-right: 24px;
  }

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

  .industry-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trust-bar > div {
    border: 0;
  }

  .contribute {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
.profile span {
    display: none;
  }

  .login-modal {
    padding: 18px;
  }

  .login-dialog {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
  }

  .login-visual {
    display: none;
  }

  .login-panel {
    padding: 40px 24px 28px;
  }

  .login-close {
    right: 12px;
    top: 12px;
  }

  .hero {
    min-height: 520px;
  }

  .hero img {
    object-position: 66% center;
  }

  .hero-shade {
    background: linear-gradient(180deg, rgba(5, 13, 35, 0.93), rgba(7, 24, 58, 0.62), rgba(7, 24, 58, 0.25));
  }

  .hero-content {
    padding: 32px 24px 0;
  }

  .hero p {
    font-size: 16px;
    line-height: 1.6;
  }

  .hero-badges {
    flex-direction: column;
    gap: 12px;
  }

  .metrics,
  .resource-grid,
  .solution-grid,
  .trust-bar,
  .industry-strip,
  .spec-grid {
    grid-template-columns: 1fr;
  }

  .metric {
    min-height: 112px;
  }

  .latest-item {
    grid-template-columns: 1fr;
  }
.contribute {
    grid-template-columns: 1fr !important;
  }

  .contribute a {
    grid-column: auto;
    grid-row: auto;
    width: fit-content;
  }
}

/* Restore the five quick cards to the original compact entrance style. */
.quick-links {
  gap: 14px;
  margin: 18px 0 20px;
}

.quick-card {
  min-height: 68px;
  gap: 12px;
  padding: 12px 16px;
  border-color: #eaf0f8;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(40, 76, 126, 0.04);
}

.quick-card .metric-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 9px;
  background-size: auto;
  filter: drop-shadow(0 10px 10px rgba(20, 82, 170, 0.12));
}

.quick-card .metric-icon::before,
.quick-card .metric-icon::after,
.quick-card .metric-icon span,
.quick-card .metric-icon span::before {
  display: block !important;
}

.quick-card .metric-icon.cube {
  transform: rotateX(58deg) rotateZ(-35deg) !important;
}

.quick-card .metric-icon.cube::before,
.quick-card .metric-icon.cube::after,
.quick-card .metric-icon.cube span {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(145deg, #bce1ff, #1265ff);
}

.quick-card .metric-icon.green::before,
.quick-card .metric-icon.green::after,
.quick-card .metric-icon.green span {
  background: linear-gradient(145deg, #c9ffe1, #39c37d);
}

.quick-card .metric-icon.cube::before {
  left: 0;
  bottom: 2px;
}

.quick-card .metric-icon.cube::after {
  right: 0;
  bottom: 2px;
}

.quick-card .metric-icon.cube span {
  left: 11px;
  top: 0;
}

.quick-card .metric-icon.badge span {
  position: static;
}

.quick-card .metric-icon.badge span::before {
  inset: 12px;
}

.quick-card .metric-icon.badge {
  background: linear-gradient(145deg, #ffe2cc, #ff7a2d);
}

.quick-card .metric-icon.book {
  background: linear-gradient(145deg, #cfd4ff, #5c67ff);
}

.quick-card .metric-icon.folder {
  background: linear-gradient(145deg, #bce5ff, #1483ff);
}

.quick-copy strong {
  margin-bottom: 4px;
  font-size: 14px;
}

.quick-copy p {
  font-size: 12px;
  color: #71819f;
}

/* Global primary text color pass */
body,
.section-title h2,
.panel-title h2,
.quick-copy strong,
.resource-card h3,
.latest-item h3,
.industry-card strong,
.spec-card strong,
.filter-row b,
.filter-options a,
.showroom-copy h1,
.showroom-types strong,
.device-card h3 {
  color: #000000;
}

.filter-options a.active { color: var(--blue); }
.filter-options a.active,
.upload-btn { color: #ffffff; }

/* Typography polish for showroom pages */
.showroom-page {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.showroom-copy h1 { font-weight: 800; }
.showroom-copy p { color: #43516c; font-weight: 500; }
.showroom-types strong { font-weight: 700; }
.showroom-types small { color: #7b89a1; font-weight: 500; }
.showroom-filter .filter-row b { color: #22314f; font-weight: 600; }
.showroom-filter .filter-options a { color: #34425f; font-weight: 600; }
.showroom-filter .filter-options a.active { color: #ffffff; font-weight: 700; }
.device-card h3 { color: #14213f; font-weight: 700; }
.device-card small { color: #7d8aa1; font-weight: 500; }
.device-card div { font-weight: 500; }

/* Equipment showroom page */
.showroom-hero {
  min-height: clamp(300px, 28vw, 430px);
  position: relative;
  overflow: hidden;
  margin: 10px 0 16px;
  border-radius: 8px;
  background: #edf6ff;
  box-shadow: var(--shadow);
}

.showroom-hero-track {
  min-height: inherit;
  display: flex;
  transform: translateX(calc(var(--showroom-hero-index, 0) * -100%));
  transition: transform 0.5s ease;
}

.showroom-hero-slide {
  min-height: inherit;
  position: relative;
  flex: 0 0 100%;
  overflow: hidden;
}

.showroom-hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showroom-types {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid #edf2fa;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 7px 18px rgba(41, 77, 128, 0.035);
}

.showroom-types a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  column-gap: 12px;
  align-items: center;
  min-height: 58px;
}

.showroom-types strong {
  align-self: end;
  color: #132341;
  font-size: 14px;
}

.showroom-types small {
  align-self: start;
  color: #6d7d98;
  font-size: 12px;
}

.show-icon {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  display: block;
  border-radius: 12px;
  background: linear-gradient(145deg, #e9f5ff, #ffffff);
  box-shadow: 0 10px 18px rgba(18, 101, 255, 0.12);
  position: relative;
}

.show-icon::before {
  content: "";
  position: absolute;
  inset: 10px;
  background-image: url("assets/icons/line-icons/settings-outline.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: brightness(0) saturate(100%) invert(34%) sepia(96%) saturate(3419%) hue-rotate(212deg) brightness(97%) contrast(99%);
}

.show-icon.mount::before { background-image: url("assets/icons/line-icons/cube-outline.png"); }
.show-icon.detect::before { background-image: url("assets/icons/line-icons/eye-outline.png"); }
.show-icon.pack::before { background-image: url("assets/icons/line-icons/archive-outline.png"); }
.show-icon.carry::before { background-image: url("assets/icons/line-icons/move-outline.png"); }
.show-icon.other::before { background-image: url("assets/icons/line-icons/briefcase-outline.png"); }

.showroom-filter {
  margin-bottom: 18px;
  padding: 14px 22px;
  border: 1px solid #eaf0f8;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(41, 77, 128, 0.035);
}

.showroom-filter .filter-row {
  grid-template-columns: 118px minmax(0, 1fr) 54px;
  gap: 16px;
  padding: 7px 0;
}

.showroom-filter .filter-row b {
  gap: 10px;
  font-weight: 600;
  line-height: 30px;
}

.showroom-filter .filter-options {
  column-gap: 18px;
  row-gap: 8px;
  max-height: 30px;
}

.showroom-filter .filter-options a {
  height: 30px;
  padding: 0 12px;
}

.showroom-filter .filter-row > button {
  height: 30px;
  line-height: 30px;
}

.showroom-results {
  margin-top: 18px;
}

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

.device-card {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(218, 229, 244, 0.92);
  border-radius: 10px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(145deg, rgba(18, 101, 255, 0.18), rgba(22, 198, 255, 0.08)) border-box;
  box-shadow: 0 8px 18px rgba(41, 77, 128, 0.045);
  transform: translateY(0);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.device-card:hover,
.device-card:focus-within {
  border-color: #dce8f8;
  box-shadow: 0 14px 28px rgba(41, 77, 128, 0.1);
  transform: translateY(-3px);
}

.device-card::before {
  content: "閹恒劏宕?;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 4;
  height: 24px;
  padding: 0 9px;
  border-radius: 5px;
  color: #ffffff;
  background: #13b96f;
  font-size: 12px;
  font-weight: 800;
  line-height: 24px;
}

.device-card.new::before {
  content: "NEW";
  background: #ff7a21;
}

.device-card:not(.recommend):not(.new)::before {
  display: none;
}

.device-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  margin: 10px 10px 0;
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 50% 56%, rgba(47, 141, 255, 0.24), transparent 38%),
    linear-gradient(145deg, #24344d 0%, #314660 54%, #243348 100%);
  background-size: 22px 22px, 22px 22px, 100% 100%, 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.device-img img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  display: block;
  padding: 8px;
  object-fit: contain;
  transform: scale(1);
  transition: transform 0.28s ease;
}

.device-card:hover .device-img img,
.device-card:focus-within .device-img img {
  transform: scale(1.04);
}

.device-img.robot,
.device-img.line,
.device-img.agv {
  position: relative;
}

.device-img.robot::before,
.device-img.line::before,
.device-img.agv::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff, #cfe6ff);
  box-shadow: 0 20px 40px rgba(45, 98, 162, 0.16), inset 0 0 0 2px rgba(18, 101, 255, 0.14);
}

.device-img.robot::after {
  content: "";
  position: absolute;
  left: 42%;
  top: 18%;
  width: 58px;
  height: 108px;
  border-radius: 34px;
  border: 14px solid #d7e6f5;
  transform: rotate(32deg);
}

.device-img.line::after {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  top: 50%;
  height: 14px;
  border-radius: 10px;
  background: #b7cde4;
  box-shadow: 32px -34px 0 -2px #ffffff, 96px -26px 0 -2px #ffffff, 160px -38px 0 -2px #ffffff;
}

.device-img.agv::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  top: 43%;
  height: 52px;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff, #b9d8f7);
  box-shadow: inset 0 -8px 0 rgba(18, 101, 255, 0.12);
}

.device-card h3 {
  margin: 0;
  overflow: hidden;
  color: #112044;
  font-size: 15px;
  line-height: 1.45;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.18s ease;
}

.device-card:hover h3,
.device-card:focus-within h3 {
  color: #112044;
}

.device-info {
  display: grid;
  gap: 9px;
  padding: 13px 13px 12px;
}

.device-kicker {
  display: flex;
  gap: 6px;
  min-height: 22px;
}

.device-kicker span {
  height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #49627f;
  background: #f2f6fb;
  font-size: 11px;
  font-weight: 700;
}

.device-card small {
  display: block;
  min-height: 36px;
  margin: 0;
  color: #71819f;
  font-size: 12px;
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.device-card .device-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: auto 13px 14px;
  padding-top: 10px;
  border-top: 1px solid #f1f5fb;
  color: #72819b;
  font-size: 12px;
}

.device-price {
  flex: 0 0 auto;
  color: #d9621b;
  font-size: 17px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
}

.device-card b {
  overflow: hidden;
  color: #5f6f8c;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.device-card i,
.device-card em {
  width: 14px;
  height: 14px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.device-card i {
  background-image: url("assets/icons/line-icons/star-outline.png");
  filter: brightness(0) saturate(100%) invert(75%) sepia(98%) saturate(1194%) hue-rotate(347deg) brightness(99%) contrast(95%);
}

.device-card em {
  background-image: url("assets/icons/line-icons/eye-outline.png");
  filter: brightness(0) saturate(100%) invert(60%) sepia(20%) saturate(568%) hue-rotate(178deg) brightness(92%) contrast(86%);
}

.showroom-cta {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(620px, 1.8fr) 190px;
  gap: 28px;
  align-items: center;
  margin: 30px 0 0;
  padding: 24px 30px;
  border: 1px solid #e7f0fb;
  border-radius: 8px;
  background: linear-gradient(135deg, #edf6ff, #f7fbff);
}

.cta-main {
  display: grid;
  gap: 8px;
  align-content: center;
  min-height: 46px;
}

.cta-main strong {
  display: block;
  color: #112044;
  font-size: 18px;
}

.cta-main > span {
  color: #60728f;
  font-size: 13px;
}

.cta-benefits {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  height: 44px;
  min-width: 0;
}

.cta-benefit {
  flex: 1 1 0;
  display: flex;
  height: 44px;
  gap: 10px;
  align-items: center;
  min-width: 0;
  margin: 0 !important;
  transform: none !important;
}

.cta-ico {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: block;
  position: relative;
  margin: 0;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 8px 18px rgba(18, 101, 255, 0.08);
}

.cta-ico::before {
  content: "";
  position: absolute;
  inset: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: brightness(0) saturate(100%) invert(34%) sepia(96%) saturate(3419%) hue-rotate(212deg) brightness(97%) contrast(99%);
}

.cta-ico.brand::before { background-image: url("assets/icons/line-icons/shield-outline.png"); }
.cta-ico.customer::before { background-image: url("assets/icons/line-icons/briefcase-outline.png"); }
.cta-ico.chance::before { background-image: url("assets/icons/line-icons/trending-up-outline.png"); }

.cta-benefit span {
  display: grid;
  gap: 4px;
  align-content: center;
  min-width: 0;
  height: 34px;
  line-height: 1;
}

.cta-benefit b {
  overflow: hidden;
  color: #203454;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cta-benefit small {
  overflow: hidden;
  color: #72819f;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cta-action {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px;
  color: #ffffff;
  background: var(--blue);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .showroom-types,
  .device-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .showroom-cta {
    grid-template-columns: 1fr;
  }

  .cta-action {
    width: fit-content;
  }
}

@media (max-width: 680px) {
  .showroom-types,
  .device-grid {
    grid-template-columns: 1fr;
  }

  .showroom-cta {
    grid-template-columns: 1fr;
  }

  .cta-benefits {
    display: grid;
    height: auto;
    grid-template-columns: 1fr;
  }
}

/* Help center */
html {
  scroll-behavior: smooth;
}

.help-page {
  background: #fafbfe;
}

.help-hero {
  min-height: 142px;
  margin: 8px 0 18px;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(250, 251, 254, 0) 0%, rgba(232, 242, 255, 0.72) 100%);
}

.help-hero-copy {
  padding: 26px 6px;
}

.help-hero h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #0c1738;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
}

.help-hero h1 span {
  height: 22px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  color: #1265ff;
  font-size: 12px;
  font-weight: 800;
  background: #eaf3ff;
  border-radius: 6px;
}

.help-hero p {
  margin: 14px 0 0;
  color: #314364;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
}

.help-hero-visual {
  min-height: 142px;
  position: relative;
  background:
    radial-gradient(circle at 58% 32%, rgba(18, 101, 255, 0.13), transparent 34%),
    radial-gradient(circle at 27% 48%, rgba(74, 164, 255, 0.1), transparent 23%),
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(225, 240, 255, 0.62));
}

.help-core {
  width: 92px;
  height: 82px;
  position: absolute;
  left: 46%;
  top: 24px;
  border: 1px solid rgba(133, 177, 255, 0.46);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(135, 197, 255, 0.34));
  box-shadow: 0 18px 35px rgba(37, 105, 207, 0.16);
}

.help-core::before {
  content: "?";
  width: 46px;
  height: 46px;
  position: absolute;
  left: 22px;
  top: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 31px;
  line-height: 1;
  font-weight: 800;
  background: linear-gradient(180deg, #67c7ff, #1265ff);
  border-radius: 50%;
  box-shadow: 0 8px 16px rgba(18, 101, 255, 0.24);
}

.help-core::after {
  content: "";
  position: absolute;
  left: 21px;
  right: 21px;
  bottom: 11px;
  height: 5px;
  background: linear-gradient(90deg, rgba(111, 194, 255, 0.3), rgba(18, 101, 255, 0.72), rgba(111, 194, 255, 0.3));
  border-radius: 5px;
}

.help-cube {
  position: absolute;
  border: 1px solid rgba(139, 184, 255, 0.42);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 10px 22px rgba(45, 108, 201, 0.1);
  transform: rotate(18deg);
}

.help-cube.cube-a {
  width: 32px;
  height: 32px;
  left: 25%;
  top: 26px;
  border-radius: 9px;
}

.help-cube.cube-b {
  width: 24px;
  height: 24px;
  left: 73%;
  top: 34px;
  border-radius: 7px;
  transform: rotate(-14deg);
}

.help-cube.cube-c {
  width: 37px;
  height: 37px;
  left: 67%;
  top: 91px;
  border-radius: 10px;
  transform: rotate(28deg);
}

.help-shortcut-icon,
.help-nav-icon,
.help-section-icon {
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.help-shortcut-icon {
  width: 38px;
  height: 38px;
  grid-row: 1 / 3;
  filter: brightness(0) saturate(100%) invert(40%) sepia(96%) saturate(2588%) hue-rotate(205deg) brightness(101%) contrast(98%) drop-shadow(0 5px 8px rgba(36, 113, 234, 0.13));
}

.help-shortcut-icon.download,
.help-nav-icon.download,
.help-section-icon.download { background-image: url("assets/icons/line-icons/download-outline.png"); }
.help-shortcut-icon.vip,
.help-nav-icon.vip,
.help-section-icon.vip { background-image: url("assets/icons/line-icons/award-outline.png"); }
.help-shortcut-icon.upload,
.help-nav-icon.upload,
.help-section-icon.upload { background-image: url("assets/icons/line-icons/cloud-upload-outline.png"); }
.help-nav-icon.start,
.help-section-icon.start { background-image: url("assets/icons/line-icons/compass-outline.png"); }
.help-nav-icon.account,
.help-section-icon.account { background-image: url("assets/icons/line-icons/person-outline.png"); }
.help-nav-icon.agreement,
.help-section-icon.agreement { background-image: url("assets/icons/line-icons/file-text-outline.png"); }
.help-nav-icon.copyright,
.help-section-icon.copyright { background-image: url("assets/icons/line-icons/shield-outline.png"); }
.help-nav-icon.order,
.help-section-icon.order { background-image: url("assets/icons/line-icons/file-text-outline.png"); }
.help-nav-icon.business,
.help-section-icon.business { background-image: url("assets/icons/line-icons/briefcase-outline.png"); }

.help-layout {
  display: grid;
  grid-template-columns: 202px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.help-nav {
  position: sticky;
  top: 18px;
  padding: 14px 10px;
  background: #fff;
  border: 1px solid #e7edf5;
  border-radius: 7px;
}

.help-nav h2 {
  margin: 3px 12px 10px;
  color: #1e2b43;
  font-size: 13px;
  font-weight: 700;
}

.help-nav a {
  height: 39px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5f6f88;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 5px;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.help-nav a:hover {
  color: #176df1;
  background: #f7faff;
}

.help-nav a:focus-visible,
.faq-item > button:focus-visible {
  outline: 2px solid rgba(18, 101, 232, 0.38);
  outline-offset: 2px;
}

.help-nav a.active {
  color: #1265e8;
  font-weight: 600;
  background: #edf5ff;
}

.help-nav-icon {
  width: 17px;
  height: 17px;
  opacity: 0.72;
  filter: brightness(0) saturate(100%) invert(44%) sepia(16%) saturate(1028%) hue-rotate(181deg) brightness(91%) contrast(88%);
}

.help-nav a.active .help-nav-icon {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(36%) sepia(96%) saturate(3293%) hue-rotate(211deg) brightness(99%) contrast(99%);
}

.help-content {
  min-width: 0;
}

.faq-section {
  margin: 0 0 25px;
  scroll-margin-top: 88px;
}

.faq-section[hidden] {
  display: none !important;
}

.faq-section > header {
  min-height: 43px;
  padding: 0 2px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.faq-section > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.help-section-icon {
  width: 22px;
  height: 22px;
  filter: brightness(0) saturate(100%) invert(36%) sepia(96%) saturate(3293%) hue-rotate(211deg) brightness(99%) contrast(99%);
}

.faq-section h2 {
  margin: 0;
  color: #1b2941;
  font-size: 16px;
  font-weight: 700;
}

.faq-section header p {
  margin: 0;
  color: #7f8da3;
  font-size: 11px;
  font-weight: 400;
}

.faq-list {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e7edf5;
  border-radius: 7px;
}

.faq-item + .faq-item {
  border-top: 1px solid #edf1f6;
}

.faq-item > button {
  width: 100%;
  min-height: 51px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #263650;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  background: #fff;
  border: 0;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.faq-item > button:hover {
  color: #1265e8;
  background: #f8fbff;
}

.faq-item.is-open > button {
  color: #20314e;
  font-weight: 650;
  background: #f7faff;
}

.faq-item.is-open > button i {
  color: #1265e8;
}

.faq-item > button i {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.faq-item > button i::before,
.faq-item > button i::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 10px;
  height: 1px;
  background: currentColor;
  transition: transform 0.2s ease;
}

.faq-item > button i::after {
  transform: rotate(90deg);
}

.faq-item.is-open > button i::after {
  transform: rotate(0);
}

.faq-answer {
  max-height: 0;
  padding: 0 18px;
  overflow: hidden;
  color: #53647c;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.8;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.28s ease, padding 0.28s ease, opacity 0.2s ease, visibility 0s linear 0.28s;
}

.faq-item.is-open .faq-answer {
  max-height: 420px;
  padding: 8px 18px 9px;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

#agreement .faq-item.is-open .faq-answer {
  max-height: 1800px;
}

#agreement .faq-answer p + p {
  margin-top: 8px;
}

.faq-answer p {
  margin: 0;
}

.faq-answer ol {
  margin: 0;
  padding-left: 20px;
}

@media (max-width: 1180px) {
  .help-hero {
    grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1.1fr);
  }

  .help-layout {
    grid-template-columns: 184px minmax(0, 1fr);
  }

}

@media (max-width: 760px) {
  .help-hero {
    min-height: 124px;
    grid-template-columns: 1fr;
  }

  .help-hero-copy {
    padding: 22px 4px;
  }

  .help-hero h1 {
    font-size: 28px;
  }

  .help-hero p {
    font-size: 13px;
  }

  .help-hero-visual {
    display: none;
  }

  .help-layout {
    grid-template-columns: 1fr;
  }

  .help-nav {
    position: static;
    padding: 8px;
    display: flex;
    overflow-x: auto;
  }

  .help-nav h2 {
    display: none;
  }

  .help-nav a {
    min-width: max-content;
  }

  .faq-section > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

}

/* Final primary text color unification */
body,
.section-title h2,
.panel-title h2,
.quick-copy strong,
.resource-card h3,
.latest-item h3,
.industry-card strong,
.spec-card strong,
.filter-row b,
.filter-options a,
.showroom-copy h1,
.showroom-copy strong,
.showroom-types strong,
.device-card h3,
.device-card b { color: #000000; }

.filter-options a.active { color: var(--blue); }
.filter-options a.active,
.upload-btn { color: #ffffff; }
.showroom-filter .filter-row b,
.showroom-filter .filter-options a { color: #000000; }
.showroom-filter .filter-options a.active { color: #ffffff; }

/* Showroom redesign 2026-06-17 */
.showroom-page {
  --show-blue: #1265ff;
  --show-soft: #eef5ff;
  --show-line: #e8eef8;
}

.showroom-page .showroom-hero {
  min-height: 292px;
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(520px, 1.28fr);
  align-items: center;
  overflow: hidden;
  margin: 10px 0 16px;
  padding: 34px 42px;
  border: 1px solid #dfeaff;
  border-radius: 10px;
  background: linear-gradient(135deg, #f5f9ff 0%, #e8f0ff 48%, #dce9ff 100%);
  box-shadow: 0 12px 28px rgba(53, 98, 162, 0.06);
}

.showroom-hero-copy {
  position: relative;
  z-index: 2;
}

.showroom-hero-copy h1 {
  margin: 0 0 14px;
  color: #061634;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.1;
}

.showroom-hero-copy p {
  margin: 0;
  color: #243653;
  font-size: 18px;
  font-weight: 700;
}

.showroom-stats {
  display: flex;
  gap: 40px;
  margin-top: 34px;
}

.showroom-stats span {
  display: grid;
  gap: 5px;
}

.showroom-stats strong {
  color: #112044;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.showroom-stats small {
  color: #52627e;
  font-size: 12px;
  font-weight: 700;
}

.showroom-page .showroom-hero > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 235px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  mix-blend-mode: multiply;
  filter: saturate(1.06) contrast(1.02);
}

.showroom-categories {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid var(--show-line);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(41, 77, 128, 0.035);
}

.showroom-categories button {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  color: #263754;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.showroom-categories button b {
  overflow: hidden;
  max-width: 100%;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cat-ico {
  width: 38px;
  height: 38px;
  position: relative;
  display: block;
  border-radius: 12px;
  background: #f1f6ff;
  box-shadow: inset 0 0 0 1px rgba(18, 101, 255, 0.05);
}

.cat-ico::before {
  content: "";
  position: absolute;
  inset: 10px;
  background-color: #2e6dff;
  clip-path: polygon(10% 20%, 90% 20%, 90% 80%, 10% 80%);
}

.cat-ico.all::before { clip-path: polygon(10% 10%, 40% 10%, 40% 40%, 10% 40%, 10% 10%, 60% 10%, 90% 10%, 90% 40%, 60% 40%, 60% 10%, 10% 60%, 40% 60%, 40% 90%, 10% 90%, 10% 60%, 60% 60%, 90% 60%, 90% 90%, 60% 90%); }
.cat-ico.plc::before { clip-path: polygon(16% 20%, 84% 20%, 84% 80%, 16% 80%); }
.cat-ico.screen::before { clip-path: polygon(8% 18%, 92% 18%, 92% 72%, 58% 72%, 64% 86%, 36% 86%, 42% 72%, 8% 72%); }
.cat-ico.drive::before { clip-path: polygon(28% 10%, 72% 10%, 72% 90%, 28% 90%); }
.cat-ico.servo::before { clip-path: polygon(20% 28%, 78% 12%, 88% 68%, 32% 88%); }
.cat-ico.sensor::before { clip-path: polygon(50% 5%, 76% 30%, 64% 90%, 36% 90%, 24% 30%); }
.cat-ico.pc::before { clip-path: polygon(12% 18%, 88% 18%, 88% 70%, 60% 70%, 66% 86%, 34% 86%, 40% 70%, 12% 70%); }
.cat-ico.scada::before { clip-path: polygon(22% 10%, 78% 10%, 78% 90%, 22% 90%); }
.cat-ico.more::before { clip-path: polygon(10% 10%, 40% 10%, 40% 40%, 10% 40%, 10% 10%, 60% 10%, 90% 10%, 90% 40%, 60% 40%, 60% 10%, 10% 60%, 40% 60%, 40% 90%, 10% 90%, 10% 60%, 60% 60%, 90% 60%, 90% 90%, 60% 90%); opacity: .45; }

.showroom-categories button.active {
  color: var(--show-blue);
}

.showroom-categories button.active .cat-ico {
  background: linear-gradient(145deg, #e9f2ff, #ffffff);
  box-shadow: 0 8px 18px rgba(18, 101, 255, 0.12), inset 0 0 0 1px rgba(18, 101, 255, 0.12);
}

.showroom-page .showroom-filter {
  margin-bottom: 16px;
  padding: 13px 18px;
  border: 1px solid var(--show-line);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(41, 77, 128, 0.035);
}

.showroom-page .showroom-filter .filter-row {
  grid-template-columns: 84px minmax(0, 1fr) 52px;
  gap: 14px;
  padding: 6px 0;
}

.showroom-page .showroom-filter .filter-row b {
  color: #32415b;
  font-size: 12px;
  font-weight: 800;
  line-height: 28px;
}

.showroom-page .showroom-filter .filter-options {
  column-gap: 10px;
  row-gap: 7px;
  max-height: 28px;
}

.showroom-page .showroom-filter .filter-options a {
  height: 28px;
  padding: 0 13px;
  border-radius: 7px;
  color: #55667f;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.showroom-page .showroom-filter .filter-options a.active {
  color: #ffffff;
  background: #1265ff;
}

.showroom-page .result-toolbar {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 2px 0 14px;
}

.showroom-page .result-toolbar nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.showroom-page .result-toolbar nav a {
  color: #697994;
  font-size: 12px;
  font-weight: 800;
}

.showroom-page .result-toolbar nav a.active {
  color: #1265ff;
}

.showroom-page .result-toolbar label {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #7b89a1;
  font-size: 12px;
  font-weight: 700;
}

.view-switch {
  display: inline-flex;
  gap: 8px;
}

.view-switch button {
  width: 32px;
  height: 32px;
  position: relative;
  border: 1px solid #e7eef8;
  border-radius: 8px;
  background: #ffffff;
}

.view-switch button::before {
  content: "";
  position: absolute;
  inset: 9px;
  background: #8a9ab5;
}

.view-switch button:first-child::before {
  clip-path: polygon(0 0, 42% 0, 42% 42%, 0 42%, 0 0, 58% 0, 100% 0, 100% 42%, 58% 42%, 58% 0, 0 58%, 42% 58%, 42% 100%, 0 100%, 0 58%, 58% 58%, 100% 58%, 100% 100%, 58% 100%);
}

.view-switch button:last-child::before {
  clip-path: polygon(0 8%, 100% 8%, 100% 22%, 0 22%, 0 8%, 0 43%, 100% 43%, 100% 57%, 0 57%, 0 43%, 0 78%, 100% 78%, 100% 92%, 0 92%);
}

.view-switch button.active {
  background: #eaf2ff;
  border-color: #d8e6fb;
}

.view-switch button.active::before {
  background: #1265ff;
}

.showroom-page .device-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.showroom-page .device-card {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 376px;
  border: 1px solid #e8eef8;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(41, 77, 128, 0.045);
  transform: translateY(0);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.showroom-page .device-card::before {
  display: none;
}

.showroom-page .device-card:hover {
  border-color: #d8e6f7;
  box-shadow: 0 14px 30px rgba(41, 77, 128, 0.09);
  transform: translateY(-3px);
}

.showroom-page .device-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  margin: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(87, 154, 255, 0.2), transparent 44%),
    linear-gradient(145deg, #eef6ff, #dfeeff);
  box-shadow: none;
}

.showroom-page .device-img img {
  width: 100%;
  height: 100%;
  display: block;
  padding: 20px;
  object-fit: contain;
  transform: scale(1);
  transition: transform 0.28s ease;
}

.showroom-page .device-card:hover .device-img img {
  transform: scale(1.045);
}

.showroom-page .device-info {
  display: grid;
  gap: 7px;
  padding: 12px 14px 10px;
}

.showroom-page .device-card h3 {
  margin: 0;
  overflow: hidden;
  color: #101b34;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.showroom-page .device-model {
  margin: 0;
  color: #7a89a4;
  font-size: 12px;
  font-weight: 580;
  line-height: 1.2;
}

.showroom-page .device-price {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ff4f24;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.showroom-page .device-price em {
  width: auto;
  height: auto;
  display: inline;
  color: #19b46b;
  background: none;
  filter: none;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.showroom-page .device-views {
  margin: 0;
  color: #8a98ad;
  font-size: 11px;
  font-weight: 700;
}

.showroom-page .device-views span {
  display: inline-block;
  width: 12px;
}

.showroom-page .device-meta {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 12px;
  gap: 7px;
  align-items: center;
  margin: auto 14px 13px;
  padding-top: 11px;
  border-top: 1px solid #edf2fa;
}

.showroom-page .device-meta img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

.showroom-page .device-meta b {
  overflow: hidden;
  color: #101b34;
  font-size: 12px;
  font-weight: 580;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.showroom-page .device-meta i {
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 50%;
  background: #1265ff;
  background-image: none;
  filter: none;
  position: relative;
}

.showroom-page .device-meta i::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 6px;
  height: 4px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}

.device-request-card {
  min-height: 376px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 26px;
  border: 1px solid #f1dce6;
  border-radius: 10px;
  background: linear-gradient(145deg, #ffffff 0%, #fff4f2 58%, #e7f2ff 100%);
}

.device-request-card h3 {
  margin: 0 0 12px;
  color: #111d38;
  font-size: 20px;
}

.device-request-card p {
  margin: 0 0 22px;
  color: #5e6f8d;
  font-size: 13px;
  font-weight: 700;
}

.device-request-card a {
  width: fit-content;
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 6px;
  color: #ffffff;
  background: #1265ff;
  font-size: 13px;
  font-weight: 900;
}

.request-visual {
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 110px;
  height: 110px;
  border-radius: 32px;
  background: linear-gradient(145deg, #d8ecff, #72aeff);
  opacity: .78;
  transform: rotate(-8deg);
}

.request-visual::before,
.request-visual::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, .72);
}

.request-visual::before {
  left: 24px;
  top: 28px;
  width: 62px;
  height: 8px;
  border-radius: 999px;
  box-shadow: 0 20px 0 rgba(255,255,255,.72), 0 40px 0 rgba(255,255,255,.72);
}

.request-visual::after {
  right: 18px;
  top: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.showroom-service {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
  padding: 14px 22px;
  border: 1px solid #e8eef8;
  border-radius: 10px;
  background: #ffffff;
}

.showroom-service span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
}

.showroom-service b {
  color: #243451;
  font-size: 13px;
}

.showroom-service small {
  grid-column: 2;
  color: #7a89a1;
  font-size: 11px;
  font-weight: 700;
}

.service-ico {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  position: relative;
  border-radius: 10px;
  background: #eaf2ff;
}

.service-ico::before {
  content: "";
  position: absolute;
  inset: 9px;
  background: #1265ff;
}

.service-ico.shield::before {
  clip-path: polygon(50% 0, 88% 15%, 82% 68%, 50% 100%, 18% 68%, 12% 15%);
}

.service-ico.service::before {
  clip-path: polygon(8% 42%, 28% 42%, 28% 28%, 58% 28%, 58% 42%, 92% 42%, 92% 72%, 8% 72%);
}

.service-ico.ship::before {
  clip-path: polygon(6% 42%, 60% 42%, 60% 26%, 82% 42%, 94% 42%, 94% 72%, 6% 72%);
}

.service-ico.pay::before {
  clip-path: polygon(10% 18%, 90% 18%, 90% 82%, 10% 82%);
}

@media (max-width: 1180px) {
  .showroom-page .showroom-hero {
    grid-template-columns: 1fr;
  }

  .showroom-page .showroom-hero > img {
    height: 220px;
  }

  .showroom-categories {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .showroom-page .device-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .showroom-page .showroom-hero {
    padding: 24px;
  }

  .showroom-categories,
  .showroom-service {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showroom-page .device-grid {
    grid-template-columns: 1fr;
  }
}

/* Showroom content refinement */
.showroom-page {
  --show-blue: #1265ff;
  --show-card: #ffffff;
  --show-ink: #071733;
  --show-muted: #6b7a93;
  --show-soft-line: #e8effa;
}

.showroom-page .showroom-hero {
  position: relative;
  min-height: 260px;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 0.58fr);
  margin: 10px 0 14px;
  padding: 30px 46px 28px;
  border-color: #ddeaff;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(238, 245, 255, 0.98) 0%, rgba(238, 245, 255, 0.92) 30%, rgba(238, 245, 255, 0.42) 55%, rgba(238, 245, 255, 0.02) 100%),
    url("assets/showroom/generated/showroom-hero-20260617.png") center right / cover no-repeat;
  box-shadow: none;
}

.showroom-page .showroom-hero-copy h1 {
  margin-bottom: 13px;
  font-size: 36px;
  letter-spacing: 0;
}

.showroom-page .showroom-hero-copy p {
  color: #1c2d4a;
  font-size: 17px;
}

.showroom-page .showroom-stats {
  gap: 38px;
  margin-top: 30px;
}

.showroom-page .showroom-stats strong {
  font-size: 19px;
}

.showroom-page .showroom-hero > img {
  display: none;
}

.showroom-page .showroom-categories {
  gap: 8px;
  margin-bottom: 12px;
  padding: 14px 18px;
  border-color: #e9eff8;
  border-radius: 8px;
  box-shadow: none;
}

.showroom-page .showroom-categories button {
  position: relative;
  gap: 7px;
  color: #253653;
}

.showroom-page .showroom-categories button::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 22px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #1265ff;
  opacity: 0;
  transform: translateX(-50%) scaleX(0.45);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.showroom-page .showroom-categories button:hover,
.showroom-page .showroom-categories button.active {
  color: #1265ff;
}

.showroom-page .showroom-categories button.active::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.showroom-page .cat-ico {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.showroom-page .cat-ico::before {
  display: none;
}

.showroom-page .cat-ico img {
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
  transform: none;
}

.showroom-page .showroom-categories button.active .cat-ico {
  background: transparent;
  box-shadow: none;
}

.showroom-page .showroom-filter {
  overflow: hidden;
  margin-bottom: 14px;
  padding: 14px 22px;
  border: 1px solid #eef3fb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(41, 77, 128, 0.03);
}

.showroom-page .showroom-filter .filter-row {
  grid-template-columns: 118px minmax(0, 1fr) 54px;
  gap: 16px;
  min-height: 44px;
  padding: 7px 0;
  align-items: start;
}

.showroom-page .showroom-filter .filter-row b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #162746;
  font-size: 12px;
  font-weight: 580;
  line-height: 30px;
}

.showroom-page .showroom-filter .filter-options {
  display: flex;
  flex-wrap: wrap;
  column-gap: 18px;
  row-gap: 8px;
  max-height: 30px;
  overflow: hidden;
  transition: max-height 0.18s ease;
}

.showroom-page .showroom-filter .filter-options a {
  height: 30px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  color: #1b2c4d;
  background: transparent;
  font-size: 12px;
  font-weight: 580;
}

.showroom-page .showroom-filter .filter-options a.active {
  color: #ffffff;
  background: var(--blue);
  box-shadow: 0 6px 12px rgba(18, 101, 255, 0.18);
}

.showroom-page .showroom-filter .filter-row > button {
  height: 30px;
  margin-left: auto;
  border: 0;
  color: #7a8aa6;
  background: transparent;
  font-size: 12px;
  line-height: 30px;
  cursor: pointer;
}

.showroom-page .showroom-filter .filter-row.is-expanded .filter-options {
  max-height: 220px;
}

.showroom-page .result-toolbar {
  margin: 1px 0 12px;
}

.showroom-page .showroom-results {
  margin-top: 14px;
}

.showroom-page .device-grid {
  gap: 14px;
}

.showroom-page .device-card {
  min-height: 348px;
  border-color: rgba(232, 239, 249, 0.42);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:
    0 1px 2px rgba(25, 43, 78, 0.025),
    0 8px 20px rgba(35, 73, 126, 0.045);
}

.showroom-page .device-card:hover {
  border-color: rgba(203, 220, 244, 0.46);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:
    0 2px 5px rgba(25, 43, 78, 0.035),
    0 14px 28px rgba(35, 73, 126, 0.085);
  transform: translateY(-2px);
}

.showroom-page .device-img {
  aspect-ratio: 1.24 / 1;
  background: #eaf4ff;
}

.showroom-page .device-img img {
  padding: 0;
  object-fit: cover;
}

.showroom-page .device-img::before {
  content: "查看详情";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.62);
  box-shadow:
    0 10px 22px rgba(8, 18, 38, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  transform: translate(-50%, -38%);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.showroom-page .device-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(9, 22, 45, 0.2);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.showroom-page .device-card:hover .device-img::before,
.showroom-page .device-card:focus-within .device-img::before {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.showroom-page .device-card:hover .device-img::after,
.showroom-page .device-card:focus-within .device-img::after {
  opacity: 1;
}

.showroom-page .device-info {
  gap: 5px;
  padding: 10px 12px 8px;
}

.showroom-page .device-card h3 {
  font-size: 13px;
  line-height: 1.35;
}

.showroom-page .device-model {
  font-size: 11px;
}

.showroom-page .device-price {
  margin-top: 2px;
  gap: 8px;
  font-size: 16px;
}

.showroom-page .device-views {
  margin: 0;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  white-space: nowrap;
}

.showroom-page .device-meta .device-views img {
  width: 13px;
  height: 13px;
  opacity: 0.68;
  filter: brightness(0) saturate(100%) invert(54%) sepia(13%) saturate(565%) hue-rotate(181deg) brightness(91%) contrast(88%);
}

.showroom-page .device-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: auto 12px 10px;
  padding-top: 9px;
}

.showroom-page .device-vendor {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, max-content) 14px;
  align-items: center;
  gap: 6px;
}

.showroom-page .device-meta img {
  width: 20px;
  height: 20px;
}

.showroom-page .device-meta .device-cert {
  width: 14px;
  height: 14px;
  justify-self: start;
  object-fit: contain;
}

.showroom-page .device-meta b {
  font-size: 11px;
}

.showroom-page .device-meta i {
  width: 11px;
  height: 11px;
}

.showroom-page .device-request-card {
  min-height: 348px;
  padding: 26px 24px;
  border-color: #f0dfe5;
  border-radius: 8px;
  background: linear-gradient(145deg, #fffefe 0%, #fff5f3 62%, #edf6ff 100%);
}

.showroom-page .device-request-card h3 {
  font-size: 18px;
}

.showroom-page .device-request-card a {
  height: 34px;
  border-radius: 5px;
  background: #1265ff;
}

.showroom-page .request-visual {
  width: 90px;
  height: 90px;
  right: 18px;
  bottom: 16px;
}

.showroom-page .showroom-service {
  margin-top: 22px;
  padding: 12px 18px;
  border-color: #e9eff8;
  border-radius: 8px;
}

/* About page */
.about-shell {
  color: #17233d;
}

.about-hero {
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(360px, 0.86fr) minmax(500px, 1.14fr);
  overflow: hidden;
  border: 1px solid #e7edf7;
  border-radius: 8px;
  background: #ffffff;
}

.about-hero-copy {
  align-self: center;
  padding: 44px 32px 44px 48px;
}

.about-eyebrow,
.about-section-head > div > span,
.about-contact > div > span {
  display: block;
  margin-bottom: 10px;
  color: #2875ed;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.about-hero h1 {
  margin: 0;
  color: #101d38;
  font-size: 38px;
  line-height: 1.25;
  letter-spacing: 0;
}

.about-hero-copy > p {
  max-width: 530px;
  margin: 20px 0 0;
  color: #5f6f8d;
  font-size: 14px;
  line-height: 1.9;
}

.about-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.about-hero-tags span {
  padding: 6px 11px;
  border: 1px solid #dfe9f8;
  border-radius: 4px;
  color: #49617f;
  background: #f8faff;
  font-size: 12px;
}

.about-hero-visual {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  background: #071a3e;
}

.about-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 26, 62, 0.18), transparent 35%);
  pointer-events: none;
}

.about-hero-visual > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.about-visual-note {
  position: absolute;
  right: 22px;
  bottom: 20px;
  z-index: 1;
  min-width: 190px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  color: #ffffff;
  background: rgba(7, 25, 58, 0.72);
  backdrop-filter: blur(10px);
}

.about-visual-note strong,
.about-visual-note span {
  display: block;
}

.about-visual-note strong {
  font-size: 13px;
}

.about-visual-note span {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
}

.about-section {
  padding: 62px 8px;
}

.about-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 34px;
}

.about-section-head h2,
.about-value-copy h2,
.about-contact h2 {
  margin: 0;
  color: #15213a;
  font-size: 25px;
  line-height: 1.35;
  letter-spacing: 0;
}

.about-section-head > p {
  max-width: 520px;
  margin: 0;
  color: #71809b;
  font-size: 13px;
  line-height: 1.8;
}

.about-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #e8edf5;
  border-bottom: 1px solid #e8edf5;
}

.about-capability-grid article {
  min-height: 128px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 24px;
  border-right: 1px solid #e8edf5;
}

.about-capability-grid article:last-child {
  border-right: 0;
}

.about-icon {
  --about-icon: url("assets/icons/line-icons/layers-outline.png");
  width: 24px;
  height: 24px;
  display: inline-block;
  flex: 0 0 auto;
  background: #2478ed;
  -webkit-mask: var(--about-icon) center / contain no-repeat;
  mask: var(--about-icon) center / contain no-repeat;
}

.about-icon.layers { --about-icon: url("assets/icons/line-icons/layers-outline.png"); }
.about-icon.shield { --about-icon: url("assets/icons/line-icons/shield-outline.png"); }
.about-icon.people { --about-icon: url("assets/icons/line-icons/people-outline.png"); }
.about-icon.briefcase { --about-icon: url("assets/icons/line-icons/briefcase-outline.png"); }
.about-icon.upload { --about-icon: url("assets/icons/line-icons/cloud-upload-outline.png"); }
.about-icon.email { --about-icon: url("assets/icons/line-icons/email-outline.png"); }

.about-capability-grid h3 {
  margin: 1px 0 8px;
  color: #1c2943;
  font-size: 14px;
}

.about-capability-grid p {
  margin: 0;
  color: #74829b;
  font-size: 12px;
  line-height: 1.7;
}

.about-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 30px 0;
  border: 1px solid #e2eaf6;
  border-radius: 8px;
  background: #f1f6fd;
}

.about-metrics > div {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  border-right: 1px solid #dce6f4;
}

.about-metrics > div:last-child {
  border-right: 0;
}

.about-metrics strong {
  color: #146fe7;
  font-size: 28px;
  font-weight: 800;
}

.about-metrics sup {
  font-size: 14px;
}

.about-metrics span {
  color: #64738e;
  font-size: 12px;
}

.about-value {
  display: grid;
  grid-template-columns: minmax(440px, 1.05fr) minmax(400px, 0.95fr);
  align-items: center;
  gap: 64px;
  padding-top: 70px;
  padding-bottom: 72px;
}

.about-collage {
  position: relative;
  min-height: 355px;
}

.about-collage figure {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 6px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(37, 66, 110, 0.1);
}

.about-collage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.about-image-main {
  inset: 0 54px 40px 0;
}

.about-image-small {
  right: 0;
  bottom: 0;
  width: 48%;
  height: 48%;
}

.about-image-label {
  position: absolute;
  left: 22px;
  bottom: 17px;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 4px;
  color: #ffffff;
  background: #176fe0;
  font-size: 11px;
  font-weight: 700;
}

.about-value-intro {
  margin: 16px 0 24px;
  color: #71809a;
  font-size: 13px;
  line-height: 1.85;
}

.about-problem-list {
  margin: 0;
  border-top: 1px solid #e5ebf4;
}

.about-problem-list > div {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #e5ebf4;
}

.about-problem-list dt {
  color: #22304a;
  font-size: 13px;
  font-weight: 700;
}

.about-problem-list dd {
  margin: 0;
  color: #6d7c97;
  font-size: 13px;
}

.about-history {
  padding-top: 58px;
  border-top: 1px solid #e5ebf4;
}

.about-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 26px 0 0;
  list-style: none;
}

.about-timeline::before {
  content: "";
  position: absolute;
  top: 31px;
  right: 10%;
  left: 10%;
  height: 1px;
  background: #dbe5f3;
}

.about-timeline li {
  position: relative;
  padding: 30px 22px 0;
  text-align: center;
}

.about-timeline li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 11px;
  height: 11px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #2b7be9;
  box-shadow: 0 0 0 1px #bcd3f2;
  transform: translateX(-50%);
}

.about-timeline strong,
.about-timeline span {
  display: block;
}

.about-timeline strong {
  color: #1b72e5;
  font-size: 22px;
}

.about-timeline span {
  margin-top: 7px;
  color: #23314b;
  font-size: 13px;
  font-weight: 700;
}

.about-timeline p {
  margin: 7px 0 0;
  color: #7b88a0;
  font-size: 12px;
  line-height: 1.65;
}

.about-contact {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(520px, 1.1fr);
  align-items: center;
  gap: 54px;
  margin: 8px 0 4px;
  padding: 32px 38px;
  border: 1px solid #dfe8f5;
  border-radius: 8px;
  background: #ffffff;
}

.about-contact > div > p {
  margin: 12px 0 0;
  color: #71809a;
  font-size: 12px;
  line-height: 1.75;
}

.about-contact nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid #e4eaf3;
}

.about-contact nav a {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-right: 1px solid #e4eaf3;
  color: inherit;
  transition: background-color 0.2s ease;
}

.about-contact nav a:hover {
  background: #f6f9fe;
}

.about-contact nav span,
.about-contact nav strong,
.about-contact nav small {
  min-width: 0;
  display: block;
}

.about-contact nav strong {
  color: #26344f;
  font-size: 13px;
}

.about-contact nav small {
  overflow: hidden;
  margin-top: 5px;
  color: #8490a6;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 1180px) {
  .about-hero {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .about-hero-copy {
    padding: 36px 28px;
  }

  .about-hero h1 {
    font-size: 32px;
  }

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

  .about-capability-grid article:nth-child(2) {
    border-right: 0;
  }

  .about-capability-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid #e8edf5;
  }

  .about-value {
    grid-template-columns: 1fr 1fr;
    gap: 38px;
  }

  .about-contact {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .about-contact nav {
    border-top: 1px solid #e4eaf3;
    border-left: 0;
    padding-top: 16px;
  }
}

@media (max-width: 900px) {
  .about-hero {
    grid-template-columns: 1fr;
  }

  .about-hero-visual {
    min-height: 280px;
  }

  .about-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 0;
  }

  .about-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .about-value {
    grid-template-columns: 1fr;
  }

  .about-collage {
    min-height: 380px;
  }
}

@media (max-width: 760px) {
  .about-hero-copy {
    padding: 32px 22px;
  }

  .about-hero h1 {
    font-size: 29px;
  }

  .about-section {
    padding: 46px 0;
  }

  .about-section-head {
    display: block;
  }

  .about-section-head > p {
    margin-top: 14px;
  }

  .about-capability-grid {
    grid-template-columns: 1fr;
  }

  .about-capability-grid article {
    border-right: 0;
    border-bottom: 1px solid #e8edf5;
  }

  .about-capability-grid article:last-child {
    border-bottom: 0;
  }

  .about-metrics {
    padding: 24px 0;
  }

  .about-metrics > div {
    display: grid;
    justify-items: center;
    gap: 3px;
  }

  .about-metrics strong {
    font-size: 23px;
  }

  .about-collage {
    min-height: 285px;
  }

  .about-timeline {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .about-timeline::before {
    top: 10px;
    bottom: 10px;
    left: 5px;
    width: 1px;
    height: auto;
  }

  .about-timeline li {
    padding: 0 0 28px 30px;
    text-align: left;
  }

  .about-timeline li::before {
    top: 5px;
    left: 5px;
  }

  .about-contact {
    padding: 26px 22px;
  }

  .about-contact nav {
    grid-template-columns: 1fr;
  }

  .about-contact nav a {
    border-right: 0;
    border-bottom: 1px solid #e4eaf3;
  }

  .about-contact nav a:last-child {
    border-bottom: 0;
  }
}

/* Unified title color for light content surfaces. */
.section-title h2,
.panel-title h2,
.detail-block-title h2,
.detail-info h1,
.author-page-name h1,
.quick-copy strong,
.resource-card h3,
.latest-item h3,
.spec-card strong,
.device-card h3,
.help-hero h1,
.faq-section h2,
.faq-section h3,
.about-hero h1,
.about-section h2,
.about-section h3 { color: #333333; }

/* Profile center page */
.profile-page {
  padding-bottom: 0;
}

.profile-center {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.pc-hero {
  min-height: 274px;
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(440px, 1.15fr) minmax(390px, 0.85fr);
  align-items: center;
  gap: 28px;
  padding: 26px 38px 58px;
  border-radius: 8px 8px 0 0;
  color: #ffffff;
  background: #2875e8 url("assets/profile/banner.png") center / cover no-repeat;
}

.pc-hero::before,
.pc-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.pc-hero::before {
  display: none;
}

.pc-hero::after {
  left: 0;
  right: 0;
  bottom: -32px;
  height: 156px;
  background: linear-gradient(
    180deg,
    rgba(250, 251, 254, 0) 0%,
    rgba(250, 251, 254, 0.16) 20%,
    rgba(250, 251, 254, 0.72) 52%,
    #FAFBFE 78%,
    #FAFBFE 100%
  );
}

.pc-edit {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 3;
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 6px;
  color: #3459be;
  background: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 600;
  transition: background 0.18s ease, transform 0.18s ease;
}

.pc-edit:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

.pc-person,
.pc-level {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  transform: translateY(-22px);
}

.pc-person {
  gap: 24px;
}

.pc-avatar {
  width: 132px;
  height: 132px;
  position: relative;
  overflow: visible;
  flex: 0 0 132px;
  border-radius: 50%;
  background: transparent;
  outline: 3px solid transparent;
  outline-offset: 2px;
}

.pc-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 24%;
  transition: filter 0.18s ease, transform 0.18s ease;
}

.pc-avatar > img {
  position: absolute;
  width: 85%;
  height: 85%;
  left: 50%;
  top: 47%;
  z-index: 1;
  border-radius: 50%;
  border: 4px solid var(--avatar-ring-surface);
  background: var(--avatar-ring-surface);
  box-shadow:
    0 0 0 2px var(--avatar-ring-line),
    0 0 0 7px var(--avatar-ring-halo),
    0 12px 28px var(--avatar-ring-shadow);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}

.pc-avatar span {
  position: absolute;
  width: 85%;
  height: 85%;
  left: 50%;
  top: 47%;
  z-index: 3;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: rgba(19, 34, 63, 0.5);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.18s ease;
}

.pc-avatar:hover > img { filter: brightness(0.88); transform: translate(-50%, -50%) scale(1.025); }
.pc-avatar:hover span { opacity: 1; }
.pc-avatar:focus-visible {
  outline-color: var(--avatar-ring-focus);
}
.pc-avatar:active > img {
  transform: translate(-50%, -50%) scale(0.985);
}
.pc-avatar[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}
.pc-avatar.is-uploading > img {
  box-shadow:
    0 0 0 2px var(--avatar-ring-focus),
    0 0 0 7px var(--avatar-ring-halo),
    0 12px 28px var(--avatar-ring-shadow);
}

.pc-person-copy {
  min-width: 0;
}

.pc-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pc-name-row h1 {
  min-width: 0;
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.pc-name-row img {
  width: auto;
  height: 24px;
  max-width: min(160px, 40vw);
  flex: 0 0 auto;
  object-fit: contain;
}

.pc-user-id,
.pc-bio,
.pc-meta {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

.pc-user-id {
  margin-top: 13px;
  font-size: 12px;
  font-weight: 600;
}

.pc-user-id button {
  width: 14px;
  height: 14px;
  margin-left: 5px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  -webkit-mask: url("assets/icons/line-icons/copy-outline.png") center / contain no-repeat;
  mask: url("assets/icons/line-icons/copy-outline.png") center / contain no-repeat;
  cursor: pointer;
  vertical-align: -2px;
  transition: transform 0.16s ease, background 0.16s ease;
}

.pc-user-id button:hover { transform: scale(1.1); }
.pc-user-id button.is-copied { background: #b9ffd7; transform: scale(1.08); }

.pc-bio {
  margin-top: 12px;
  font-size: 12px;
}

.pc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 15px;
  font-size: 11px;
}

.pc-level {
  justify-content: center;
  gap: 18px;
}

.pc-level-badge {
  width: 112px;
  height: 104px;
  position: relative;
  flex: 0 0 112px;
}

.pc-level-badge img {
  width: 118px;
  height: 106px;
  position: absolute;
  left: 50%;
  top: 50%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.pc-level-badge strong,
.pc-level-badge span {
  position: absolute;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  white-space: nowrap;
}

.pc-level-badge strong { top: 27px; font-size: 21px; }
.pc-level-badge span { top: 58px; font-size: 10px; }

.pc-level-progress {
  width: min(100%, 310px);
}

.pc-level-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 13px;
}

.pc-level-progress b { font-weight: 700; }

.pc-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
}

.pc-progress i {
  width: 46.8%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #ffffff;
  animation: pcProgress 0.65s ease-out both;
}

.pc-level-progress p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
}

@keyframes pcProgress { from { transform: scaleX(0); transform-origin: left; } }

.pc-wallet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(260px, 1.25fr);
  overflow: hidden;
  z-index: 4;
  margin: -96px 14px 0;
  padding: 10px;
  border: 1px solid rgba(31, 55, 94, 0.055);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(41, 77, 128, 0.045);
}

.pc-wallet > article {
  min-height: 94px;
  display: grid;
  grid-template-columns: 38px max-content 84px;
  grid-template-rows: 1fr;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 9px 6px;
  border-right: 1px solid #edf2f8;
}

.pc-wallet-icon {
  width: 38px;
  height: 38px;
  grid-row: 1;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.pc-wallet-icon.balance { background-image: url("assets/user-popup/wallet.png"); }
.pc-wallet-icon.points { background-image: url("assets/user-popup/gift.png"); }
.pc-wallet-icon.coupon { background-image: url("assets/profile/coupon-icon.png"); }
.pc-wallet-icon.redeem-code { background-image: url("assets/profile/redeem-code-icon.png"); }

.pc-wallet article p { margin: 0 0 5px; color: #52627d; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pc-wallet article strong { display: block; color: #223453; font-size: 18px; white-space: nowrap; }
.pc-wallet article:nth-child(2) strong { color: #ff8616; }
.pc-wallet article:nth-child(3) strong { color: #ef5792; }
.pc-wallet article:nth-child(4) strong { color: #7c5ce7; font-size: 14px; }
.pc-wallet article strong small { font-size: 10px; }

.pc-wallet article button {
  width: 48px;
  height: 28px;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  background: #1265ff;
  font-size: 11px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.pc-wallet article:nth-child(2) button { background: #ff941f; }
.pc-wallet article:nth-child(3) button { background: #ef5792; }
.pc-wallet article:nth-child(4) button { background: #7c5ce7; }
.pc-wallet article button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(18, 101, 255, 0.16); }

.pc-vip-card {
  min-height: 94px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-left: 14px;
  padding: 12px 12px 11px 18px;
  border: 1px solid rgba(247, 216, 153, .22);
  border-radius: 9px;
    color: #e8eaf0;
    background: #424345 url("assets/profile/member-crown-default.png") center / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 18px rgba(18, 16, 12, .12);
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.pc-vip-card:hover {
  border-color: rgba(255, 222, 158, .48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 22px rgba(18, 16, 12, .18);
  transform: translateY(-1px);
}
.pc-vip-card > div { min-width: 0; }
  .pc-vip-card span { display: block; overflow: hidden; color: #f0f2f6; font-size: 14px; font-weight: 750; letter-spacing: .02em; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
  .pc-vip-card p { overflow: hidden; margin: 6px 0 0; color: #b9bec9; font-size: 9px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
  .pc-vip-card b { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 14px; color: #313640; background: #eef1f6; box-shadow: 0 4px 10px rgba(0, 0, 0, .14); font-size: 9px; font-weight: 700; white-space: nowrap; }
  .pc-vip-card[data-vip-theme="bronze"] {
    border-color: rgba(226, 147, 82, .36);
    background-color: #929fcc;
    background-image: url("assets/profile/member-crown-quarterly-lavender.png");
  }
  .pc-vip-card[data-vip-theme="bronze"] span { color: #252e50; }
  .pc-vip-card[data-vip-theme="bronze"] p { color: #252e50; }
  .pc-vip-card[data-vip-theme="bronze"] b { border-color: rgba(255, 210, 165, .72); color: #5b2d16; background: #efb477; }
  .pc-vip-card[data-vip-theme="silver"] {
    border-color: rgba(214, 225, 241, .34);
    background-color: #aab6c6;
    background-image: url("assets/profile/member-crown-annual-steel.png");
  }
  .pc-vip-card[data-vip-theme="silver"] span { color: #303640; }
  .pc-vip-card[data-vip-theme="silver"] p { color: #49515e; }
  .pc-vip-card[data-vip-theme="silver"] b { border-color: rgba(245, 249, 255, .76); color: #26313f; background: #e1e7ef; }
  .pc-vip-card[data-vip-theme="sapphire"] {
    border: 0;
    box-shadow: none;
    background-color: #f3d273;
    background-image: url("assets/profile/member-bg-lifetime-selected.png");
  }
  .pc-vip-card[data-vip-theme="sapphire"] span { color: #503510; }
  .pc-vip-card[data-vip-theme="sapphire"] p { color: #654819; }
  .pc-vip-card[data-vip-theme="sapphire"] b { border: 0; color: #503510; background: #fff3cf; box-shadow: none; }
  .pc-vip-card[data-vip-theme="obsidian"] {
    border-color: rgba(247, 216, 153, .32);
    background-color: #252525;
    background-image: url("assets/profile/member-crown-enterprise-silver.png");
  }
  .pc-vip-card[data-vip-theme="obsidian"] span { color: #f5f5f5; }
  .pc-vip-card[data-vip-theme="obsidian"] p { color: #d6d6d6; }
  .pc-vip-card[data-vip-theme="obsidian"] b { border-color: transparent; color: #292929; background: #eeeeee; }

/* Crown card family: flat artwork without decorative borders or shadows. */
.pc-vip-card[data-vip-theme],
.pc-vip-card[data-vip-theme]:hover,
.pc-vip-card[data-vip-theme] b { border: 0; box-shadow: none; }
.pc-vip-card[data-vip-theme="default"] p { color: #e1e3e7; }
.pc-vip-card[data-vip-theme="bronze"] b { color: #252e50; background: #f0f2fc; }
.pc-vip-card[data-vip-theme="silver"] b { color: #303640; background: #fff; }

.pc-section {
  padding: 22px;
  border: 1px solid rgba(31, 55, 94, 0.055);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 7px 20px rgba(41, 77, 128, 0.035);
}

.pc-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.pc-section h2 { margin: 0; color: #172540; font-size: 16px; }
.pc-section header a { padding: 6px 11px; border-radius: 14px; color: #4f6f9d; background: #f2f6fc; font-size: 10px; }

.pc-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(88px, 1fr));
  gap: 0;
  overflow-x: auto;
}

.pc-shortcuts { min-width: 0; overflow: hidden; padding: 12px 16px; }

.pc-shortcut-grid > a {
  min-height: 96px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: #ffffff;
  text-align: center;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.pc-shortcut-grid > a::after {
  content: "";
  width: 1px;
  height: 92px;
  position: absolute;
  right: 0;
  top: 50%;
  background: rgba(207, 218, 234, 0.18);
  transform: translateY(-50%);
}

.pc-shortcut-grid > a:last-child::after { display: none; }
.pc-shortcut-grid > a:hover { z-index: 1; background: #f8fbff; transform: translateY(-2px); }
.pc-shortcut-grid > a[aria-current="page"] {
  background: transparent;
  box-shadow: none;
}

.pc-shortcut-grid > a[aria-current="page"]::before {
  content: "";
  width: 28px;
  height: 3px;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-radius: 3px 3px 0 0;
  background: #1265ff;
  transform: translateX(-50%);
}

.pc-shortcut-grid > a[aria-current="page"] strong { color: #1265db; }
.pc-shortcut-grid > a[aria-current="page"] img { filter: drop-shadow(0 7px 10px rgba(18, 101, 255, 0.18)); }
.pc-shortcut-grid img { width: 44px; height: 44px; display: block; object-fit: contain; transition: transform 0.18s ease; }
.pc-shortcut-grid > a:hover img { transform: scale(1.06); }
.pc-shortcut-grid strong { display: block; color: #243451; font-size: 12px; line-height: 1.5; }

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

/* Personal center growth dashboard */
.pc-growth-grid { display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); align-items: stretch; gap: 16px; }
.pc-growth-grid .pc-section { min-width: 0; height: 100%; padding: 20px; }
.pc-growth-grid .pc-section > header > div p,
.pc-level-overview > header p,
.pc-recommendations > header p { margin: 7px 0 0; color: #8a97a9; font-size: 12px; }
.pc-growth-grid .pc-section > header > img { width: 34px; height: 34px; object-fit: contain; }
.pc-task-rows { display: grid; }
.pc-task-rows article { min-height: 66px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 74px 72px; align-items: center; gap: 12px; border-bottom: 1px solid var(--profile-surface-border); }
.pc-task-rows article > img { width: 34px; height: 34px; object-fit: contain; }
.pc-task-rows article > div { min-width: 0; }
.pc-task-rows strong, .pc-task-rows span { display: block; }
.pc-task-rows strong { color: #2a3b54; font-size: 13px; }
.pc-task-rows span { margin-top: 4px; color: #8b98aa; font-size: 11px; }
.pc-task-rows article > b { color: #ff791a; font-size: 13px; white-space: nowrap; }
.pc-task-rows article > b small { font-size: 10px; font-weight: 500; }
.pc-task-rows article > button { height: 30px; border: 0; border-radius: 15px; color: #fff; background: #1265ff; font-size: 11px; cursor: pointer; }
.pc-task-rows article > button.is-done { color: #4f8edc; background: #eaf3ff; }
.pc-task-rows article > button:disabled { cursor: default; }
.pc-section-more { display: block; width: max-content; margin: 18px auto 0; color: #1265db; font-size: 11px; }
.pc-checkin-card > header button,
.pc-recommendations > header button { border: 0; color: #1265db; background: transparent; font-size: 11px; cursor: pointer; }
.pc-growth-checkin-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.pc-growth-checkin-days article { min-height: 116px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px solid transparent; border-radius: 7px; background: #fbfcfe; }
.pc-growth-checkin-days article.is-done { background: #f7faff; }
.pc-growth-checkin-days article.is-current { border-color: rgba(18,101,255,.38); background: #f1f6ff; }
.pc-growth-checkin-days b { color: #ff7c20; font-size: 12px; }
.pc-growth-checkin-days article.is-current b { color: #1265ff; }
.pc-growth-checkin-days img { width: 30px; height: 30px; display: block; object-fit: contain; }
.pc-growth-checkin-days span { min-height: 0; display: block; color: #687990; background: transparent; font-size: 10px; }
.pc-checkin-action { min-height: 64px; display: flex; align-items: center; justify-content: space-between; margin-top: 12px; border-top: 1px solid var(--profile-surface-border); border-bottom: 1px solid var(--profile-surface-border); }
.pc-checkin-action p { margin: 0; color: #51627a; font-size: 13px; }
.pc-checkin-action p b { color: #ff7a1c; font-size: 20px; }
.pc-checkin-action button { height: 34px; padding: 0 18px; border: 0; border-radius: 5px; color: #fff; background: #1265ff; font-size: 11px; }
.pc-checkin-action button:disabled { cursor: default; opacity: .72; }
.pc-checkin-gift { display: block; overflow: hidden; margin-top: 16px; padding: 0; border-radius: 8px; background: #e8f2ff; }
.pc-checkin-gift img { width: 100%; height: auto; min-height: 126px; display: block; object-fit: cover; }
.pc-level-overview, .pc-recommendations { padding: 24px; }
.pc-level-carousel { position: relative; padding: 0 34px; }
.pc-level-viewport { overflow: hidden; padding: 12px 4px; }
.pc-level-cards { display: flex; align-items: center; gap: 14px; transition: transform .3s ease; will-change: transform; }
.pc-level-cards article { height: 184px; display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto auto auto; align-content: center; align-items: center; flex: 0 0 calc((100% - 56px) / 5); gap: 3px 10px; padding: 18px 22px; border: 1px solid rgba(31,55,94,.055); border-radius: 8px; background: #fbfcfe; text-align: left; transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.pc-level-cards article.is-current { height: 218px; z-index: 1; border-color: rgba(18,101,255,.48); background: #f4f8ff; box-shadow: 0 8px 20px rgba(18,101,255,.08); }
.pc-level-cards img { width: 56px; height: 56px; grid-column: 1; grid-row: 1 / 3; object-fit: contain; }
.pc-level-cards article:not(.is-reached):not(.is-current) img { filter: grayscale(1); opacity: .58; }
.pc-level-cards strong { grid-column: 2; grid-row: 1; align-self: end; color: #46607f; font-size: 18px; }
.pc-level-cards span { grid-column: 2; grid-row: 2; align-self: start; color: #607189; font-size: 11px; }
.pc-level-cards small { grid-column: 1 / -1; grid-row: 3; justify-self: center; margin-top: 16px; color: #8996a8; font-size: 10px; }
.pc-level-cards article > b { grid-column: 1 / -1; grid-row: 4; justify-self: center; margin-top: 8px; padding: 5px 12px; border-radius: 13px; color: #75849a; background: #eef1f5; font-size: 9px; }
.pc-level-cards article.is-reached > b { color: #1a9c69; background: #e7f8f0; }
.pc-level-cards article.is-current > b { color: #fff; background: #1265ff; }
.pc-level-arrow { width: 32px; height: 32px; position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; padding: 0; border: 1px solid var(--profile-surface-border); border-radius: 50%; color: #71839c; background: #fff; box-shadow: var(--profile-surface-shadow); font-size: 24px; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.pc-level-arrow.prev { left: -2px; }
.pc-level-arrow.next { right: -2px; }
.pc-level-arrow:hover:not(:disabled) { color: #1265ff; border-color: rgba(18,101,255,.2); }
.pc-level-arrow:disabled { opacity: .32; cursor: default; }
.pc-level-benefits { min-height: 82px; display: flex; align-items: center; gap: 24px; margin-top: 18px; padding: 14px 20px; border-radius: 8px; background: #f7faff; }
.pc-level-benefits > strong { color: #253851; font-size: 14px; white-space: nowrap; }
.pc-level-benefits span { display: flex; align-items: center; gap: 9px; color: #596b83; font-size: 11px; white-space: nowrap; }
.pc-level-benefits span img { width: 32px; height: 32px; object-fit: contain; }
.pc-level-benefits span i, .pc-level-benefits span strong, .pc-level-benefits span small { display: block; font-style: normal; }
.pc-level-benefits span strong { color: #465973; font-size: 11px; font-weight: 600; }
.pc-level-benefits span small { margin-top: 4px; color: #8b98aa; font-size: 9px; }
.pc-level-benefits span:first-of-type small,
.pc-level-benefits span:last-of-type small { color: #1265db; }
.pc-level-benefits button { margin-left: auto; border: 0; color: #1265db; background: transparent; font-size: 10px; white-space: nowrap; cursor: pointer; }
.pc-recommend-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pc-recommend-grid a { min-width: 0; overflow: hidden; border: 1px solid rgba(31,55,94,.055); border-radius: 8px; background: #fff; }
.pc-recommend-grid img { width: 100%; height: 164px; display: block; object-fit: cover; }
.pc-recommend-grid strong { display: block; overflow: hidden; margin: 14px 14px 0; color: #263851; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.pc-recommend-grid span { display: flex; justify-content: space-between; margin: 11px 14px 14px; color: #8b98aa; font-size: 10px; }
.pc-recommend-grid span b { color: #1265ff; }
.pc-growth-invite { display: block; overflow: hidden; border-radius: 8px; background: #615cf0; }
.pc-growth-invite img { width: 100%; height: auto; display: block; object-fit: cover; }
.pc-overview { gap: 16px; padding-top: 0; }

@media (max-width: 1180px) {
  .pc-growth-grid { grid-template-columns: 1fr; }
  .pc-level-benefits { flex-wrap: wrap; gap: 14px 22px; }
  .pc-recommend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-level-cards article { flex-basis: calc((100% - 14px) / 2); }
}
@media (max-width: 760px) {
  .pc-growth-checkin-days { overflow-x: auto; grid-template-columns: repeat(7, 82px); }
  .pc-task-rows article { grid-template-columns: 36px minmax(0, 1fr) 62px; }
  .pc-task-rows article > button { grid-column: 2 / -1; width: 82px; justify-self: end; margin-bottom: 10px; }
  .pc-growth-invite img { min-height: 82px; }
}
@media (max-width: 520px) {
  .pc-recommend-grid { grid-template-columns: 1fr; }
  .pc-level-cards article { flex-basis: 100%; }
  .pc-checkin-gift img { min-height: 96px; }
}

/* Profile information 闁?single-page editing */
.profile-settings {
  overflow: hidden;
  display: grid;
  gap: 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-settings[hidden],
.pc-overview[hidden] {
  display: none !important;
}

.pc-overview {
  display: grid;
  gap: 16px;
  padding-top: 0;
}

.ps-layout { display: grid; grid-template-columns: minmax(610px, 1.35fr) minmax(430px, 0.95fr); align-items: start; gap: 14px; padding: 0; background: transparent; }
.ps-card { padding: 24px 26px; border: 1px solid #eaf0f8; border-radius: 8px; background: #ffffff; }
.ps-card > header { display: flex; align-items: center; margin-bottom: 16px; }
.ps-card h3 { margin: 0; color: #243451; font-size: 14px; font-weight: 600; line-height: 22px; }
.ps-profile-body { display: block; }

.ps-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.ps-field { min-width: 0; position: relative; display: grid; gap: 6px; }
.ps-field-wide { grid-column: 1 / -1; }
.ps-field > span:first-child { color: #303133; font-size: 12px; font-weight: 600; line-height: 18px; }
.ps-field > span:first-child b { color: #ff5c72; }
.ps-field input, .ps-field select, .ps-field textarea { width: 100%; border: 1px solid #DCDFE6; border-radius: 5px; outline: none; color: #303133; background: #ffffff; font: inherit; font-size: 12px; font-weight: 500; line-height: 18px; transition: border-color .16s ease, box-shadow .16s ease; }
.ps-field input, .ps-field select { height: 40px; padding: 0 12px; }
.ps-field textarea { height: 96px; padding: 10px 46px 10px 12px; resize: none; line-height: 1.6; }
.ps-bio-field input { padding-right: 52px; }
.ps-field input:focus, .ps-field select:focus, .ps-field textarea:focus { border-color: #5b95ed; box-shadow: 0 0 0 3px rgba(18, 101, 255, .08); }
.ps-field input[readonly] { color: #637188; border-color: #e1e6ee; background: #f7f8fa; cursor: default; }
.ps-account-field { padding-bottom: 18px; }
.ps-account-field > em { position: absolute; left: 1px; bottom: -1px; color: #8b98aa; font-size: 10px; font-style: normal; line-height: 16px; }
.ps-field > small { position: absolute; right: 10px; bottom: 10px; color: #909399; font-size: 9px; }
.ps-field > small i { font-style: normal; }
.ps-main, .ps-side { display: grid; align-content: start; gap: 14px; }
.ps-phone-row, .ps-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px; }
.ps-password-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px; }
.ps-password-mask { letter-spacing: 3px; }
.ps-code-row { margin-top: 10px; }
.ps-code-row[hidden] { display: none; }
.ps-secondary { min-width: 92px; height: 40px; padding: 0 18px; border: 1px solid #A9C9F7; border-radius: 6px; color: #1265db; background: #ffffff; box-shadow: none; font-size: 12px; font-weight: 600; cursor: pointer; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }
.ps-secondary:hover { color: #ffffff; border-color: #1265ff; background: #1265ff; box-shadow: none; transform: translateY(-1px); }
.ps-secondary:focus-visible { outline: 3px solid rgba(18, 101, 255, .15); outline-offset: 2px; }
.ps-code-button { height: 40px; padding: 0 15px; border: 1px solid #cfe0f6; border-radius: 5px; color: #2671dd; background: #f5f9ff; font-size: 10px; font-weight: 600; cursor: pointer; }
.ps-code-button { min-width: 88px; }
.ps-code-button:disabled { color: #8b99ad; cursor: default; }
.ps-password-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ps-password-input { position: relative; display: block; }
.ps-password-input input { padding-right: 34px; }
.ps-password-input button { width: 34px; height: 38px; position: absolute; right: 1px; bottom: 1px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ps-password-input button img { width: 15px; height: 15px; opacity: .55; }

.ps-bindings-card > header { margin-bottom: 12px; }
.ps-bindings-card > header p { margin: 2px 0 0; color: #8b98aa; font-size: 11px; line-height: 18px; }
.ps-binding-list { display: grid; gap: 10px; }
.ps-binding-item { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ps-binding-item[hidden] { display: none !important; }
.ps-binding-icon { width: 40px; height: 40px; display: block; overflow: hidden; border: 0; border-radius: 10px; background: transparent; }
.ps-binding-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ps-binding-copy { min-width: 0; display: grid; gap: 2px; }
.ps-binding-copy strong { color: #243451; font-size: 13px; line-height: 20px; }
.ps-binding-copy small { overflow: hidden; color: #7d8b9e; font-size: 11px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.ps-binding-item > button { min-width: 92px; height: 40px; padding: 0 16px; border: 1px solid #a9c9f7; border-radius: 6px; color: #1265db; background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.ps-binding-item > button:hover { color: #fff; border-color: #1265ff; background: #1265ff; }
.ps-binding-item > button.is-danger { color: #d9485f; border-color: #f1bdc5; }
.ps-binding-item > button.is-danger:hover { color: #fff; border-color: #d9485f; background: #d9485f; }
.ps-binding-item > button:focus-visible { outline: 3px solid rgba(18, 101, 255, .15); outline-offset: 2px; }
.ps-binding-item > button:disabled { opacity: .55; cursor: wait; }
.ps-binding-empty { margin: 0; padding: 12px; border-radius: 6px; color: #7d8b9e; background: #f7f9fc; font-size: 11px; line-height: 18px; }
.ps-binding-status { min-height: 18px; margin: 8px 0 -6px; color: #d9485f; font-size: 11px; line-height: 18px; }
.ps-binding-status[data-state="success"] { color: #14945f; }

.ps-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 0 0; border: 0; background: transparent; }
.ps-form-status { min-height: 20px; margin: 0 auto 0 0; color: #f56c6c; font-size: 12px; line-height: 20px; }
.ps-form-status[data-state="success"] { color: #14945f; }
.ps-actions button { height: 40px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ps-save { min-width: 126px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 17px; border: 0; color: #fff; background: #1265ff; box-shadow: 0 6px 14px rgba(18, 101, 255, .18); }
.ps-save img { width: 14px; height: 14px; filter: brightness(0) invert(1); }
.ps-save:hover { background: #0759ee; transform: translateY(-1px); }
.ps-save.is-saved { background: #18aa6c; }
.ps-save:disabled { opacity: .68; cursor: wait; transform: none; }

/* Personal center modules */
[data-profile-view][hidden],
[data-filter-list] [hidden] { display: none !important; }

.account-module { display: grid; gap: 16px; min-width: 0; scroll-margin-top: 72px; }
.profile-settings, .pc-overview { scroll-margin-top: 72px; }
.am-page-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.am-page-head h2 { margin: 0; color: #1f2f49; font-size: 20px; line-height: 1.3; }
.am-page-head p { margin: 6px 0 0; color: #8b98aa; font-size: 12px; }
.am-primary, .am-secondary { height: 38px; padding: 0 18px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.am-primary { border: 1px solid #1265ff; color: #fff; background: #1265ff; }
.am-primary:hover { background: #0759ee; }
.am-secondary { border: 1px solid #cbdcf2; color: #2b6fce; background: #fff; }
.am-secondary:hover { border-color: #83afea; color: #1265db; background: #f7faff; }

.am-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.am-stats article { min-height: 102px; padding: 18px 20px; border: 1px solid #e8eef6; border-radius: 8px; background: #fff; }
.am-stats span { display: block; color: #76859b; font-size: 11px; }
.am-stats strong { display: block; margin-top: 9px; color: #213451; font-size: 23px; line-height: 1.1; }
.am-stats small { display: block; margin-top: 8px; color: #8f9daf; font-size: 10px; }
.am-stats article:nth-child(2) strong { color: #1265db; }
.am-stats article:nth-child(3) strong { color: #7658df; }
.am-stats article:nth-child(4) strong { color: #ef7a21; }
.am-stats.compact article { min-height: 86px; padding: 15px 18px; }
.am-stats.compact strong { font-size: 20px; }

.am-card { min-width: 0; overflow: hidden; border: 1px solid #e8eef6; border-radius: 8px; background: #fff; }
.am-tabs { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 0 18px; border-bottom: 1px solid #edf1f6; }
.am-tabs button { min-width: max-content; height: 50px; position: relative; padding: 0 14px; border: 0; color: #68778d; background: transparent; font-size: 12px; cursor: pointer; }
.am-tabs button b { margin-left: 4px; color: #9ba8b9; font-size: 10px; }
.am-tabs button::after { content: ""; height: 3px; position: absolute; left: 14px; right: 14px; bottom: 0; border-radius: 3px 3px 0 0; background: transparent; }
.am-tabs button.is-active { color: #1265db; font-weight: 600; }
.am-tabs button.is-active::after { background: #1265ff; }
.am-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #f0f3f7; }
.am-toolbar select { width: 128px; height: 36px; padding: 0 10px; border: 1px solid #DCDFE6; border-radius: 5px; color: #5e6c80; background: #fff; font-size: 11px; outline: none; }
.am-search { width: 240px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #DCDFE6; border-radius: 5px; background: #fff; }
.am-search img { width: 15px; height: 15px; opacity: .55; }
.am-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #303133; background: transparent; font-size: 11px; }

.am-work-list { display: grid; }
.am-work-item { min-height: 116px; display: grid; grid-template-columns: 132px minmax(220px, 1.4fr) minmax(250px, .9fr) 86px 110px; align-items: center; gap: 18px; padding: 14px 18px; border-bottom: 1px solid #edf1f6; }
.am-work-item:last-child { border-bottom: 0; }
.am-work-item > img { width: 132px; height: 82px; border-radius: 6px; object-fit: cover; }
.am-work-main { min-width: 0; }
.am-work-main h3 { overflow: hidden; margin: 6px 0 0; color: #253752; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.am-work-main p { margin: 8px 0 0; color: #8b98aa; font-size: 10px; }
.am-type { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px; font-size: 9px; font-weight: 600; }
.am-type.blue { color: #246dd1; background: #eaf3ff; }
.am-type.cyan { color: #1592a4; background: #e8f8fa; }
.am-type.purple { color: #7353d5; background: #f0ebff; }
.am-type.orange { color: #d97918; background: #fff2e3; }
.am-work-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.am-work-data span { color: #8d9aad; font-size: 9px; text-align: center; }
.am-work-data b { display: block; margin-top: 6px; color: #354761; font-size: 12px; }
.am-status { display: inline-flex; align-items: center; justify-content: center; width: max-content; min-width: 58px; padding: 5px 8px; border-radius: 12px; font-size: 9px; font-weight: 600; white-space: nowrap; }
.am-status.success { color: #159765; background: #e8f8f0; }
.am-status.warning { color: #d47a19; background: #fff3e5; }
.am-status.danger { color: #e15b65; background: #fff0f1; }
.am-status.purple { color: #7353d5; background: #f0ebff; }
.am-plain-state { display: inline; padding: 0; border: 0; background: transparent; font-size: 11px; line-height: 1.5; }
.am-plain-state.success { color: #159765; }
.am-plain-state.muted { color: #909399; }
.am-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.am-row-actions button, .am-text-btn { padding: 5px 7px; border: 0; color: #61728b; background: transparent; font-size: 10px; cursor: pointer; }
.am-row-actions button:hover, .am-text-btn:hover, .am-text-btn.primary { color: #1265db; }

.am-resource-grid { display: grid; gap: 0; }
.am-resource { min-height: 130px; display: grid; grid-template-columns: 150px minmax(0, 1fr) 96px; align-items: center; gap: 18px; padding: 16px 20px; border-bottom: 1px solid #edf1f6; }
.am-resource:last-child { border-bottom: 0; }
.am-resource > img { width: 150px; height: 94px; border-radius: 6px; object-fit: cover; }
.am-resource > div { min-width: 0; }
.am-resource h3 { margin: 7px 0 0; color: #243650; font-size: 13px; }
.am-resource p { margin: 9px 0 0; color: #6f7f95; font-size: 10px; }
.am-resource small { display: block; margin-top: 7px; color: #98a4b5; font-size: 9px; }
.am-resource > button { height: 34px; border: 1px solid #b8d2f6; border-radius: 5px; color: #1265db; background: #fff; font-size: 10px; font-weight: 600; cursor: pointer; }
.am-resource > button:hover { color: #fff; border-color: #1265ff; background: #1265ff; }

.am-table-wrap { overflow-x: auto; }
.am-table { width: 100%; border-collapse: collapse; color: #5f6f85; font-size: 10px; }
.am-table th { height: 44px; padding: 0 16px; color: #8794a6; background: #f8fafc; font-weight: 500; text-align: left; white-space: nowrap; }
.am-table td { min-width: 110px; height: 76px; padding: 10px 16px; border-bottom: 1px solid #edf1f6; vertical-align: middle; }
.am-table tbody tr:last-child td { border-bottom: 0; }
.am-table td:first-child { min-width: 160px; }
.am-table td:last-child { min-width: 140px; white-space: nowrap; }
.am-table td strong { display: block; color: #31435d; font-size: 10px; }
.am-table td small { display: block; margin-top: 6px; color: #9aa6b5; font-size: 9px; }
.am-table td > b { color: #243750; font-size: 11px; }

.am-favorite-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 18px; }
.am-favorite-grid article { min-width: 0; position: relative; padding: 10px 10px 14px; border: 1px solid #edf1f6; border-radius: 7px; background: #fff; }
.am-favorite-grid article > img { width: 100%; height: 126px; display: block; margin-bottom: 10px; border-radius: 5px; object-fit: cover; }
.am-favorite-grid h3 { overflow: hidden; margin: 8px 0 0; color: #283a54; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.am-favorite-grid p { margin: 8px 0 0; color: #8d9aab; font-size: 9px; }
.am-favorite-grid article > button { margin-top: 12px; padding: 0; border: 0; color: #718199; background: transparent; font-size: 9px; cursor: pointer; }
.am-favorite-grid article > button:hover { color: #e15b65; }

.am-invite-hero { min-height: 150px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 34px; border-radius: 8px; color: #fff; background: #1265ff url("assets/profile/invite-bg.png") center / cover no-repeat; }
.am-invite-hero span { font-size: 11px; opacity: .8; }
.am-invite-hero strong { display: block; margin-top: 8px; font-size: 28px; letter-spacing: 2px; }
.am-invite-hero p { margin: 9px 0 0; font-size: 10px; opacity: .82; }
.am-invite-hero button { height: 38px; padding: 0 20px; border: 0; border-radius: 5px; color: #1265db; background: #fff; font-size: 11px; font-weight: 600; cursor: pointer; }
.am-invite-link-card { padding: 24px 26px; border: 1px solid #e5ebf3; border-radius: 10px; background: #fff; box-shadow: 0 6px 20px rgba(38, 70, 112, .035); }
.am-invite-link-head h3 { margin: 0; color: #243650; font-size: 16px; }
.am-invite-link-head p { margin: 7px 0 0; color: #7d8ca1; font-size: 11px; }
.am-invite-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 20px; }
.am-invite-link-row span { min-width: 0; height: 42px; display: flex; align-items: center; overflow: hidden; padding: 0 14px; border: 1px solid #DCDFE6; border-radius: 6px; color: #4d5f78; background: #fbfcfe; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.am-invite-link-row button { min-width: 96px; height: 42px; padding: 0 18px; border: 1px solid #1265ff; border-radius: 6px; color: #fff; background: #1265ff; font-size: 12px; font-weight: 600; cursor: pointer; }
.am-invite-link-row button:hover { background: #0759ee; }
.am-invite-link-card > small { display: block; margin-top: 12px; color: #909cad; font-size: 10px; }
.am-section-title { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #edf1f6; }
.am-section-title h3 { margin: 0; color: #253650; font-size: 14px; }
.am-section-title button { border: 0; color: #1265db; background: transparent; font-size: 10px; cursor: pointer; }
.am-section-summary { margin: 0; color: #7d8ca1; font-size: 11px; }
.am-section-summary b { color: #1265db; font-size: 12px; }

.am-history { padding: 4px 20px 16px; }
.am-history > section > header { min-height: 52px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf1f6; }
.am-history > section > header h3 { margin: 0; color: #34465f; font-size: 13px; }
.am-history > section > header span { color: #9aa6b5; font-size: 9px; }
.am-history article { min-height: 100px; display: grid; grid-template-columns: 126px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid #f0f3f7; }
.am-history article > img { width: 126px; height: 78px; border-radius: 6px; object-fit: cover; }
.am-history h4 { margin: 6px 0 0; color: #2d3f59; font-size: 12px; }
.am-history p { margin: 7px 0 0; color: #8e9bad; font-size: 9px; }
.am-history article > button { border: 0; color: #8c99aa; background: transparent; font-size: 9px; cursor: pointer; }
.am-history article > button:hover { color: #e15b65; }

.am-notification-list { display: grid; }
.am-notification-list article { min-height: 98px; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 72px 66px; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid #edf1f6; background: #fff; }
.am-notification-list article:last-child { border-bottom: 0; }
.am-notification-list article.is-unread { background: #f8fbff; }
.am-notification-list article > i { width: 6px; height: 6px; position: absolute; left: 8px; top: 19px; border-radius: 50%; background: transparent; }
.am-notification-list article.is-unread > i { background: #1265ff; }
.am-notification-list article > img { width: 42px; height: 42px; object-fit: contain; }
.am-notification-list article > div { min-width: 0; }
.am-notification-list article span { color: #6a7b91; font-size: 9px; }
.am-notification-list article h3 { overflow: hidden; margin: 5px 0 0; color: #2a3c56; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.am-notification-list article p { overflow: hidden; margin: 7px 0 0; color: #8d9aab; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.am-notification-list time { color: #9ba6b5; font-size: 9px; text-align: right; }
.am-notification-list article > button { border: 0; color: #7a899d; background: transparent; font-size: 9px; cursor: pointer; }
.am-notification-list article.is-unread > button { color: #1265db; }

.am-task-list { display: grid; }
.am-task-list article { min-height: 112px; display: grid; grid-template-columns: 58px minmax(260px, 1.4fr) minmax(190px, .8fr) 72px 88px; align-items: center; gap: 16px; padding: 15px 18px; border-bottom: 1px solid #edf1f6; }
.am-task-list article:last-child { border-bottom: 0; }
.am-task-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 8px; background: #f1f6ff; }
.am-task-icon img { width: 44px; height: 44px; object-fit: contain; }
.am-task-main { min-width: 0; }
.am-task-main > span { color: #7c8ba0; font-size: 9px; }
.am-task-main h3 { overflow: hidden; margin: 7px 0 0; color: #283a54; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.am-task-main p { margin: 7px 0 0; color: #94a0b0; font-size: 9px; }
.am-progress span { display: flex; justify-content: space-between; color: #8391a4; font-size: 9px; }
.am-progress span b { color: #315c9e; }
.am-progress > i { height: 5px; display: block; overflow: hidden; margin-top: 7px; border-radius: 999px; background: #e8edf4; }
.am-progress > i b { height: 100%; display: block; border-radius: inherit; background: #1265ff; }
.am-progress small { display: block; margin-top: 7px; color: #99a4b3; font-size: 8px; }
.am-task-list article > button { height: 30px; border: 1px solid #c9daf0; border-radius: 5px; color: #2c6fcf; background: #fff; font-size: 9px; cursor: pointer; }
.am-task-list article > button:hover { color: #fff; border-color: #1265ff; background: #1265ff; }

/* Account modules visual polish */
.account-module { gap: 20px; padding-bottom: 8px; }
.am-page-head { min-height: 72px; padding: 2px 4px; }
.am-page-head h2 { color: #172540; font-size: 22px; font-weight: 700; letter-spacing: -.2px; }
.am-page-head p { margin-top: 8px; color: #7d8ca1; font-size: 13px; line-height: 1.5; }
.am-primary, .am-secondary { height: 40px; padding: 0 20px; border-radius: 6px; font-size: 13px; }

.am-stats { gap: 16px; }
.am-stats article { min-height: 112px; position: relative; overflow: hidden; padding: 20px 22px; border-color: #e5ebf3; border-radius: 10px; box-shadow: 0 5px 16px rgba(38, 70, 112, .035); }
.am-stats article::before { content: ""; width: 34px; height: 3px; position: absolute; left: 22px; top: 0; border-radius: 0 0 3px 3px; background: #94bfff; }
.am-stats article:nth-child(2)::before { background: #71a6f7; }
.am-stats article:nth-child(3)::before { background: #a68af2; }
.am-stats article:nth-child(4)::before { background: #f7aa59; }
.am-stats span { color: #6f7f95; font-size: 12px; }
.am-stats strong { margin-top: 11px; font-size: 25px; letter-spacing: -.3px; }
.am-stats small { margin-top: 9px; font-size: 11px; }
.am-stats.compact article { min-height: 96px; padding: 18px 20px; }
.am-stats.compact strong { font-size: 22px; }

.am-card { border-color: #e5ebf3; border-radius: 10px; box-shadow: 0 6px 20px rgba(38, 70, 112, .035); }
.am-tabs { min-height: 54px; gap: 8px; padding: 0 22px; }
.am-tabs button { height: 54px; padding: 0 12px; color: #65758b; font-size: 13px; }
.am-tabs button b { font-size: 11px; }
.am-tabs button::after { left: 12px; right: 12px; }
.am-toolbar { padding: 16px 22px; background: #fbfcfe; }
.am-toolbar select, .am-search { height: 38px; }
.am-search { width: 260px; }
.am-search input, .am-toolbar select { font-size: 12px; }

.am-work-item { min-height: 128px; padding: 18px 22px; transition: background-color .16s ease; }
.am-work-item:hover { background: #f9fbfe; }
.am-work-item > img { height: 88px; box-shadow: 0 4px 12px rgba(35, 58, 92, .08); }
.am-work-main h3 { margin-top: 8px; font-size: 14px; }
.am-work-main p { margin-top: 9px; font-size: 11px; }
.am-type { padding: 5px 9px; border-radius: 5px; font-size: 10px; }
.am-work-data span { font-size: 10px; }
.am-work-data b { margin-top: 7px; font-size: 13px; }
.am-status { min-width: 62px; padding: 6px 10px; font-size: 10px; }
.am-row-actions button, .am-text-btn { font-size: 11px; }

.am-resource { min-height: 144px; padding: 20px 24px; transition: background-color .16s ease; }
.am-resource:hover { background: #f9fbfe; }
.am-resource > img { width: 164px; height: 102px; box-shadow: 0 4px 12px rgba(35, 58, 92, .08); }
.am-resource h3 { margin-top: 9px; font-size: 14px; }
.am-resource p { margin-top: 10px; font-size: 11px; }
.am-resource small { margin-top: 8px; font-size: 10px; }
.am-resource > button { height: 36px; font-size: 11px; }

.am-table { font-size: 11px; }
.am-table th { height: 50px; padding: 0 20px; color: #718096; font-size: 11px; }
.am-table td { height: 84px; padding: 12px 20px; transition: background-color .16s ease; }
.am-table tbody tr:hover td { background: #f9fbfe; }
.am-table td strong, .am-table td > b { font-size: 12px; }
.am-table td small { margin-top: 7px; font-size: 10px; }

.am-favorite-grid { gap: 18px; padding: 22px; }
.am-favorite-grid article { padding: 12px 12px 16px; border-radius: 8px; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.am-favorite-grid article:hover { border-color: #cfdff3; box-shadow: 0 10px 24px rgba(38, 70, 112, .08); transform: translateY(-2px); }
.am-favorite-grid article > img { height: 142px; margin-bottom: 12px; }
.am-favorite-grid h3 { margin-top: 10px; font-size: 14px; }
.am-favorite-grid p { margin-top: 9px; font-size: 11px; }
.am-favorite-grid article > button { margin-top: 14px; font-size: 10px; }

.am-invite-hero { min-height: 166px; padding: 28px 38px; border-radius: 10px; box-shadow: 0 10px 28px rgba(18, 101, 255, .12); }
.am-invite-hero span { font-size: 12px; }
.am-invite-hero strong { margin-top: 10px; font-size: 30px; }
.am-invite-hero p { margin-top: 11px; font-size: 11px; }
.am-invite-hero button { height: 40px; padding: 0 22px; font-size: 12px; }
.am-section-title { min-height: 64px; padding: 0 22px; }
.am-section-title h3 { font-size: 15px; }
.am-section-title button { font-size: 11px; }

.am-history { padding: 6px 24px 20px; }
.am-history > section > header { min-height: 58px; }
.am-history > section > header h3 { font-size: 14px; }
.am-history > section > header span { font-size: 10px; }
.am-history article { min-height: 112px; gap: 18px; padding: 14px 0; }
.am-history article > img { width: 138px; height: 86px; box-shadow: 0 4px 12px rgba(35, 58, 92, .07); }
.am-history h4 { margin-top: 8px; font-size: 14px; }
.am-history p { margin-top: 8px; font-size: 11px; }
.am-history article > button { font-size: 10px; }

.am-notification-list article { min-height: 112px; grid-template-columns: 50px minmax(0, 1fr) 78px 76px; gap: 16px; padding: 16px 24px; transition: background-color .16s ease; }
.am-notification-list article:hover { background: #f9fbfe; }
.am-notification-list article > img { width: 46px; height: 46px; }
.am-notification-list article span { font-size: 10px; }
.am-notification-list article h3 { margin-top: 7px; font-size: 14px; }
.am-notification-list article p { margin-top: 9px; font-size: 11px; }
.am-notification-list time, .am-notification-list article > button { font-size: 10px; }

.am-task-list article { min-height: 126px; padding: 18px 22px; transition: background-color .16s ease; }
.am-task-list article:hover { background: #f9fbfe; }
.am-task-icon { width: 56px; height: 56px; border-radius: 10px; }
.am-task-icon img { width: 48px; height: 48px; }
.am-task-main > span { font-size: 10px; }
.am-task-main h3 { margin-top: 8px; font-size: 14px; }
.am-task-main p { margin-top: 9px; font-size: 10px; }
.am-progress span { font-size: 10px; }
.am-progress small { margin-top: 8px; font-size: 9px; }
.am-task-list article > button { height: 34px; font-size: 10px; }

.am-toast { max-width: min(360px, calc(100vw - 32px)); position: fixed; left: 50%; bottom: 38px; z-index: 300; padding: 11px 18px; border-radius: 6px; color: #fff; background: rgba(27, 42, 65, .94); box-shadow: 0 10px 30px rgba(20, 39, 67, .2); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .18s ease, transform .18s ease; }
.am-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Account security modal */
.security-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .18s ease, visibility .18s ease;
}

.security-modal.is-open { visibility: visible; opacity: 1; }
.security-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(17, 30, 52, .42); cursor: default; }
.security-dialog {
  width: min(520px, calc(100vw - 32px));
  position: relative;
  overflow: hidden;
  border: 1px solid #e5e9f2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(30, 53, 88, .2);
  transform: translateY(12px) scale(.985);
  transition: transform .18s ease;
}
.security-modal.is-open .security-dialog { transform: translateY(0) scale(1); }
.security-dialog-head { min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid #ebeef5; }
.security-dialog-head h2 { margin: 0; color: #303133; font-size: 18px; font-weight: 600; }
.security-dialog-head button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.security-dialog-head button:hover { background: #f5f7fa; }
.security-dialog-head img { width: 18px; height: 18px; opacity: .58; }
.security-panel { padding: 22px 24px 24px; }
.security-panel[hidden], .security-method-panel[hidden], [data-password-verify-step][hidden], [data-password-reset-step][hidden] { display: none !important; }
.security-lead { margin: 0 0 20px; color: #606266; font-size: 13px; line-height: 1.6; }
.security-field { display: grid; gap: 8px; margin-bottom: 16px; }
.security-field > span:first-child { color: #303133; font-size: 14px; font-weight: 600; line-height: 20px; }
.security-field input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #DCDFE6; border-radius: 5px; outline: none; color: #303133; background: #fff; font-size: 14px; transition: border-color .16s ease, box-shadow .16s ease; }
.security-field input:focus { border-color: #5b95ed; box-shadow: 0 0 0 3px rgba(18, 101, 255, .08); }
.security-field input[readonly] { color: #606266; background: #f7f8fa; }
.security-code-row { display: grid; grid-template-columns: minmax(0, 1fr) 108px; align-items: end; gap: 10px; }
.security-code-row > button { height: 40px; margin-bottom: 16px; border: 1px solid #b8d2f6; border-radius: 5px; color: #1265db; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.security-code-row > button:disabled { color: #909399; border-color: #DCDFE6; cursor: default; }
.security-status { min-height: 20px; margin: -4px 0 4px; color: #f56c6c; font-size: 12px; line-height: 20px; }
.security-status[data-state="success"] { color: #14945f; }
.security-panel footer { display: flex; justify-content: flex-end; padding-top: 8px; }
.security-primary { min-width: 104px; height: 40px; padding: 0 18px; border: 0; border-radius: 5px; color: #fff; background: #1265ff; font-size: 14px; font-weight: 600; cursor: pointer; }
.security-primary:hover { background: #0759ee; }
.security-primary:disabled { opacity: .68; cursor: wait; }
.security-method-tabs { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; padding: 4px; border-radius: 6px; background: #f2f4f7; }
.security-method-tabs button { height: 36px; border: 0; border-radius: 4px; color: #606266; background: transparent; font-size: 13px; cursor: pointer; }
.security-method-tabs button[aria-selected="true"] { color: #1265db; background: #fff; box-shadow: 0 2px 8px rgba(38, 72, 117, .08); font-weight: 600; }
.security-password-input { position: relative; display: block; }
.security-password-input input { padding-right: 42px; }
.security-password-input button { width: 40px; height: 38px; position: absolute; right: 1px; bottom: 1px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.security-password-input button img { width: 16px; height: 16px; opacity: .55; }

@media (max-width: 1250px) {
  .ps-layout { grid-template-columns: 1fr; }
  .ps-password-fields { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
  .am-work-item { grid-template-columns: 116px minmax(200px, 1fr) minmax(210px, .8fr) 70px 94px; gap: 12px; }
  .am-work-item > img { width: 116px; height: 76px; }
  .am-favorite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-task-list article { grid-template-columns: 54px minmax(230px, 1fr) minmax(170px, .8fr) 70px 82px; gap: 12px; }
}

@media (max-width: 760px) {
  .ps-fields, .ps-password-fields { grid-template-columns: 1fr; }
  .ps-field-wide { grid-column: auto; }
  .ps-binding-item { grid-template-columns: 40px minmax(0, 1fr); }
  .ps-binding-item > button { grid-column: 2; justify-self: start; }
  .security-dialog-head { padding: 0 18px; }
  .security-panel { padding: 20px 18px; }
  .am-page-head { align-items: flex-start; }
  .am-page-head h2 { font-size: 18px; }
  .am-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-tabs { padding: 0 10px; }
  .am-toolbar { align-items: stretch; flex-direction: column; }
  .am-search, .am-toolbar select { width: 100%; }
  .am-work-item { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .am-work-item > img { width: 92px; height: 66px; }
  .am-work-data { grid-column: 2 / -1; }
  .am-row-actions { grid-column: 2 / -1; justify-content: flex-start; }
  .am-resource { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .am-resource > img { width: 104px; height: 76px; }
  .am-resource > button { grid-column: 2; width: 96px; }
  .am-favorite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .am-favorite-grid article > img { height: 110px; }
  .am-invite-hero { align-items: flex-start; flex-direction: column; padding: 22px; }
  .am-invite-link-card { padding: 20px; }
  .am-invite-link-row { grid-template-columns: 1fr; }
  .am-invite-link-row button { width: 100%; }
  .am-history { padding-right: 14px; padding-left: 14px; }
  .am-history article { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; }
  .am-history article > img { width: 92px; height: 64px; }
  .am-notification-list article { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 12px 14px; }
  .am-notification-list time { display: none; }
  .am-task-list article { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding: 13px; }
  .am-task-icon { width: 44px; height: 44px; }
  .am-task-icon img { width: 38px; height: 38px; }
  .am-progress { grid-column: 2 / -1; }
  .am-task-list article > button { grid-column: 2; width: 92px; }
}

@media (max-width: 520px) {
  .am-page-head { flex-direction: column; }
  .am-stats { grid-template-columns: 1fr; }
  .am-favorite-grid { grid-template-columns: 1fr; }
  .am-work-item { grid-template-columns: 76px minmax(0, 1fr); }
  .am-work-item > img { width: 76px; height: 58px; }
  .am-work-item > .am-status { grid-column: 2; }
  .am-work-data, .am-row-actions { grid-column: 1 / -1; }
  .am-history article { grid-template-columns: 76px minmax(0, 1fr); }
  .am-history article > img { width: 76px; height: 56px; }
  .am-history article > button { grid-column: 2; justify-self: start; }
}

.pc-recent,
.pc-notices { min-width: 0; }

.pc-recent > header a,
.pc-notices > header a { padding: 4px 0; color: #4d8bea; background: transparent; font-size: 12px; font-weight: 600; }

.pc-recent-list,
.pc-notice-list { display: grid; }

.pc-recent-item {
  min-height: 78px;
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(226, 234, 245, 0.72);
}

.pc-recent-item,
.pc-notice-item { transition: background-color 0.16s ease; }
.pc-recent-item:hover,
.pc-notice-item:hover { background: #f8fbff; }

.pc-recent-item:last-child,
.pc-notice-item:last-child { border-bottom: 0; }
.pc-recent-item > img { width: 106px; height: 64px; border-radius: 6px; object-fit: cover; box-shadow: 0 4px 10px rgba(25, 43, 75, 0.12); }
.pc-recent-item > span { min-width: 0; }
.pc-recent-item strong { display: inline; color: #253653; font-size: 12px; line-height: 1.4; }
.pc-recent-item em { display: inline-block; margin-left: 10px; padding: 4px 8px; border-radius: 5px; font-size: 9px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.pc-recent-item em.blue { color: #2473e7; background: #eaf3ff; }
.pc-recent-item em.cyan { color: #1499ac; background: #e3f9fb; }
.pc-recent-item em.orange { color: #e58b21; background: #fff1df; }
.pc-recent-item time { align-self: center; color: #8f9db2; font-size: 10px; white-space: nowrap; }

.pc-notice-item {
  min-height: 78px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(226, 234, 245, 0.72);
}

.pc-notice-item > img { width: 44px; height: 44px; display: block; object-fit: contain; }
.pc-notice-item > span { min-width: 0; }
.pc-notice-item strong { display: block; color: #253653; font-size: 13px; }
.pc-notice-item small { display: block; overflow: hidden; margin-top: 9px; color: #8998ae; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.pc-notice-item small b { color: #ff5c72; font-weight: 700; }
.pc-notice-item time { align-self: center; padding-top: 0; color: #8f9db2; font-size: 10px; white-space: nowrap; }

.pc-dashboard-right { display: grid; gap: 18px; }
.pc-growth { display: flex; flex-direction: column; }
.pc-growth-main { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.2fr); gap: 18px; align-items: center; }
.pc-score > span { color: #73839c; font-size: 10px; }
.pc-score > strong { display: flex; align-items: center; gap: 10px; margin-top: 7px; color: #1265ff; font-size: 30px; }
.pc-score > strong b { padding: 5px 8px; border-radius: 14px; color: #16a86a; background: #e6f8ef; font-size: 11px; }
.pc-score > small { display: block; margin-top: 6px; color: #75859e; font-size: 10px; }
.pc-score > div { margin-top: 18px; }
.pc-score > div > em { color: #52627d; font-size: 9px; font-style: normal; }
.pc-score > div > em:nth-child(2) { float: right; }
.pc-score > div > i { height: 5px; display: block; overflow: hidden; margin-top: 6px; border-radius: 999px; background: #e6ebf3; }
.pc-score > div > i b { width: 46%; height: 100%; display: block; background: #1265ff; }
.pc-score > p { margin: 8px 0 0; color: #7b8aa2; font-size: 10px; }

.pc-radar { min-height: 230px; position: relative; }
.pc-radar-shape { width: 152px; height: 152px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: repeating-radial-gradient(circle, transparent 0 24px, #dce7f7 25px 26px); clip-path: polygon(50% 0, 98% 35%, 80% 94%, 20% 94%, 2% 35%); }
.pc-radar-shape::before { content: ""; position: absolute; inset: 26px 23px 20px; background: rgba(77, 133, 255, 0.22); clip-path: polygon(50% 0, 96% 34%, 76% 90%, 20% 86%, 8% 37%); }
.pc-radar-shape::after { content: ""; width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #4b83ff; box-shadow: 0 6px 15px rgba(75, 131, 255, 0.28); transform: translate(-50%, -50%); }
.pc-radar span { position: absolute; color: #667792; font-size: 9px; text-align: center; }
.pc-radar span b { display: block; margin-top: 3px; color: #243755; font-size: 11px; }
.pc-radar .top { left: 50%; top: 3px; transform: translateX(-50%); }
.pc-radar .right-top { right: 0; top: 74px; }
.pc-radar .right-bottom { right: 24px; bottom: 7px; }
.pc-radar .left-bottom { left: 24px; bottom: 7px; }
.pc-radar .left-top { left: 0; top: 74px; }
.pc-growth-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; padding-top: 18px; }
.pc-growth-stats span { padding: 14px 8px; border-radius: 6px; color: #7b8aa2; background: #f5f8fc; font-size: 10px; text-align: center; }
.pc-growth-stats strong { display: block; margin-top: 7px; color: #184da9; font-size: 17px; }
.pc-growth-stats small { font-size: 9px; }

.pc-checkin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pc-checkin-head p { margin: 0; color: #63738d; font-size: 12px; }
.pc-checkin-head p strong { color: #1265ff; font-size: 20px; }
.pc-checkin-head button { height: 28px; padding: 0 13px; border: 0; border-radius: 14px; color: #1265ff; background: #eaf2ff; font-size: 10px; cursor: pointer; }
.pc-checkin-head button.is-checked { color: #16a86a; background: #e7f8ef; }
.pc-checkin-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.pc-checkin-days span { min-height: 82px; display: grid; justify-items: center; align-content: center; gap: 7px; border-radius: 6px; color: #8a98ad; background: #f5f8fc; font-size: 9px; }
.pc-checkin-days b { font-size: 9px; }
.pc-checkin-days i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #aeb9c9; background: #fff; font-style: normal; }
.pc-checkin-days .done i { color: #1265ff; }
.pc-checkin-days .today { color: #f28b13; background: #fff8eb; }
.pc-checkin-days .today i { color: #fff; background: #ff9a1f; }

.pc-benefits > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pc-benefits > div span { display: grid; justify-items: center; gap: 5px; padding: 10px 4px; text-align: center; }
.pc-benefits i { width: 34px; height: 34px; display: block; border-radius: 50%; background-color: #eaf2ff; background-position: center; background-repeat: no-repeat; background-size: 20px; }
.pc-benefits i.shield { background-image: url("assets/icons/line-icons/shield-outline.png"); }
.pc-benefits i.download { background-image: url("assets/icons/line-icons/download-outline.png"); }
.pc-benefits i.support { background-image: url("assets/icons/line-icons/message-circle-outline.png"); }
.pc-benefits i.license { background-image: url("assets/icons/line-icons/briefcase-outline.png"); }
.pc-benefits i.more { background-image: url("assets/icons/line-icons/grid-outline.png"); }
.pc-benefits strong { color: #40516d; font-size: 10px; }
.pc-benefits small { color: #8a98ad; font-size: 8px; }

.pc-invite {
  min-height: 150px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 42px;
  border-radius: 8px;
  background: #1265ff url("assets/profile/invite-bg.png") center / cover no-repeat;
}

.pc-invite h2 { margin: 0; color: #ffffff; font-size: 22px; }
.pc-invite p { margin: 9px 0 14px; color: rgba(255, 255, 255, 0.82); font-size: 11px; }
.pc-invite button { height: 32px; padding: 0 18px; border: 0; border-radius: 5px; color: #1265db; background: #ffffff; font-size: 11px; cursor: pointer; }
.pc-invite img { display: none; }

@media (max-width: 1100px) {
  .pc-hero { grid-template-columns: 1fr; gap: 18px; }
  .pc-level { justify-content: flex-start; padding-left: 142px; }
  .pc-wallet { grid-template-columns: repeat(2, 1fr); }
  .pc-vip-card { grid-column: 1 / -1; margin: 14px 0 0; min-height: 110px; }
  .pc-dashboard { grid-template-columns: 1fr; }
}

@media (min-width: 1101px) and (max-width: 1300px) {
  .pc-wallet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-vip-card { grid-column: 1 / -1; min-height: 104px; margin: 12px 0 0; }
}

@media (max-width: 980px) {
  .pc-shortcut-grid { grid-template-columns: repeat(10, minmax(88px, 1fr)); }
  .pc-wallet { grid-template-columns: 1fr; }
  .pc-wallet > article { border-right: 0; border-bottom: 1px solid #edf2f8; }
  .pc-level { padding-left: 0; }
}

@media (max-width: 680px) {
  .pc-hero { padding: 56px 22px 24px; }
  .pc-wallet { margin-right: 0; margin-left: 0; }
  .pc-person { align-items: flex-start; gap: 16px; }
  .pc-avatar { width: 96px; height: 96px; flex-basis: 96px; }
  .pc-name-row { align-items: center; flex-direction: row; gap: 6px 8px; }
  .pc-name-row h1 { font-size: 22px; }
  .pc-level { align-items: flex-start; }
  .pc-level-badge { display: none; }
  .pc-shortcut-grid { grid-template-columns: repeat(10, minmax(88px, 1fr)); }
  .pc-growth-main { grid-template-columns: 1fr; }
  .pc-radar { min-height: 220px; }
  .pc-checkin-days { grid-template-columns: repeat(4, 1fr); }
  .pc-benefits > div { grid-template-columns: repeat(3, 1fr); }
  .pc-invite { padding: 24px; }
  .pc-invite img { width: 100px; height: 90px; }
}

/* Showroom softer borders */
.showroom-page .showroom-hero,
.showroom-page .showroom-categories,
.showroom-page .showroom-filter,
.showroom-page .device-card,
.showroom-page .device-request-card,
.showroom-page .showroom-service {
  border-color: rgba(226, 234, 248, 0.42);
}

.showroom-page .showroom-filter,
.showroom-page .showroom-categories,
.showroom-page .device-request-card,
.showroom-page .showroom-service {
  box-shadow: 0 6px 16px rgba(41, 77, 128, 0.025);
}

.showroom-page .device-card {
  border-color: rgba(232, 239, 249, 0.42);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:
    0 1px 2px rgba(25, 43, 78, 0.025),
    0 8px 20px rgba(35, 73, 126, 0.045);
}

.showroom-page .device-card:hover {
  border-color: rgba(203, 220, 244, 0.46);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:
    0 2px 5px rgba(25, 43, 78, 0.035),
    0 14px 28px rgba(35, 73, 126, 0.085);
}

/* Consistent lighter card titles */
.showroom-page .device-card h3 { font-weight: 500; }

/* Final unified title color for light content surfaces. */
.section-title h2,
.panel-title h2,
.detail-block-title h2,
.detail-info h1,
.author-page-name h1,
.quick-copy strong,
.resource-card h3,
.latest-item h3,
.spec-card strong,
.device-card h3,
.help-hero h1,
.faq-section h2,
.faq-section h3,
.about-hero h1,
.about-section h2,
.about-section h3 { color: #333333; }

@media (max-width: 720px) {
  body[data-page="home"] .hero {
    min-height: 230px;
  }

  body[data-page="home"] .hero-slide {
    width: 88%;
    border-radius: 12px;
  }

  body[data-page="home"] .hero-slide.prev {
    transform: translate(calc(-50% - 56%), -50%) scale(0.84);
  }

  body[data-page="home"] .hero-slide.next {
    transform: translate(calc(-50% + 56%), -50%) scale(0.84);
  }

  body[data-page="home"] .hero-arrow {
    width: 32px;
    height: 32px;
  }
}

/* Homepage resource cards: portfolio-style five-column layout. */
body[data-page="home"] .resource-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 28px;
}

body[data-page="home"] .resource-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: transform 0.2s ease;
}

body[data-page="home"] .resource-card:hover,
body[data-page="home"] .resource-card:focus-visible {
  border-color: transparent;
  box-shadow: none;
  transform: translateY(-3px);
}

body[data-page="home"] .resource-card .thumb {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
}

body[data-page="home"] .resource-card h3 {
  margin: 11px 0 5px;
  color: #333333;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

body[data-page="home"] .resource-card .resolution {
  height: auto;
  margin: 0 0 10px;
  padding: 0;
  border-radius: 0;
  color: #7b879a;
  background: transparent;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
}

body[data-page="home"] .resource-card .resource-meta {
  margin: 0;
  font-size: 11px;
}

body[data-page="home"] .resource-card .author {
  gap: 6px;
  color: #7a879a;
  font-weight: 400;
}

body[data-page="home"] .resource-card .author .avatar-dot {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

body[data-page="home"] .resource-card .resource-stats {
  gap: 8px;
  color: #9aa6b7;
}

@media (max-width: 1180px) {
body[data-page="home"] .resource-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 18px;
}

/* Shared empty state for resource grids (material marketplace, tools, etc.). */
.resource-empty {
  grid-column: 1 / -1;
  min-height: 168px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(192, 207, 229, 0.72);
  border-radius: 10px;
  color: #7b8ba2;
  background: #fbfdff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.tools-card {
  min-height: 98px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(232, 239, 249, 0.42);
  border-radius: 10px;
  color: inherit;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:
    0 1px 2px rgba(25, 43, 78, 0.025),
    0 8px 20px rgba(35, 73, 126, 0.045);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tools-card[hidden] {
  display: none;
}

.tools-pagination.common-pagination {
  margin: 18px 0 18px;
}

.tools-page.frame-page .frame-invite {
  margin-top: 0;
}

.tools-card:hover {
  border-color: rgba(203, 220, 244, 0.46);
  box-shadow:
    0 2px 5px rgba(25, 43, 78, 0.035),
    0 14px 28px rgba(35, 73, 126, 0.085);
  transform: translateY(-2px);
}

.tools-card-logo {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 8px;
  background: #fff;
  line-height: 0;
}

.tools-card-logo > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain !important;
  object-position: center;
}

.tools-card > div {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
}

.tools-card h3 {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  order: 1;
  margin: 0;
  overflow: hidden;
  color: #213450;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tools-card p {
  width: 100%;
  flex: 0 0 100%;
  order: 3;
  margin: 5px 0 0;
  overflow: hidden;
  color: #77869b;
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tools-tags {
  display: none;
}

.tools-tags em {
  min-width: max-content;
  flex: 0 0 auto;
  padding: 3px 7px;
  overflow: visible;
  border-radius: 999px;
  color: #7b8ca4;
  background: #f3f6fb;
  font-size: 11px;
  font-style: normal;
  line-height: 1.3;
  white-space: nowrap;
}

.tools-rank,
.tools-shortcuts {
  display: grid;
  gap: 12px;
}

.tools-rank a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  color: inherit;
}

.tools-rank b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #ffffff;
  background: linear-gradient(180deg, #69b8ff, #2f70ff);
  font-size: 11px;
}

.tools-rank span {
  overflow: hidden;
  color: #344761;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tools-rank em {
  color: #f28a1d;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

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

.tools-shortcuts a {
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #2f73ff;
  background: rgba(18, 101, 255, 0.07);
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 760px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body[data-page="home"] .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
  }
}
/* Creator center */
.creator-center { display: block; }
.creator-center > * { min-width: 0; max-width: 100%; }
/* This block layout mirrors the 20px gap used by other account modules. */
.creator-center > * + * { margin-top: 20px; }
.creator-publish-button { min-width: 112px; }
.creator-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.creator-stats article:nth-child(5)::before { background: #55c99b; }
.creator-stats article:nth-child(5) strong { color: #17a673; }
.creator-work-card { min-width: 0; overflow: hidden; }
.creator-section-title { padding: 20px 22px 4px; }
.creator-section-title h3 { margin: 0; color: #1d2d47; font-size: 17px; }
.creator-section-title p { margin: 6px 0 0; color: #8a97a9; font-size: 12px; }
.creator-work-card .am-tabs { overflow-x: auto; padding-top: 4px; scrollbar-width: none; }
.creator-work-card .am-tabs::-webkit-scrollbar { display: none; }
.creator-work-card .am-tabs button { flex: 0 0 auto; }
.creator-work-card .am-work-item { grid-template-columns: 112px minmax(180px, 1fr) minmax(180px, .85fr) 70px 92px; gap: 12px; padding: 15px 18px; }
.creator-work-card .am-work-item > img { width: 112px; height: 74px; }
.creator-work-card .am-work-data { gap: 4px; }
.creator-side { display: grid; gap: 16px; min-width: 0; }
.creator-side > .am-card { padding: 20px; }
.creator-side-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.creator-side-heading h3 { margin: 0; color: #1d2d47; font-size: 16px; }
.creator-side-heading > span { color: #2878ed; font-size: 11px; cursor: pointer; }
.creator-level-main { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.creator-level-main img { width: 68px; height: 68px; object-fit: contain; }
.creator-level-main strong, .creator-level-main span { display: block; }
.creator-level-main strong { color: #266fee; font-size: 21px; }
.creator-level-main span { margin-top: 5px; color: #31425b; font-size: 13px; font-weight: 600; }
.creator-level-progress { margin-top: 18px; }
.creator-level-progress > div { display: flex; justify-content: space-between; color: #7f8ca0; font-size: 10px; }
.creator-level-progress > div b { color: #52657e; }
.creator-level-progress > i, .creator-task-list article > i { display: block; height: 6px; position: relative; margin-top: 9px; overflow: hidden; border-radius: 5px; background: #edf2f8; }
.creator-level-progress > i em, .creator-task-list article > i em { display: block; height: 100%; border-radius: inherit; background: #2878ed; }
.creator-level-progress p { margin: 10px 0 0; color: #8c99aa; font-size: 10px; }
.creator-task-list { display: grid; gap: 18px; margin-top: 20px; }
.creator-task-list article { position: relative; }
.creator-task-list article > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.creator-task-list strong { color: #3c4c63; font-size: 11px; font-weight: 600; }
.creator-task-list b { color: #2878ed; font-size: 10px; white-space: nowrap; }
.creator-task-list small { display: block; margin-top: 6px; color: #98a4b4; font-size: 9px; text-align: right; }
.creator-news-card ul { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.creator-news-card li { display: flex; align-items: center; gap: 10px; color: #53647b; font-size: 11px; }
.creator-news-card li::before { content: ""; width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: #77aaf5; }
.creator-news-card li span { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.creator-news-card time { color: #9aa6b5; font-size: 9px; }
.am-type.green { color: #168761; background: #e9f8f1; }

.creator-publish-modal {
  --creator-publish-paper: oklch(99% 0.004 252);
  --creator-publish-paper-soft: oklch(97.5% 0.009 252);
  --creator-publish-ink: oklch(25% 0.052 258);
  --creator-publish-muted: oklch(53% 0.035 257);
  --creator-publish-muted-strong: oklch(45% 0.043 257);
  --creator-publish-rule: oklch(91% 0.018 252);
  --creator-publish-rule-hover: oklch(75% 0.095 253);
  --creator-publish-accent: oklch(60% 0.21 255);
  --creator-publish-focus: oklch(48% 0.2 255);
  --creator-publish-error: oklch(57% 0.2 25);
  --creator-publish-success: oklch(55% 0.16 155);
  --creator-publish-backdrop-color: oklch(27% 0.045 255 / .62);
  --creator-publish-shadow: 0 28px 76px oklch(24% 0.05 255 / .2);
  --creator-publish-card-shadow: 0 8px 24px oklch(30% 0.05 255 / .055);
  --creator-publish-ease-out: cubic-bezier(.16, 1, .3, 1);
  --creator-publish-ease-in: cubic-bezier(.7, 0, .84, 0);
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 220ms var(--creator-publish-ease-in), visibility 220ms var(--creator-publish-ease-in);
}
.creator-publish-modal.is-open { visibility: visible; opacity: 1; transition-timing-function: var(--creator-publish-ease-out); }
.creator-publish-backdrop { position: absolute; inset: 0; border: 0; background: var(--creator-publish-backdrop-color); backdrop-filter: blur(6px); cursor: default; }
.creator-publish-dialog {
  width: min(606px, 100%);
  max-height: calc(100dvh - 48px);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid #d8e6f8;
  border-radius: 20px;
  color: var(--creator-publish-ink);
  background:
    radial-gradient(circle 92px at 78% 1%, rgba(221, 236, 255, .34) 0 34%, rgba(227, 240, 255, .18) 58%, rgba(235, 245, 255, 0) 84%),
    radial-gradient(circle 122px at 93% -5%, rgba(232, 243, 255, .3) 0 38%, rgba(237, 246, 255, .13) 66%, rgba(242, 248, 255, 0) 88%),
    #fff;
  box-shadow: 0 30px 82px rgba(16, 49, 94, .27), 0 2px 8px rgba(33, 82, 148, .08);
  opacity: 0;
  transform: translateY(12px) scale(.975);
  transition: opacity 220ms var(--creator-publish-ease-in), transform 220ms var(--creator-publish-ease-in);
}
.creator-publish-modal.is-open .creator-publish-dialog { opacity: 1; transform: none; transition-duration: 300ms; transition-timing-function: var(--creator-publish-ease-out); }
.creator-publish-dialog > header { min-width: 0; min-height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 30px; box-sizing: border-box; }
.creator-publish-heading { min-width: 0; display: flex; align-items: center; gap: 17px; }
.creator-publish-heading-icon { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(231, 241, 255, .9); box-shadow: inset 0 0 0 1px rgba(203, 224, 253, .82), 0 7px 18px rgba(52, 127, 243, .1); }
.creator-publish-heading-plane { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #4f9cff, #2472ef); box-shadow: 0 6px 14px rgba(31, 115, 238, .28), inset 0 1px 1px rgba(255, 255, 255, .32); }
.creator-publish-heading-plane i { color: #fff; font-size: 20px; line-height: 1; transform: rotate(-8deg); }
.creator-publish-heading > div { min-width: 0; }
.creator-publish-dialog h2 { margin: 0; overflow-wrap: anywhere; color: #14233a; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.creator-publish-dialog > header p { margin: 6px 0 0; color: #657791; font-size: 12px; line-height: 1.5; }
.creator-publish-dialog header > button {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--creator-publish-muted);
  background: transparent;
  cursor: pointer;
  transition: color 160ms var(--creator-publish-ease-out), background-color 160ms var(--creator-publish-ease-out), transform 100ms var(--creator-publish-ease-out);
}
.creator-publish-dialog header > button img { width: 22px; height: 22px; display: block; margin: auto; object-fit: contain; opacity: .72; }
.creator-publish-dialog header > button:focus-visible,
.creator-publish-grid > button:focus-visible { outline: 2px solid var(--creator-publish-focus); outline-offset: 3px; }
.creator-publish-dialog header > button:active { transform: translateY(1px); }
.creator-publish-dialog header > button:disabled { opacity: .5; cursor: not-allowed; }
.creator-publish-grid {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 13px 12px;
  padding: 1px 30px 22px;
  scrollbar-width: thin;
  scrollbar-color: var(--creator-publish-rule-hover) transparent;
}
.creator-publish-grid > button {
  min-width: 0;
  min-height: 90px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid #edf2f8;
  border-radius: 11px;
  color: var(--creator-publish-ink);
  background: #fff;
  box-shadow: 0 5px 16px rgba(41, 77, 128, .035);
  text-align: left;
  cursor: pointer;
  transform: translateY(0);
  transition: transform .2s var(--creator-publish-ease-out), border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.creator-publish-grid > button:hover,
.creator-publish-grid > button:focus-visible {
  border-color: #bdd3ee;
  background: #fbfdff;
  box-shadow: 0 10px 24px rgba(41, 77, 128, .09);
  transform: translateY(-2px);
}
.creator-publish-option-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.creator-publish-option-icon i { font-size: 24px; line-height: 1; }
.creator-publish-option-icon[data-kind="material"] { background: #eaf2ff; }
.creator-publish-option-icon[data-kind="material"] i { color: #347ff3; }
.creator-publish-option-icon[data-kind="community"] { background: #fff2df; }
.creator-publish-option-icon[data-kind="community"] i { color: #f49a18; }
.creator-publish-option-icon[data-kind="project"] { background: #e6f7f1; }
.creator-publish-option-icon[data-kind="project"] i { color: #24b985; }
.creator-publish-option-icon[data-kind="shop"] { background: #e9f3ff; }
.creator-publish-option-icon[data-kind="shop"] i { color: #347ff3; }
.creator-publish-option-icon[data-kind="tools"] { background: #f1edff; }
.creator-publish-option-icon[data-kind="tools"] i { color: #8d63df; }
.creator-publish-option-icon[data-kind="software"] { background: #ffebeb; }
.creator-publish-option-icon[data-kind="software"] i { color: #f45f65; }
.creator-publish-option-icon[data-kind="course"] { background: #e3f7f7; }
.creator-publish-option-icon[data-kind="course"] i { color: #08aaa6; }
.creator-publish-option-icon[data-kind="question"] { background: #eef0ff; }
.creator-publish-option-icon[data-kind="question"] i { color: #6574e8; }
.creator-publish-option-copy,
.creator-publish-option-copy strong,
.creator-publish-option-copy em { min-width: 0; display: block; }
.creator-publish-option-copy strong { overflow: hidden; color: #14233a; font-size: 14px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.creator-publish-option-copy em {
  overflow: visible;
  margin-top: 5px;
  color: #667991;
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.creator-publish-option-arrow { width: 14px; height: 16px; display: grid; place-items: center; }
.creator-publish-option-arrow img { width: 15px; height: 15px; display: block; opacity: .68; object-fit: contain; transition: opacity .2s ease, transform .2s var(--creator-publish-ease-out); }
.creator-publish-grid > button:hover .creator-publish-option-arrow img,
.creator-publish-grid > button:focus-visible .creator-publish-option-arrow img { opacity: .84; transform: translateX(2px); }
.creator-publish-grid > button:active { transform: translateY(1px); }
.creator-publish-grid > button:disabled,
.creator-publish-grid > button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.creator-publish-grid > button[aria-busy="true"] { cursor: progress; }
.creator-publish-grid > button.is-error { border-color: var(--creator-publish-error); }
.creator-publish-grid > button.is-success { border-color: var(--creator-publish-success); }
.creator-publish-empty { grid-column: 1 / -1; min-height: 160px; display: grid; place-items: center; margin: 0; color: var(--creator-publish-muted); font-size: 14px; text-align: center; }
.creator-publish-tip { min-height: 40px; display: flex; align-items: center; gap: 8px; margin: 0 30px 14px; padding: 7px 12px; border: 0; border-radius: 10px; box-sizing: border-box; color: #60748f; background: rgba(244, 248, 254, .94); font-size: 11px; line-height: 1.5; }
.creator-publish-tip-icon { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 50%; background: #e8f2ff; }
.creator-publish-tip-icon img { width: 14px; height: 14px; display: block; filter: brightness(0) saturate(100%) invert(44%) sepia(91%) saturate(1600%) hue-rotate(202deg) brightness(99%) contrast(97%); object-fit: contain; opacity: 1; }
.creator-publish-tip strong { color: #2d70d9; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .creator-publish-dialog header > button:hover { color: var(--creator-publish-ink); background: var(--creator-publish-paper-soft); }
  .creator-publish-grid > button:hover { border-color: #e1e9f3; background: #fcfdff; }
}
@media (prefers-reduced-motion: reduce) {
  .creator-publish-modal,
  .creator-publish-dialog,
  .creator-publish-dialog header > button,
  .creator-publish-grid > button,
  .creator-publish-option-arrow img { transition-duration: 150ms; }
  .creator-publish-dialog,
  .creator-publish-modal.is-open .creator-publish-dialog { transform: none; }
}

@media (max-width: 1280px) {
  .creator-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .creator-side { grid-template-columns: 1fr; }
  .creator-work-card .am-work-item { grid-template-columns: 92px minmax(0, 1fr) auto; }
  .creator-work-card .am-work-item > img { width: 92px; height: 64px; }
  .creator-work-card .am-work-data, .creator-work-card .am-row-actions { grid-column: 2 / -1; }
}
@media (max-width: 620px) {
  .creator-stats { grid-template-columns: 1fr 1fr; }
  .creator-publish-modal { padding: 12px; }
  .creator-publish-dialog { max-height: calc(100dvh - 24px); border-radius: 14px; }
  .creator-publish-dialog > header { align-items: flex-start; padding: 22px 18px 16px; }
  .creator-publish-heading { gap: 12px; }
  .creator-publish-heading-icon { width: 48px; height: 48px; flex-basis: 48px; }
  .creator-publish-heading-plane { width: 32px; height: 32px; }
  .creator-publish-heading-plane i { font-size: 17px; }
  .creator-publish-dialog h2 { font-size: 22px; }
  .creator-publish-dialog > header p { margin-top: 5px; font-size: 12px; }
  .creator-publish-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 18px 18px; }
  .creator-publish-grid > button { min-height: 96px; grid-template-columns: 52px minmax(0, 1fr) 18px; gap: 13px; padding: 14px; }
  .creator-publish-option-icon { width: 52px; height: 52px; border-radius: 13px; }
  .creator-publish-option-icon i { font-size: 27px; }
  .creator-publish-option-copy strong { font-size: 15px; }
  .creator-publish-option-copy em { font-size: 11px; }
  .creator-publish-tip { min-height: 44px; align-items: center; margin: 0 18px 14px; padding: 9px 11px; }
}

/* Creator center reference layout */
.creator-center { gap: 14px; }
.creator-center .am-page-head { min-height: 72px; padding: 2px 4px; }
.creator-center .am-page-head h2 { font-size: 22px; }
.creator-center .am-page-head p { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.creator-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.creator-stats article { height: 112px; min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; }
.creator-stats article::before { display: none; }
.creator-stats article > div { min-width: 0; }
.creator-stats article > img { width: 44px; height: 44px; flex: 0 0 auto; object-fit: contain; }
.creator-stats span { font-size: 13px; line-height: 1.2; }
.creator-stats strong { margin-top: 12px; font-size: 24px; line-height: 1; }
.creator-stats small { margin-top: 8px; font-size: 12px; line-height: 1.2; }
.creator-stats article:nth-child(4) strong { color: #f06b2b; }
.creator-stats article:nth-child(5) strong { color: #19a86f; }
.creator-dashboard-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
.creator-main-column { display: grid; gap: 16px; min-width: 0; }
.creator-work-card { border-radius: 10px; }
.creator-section-title { min-height: 46px; padding: 10px 20px 4px; }
.creator-work-card .creator-section-title { border-bottom: 0; }
.creator-section-title h3 { font-size: 17px; }
.creator-work-card .am-tabs { padding-top: 0; padding-inline: 20px; }
.creator-work-card .am-tabs button { height: 54px; min-height: 54px; padding-inline: 12px; font-size: 13px; }
.creator-work-controls { height: 55px; min-height: 55px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-right: 20px; border-bottom: 1px solid #edf1f6; }
.creator-work-controls .am-tabs { height: 54px; min-height: 54px; min-width: 0; flex: 1; border-bottom: 0; }
.creator-work-filters { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.creator-work-filters select { width: 108px; height: 36px; padding: 0 9px; border: 1px solid rgba(220, 223, 230, .68); border-radius: 5px; color: #5e6c80; background: #fff; font-size: 12px; outline: none; }
.creator-filter-select { width: 108px; position: relative; flex: 0 0 108px; }
.creator-native-select { width: 1px !important; height: 1px !important; position: absolute; inset: auto auto 0 0; overflow: hidden; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.creator-filter-select-trigger { width: 100%; height: 36px; position: relative; display: flex; align-items: center; padding: 0 34px 0 12px; border: 1px solid #dfe5ed; border-radius: 5px; color: #5d6e84; background: #fff; font-family: inherit; font-size: 12px; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, color .16s ease; }
.creator-filter-select-trigger::after { content: ""; width: 6px; height: 6px; position: absolute; top: 50%; right: 13px; border-right: 1.5px solid #718198; border-bottom: 1.5px solid #718198; transform: translateY(-70%) rotate(45deg); transform-origin: center; transition: transform .16s ease, border-color .16s ease; }
.creator-filter-select:hover .creator-filter-select-trigger { border-color: #c7d3e1; color: #3f5169; }
.creator-filter-select.is-open .creator-filter-select-trigger { z-index: 52; border-color: #8eb8f2; color: #263a56; box-shadow: 0 0 0 3px rgba(18, 101, 255, .09); }
.creator-filter-select.is-open .creator-filter-select-trigger::after { border-color: #1769e8; transform: translateY(-25%) rotate(225deg); }
.creator-filter-select-trigger:focus-visible { outline: 3px solid rgba(18, 101, 255, .15); outline-offset: 2px; }
.creator-filter-select-menu { width: 100%; position: absolute; z-index: 51; top: calc(100% + 6px); left: 0; display: grid; gap: 2px; padding: 4px; border: 1px solid #dfe6ef; border-radius: 6px; box-sizing: border-box; background: #fff; box-shadow: 0 10px 26px rgba(31, 53, 84, .14); visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
.creator-filter-select.is-open .creator-filter-select-menu { visibility: visible; opacity: 1; transform: none; }
.creator-filter-select-menu button { width: 100%; min-height: 32px; display: flex; align-items: center; padding: 0 9px; border: 0; border-radius: 4px; color: #5f7087; background: transparent; font-family: inherit; font-size: 12px; text-align: left; cursor: pointer; transition: color .14s ease, background-color .14s ease; }
.creator-filter-select-menu button:hover,
.creator-filter-select-menu button:focus-visible { color: #2f4664; background: #f4f7fb; outline: none; }
.creator-filter-select-menu button.is-selected { color: #1769e8; background: #edf5ff; font-weight: 600; }
.creator-work-search { width: 200px; min-width: 200px; height: 36px; border-color: #dcdfe6; }
.creator-work-search input { font-size: 12px; }
.creator-work-card .am-work-item { min-height: 102px; grid-template-columns: 104px minmax(210px, 1.4fr) minmax(220px, .9fr) 72px 112px; gap: 14px; padding: 13px 20px; }
.creator-work-card .am-work-item > img { width: 104px; height: 66px; border-radius: 6px; }
.creator-work-card .am-work-main h3 { margin-top: 6px; }
.creator-work-card .am-work-main p { margin-top: 7px; }
.creator-work-card .am-work-main { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; }
.creator-work-card .am-work-main h3 { min-width: 0; max-width: calc(100% - 76px); flex: 0 1 auto; order: 1; margin: 0; }
.creator-work-card .am-work-main h3 { font-size: 15px; }
.creator-work-card .am-work-main > .am-type { width: max-content; flex: 0 0 auto; order: 2; align-self: center; font-size: 11px; }
.creator-work-card .am-work-main p { width: 100%; flex: 0 0 100%; order: 3; margin-top: 8px; font-size: 12px; }
.creator-work-card .am-work-data span { color: #8b98aa; font-size: 11px; }
.creator-work-card .am-work-data b { color: #253751; font-size: 14px; }
.creator-work-card .am-work-data { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.creator-work-card .am-status { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 12px; }
.creator-work-card .am-status.success { color: #159765; background: transparent; }
.creator-work-card .am-status.warning { color: #d47a19; background: transparent; }
.creator-work-card .am-status.danger { color: #e15b65; background: transparent; }
.creator-work-card .am-row-actions { gap: 7px; }
.creator-work-card .am-row-actions button { min-width: 48px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; padding: 0 9px; border: 1px solid rgba(220, 223, 230, .72); border-radius: 5px; color: #596a81; background: #fff; font-size: 12px; line-height: 1; white-space: nowrap; word-break: keep-all; }
.creator-work-card .am-row-actions button:hover { border-color: rgba(18, 101, 255, .25); color: #1265ff; background: #f8fbff; }
.creator-utility-side { display: grid; gap: 16px; }
.creator-utility-side > .am-card { padding: 20px; }
.creator-utility-side h3 { margin: 0; color: #1e2e48; font-size: 17px; }
.creator-toolbox > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.creator-toolbox button { min-width: 0; display: grid; justify-items: center; gap: 7px; padding: 0; border: 0; color: #506078; background: transparent; font-size: 12px; cursor: pointer; }
.creator-toolbox button img { width: 36px; height: 36px; object-fit: contain; transition: transform .16s ease; }
.creator-toolbox button:hover img { transform: translateY(-2px); }
.creator-toolbox button span { white-space: nowrap; }
.creator-incentive-card { height: 158px; overflow: hidden; border-radius: 10px; background: #eef3ff; box-shadow: 0 8px 20px rgba(67, 91, 141, .08); }
.creator-incentive-card > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.creator-center .am-card,
.creator-center .creator-stats article { border-color: rgba(226, 234, 248, .48); box-shadow: 0 4px 14px rgba(38, 70, 112, .025); }
.creator-center .am-work-item,
.creator-center .creator-work-controls { border-color: rgba(226, 234, 248, .55); }
.creator-center .creator-work-search,
.creator-center .am-row-actions button { border-color: rgba(220, 223, 230, .68); }
.creator-tips-card ul, .creator-notice-card ul { display: grid; gap: 15px; margin: 18px 0 0; padding: 0; list-style: none; }
.creator-tips-card li { position: relative; padding-left: 18px; color: #66758a; font-size: 12px; line-height: 1.6; }
.creator-tips-card li::before { content: ""; width: 6px; height: 6px; position: absolute; left: 1px; top: 5px; border: 2px solid #77a6f2; border-radius: 50%; }
.creator-notice-card header { display: flex; align-items: center; justify-content: space-between; }
.creator-notice-card header button { border: 0; color: #2878ed; background: transparent; font-size: 12px; cursor: pointer; }
.creator-notice-card li { display: flex; align-items: center; gap: 10px; color: #53647a; font-size: 12px; }
.creator-notice-card li::before { content: ""; width: 4px; height: 4px; flex: 0 0 auto; border-radius: 50%; background: #7e8ca0; }
.creator-notice-card li span { min-width: 0; overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.creator-notice-card time { color: #9aa6b5; font-size: 10px; }

@media (max-width: 1280px) {
  .creator-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creator-dashboard-layout { grid-template-columns: 1fr; }
  .creator-utility-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .creator-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-utility-side { grid-template-columns: 1fr; }
  .creator-work-card .am-work-item { grid-template-columns: 88px minmax(0, 1fr) auto; }
  .creator-work-card .am-work-item > img { width: 88px; height: 58px; }
  .creator-work-card .am-work-data, .creator-work-card .am-row-actions { grid-column: 2 / -1; }
  .creator-work-controls { height: auto; min-height: 0; align-items: stretch; flex-direction: column; gap: 8px; padding: 0 14px 12px; }
  .creator-work-controls .am-tabs { width: calc(100% + 28px); margin-left: -14px; }
  .creator-work-filters { width: 100%; flex-wrap: wrap; }
  .creator-work-search { width: 100%; }
  .creator-work-filters select { flex: 1; }
  .creator-filter-select { min-width: 108px; flex: 1; }
}
@media (max-width: 520px) {
  .creator-stats { grid-template-columns: 1fr; }
}

/* Shared profile panel surface
   Use .profile-surface on any new panel to keep all profile pages consistent. */
:root {
  --profile-surface-border: rgba(31, 55, 94, .055);
  --profile-surface-radius: 8px;
  --profile-surface-shadow: 0 7px 20px rgba(41, 77, 128, .035);
  --profile-surface-bg: #fff;
}

.profile-surface,
.pc-section,
.ps-card,
.account-module .am-card,
.account-module .am-stats article,
.account-module .am-invite-link-card,
.account-module .creator-incentive-card {
  border: 1px solid var(--profile-surface-border);
  border-radius: var(--profile-surface-radius);
  background: var(--profile-surface-bg);
  box-shadow: var(--profile-surface-shadow);
}

.account-module .am-card:hover,
.account-module .am-stats article:hover,
.ps-card:hover,
.pc-section:hover {
  border-color: var(--profile-surface-border);
}

/* Purchase history: compact, chronological single-column order list. */
.purchase-module > .am-card {
  overflow: hidden;
  border: 1px solid var(--profile-surface-border);
  border-radius: var(--profile-surface-radius);
  background: var(--profile-surface-bg);
  box-shadow: var(--profile-surface-shadow);
}

.purchase-module .purchase-tabs {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.purchase-module .purchase-toolbar {
  height: 55px;
  min-height: 55px;
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 16px;
  border-bottom: 1px solid var(--profile-surface-border);
  background: #fff;
}

.purchase-module .purchase-toolbar .purchase-tabs {
  height: 54px;
  min-height: 54px;
  min-width: 0;
  flex: 1;
}

.purchase-module .purchase-search {
  width: 220px;
  height: 36px;
  display: flex;
  flex: 0 0 220px;
  overflow: hidden;
  border: 1px solid #e3e9f1;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(39, 68, 108, .035);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.purchase-module .purchase-search:focus-within {
  border-color: #a9c7f5;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(18, 101, 255, .07);
}

.purchase-module .purchase-search input {
  min-width: 0;
  flex: 1;
  padding: 0 4px 0 11px;
  border: 0;
  outline: 0;
  color: #263a57;
  background: transparent;
  font: inherit;
  font-size: 11px;
}

.purchase-module .purchase-search input::placeholder {
  color: #a7b2c1;
}

.purchase-module .purchase-search button {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  align-self: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: #9aa9bc;
  background: transparent;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}

.purchase-module .purchase-search button:hover {
  color: #1265db;
  background: transparent;
}

.purchase-module .purchase-search button:active {
  color: #0759ee;
  background: transparent;
}

.purchase-module .purchase-search button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.purchase-module .purchase-search button:focus-visible {
  outline: 3px solid rgba(18, 101, 255, .22);
  outline-offset: -1px;
}

.purchase-module .purchase-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: #fff;
}

.purchase-module .purchase-item {
  min-height: 130px;
  grid-template-columns: 148px minmax(280px, 1fr) 112px 108px;
  align-items: center;
  gap: 20px;
  padding: 14px 16px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--profile-surface-border);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  transition: background-color .18s ease;
}

.purchase-module .purchase-item:last-child {
  border-bottom: 0;
}

.purchase-module .purchase-item:hover {
  border-color: var(--profile-surface-border);
  background: #f8fbff;
  box-shadow: none;
  transform: none;
}

.purchase-module .purchase-cover {
  width: 148px;
  height: 98px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #f1f5fa;
}

.purchase-module .purchase-cover > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .25s ease;
}

.purchase-module .purchase-item:hover .purchase-cover > img {
  transform: scale(1.025);
}

.purchase-module .purchase-cover > span {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 4px 8px;
  border-radius: 12px;
  color: #fff;
  background: rgba(85, 96, 113, .86);
  font-size: 11px;
  line-height: 1;
}

.purchase-module .purchase-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.purchase-module .purchase-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.purchase-module .purchase-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  white-space: nowrap;
}

.purchase-module .purchase-price span {
  color: #9aa6b6;
  font-size: 11px;
  line-height: 1.2;
}

.purchase-module .purchase-price strong {
  color: #f05a24;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.purchase-module .purchase-item h3 {
  width: 100%;
  margin: 8px 0 0;
  overflow: hidden;
  color: #1d2f4a;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-module .purchase-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 9px 0 0;
}

.purchase-module .purchase-meta > div {
  min-width: 0;
  display: flex;
  gap: 6px;
  align-items: center;
}

.purchase-module .purchase-meta dt,
.purchase-module .purchase-meta dd {
  min-width: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}

.purchase-module .purchase-meta dt {
  color: #9aa6b6;
}

.purchase-module .purchase-meta dt::after {
  content: "：";
}

.purchase-module .purchase-meta dd {
  overflow: hidden;
  color: #6f7f95;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-module .purchase-license dd {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: visible;
}

.purchase-module .purchase-license-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
}

.purchase-module .purchase-license-badge.is-personal {
  color: #1769d7;
  background: #edf4ff;
}

.purchase-module .purchase-license-badge.is-commercial {
  color: #986000;
  background: #fff3d6;
}

.purchase-module .purchase-certificate {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 5px;
  color: #1265db;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}

.purchase-module .purchase-certificate:hover {
  color: #0759ee;
  background: #edf4ff;
}

.purchase-module .purchase-certificate:focus-visible {
  outline: 3px solid rgba(18, 101, 255, .2);
  outline-offset: 1px;
}

.purchase-module .purchase-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.purchase-module .purchase-actions a,
.purchase-module .purchase-actions button {
  width: 104px;
  min-width: 104px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #d9e3f0;
  border-radius: 6px;
  color: #596b84;
  background: #f9fbfd;
  font-size: 11px;
  font-weight: 600;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.purchase-module .purchase-actions a.is-primary {
  border-color: #1769ed;
  color: #fff;
  background: #1769ed;
  box-shadow: 0 3px 8px rgba(18, 101, 255, .13);
}

.purchase-module .purchase-actions button:hover {
  border-color: #b7cdf0;
  color: #1265db;
  background: #f3f7fd;
}

.purchase-module .purchase-actions a.is-primary:hover {
  border-color: #0759ee;
  color: #fff;
  background: #0759ee;
  box-shadow: 0 4px 10px rgba(18, 101, 255, .18);
}

.purchase-module .purchase-actions a:active,
.purchase-module .purchase-actions button:active {
  transform: translateY(1px);
}

.purchase-module .purchase-actions a:focus-visible,
.purchase-module .purchase-actions button:focus-visible,
.purchase-module .purchase-tabs button:focus-visible {
  outline: 3px solid rgba(18, 101, 255, .2);
  outline-offset: 2px;
}

.purchase-module .purchase-empty,
.purchase-module .purchase-loading,
.purchase-module .purchase-pagination {
  grid-column: 1 / -1;
}

.purchase-module .purchase-empty {
  border: 0;
  border-radius: 0;
  background: #fff;
}

.purchase-module .purchase-pagination {
  margin-top: 0;
  border: 0;
  border-top: 1px solid var(--profile-surface-border);
  border-radius: 0;
  background: #fff;
}

@media (max-width: 760px) {
  .purchase-module .purchase-toolbar {
    height: auto;
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 0 0 12px;
  }

  .purchase-module .purchase-tabs {
    overflow-x: auto;
  }

  .purchase-module .purchase-search {
    width: auto;
    min-height: 42px;
    flex: 0 0 42px;
    margin: 0 12px;
  }

  .purchase-module .purchase-list {
    gap: 0;
    padding-top: 0;
  }

  .purchase-module .purchase-item {
    min-height: 0;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 12px;
  }

  .purchase-module .purchase-cover {
    width: 112px;
    height: 86px;
  }

  .purchase-module .purchase-item h3 {
    font-size: 14px;
  }

  .purchase-module .purchase-meta {
    display: grid;
    gap: 4px;
  }

  .purchase-module .purchase-license dd {
    flex-wrap: wrap;
  }

  .purchase-module .purchase-price {
    grid-column: 2;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
  }

  .purchase-module .purchase-actions {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .purchase-module .purchase-actions a,
  .purchase-module .purchase-actions button {
    width: auto;
    min-width: 0;
    min-height: 40px;
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.help-page) {
    scroll-behavior: auto;
  }

  .faq-answer,
  .faq-item > button i::before,
  .faq-item > button i::after {
    transition: none;
  }
}

@media (max-width: 520px) {
  .purchase-module .purchase-item {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .purchase-module .purchase-cover {
    width: 96px;
    height: 78px;
  }

  .purchase-module .purchase-meta > div:first-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .purchase-module .purchase-item,
  .purchase-module .purchase-cover > img {
    transition: none;
  }

  .purchase-module .purchase-item:hover,
  .purchase-module .purchase-item:hover .purchase-cover > img {
    transform: none;
  }
}

/* Recent history: same continuous list system as purchases and favorites. */
.history-module .am-history {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--profile-surface-border);
  border-radius: var(--profile-surface-radius);
  background: var(--profile-surface-bg);
  box-shadow: var(--profile-surface-shadow);
}

.history-module .am-history > section > header {
  min-height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--profile-surface-border);
  background: #fafcff;
}

.history-module .am-history > section + section > header {
  border-top: 1px solid var(--profile-surface-border);
}

.history-module .am-history > section > header h3 {
  color: #52647e;
  font-size: 12px;
  font-weight: 600;
}

.history-module .am-history > section > header span {
  color: #9aa6b6;
  font-size: 10px;
}

.history-module .am-history article {
  min-height: 130px;
  grid-template-columns: 148px minmax(280px, 1fr) 108px;
  gap: 20px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--profile-surface-border);
  background: #fff;
  transition: background-color .18s ease;
}

.history-module .am-history > section > article:last-child {
  border-bottom: 0;
}

.history-module .am-history article:hover {
  background: #f8fbff;
}

.history-module .am-history article > img {
  width: 148px;
  height: 98px;
  border-radius: 8px;
  box-shadow: none;
}

.history-module .history-item-main {
  min-width: 0;
}

.history-module .am-history h4 {
  overflow: hidden;
  margin: 8px 0 0;
  color: #1d2f4a;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-module .am-history p {
  margin: 9px 0 0;
  color: #8997aa;
  font-size: 11px;
  line-height: 1.5;
}

.history-module .history-item-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.history-module .history-item-actions a,
.history-module .history-item-actions button {
  width: 104px;
  min-width: 104px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.history-module .history-item-actions a {
  border: 1px solid #1769ed;
  color: #fff;
  background: #1769ed;
  box-shadow: 0 3px 8px rgba(18, 101, 255, .13);
}

.history-module .history-item-actions a:hover {
  border-color: #0759ee;
  color: #fff;
  background: #0759ee;
  box-shadow: 0 4px 10px rgba(18, 101, 255, .18);
}

.history-module .history-item-actions button {
  border: 1px solid #d9e3f0;
  color: #596b84;
  background: #f9fbfd;
}

.history-module .history-item-actions button:hover {
  border-color: #efc6c2;
  color: #cf453d;
  background: #fff7f6;
}

.history-module .history-item-actions a:active,
.history-module .history-item-actions button:active {
  transform: translateY(1px);
}

.history-module .history-item-actions a:focus-visible,
.history-module .history-item-actions button:focus-visible {
  outline: 3px solid rgba(18, 101, 255, .2);
  outline-offset: 2px;
}

.history-module .history-item-actions button:disabled {
  cursor: wait;
  opacity: .6;
}

.history-module .history-loading {
  gap: 0;
  padding: 0;
}

.history-module .history-loading span {
  height: 130px;
  border-bottom: 1px solid var(--profile-surface-border);
  border-radius: 0;
}

.history-module .history-loading span:last-child {
  border-bottom: 0;
}

.history-module .history-empty {
  min-height: 340px;
  padding: 36px 20px;
}

@media (max-width: 760px) {
  .history-module .am-history article {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .history-module .am-history article > img {
    width: 112px;
    height: 86px;
  }

  .history-module .history-item-actions {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .history-module .history-item-actions a,
  .history-module .history-item-actions button {
    width: auto;
    min-width: 0;
    min-height: 40px;
    flex: 1;
  }
}

@media (max-width: 480px) {
  .history-module .am-history article {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .history-module .am-history article > img {
    width: 96px;
    height: 78px;
  }
}

/* Recent history table: aligned with finance and favorites. */
.history-module .history-card {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--profile-surface-border);
  border-radius: var(--profile-surface-radius);
  background: var(--profile-surface-bg);
  box-shadow: var(--profile-surface-shadow);
}

.history-module .am-history {
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.history-module .history-table-head,
.history-module .am-history article {
  display: grid;
  grid-template-columns: minmax(300px, 50%) 16% 20% 10%;
  align-items: center;
  column-gap: 12px;
  padding-right: 20px;
  padding-left: 20px;
}

.history-module .history-table-head {
  min-height: 42px;
  border-bottom: 1px solid var(--profile-surface-border);
  color: #8795a9;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 500;
}

.history-module .history-table-head[hidden] {
  display: none;
}

.history-module .history-table-head > span:nth-child(2),
.history-module .history-item-type,
.history-module .history-table-head > span:last-child {
  text-align: center;
}

.history-module .history-table-head > span:nth-child(3),
.history-module .history-item-time {
  text-align: right;
}

.history-module .am-history article {
  min-height: 74px;
  gap: 0 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--profile-surface-border);
  background: #fff;
  transition: background-color .18s ease;
}

.history-module .am-history article:last-child {
  border-bottom: 0;
}

.history-module .am-history article:hover {
  background: #f8fbff;
}

.history-module .history-content {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.history-module .history-content > img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: none;
}

.history-module .history-item-main {
  min-width: 0;
}

.history-module .am-history h4 {
  overflow: hidden;
  margin: 0;
  color: #1d2f4a;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-module .am-history h4 a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}

.history-module .am-history h4 a:hover {
  color: #1265db;
}

.history-module .am-history h4 a:focus-visible {
  border-radius: 2px;
  outline: 3px solid rgba(18, 101, 255, .16);
  outline-offset: 2px;
}

.history-module .am-history p {
  margin: 5px 0 0;
  color: #8997aa;
  font-size: 10px;
  line-height: 1.4;
}

.history-module .history-item-type,
.history-module .history-item-time {
  min-width: 0;
  overflow: hidden;
  color: #718096;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-module .history-item-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 0;
}

.history-module .history-item-actions button {
  width: auto;
  min-width: 70px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  color: #718096;
  background: #fff;
  box-shadow: none;
  font-size: 10px;
}

.history-module .history-item-actions button:hover {
  border-color: #efc6c2;
  color: #cf453d;
  background: #fff7f6;
}

.history-module .history-loading span {
  height: 74px;
}

.history-module .history-pagination {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 20px;
  border-top: 1px solid var(--profile-surface-border);
  background: #fff;
}

.history-module .history-pagination-total {
  color: #718096;
  font-size: 10px;
  white-space: nowrap;
}

.history-module .history-pagination-actions,
.history-module .history-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.history-module .history-page-nav,
.history-module .history-page-numbers button {
  height: 26px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid #dce4ef;
  border-radius: 5px;
  outline: 0;
  color: #60728b;
  background: #fff;
  font-size: 10px;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.history-module .history-page-numbers button {
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  flex: 0 0 26px;
  aspect-ratio: 1 / 1;
}

.history-module .history-page-nav {
  width: auto;
  min-width: 52px;
  max-width: none;
  flex: 0 0 auto;
  padding: 0 9px;
}

.history-module .history-page-nav:hover:not(:disabled),
.history-module .history-page-numbers button:hover:not(.is-active) {
  border-color: #8db5fa;
  color: #1769e8;
}

.history-module .history-page-numbers button.is-active {
  border-color: #1265ff;
  color: #fff;
  background: #1265ff;
  box-shadow: 0 3px 8px rgba(18, 101, 255, .18);
  cursor: default;
}

.history-module .history-page-nav:disabled {
  color: #bdc7d4;
  background: #f7f9fc;
  cursor: not-allowed;
}

.history-module .history-page-nav:focus-visible,
.history-module .history-page-numbers button:focus-visible {
  outline: 3px solid rgba(18, 101, 255, .16);
  outline-offset: 2px;
}

.history-module .history-page-ellipsis {
  width: 14px;
  color: #98a4b4;
  text-align: center;
}

@media (max-width: 1200px) {
  .history-module .history-table-head,
  .history-module .am-history article {
    grid-template-columns: minmax(240px, 1.7fr) 120px 150px 90px;
    column-gap: 10px;
  }
}

@media (max-width: 900px) {
  .history-module .history-table-head {
    display: none;
  }

  .history-module .am-history article {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 18px;
    padding: 14px 16px;
  }

  .history-module .history-content {
    grid-column: 1;
    grid-row: 1;
  }

  .history-module .history-item-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .history-module .history-item-type,
  .history-module .history-item-time {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--profile-surface-border);
    text-align: right;
  }

  .history-module .history-item-type::before,
  .history-module .history-item-time::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: #98a4b4;
    font-size: 10px;
    font-weight: 400;
  }

  .history-module .history-item-type {
    grid-column: 1;
    grid-row: 2;
  }

  .history-module .history-item-time {
    grid-column: 2;
    grid-row: 2;
    min-width: 160px;
  }

}

@media (max-width: 760px) {
  .history-module .am-history article {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 14px 12px;
  }

  .history-module .history-content,
  .history-module .history-item-actions,
  .history-module .history-item-type,
  .history-module .history-item-time {
    grid-column: 1;
  }

  .history-module .history-item-actions {
    grid-row: 2;
  }

  .history-module .history-item-actions button {
    width: 100%;
    min-height: 38px;
  }

  .history-module .history-item-type {
    grid-row: 3;
  }

  .history-module .history-item-time {
    grid-row: 4;
    min-width: 0;
  }

  .history-module .history-pagination {
    flex-wrap: wrap;
    padding: 10px 12px;
  }
}

@media (max-width: 480px) {
  .history-module .history-pagination-total {
    width: 100%;
    text-align: right;
  }

  .history-module .history-page-nav {
    min-width: 50px;
    padding: 0 8px;
  }
}

/* Finance ledger: continuous account activity list. */
.finance-module .finance-card {
  overflow: hidden;
  border: 1px solid var(--profile-surface-border);
  border-radius: var(--profile-surface-radius);
  background: var(--profile-surface-bg);
  box-shadow: var(--profile-surface-shadow);
}

.finance-module .finance-toolbar {
  height: 55px;
  min-width: 0;
  min-height: 55px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px 0 0;
  border-bottom: 1px solid var(--profile-surface-border);
  background: #fff;
}

.finance-module .finance-tabs {
  height: 54px;
  min-height: 54px;
  min-width: 0;
  flex: 1;
  border: 0;
  box-shadow: none;
}

.finance-module .finance-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.finance-module .finance-search {
  width: 220px;
  height: 36px;
  display: flex;
  flex: 0 0 220px;
  overflow: hidden;
  border: 1px solid #e3e9f1;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(39, 68, 108, .035);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.finance-module .finance-search:focus-within {
  border-color: #a9c7f5;
  box-shadow: 0 0 0 3px rgba(18, 101, 255, .07);
}

.finance-module .finance-search input {
  min-width: 0;
  flex: 1;
  padding: 0 4px 0 11px;
  border: 0;
  outline: 0;
  color: #263a57;
  background: transparent;
  font: inherit;
  font-size: 11px;
}

.finance-module .finance-search input::placeholder {
  color: #a7b2c1;
}

.finance-module .finance-search button {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  align-self: center;
  padding: 0;
  border: 0;
  color: #9aa9bc;
  background: transparent;
  cursor: pointer;
  transition: color .18s ease;
}

.finance-module .finance-search button:hover,
.finance-module .finance-search button:active {
  color: #1265db;
}

.finance-module .finance-search button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finance-module .finance-search button:focus-visible {
  outline: 3px solid rgba(18, 101, 255, .22);
  outline-offset: -1px;
}

.finance-module .finance-toolbar select {
  width: 112px;
  min-width: 112px;
  height: 36px;
  padding: 0 28px 0 10px;
  border-color: #e3e9f1;
  border-radius: 4px;
  color: #66768c;
  font-size: 11px;
}

.finance-module .finance-toolbar-actions .creator-filter-select {
  width: 112px;
  flex: 0 0 112px;
}

.finance-module .finance-toolbar-actions .creator-filter-select-trigger {
  border-color: #e3e9f1;
  border-radius: 4px;
  color: #66768c;
  font-size: 11px;
}

.finance-module .finance-toolbar-actions .creator-filter-select-menu button {
  font-size: 11px;
}

.finance-module .finance-list {
  display: grid;
  gap: 0;
  background: #fff;
}

.finance-module .finance-table-head,
.finance-module .finance-item {
  display: grid;
  grid-template-columns: minmax(320px, 32%) repeat(5, 12%);
  align-items: center;
  column-gap: 16px;
  padding-right: 20px;
  padding-left: 20px;
}

.finance-module .finance-table-head {
  min-height: 42px;
  border-bottom: 1px solid var(--profile-surface-border);
  color: #8795a9;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 500;
}

.finance-module .finance-table-head[hidden] {
  display: none;
}

.finance-module .finance-table-head > span:nth-child(2),
.finance-module .finance-table-head > span:nth-child(3),
.finance-module .finance-table-head > span:nth-child(4),
.finance-module .finance-table-head > span:nth-child(5),
.finance-module .finance-table-head > span:nth-child(6),
.finance-module .finance-direction,
.finance-module .finance-change,
.finance-module .finance-balance-after,
.finance-module .finance-order-number,
.finance-module .finance-item time {
  text-align: center;
}

.finance-module .finance-item {
  min-height: 74px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--profile-surface-border);
  background: #fff;
  transition: background-color .18s ease;
}

.finance-module .finance-item:last-child {
  border-bottom: 0;
}

.finance-module .finance-item:hover {
  background: #f8fbff;
}

.finance-module .finance-type {
  flex: 0 0 48px;
}

.finance-module .finance-type > i,
.finance-module .finance-resource-thumb {
  width: 48px;
  height: 48px;
  display: inline-flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  object-fit: cover;
}

.finance-module .finance-transaction {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.finance-module .finance-item-main {
  min-width: 0;
}

.finance-module .finance-item h3 {
  overflow: hidden;
  margin: 0;
  color: #1d2f4a;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-module .finance-item-main p {
  margin: 5px 0 0;
  color: #8997aa;
  font-size: 10px;
  line-height: 1.4;
}

.finance-module .finance-direction > span {
  display: inline;
  padding: 0;
  border: 0;
  font-size: 10px;
  font-weight: 600;
  background: transparent;
}

.finance-module .finance-direction > .is-income {
  color: #20a56f;
}

.finance-module .finance-direction > .is-expense {
  color: #f05c4f;
}

.finance-module .finance-change,
.finance-module .finance-balance-after,
.finance-module .finance-order-number,
.finance-module .finance-item time {
  min-width: 0;
  color: #718096;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.finance-module .finance-change b {
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.finance-module .finance-change.is-income b {
  color: #1cad75;
}

.finance-module .finance-change.is-expense b {
  color: #f05b4f;
}

.finance-module .finance-balance-after strong {
  color: #60728b;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.finance-module .finance-order-number,
.finance-module .finance-item time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-module .finance-list-loading {
  display: grid;
  gap: 0;
}

.finance-module .finance-list-loading span {
  display: block;
  height: 96px;
  border-bottom: 1px solid var(--profile-surface-border);
  background: linear-gradient(90deg, #f2f5f9 25%, #fafbfd 45%, #f2f5f9 65%);
  background-size: 200% 100%;
  animation: invite-loading 1.3s linear infinite;
}

.finance-module .finance-list-loading span:last-child {
  border-bottom: 0;
}

.finance-module .finance-list-empty {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 20px;
  text-align: center;
}

.finance-module .finance-list-empty img {
  width: 52px;
  height: 52px;
  margin-bottom: 15px;
  object-fit: contain;
  opacity: .72;
}

.finance-module .finance-list-empty strong,
.finance-module .finance-list-empty span {
  display: block;
}

.finance-module .finance-list-empty strong {
  color: #42546e;
  font-size: 14px;
}

.finance-module .finance-list-empty span {
  margin-top: 8px;
  color: #96a1b1;
  font-size: 11px;
}

.finance-module .finance-list-empty button {
  min-width: 98px;
  min-height: 38px;
  margin-top: 14px;
  border: 1px solid #b9cff8;
  border-radius: 6px;
  color: #2167e8;
  background: #fff;
  cursor: pointer;
}

.finance-module .finance-list-empty.is-error strong {
  color: #d95f51;
}

.finance-module .finance-pagination {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 20px;
  border-top: 1px solid var(--profile-surface-border);
  background: #fff;
}

.finance-module .finance-pagination-total {
  color: #718096;
  font-size: 10px;
  white-space: nowrap;
}

.finance-module .finance-pagination-actions,
.finance-module .finance-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.finance-module .finance-page-arrow,
.finance-module .finance-page-numbers button {
  height: 26px;
  min-height: 26px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #dce4ef;
  border-radius: 5px;
  outline: 0;
  color: #60728b;
  background: #fff;
  font-size: 10px;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.finance-module .finance-page-numbers button {
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  flex: 0 0 26px;
  aspect-ratio: 1 / 1;
}

.finance-module .finance-page-arrow {
  width: auto;
  min-width: 52px;
  max-width: none;
  flex: 0 0 auto;
  padding: 0 9px;
}

.finance-module .finance-page-arrow:hover:not(:disabled),
.finance-module .finance-page-numbers button:hover:not(.is-active) {
  border-color: #8db5fa;
  color: #1769e8;
}

.finance-module .finance-page-numbers button.is-active {
  border-color: #1265ff;
  color: #fff;
  background: #1265ff;
  box-shadow: 0 3px 8px rgba(18, 101, 255, .18);
  cursor: default;
}

.finance-module .finance-page-arrow:disabled {
  color: #bdc7d4;
  background: #f7f9fc;
  cursor: not-allowed;
}

.finance-module .finance-page-arrow:focus-visible,
.finance-module .finance-page-numbers button:focus-visible {
  outline: 3px solid rgba(18, 101, 255, .16);
  outline-offset: 2px;
}

.finance-module .finance-page-ellipsis {
  width: 14px;
  color: #98a4b4;
  text-align: center;
}

@media (max-width: 1200px) {
  .finance-module .finance-table-head,
  .finance-module .finance-item {
    grid-template-columns: minmax(220px, 1.6fr) repeat(5, minmax(92px, 1fr));
    column-gap: 12px;
  }
}

@media (max-width: 900px) {
  .finance-module .finance-table-head {
    display: none;
  }

  .finance-module .finance-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 18px;
    padding: 14px 16px;
  }

  .finance-module .finance-transaction {
    grid-column: 1;
    grid-row: 1;
  }

  .finance-module .finance-direction {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .finance-module .finance-change,
  .finance-module .finance-balance-after,
  .finance-module .finance-order-number,
  .finance-module .finance-item time {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--profile-surface-border);
  }

  .finance-module .finance-change::before,
  .finance-module .finance-balance-after::before,
  .finance-module .finance-order-number::before,
  .finance-module .finance-item time::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: #98a4b4;
    font-size: 10px;
    font-weight: 400;
  }

  .finance-module .finance-change {
    grid-column: 1;
    grid-row: 2;
  }

  .finance-module .finance-balance-after {
    grid-column: 2;
    grid-row: 2;
    min-width: 150px;
  }

  .finance-module .finance-order-number {
    grid-column: 1;
    grid-row: 3;
  }

  .finance-module .finance-item time {
    grid-column: 2;
    grid-row: 3;
  }
}

@media (max-width: 760px) {
  .finance-module .finance-toolbar {
    height: auto;
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 0 0 12px;
  }

  .finance-module .finance-tabs {
    width: 100%;
  }

  .finance-module .finance-toolbar-actions {
    padding: 0 12px;
  }

  .finance-module .finance-search {
    width: auto;
    min-width: 0;
    min-height: 42px;
    flex: 1;
  }

  .finance-module .finance-toolbar select {
    height: 42px;
    flex: 0 0 108px;
  }

  .finance-module .finance-toolbar-actions .creator-filter-select {
    flex: 0 0 108px;
  }

  .finance-module .finance-toolbar-actions .creator-filter-select-trigger {
    height: 42px;
  }

  .finance-module .finance-pagination {
    flex-wrap: wrap;
  }

  .finance-module .finance-item {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px 12px;
  }

  .finance-module .finance-type > i,
  .finance-module .finance-resource-thumb {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 480px) {
  .finance-module .finance-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-module .finance-toolbar select {
    width: 100%;
    flex-basis: 40px;
  }

  .finance-module .finance-toolbar-actions .creator-filter-select {
    width: 100%;
    flex: 1 1 42px;
  }

  .finance-module .finance-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
  }

  .finance-module .finance-balance-after {
    min-width: 118px;
  }

  .finance-module .finance-order-number,
  .finance-module .finance-item time {
    grid-column: 1 / -1;
  }

  .finance-module .finance-order-number {
    grid-row: 3;
  }

  .finance-module .finance-item time {
    grid-row: 4;
  }

  .finance-module .finance-pagination {
    gap: 8px;
    padding: 12px;
  }

  .finance-module .finance-pagination-total {
    width: 100%;
    text-align: right;
  }

  .finance-module .finance-pagination-actions,
  .finance-module .finance-page-numbers {
    gap: 4px;
  }

  .finance-module .finance-page-numbers button {
    width: 26px;
    height: 26px;
    min-width: 26px;
    max-width: 26px;
    min-height: 26px;
    flex-basis: 26px;
  }

  .finance-module .finance-page-arrow {
    min-width: 50px;
    height: 26px;
    padding: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .finance-module .finance-list-loading span {
    animation: none;
  }
}

/* Gradient level carousel stage */
.pc-section.pc-level-overview { position: relative; overflow: hidden; padding: 28px 26px 22px; border-color: var(--profile-surface-border); background: #fff; box-shadow: var(--profile-surface-shadow); }
.pc-section.pc-level-overview::before,
.pc-section.pc-level-overview::after { content: ""; position: absolute; pointer-events: none; opacity: .24; }
.pc-section.pc-level-overview::before,
.pc-section.pc-level-overview::after { display: none; }
.pc-level-overview > header { position: relative; z-index: 2; }
.pc-level-overview > header button { height: 34px; padding: 0 15px; border: 1px solid rgba(18,101,255,.38); border-radius: 17px; color: #1265db; background: rgba(255,255,255,.62); font-size: 11px; cursor: pointer; }
.pc-level-overview .pc-level-carousel { z-index: 2; margin-top: 4px; padding: 0 42px; }
.pc-level-overview .pc-level-viewport { padding: 18px 6px; }
.pc-level-overview .pc-level-cards { align-items: center; gap: 18px; }
.pc-level-overview .pc-level-cards article { height: 250px; position: relative; overflow: hidden; display: flex; flex: 0 0 calc((100% - 72px) / 5); flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; padding: 20px 14px 16px; border-color: rgba(255,255,255,.82); border-radius: 12px; background: linear-gradient(180deg, rgba(240,252,250,.96) 0%, rgba(255,255,255,.96) 62%); box-shadow: 0 10px 24px rgba(69,105,166,.08), inset 0 0 0 1px rgba(136,185,237,.12); text-align: center; }
.pc-level-overview .pc-level-cards article:nth-child(3n+2) { background: linear-gradient(180deg, rgba(237,246,255,.98) 0%, rgba(255,255,255,.96) 62%); }
.pc-level-overview .pc-level-cards article:nth-child(3n) { background: linear-gradient(180deg, rgba(255,248,235,.98) 0%, rgba(255,255,255,.96) 62%); }
.pc-level-overview .pc-level-cards article.is-current { height: 280px; border-color: rgba(94,112,255,.65); background: radial-gradient(circle at 50% 22%, rgba(255,255,255,1) 0 20%, rgba(235,238,255,.98) 58%, rgba(255,255,255,.98) 100%); box-shadow: 0 14px 32px rgba(88,102,226,.18); transform: scale(1.02); }
.pc-level-overview .pc-level-cards article > img { width: 86px; height: 86px; display: block; flex: 0 0 auto; object-fit: contain; filter: none; }
.pc-level-overview .pc-level-cards article:nth-child(3n+1) > img { filter: hue-rotate(70deg) saturate(.72); }
.pc-level-overview .pc-level-cards article:nth-child(3n) > img { filter: hue-rotate(285deg) saturate(1.25); }
.pc-level-overview .pc-level-cards article.is-current > img { width: 104px; height: 104px; filter: saturate(1.12); }
.pc-level-overview .pc-level-cards article > strong { margin-top: -53px; color: #fff; font-size: 20px; line-height: 1; text-shadow: 0 1px 4px rgba(42,72,160,.28); }
.pc-level-overview .pc-level-cards article.is-current > strong { margin-top: -63px; font-size: 24px; }
.pc-level-overview .pc-level-cards article > span { margin-top: 38px; color: #517995; font-size: 13px; font-weight: 600; }
.pc-level-overview .pc-level-cards article.is-current > span { margin-top: 44px; color: #405fda; }
.pc-level-overview .pc-level-cards article > small { margin-top: 18px; color: #5c6d84; font-size: 11px; }
.pc-level-overview .pc-level-cards article > small::before { content: "閺嶇绺鹃弶鍐抄"; display: block; margin-bottom: 7px; color: #8a97a9; font-size: 10px; }
.pc-level-card-perks { display: none; }
.pc-level-card-perks img { width: 30px !important; height: 30px !important; padding: 6px; border-radius: 50%; background: rgba(232,241,255,.9); filter: none !important; }
.pc-level-overview .pc-level-cards article > b { display: none; }
.pc-level-overview .pc-level-cards article.is-current > b { display: block; position: absolute; top: 13px; right: -31px; width: 112px; margin: 0; padding: 5px 0; border-radius: 0; color: #fff; background: linear-gradient(90deg,#5168f4,#7357e8); font-size: 10px; text-align: center; transform: rotate(38deg); }
.pc-level-overview .pc-level-arrow { width: 38px; height: 38px; border-color: rgba(85,125,207,.12); color: #3d82ef; box-shadow: 0 7px 20px rgba(63,102,171,.12); font-size: 28px; }
.pc-level-overview .pc-level-arrow.prev { left: -1px; }
.pc-level-overview .pc-level-arrow.next { right: -1px; }
.pc-level-overview .pc-level-benefits { position: relative; z-index: 2; border: 1px solid var(--profile-surface-border); background: #f9fbfe; backdrop-filter: none; }

@media (max-width: 1180px) {
  .pc-level-overview .pc-level-cards article { flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width: 520px) {
  .pc-section.pc-level-overview { padding-right: 14px; padding-left: 14px; }
  .pc-level-overview .pc-level-carousel { padding: 0 34px; }
  .pc-level-overview .pc-level-cards article { flex-basis: 100%; }
}

/* Level stage proportions aligned to the approved reference */
.pc-section.pc-level-overview { padding: 26px 26px 20px; }
.pc-level-overview .pc-level-carousel { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 42px; }
.pc-level-overview .pc-level-viewport { width: 100%; max-width: 1100px; margin: 0 auto; padding: 14px 12px; }
.pc-level-overview .pc-level-cards { gap: 28px; }
.pc-level-overview .pc-level-cards article { width: 190px; height: 300px; flex: 0 0 190px; display: block; padding: 0; border-radius: 12px; }
.pc-level-overview .pc-level-cards article.is-current { width: 190px; height: 330px; flex-basis: 190px; transform: scale(1.08); }
.pc-level-overview .pc-level-cards article > img { width: 112px; height: 112px; position: absolute; top: 20px; left: 50%; margin: 0; transform: translateX(-50%); }
.pc-level-overview .pc-level-cards article.is-current > img { width: 138px; height: 138px; top: 10px; }
.pc-level-overview .pc-level-cards article > strong { width: 100%; position: absolute; top: 68px; left: 0; margin: 0; color: #fff; font-size: 20px; line-height: 1; text-align: center; text-shadow: 0 1px 5px rgba(39,67,146,.32); }
.pc-level-overview .pc-level-cards article.is-current > strong { top: 67px; margin: 0; font-size: 25px; }
.pc-level-overview .pc-level-cards article > span { width: 100%; position: absolute; top: 139px; left: 0; margin: 0; color: #4e8d86; font-size: 13px; text-align: center; }
.pc-level-overview .pc-level-cards article.is-current > span { top: 157px; margin: 0; color: #405fda; }
.pc-level-overview .pc-level-cards article > small { width: calc(100% - 24px); position: absolute; top: 202px; left: 12px; margin: 0; color: #263b59; font-size: 12px; line-height: 1.45; text-align: center; }
.pc-level-overview .pc-level-cards article.is-current > small { top: 228px; }
.pc-level-overview .pc-level-cards article > small::before { margin-bottom: 9px; color: #73839a; font-size: 11px; }
.pc-level-overview .pc-level-card-perks { width: 100%; position: absolute; left: 0; bottom: 24px; margin: 0; }
.pc-level-overview .pc-level-cards article.is-current .pc-level-card-perks { bottom: 25px; }
.pc-level-overview .pc-level-card-perks img { width: 34px !important; height: 34px !important; position: static !important; margin: 0 !important; padding: 7px; transform: none !important; }
.pc-level-overview .pc-level-cards article:nth-child(3) { background: linear-gradient(180deg, rgba(235,250,247,.98), rgba(255,255,255,.98) 66%); }
.pc-level-overview .pc-level-cards article:nth-child(4) { background: linear-gradient(180deg, rgba(235,245,255,.98), rgba(255,255,255,.98) 66%); }
.pc-level-overview .pc-level-cards article:nth-child(5) { background: linear-gradient(180deg, rgba(237,239,255,.99), rgba(255,255,255,.99) 68%); }
.pc-level-overview .pc-level-cards article:nth-child(6) { background: linear-gradient(180deg, rgba(255,246,230,.99), rgba(255,255,255,.98) 66%); }
.pc-level-overview .pc-level-cards article:nth-child(7) { background: linear-gradient(180deg, rgba(245,237,255,.99), rgba(255,255,255,.98) 66%); }
.pc-level-overview .pc-level-cards article:nth-child(3) > img { filter: hue-rotate(72deg) saturate(.72); }
.pc-level-overview .pc-level-cards article:nth-child(4) > img { filter: none; }
.pc-level-overview .pc-level-cards article:nth-child(5) > img { filter: hue-rotate(20deg) saturate(1.1); }
.pc-level-overview .pc-level-cards article:nth-child(6) > img { filter: hue-rotate(145deg) saturate(1.35); }
.pc-level-overview .pc-level-cards article:nth-child(7) > img { filter: hue-rotate(35deg) saturate(1.28); }
.pc-level-overview .pc-level-cards article:nth-child(4) > span { color: #2d73cc; }
.pc-level-overview .pc-level-cards article:nth-child(6) > span { color: #d88620; }
.pc-level-overview .pc-level-cards article:nth-child(7) > span { color: #7656ce; }
.pc-level-overview .pc-level-arrow { top: 50%; }
.pc-level-overview .pc-level-benefits { min-height: 88px; margin-top: 0; }

@media (max-width: 1180px) {
  .pc-level-overview .pc-level-viewport { max-width: 520px; }
  .pc-level-overview .pc-level-cards article,
  .pc-level-overview .pc-level-cards article.is-current { width: calc((100% - 28px) / 2); flex-basis: calc((100% - 28px) / 2); }
}
@media (max-width: 520px) {
  .pc-level-overview .pc-level-viewport { max-width: 260px; }
  .pc-level-overview .pc-level-cards article,
  .pc-level-overview .pc-level-cards article.is-current { width: 100%; flex-basis: 100%; }
}

/* Definitive level-path layout — keep after legacy profile variants. */
body[data-page="profile"] .pc-section.pc-level-overview { padding: 28px 28px 24px; }
body[data-page="profile"] .pc-level-overview > .pc-level-overview-head { margin-bottom: 18px; }
body[data-page="profile"] .pc-level-overview .pc-level-carousel { max-width: 1380px; padding: 0 44px; }
body[data-page="profile"] .pc-level-overview .pc-level-viewport { width: 100%; max-width: none; overflow: visible; padding: 16px 4px 18px; }
body[data-page="profile"] .pc-level-overview .pc-level-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; overflow: visible; padding: 0; }
body[data-page="profile"] .pc-level-overview .pc-level-cards article,
body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current {
  width: auto;
  height: 210px;
  flex-basis: auto;
}
body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current { transform: translateY(-6px); }
body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current:hover { transform: translateY(-8px); }
body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current > .pc-level-state {
  width: auto;
  position: static;
  top: auto;
  right: auto;
  display: block;
  margin: auto 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 9px;
  transform: none;
}
body[data-page="profile"] .pc-level-overview .pc-level-arrow { width: 34px; height: 34px; font-size: 0; }
body[data-page="profile"] .pc-level-overview .pc-level-benefits {
  min-height: 84px;
  display: grid;
  grid-template-columns: 112px repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
}
body[data-page="profile"] .pc-level-overview .pc-level-benefits > strong { padding: 0 14px; }
body[data-page="profile"] .pc-level-overview .pc-level-benefits span { justify-content: flex-start; }

@media (max-width: 1180px) {
  body[data-page="profile"] .pc-level-overview .pc-level-carousel { padding: 0 38px; }
  body[data-page="profile"] .pc-level-overview .pc-level-viewport { max-width: none; overflow-x: auto; }
  body[data-page="profile"] .pc-level-overview .pc-level-cards { min-width: 880px; grid-template-columns: repeat(5, 160px); gap: 20px; }
  body[data-page="profile"] .pc-level-overview .pc-level-cards article,
  body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current { width: 160px; flex-basis: 160px; }
  body[data-page="profile"] .pc-level-overview .pc-level-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body[data-page="profile"] .pc-section.pc-level-overview { padding: 22px 16px; }
  body[data-page="profile"] .pc-level-overview .pc-level-carousel { padding: 0; }
  body[data-page="profile"] .pc-level-overview .pc-level-cards { min-width: max-content; grid-template-columns: repeat(5, 176px); }
  body[data-page="profile"] .pc-level-overview .pc-level-cards article,
  body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current { width: 176px; flex-basis: 176px; }
  body[data-page="profile"] .pc-level-overview .pc-level-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Creative track final sizing guard. */
body[data-page="profile"] .pc-section.pc-level-overview { padding: 28px 30px 26px; }
body[data-page="profile"] .pc-level-overview .pc-level-carousel { max-width: 1390px; padding: 0 46px; }
body[data-page="profile"] .pc-level-overview .pc-level-viewport { min-height: 214px; max-width: none; padding: 24px 6px 10px; }
body[data-page="profile"] .pc-level-overview .pc-level-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
body[data-page="profile"] .pc-level-overview .pc-level-cards article,
body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current { width: auto; height: 178px; min-height: 178px; flex-basis: auto; }
body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current { transform: translateY(-8px); }
body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current:hover { transform: translateY(-12px); }
body[data-page="profile"] .pc-level-overview .pc-level-benefits {
  min-height: 92px;
  grid-template-columns: 118px repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
}

@media (max-width: 1180px) {
  body[data-page="profile"] .pc-level-overview .pc-level-viewport { overflow-x: auto; }
  body[data-page="profile"] .pc-level-overview .pc-level-cards { min-width: 900px; grid-template-columns: repeat(5, 164px); gap: 22px; }
  body[data-page="profile"] .pc-level-overview .pc-level-cards article,
  body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current { width: 164px; flex-basis: 164px; }
  body[data-page="profile"] .pc-level-overview .pc-level-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body[data-page="profile"] .pc-section.pc-level-overview { padding: 22px 16px 18px; }
  body[data-page="profile"] .pc-level-overview .pc-level-carousel { padding: 0; }
  body[data-page="profile"] .pc-level-overview .pc-level-viewport { min-height: 210px; }
  body[data-page="profile"] .pc-level-overview .pc-level-cards { min-width: max-content; grid-template-columns: repeat(5, 174px); }
  body[data-page="profile"] .pc-level-overview .pc-level-cards article,
  body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current { width: 174px; flex-basis: 174px; }
  body[data-page="profile"] .pc-level-overview .pc-level-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Creative engineer progression track v3. */
body[data-page="profile"] .pc-section.pc-level-overview {
  position: relative;
  isolation: isolate;
  padding: 28px 30px 26px;
  overflow: hidden;
  border: 1px solid #e4ebf5;
  background:
    radial-gradient(circle at 50% 18%, rgba(55, 126, 246, .10), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

body[data-page="profile"] .pc-section.pc-level-overview::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(rgba(58, 112, 191, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 112, 191, .035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 78%);
  content: "";
}

body[data-page="profile"] .pc-section.pc-level-overview::after {
  width: 520px;
  height: 180px;
  position: absolute;
  z-index: -1;
  top: 72px;
  left: 50%;
  border: 1px solid rgba(56, 125, 239, .08);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
}

body[data-page="profile"] .pc-level-current-summary {
  min-width: 286px;
  padding: 11px 15px;
  border: 1px solid rgba(111, 159, 230, .24);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #152b4c, #1d3c68);
  box-shadow: 0 9px 24px rgba(23, 49, 84, .12);
}

body[data-page="profile"] .pc-level-current-summary > span {
  background: #2c78f3;
  box-shadow: 0 4px 10px rgba(44, 120, 243, .26);
}

body[data-page="profile"] .pc-level-current-summary > strong { color: #fff; }
body[data-page="profile"] .pc-level-current-summary > small { color: #aebed3; }

body[data-page="profile"] .pc-level-overview .pc-level-carousel {
  max-width: 1390px;
  margin-top: 4px;
  padding: 0 46px;
}

body[data-page="profile"] .pc-level-overview .pc-level-viewport {
  min-height: 214px;
  padding: 24px 6px 10px;
}

body[data-page="profile"] .pc-level-overview .pc-level-cards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 22px;
}

body[data-page="profile"] .pc-level-overview .pc-level-cards article,
body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current {
  width: auto;
  height: 178px;
  min-height: 178px;
  position: relative;
  display: flex;
  flex-basis: auto;
  padding: 0 10px 8px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body[data-page="profile"] .pc-level-overview .pc-level-cards article:nth-child(2),
body[data-page="profile"] .pc-level-overview .pc-level-cards article:nth-child(4) {
  transform: translateY(10px);
}

body[data-page="profile"] .pc-level-overview .pc-level-cards article:nth-child(1),
body[data-page="profile"] .pc-level-overview .pc-level-cards article:nth-child(5) {
  transform: translateY(20px);
}

body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current {
  transform: translateY(-8px);
}

body[data-page="profile"] .pc-level-overview .pc-level-cards article:hover {
  border-color: transparent;
  box-shadow: none;
  transform: translateY(-4px);
}

body[data-page="profile"] .pc-level-overview .pc-level-cards article:nth-child(2):hover,
body[data-page="profile"] .pc-level-overview .pc-level-cards article:nth-child(4):hover {
  transform: translateY(6px);
}

body[data-page="profile"] .pc-level-overview .pc-level-cards article:nth-child(1):hover,
body[data-page="profile"] .pc-level-overview .pc-level-cards article:nth-child(5):hover {
  transform: translateY(16px);
}

body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current:hover {
  transform: translateY(-12px);
}

body[data-page="profile"] .pc-level-overview .pc-level-cards article:focus-visible {
  border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(44, 120, 243, .16);
}

body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current::after {
  width: 106px;
  height: 106px;
  position: absolute;
  z-index: -1;
  top: -8px;
  left: 50%;
  border: 1px dashed rgba(55, 126, 246, .48);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
  animation: pc-level-orbit 12s linear infinite;
}

body[data-page="profile"] .pc-level-medallion {
  width: 76px;
  height: 84px;
  flex: 0 0 84px;
  border: 0;
  border-radius: 0;
  color: #63738a;
  background: linear-gradient(145deg, #e8edf4, #cbd5e2);
  box-shadow: none;
  filter: drop-shadow(0 8px 10px rgba(38, 58, 86, .10));
  clip-path: polygon(25% 4%, 75% 4%, 98% 25%, 88% 76%, 50% 98%, 12% 76%, 2% 25%);
}

body[data-page="profile"] .pc-level-medallion::before {
  position: absolute;
  inset: 4px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .96), rgba(243, 247, 252, .82));
  clip-path: inherit;
  content: "";
}

body[data-page="profile"] .pc-level-medallion::after {
  width: 8px;
  height: 8px;
  right: 13px;
  bottom: 14px;
  z-index: 2;
  border: 2px solid #fff;
  background: #a9b5c5;
}

body[data-page="profile"] .pc-level-medallion > span,
body[data-page="profile"] .pc-level-medallion > strong {
  position: relative !important;
  z-index: 2;
}

body[data-page="profile"] .pc-level-medallion > span {
  font-size: 8px !important;
  letter-spacing: 2px;
}

body[data-page="profile"] .pc-level-medallion > strong {
  margin-top: 4px !important;
  font-size: 24px !important;
}

body[data-page="profile"] .pc-level-cards article.is-reached .pc-level-medallion {
  color: #16886a;
  background: linear-gradient(145deg, #4ad0aa, #1d9d79);
  filter: drop-shadow(0 8px 12px rgba(29, 157, 121, .18));
}

body[data-page="profile"] .pc-level-cards article.is-reached .pc-level-medallion::before {
  background: linear-gradient(155deg, #f4fffb, #dff8f0);
}

body[data-page="profile"] .pc-level-cards article.is-reached .pc-level-medallion::after {
  background: #1ba17c;
}

body[data-page="profile"] .pc-level-cards article.is-current .pc-level-medallion {
  width: 92px;
  height: 100px;
  flex-basis: 100px;
  color: #fff;
  background: linear-gradient(145deg, #7b7df7, #2378f3 58%, #135dc9);
  filter: drop-shadow(0 13px 18px rgba(35, 120, 243, .28));
}

body[data-page="profile"] .pc-level-cards article.is-current .pc-level-medallion::before {
  inset: 5px;
  background: linear-gradient(150deg, rgba(77, 144, 250, .92), rgba(31, 103, 224, .96));
}

body[data-page="profile"] .pc-level-cards article.is-current .pc-level-medallion::after {
  right: 15px;
  bottom: 17px;
  background: #8de4ff;
}

body[data-page="profile"] .pc-level-cards article.is-current .pc-level-medallion > strong {
  font-size: 29px !important;
}

body[data-page="profile"] .pc-level-card-copy {
  gap: 4px;
  margin-top: 10px;
}

body[data-page="profile"] .pc-level-card-copy > strong {
  color: #1d3452 !important;
  font-size: 13px !important;
}

body[data-page="profile"] .pc-level-card-copy > small {
  color: #8090a6 !important;
  font-size: 9px !important;
}

body[data-page="profile"] .pc-level-overview .pc-level-cards article > .pc-level-state,
body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current > .pc-level-state {
  position: static;
  margin: 8px 0 0;
  padding: 3px 9px;
  border: 1px solid #dce4ee;
  color: #7d8b9e;
  background: rgba(255, 255, 255, .82);
  font-size: 8px;
  transform: none;
}

body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-reached > .pc-level-state {
  border-color: #c8eade;
  color: #178564;
  background: #ecfaf5;
}

body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current > .pc-level-state {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(90deg, #2476ef, #5d72f1);
  box-shadow: 0 5px 12px rgba(36, 118, 239, .18);
}

body[data-page="profile"] .pc-level-overview .pc-level-connectors {
  height: 64px;
  left: 8%;
  right: 8%;
  top: 58px;
  border-top: 2px solid transparent;
  border-radius: 50% 50% 0 0;
  background:
    linear-gradient(#f9fbff, #f9fbff) padding-box,
    linear-gradient(90deg, #32b18d 0 49%, #3b82f6 49% 54%, #d7e0ec 54% 100%) border-box;
  transform: none;
}

body[data-page="profile"] .pc-level-overview .pc-level-connectors i {
  width: 6px;
  height: 6px;
  top: -4px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: none;
}

body[data-page="profile"] .pc-level-overview .pc-level-connectors i:nth-child(1) { left: 24%; background: #28a985; }
body[data-page="profile"] .pc-level-overview .pc-level-connectors i:nth-child(2) { left: 49%; background: #3b82f6; }
body[data-page="profile"] .pc-level-overview .pc-level-connectors i:nth-child(3) { left: 74%; background: #c4cedc; }
body[data-page="profile"] .pc-level-overview .pc-level-connectors i:nth-child(4) { display: none; }

body[data-page="profile"] .pc-level-overview .pc-level-benefits {
  min-height: 92px;
  grid-template-columns: 118px repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(104, 149, 211, .18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% -20%, rgba(72, 133, 231, .30), transparent 28%),
    linear-gradient(135deg, #142944, #1b3a61);
  box-shadow: 0 10px 24px rgba(17, 39, 68, .10);
}

body[data-page="profile"] .pc-level-overview .pc-level-benefits > strong {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  background: linear-gradient(145deg, rgba(55, 126, 246, .92), rgba(84, 101, 231, .92));
}

body[data-page="profile"] .pc-level-overview .pc-level-benefits span {
  min-height: 64px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .055);
}

body[data-page="profile"] .pc-level-overview .pc-level-benefits span::before {
  background: #63b8ff;
  box-shadow: 0 0 0 4px rgba(99, 184, 255, .11);
}

body[data-page="profile"] .pc-level-overview .pc-level-benefits span strong { color: #f7fbff; }
body[data-page="profile"] .pc-level-overview .pc-level-benefits span small { color: #aebdd0; }

@keyframes pc-level-orbit {
  to { transform: translateX(-50%) rotate(360deg); }
}

@media (max-width: 1180px) {
  body[data-page="profile"] .pc-level-overview .pc-level-viewport { overflow-x: auto; }
  body[data-page="profile"] .pc-level-overview .pc-level-cards { min-width: 900px; grid-template-columns: repeat(5, 164px); }
  body[data-page="profile"] .pc-level-overview .pc-level-cards article,
  body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current { width: 164px; flex-basis: 164px; }
  body[data-page="profile"] .pc-level-overview .pc-level-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-page="profile"] .pc-level-overview .pc-level-benefits > strong { min-height: 64px; }
}

@media (max-width: 760px) {
  body[data-page="profile"] .pc-section.pc-level-overview { padding: 22px 16px 18px; }
  body[data-page="profile"] .pc-level-overview .pc-level-viewport { min-height: 210px; }
  body[data-page="profile"] .pc-level-overview .pc-level-cards { min-width: max-content; grid-template-columns: repeat(5, 174px); }
  body[data-page="profile"] .pc-level-overview .pc-level-cards article,
  body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current { width: 174px; flex-basis: 174px; }
  body[data-page="profile"] .pc-level-overview .pc-level-connectors { display: none; }
  body[data-page="profile"] .pc-level-overview .pc-level-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current::after { animation: none; }
}

/* Personal center level path v2 */
.pc-section.pc-level-overview {
  --level-primary: #246feb;
  --level-primary-soft: #eef5ff;
  --level-success: #24a47a;
  padding: 28px 28px 24px;
  overflow: hidden;
}

.pc-level-overview .pc-level-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.pc-level-current-summary {
  min-width: 272px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  padding: 10px 14px;
  border: 1px solid #e1ebfa;
  border-radius: 10px;
  background: #f7faff;
}

.pc-level-current-summary > span {
  grid-row: 1 / 3;
  padding: 5px 9px;
  border-radius: 6px;
  color: #fff;
  background: var(--level-primary);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

.pc-level-current-summary > strong {
  color: #18345c;
  font-size: 13px;
  line-height: 1.35;
}

.pc-level-current-summary > small {
  color: #8291a7;
  font-size: 10px;
  line-height: 1.35;
}

.pc-level-overview .pc-level-carousel {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 44px;
}

.pc-level-overview .pc-level-viewport {
  width: 100%;
  max-width: none;
  overflow: visible;
  padding: 16px 4px 18px;
}

.pc-level-overview .pc-level-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
  overflow: visible;
  padding: 0;
  transform: none !important;
}

.pc-level-overview .pc-level-cards article,
.pc-level-overview .pc-level-cards article.is-current {
  width: auto;
  min-width: 0;
  height: 210px;
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 18px 14px 16px;
  overflow: hidden;
  border: 1px solid #e6edf7;
  border-radius: 14px;
  outline: none;
  background: #fff;
  box-shadow: 0 5px 15px rgba(37, 62, 99, .045);
  text-align: center;
  cursor: pointer;
  transform: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.pc-level-overview .pc-level-cards article:hover {
  border-color: #cbdcf4;
  box-shadow: 0 9px 22px rgba(37, 76, 132, .08);
  transform: translateY(-3px);
}

.pc-level-overview .pc-level-cards article:focus-visible {
  box-shadow: 0 0 0 3px rgba(36, 111, 235, .16), 0 9px 22px rgba(37, 76, 132, .08);
}

.pc-level-overview .pc-level-cards article.is-reached {
  border-color: #d8ebe6;
  background: linear-gradient(180deg, #f7fcfb 0%, #fff 72%);
}

.pc-level-overview .pc-level-cards article.is-current {
  z-index: 3;
  border-color: #76a8fa;
  background: linear-gradient(180deg, #edf5ff 0%, #fff 76%);
  box-shadow: 0 10px 28px rgba(36, 111, 235, .13);
  transform: translateY(-6px);
}

.pc-level-overview .pc-level-cards article.is-current:hover {
  transform: translateY(-8px);
}

.pc-level-medallion {
  width: 68px;
  height: 68px;
  position: relative;
  display: grid;
  place-content: center;
  gap: 1px;
  flex: 0 0 68px;
  border: 1px solid #d9e3ef;
  border-radius: 50%;
  color: #6f7f95;
  background: #f3f6fa;
  box-shadow: inset 0 0 0 5px #fff;
}

.pc-level-medallion::after {
  width: 8px;
  height: 8px;
  position: absolute;
  right: 4px;
  bottom: 7px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #bdc7d5;
  content: "";
}

.pc-level-medallion > span,
.pc-level-medallion > strong {
  position: static !important;
  display: block;
  margin: 0 !important;
  color: inherit !important;
  line-height: 1 !important;
  text-align: center;
  text-shadow: none !important;
}

.pc-level-medallion > span {
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.pc-level-medallion > strong {
  margin-top: 3px !important;
  font-family: Arial, sans-serif;
  font-size: 23px !important;
  font-weight: 750;
}

.pc-level-cards article.is-reached .pc-level-medallion {
  border-color: #bfe3d9;
  color: #238d6b;
  background: #e9f8f3;
}

.pc-level-cards article.is-reached .pc-level-medallion::after {
  background: var(--level-success);
}

.pc-level-cards article.is-current .pc-level-medallion {
  border-color: #a9c9ff;
  color: var(--level-primary);
  background: #dfedff;
  box-shadow: inset 0 0 0 5px #fff, 0 6px 16px rgba(36, 111, 235, .12);
}

.pc-level-cards article.is-current .pc-level-medallion::after {
  background: var(--level-primary);
}

.pc-level-card-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.pc-level-card-copy > strong,
.pc-level-card-copy > small {
  position: static !important;
  width: auto !important;
  margin: 0 !important;
  text-align: center !important;
}

.pc-level-card-copy > strong {
  color: #203754 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 700;
}

.pc-level-card-copy > small {
  color: #7d8da3 !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}

.pc-level-card-copy > small::before {
  display: none !important;
}

.pc-level-overview .pc-level-cards article > .pc-level-state {
  width: auto;
  position: static;
  margin: auto 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  color: #7f8c9e;
  background: #f0f3f7;
  font-size: 9px;
  line-height: 1.4;
  font-weight: 650;
  transform: none;
}

.pc-level-overview .pc-level-cards article.is-reached > .pc-level-state {
  color: #218564;
  background: #e9f7f2;
}

.pc-level-overview .pc-level-cards article.is-current > .pc-level-state {
  color: #fff;
  background: var(--level-primary);
}

.pc-level-overview .pc-level-connectors {
  height: 2px;
  left: 9%;
  right: 9%;
  top: 49px;
  background: linear-gradient(90deg, #78c8b3 0 50%, #dce4ef 50% 100%);
}

.pc-level-overview .pc-level-connectors::before,
.pc-level-overview .pc-level-connectors::after {
  display: none;
}

.pc-level-overview .pc-level-connectors i {
  width: 8px;
  height: 8px;
  top: -3px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #c4cedc;
  box-shadow: 0 0 0 1px #d7e0ec;
  transform: none;
}

.pc-level-overview .pc-level-connectors i:nth-child(1) { left: 24%; background: #57b99f; }
.pc-level-overview .pc-level-connectors i:nth-child(2) { left: 49%; background: #4c8ff3; }
.pc-level-overview .pc-level-connectors i:nth-child(3) { left: 74%; background: #c4cedc; }
.pc-level-overview .pc-level-connectors i:nth-child(4) { display: none; }

.pc-level-overview .pc-level-arrow {
  width: 34px;
  height: 34px;
  top: 50%;
  display: grid;
  place-items: center;
  border: 1px solid #dfe7f2;
  border-radius: 50%;
  color: #72839a;
  background: #fff;
  box-shadow: 0 5px 14px rgba(32, 57, 92, .08);
  font-size: 0;
  transform: translateY(-50%);
}

.pc-level-overview .pc-level-arrow::before {
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1;
}

.pc-level-overview .pc-level-arrow.prev::before { content: "‹"; }
.pc-level-overview .pc-level-arrow.next::before { content: "›"; }
.pc-level-overview .pc-level-arrow.prev { left: 0; }
.pc-level-overview .pc-level-arrow.next { right: 0; }
.pc-level-overview .pc-level-arrow:disabled { visibility: visible; opacity: .25; }

.pc-level-overview .pc-level-benefits {
  min-height: 84px;
  display: grid;
  grid-template-columns: 112px repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #e4ecf7;
  border-radius: 12px;
  background: #f8faff;
}

.pc-level-overview .pc-level-benefits > strong {
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 0 14px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #246feb, #4c8ff3);
  font-size: 13px;
}

.pc-level-overview .pc-level-benefits span {
  min-width: 0;
  min-height: 58px;
  justify-content: flex-start;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff;
}

.pc-level-overview .pc-level-benefits span::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #4c8ff3;
  box-shadow: 0 0 0 4px #edf4ff;
  content: "";
}

.pc-level-overview .pc-level-benefits span i { text-align: left; }
.pc-level-overview .pc-level-benefits span strong { color: #344a66; font-size: 10px; }
.pc-level-overview .pc-level-benefits span small { margin-top: 3px; color: #7789a0; font-size: 9px; }

@media (max-width: 1180px) {
  .pc-level-overview .pc-level-carousel { padding: 0 38px; }
  .pc-level-overview .pc-level-viewport { overflow-x: auto; scroll-snap-type: x proximity; }
  .pc-level-overview .pc-level-cards { min-width: 880px; grid-template-columns: repeat(5, 160px); gap: 20px; }
  .pc-level-overview .pc-level-cards article,
  .pc-level-overview .pc-level-cards article.is-current { width: 160px; }
  .pc-level-overview .pc-level-connectors { display: none; }
  .pc-level-overview .pc-level-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pc-level-overview .pc-level-benefits > strong { min-height: 58px; }
}

@media (max-width: 760px) {
  .pc-section.pc-level-overview { padding: 22px 16px; }
  .pc-level-overview .pc-level-overview-head { align-items: flex-start; flex-direction: column; gap: 14px; }
  .pc-level-current-summary { width: 100%; min-width: 0; }
  .pc-level-overview .pc-level-carousel { padding: 0; }
  .pc-level-overview .pc-level-arrow { display: none; }
  .pc-level-overview .pc-level-cards { min-width: max-content; grid-template-columns: repeat(5, 176px); }
  .pc-level-overview .pc-level-cards article,
  .pc-level-overview .pc-level-cards article.is-current { width: 176px; scroll-snap-align: start; }
  .pc-level-overview .pc-level-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .pc-level-overview .pc-level-cards article { transition: none; }
}

/* Help center typography hierarchy */
body[data-page="help"] .faq-section h2 {
  color: #1b2941;
  font-weight: 700;
}

/* Page-header actions */
.am-page-head .am-page-action {
  min-width: 118px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid #176bed;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(90deg, #2f86ff 0%, #1769ed 100%);
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-shadow: none;
  transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}
.am-page-head .am-page-action::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--page-action-icon) center / contain no-repeat;
  mask: var(--page-action-icon) center / contain no-repeat;
}
.am-page-head .page-action-save { --page-action-icon: url("/template/newsite/pc/static/assets/icons/line-icons/save-outline.png"); }
.am-page-head .page-action-publish { --page-action-icon: url("/template/newsite/pc/static/assets/icons/line-icons/paper-plane-outline.png"); }
.am-page-head .page-action-clear { --page-action-icon: url("/template/newsite/pc/static/assets/icons/line-icons/trash-2-outline.png"); }
.am-page-head .page-action-read { --page-action-icon: url("/template/newsite/pc/static/assets/icons/line-icons/done-all-outline.png"); }
.am-page-head .page-action-withdraw {
  --page-action-icon: url("/template/newsite/pc/static/assets/icons/line-icons/wallet-outline.svg");
}
.am-page-head .page-action-save,
.am-page-head .page-action-publish,
.am-page-head .page-action-withdraw {
  border-color: #2475ec;
  background: linear-gradient(180deg, #3186fa 0%, #1d6fed 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 5px rgba(23, 105, 237, .08);
}
.am-page-head .page-action-save::before,
.am-page-head .page-action-publish::before,
.am-page-head .page-action-withdraw::before {
  width: 18px;
  height: 18px;
}
.am-page-head .am-page-action:hover:not(:disabled) {
  border-color: #0d58d7;
  background: linear-gradient(90deg, #247af1 0%, #0f5ddd 100%);
  transform: none;
}
.am-page-head .am-page-action:active:not(:disabled) {
  opacity: .86;
}
.am-page-head .page-action-save:hover:not(:disabled),
.am-page-head .page-action-publish:hover:not(:disabled),
.am-page-head .page-action-withdraw:hover:not(:disabled) {
  border-color: #1d68df;
  background: linear-gradient(180deg, #287cf0 0%, #155fdc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 6px rgba(23, 105, 237, .1);
}
.am-page-head .am-page-action:focus-visible {
  outline: 3px solid rgba(47, 134, 255, .22);
  outline-offset: 3px;
}
.am-page-head .am-page-action:disabled {
  border-color: #c8d9f0;
  color: #7188a8;
  background: #eef4fc;
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
  transform: none;
}
.am-page-head .am-page-action.is-saved {
  border-color: #18a86b;
  background: #18a86b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 5px rgba(24, 168, 107, .08);
}

@media (prefers-reduced-motion: reduce) {
  .am-page-head .am-page-action { transition: none; }
}

/* Purchases: align with the finance, favorites and history table system. */
.purchase-module .purchase-table-head,
.purchase-module .purchase-item {
  display: grid;
  grid-template-columns: minmax(300px, 2.6fr) minmax(150px, 1.1fr) minmax(90px, .7fr) minmax(96px, .75fr) minmax(138px, 1fr) minmax(170px, 1.2fr);
  align-items: center;
  column-gap: 12px;
  padding-right: 20px;
  padding-left: 20px;
}

.purchase-module .purchase-table-head {
  min-height: 42px;
  border-bottom: 1px solid var(--profile-surface-border);
  color: #8795a9;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 500;
}

.purchase-module .purchase-table-head[hidden] {
  display: none;
}

.purchase-module .purchase-table-head > span:nth-child(2),
.purchase-module .purchase-table-head > span:nth-child(3),
.purchase-module .purchase-table-head > span:nth-child(4),
.purchase-module .purchase-table-head > span:nth-child(5),
.purchase-module .purchase-table-head > span:nth-child(6),
.purchase-module .purchase-license-cell,
.purchase-module .purchase-price,
.purchase-module .purchase-payment-method,
.purchase-module .purchase-paid-date,
.purchase-module .purchase-order-code {
  justify-self: center;
  text-align: center;
}

.purchase-module .purchase-item {
  min-height: 74px;
  gap: 0 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 0;
  border-bottom: 1px solid var(--profile-surface-border);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.purchase-module .purchase-item:hover {
  border-color: var(--profile-surface-border);
  background: #f8fbff;
  box-shadow: none;
  transform: none;
}

.purchase-module .purchase-product {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.purchase-module .purchase-cover {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 7px;
}

.purchase-module .purchase-cover > span {
  right: 3px;
  top: 3px;
  padding: 3px 5px;
  font-size: 9px;
}

.purchase-module .purchase-content {
  min-width: 0;
  display: block;
}

.purchase-module .purchase-item h3 {
  margin: 0;
  color: #18304e;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.purchase-module .purchase-item h3 a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}

.purchase-module .purchase-item h3 a:hover {
  color: #1265e8;
}

.purchase-module .purchase-item h3 a:focus-visible {
  border-radius: 2px;
  outline: 3px solid rgba(18, 101, 255, .16);
  outline-offset: 2px;
}

.purchase-module .purchase-content p {
  margin: 3px 0 0;
  overflow: hidden;
  color: #8a98aa;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-module .purchase-license-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  text-align: center;
}

.purchase-module .purchase-license-badge {
  min-height: 20px;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 10px;
}

.purchase-module .purchase-license-none {
  color: #a4afbd;
  font-size: 11px;
}

.purchase-module .purchase-certificate {
  min-height: 22px;
  padding: 0 5px;
  font-size: 10px;
  white-space: nowrap;
}

.purchase-module .purchase-price {
  display: block;
  text-align: center;
}

.purchase-module .purchase-price strong {
  color: #ff5b45;
  font-size: 12px;
  line-height: 1.4;
}

.purchase-module .purchase-payment-method {
  color: #70839d;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

.purchase-module .purchase-paid-date,
.purchase-module .purchase-order-code {
  overflow: hidden;
  color: #70839d;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-module .purchase-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 6px;
}

.purchase-module .purchase-actions a,
.purchase-module .purchase-actions button {
  width: auto;
  min-width: 70px;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  white-space: nowrap;
}

.purchase-module .purchase-pagination {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0;
  padding: 9px 20px;
  border: 0;
  border-top: 1px solid var(--profile-surface-border);
  border-radius: 0;
  background: #fff;
}

.purchase-module .purchase-pagination[hidden] {
  display: none;
}

.purchase-module .purchase-pagination-total {
  color: #718096;
  font-size: 10px;
  white-space: nowrap;
}

.purchase-module .purchase-pagination-actions,
.purchase-module .purchase-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.purchase-module .purchase-page-nav,
.purchase-module .purchase-page-number {
  height: 26px;
  min-height: 26px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid #dce5f0;
  border-radius: 4px;
  color: #64748b;
  background: #fff;
  font-size: 10px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.purchase-module .purchase-page-nav {
  width: 52px;
  min-width: 52px;
}

.purchase-module .purchase-page-number {
  width: 26px;
  min-width: 26px;
  max-width: 26px;
}

.purchase-module .purchase-page-nav:hover:not(:disabled),
.purchase-module .purchase-page-number:hover:not(.is-active) {
  border-color: #8db5fa;
  color: #1769e8;
}

.purchase-module .purchase-page-number.is-active {
  border-color: #1265ff;
  color: #fff;
  background: #1265ff;
}

.purchase-module .purchase-page-nav:disabled {
  color: #bdc7d4;
  background: #f8fafc;
  cursor: not-allowed;
}

.purchase-module .purchase-page-ellipsis {
  width: 14px;
  color: #94a3b8;
  font-size: 10px;
  text-align: center;
}

@media (max-width: 1200px) {
  .purchase-module .purchase-table-head,
  .purchase-module .purchase-item {
    grid-template-columns: minmax(260px, 2fr) 140px 84px 90px 130px 155px;
    column-gap: 10px;
  }
}

@media (max-width: 900px) {
  .purchase-module .purchase-table-head {
    display: none;
  }

  .purchase-module .purchase-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 18px;
    padding: 14px;
  }

  .purchase-module .purchase-product {
    grid-column: 1 / -1;
  }

  .purchase-module .purchase-license-cell,
  .purchase-module .purchase-price,
  .purchase-module .purchase-payment-method,
  .purchase-module .purchase-paid-date,
  .purchase-module .purchase-order-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    justify-self: stretch;
    gap: 12px;
    text-align: right;
  }

  .purchase-module [data-label]::before {
    content: attr(data-label);
    color: #96a2b2;
    font-size: 10px;
    font-weight: 400;
  }

  .purchase-module .purchase-license-cell {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .purchase-module .purchase-license-cell::before {
    margin-right: auto;
  }

  .purchase-module .purchase-order-code {
    grid-column: 1 / -1;
  }

  .purchase-module .purchase-actions {
    grid-column: 1 / -1;
  }

  .purchase-module .purchase-actions a,
  .purchase-module .purchase-actions button {
    min-height: 44px;
    flex: 1;
  }
}

@media (max-width: 620px) {
  .purchase-module .purchase-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .purchase-module .purchase-price,
  .purchase-module .purchase-payment-method,
  .purchase-module .purchase-paid-date,
  .purchase-module .purchase-order-code {
    grid-column: 1;
  }

  .purchase-module .purchase-pagination {
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .purchase-module .purchase-pagination-total {
    width: 100%;
    text-align: right;
  }
}

/* Notifications: compact table layout shared with finance and library lists. */
.notification-module > .am-card {
  overflow: hidden;
  border: 1px solid var(--profile-surface-border);
  border-radius: var(--profile-surface-radius);
  background: #fff;
  box-shadow: var(--profile-surface-shadow);
}

.notification-module .notification-tabs {
  height: 55px;
  min-height: 55px;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--profile-surface-border);
  border-radius: 0;
  box-shadow: none;
}

.notification-module .notification-tabs button,
.order-module .order-tabs button {
  height: 54px;
  min-height: 54px;
}

.order-module .order-tabs {
  height: 55px;
  min-height: 55px;
  box-sizing: border-box;
}

.notification-module .notification-table-head,
.notification-module .am-notification-list article {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 190px 110px;
  align-items: center;
  column-gap: 14px;
  padding-right: 20px;
  padding-left: 20px;
}

.notification-module .notification-table-head {
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
  border-top: 0;
  border-bottom: 1px solid var(--profile-surface-border);
  color: #8795a9;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 500;
}

.finance-module .finance-table-head {
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
}

.notification-module .notification-table-head[hidden] {
  display: none;
}

.notification-module .notification-table-head > span:not(:first-child),
.notification-module .am-notification-list time,
.notification-module .notification-action {
  justify-self: center;
  text-align: center;
}

.notification-module .am-notification-list {
  display: grid;
  background: #fff;
}

.notification-module .am-notification-list article {
  min-height: 76px;
  position: relative;
  gap: 0 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--profile-surface-border);
  background: #fff;
  transition: background-color .18s ease;
}

.notification-module .am-notification-list article:last-child {
  border-bottom: 0;
}

.notification-module .am-notification-list article:hover,
.notification-module .am-notification-list article.is-unread {
  background: #f8fbff;
}

.notification-module .am-notification-list article > i {
  width: 6px;
  height: 6px;
  left: 8px;
  top: 18px;
}

.notification-module .notification-content {
  min-width: 0;
}

.notification-module .notification-content h3 {
  overflow: hidden;
  margin: 0;
  color: #18304e;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-module .notification-content p {
  overflow: hidden;
  margin: 4px 0 0;
  color: #8391a4;
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-module .am-notification-list time {
  color: #70839d;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}

.notification-module .notification-action {
  min-width: 70px;
}

.notification-module .notification-action > span {
  color: #a5b0be;
  font-size: 11px;
}

.notification-module .notification-action button {
  min-width: 70px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #c8d9f4;
  border-radius: 5px;
  color: #1769df;
  background: #fff;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.notification-module .notification-action button:hover {
  border-color: #8db5fa;
  color: #0759ee;
  background: #f3f7fd;
}

.notification-module .notification-action button:focus-visible {
  outline: 3px solid rgba(18, 101, 255, .16);
  outline-offset: 2px;
}

.notification-module .notification-empty,
.notification-module .notification-loading {
  min-height: 220px;
  grid-column: 1 / -1;
}

.notification-module .notification-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 30px 20px;
  color: #8a98aa;
  text-align: center;
}

.notification-module .notification-empty img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: .72;
}

.notification-module .notification-empty strong {
  color: #344862;
  font-size: 14px;
}

.notification-module .notification-empty span {
  font-size: 11px;
}

.notification-module .notification-empty button {
  min-height: 34px;
  margin-top: 4px;
  padding: 0 14px;
  border: 1px solid #c8d9f4;
  border-radius: 5px;
  color: #1769df;
  background: #fff;
  cursor: pointer;
}

.notification-module .notification-loading {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 24px;
}

.notification-module .notification-loading span {
  height: 44px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f3f6fa, #f8fafc, #f3f6fa);
}

.notification-module .notification-pagination {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0;
  padding: 9px 20px;
  border: 0;
  border-top: 1px solid var(--profile-surface-border);
  border-radius: 0;
  background: #fff;
}

.notification-module .notification-pagination[hidden] {
  display: none;
}

.notification-module .notification-pagination-total {
  color: #718096;
  font-size: 10px;
  white-space: nowrap;
}

.notification-module .notification-pagination-actions,
.notification-module .notification-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.notification-module .notification-page-nav,
.notification-module .notification-page-number {
  height: 26px;
  min-height: 26px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid #dce5f0;
  border-radius: 4px;
  color: #64748b;
  background: #fff;
  font-size: 10px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.notification-module .notification-page-nav {
  width: 52px;
  min-width: 52px;
}

.notification-module .notification-page-number {
  width: 26px;
  min-width: 26px;
  max-width: 26px;
}

.notification-module .notification-page-nav:hover:not(:disabled),
.notification-module .notification-page-number:hover:not(.is-active) {
  border-color: #8db5fa;
  color: #1769e8;
}

.notification-module .notification-page-number.is-active {
  border-color: #1265ff;
  color: #fff;
  background: #1265ff;
}

.notification-module .notification-page-nav:disabled {
  color: #bdc7d4;
  background: #f8fafc;
  cursor: not-allowed;
}

.notification-module .notification-page-ellipsis {
  width: 14px;
  color: #94a3b8;
  font-size: 10px;
  text-align: center;
}

@media (max-width: 1200px) {
  .notification-module .notification-table-head,
  .notification-module .am-notification-list article {
    grid-template-columns: minmax(320px, 1fr) 160px 90px;
    column-gap: 12px;
  }
}

@media (max-width: 900px) {
  .notification-module .notification-table-head {
    display: none;
  }

  .notification-module .am-notification-list article {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 18px;
    padding: 14px;
  }

  .notification-module .notification-content {
    grid-column: 1 / -1;
  }

  .notification-module .am-notification-list time,
  .notification-module .notification-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    justify-self: stretch;
    gap: 12px;
    text-align: right;
  }

  .notification-module [data-label]::before {
    content: attr(data-label);
    color: #96a2b2;
    font-size: 10px;
    font-weight: 400;
  }

  .notification-module .notification-action {
    grid-column: 1 / -1;
  }

  .notification-module .notification-action button {
    min-height: 44px;
  }
}

@media (max-width: 620px) {
  .notification-module .am-notification-list article {
    grid-template-columns: minmax(0, 1fr);
  }

  .notification-module .am-notification-list time,
  .notification-module .notification-action {
    grid-column: 1;
  }

  .notification-module .notification-pagination {
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .notification-module .notification-pagination-total {
    width: 100%;
    text-align: right;
  }
}

/* Creator works: compact management table. */
.creator-center .creator-work-card {
  overflow: hidden;
  border: 1px solid var(--profile-surface-border);
  border-radius: var(--profile-surface-radius);
  background: #fff;
  box-shadow: var(--profile-surface-shadow);
}

.creator-center .creator-table-head,
.creator-center .creator-real-list .am-work-item {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(4, 64px) 88px 80px 124px 176px;
  align-items: center;
  column-gap: 14px;
  padding-right: 20px;
  padding-left: 20px;
}

.creator-center .creator-table-head {
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--profile-surface-border);
  color: #8795a9;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 500;
}

/* Keep every account-center list header on the same 42px rhythm. */
.history-module .history-table-head,
.finance-module .finance-table-head,
.purchase-module .purchase-table-head,
.notification-module .notification-table-head,
.creator-center .creator-table-head {
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
  font-size: 12px;
}

.order-module .order-table th,
.invite-module .invite-table th {
  height: 42px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--profile-surface-border);
  font-size: 12px;
  vertical-align: middle;
}

.creator-center .creator-table-head[hidden] {
  display: none;
}

.creator-center .creator-table-head > span:not(:first-child),
.creator-center .creator-real-list .creator-metric,
.creator-center .creator-real-list .am-status,
.creator-center .creator-real-list time,
.creator-center .creator-real-list .am-row-actions {
  justify-self: center;
  text-align: center;
}

.creator-center .creator-real-list {
  display: grid;
  background: #fff;
}

.creator-center .creator-real-list .am-work-item {
  min-height: 76px;
  gap: 0 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--profile-surface-border);
  background: #fff;
  transition: background-color .18s ease;
}

.creator-center .creator-real-list .am-work-item:last-child {
  border-bottom: 0;
}

.creator-center .creator-real-list .am-work-item:hover {
  background: #f8fbff;
}

.creator-center .creator-work-product {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.creator-center .creator-work-product > img {
  width: 48px;
  height: 48px;
  display: block;
  flex: 0 0 48px;
  border-radius: 6px;
  object-fit: cover;
}

.creator-center .creator-real-list .am-work-main {
  min-width: 0;
  display: block;
}

.creator-center .creator-real-list .am-work-main h3 {
  max-width: none;
  margin: 0;
  overflow: hidden;
  color: #18304e;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-center .creator-real-list .am-work-main h3 a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}

.creator-center .creator-real-list .am-work-main h3 a:hover {
  color: #1265e8;
}

.creator-center .creator-real-list .am-work-main h3 a:focus-visible {
  border-radius: 2px;
  outline: 3px solid rgba(18, 101, 255, .16);
  outline-offset: 2px;
}

.creator-center .creator-real-list .am-work-main p {
  width: auto;
  margin: 3px 0 0;
  overflow: hidden;
  color: #8a98aa;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-center .creator-real-list .am-work-main .creator-work-note {
  margin-top: 2px;
  color: #df5b63;
}

.creator-center .creator-real-list .creator-metric {
  color: #2d405d;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.creator-center .creator-real-list .creator-earnings {
  color: #2d405d;
  font-variant-numeric: tabular-nums;
}

.creator-center .creator-real-list .am-status {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}

.creator-center .creator-real-list .am-status small {
  color: #8a98aa;
  font-size: 9px;
  font-weight: 400;
}

.creator-center .creator-real-list time {
  color: #70839d;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.creator-center .creator-real-list .am-row-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.creator-center .creator-real-list .am-row-actions button {
  min-width: 48px;
  height: 30px;
  min-height: 30px;
  flex: 0 0 auto;
  padding: 0 8px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
}

.creator-center .creator-real-list .am-row-actions .is-publish {
  border-color: #ccdcf2;
  color: #2467bd;
  background: #f9fbfe;
}

.creator-center .creator-real-list .am-row-actions .is-publish:hover {
  border-color: #a9c6ea;
  color: #1557a9;
  background: #f2f7fd;
}

.creator-center .creator-real-list .am-row-actions .is-unpublish {
  border-color: #dbe3ec;
  color: #61738a;
  background: #fafbfd;
}

.creator-center .creator-real-list .am-row-actions .is-unpublish:hover {
  border-color: #becbd9;
  color: #40546d;
  background: #f5f8fb;
}

.creator-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .18s ease, visibility .18s ease;
}

.creator-delete-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.creator-delete-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(20, 30, 48, .46);
  backdrop-filter: blur(2px);
  cursor: default;
}

.creator-delete-dialog {
  width: min(400px, 100%);
  position: relative;
  padding: 26px;
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  box-sizing: border-box;
  color: #14233c;
  background: #fff;
  box-shadow: 0 20px 52px rgba(27, 45, 74, .2);
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}

.creator-delete-modal.is-open .creator-delete-dialog {
  opacity: 1;
  transform: none;
}

.creator-delete-dialog h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.creator-delete-dialog header p {
  margin: 14px 0 0;
  color: #35445b;
  font-size: 13px;
  line-height: 1.7;
}

.creator-delete-dialog header p strong {
  color: #14233c;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.creator-delete-dialog header > span {
  display: block;
  margin-top: 5px;
  color: #8a96a8;
  font-size: 12px;
  line-height: 1.6;
}

.creator-delete-status {
  min-height: 18px;
  margin: 8px 0 0;
  color: #cf453d;
  font-size: 11px;
  line-height: 1.6;
}

.creator-delete-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.creator-delete-dialog footer button {
  min-width: 88px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid #dfe5ed;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.creator-delete-cancel {
  color: #596a81;
  background: #fff;
}

.creator-delete-cancel:hover {
  border-color: #bfcbd9;
  color: #263750;
  background: #f8fafc;
}

.creator-delete-confirm {
  border-color: #e6534b !important;
  color: #fff;
  background: #e6534b;
}

.creator-delete-confirm:hover {
  border-color: #d9433c !important;
  background: #d9433c;
  box-shadow: 0 4px 10px rgba(217, 67, 60, .18);
}

.creator-delete-dialog footer button:focus-visible {
  outline: 3px solid rgba(18, 101, 255, .18);
  outline-offset: 2px;
}

.creator-delete-dialog footer button:disabled {
  cursor: wait;
  opacity: .65;
}

@media (max-width: 620px) {
  .creator-delete-modal {
    padding: 14px;
  }

  .creator-delete-dialog {
    padding: 22px 18px 18px;
  }

  .creator-delete-dialog footer button {
    min-height: 42px;
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .creator-delete-modal,
  .creator-delete-dialog {
    transition-duration: .01ms;
  }
}

.creator-center .creator-empty,
.creator-center .creator-loading {
  min-height: 220px;
  grid-column: 1 / -1;
}

.creator-center .creator-real-pagination {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0;
  padding: 9px 20px;
  border: 0;
  border-top: 1px solid var(--profile-surface-border);
  border-radius: 0;
  background: #fff;
}

.creator-center .creator-real-pagination[hidden] {
  display: none;
}

.creator-center .creator-pagination-total {
  color: #718096;
  font-size: 10px;
  white-space: nowrap;
}

.creator-center .creator-pagination-actions,
.creator-center .creator-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.creator-center .creator-page-nav,
.creator-center .creator-page-number {
  height: 26px;
  min-height: 26px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid #dce5f0;
  border-radius: 4px;
  color: #64748b;
  background: #fff;
  font-size: 10px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.creator-center .creator-page-nav {
  width: 52px;
  min-width: 52px;
}

.creator-center .creator-page-number {
  width: 26px;
  min-width: 26px;
  max-width: 26px;
}

.creator-center .creator-page-nav:hover:not(:disabled),
.creator-center .creator-page-number:hover:not(.is-active) {
  border-color: #8db5fa;
  color: #1769e8;
}

.creator-center .creator-page-number.is-active {
  border-color: #1265ff;
  color: #fff;
  background: #1265ff;
}

.creator-center .creator-page-nav:disabled {
  color: #bdc7d4;
  background: #f8fafc;
  cursor: not-allowed;
}

.creator-center .creator-page-ellipsis {
  width: 14px;
  color: #94a3b8;
  font-size: 10px;
  text-align: center;
}

@media (max-width: 1280px) {
  .creator-center .creator-table-head,
  .creator-center .creator-real-list .am-work-item {
    grid-template-columns: minmax(210px, 1fr) repeat(4, 50px) 76px 68px 108px 166px;
    column-gap: 10px;
  }
}

@media (max-width: 900px) {
  .creator-center .creator-table-head {
    display: none;
  }

  .creator-center .creator-real-list .am-work-item {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 18px;
    padding: 14px;
  }

  .creator-center .creator-work-product,
  .creator-center .creator-real-list .am-row-actions {
    grid-column: 1 / -1;
  }

  .creator-center .creator-real-list .creator-metric,
  .creator-center .creator-real-list .am-status,
  .creator-center .creator-real-list time {
    justify-self: stretch;
  }

  .creator-center .creator-real-list .creator-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  .creator-center .creator-real-list .creator-earnings {
    grid-column: span 2;
  }

  .creator-center .creator-real-list .am-status,
  .creator-center .creator-real-list time {
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 12px;
    text-align: right;
  }

  .creator-center .creator-real-list [data-label]::before {
    content: attr(data-label);
    color: #96a2b2;
    font-size: 10px;
    font-weight: 400;
  }

  .creator-center .creator-real-list .am-row-actions button {
    min-height: 44px;
  }
}

@media (max-width: 620px) {
  .creator-center .creator-real-list .am-work-item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creator-center .creator-real-list .am-status,
  .creator-center .creator-real-list time {
    grid-column: span 1;
  }

  .creator-center .creator-real-list .creator-earnings {
    grid-column: span 2;
  }

  .creator-center .creator-real-pagination {
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .creator-center .creator-pagination-total {
    width: 100%;
    text-align: right;
  }
}

/* Global compact typography tuning for shared pages */
html { font-size: 13px; }
body { font-size: 13px; line-height: 1.55; }
:where(button, input, select, textarea) { font-size: 12px; }

:where(.hero h1, .software-head h1, .frame-hero h1, .about-hero h1, .help-hero h1, .color-tool-heading h1) {
  font-size: clamp(24px, 2vw, 32px) !important;
  line-height: 1.22 !important;
}

:where(.hero p, .software-head p, .frame-hero p, .about-hero p, .help-hero p, .color-tool-heading p) {
  font-size: 13px !important;
  line-height: 1.6 !important;
}

:where(.section-title h2, .panel-title h2, .detail-block-title h2, .resource-heading h2, .faq-section h2, .about-section h2, .download-panel-title h2, .software-block-title h2, .software-side-card h2) {
  font-size: 17px !important;
  line-height: 1.3 !important;
}

:where(.resource-card h3, .latest-item h3, .device-card h3, .tools-card h3, .creator-section-title h3, .creator-side-heading h3, .creator-utility-side h3) {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

:where(.resource-card p, .device-card p, .tools-card p, .latest-item p, .creator-section-title p) {
  font-size: 11px !important;
  line-height: 1.55 !important;
}

:where(.resource-meta, .resource-stats, .resolution, .software-tag, .software-version, .device-meta, .creator-task-list small, .creator-news-card time) {
  font-size: 10px !important;
}

@media (max-width: 680px) {
  :where(.hero h1, .software-head h1, .frame-hero h1, .about-hero h1, .help-hero h1, .color-tool-heading h1) {
    font-size: clamp(22px, 7vw, 28px) !important;
  }
}

/* Color Hunt tool */
:root {
  --color-tool-primary: #1265ff;
  --color-tool-primary-soft: #dbe8ff;
  --color-tool-success: #00a884;
  --color-tool-warning: #f28c28;
  --color-tool-danger: #e24a3b;
}

.color-tool-page {
  min-width: 0;
}

.color-tool-shell {
  display: grid;
  gap: 18px;
  padding: 18px 22px 26px;
}

.color-tool-hero {
  min-height: 260px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 22px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(218, 229, 246, 0.68);
  border-radius: 14px;
  background:
    radial-gradient(circle at 82% 18%, rgba(18, 101, 255, 0.14), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
  box-shadow: 0 16px 38px rgba(42, 76, 128, 0.07);
}

.color-tool-heading {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 34px 38px;
}

.color-tool-back {
  width: max-content;
  color: #1265ff;
  font-size: 12px;
  font-weight: 700;
}

.color-tool-heading h1 {
  margin: 0;
  color: #13213b;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: 0;
}

.color-tool-heading p {
  max-width: 620px;
  margin: 0;
  color: #61708a;
  font-size: 14px;
  line-height: 1.85;
}

.color-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.color-seed-field {
  height: 46px;
  display: grid;
  grid-template-columns: auto 98px 34px;
  gap: 10px;
  align-items: center;
  padding: 0 8px 0 14px;
  border: 1px solid #dfe8f4;
  border-radius: 9px;
  background: #ffffff;
}

.color-seed-field span {
  color: #6d7b90;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.color-seed-field input[type="text"] {
  width: 98px;
  border: 0;
  color: #15223d;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  outline: 0;
  text-transform: uppercase;
}

.color-seed-field input[type="color"] {
  width: 34px;
  height: 34px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.color-primary-action,
.color-secondary-action,
.color-section-title button,
.ui-preview-card header button {
  height: 38px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.color-primary-action {
  padding: 0 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--color-tool-primary), #0aa7ff);
  box-shadow: 0 12px 24px rgba(18, 101, 255, 0.18);
}

.color-secondary-action,
.color-section-title button {
  padding: 0 14px;
  color: #2c70e8;
  background: rgba(18, 101, 255, 0.08);
}

.color-hero-preview {
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 24px 34px 24px 0;
}

.preview-window {
  width: min(100%, 440px);
  aspect-ratio: 1.45;
  overflow: hidden;
  border: 1px solid rgba(203, 216, 235, 0.72);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 24px 48px rgba(28, 60, 110, 0.13);
}

.preview-topline {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  background: #f7faff;
}

.preview-topline span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8d4e6;
}

.preview-layout {
  height: calc(100% - 38px);
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
}

.preview-layout aside {
  background: linear-gradient(180deg, #14243d, #243a5a);
}

.preview-content {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 24px;
}

.preview-content strong {
  color: #182640;
  font-size: 17px;
}

.preview-chart {
  height: 92px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 10px;
}

.preview-chart i {
  display: block;
  border-radius: 7px 7px 3px 3px;
  background: var(--color-tool-primary);
}

.preview-chart i:nth-child(1) { height: 42%; opacity: 0.28; }
.preview-chart i:nth-child(2) { height: 72%; opacity: 0.48; }
.preview-chart i:nth-child(3) { height: 56%; opacity: 0.7; }
.preview-chart i:nth-child(4) { height: 88%; }

.preview-status {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.preview-status span {
  height: 8px;
  border-radius: 6px;
}

.preview-status span:nth-child(1) { background: var(--color-tool-success); }
.preview-status span:nth-child(2) { background: var(--color-tool-warning); }
.preview-status span:nth-child(3) { background: var(--color-tool-danger); }

.color-tool-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.palette-panel,
.palette-card {
  border: 1px solid rgba(226, 234, 247, 0.72);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(36, 70, 118, 0.045);
}

.palette-panel {
  min-width: 0;
  padding: 18px;
}

.palette-side {
  display: grid;
  gap: 14px;
}

.palette-card {
  padding: 16px;
}

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

.color-section-title span {
  color: #16233c;
  font-size: 15px;
  font-weight: 800;
}

.palette-board {
  display: grid;
  gap: 14px;
}

.palette-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.palette-row-head {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border-radius: 9px;
  background: #f7faff;
}

.palette-row-head strong {
  color: #17243d;
  font-size: 14px;
}

.palette-row-head span {
  color: #7b8aa2;
  font-size: 11px;
  line-height: 1.4;
}

.palette-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, 1fr));
  gap: 7px;
}

.palette-swatch {
  min-width: 0;
  height: 70px;
  display: grid;
  align-content: end;
  gap: 3px;
  padding: 7px 5px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  color: var(--swatch-text);
  background: var(--swatch);
  cursor: pointer;
  text-align: left;
}

.palette-swatch span,
.palette-swatch strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette-swatch span {
  font-size: 10px;
  opacity: 0.82;
}

.palette-swatch strong {
  font-size: 10px;
  font-weight: 800;
}

.palette-swatch:hover {
  outline: 2px solid rgba(18, 101, 255, 0.24);
  outline-offset: 2px;
}

.ui-preview-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 10px;
  background: #f8fbff;
  transition: background 0.2s ease, color 0.2s ease;
}

.ui-preview-card.is-dark {
  color: #ffffff;
  background: #111c2f;
}

.ui-preview-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ui-preview-card small {
  display: block;
  color: #7e8ca2;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.ui-preview-card.is-dark small {
  color: #93a4bd;
}

.ui-preview-card strong {
  display: block;
  margin-top: 4px;
  color: inherit;
  font-size: 17px;
}

.ui-preview-card header button {
  padding: 0 14px;
  color: #ffffff;
  background: var(--color-tool-primary);
}

.ui-metric-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ui-metric-row article {
  min-width: 0;
  padding: 12px;
  border-radius: 9px;
  background: #ffffff;
}

.ui-preview-card.is-dark .ui-metric-row article {
  background: rgba(255, 255, 255, 0.08);
}

.ui-metric-row span {
  color: #74839a;
  font-size: 11px;
}

.ui-metric-row strong {
  color: var(--color-tool-primary);
  font-size: 20px;
}

.ui-trend {
  height: 86px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 7px;
  padding: 12px;
  border-radius: 9px;
  background: #ffffff;
}

.ui-preview-card.is-dark .ui-trend {
  background: rgba(255, 255, 255, 0.08);
}

.ui-trend i {
  display: block;
  border-radius: 6px 6px 3px 3px;
  background: var(--color-tool-primary);
}

.ui-trend i:nth-child(1) { height: 34%; opacity: 0.25; }
.ui-trend i:nth-child(2) { height: 56%; opacity: 0.4; }
.ui-trend i:nth-child(3) { height: 78%; opacity: 0.58; }
.ui-trend i:nth-child(4) { height: 48%; opacity: 0.72; }
.ui-trend i:nth-child(5) { height: 66%; opacity: 0.86; }
.ui-trend i:nth-child(6) { height: 92%; }

.ui-status-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ui-status-list span {
  min-width: 0;
  padding: 8px 6px;
  overflow: hidden;
  border-radius: 8px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-status-list span:nth-child(1) { background: var(--color-tool-success); }
.ui-status-list span:nth-child(2) { background: var(--color-tool-warning); }
.ui-status-list span:nth-child(3) { background: var(--color-tool-danger); }

.saved-schemes {
  display: grid;
  gap: 10px;
}

.saved-schemes button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e6eef8;
  border-radius: 9px;
  background: #ffffff;
  cursor: pointer;
}

.saved-schemes span {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.saved-schemes i {
  height: 24px;
  border-radius: 6px;
}

.saved-schemes strong {
  color: #4a5d78;
  font-size: 12px;
}

.empty-saved {
  margin: 0;
  color: #7d8ba0;
  font-size: 12px;
  line-height: 1.7;
}

.color-toast {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  padding: 11px 16px;
  border-radius: 9px;
  color: #ffffff;
  background: rgba(18, 31, 52, 0.92);
  box-shadow: 0 14px 28px rgba(12, 24, 48, 0.2);
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.color-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .color-tool-hero,
  .color-tool-workbench {
    grid-template-columns: 1fr;
  }

  .color-hero-preview {
    padding: 0 28px 28px;
  }
}

@media (max-width: 760px) {
  .color-tool-shell {
    padding: 14px;
  }

  .color-tool-heading {
    padding: 26px 20px 18px;
  }

  .color-tool-actions,
  .color-seed-field {
    width: 100%;
  }

  .color-primary-action,
  .color-secondary-action {
    flex: 1;
  }

  .color-seed-field {
    grid-template-columns: auto minmax(0, 1fr) 34px;
  }

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

  .palette-swatches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .palette-swatch {
    height: 68px;
  }
}

/* Fixed five-level selector: arrows change selected card, not the visible set */
.pc-level-overview .pc-level-carousel { max-width: 1280px; padding: 0 62px; }
.pc-level-overview .pc-level-viewport { max-width: 1180px; overflow: visible; padding: 18px 0 24px; }
.pc-level-overview .pc-level-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 38px;
  transform: none !important;
}
.pc-level-overview .pc-level-cards article {
  width: auto;
  min-width: 0;
  height: 246px;
  flex: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.pc-level-overview .pc-level-cards article.is-current {
  width: auto;
  height: 246px;
  flex: none;
  z-index: 3;
  transform: scale(1.1);
}
.pc-level-overview .pc-level-cards article.is-current > img { width: 112px; height: 112px; top: 6px; }
.pc-level-overview .pc-level-cards article.is-current > strong { top: 50px; font-size: 23px; }
.pc-level-overview .pc-level-cards article.is-current > span { top: 124px; }
.pc-level-overview .pc-level-cards article.is-current > small { top: 174px; }
.pc-level-overview .pc-level-arrow.prev { left: 8px; }
.pc-level-overview .pc-level-arrow.next { right: 8px; }
.pc-level-overview .pc-level-benefits {
  grid-template-columns: 110px repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
  padding: 16px 20px;
}
.pc-level-overview .pc-level-benefits span {
  min-height: 48px;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(247, 250, 255, .84);
}
.pc-level-overview .pc-level-benefits span i { text-align: center; }

@media (max-width: 1180px) {
  .pc-level-overview .pc-level-carousel { padding: 0 42px; }
  .pc-level-overview .pc-level-cards { grid-template-columns: repeat(5, minmax(128px, 1fr)); gap: 18px; overflow-x: auto; padding: 8px 4px 18px; }
  .pc-level-overview .pc-level-cards article,
  .pc-level-overview .pc-level-cards article.is-current { width: 150px; flex-basis: auto; }
  .pc-level-overview .pc-level-benefits { display: flex; }
}

/* Level path decoration and borderless navigation */
.pc-level-overview .pc-level-viewport { position: relative; }
.pc-level-overview .pc-level-cards { position: relative; z-index: 2; }
.pc-level-connectors { height: 10px; position: absolute; z-index: 1; left: 102px; right: 102px; top: 62px; pointer-events: none; }
.pc-level-connectors::before { content: ""; height: 2px; position: absolute; left: 0; right: 50%; top: 4px; background: linear-gradient(90deg, #9fd9ce 0%, #78a9f5 52%, #776cf4 100%); }
.pc-level-connectors::after { content: ""; height: 2px; position: absolute; left: 50%; right: 0; top: 4px; background: repeating-linear-gradient(90deg, #d9e1ed 0 7px, transparent 7px 13px); }
.pc-level-connectors i { width: 9px; height: 9px; position: absolute; top: 0; border: 2px solid #fff; background: #82a8ee; box-shadow: 0 0 0 1px rgba(92,133,212,.18); transform: rotate(45deg); }
.pc-level-connectors i:nth-child(1) { left: 18.7%; background: #79c9bc; }
.pc-level-connectors i:nth-child(2) { left: 39.6%; }
.pc-level-connectors i:nth-child(3) { left: 60.5%; background: #9da9bc; }
.pc-level-connectors i:nth-child(4) { left: 81.4%; background: #c8d1df; }
.pc-level-overview .pc-level-arrow { width: 38px; height: 64px; border: 0; border-radius: 0; color: #7d91b0; background: transparent; box-shadow: none; font-size: 38px; transition: color .16s ease, transform .16s ease; }
.pc-level-overview .pc-level-arrow.prev { left: -14px; }
.pc-level-overview .pc-level-arrow.next { right: -14px; }
.pc-level-overview .pc-level-arrow.prev:hover:not(:disabled) { color: #1265ff; transform: translate(-3px, -50%); }
.pc-level-overview .pc-level-arrow.next:hover:not(:disabled) { color: #1265ff; transform: translate(3px, -50%); }
.pc-level-overview .pc-level-arrow:disabled { visibility: hidden; }

@media (max-width: 1180px) {
  .pc-level-connectors { display: none; }
}

/* Compact level overview */
.pc-section.pc-level-overview { padding: 22px 26px 20px; }
.pc-level-overview > header { margin-bottom: 6px; }
.pc-level-overview .pc-level-carousel { max-width: 1340px; padding: 0 42px; }
.pc-level-overview .pc-level-viewport { max-width: 1250px; padding: 6px 2px; }
.pc-level-overview .pc-level-cards { gap: 60px; }
.pc-level-overview .pc-level-cards article { width: 200px; height: 250px; flex-basis: 200px; }
.pc-level-overview .pc-level-cards article.is-current { width: 200px; height: 270px; flex-basis: 200px; transform: scale(1.03); }
.pc-level-overview .pc-level-cards article > img { width: 96px; height: 96px; top: 10px; }
.pc-level-overview .pc-level-cards article.is-current > img { width: 110px; height: 110px; top: 6px; }
.pc-level-overview .pc-level-cards article > strong { top: 50px; font-size: 19px; }
.pc-level-overview .pc-level-cards article.is-current > strong { top: 49px; font-size: 22px; }
.pc-level-overview .pc-level-cards article > span { top: 112px; font-size: 13px; }
.pc-level-overview .pc-level-cards article.is-current > span { top: 124px; }
.pc-level-overview .pc-level-cards article > small { top: 158px; font-size: 12px; }
.pc-level-overview .pc-level-cards article.is-current > small { top: 174px; }
.pc-level-overview .pc-level-cards article > small::before { margin-bottom: 7px; }
.pc-level-overview .pc-level-cards article.is-current > b { top: 10px; right: -27px; width: 94px; padding: 4px 0; font-size: 9px; }
.pc-level-overview .pc-level-arrow { width: 34px; height: 34px; font-size: 25px; }
.pc-level-overview .pc-level-arrow.prev { left: 0; }
.pc-level-overview .pc-level-arrow.next { right: 0; }
.pc-level-overview .pc-level-benefits { min-height: 80px; display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 18px; padding: 12px 18px; }
.pc-level-overview .pc-level-benefits > strong { padding-right: 4px; }
.pc-level-overview .pc-level-benefits span { min-width: 0; justify-content: center; }
.pc-level-overview .pc-level-benefits span img { width: 30px; height: 30px; }
.pc-level-overview .pc-level-benefits button { margin-left: 0; }

/* Keep level-card shadows visible without making them heavy */
.pc-level-overview .pc-level-viewport { padding: 10px 2px 20px; }
.pc-level-overview .pc-level-cards article {
  box-shadow: 0 6px 14px rgba(47, 78, 128, .045), inset 0 0 0 1px rgba(136,185,237,.1);
}
.pc-level-overview .pc-level-cards article.is-current {
  box-shadow: 0 7px 16px rgba(88,102,226,.11), inset 0 0 0 1px rgba(132,149,255,.1);
}

@media (max-width: 1180px) {
  .pc-level-overview .pc-level-viewport { max-width: 520px; }
  .pc-level-overview .pc-level-cards article,
  .pc-level-overview .pc-level-cards article.is-current { width: calc((100% - 60px) / 2); flex-basis: calc((100% - 60px) / 2); }
  .pc-level-overview .pc-level-benefits { display: flex; }
}
@media (max-width: 520px) {
  .pc-level-overview .pc-level-viewport { max-width: 260px; }
  .pc-level-overview .pc-level-cards article,
  .pc-level-overview .pc-level-cards article.is-current { width: 100%; flex-basis: 100%; }
}

/* Creative progression track final cascade. */
body[data-page="profile"] .pc-section.pc-level-overview { padding: 28px 30px 26px; }
body[data-page="profile"] .pc-level-overview > .pc-level-overview-head { margin-bottom: 18px; }
body[data-page="profile"] .pc-level-overview .pc-level-carousel { max-width: 1390px; padding: 0 46px; }
body[data-page="profile"] .pc-level-overview .pc-level-viewport { width: 100%; min-height: 214px; max-width: none; overflow: visible; padding: 24px 6px 10px; }
body[data-page="profile"] .pc-level-overview .pc-level-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; overflow: visible; padding: 0; }
body[data-page="profile"] .pc-level-overview .pc-level-cards article,
body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current { width: auto; height: 178px; min-height: 178px; flex-basis: auto; }
body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current { transform: translateY(-8px); }
body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current:hover { transform: translateY(-12px); }
body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current > .pc-level-state {
  width: auto;
  position: static;
  top: auto;
  right: auto;
  display: block;
  margin: 8px 0 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 8px;
  transform: none;
}
body[data-page="profile"] .pc-level-overview .pc-level-arrow { width: 34px; height: 34px; font-size: 0; }
body[data-page="profile"] .pc-level-overview .pc-level-benefits {
  min-height: 92px;
  display: grid;
  grid-template-columns: 118px repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
}
body[data-page="profile"] .pc-level-overview .pc-level-benefits > strong { padding: 0 14px; }
body[data-page="profile"] .pc-level-overview .pc-level-benefits span { justify-content: flex-start; }

@media (max-width: 1180px) {
  body[data-page="profile"] .pc-level-overview .pc-level-carousel { padding: 0 38px; }
  body[data-page="profile"] .pc-level-overview .pc-level-viewport { max-width: none; overflow-x: auto; }
  body[data-page="profile"] .pc-level-overview .pc-level-cards { min-width: 900px; grid-template-columns: repeat(5, 164px); gap: 22px; }
  body[data-page="profile"] .pc-level-overview .pc-level-cards article,
  body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current { width: 164px; flex-basis: 164px; }
  body[data-page="profile"] .pc-level-overview .pc-level-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body[data-page="profile"] .pc-section.pc-level-overview { padding: 22px 16px 18px; }
  body[data-page="profile"] .pc-level-overview .pc-level-carousel { padding: 0; }
  body[data-page="profile"] .pc-level-overview .pc-level-viewport { min-height: 210px; }
  body[data-page="profile"] .pc-level-overview .pc-level-cards { min-width: max-content; grid-template-columns: repeat(5, 174px); }
  body[data-page="profile"] .pc-level-overview .pc-level-cards article,
  body[data-page="profile"] .pc-level-overview .pc-level-cards article.is-current { width: 174px; flex-basis: 174px; }
  body[data-page="profile"] .pc-level-overview .pc-level-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}